@charset "utf-8";

/* ==========================================================================
   Suns Held Low
   Hand-authored. The build copies this file untouched.

   The whole site sits on one painting. Every decision below defers to it:
   the palette is sampled from it, the one saturated colour is its sun, and
   nothing is opaque enough to hide it.
   ========================================================================== */

/* --- Type ---------------------------------------------------------------- */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Sampled from site_source/_originals/desert-background.png by averaging
     regions of the original, not picked by eye. See site_reference/README.md */
  --sky:    #be6648;
  --mid:    #834c38;
  --ground: #4a2c1e;
  --ember:  #f0804c;   /* the sun core — the only saturated colour here */
  --shadow: #1a0f0c;

  /* Text colours are not chosen by eye. The brightest pixel in the painting is
     #fefef3 — the sun core is very nearly white — and text can pass over it at
     any breakpoint, so every value below was solved against that pixel seen
     through the scrim, and clears WCAG AA (4.5:1) for body text there. Panels
     only ever darken further, so anything passing on bare art passes inside
     one too. Changing any of these means re-running that check. */
  --ink:      #f4e6da;   /* 6.10:1 on bare art */
  --ink-dim:  #e6cdb9;   /* 4.90:1 */
  --ink-faint:#e0c4ae;   /* 4.50:1 */

  /* --ember is fully saturated and is never used for type: on bare art it
     reaches only 1.48:1. It stays for the filled button and for decorative
     rules. It is NOT the colour of a border that carries meaning — measured
     31 Aug 2026 against the worst case (the painting's brightest pixel seen
     through the lightest scrim) it is 2.83:1, under the 3:1 a UI component
     needs. An earlier note here claimed 4.12:1; that was measured against a
     panel, not against bare art, and the site does not guarantee a panel.
     --ember-edge is the same hue lifted until it clears 3:1 there, at
     3.75:1, and is what every border and outline that carries meaning uses.
     Type that wants to read as ember uses --ember-text, at 4.84:1. */
  --ember-text: #ffc49b;
  --ember-edge: #ff9f74;

  /* Type on an ember fill. Ember is bright, so only a very dark ink reads on
     it. Measured 31 Aug 2026, sRGB, against each fill it actually sits on:
     6.77:1 on --ember, 8.33:1 on --ember-hover, 10.10:1 on --ember-bright.
     All three clear AA for body text. */
  --on-ember: #24120c;
  /* Ember, one step brighter, for the hovered button. */
  --ember-hover: #ff9560;
  /* Brighter still, for the tag inspector's badge on hover. Dev tooling: it
     never appears on an ordinary visit. */
  --ember-bright: #ffb083;

  --panel:        rgba(42, 22, 16, .42);
  --panel-solid:  rgba(24, 14, 11, .90);
  --rule:         rgba(240, 128, 76, .22);
  --rule-strong:  rgba(240, 128, 76, .45);

  --display: "EB Garamond", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --measure: 64ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 12px;
  --blur: 12px;
}

/* --- Reset --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.68;
  color: var(--ink);
  /* The backdrop layer paints the art; this is what shows through its edges
     and behind it while the image decodes. */
  background: var(--shadow);
  overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ember-edge);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- The painting -------------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

/* Taller than the viewport so the parallax shift never exposes an edge. */
.backdrop__image {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: 62% 50%;   /* keeps the figure and the low suns in frame */
  will-change: transform;
}

/* Muted, so type can sit anywhere on it — which is the whole brief, and also
   what makes the contrast above achievable. 0.70 at the top is not a taste
   decision: below it, body text over the sun core drops under 4.5:1. Heavier
   at the foot, where the painting's own ground is busiest. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20, 11, 9, .70) 0%,
      rgba(20, 11, 9, .76) 45%,
      rgba(20, 11, 9, .88) 100%);
}

/* --- Shared furniture ---------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--shadow);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* A gradient scrim rather than a blur: this element is the one thing that
     stays put while the background moves, and blurring a moving backdrop every
     frame is the expensive combination. The panels below can afford it; a
     sticky bar cannot.

     The scrim is held near-opaque for the full height of the wordmark and nav,
     and only fades below them. A gradient that starts fading behind the type
     lets scrolling copy show through and tangle with it, which is exactly what
     a sticky header must not do. */
  background: linear-gradient(180deg,
    rgba(16, 9, 7, .97) 0%,
    rgba(16, 9, 7, .95) 68%,
    rgba(16, 9, 7, 0) 100%);
}

.site-header > .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .85rem 1.6rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  flex: none;
}

/* The arch sits high in its own box, so the mark is nudged down by a hair to
   sit optically level with the wordmark rather than mathematically level. */
.brand__mark {
  width: 38px;
  height: 38px;
  flex: none;
  transform: translateY(1px);
}

.brand__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, .9rem + .45vw, 1.28rem);
  letter-spacing: .3em;
  text-indent: .3em;          /* recovers the trailing letterspace */
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

/* A flex item will not shrink below its max-content width unless it is told
   it may, so without min-width:0 the nav keeps its full one-line width, the
   ul inside it is never squeezed, and flex-wrap has nothing to react to. That
   is why the row overflowed a 320px screen while looking like it should wrap. */
.site-nav {
  min-width: 0;
}

.site-nav ul {
  display: flex;
  /* Wraps, because four uppercase words at .16em tracking do not fit one line
     on a 320px screen: the row measured 296px inside a 265px shell and pushed
     the whole page sideways. Wrapping is what keeps the narrowest width a
     width the site reads at, rather than one it merely survives. */
  flex-wrap: wrap;
  /* .8rem of row gap, not .5rem: a nav link is 34px tall, so the row gap is
     what carries it to a 44px target once the row wraps. At .5rem it landed
     on 42. */
  gap: .8rem clamp(1.1rem, 2.6vw, 2.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }

.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ember-edge);
}

