/* ==========================================================================
   cengiz.page — "SOLSTICE" · a cinematic ice quarterly
   Palette, type and motion per the implementation brief.

   ACCENT BUDGET: --accent appears at most twice per viewport.
   Links, drop caps, active ticks, the one button. Never on chips,
   never as fills, never on more than one rule per section.
   ========================================================================== */

:root {
  --bg:             #060B12;  /* abyss — page background, never pure black */
  --surface:        #0C1420;  /* glacier shelf — cards, plates, panels */
  --surface-raised: #121D2C;  /* frost glass — masthead fill, hover states */
  --ink:            #E9F0F6;  /* frost white — display + body text */
  --ink-muted:      #8DA2B5;  /* sea mist — captions, folios, dates */
  --accent:         #8FD8EA;  /* light shaft — the single glow color */
  --hairline:       #1C2938;  /* crevasse — 1px rules, borders, spines */

  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-furniture: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --t-hero:   clamp(3rem, 11vw, 9rem);
  --t-title:  clamp(2rem, 5vw, 4rem);
  --t-quote:  clamp(1.5rem, 3.5vw, 2.5rem);
  --t-body:   clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-kicker: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);

  /* was clamp(6rem, 14vh, 11rem) — the original "one idea per viewport"
     pacing; tightened once the sections grew content-dense */
  --section-pad: clamp(3.5rem, 7vh, 5.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- base ---------- */

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

html {
  color-scheme: dark;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 300; font-family: var(--font-display); }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 500; }

::selection { background: rgba(143, 216, 234, 0.28); }

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

/* ---------- utilities ---------- */

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: 65ch; }

.kicker {
  font-family: var(--font-furniture);
  font-weight: 500;
  font-style: normal;
  font-size: var(--t-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1em;
}

/* breadcrumb row on content pages — the kicker's voice, but linked */
.crumbs {
  font-family: var(--font-furniture);
  font-weight: 500;
  font-style: normal;
  font-size: var(--t-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1em;
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent); }
.crumbs .crumbs-sep { margin: 0 0.5em; opacity: 0.6; }

.folio {
  font-family: var(--font-furniture);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section {
  padding-block: var(--section-pad);
}
/* Uniform spacing around the section dividers: the last element of a section
   must not add its own trailing margin on top of the section padding, or the
   gap ABOVE the following divider drifts wider than the gap below (the
   dictionary card and the birthday notice each did this). Section padding +
   the divider's own margin are the single source of that vertical rhythm. */
.section > .container > *:last-child { margin-bottom: 0; }

.section-title {
  font-size: var(--t-title);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

/* diamond divider */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 0;
  /* breathing room: without it the next section's kicker sits a bare 56px
     under the rule and the page rhythm tightens (No. 05 read as cramped) */
  margin: clamp(3rem, 7vh, 6rem) auto;
  max-width: 1200px;
  padding-inline: var(--gutter);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--hairline);
}
.divider span {
  width: 6px;
  height: 6px;
  background: var(--hairline);
  transform: rotate(45deg);
  flex: none;
}

/* framed plate */
.plate {
  margin: 0;
  border: 1px solid var(--hairline);
  background: var(--surface);
}

/* hairline-only chips — whisper-quiet, never filled, never accent */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.25rem 0 0; list-style: none; }
.chips li {
  font-family: var(--font-furniture);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.35em 0.75em;
}

/* drop cap */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.2em;
  line-height: 0.85;
  padding-right: 0.12em;
  margin-top: 0.05em;
  color: var(--accent);
}
@supports (initial-letter: 3) {
  .dropcap::first-letter { float: none; initial-letter: 3 2; font-size: unset; line-height: unset; margin-top: 0; }
}

/* ---------- film grain (one per page) ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- skip link ---------- */

.skip-link {
  position: absolute;
  left: 50%;
  top: 0.75rem;
  transform: translate(-50%, -300%);
  z-index: 1001;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-furniture);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75em 1.5em;
  border: 1px solid var(--hairline);
}
@media (prefers-reduced-motion: no-preference) {
  .skip-link { transition: transform 0.2s; }
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- masthead ---------- */

.masthead {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  font-family: var(--font-furniture);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s;
}
.masthead.scrolled {
  background: rgba(12, 20, 32, 0.72);
  /* the ONLY backdrop-filter element on any page */
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--hairline);
}
.masthead .wordmark {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.masthead .meridian {
  display: none;
  color: var(--ink-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .masthead .meridian { display: block; }
}
.masthead nav ul {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.masthead nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 3px;
}
.masthead nav a:hover { color: var(--ink); }
.masthead nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
}

/* NOTE: the nav is a single non-wrapping row and stays that way only because it
   holds THREE items. Six were tried on 2026-07-31 (adding Table/Notes/Comics)
   and measured 599px wide in a 375px viewport — the extra items were clipped
   clean off the screen and unreachable, since the header is fixed and nothing
   scrolls to reveal them. Adding a fourth item means re-checking at 375px; a
   fifth or sixth needs the masthead to stack and the top paddings on
   .cold-open / .page-main / .lost to grow with it. */

/* Small phones. Even with three items the default furniture did not fit: at
   375px the row measured 408px, so "Contact" sat 33px past the right edge and
   was half cut off — the header is fixed and the page does not scroll
   sideways, so it was silently clipped, not reachable. Long-standing; found
   and fixed 2026-07-31. The fix TIGHTENS rather than reflows — the row stays
   one line, which keeps the header at its 57px height so no page's top padding
   has to change. Letter-spacing does most of the work (it costs ~0.08em on
   every one of ~39 characters); the type drops only 1px.
   Breakpoint is 480, not the ~430 where the default *just* fits: at 431 the
   default row measured exactly flush to the content box with ZERO slack, so any
   wider font metric — Space Grotesk failing to load and falling back to
   Segoe UI/system-ui — would clip it again. 480 leaves the default ~50px. */
@media (max-width: 480px) {
  .masthead {
    gap: 0.6rem;
    padding-inline: 1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
  .masthead nav ul { gap: 0.55rem; }
}

/* ==========================================================================
   HOME
   ========================================================================== */

/* ---------- section 1 · cold open ---------- */

.cold-open {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* pinned to the top: the gap under the masthead stays constant at any
     window size — leftover viewport height falls into the dark stage
     below the title, where the fade and scroll cue live */
  justify-content: flex-start;
  padding: 5.5rem var(--gutter) 5rem;
}

/* atmosphere: the SAME fortress file, blurred into weather — one request, cached */
.atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.atmosphere img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.3);
  filter: blur(48px) saturate(1.15) brightness(0.55);
}

