/* Every non-home surface.
   With editorial.css, site-chrome.css and work-logs.css deleted, this sheet and
   world.css/subpage.css are the whole cascade. Nothing is overriding a retired
   sheet any more, so a rule here means what it says. */

body {
  background: var(--void);
  color: var(--paper);
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 400;
}

/* ---- chrome ----------------------------------------------------------- */
.site-chrome-header {
  position: relative; z-index: 40;
  width: var(--col); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0;
  /* site-chrome.css was the only sheet setting this; without it the header
     shrank 92px to 84px on every route. It stepped down to 78px at 900px, so
     that boundary is preserved below rather than folded into this layer's own
     620px breakpoint. */
  min-height: 92px;
  background: none; border: 0; box-shadow: none; backdrop-filter: none;
}
.site-chrome-nav { display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.site-chrome-nav a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px;
  color: var(--gray); text-decoration: none;
  font: 400 13px/1 Archivo, sans-serif;
  transition: color .2s var(--ease);
}
.site-chrome-nav a:hover,
.site-chrome-nav a[aria-current="page"] { color: var(--paper); }

/* ---- page atmosphere ---------------------------------------------------
   The old sheets paint broad light rays behind every page. Recoloured to the
   signal they would be a wash of red-orange, which is exactly the failure this
   world is tuned against, so they are pulled down to a faint upper bloom. The
   living field stays exclusive to the home opening. */
.page-atmosphere::before,
.page-atmosphere::after,
.page-atmosphere--work-logs::before,
.page-atmosphere--work-logs::after,
.page-atmosphere--thoughts::before,
.page-atmosphere--thoughts::after,
.page-atmosphere--built::before,
.page-atmosphere--built::after {
  background-image: none !important;
  opacity: 0 !important;
}
.page-atmosphere {
  background-image: radial-gradient(120% 58% at 78% -8%, rgba(255, 74, 28, .085) 0%, rgba(255, 74, 28, .03) 38%, transparent 72%) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ---- shared page rhythm ----------------------------------------------- */
.page-lede, .page-intro p, .editorial-lede { color: var(--gray); }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- footer -----------------------------------------------------------
   `site-chrome.css` still sets `padding-top: 96px` here from the retired
   world. Stacked on this layer's own 64-104px margin it put 160px of empty
   ground between the last line of a page and the first line of its footer,
   which is why the footer read as scrolling far past where the page ended.
   The margin is the deliberate separation; the padding is just leftovers. */
.site-chrome-footer {
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: clamp(16px, 2.5vw, 24px);
  border-top: 1px solid var(--line);
  background: none;
}
.site-chrome-footer-inner { width: 100%; }
.site-chrome-footer-meta {
  width: var(--col); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 20px; padding: 14px 0 18px;
  /* Both carried over from site-chrome.css, which was the only sheet setting
     them. The before/after fingerprint caught their loss: without the
     min-height the footer collapsed 296px to 261px on every route, and the
     hairline that separates the meta row from the panel above it disappeared. */
  min-height: 112px;
  border-top: 1px solid rgba(240, 236, 228, .08);
}
.site-chrome-footer-meta .footer-note { display: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 2px; order: 2; margin-right: -10px; }
.footer-links a {
  /* 12px, not 10: site-chrome.css's `.site-chrome-footer .footer-links a` was
     more specific than this rule and quietly won on padding, so the links were
     always 12px. Matching it keeps the row the width it has always been. */
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px;
  color: var(--gray); text-decoration: none; font: 400 12.5px/1 Archivo, sans-serif;
  /* the radius the hover fill is cut to; it only ever lived in site-chrome.css */
  border-radius: 10px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.footer-links a:hover { background: rgba(244, 242, 239, .04); }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--paper); }
.footer-copy { order: 1; color: var(--dim); font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: .08em; }

/* the binary wordmark keeps its existing script and class; only its colour and
   reserved height belong to this layer */
