/* Fonts ship with the site (SIL OFL 1.1, licences in assets/fonts). Cormorant Garamond for the story, Inter for small caps and footer. */
@font-face { font-family: "Cormorant Garamond"; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
:root { color-scheme: dark; --ink: #ece6d8; --ink-soft: #d9d6cf; --foot: #97a2ae; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0b141d; color: var(--ink); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { min-height: 100svh; }
/* The scene rises slowly out of the dark once forest and lantern are both loaded, so nothing pops in on its own.
   Without the script the still fades in by CSS alone after a few seconds. */
.plate { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: 0; opacity: 0; animation: fadein 2.8s ease 6s forwards; }
.js .plate { animation: none; transition: opacity 3.2s ease; }
.show .plate { opacity: 1; }
#lantern { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; opacity: 0; transition: opacity 3.2s ease; -webkit-tap-highlight-color: transparent; }
.live #lantern { opacity: 1; }
@keyframes fadein { to { opacity: 1; } }
.no-webgl #lantern, .no-webgl #lantern-control { display: none; }
/* The lantern is the control; this button only carries focus and its name for keyboard and screen readers. */
#lantern-control { position: fixed; z-index: 1; left: 0; top: 0; width: 0; height: 0; padding: 0; margin: 0; border: 0; background: none; color: transparent; font-size: 0; pointer-events: none; border-radius: 40% 40% 34% 34%; outline: none; }
#lantern-control:focus-visible { box-shadow: 0 0 0 1px rgba(245, 197, 137, .45), 0 0 22px 2px rgba(245, 197, 137, .14); }
.page, .copy { pointer-events: none; }
.logo, .text, .foot { pointer-events: auto; }

.copy { position: fixed; z-index: 2; right: 6.5vw; top: 50%; transform: translateY(-50%); width: min(28vw, 430px); } /* vertically centred on the screen */
h1 { margin: 0; }
.logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 18px rgba(4, 10, 18, .45)); animation: rise 1.6s ease .2s both; }
/* A soft, feathered darkening behind logo and text: contrast without a visible panel. */
.copy::before { content: ""; position: absolute; z-index: -1; left: -22%; right: -26%; top: -14%; bottom: -22%; background: radial-gradient(closest-side, rgba(4, 9, 15, .62), rgba(4, 9, 15, .32) 55%, transparent); pointer-events: none; animation: rise 1.6s ease .4s both; }
.text { margin-top: 4.2vh; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(19px, .8vw + .7rem, 24px); line-height: 1.42; color: #e9e2d3; text-shadow: 0 1px 1px rgba(2, 5, 9, .7), 0 0 22px rgba(3, 7, 12, .75); font-kerning: normal; font-feature-settings: "kern", "liga", "onum"; animation: rise 1.6s ease .6s both; }
.text p { margin: 0; }
.tag { margin-top: 1.9em !important; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-feature-settings: normal; letter-spacing: .4em; font-size: .6em; color: #f3ecdc; font-weight: 500; }
/* Logo and text fade in by CSS alone, so they appear even if the script cannot run. */
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .logo, .text, .copy::before { animation: none; } .js .plate, #lantern { transition-duration: 1s; } }

.foot { position: fixed; z-index: 2; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); display: flex; align-items: center; justify-content: center; gap: 1.5em; font-size: 12px; letter-spacing: .06em; color: var(--foot); }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--ink); }
.foot mldtk-signature { opacity: .85; }
.foot .steam { display: inline-flex; align-items: flex-start; padding: 4px; margin: -4px; color: #fff; opacity: .85; }
.foot .steam:hover, .foot .steam:focus-visible { color: #fff; opacity: 1; }
.foot .steam .reg { font-size: 7px; line-height: 1; margin-left: 1px; }
.foot .steam svg { display: block; }
.foot .sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .18); }

/* Short landscape screens (phones held sideways): smaller copy so text and footer never collide. */
@media (min-aspect-ratio: 1/1) and (max-height: 560px) {
  .copy { top: calc(50% - 12px); right: max(5vw, env(safe-area-inset-right, 0px)); width: min(36vw, 340px); }
  .logo { width: 78%; }
  .text { margin-top: 2.6vh; font-size: 15px; line-height: 1.38; }
  .tag { margin-top: 1.2em !important; }
  .foot { bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); font-size: 10.5px; gap: 1.1em; }
}

/* Mobile / portrait: its own composition. Logo in the calm top fog, lantern in the gateway, text over the dark roots.
   The text never starts above 75 % of the viewport (below the lantern); if it does not fit, the page scrolls. */
@media (max-aspect-ratio: 1/1) {
  .plate { object-position: 50% 50%; }
  .page { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100svh; padding: calc(env(safe-area-inset-top, 0px) + 5.5svh) 7vw calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .copy { position: static; transform: none; width: auto; display: flex; flex-direction: column; flex: 1 0 auto; }
  .logo { width: min(64vw, 340px); margin: 0 auto; }
  .spacer { flex: 1 0 auto; min-height: calc(75svh - 5.5svh - min(64vw, 340px) * .4644 - env(safe-area-inset-top, 0px)); }
  .copy::before { left: -7vw; right: -7vw; top: auto; bottom: -4svh; height: 46svh; background: linear-gradient(to top, rgba(4, 9, 15, .55), rgba(4, 9, 15, .3) 60%, transparent); }
  .text { margin: 0 auto; max-width: 30em; font-size: clamp(17px, 4.6vw, 23px); line-height: 1.4; text-align: center; text-wrap: pretty; }
  .tag { margin-top: 1.4em !important; font-size: .62em; letter-spacing: .34em; }
  .foot { position: static; margin-top: 20px; flex-wrap: wrap; gap: .45em 1.1em; font-size: 11px; }
  .foot > span:not(.sep) { flex-basis: 100%; text-align: center; order: -1; }
  .foot mldtk-signature { order: 2; flex-basis: 100%; display: flex; justify-content: center; margin-top: .35em; }
  .foot .sep { display: none; }
}