/* light shaft — oversized and rotated on the compositor (transform-only;
   a gradient-angle animation would repaint the whole viewport every frame) */
.cold-open::after {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(143, 216, 234, 0.06) 50%, transparent 58%);
}
@media (prefers-reduced-motion: no-preference) {
  .cold-open::after { animation: shaft-sweep 30s ease-in-out infinite alternate; }
}
@keyframes shaft-sweep {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg); }
}

/* bottom-up fade from --bg — melts the plate's snowfield into the abyss so
   the title card always sits on darkness */
.hero-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 58%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 26%, rgba(6, 11, 18, 0.82) 52%, transparent);
}

/* The framed-plate + blurred-bleed treatment is the cover's signature —
   keep the plate letterboxed, never full-bleed. 16:9 fills the viewport
   without a dead band above; the crop favors the monitors over the chair. */
.hero-plate {
  position: relative;
  z-index: 1;
  /* width also answers to viewport height so the plate scales with the
     window instead of leaving voids */
  width: min(1100px, 100%, calc((100svh - 14rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
@media (max-width: 760px) {
  .hero-plate { aspect-ratio: 16 / 10; }
}

.title-card {
  position: relative;
  z-index: 4;
  text-align: center;
  margin-top: calc(-1 * clamp(3rem, 9vh, 6.5rem));
}
.hero-name {
  font-size: var(--t-hero);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 32px rgba(6, 11, 18, 0.65);
}
.hero-name span { display: inline-block; }
.title-card .kicker {
  margin: 0 0 1.25rem;
  color: var(--ink);
  text-shadow: 0 1px 16px rgba(6, 11, 18, 0.8);
}
.hero-sub {
  font-style: italic;
  color: var(--ink-muted);
  margin: 1.5rem 0 0;
}

/* title-card reveal */
@media (prefers-reduced-motion: no-preference) {
  .hero-name span {
    animation: card-reveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero-name span:nth-child(2) { animation-delay: 0.12s; }
  .title-card .kicker { animation: fade-reveal 1.2s ease-out both; }
  .hero-sub { animation: fade-reveal 1.4s ease-out 0.5s both; }
  @keyframes card-reveal {
    from { opacity: 0; filter: blur(14px); letter-spacing: 0.35em; }
    to   { opacity: 1; filter: blur(0);   letter-spacing: 0.02em; }
  }
  @keyframes fade-reveal {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

.scroll-cue {
  /* in-flow flex child: leftover viewport slack (margin-top: auto) pins it to
     the cover's bottom, but when the title card outgrows the viewport (wide,
     short, or zoomed screens) it flows BELOW the sub-line instead of being
     absolutely pinned through it */
  position: relative;
  margin-top: auto;
  padding-top: 3rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.scroll-cue .cue-line {
  width: 1px;
  height: 48px;
  background: var(--ink-muted);
}
.scroll-cue .cue-text {
  writing-mode: vertical-rl;
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue { animation: breathe 3s ease-in-out infinite alternate; }
  @keyframes breathe { from { opacity: 0.5; } to { opacity: 1; } }
}

/* ---------- section 2 · the name ---------- */

.dictionary {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1rem, 4vw, 3rem);
  text-align: center;
  margin-block: 2rem;
}
.dictionary .headword {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: 0.01em;
}
.dictionary .phonetic {
  font-style: italic;
  color: var(--ink-muted);
  margin: 0.5rem 0 0;
}
.dictionary .phonetic a { color: var(--ink-muted); }
.dictionary .phonetic a:hover { color: var(--accent); }
.dictionary .say {
  margin: 0.75rem 0 0;
  color: var(--ink-muted);
}
.dictionary .say strong { color: var(--ink); font-weight: 500; }
.dictionary .definition {
  max-width: 46ch;
  margin: 1.5rem auto 0;
}

/* "The author, classified" — the personality types; small, wry, unintimidating */
.notice {
  max-width: 46rem;
  /* bottom margin keeps the NEXT section's kicker from crowding the card */
  margin: clamp(2.5rem, 6vh, 4rem) auto clamp(2.5rem, 6vh, 5rem);
  border: 1px solid var(--hairline);
  padding: 1.25rem 1.75rem 1rem;
  text-align: center;
}
.notice .folio { display: block; margin-bottom: 0.5rem; }
.notice p {
  margin: 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--ink-muted);
}

/* the name, out loud — poster facade with the video's own still (self-hosted);
   zero third-party code until clicked, then JS swaps in a youtube-nocookie
   iframe. Without JS the poster is simply a link to the video. */
.say-video {
  position: relative;
  display: block;
  max-width: 720px;
  margin: 2rem auto 0;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
}
.say-video img {
  display: block;
  width: 100%;
  height: auto;
}
.say-video .play-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: rgba(6, 11, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding-left: 3px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.say-video:hover .play-disc { border-color: var(--accent); color: var(--accent); }
.say-video-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.6rem 1rem 0.65rem;
  background: linear-gradient(to top, rgba(6, 11, 18, 0.85), transparent);
  text-align: center;
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.say-video-frame {
  max-width: 720px;
  margin: 2rem auto 0;
  aspect-ratio: 16 / 9;
}
.say-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--hairline);
}

/* the Bosphorus plate — the sea the name comes from */
.sea-plate {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.sea-plate img { width: 100%; height: auto; }
.sea-plate figcaption {
  padding: 0.9rem 1rem 1rem;
  text-align: center;
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- section 3 · above / below ---------- */

.diptych-band {
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}
.diptych {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.25rem, 3.5vw, 3rem);
  align-items: center;
}
.diptych .half { min-width: 0; }
.diptych .half .folio { margin-bottom: 1rem; }
.diptych .plate img { width: 100%; height: auto; }
.diptych figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sea-level-rule {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.sea-level-rule::before, .sea-level-rule::after {
  content: "";
  flex: 1;
  width: 1px;
  background: var(--hairline);
}
.sea-level-rule span {
  writing-mode: vertical-rl;
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 760px) {
  .diptych { grid-template-columns: 1fr; }
  .sea-level-rule { flex-direction: row; width: 100%; }
  .sea-level-rule::before, .sea-level-rule::after { width: auto; height: 1px; }
  .sea-level-rule span { writing-mode: horizontal-tb; }
}

/* ---------- section 4 · the crossings ---------- */

.crossings {
  --datum: 110px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.crossings::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--datum);
  border-top: 1px solid var(--hairline);
}
.crossings .datum-label {
  position: absolute;
  right: 0;
  top: calc(var(--datum) + 0.6rem);
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.station {
  position: relative;
  padding-top: calc(var(--datum) + 2.5rem);
  text-align: center;
}
.station .tick {
  position: absolute;
  left: 50%;
  top: calc(var(--datum) - 4px);
  width: 9px;
  height: 9px;
  margin-left: -5px;
  border: 1px solid var(--ink-muted);
  transform: rotate(45deg);
  background: var(--bg);
  transition: border-color 0.4s;
}
.station.above .tick { top: calc(var(--datum) - 36px); }
.station.above::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--datum) - 27px);
  height: 27px;
  width: 1px;
  background: var(--hairline);
}
.station.in-view .tick { border-color: var(--accent); }
.station.here .tick {
  width: 7px;
  height: 7px;
  margin-left: -4px;
  top: calc(var(--datum) - 3px);
  background: var(--accent);
  border-color: var(--accent);
  transform: none;
  border-radius: 50%;
}
.station .date {
  font-family: var(--font-furniture);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.4rem;
}
.station .city {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
}
.station .cap {
  font-style: italic;
  color: var(--ink-muted);
  margin: 0.4rem 0 0;
}
@media (max-width: 760px) {
  .crossings { grid-template-columns: 1fr; gap: 3rem; }
  .crossings::before { left: 8px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid var(--hairline); }
  .crossings .datum-label {
    top: auto; bottom: -2rem; right: auto; left: 0;
  }
  .station { padding: 0 0 0 2.5rem; text-align: left; }
  .station .tick { left: 4px; top: 0.6rem; margin-left: 0; }
  .station.above .tick { top: 0.6rem; }
  .station.above::before { display: none; }
  .station.here .tick { left: 5px; top: 0.7rem; }
}

/* ---------- section 5 · marginalia — a random hand from the archive,
   read left to right ---------- */

.marginalia-note {
  font-style: italic;
  color: var(--ink-muted);
  margin: 0.75rem 0 0;
}
.motto-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  /* reserved for the longest motto so rotation never reflows the page */
  min-height: clamp(16rem, 38vh, 22rem);
  margin-top: clamp(2rem, 5vh, 3rem);
  border-block: 1px solid var(--hairline);
  padding-block: clamp(2rem, 5vh, 3rem);
}
.motto-stage blockquote {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--t-quote);
  line-height: 1.4;
}
@media (prefers-reduced-motion: no-preference) {
  .motto-stage blockquote,
  .motto-stage .folio {
    transition: opacity 0.6s ease, filter 0.6s ease;
  }
  .motto-stage.is-swapping blockquote,
  .motto-stage.is-swapping .folio {
    opacity: 0;
    filter: blur(6px);
  }
}

/* ---------- section 6 · the collection ---------- */

.feature {
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: clamp(1.75rem, 4vw, 3rem);
  margin-top: 3rem;
}
.feature-title {
  font-family: var(--font-furniture);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.feature-note {
  font-family: var(--font-body);
  color: var(--ink-muted);
  margin: -0.75rem 0 1.5rem;
}
.feature-note a { color: inherit; }
.feature-note a:hover { color: var(--accent); }
.feature-prose { margin-inline: 0; }
.feature .status {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* character rail — hairline slots awaiting portraits; names stay readable */
.char-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.char-rail li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
}
.char-rail a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.char-rail a:hover { border-bottom-color: currentColor; }
.char-rail .slot {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(135deg, transparent 48.5%, var(--hairline) 48.5%, var(--hairline) 51.5%, transparent 51.5%);
}
@media (max-width: 640px) {
  .char-rail { grid-template-columns: repeat(2, 1fr); }
}
/* The Kennel — the five breeds sit in one row (2-up on narrow screens) */
.char-rail.pack { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) {
  .char-rail.pack { grid-template-columns: repeat(2, 1fr); }
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) {
  .collection-grid { grid-template-columns: 1fr; }
}

.ghost-strip.wide span { aspect-ratio: 16 / 9; }

/* titled slots inside announce cards (e.g. The Screen's double bill) */
.announce .char-rail { margin-top: 0; }
.char-rail.reels { grid-template-columns: repeat(2, 1fr); }
.char-rail.reels .slot { aspect-ratio: 16 / 9; }

/* a real image replacing a ghost slot — same frame, zero layout change */
.char-rail img.slot,
.shelf img.slot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--surface);
}
@media (max-width: 640px) {
  .char-rail.reels { grid-template-columns: 1fr; }
}

/* short prose note inside announce cards */
.announce .note {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  margin: -1rem 0 1.5rem;
}

/* track index — the essential tracks, by release year */
.track-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 3rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.track-index li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-size: 1rem;
}
.track-index .folio { flex: none; }
.track-index .by { color: var(--ink-muted); }
.track-index a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.track-index a:hover { border-bottom-color: currentColor; }
@media (max-width: 760px) {
  .track-index { grid-template-columns: 1fr; }
}

