/* MORTLAKE - mortlakegames.com
   one stylesheet for every page. animations live only inside
   (prefers-reduced-motion: no-preference); the still state is the finished one. */

@font-face {
  font-family: "Fell";
  src: url("/assets/fonts/fell-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fell";
  src: url("/assets/fonts/fell-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #0b0a0c;          /* the dark */
  --bone: #d9cfbd;         /* old bone: 12.8:1 on ink */
  --bone-dim: #a1978a;     /* quieter text: 6.9:1 on ink, 6.0:1 under the lantern */
  --seam: #4a433c;         /* lines only, never text */
  --blood: #6e1a15;        /* dried blood: fills only, bone on it is 8.2:1 */
  --blood-lit: #84231c;
  --thread: #86281e;       /* stitches */
  --thread-line: #b8443a;  /* link underlines: 3.7:1 on ink, so a link is told from plain text */

  --serif: "Fell", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1rem, 5vw, 6rem);

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  color: var(--bone);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font: 400 1.0625rem/1.7 var(--sans);
  overflow-wrap: break-word;
}

h1,
h2,
p,
dl,
dd {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--blood);
  color: var(--bone);
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--thread-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 4px;
}

/* the dark, the lantern and the grain - all of it lies under the text,
   so the text never loses contrast */

.dark {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 26%, rgb(217 207 189 / 0.05), rgb(217 207 189 / 0) 70%),
    radial-gradient(ellipse 120% 100% at 50% 42%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.6));
}

.dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/grain.svg");
  opacity: 0.05;
}

.lantern {
  position: absolute;
  top: 0;
  left: 0;
  width: 52rem;
  height: 52rem;
  margin: -26rem 0 0 -26rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(217 207 189 / 0.08), rgb(217 207 189 / 0.035) 45%, rgb(217 207 189 / 0));
  opacity: 0;
  transform: translate3d(50vw, 30vh, 0);
}

.lantern-live .lantern {
  opacity: 1;
}

.lantern-live .lantern.is-away {
  opacity: 0.3;
}

/* masthead */

.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 92vh;
  min-height: 92svh;
  padding: 4rem var(--gutter) 3rem;
  text-align: center;
}

.portrait {
  width: clamp(7.5rem, 16vw, 11rem);
  height: auto;
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent);
  mask-image: radial-gradient(closest-side, #000 58%, transparent);
}

.sigil {
  max-width: 100%;
}

.mark {
  margin-right: -0.08em; /* the last letter's spacing, so the word sits truly centred */
  font: 400 clamp(2rem, 12.4vw, 9.5rem)/1 var(--serif); /* 2rem keeps the word whole down to 280px */
  letter-spacing: 0.08em;
}

.thread {
  width: 100%;
  height: auto;
  margin-top: 0.35em;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
}

.thread .seam {
  stroke: var(--seam);
  stroke-width: 1.5;
}

.thread .stitches path {
  stroke: var(--thread);
  stroke-width: 2.6;
}

.thread .tail {
  stroke: var(--thread);
  stroke-width: 1.5;
}

.thread .knot {
  fill: var(--thread);
}

/* now: one line from content/now.txt */
.now {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  color: var(--bone-dim);
  font: italic 400 clamp(1.125rem, 1.4vw + 0.55rem, 2rem)/1.4 var(--serif);
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.now-label {
  font-style: normal;
}

/* chapters, numbered by css so a hidden one leaves no gap */

main {
  counter-reset: chapter;
}

.chapter {
  counter-increment: chapter;
  display: grid;
  gap: 0.75rem 2.5rem;
  align-items: baseline;
  width: min(100% - 2 * var(--gutter), 62rem);
  margin-inline: auto;
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
}

.numeral {
  color: var(--bone-dim);
  font: italic 400 clamp(1.375rem, 1vw + 0.9rem, 1.875rem)/1 var(--serif);
}

.numeral::before {
  content: counter(chapter, lower-roman) ".";
}

.chapter h2 {
  font: 400 clamp(2.25rem, 5.5vw, 4rem)/1.05 var(--serif);
  text-wrap: balance;
}

.chapter--game h2 {
  font-size: clamp(2.75rem, 8vw, 6rem);
}

.lede {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: clamp(1.1875rem, 0.8vw + 0.8rem, 1.5rem);
  line-height: 1.5;
  text-wrap: balance;
}

.status {
  margin-top: 0.4rem;
  color: var(--bone-dim);
  font: italic 400 clamp(1.1875rem, 0.8vw + 0.8rem, 1.5rem)/1.5 var(--serif);
}

.actions {
  margin-top: 2.25rem;
}

.button {
  position: relative;
  display: inline-block;
  padding: 0.85rem 1.75rem 0.95rem;
  background: var(--blood);
  color: var(--bone);
  font: 400 1.25rem/1.2 var(--serif);
  text-decoration: none;
}

/* a stitched hem inside the button, like the edge of a leather tag */
.button::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgb(217 207 189 / 0.3);
  pointer-events: none;
}

