/* BRASA — reset, layout primitives and the shared editorial furniture. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* <picture> is only a source switch, never a box: letting it disappear from the
   box tree makes the <img> the direct child of whatever frame sizes it, so
   height:100% resolves against that frame instead of collapsing to the image's
   own aspect ratio (which used to leave a dark band under every crop). */
picture { display: contents; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea, button { font-family: inherit; }

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

::selection { background: var(--ember); color: var(--black); }

/* --- layout ------------------------------------------------------------ */
.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--sect-y);
}
.section--flush { padding-block: 0; }

/* On a phone every section used to breathe as if it were on a desktop: each
   stylesheet sets its own clamp(…, 13vh, …), which is about 105px above AND
   below, so two sections met across 210px of nothing. One shorter rhythm for
   all of them. The selector is heavier than a section's own rule on purpose —
   those stylesheets load after this one. Flush and tight sections keep theirs. */
@media (max-width: 760px) {
  main .section:not(.section--flush):not(.section--tight) {
    padding-block: clamp(3rem, 7vh, 4rem);
  }
}

.shell {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - var(--gutter) * 2, 1100px); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .8rem 1.2rem;
  background: var(--ember);
  color: var(--black);
  font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- type -------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-huge);
  letter-spacing: var(--track-huge);
  text-wrap: balance;
}
.display--mega {
  font-size: var(--t-mega);
  line-height: var(--lh-mega);
  letter-spacing: var(--track-mega);
}
.display--huge { font-size: var(--t-huge); }
.display--big  { font-size: var(--t-big); }

.label {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.label::before {
  content: "";
  width: 1.8em;
  height: 1px;
  background: var(--accent);
}
.label--bare::before { display: none; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  max-width: var(--maxw-text);
  color: var(--muted);
}
.lede strong { color: var(--fg); font-weight: 600; }

.serif-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.35;
  color: var(--fg);
}

.stack > * + * { margin-top: var(--gap); }

/* an ember rule: the thin orange line that travels through the dark chapters */
.ember-rule {
  position: relative;
  height: 1px;
  background: var(--rule);
  overflow: hidden;
}
.ember-rule::after {
  content: "";
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, transparent, var(--ember));
  transform-origin: left;
}
.ember-rule.is-in::after {
  animation: ember-travel 1.6s var(--ease-out) forwards;
}
@keyframes ember-travel { to { inset: 0 0 0 0; } }

/* --- buttons ----------------------------------------------------------- */
.btn {
  --btn-bg: var(--ember);
  --btn-fg: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  padding: .95em 1.6em;
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--burnt); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border: 1px solid var(--rule);
}
.btn--ghost:hover {
  background: var(--fg);
  color: var(--bg, var(--char));
  border-color: var(--fg);
}
.is-cream .btn--ghost:hover { color: var(--cream); background: var(--char); }

.btn--link {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  padding: .4em 0;
  border-radius: 0;
  border-bottom: 1px solid var(--rule);
}
.btn--link:hover {
  background: none;
  transform: none;
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* --- photography ------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--black);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-image) var(--ease-out);
}
.frame--hover:hover img { transform: scale(var(--img-zoom)); }

.frame--ratio-wide { aspect-ratio: 16 / 9; }
.frame--ratio-4x5  { aspect-ratio: 4 / 5; }
.frame--ratio-3x4  { aspect-ratio: 3 / 4; }
.frame--ratio-1x1  { aspect-ratio: 1 / 1; }

/* a warm scrim so cream type stays legible over photography */
.scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 9, 8, .55) 0%, rgba(11, 9, 8, .1) 42%, rgba(11, 9, 8, .82) 100%);
  pointer-events: none;
}

/* small editorial captions pinned to a photograph */
.pin {
  position: absolute;
  z-index: 2;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}

.demo-note {
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .8;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}