/* cartridge shelves — a photo book of the games, one framed slot per title */
.platform-shelf { margin-top: 2.5rem; }
.platform-shelf .group-label {
  display: block;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hairline);
}
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 1.5rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shelf li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
}
.shelf .slot {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, transparent 48.5%, var(--hairline) 48.5%, var(--hairline) 51.5%, transparent 51.5%);
}
.shelf .cap {
  font-family: var(--font-furniture);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.shelf .cap .year {
  display: block;
  color: var(--ink-muted);
}
.shelf .cap a {
  color: var(--ink);
  text-decoration: none;
}
.shelf .cap a:hover { color: var(--accent); }
@media (max-width: 480px) {
  .shelf { grid-template-columns: repeat(3, 1fr); }
}

.feature .chip-links { margin-top: 2.5rem; }

/* the ideal forecast — travel conditions spec strip */
.conditions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
}
.conditions .folio { display: block; margin-bottom: 0.35rem; }
.conditions strong {
  font-family: var(--font-furniture);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 640px) {
  .conditions { grid-template-columns: repeat(2, 1fr); }
}

.chip-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.chip-links a {
  display: inline-block;
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.3em 0.75em;
}
.chip-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- section 7 · in production ---------- */

.production-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem;
  align-items: start; /* Comics + Field Notes each at natural height, top-aligned */
}
/* the marquee: comics span the full row; Oven + Field Notes share the next */
.production-grid .wide { grid-column: 1 / -1; }
.production-grid .wide .card-strip {
  display: block;
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 760px) {
  .production-grid { grid-template-columns: 1fr; }
}
/* Field Notes as a full-width panel: the latest per category laid across the row */
.notes-wide .note-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: 0.5rem;
}
.notes-wide .note-lines li {
  border-bottom: 0;
  padding: 0;
}