.button[href]:hover {
  background: var(--blood-lit);
}

.button:not([href]) {
  cursor: default;
}

.soon {
  margin-top: 0.85rem;
  color: var(--bone-dim);
  font: italic 400 1.0625rem/1.4 var(--serif);
}

.prose {
  max-width: 34rem;
  margin-top: 1.5rem;
  color: var(--bone-dim);
  font-size: clamp(1.0625rem, 0.6vw + 0.8rem, 1.3125rem);
  text-wrap: pretty;
}

.prose p:first-child {
  color: var(--bone);
}

.prose p + p {
  margin-top: 0.6rem;
}

.letter {
  margin-top: 1.5rem;
}

.mail {
  font: italic 400 clamp(1.5rem, 4.2vw, 2.75rem)/1.2 var(--serif);
  overflow-wrap: anywhere;
}

.elsewhere {
  display: grid;
  gap: 0.5rem;
  max-width: 30rem;
  margin-top: 2.5rem;
}

.elsewhere div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
}

.elsewhere dt {
  color: var(--bone-dim);
  font-size: clamp(0.9375rem, 0.3vw + 0.8rem, 1.0625rem);
  letter-spacing: 0.04em;
}

.elsewhere dd {
  font: 400 clamp(1.25rem, 0.5vw + 1rem, 1.5rem)/1.45 var(--serif);
}

/* news: on the home page, the list page and the posts */

.news-list {
  display: grid;
  gap: 0.9rem;
  max-width: 42rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.news-list li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
}

.news-list time {
  color: var(--bone-dim);
  font-size: clamp(0.9375rem, 0.3vw + 0.8rem, 1.0625rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.news-list a {
  font: 400 clamp(1.25rem, 0.6vw + 1rem, 1.625rem)/1.35 var(--serif);
}

.news-list--all {
  margin-top: 2.5rem;
}

.draft-mark {
  margin-left: 0.5rem;
  color: var(--bone-dim);
  font: italic 400 0.9375rem/1 var(--serif);
}

.more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.75rem;
  font: italic 400 1.1875rem/1.4 var(--serif);
}

.empty {
  margin-top: 2.5rem;
  color: var(--bone-dim);
  font: italic 400 1.375rem/1.4 var(--serif);
}

/* feedback: ready letters */

.hint {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--bone-dim);
}

.letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.letters a {
  font: italic 400 clamp(1.5rem, 2.4vw + 0.8rem, 2.25rem)/1.2 var(--serif);
}

/* inner pages: the news list and a post */

.page-head,
.page {
  width: min(100% - 2 * var(--gutter), 46rem);
  margin-inline: auto;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  align-items: baseline;
  padding-top: clamp(2rem, 6vh, 4rem);
}

.crumb {
  font: italic 400 1.25rem/1 var(--serif);
}

.page {
  padding-block: clamp(3rem, 10vh, 6rem) clamp(1rem, 4vh, 3rem);
}

.page-title {
  font: 400 clamp(2.5rem, 7vw, 4.5rem)/1.05 var(--serif);
  text-wrap: balance;
}

.post-date {
  margin-top: 0.75rem;
  color: var(--bone-dim);
  font: italic 400 1.1875rem/1.4 var(--serif);
}

.post-body {
  max-width: 38rem;
  margin-top: 2.25rem;
  color: var(--bone);
  font-size: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem);
  line-height: 1.75;
  text-wrap: pretty;
}

.post-body > * + * {
  margin-top: 1em;
}

.post-body ul,
.post-body ol {
  margin-bottom: 0;
  padding-left: 1.5em;
}

.post-body ul {
  list-style: "- ";
}

.post-body li + li {
  margin-top: 0.35em;
}

.page .more {
  margin-top: 3.5rem;
}

.draft-note {
  display: inline-block;
  margin-bottom: 1.75rem;
  padding: 0.3rem 0.75rem;
  border: 1px dashed var(--thread-line);
  font-size: 0.9375rem;
}

/* secrets: lines from content/secrets.txt, seen only in the lantern's light.
   site.js makes this layer on a desktop with motion allowed; there is none otherwise */

