/* Guardian Lynx — microsite
   Dark, restrained, type-forward. No third-party assets. */

:root {
  --bg:      #08090a;
  --bg-2:    #0d0e10;
  --ink:     #e9e6df;            /* warm off-white — echoes the device */
  --ink-dim: rgba(233,230,223,.56);
  --ink-faint: rgba(233,230,223,.30);
  --line:    rgba(233,230,223,.10);
  --accent:  #3a7d83;            /* muted teal, from the deck header. used sparingly */

  --serif: Georgia, "Times New Roman", ui-serif, serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(1.5rem, 5vw, 6rem);
  --maxw: clamp(20rem, 58vw, 76rem); /* grows on wide/ultrawide screens instead of hard-capping at a desktop width */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* faint film grain / vignette to kill the "flat black" feel */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%);
  z-index: 2;
}

a { color: inherit; }

/* ---------- brand mark (persistent) ---------- */
.brand {
  position: fixed; top: clamp(1rem,2.5vw,2rem); left: var(--pad);
  z-index: 5; opacity: .82; transition: opacity .4s ease;
  /* logo is now light line-art on a transparent bg (see asset fix) —
     normal blending shows it correctly; mix-blend-mode:screen was
     wrong for this asset before (see commit) and is not needed now */
}
.brand:hover { opacity: 1; }
.brand img { display: block; height: clamp(66px, 7.5vw, 96px); width: auto; }

/* ---------- section shell ---------- */
.s {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
  border-top: 1px solid var(--line);
}
.s:first-child { border-top: 0; }

/* section index tag, cryptic corner numbering */
.s[data-section]::after {
  content: attr(data-section);
  position: absolute; top: clamp(1.2rem,3vh,2.4rem); right: var(--pad);
  font-family: var(--sans); font-size: .7rem; letter-spacing: .28em;
  color: var(--ink-faint);
  z-index: 1; /* stay above any .sectionbg photo */
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 1; }
.wrap--center { text-align: center; }

/* ---------- type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 7.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
}
.display--m { font-size: clamp(2rem, 4vw, 4.6rem); }
.display em, .not dt em, .stack em { font-style: italic; color: var(--ink); }

.eyebrow {
  font-family: var(--sans);
  font-size: clamp(1.2rem, 1.35vw, 1.575rem); letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.8rem;
}
.label {
  font-family: var(--sans);
  font-size: clamp(1.17rem, 1.275vw, 1.5rem); letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 2.4rem;
}
.lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 1.6vw, 1.9rem);
  color: var(--ink-dim); margin: 1.6rem 0 0; max-width: 40ch;
}
.wrap--center .lede { margin-inline: auto; }

/* ---------- 2 · problem ---------- */
.stack { list-style: none; margin: 0; padding: 0; }
.stack li {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 4rem);
  line-height: 1.25; color: var(--ink);
  padding: .55em 0; border-bottom: 1px solid var(--line);
}
.stack li:last-child { border-bottom: 0; }