/* Field Notes card — typeset, not pictured: one line per category. Paired with
   the Comics card in the In Production row at natural height (the Table card,
   its old fill partner, moved up to The Collection). */
.note-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.note-lines li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.note-lines li:first-child { padding-top: 0; }
.note-lines li:last-child { border-bottom: 0; padding-bottom: 0; }
.note-lines .cat::before { content: "· "; }
.note-lines .cat { color: var(--accent); margin-left: 0.35em; }
/* the chip links to its /notes/<cat>/ index — keep the chip's type, not the title link's */
.note-lines .cat a { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.note-lines .cat a:hover { text-decoration: underline; }
.note-lines a {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.note-lines a:hover { color: var(--accent); }
.announce {
  padding: clamp(1.75rem, 4vw, 3rem);
}
.announce h3 {
  font-family: var(--font-furniture);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.announce .teaser {
  font-style: italic;
  color: var(--ink-muted);
  margin: 0.75rem 0 2rem;
}


.announce .status {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ghost-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.ghost-strip span {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline);
}
.ghost-bars { display: grid; gap: 0.75rem; }
.ghost-bars span {
  height: 2.25rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.ghost-bars span:nth-child(1) { width: 82%; }
.ghost-bars span:nth-child(2) { width: 64%; }
.ghost-bars span:nth-child(3) { width: 73%; }

/* ---------- section 7 · the letter ---------- */

.letter-section {
  position: relative;
  overflow: hidden;
}
.letter-section .atmosphere img {
  opacity: 0.2;
  filter: blur(24px) brightness(0.6);
  object-position: center 12%;
  transform: scale(1.2);
}
.letter-section > .container { position: relative; z-index: 1; }

.letter-tabs {
  display: none;
  gap: 1.5rem;
  margin: 2rem 0 1rem;
}
.letter-tabs button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 4px;
  font-family: var(--font-furniture);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.letter-tabs button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.letter-body {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
}
.letter-body .vertical-hairline { background: var(--hairline); }
.letter-col p:first-of-type { font-style: italic; }

.letter-sign {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3rem;
}
.letter-sign img {
  width: 56px;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface);
}
.letter-sign .signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-quote);
  line-height: 1.2;
  margin: 0;
}

@media (max-width: 899px) {
  .letter-body { grid-template-columns: 1fr; }
  .letter-body .vertical-hairline { display: none; }
  .js .letter-tabs { display: flex; }
  /* both columns share one grid cell: height reserved to the taller block,
     the toggle never reflows the page */
  .js .letter-body { grid-template-rows: auto; }
  .js .letter-body .letter-col { grid-row: 1; grid-column: 1; }
  .js .letter-body[data-active="en"] .letter-col[lang="tr"] { visibility: hidden; }
  .js .letter-body[data-active="tr"] .letter-col:not([lang="tr"]) { visibility: hidden; }
}

/* ---------- section 8 · colophon ---------- */

.colophon {
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  padding-top: clamp(3rem, 7vh, 5rem);
  font-size: 0.9375rem;
}
.colophon-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
}
@media (max-width: 860px) {
  .colophon-grid { grid-template-columns: 1fr; }
}
.colophon h2 {
  font-family: var(--font-furniture);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
}
.social-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
}
/* explicit columns: the tall Socializing group left, the small groups
   stacked right — no ragged gaps */