.site-footer {
  margin-top: clamp(4rem, 10vw, 7rem);
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(16, 9, 7, 0), rgba(16, 9, 7, .8));
  font-size: .875rem;
  color: var(--ink-dim);
}

.site-footer > .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

.site-footer a { text-decoration-color: var(--rule-strong); text-underline-offset: .25em; }
.site-footer a:hover { color: var(--ink); }

/* --- Glass --------------------------------------------------------------- */

/* The chosen surface treatment. The art stays visible through every panel,
   out of focus, and the colour beneath tints each one differently. */
.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.08);
  backdrop-filter: blur(var(--blur)) saturate(1.08);
}

/* Where backdrop-filter is unsupported, a solid warm panel — which looks
   deliberate, rather than a transparent box with unreadable text in it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: var(--panel-solid); }
}

/* Blur is the expensive half of the parallax-plus-glass combination. On narrow
   screens — where the hardware is weakest and the panels are widest — spend
   less of it. */
@media (max-width: 46rem) {
  :root { --blur: 7px; }
}

/* --- Headings and copy --------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem);
  letter-spacing: .06em;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  letter-spacing: .06em;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ember-text);
  margin: 0 0 1rem;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink);
  max-width: 46ch;
}

.dim { color: var(--ink-dim); }

/* --- Page rhythm --------------------------------------------------------- */

main { display: block; }

.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

.section--first { padding-top: clamp(1.5rem, 5vw, 3.5rem); }

/* Sections that continue the one above rather than starting something new. */
.section--tight { padding-top: 0; }

/* The Chamberlight diagram. Square, capped so it never dwarfs the copy beside
   it, and centred within the prose block. */
.chamber {
  margin: 0 0 2.25rem;
  /* Large enough to read the wedge and both marks, small enough that the copy
     beside it still leads. */
  max-width: 21rem;
}

.chamber img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  /* The diagram's own void is near-black; a faint ember ring keeps its edge
     from dissolving into a dark panel. */
  box-shadow: 0 0 0 1px rgba(240, 128, 76, .18), 0 18px 40px rgba(0, 0, 0, .45);
}

.chamber figcaption {
  margin-top: .9rem;
  font-size: .8125rem;
  letter-spacing: .02em;
}

/* The hero deliberately leaves the upper right of the viewport clear, so the
   setting sun and the figure on the ridge are never covered by type. */
.hero {
  min-height: min(78vh, 44rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 12vh, 8rem);
  max-width: 34rem;
}

.hero h1 { margin-bottom: .35em; }

/* --- Buttons ------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.4rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  background: rgba(42, 22, 16, .5);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.button:hover { background: rgba(60, 31, 21, .72); border-color: var(--ember-edge); }
.button:active { transform: translateY(1px); }

.button--ember {
  /* The fill stays --ember; the edge is what has to clear 3:1 against bare
     art, and --ember alone measures 2.80:1 there. */
  background: var(--ember);
  border-color: var(--ember-edge);
  color: var(--on-ember);
}
.button--ember:hover { background: var(--ember-hover); border-color: var(--ember-hover); }

/* --- Cards --------------------------------------------------------------- */

.cards {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
}

.card h3 { margin-bottom: .5rem; }

.card p { color: var(--ink-dim); }

.card__status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: .3rem .7rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember-text);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.card__meta {
  margin-top: auto;
  padding-top: 1.2rem;
  font-size: .8125rem;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

/* --- Definition rows (contact, studio facts) ----------------------------- */

.rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2rem);
}

.rows > div {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: .4rem 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--rule);
}
.rows > div:first-child { border-top: 0; padding-top: 0; }
.rows > div:last-child { padding-bottom: 0; }

.rows dt {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: .3em;
}

.rows dd { margin: 0; }

@media (max-width: 34rem) {
  .rows > div { grid-template-columns: 1fr; }
}

/* --- Prose block --------------------------------------------------------- */

.prose { padding: clamp(1.6rem, 4vw, 2.75rem); }
.prose > :last-child { margin-bottom: 0; }

/* --- Motion -------------------------------------------------------------- */

/* Scroll-linked movement bothers some people. The parallax is driven by JS,
   which checks this query before it ever writes a transform; this rule is the
   belt to that braces, and also kills the entrance transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .backdrop__image { transform: none !important; will-change: auto; }
}

/* ==========================================================================
   Element inspector — inert unless asked for with ?tags or ?focus=<tag>.
   Nothing below affects an ordinary visit; the classes are only ever added
   by js/main.js when those parameters are present.
   ========================================================================== */

.eid-on [data-eid] {
  outline: 1px dashed rgba(240, 128, 76, .75);
  outline-offset: 2px;
}

.eid-on [data-eid]:hover { outline-style: solid; outline-width: 2px; }

.eid-badge {
  position: absolute;
  z-index: 9998;
  font: 500 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  padding: 0 .35em;
  border-radius: 3px;
  background: var(--ember);
  color: var(--on-ember);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

.eid-badge:hover { background: var(--ember-bright); }

.eid-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 10000;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--ember);
  color: var(--on-ember);
  font: 500 .8125rem/1 var(--body);
  letter-spacing: .08em;
}

.eid-focus-veil {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(10, 5, 4, .86);
}

.eid-focused {
  position: relative;
  z-index: 9995;
  outline: 2px solid var(--ember-edge);
  outline-offset: 6px;
  border-radius: 4px;
}