/* ---------- 3 · object ---------- */
.wrap--object {
  display: grid; gap: clamp(1rem, 5vw, 5rem);
  grid-template-columns: 1.15fr .85fr; align-items: center;
}
.wrap--object > .label { grid-column: 1 / -1; margin-bottom: .6rem; }
.render {
  /* taller than wide — the .object__text column next to it (heading +
     lede + dims) runs long, and 16/10 left it towering over a short,
     wide box. 4/5 roughly matches text-column height at common desktop
     widths (~1216-1600px content width) without going empty-lot tall
     at the narrow end just above the 720px stack breakpoint. */
  margin: 0; position: relative; aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.render img {
  /* transparent packshot, not a full-bleed photo — contain so the device
     never crops, its own alpha margin gives the framing */
  width: 100%; height: 100%; object-fit: contain;
}

/* ---------- image + text split (sections 4, 6, 7) ----------
   Bounded photo box, same philosophy as .render above: the image is
   sized as a fraction of --maxw (which itself is capped), never as a
   fraction of the raw viewport — so it can't blow out into an extreme
   crop on an ultrawide screen the way a full-bleed background would. */
.wrap--split {
  display: grid; gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: 1fr 1.2fr; align-items: center;
}
.photo-box {
  margin: 0; position: relative; aspect-ratio: 4 / 5;
  border: 1px solid var(--line); overflow: hidden;
  background: var(--bg-2);
}
.photo-box img { width: 100%; height: 100%; object-fit: cover; }

/* lets the box give up its fixed 4:5 crop and match the height of a
   long text column instead — for split sections where copy runs tall */
.photo-box--stretch { align-self: stretch; aspect-ratio: auto; }

.dims {
  font-family: var(--sans); font-size: clamp(.8rem, .9vw, 1rem); letter-spacing: .16em;
  color: var(--ink-faint); text-transform: uppercase; margin: 1.4rem 0 0;
}
.object__text .display--m { margin-top: 0; }

/* "We arrive inside it." needs to sit on one line — the shared
   display--m clamp scales font-size and container in lockstep above
   ~1210px, so widening the column alone never catches up (verified
   at 1800px, still wrapped); this trims the size specifically here. */
.s--fits .display--m { font-size: clamp(1.5rem, 2.9vw, 3.6rem); }

/* ---------- 4 · flow ---------- */
.flow { list-style: none; margin: 2.6rem 0 0; padding: 0; max-width: 46ch; }
.flow li {
  display: flex; gap: 1.1rem; align-items: baseline;
  font-family: var(--serif); font-size: clamp(1.2rem, 1.5vw, 1.9rem);
  line-height: 1.4; color: var(--ink-dim);
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.flow li:last-child { border-bottom: 0; }
.flow__n {
  font-family: var(--sans); font-size: clamp(.7rem, .8vw, .9rem); letter-spacing: .2em;
  color: var(--accent); flex: none; padding-top: .35em;
}

/* ---------- 4 · who it's for / 6 · what it is not (shared dt/dd list) ---------- */
.not, .who { margin: 0; }
.not > div, .who > div {
  display: grid; grid-template-columns: minmax(0, 18rem) 1fr; gap: 1.5rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line);
}
.not > div:last-child, .who > div:last-child { border-bottom: 0; }
.not dt, .who dt { font-family: var(--serif); font-size: clamp(1.5rem, 2vw, 2.6rem); margin: 0; }
.not dd, .who dd {
  margin: 0; align-self: center; color: var(--ink-dim);
  font-size: clamp(1rem, 1.1vw, 1.35rem); line-height: 1.5;
}
.who { margin-top: 2.2rem; }

/* ---------- 7 · close ---------- */
.s--close { background: var(--bg-2); }
.contact { margin: 2.6rem 0 0; }
.contact a {
  font-family: var(--sans); font-size: clamp(1.05rem, 1.2vw, 1.4rem); letter-spacing: .04em;
  text-decoration: none; border-bottom: 1px solid var(--accent);
  padding-bottom: 2px; transition: border-color .3s ease, color .3s ease;
}
.contact a:hover { color: #fff; border-color: var(--ink); }

/* ---------- 7 · posture (or-separator) ---------- */
.or-sep {
  display: block; text-align: left;
  font-family: var(--sans); font-size: clamp(1.445rem, 1.7vw, 1.87rem);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint); margin: .6em 0;
}
.foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(1.4rem,4vh,2.6rem);
  z-index: 1;
  display: flex; justify-content: flex-end;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---------- scroll cue ---------- */
.scrollcue {
  position: absolute; bottom: clamp(2rem,5vh,3rem); left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint); transition: opacity .5s ease;
}
.scrollcue::after {
  content: ""; display: block; width: 1px; height: 34px; margin: .8rem auto 0;
  background: linear-gradient(var(--ink-faint), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
.scrollcue.is-hidden { opacity: 0; }
@keyframes cue { 0%,100% { transform: scaleY(.5); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* ---------- reveal motion ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
/* stagger siblings within a list/group */
.stack li:nth-child(2), .flow li:nth-child(2), .not > div:nth-child(2), .who > div:nth-child(2) { transition-delay: .08s; }
.stack li:nth-child(3), .flow li:nth-child(3), .not > div:nth-child(3), .who > div:nth-child(3) { transition-delay: .16s; }
.flow li:nth-child(4), .not > div:nth-child(4), .who > div:nth-child(4) { transition-delay: .24s; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .wrap--object, .wrap--split { grid-template-columns: 1fr; }
  .not > div, .who > div { grid-template-columns: 1fr; gap: .4rem; }
  .foot { position: static; margin-top: 3rem; }
  /* stacked single column: no sibling row-height to stretch against */
  .photo-box--stretch { align-self: auto; aspect-ratio: 4 / 5; }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .scrollcue::after { animation: none; }
}