.social-col {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
@media (max-width: 480px) {
  .social-index { grid-template-columns: 1fr; }
}
.social-group .folio { display: block; margin-bottom: 0.6rem; }
.social-group ul { margin: 0; padding: 0; list-style: none; }
.social-group li { margin-bottom: 0.3rem; }
.social-group a, .visit-list a {
  font-family: var(--font-furniture);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
}
.social-group a:hover, .visit-list a:hover { color: var(--accent); }
/* pill buttons — filled so they catch the eye (inverted vs the plain text
   links); used by The Screen's IMDb list buttons on the home page */
a.pill-btn {
  display: inline-block; padding: 0.5em 0.95em;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 3px;
  color: var(--bg); font-weight: 500; text-transform: uppercase; font-size: 0.75rem;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
a.pill-btn:hover, a.pill-btn:focus-visible {
  background: transparent; color: var(--accent);
}
.visit-list { margin: 0; padding: 0; list-style: none; }
.visit-list li { margin-bottom: 0.75rem; }
.visit-list .folio { display: block; margin-top: 0.15rem; }
/* folio words that are links (READ's "life · development · trading") keep the folio's quiet type */
.visit-list .folio a { font: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; }
.visit-list .folio a:hover { color: var(--accent); }
/* a second heading stacked in a colophon column (VISIT → WISHLIST) */
.colophon .social-group + h2 { margin-top: 2rem; }
.colophon-notes p { color: var(--ink-muted); font-size: 0.9375rem; margin-bottom: 0.75rem; }
.copyright {
  border-top: 1px solid var(--hairline);
  padding: 1.25rem 0;
  text-align: center;
}
.copyright p {
  margin: 0;
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   DEVELOPER
   ========================================================================== */

.dossier-cover {
  position: relative;
  min-height: 45svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 5rem;
}
.dossier-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(143, 216, 234, 0.06) 50%, transparent 58%);
}
.cover-plate {
  margin: 0 auto;
  max-width: min(100%, 1000px);
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
}
.cover-plate img { display: block; width: 100%; height: auto; }
.cover-splash { padding-bottom: 0; }
.dossier-cover .cover-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  width: 100%;
}
@media (max-width: 860px) {
  .dossier-cover .cover-grid { grid-template-columns: 1fr; align-items: start; }
}
.dossier-cover h1 {
  font-size: var(--t-hero);
  line-height: 1.02;
  margin: 1rem 0 1.5rem;
}
.dossier-folio {
  border-left: 1px solid var(--hairline);
  padding-left: 1.5rem;
  display: grid;
  gap: 1rem;
}
.dossier-folio .folio { display: block; }
.dossier-folio strong {
  display: block;
  font-family: var(--font-furniture);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 0.2rem;
}

.capabilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 3rem;
  align-items: start; /* groups size to their chips — no stretch to match a tall neighbor */
}
@media (max-width: 760px) {
  .capabilities { grid-template-columns: 1fr; }
}
.panel {
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.panel .folio {
  display: block;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-weight: 500;
}
.panel h3 {
  font-family: var(--font-furniture);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.panel p { color: var(--ink-muted); font-size: 1rem; margin: 0; }
/* lean stack group: chips sit directly under the folio, no heading/prose */
.panel > .folio + .chips { margin-top: 0; }

/* name pronunciation helper — /developer folio + /contact intro (recruiter aid) */
.say-line {
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-muted);
}
.dossier-folio .say-line { display: block; margin-top: 0.45rem; font-size: 0.78rem; }
.intro .say-line { margin-top: 0.9rem; margin-bottom: 0.35rem; }
/* match HOME's "say it 'jen-gez'" pattern — override the folio's uppercase strong */
.say-line strong, .dossier-folio .say-line strong {
  display: inline; /* the folio makes strong display:block; keep "jen-gez" inline */
  color: var(--ink); font-weight: 500;
  font-family: var(--font-body); text-transform: none; letter-spacing: normal;
}
.say-line a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.say-line a:hover, .say-line a:focus-visible { color: var(--accent); border-color: var(--accent); }
/* "🔊 hear it" drops to its own line below the pronunciation */
.say-line .say-hear { display: block; width: fit-content; margin-top: 0.4rem; }
.say-line .say-lead, .say-line .say-main { display: block; }
.dossier-folio .say-line .say-main { white-space: nowrap; } /* keep it to one line in the folio */

/* ---- The Stack — metro transit map (/developer No. 01 centerpiece) ----
   A fixed, poster-style plate: lines = disciplines, stations = tools,
   interchanges = tools serving more than one line. Deliberately NON-interactive
   (the d3 inventory below is the interactive deep-dive). Scrolls sideways on
   narrow screens instead of shrinking below legibility. */
/* margin all-sides explicit: figure's default 40px side margins made the plate
   narrower than .stack-map-wrap and left-indented */
.metro-plate { margin: clamp(1.5rem, 4vh, 2.5rem) 0 0; border: 1px solid var(--hairline); background: var(--surface); border-radius: 4px; }
.metro-scroll { overflow-x: auto; }
/* fits the container on desktop with no sideways scroll; phones still scroll
   rather than shrinking the type below legibility */
.metro-scroll svg { display: block; min-width: 880px; width: 100%; height: auto; }
.metro text { font-family: var(--font-furniture); font-size: 13px; fill: var(--ink); letter-spacing: 0.02em; }
.metro text.m-line-label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.metro text.m-hub { font-size: 15px; font-weight: 600; letter-spacing: 0.05em; }
.metro-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--hairline); }
.metro-legend .folio { display: inline-flex; align-items: center; gap: 0.45em; }
.metro-legend .swatch { display: inline-block; width: 1.2em; height: 4px; border-radius: 2px; }
.metro-legend .glyph { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.metro-legend .glyph.ms { background: var(--ink); border-color: var(--ink); } /* solid dot, in whatever lane color the station rides */
.metro-legend .glyph.xc { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--bg); }

/* ---- The Stack — interactive mind-map (markmap) + accessible fallback (/developer No. 01) ---- */
.stack-map-wrap { margin-top: clamp(2rem, 5vh, 3rem); }
.stack-map-wrap.is-live { height: min(78vh, 780px); border: 1px solid var(--hairline); background: var(--surface); border-radius: 4px; overflow: hidden; }
.stack-map-controls { display: flex; align-items: center; gap: 0.6rem; margin: 1.5rem 0 0.75rem; }
.stack-map-controls button { background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px; color: var(--ink-muted); padding: 0.4em 0.9em; cursor: pointer; }
.stack-map-controls button:hover, .stack-map-controls button:focus-visible { color: var(--bg); background: var(--accent); border-color: var(--accent); }
/* zoom +/- cluster, pushed to the right edge of the row */
.stack-map-controls .stack-zoom { display: inline-flex; gap: 0.4rem; margin-left: auto; }
.stack-map-controls .stack-zoom button { min-width: 2.6em; padding: 0.4em 0; font-size: 1.05rem; line-height: 1; }
.stack-map { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.stack-map:active { cursor: grabbing; }
.stack-map .node { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .stack-map .node { transition: none; } }
.stack-map .link { fill: none; stroke: var(--hairline); stroke-width: 1px; }
.stack-map .node circle { fill: var(--bg); stroke: var(--ink-muted); stroke-width: 1px; }
.stack-map .node circle.is-collapsed { fill: var(--accent); stroke: var(--accent); }
.stack-map .node--root circle { fill: var(--accent); stroke: var(--accent); }
.stack-map text.lbl { font-family: var(--font-furniture); font-size: 12px; letter-spacing: 0.02em; fill: var(--ink); }
.stack-map text.lbl--root { font-weight: 600; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.stack-map text.lbl--domain { font-weight: 500; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.stack-map .node--leaf text.lbl { fill: var(--ink-muted); }
.stack-map a text.lbl { cursor: pointer; }
.stack-map a:hover text.lbl { text-decoration: underline; }
/* tool vs concept: concepts read as plain italic labels; tools are discrete boxed chips */
.stack-map text.lbl--concept { font-style: italic; }
.stack-map text.lbl--tool { font-weight: 500; letter-spacing: 0.01em; }
.stack-map .tool-box { fill: var(--bg); stroke-width: 1px; }
.stack-map a:hover .tool-box { fill: var(--surface); }
/* accessible / no-JS / print outline */
.stack-map-fallback { margin-top: clamp(2rem, 5vh, 3rem); }
.stack-tree, .stack-tree ul { list-style: none; margin: 0; padding: 0; }
.stack-tree > li { margin-bottom: 1.6rem; }
.stack-tree ul { padding-left: 1.1rem; border-left: 1px solid var(--hairline); margin-top: 0.6rem; display: grid; gap: 0.5rem; }
.stack-tree ul ul { margin-top: 0.45rem; }
.stack-domain { display: block; font-family: var(--font-furniture); font-weight: 500; font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.4rem; }
.stack-cat { font-family: var(--font-furniture); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.stack-tree a { color: var(--accent); text-decoration: none; }
.stack-tree a:hover, .stack-tree a:focus-visible { text-decoration: underline; }

.method { margin-top: 3rem; display: grid; gap: clamp(2rem, 5vh, 3.5rem); }
.credo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: baseline;
  border-top: 1px solid var(--hairline);
  padding-top: clamp(1.5rem, 3vh, 2.5rem);
}
.credo .figure {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--ink-muted);
}
.credo h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  margin-bottom: 0.5rem;
}
.credo p { color: var(--ink-muted); max-width: 55ch; margin: 0; }

.work-index { margin-top: 3rem; }
.work-row {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.work-row:last-child { border-bottom: 1px solid var(--hairline); }
@media (max-width: 760px) {
  .work-row { grid-template-columns: 1fr; gap: 0.35rem; }
}
.work-row .folio { padding-top: 0.2rem; }
/* entry titles are h2 (one step under the page h1 — no level skip) */
.work-row h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 400; margin: 0; }
.work-row h2 a { color: var(--ink); text-decoration: none; }
.work-row h2 a:hover { color: var(--accent); }
.work-row p { margin: 0; color: var(--ink-muted); }
.work-row.ghost p { font-style: italic; }

.specimen {
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  max-width: 46rem;
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--ink-muted);
}
.specimen .token { color: var(--accent); }