.secrets {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(circle 12rem at var(--lx, -50rem) var(--ly, -50rem), #000 20%, transparent);
  mask-image: radial-gradient(circle 12rem at var(--lx, -50rem) var(--ly, -50rem), #000 20%, transparent);
}

.secrets.is-away {
  opacity: 0;
}

.secrets-sheet {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.secret {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  color: rgb(217 207 189 / 0.6);
  font: italic 400 1.1875rem/1.3 var(--serif);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.secret::before {
  content: attr(data-text);
}

@media (max-width: 30em) {
  .news-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }
}

@media (min-width: 52em) {
  .chapter {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .numeral {
    text-align: right;
  }
}

/* colophon */

.colophon {
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) 3rem;
  color: var(--bone-dim);
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-align: center;
}

.end-mark {
  width: 3rem;
  margin: 0 auto 1.75rem;
  fill: none;
  stroke-linecap: round;
}

.end-mark .seam {
  stroke: var(--seam);
  stroke-width: 1.2;
}

.end-mark .stitches path {
  stroke: var(--thread);
  stroke-width: 1.8;
}

.colophon p + p {
  margin-top: 0.3rem;
}

/* 404 */

.lost {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3rem var(--gutter);
  text-align: center;
}

.home-mark {
  font: 400 1.5rem/1 var(--serif);
  letter-spacing: 0.08em;
  text-decoration: none;
}

.lost-title {
  margin-top: clamp(3rem, 10vh, 6rem);
  font: 400 clamp(2.25rem, 7vw, 4.5rem)/1.1 var(--serif);
}

.thread--cut {
  width: min(100%, 22rem);
  margin: 1.5rem auto 0;
}

.thread--cut .fray {
  stroke: var(--seam);
  stroke-width: 1.2;
}

.lost-text {
  max-width: 28rem;
  text-wrap: balance;
  margin-top: 1.75rem;
  color: var(--bone-dim);
}

.lost-back {
  margin-top: 2.5rem;
  font: italic 400 1.375rem/1.3 var(--serif);
}

/* motion, only for those who did not ask for less */

@media (prefers-reduced-motion: no-preference) {
  .lantern {
    transition: opacity 1.2s ease;
  }

  a,
  .button {
    transition: text-decoration-color 0.3s ease, background-color 0.3s ease;
  }

  .portrait {
    animation: surface 2.4s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }

  .now {
    animation: surface 1.6s 1.4s ease both;
  }

  .secrets {
    transition: opacity 0.8s ease;
  }

  .thread .sew {
    stroke-dasharray: 1;
    animation: sew 0.34s cubic-bezier(0.55, 0, 0.25, 1) both;
  }

  .thread .seam {
    animation-duration: 1.2s;
    animation-delay: 0.3s;
  }

  .thread .stitches .sew:nth-child(1) { animation-delay: 1.05s; }
  .thread .stitches .sew:nth-child(2) { animation-delay: 1.19s; }
  .thread .stitches .sew:nth-child(3) { animation-delay: 1.33s; }
  .thread .stitches .sew:nth-child(4) { animation-delay: 1.47s; }
  .thread .stitches .sew:nth-child(5) { animation-delay: 1.61s; }
  .thread .stitches .sew:nth-child(6) { animation-delay: 1.75s; }
  .thread .stitches .sew:nth-child(7) { animation-delay: 1.89s; }
  .thread .stitches .sew:nth-child(8) { animation-delay: 2.03s; }

  .thread .knot {
    animation: surface 0.4s 2.3s ease both;
  }

  .thread .tail {
    animation-duration: 0.7s;
    animation-delay: 2.45s;
  }

  .thread--cut .fray {
    animation-duration: 0.5s;
    animation-delay: 1.8s;
  }
}

@keyframes sew {
  from {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  1% {
    opacity: 1;
  }

  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes surface {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* windows high contrast and other forced palettes */

@media (forced-colors: active) {
  .button {
    border: 1px solid ButtonText;
  }

  .dark {
    display: none;
  }
}

@media print {
  :root {
    --bone: #000;
    --bone-dim: #4a4a4a;
  }

  html {
    background: #fff;
    color: #000;
  }

  .dark,
  .secrets,
  .thread,
  .end-mark {
    display: none;
  }

  .masthead,
  .lost {
    min-height: 0;
  }

  .chapter {
    padding-block: 1.5rem;
  }

  .button {
    background: none;
    color: inherit;
    text-decoration: underline;
  }
}