.footer-wordmark { color: var(--paper); }

/* ---- browser surfaces -------------------------------------------------
   The parts nobody draws still have to belong to the design. */
::selection { background: rgba(255, 74, 28, .28); color: #FFFFFF; }
html { scrollbar-color: var(--line-hi) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 999px; border: 3px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: rgba(244, 242, 239, .28); }

@media (max-width: 900px) {
  .site-chrome-header { min-height: 78px; }
}

@media (max-width: 620px) {
  /* 78, matching what site-chrome.css set at its own 900px breakpoint. The
     92px floor is a desktop measure; leaving it applied here made the header
     92, and removing the floor entirely made it 72. */
  .site-chrome-header { padding: 14px 0; min-height: 78px; }
  .site-chrome-nav a { padding: 0 8px; font-size: 12.5px; }
}

/* ---- not found ---------------------------------------------------------
   The one subpage built on the home opening rather than beside it.

   Everywhere else the living field is deliberately withheld so the page's own
   content leads. A 404 has no content to lead: it is a dead end, and the only
   useful thing it can do is be unmistakably this site and point four ways out.
   So it takes the full-bleed jet panel, the field, the didone at display
   scale, and the action row: the same peak the home page opens on, given a
   taller panel of its own so it does not read as a copy of the hero. */
.not-found-page { position: relative; }

/* lifted over the panel, exactly as the home chrome is, so the field starts at
   the very top of the page instead of under a strip of dead ground */
.not-found-page .site-chrome-header {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
.not-found-page .gone-main { width: 100%; margin: 0; max-width: none; }

.gone {
  position: relative; isolation: isolate;
  min-height: clamp(520px, 82vh, 820px);
  display: flex; align-items: flex-end;
  padding: clamp(96px, 12vw, 150px) 0 clamp(72px, 9vw, 124px);
  background: #000;   /* jet: the field is the only thing that lifts off it */
  border-bottom: 1px solid var(--line);
}
.gone .atmos { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
/* the scrim protects the copy column and releases early, leaving the right of
   the panel to the field: the same release the home opening uses */
.gone::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .68) 30%, rgba(0, 0, 0, .18) 58%, rgba(0, 0, 0, 0) 82%),
    linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, .82) 100%);
}
.gone-body { position: relative; }

.not-found-page .gone-body h1 {
  margin: 0; max-width: 11ch;
  font: 400 clamp(44px, 7.6vw, 92px)/0.92 "Bodoni Moda", Didot, Georgia, serif;
  letter-spacing: -.026em;
  text-wrap: balance;
  /* the type sits on the field rather than beside it, so it carries a shadow of
     its own ground; this is what lets the scrim release early enough for the
     interference to read behind the letterforms */
  text-shadow: 0 2px 20px rgba(0, 0, 0, .85);
}
.not-found-page .gone-body h1 em { font-style: normal; color: var(--signal); }

.gone-lede {
  margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 46ch;
  color: var(--gray); font: 400 clamp(15px, 1.35vw, 16.5px)/1.6 Archivo, sans-serif;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .85);
}

.gone-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: clamp(28px, 3.4vw, 40px); margin-left: -2px;
}
.gone-actions a:not(.btn) {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px;
  color: var(--gray); text-decoration: none; font: 400 13px/1 Archivo, sans-serif;
  transition: color .2s var(--ease);
}
.gone-actions a:not(.btn):hover { color: var(--paper); }
.gone-actions .btn { margin-right: 6px; }
/* not a link, so a rule separates it rather than letting it sit in the run of
   them where it would read as one: the home opening's own device */
.gone-code {
  display: inline-flex; align-items: center; gap: 14px; margin-left: 8px;
  color: var(--dim); font: 400 11px/1 "JetBrains Mono", monospace;
  letter-spacing: .12em;
}
.gone-code::before { content: ""; width: 1px; height: 13px; background: var(--line-hi); }