.closing-card {
  text-align: center;
  padding-block: var(--section-pad);
}
.closing-card h2 {
  font-size: var(--t-title);
  margin-bottom: 2.5rem;
}
.btn-fill {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-furniture);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.1em 2.4em;
  transition: filter 0.3s;
}
.btn-fill:hover { filter: brightness(1.1); }
.closing-card .alt-link { display: block; margin-top: 1.5rem; }
.closing-card .alt-link a { color: var(--ink-muted); }
.closing-card .alt-link a:hover { color: var(--accent); }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.meeting-point {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.5rem);
  padding-top: 6rem;
  padding-bottom: 2rem;
}
.meeting-point .intro { text-align: center; }
.meeting-point .intro h1 { font-size: var(--t-title); margin: 1rem 0; }
.meeting-point .intro p { color: var(--ink-muted); font-style: italic; margin: 0; }

.doors {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 759px) {
  .doors { flex-direction: column; }
}
.door {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  min-height: min(52vh, 30rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--hairline);
  text-decoration: none;
  overflow: hidden;
}
.door::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(143, 216, 234, 0.06) 50%, transparent 58%);
  transition: opacity 0.4s;
}
.door h2 {
  font-family: var(--font-furniture);
  font-weight: 500;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.door .invite {
  font-style: italic;
  color: var(--ink-muted);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  margin: 0;
}
.door .dest {
  font-family: var(--font-furniture);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
/* "Join a meeting" carries the name-pronunciation helper. The whole card still
   links to meet via a stretched .door-cover; "🔊 hear it" is raised above it so
   it stays its own link (no illegal nested anchors). */
.door--say { gap: 1.5rem; }
.door-cover { position: absolute; inset: 0; z-index: 1; }
.door--say > :not(.door-cover) { position: relative; }
.door--say .say-line--door { margin: 0; }
.door--say .say-hear { position: relative; z-index: 2; }
.door:focus-within { border-color: var(--accent); }

/* top block (heading + invite) sits at the top so invites align across doors;
   the destination is pinned to the bottom by the door's space-between. */
.door-head { display: flex; flex-direction: column; gap: 0.6rem; }
.door-foot { display: flex; flex-direction: column; gap: 1.25rem; }
.door-no {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 0.85;
  color: var(--accent);
  opacity: 0.5;
}

/* No. 03 — the light-touch "just write" bar, full width beneath the two doors */
.door--write {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2rem);
  min-height: auto;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.75rem, 4vw, 3rem);
}
.write-body { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.write-body h2 { margin: 0; }
.door--write .dest { margin-left: auto; }
@media (max-width: 559px) {
  .door--write { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .door--write .dest { margin-left: 0; }
}

@media (hover: hover) and (min-width: 900px) {
  .door {
    transition: border-color 0.4s, opacity 0.4s;
  }
  @media (prefers-reduced-motion: no-preference) {
    .door {
      transition: flex-grow 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s, opacity 0.4s;
    }
  }
  .door:hover, .door:focus-visible { border-color: var(--accent); }
  .doors .door:hover, .doors .door:focus-visible { flex-grow: 1.35; }
  .door:hover::after, .door:focus-visible::after { opacity: 1; }
  .doors:has(.door:hover) .door:not(:hover) { opacity: 0.75; }
  .doors:has(.door:focus-visible) .door:not(:focus-visible) { opacity: 0.75; }
}

.contact-foot {
  border-top: 1px solid var(--hairline);
  padding-top: 1.25rem;
  text-align: center;
}

/* ==========================================================================
   404
   ========================================================================== */

.lost {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 6rem var(--gutter) 4rem;
}
.lost .atmosphere img { opacity: 0.35; }
.lost > * { position: relative; z-index: 1; }
.lost h1 { font-size: var(--t-title); margin: 1.25rem 0; }
.lost p { color: var(--ink-muted); max-width: 40ch; }

/* ==========================================================================
   GENERATED PAGES — comics, the table, field notes (built by tools/Build)
   ========================================================================== */

.page-main { padding-top: 4.5rem; }

.post .post-head { margin: 1rem 0 2.5rem; }
.post .post-head h1 {
  font-size: var(--t-title);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.post .container { max-width: 860px; }
/* fixed first column so titles align across rows; tight row gap so the
   description hugs its title */
.post .work-index .work-row {
  grid-template-columns: 13rem 1fr;
  row-gap: 0.4rem;
  align-items: center;
}
.post .work-index .work-row p { grid-column: 2; margin: 0; }
/* stacked date / category in the folio column */
.post .work-row .folio .cat {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-muted);
}
@media (max-width: 760px) {
  .post .work-index .work-row { grid-template-columns: 1fr; }
  .post .work-index .work-row p { grid-column: 1; }
}

/* index tools — category filter + live search */
.index-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 2rem 0 0.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
.filter-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.filter-links a:hover { color: var(--accent); }
/* chip buttons (comics/table client-side filter) dress exactly like the links */
.filter-links button { background: none; border: 0; padding: 0 0 2px; cursor: pointer; }
.filter-links button:hover { color: var(--accent); }
.filter-links button[aria-pressed="true"] { color: var(--ink); border-bottom: 1px solid var(--accent); }
[data-index-search] {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--font-furniture);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  padding: 0.5em 0.9em;
  min-width: 14rem;
  margin-left: auto; /* pin the search to the right of the tools row */
}
[data-index-search]::placeholder { color: var(--ink-muted); }
[data-index-search]:focus-visible { border-color: var(--accent); outline: none; }
[data-index-empty] { margin-top: 2rem; }

.post-prose {
  font-size: var(--t-body);
  line-height: 1.75;
}
.post-prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 2.5em 0 0.75em;
}
.post-prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin: 2em 0 0.5em;
}
.post-prose ul, .post-prose ol { padding-left: 1.4em; margin: 0 0 1.25em; }
.post-prose li { margin-bottom: 0.6em; }
.post-prose blockquote {
  margin: 1.75em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 1px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15em;
  color: var(--ink);
}
.post-prose img {
  border: 1px solid var(--hairline);
  margin: 1.5em 0;
}
.post-prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2.5em 0;
}
.post-prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
.post-prose pre {
  margin: 1.75em 0;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  background: var(--surface) !important;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}
