/* Living Engraving: two fixed screens. The city plate is fitted whole (never cropped or
   stretched) on a near-black ground; the concept screen sets type over the dark board. */
:root {
  --ground: #0d0c0a;      /* around the city plate; matches its darkest stone */
  --board: #120e0b;       /* dark wood of the groove board */
  --paper: #ece4d2;       /* cream of the engraving */
  --paper-soft: rgba(236, 228, 210, .74);
  --paper-faint: rgba(236, 228, 210, .52);
  --ember: #e3a15c;       /* the carried flame; used only for focus and the way back */
  --display: 'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --display-sc: 'IM Fell English SC', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --body: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; overflow: hidden;
  background: var(--ground); color: var(--paper);
  overscroll-behavior: none;
}
body { font-family: var(--body); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

/* ---------- screen 1: the city ---------- */
.city {
  position: fixed; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.plate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  aspect-ratio: 1672 / 941;
  width: min(100vw, calc(100vh * 1672 / 941));
  width: min(100vw, calc(100dvh * 1672 / 941));
  isolation: isolate;
}
@media (max-aspect-ratio: 1/1) {
  .plate {
    aspect-ratio: 941 / 1672;
    width: min(100vw, calc(100vh * 941 / 1672));
    width: min(100vw, calc(100dvh * 941 / 1672));
  }
}
.plate picture, .plate .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plate .art { -webkit-user-drag: none; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.layer-shade { mix-blend-mode: multiply; }
.layer-warm { mix-blend-mode: soft-light; }
.layer-glow { mix-blend-mode: screen; }
.city.is-carrying.uses-mouse .plate { cursor: none; }
.city.over-lantern { cursor: pointer; }

.lantern {
  position: absolute; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; border-radius: 4px; -webkit-tap-highlight-color: transparent;
}
.lantern:focus { outline: none; }
.lantern:focus-visible { outline: 1px dashed var(--ember); outline-offset: 4px; }
.city.is-carrying .lantern { cursor: inherit; }

.wordmark, .hint {
  position: fixed; margin: 0; pointer-events: none;
  padding: 5px 11px 6px; border-radius: 2px;
  background: rgba(13, 12, 10, .66);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.wordmark {
  top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px));
  left: max(10px, env(safe-area-inset-left, 0px));
  font: 400 15px/1 var(--display-sc); letter-spacing: .16em; color: var(--paper-soft);
}
.hint {
  left: 50%; transform: translateX(-50%);
  bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  width: max-content; max-width: calc(100vw - 32px); text-align: center;
  font: italic 400 17px/1.3 var(--body); color: var(--paper-soft);
  transition: opacity .6s ease;
}
.hint.is-quiet { opacity: .55; }
.city.is-leaving .hint { opacity: 0; }

.skip {
  position: fixed; z-index: 30; top: 12px; left: 50%; transform: translate(-50%, -150%);
  padding: 8px 14px; background: var(--ground); color: var(--paper);
  font: 400 16px/1.2 var(--display-sc); letter-spacing: .06em; text-decoration: none;
  border: 1px solid var(--ember); transition: transform .2s ease;
}
.skip:focus { transform: translate(-50%, 0); outline: none; }

/* ---------- screen 2: the carved surface ---------- */
.concept {
  position: fixed; inset: 0; z-index: 20; overflow: hidden;
  background: var(--board); opacity: 0; transition: opacity .7s ease;
}
.concept.is-visible { opacity: 1; }
.concept-art, .concept-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.concept-art img { object-fit: cover; object-position: 72% 50%; -webkit-user-drag: none; }
.concept::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 14, 11, .92) 0%, rgba(18, 14, 11, .84) 30%, rgba(18, 14, 11, .5) 41%, rgba(18, 14, 11, 0) 54%);
}
.concept-copy {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  left: max(clamp(24px, 5vw, 96px), env(safe-area-inset-left, 0px));
  width: min(30rem, 33vw);
  max-height: calc(100% - 48px); overflow-y: auto;
}
.concept-copy h1 {
  font: 400 clamp(30px, 2.7vw, 46px)/1.04 var(--display);
  letter-spacing: .01em; margin: 0 0 .45em; text-wrap: balance;
}
.concept-copy h1:focus { outline: none; }
.concept-copy .tagline { font-size: clamp(20px, 1.65vw, 27px); line-height: 1.25; margin: 0 0 1.05em; }
.concept-copy .tagline strong { font-weight: 600; }
.concept-copy p {
  font-size: clamp(16px, 1.16vw, 19.5px); line-height: 1.55; margin: 0 0 .8em;
  color: rgba(236, 228, 210, .9); max-width: 34em;
}
.back {
  margin-top: 1.1em; padding: 6px 0 4px; border: 0; border-bottom: 1px solid var(--ember);
  background: none; color: var(--paper); cursor: pointer;
  font: 400 18px/1.2 var(--display-sc); letter-spacing: .05em;
}
.back:hover { color: #fff6e2; }
.back:focus-visible { outline: 1px dashed var(--ember); outline-offset: 5px; }

@media (max-aspect-ratio: 1/1) {
  .concept { display: flex; flex-direction: column; }
  .concept::before { display: none; }
  .concept-art { position: relative; inset: auto; height: auto; flex: 1 1 0; min-height: 24vh; }
  .concept-art img { object-position: 58% 62%; }
  .concept-copy {
    position: relative; top: auto; left: auto; transform: none; width: auto; flex: 0 1 auto;
    max-height: 76vh; max-height: 76dvh;
    padding-block: 16px max(16px, calc(env(safe-area-inset-bottom, 0px) + 10px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    background: var(--board); border-top: 1px solid rgba(227, 161, 92, .32);
  }
  .concept-copy h1 { font-size: clamp(23px, 6.4vw, 30px); margin-bottom: .3em; }
  .concept-copy .tagline { font-size: clamp(17px, 4.7vw, 20px); margin-bottom: .7em; }
  .concept-copy p { font-size: clamp(14.5px, 3.95vw, 16.5px); line-height: 1.42; margin-bottom: .6em; }
  .back { margin-top: .5em; font-size: 17px; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .concept-copy h1 { font-size: 22px; }
  .concept-copy .tagline { font-size: 16.5px; }
  .concept-copy p { font-size: 14.5px; line-height: 1.36; }
}
/* phones held sideways: keep the text column inside the short screen */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .concept::before { background: linear-gradient(90deg, rgba(18, 14, 11, .94) 0%, rgba(18, 14, 11, .86) 52%, rgba(18, 14, 11, .3) 66%, rgba(18, 14, 11, 0) 76%); }
  .concept-copy { width: min(38rem, 60vw); max-height: calc(100% - 20px); }
  .concept-copy h1 { font-size: 22px; margin-bottom: .2em; }
  .concept-copy .tagline { font-size: 16px; margin-bottom: .45em; }
  .concept-copy p { font-size: 14px; line-height: 1.34; margin-bottom: .4em; }
  .back { margin-top: .3em; font-size: 15px; }
}

/* ---------- development switch (?dev only) ---------- */
.dev {
  position: fixed; z-index: 40; left: max(10px, env(safe-area-inset-left, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px));
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #cfe;
}
.dev button {
  font: inherit; color: #cfe; background: rgba(0, 0, 0, .7); border: 1px solid #5cc; padding: 5px 8px; cursor: pointer;
}
.dev button[aria-pressed="true"] { background: #164; }
.dev span { background: rgba(0, 0, 0, .7); padding: 5px 8px; }

@media (prefers-reduced-motion: reduce) {
  .concept, .hint, .skip { transition-duration: .01s; }
}