/* the panel meets the footer directly; the page is one peak and nothing else */
.not-found-page .site-chrome-footer { margin-top: 0; border-top: 0; }

/* One authored moment: the copy settles up out of the field once, on an
   exponential ease-out from a visible default. */
@media (prefers-reduced-motion: no-preference) {
  .gone-body > * { animation: gone-settle .9s var(--ease) both; }
  .gone-body > * + * { animation-delay: .08s; }
  .gone-body > * + * + * { animation-delay: .16s; }
}
@keyframes gone-settle {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@media (max-width: 620px) {
  .gone { min-height: clamp(440px, 74vh, 620px); padding-top: clamp(84px, 22vw, 110px); }
  .not-found-page .gone-body h1 { max-width: 9ch; }
  /* the field is much heavier per square inch on a narrow panel, so the scrim
     holds longer across the width instead of releasing at 58% */
  .gone::after {
    background:
      linear-gradient(96deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .8) 42%, rgba(0, 0, 0, .4) 78%, rgba(0, 0, 0, .2) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .86) 100%);
  }
  /* the row wraps here, and once the chip is on a line of its own the vertical
     rule is separating it from nothing. Drop the rule and hang the chip off
     the same left edge as the links above it. */
  .gone-code { margin: 12px 0 0; padding-left: 12px; }
  .gone-code::before { display: none; }
}

/* ---- ported from the retired editorial.css and site-chrome.css ---------
   Everything below still matched real elements when those two sheets were
   measured route by route. It is scoped to the non-home surfaces, which is
   the only place those sheets were ever loaded. */

/* the stacking context the fixed atmosphere layer sits behind */
body > * { position: relative; z-index: 1; }
/* the size and leading that editorial.css's body rule actually contributed */
body { font-size: 16px; line-height: 1.6; }

h1 { max-width: 760px; font-size: clamp(50px, 8vw, 92px); line-height: .98; }
@media (max-width: 760px) { h1 { font-size: clamp(48px, 16vw, 68px); } }

.page-atmosphere {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none; contain: strict; opacity: .96;
}
.page-atmosphere-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: .94;
  filter: blur(6px) saturate(112%); mix-blend-mode: screen;
  transform: scale(1.08); transform-origin: center center;
}
.page-atmosphere--work-logs .page-atmosphere-canvas { transform: translate3d(-3%, 1%, 0) scale(1.1); }
.page-atmosphere--thoughts .page-atmosphere-canvas { transform: translate3d(1%, 2%, 0) scale(1.1); opacity: .86; }

.work-log-detail-page, .thought-detail-page, .case-study-page { background: var(--void); }
.work-log-detail-page, .thought-detail-page { position: relative; }

.case-meta {
  display: flex; justify-content: space-between; gap: 14px;
  color: var(--signal); font: 500 11px/1.4 "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---- the wordmark's geometry, ported from site-chrome.css --------------
   Load-bearing: wordmark.js measures this box and sizes its canvas from it.
   The ready-class is normalised to one name here; the component emitted two
   only because the sheets it replaced had drifted apart. */
.footer-wordmark {
  position: relative; left: 50%; transform: translateX(-50%);
  display: block;
  width: var(--footer-viewport-width, 100vw);
  height: var(--footer-wordmark-height, clamp(64px, 12.5vw, 244px));
  overflow: hidden; line-height: 0; isolation: isolate;
  color: var(--paper); text-decoration: none;
  margin: 0 0 -1px;
}
.footer-wordmark-static {
  display: block; position: absolute; inset: auto 0 -1px;
  color: var(--paper); font: 700 12.8vw/.72 Archivo, sans-serif;
  letter-spacing: -.075em; text-align: center; white-space: nowrap;
  user-select: none;
}
.footer-wordmark.is-canvas-ready .footer-wordmark-static { display: none; }
.footer-wordmark-canvas {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; display: block;
}