.post-prose pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}
/* small in-post portrait — framed exactly like the home artist rail (3:4,
   hairline). Floats right at the top of the piece so the text runs down its
   left; on narrow screens it unfloats and centers. */
.post-prose .post-portrait {
  float: right;
  width: min(250px, 45%);
  margin: 0.35rem 0 1.5rem 2rem;
}
.post-prose .post-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.post-prose::after { content: ""; display: table; clear: both; }
@media (max-width: 560px) {
  .post-prose .post-portrait {
    float: none;
    width: min(260px, 75%);
    margin: 0 auto 1.75rem;
  }
}

/* tables — editorial rules, not spreadsheet grids */
.post-prose table {
  border-collapse: collapse;
  margin: 1.75em 0;
  width: 100%;
  font-size: 0.9375rem;
}
.post-prose th, .post-prose td {
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 0.7em 1.25em 0.7em 0;
  text-align: left;
  vertical-align: top;
}
.post-prose th {
  font-family: var(--font-furniture);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom-color: var(--ink-muted);
}
.post-prose tbody tr:last-child td { border-bottom: 0; }
.post-prose li::marker {
  color: var(--ink-muted);
  font-family: var(--font-furniture);
}
.post-prose ol li { padding-left: 0.3em; }
.post-back { margin-top: 3rem; }

/* The Table gallery — framed dish photos + name, no links (a gallery, not a
   recipe index). Same framed-plate look the retired recipe cards had. */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2.5rem 1.5rem;
  margin-top: 2.5rem;
}
.dish-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
  margin: 0;
}
/* store-bought exception — a discreet folio note under the dish name
   (the DEFAULT is "my own making", which needs no marker) */
.dish-card .cap-note {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}
/* the provenance chips sit beside the shelf chips, separated by a hairline */
.make-links, .lang-links { border-left: 1px solid var(--hairline); padding-left: 1.25rem; }
.dish-card .cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--hairline);
}
.dish-card .cover.ghost {
  background: linear-gradient(135deg, transparent 48.5%, var(--hairline) 48.5%, var(--hairline) 51.5%, transparent 51.5%);
}
.dish-card .cap {
  font-family: var(--font-furniture);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.comic-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-furniture);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.comic-pager > * { flex: 1; }
.comic-pager > :first-child { text-align: left; }
.comic-pager > :nth-child(2) { text-align: center; }
.comic-pager > :last-child { text-align: right; }
.comic-pager a { color: var(--ink-muted); text-decoration: none; }
.comic-pager a:hover { color: var(--accent); }

/* home-card ship states */
.card-strip { display: block; }
.oven-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.oven-list a {
  font-family: var(--font-furniture);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
}
.oven-list a:hover { color: var(--accent); }
.announce .status a { color: var(--ink-muted); }
.announce .status a:hover { color: var(--accent); }

/* ==========================================================================
   MOTION — scroll reveals (JS adds .in-view once, never removes it)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .reveal.in-view {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  :root {
    --bg: #FFFFFF;
    --surface: transparent;
    --surface-raised: transparent;
    --ink: #15232E;
    --ink-muted: #44566A;
    --accent: #0A6B85;
    --hairline: #BBBBBB;
  }
  body { background: #fff; color: #15232E; }
  .grain, .masthead, .atmosphere, .scroll-cue, .hero-fade, .skip-link { display: none !important; }
  /* paper never scrolls: unrevealed sections must print fully visible */
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .colophon a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
  * { text-shadow: none !important; }
}