/* ===========================================================
   ARTICULATED OFFERING — site stylesheet
   Palette derived from the cast's substances, not invented.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* the vellum dark field — warm, never pure black */
  --field:        #13100C;
  --field-raised: #1A1510;
  --field-edge:   #2A2119;

  /* graphite and light on vellum */
  --ink:          #EDE4D3;
  --ink-muted:    #9A8E7C;
  --ink-faint:    #6B6255;

  /* substances (each accent is a figure's material) */
  --amber:        #C8912E;  /* Sun — alabaster with amber glass */
  --wax:          #D9C79B;  /* Moon — worked beeswax */
  --verdigris:    #7A9782;  /* Venus — copper gone green */
  --copper:       #A6603C;  /* Venus — copper before it turns */
  --gallium:      #AFB5BA;  /* Mercury — cool, state-dependent */

  /* per-system accent: the three theatres carry their own material */
  --accent: var(--amber);

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --band-y: clamp(4.5rem, 11vh, 9rem);

  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Spectral', Georgia, serif;
  --f-spec: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-system="hee"]  { --accent: var(--amber); }
[data-system="her"]  { --accent: var(--wax); }
[data-system="heir"] { --accent: var(--verdigris); }

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

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

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.115rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* vellum tooth — a grain over the whole field so it never reads as flat black */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; }

::selection { background: var(--accent); color: var(--field); }

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

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.5rem + 5.2vw, 5.4rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); }

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

em { font-style: italic; color: var(--wax); }

.lede {
  font-size: clamp(1.14rem, 1rem + 0.65vw, 1.42rem);
  line-height: 1.62;
  color: var(--ink);
}

.spec {
  font-family: var(--f-spec);
  font-size: 0.685rem;
  font-weight: 400;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* copy slots only Rimari can fill — deliberately conspicuous */
.slot {
  font-family: var(--f-spec);
  font-size: 0.78em;
  letter-spacing: 0.06em;
  color: var(--amber);
  border-bottom: 1px dashed color-mix(in srgb, var(--amber) 55%, transparent);
  padding: 0 0.12em;
  white-space: nowrap;
}

/* ---------- layout ---------- */

.wrap { width: min(72rem, 100% - var(--gutter) * 2); margin-inline: auto; }
.narrow { width: min(46rem, 100% - var(--gutter) * 2); margin-inline: auto; }

.band { padding-block: var(--band-y); }
.band--tight { padding-block: calc(var(--band-y) * 0.55); }
.band--edge { border-top: 1px solid var(--field-edge); }

.stack > * + * { margin-top: 1.5rem; }

/* ---------- header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.15rem var(--gutter);
  background: color-mix(in srgb, var(--field) 88%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--field-edge);
}

.mark {
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.mark span { color: var(--ink-faint); }

.nav { display: flex; gap: clamp(0.9rem, 2.2vw, 1.9rem); flex-wrap: wrap; }
.nav a {
  font-family: var(--f-spec);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- hero: the viewer is the room ---------- */

.hero {
  position: relative;
  min-height: min(88vh, 60rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--field-edge);
}

.hero-field {
  position: absolute;
  inset: 0;
  --mx: 50%;
  --my: 46%;
  --r: 32vmax;
}

.hero-plate {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* the figure barely present in the dark... */
.hero-plate--base { opacity: 0.13; filter: grayscale(0.4) contrast(0.9); }

/* ...and fully present only where the visitor's light falls */
.hero-plate--lit {
  opacity: 0.95;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.72) 38%, transparent 72%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.72) 38%, transparent 72%);
}

.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle calc(var(--r) * 0.85) at var(--mx) var(--my),
    color-mix(in srgb, var(--amber) 15%, transparent) 0%, transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--field) 4%, color-mix(in srgb, var(--field) 55%, transparent) 42%, transparent 78%);
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem); }
.hero-copy h1 { max-width: 15ch; }
.hero-sub { margin-top: 1.6rem; max-width: 30rem; color: var(--ink-muted); }
.hero-note { margin-top: 2.2rem; }

/* ---------- the three theatres ---------- */

.theatres { display: grid; gap: 1px; background: var(--field-edge); border-block: 1px solid var(--field-edge); }
@media (min-width: 56rem) { .theatres { grid-template-columns: repeat(3, 1fr); } }

.theatre {
  background: var(--field);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 3vw, 2.4rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background 0.4s;
}
.theatre:hover { background: var(--field-raised); }
.theatre h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
.theatre p { color: var(--ink-muted); font-size: 0.98rem; margin: 0; }
.theatre .spec { color: color-mix(in srgb, var(--accent) 80%, var(--ink-faint)); }
.theatre .rule { height: 1px; background: var(--accent); width: 2.4rem; opacity: 0.75; }

/* ---------- the cabinet (cast) ---------- */

.cabinet {
  display: grid;
  gap: 1px;
  background: var(--field-edge);
  border: 1px solid var(--field-edge);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.figure {
  background: var(--field);
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.figure img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; opacity: 0.88; }
.figure h3 { font-size: 1.25rem; }
.figure .ache { font-size: 0.95rem; line-height: 1.55; color: var(--ink-muted); font-style: italic; margin: 0; }
.figure .substance { color: var(--ink-faint); }

/* ---------- product page furniture ---------- */

.page-head { border-bottom: 1px solid var(--field-edge); }
.page-head h1 { max-width: 18ch; }
.page-head .spec { color: var(--accent); margin-bottom: 1.4rem; display: block; }

.receive { display: grid; gap: 1px; background: var(--field-edge); border: 1px solid var(--field-edge); }
@media (min-width: 46rem) { .receive { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.receive > div { background: var(--field); padding: 1.6rem 1.5rem; }
.receive h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.receive p { font-size: 0.95rem; color: var(--ink-muted); margin: 0; }

.sequence { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.sequence li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--field-edge);
  max-width: 44rem;
}
.sequence li:last-child { border-bottom: 1px solid var(--field-edge); }
.sequence li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-spec);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.42rem;
}
.sequence strong { font-family: var(--f-body); font-weight: 500; display: block; grid-column: 2; }
.sequence li > span { grid-column: 2; color: var(--ink-muted); font-size: 0.95rem; }

/* the honesty block — same on every product page */
.isnt {
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.6rem;
  max-width: 40rem;
}
.isnt ul { margin: 0.8rem 0 0; padding-left: 1.1rem; color: var(--ink-muted); }
.isnt li { margin-bottom: 0.5rem; }

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem 1.6rem;
  margin-bottom: 1.8rem;
}
.price .amount { font-family: var(--f-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }

.btn {
  display: inline-block;
  font-family: var(--f-spec);
  font-size: 0.75rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--field);
  background: var(--accent);
  padding: 1rem 2rem;
  border: 1px solid var(--accent);
  transition: background 0.3s, color 0.3s;
}
.btn:hover { background: transparent; color: var(--accent); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-faint); }
.btn--ghost:hover { background: var(--ink); color: var(--field); border-color: var(--ink); }

.embed-slot {
  border: 1px dashed var(--field-edge);
  padding: 2.4rem 1.5rem;
  text-align: center;
  color: var(--ink-faint);
  background: var(--field-raised);
}

/* ---------- the film ---------- */

.film { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 60rem) { .film { grid-template-columns: 1.25fr 1fr; gap: 3.5rem; } }
.film video, .film .film-holder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--field-raised);
  border: 1px solid var(--field-edge);
}
.film .film-holder { display: grid; place-items: center; color: var(--ink-faint); }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--field-edge);
  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--ink-faint);
}
.foot a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { border-bottom-color: var(--ink-muted); }
.foot-links { display: flex; flex-direction: column; gap: 0.5rem; }
.foot p { font-size: 0.85rem; max-width: 26rem; margin: 0; }

/* ---------- motion ---------- */

.rise { opacity: 0; transform: translateY(14px); transition: opacity 0.85s ease, transform 0.85s ease; }
.rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .hero-field { --r: 100vmax; --mx: 50%; --my: 45%; }
  .hero-plate--lit { opacity: 0.8; }
  .hero-glow { display: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- legal pages ---------- */

.legal { counter-reset: sec; }
.legal h2 {
  counter-increment: sec;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  margin: 2.6rem 0 0.9rem;
}
.legal h2::before {
  content: counter(sec) ". ";
  color: var(--accent);
}
.legal h3 { font-size: 1.05rem; margin: 1.6rem 0 0.5rem; font-weight: 500; font-family: var(--f-body); }
.legal p, .legal li { max-width: 42rem; }
.legal ul, .legal ol { padding-left: 1.2rem; color: var(--ink); }
.legal li { margin-bottom: 0.5rem; }
.legal .effective { color: var(--ink-muted); font-size: 0.9rem; }

/* items that need the attorney's judgment, not just a blank filled */
.review {
  display: block;
  border-left: 2px solid var(--copper);
  background: var(--field-raised);
  padding: 0.8rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.88rem;
  color: var(--ink-muted);
  max-width: 42rem;
}
.review::before {
  content: "FOR ATTORNEY REVIEW — ";
  font-family: var(--f-spec);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--copper);
}

/* ---------- tiers & the switchboard ---------- */

.tiers { display: grid; gap: 1px; background: var(--field-edge); border: 1px solid var(--field-edge); }
@media (min-width: 56rem) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { background: var(--field); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 0.9rem; }
.tier h3 { font-size: 1.25rem; }
.tier > p { color: var(--ink-muted); font-size: 0.95rem; margin: 0; flex-grow: 1; }
.tier .price { margin: 0; }
.tier .amount { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.tier .btn { text-align: center; }
.tier .cap { font-size: 0.78rem; }

.btn--closed {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--field-edge);
  pointer-events: auto;
}
.btn--closed:hover { background: var(--field-raised); color: var(--ink); border-color: var(--ink-faint); }

/* ---------- companion essays & the threshold text ---------- */

.essay h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); margin: 2.8rem 0 0.9rem; }
.essay p { max-width: 42rem; }

.threshold {
  border: 1px solid var(--field-edge);
  border-left: 2px solid var(--accent);
  background: var(--field-raised);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  margin: 1.5rem 0;
  max-width: 44rem;
}
.threshold p { font-size: 0.98rem; }
.threshold p:last-child { margin-bottom: 0; }

.concept { border-left: 2px solid var(--accent); padding-left: 1.6rem; }
.concept p { max-width: 40rem; }
.concept .more { font-family: var(--f-spec); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.concept .more a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- the site-wide field: every page is a room with a figure in it ---------- */

.site-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --mx: 50%;
  --my: 42%;
  --r: 34vmax;
}
.site-field .plate {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.site-field .plate--base { opacity: 0.45; filter: grayscale(0.35) brightness(0.72) contrast(0.9); }
.site-field .plate--lit {
  opacity: 0.95;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.7) 38%, transparent 72%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.7) 38%, transparent 72%);
}
.site-field .glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle calc(var(--r) * 0.85) at var(--mx) var(--my),
    color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 68%);
  mix-blend-mode: screen;
}
/* readability veil: darker toward the edges and the bottom, where text runs long */
.site-field::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, transparent 0%, color-mix(in srgb, var(--field) 62%, transparent) 78%),
    linear-gradient(to bottom, color-mix(in srgb, var(--field) 30%, transparent) 0%, color-mix(in srgb, var(--field) 74%, transparent) 100%);
}

main, .foot { position: relative; z-index: 1; }

/* the hero's own dim layer rises to match the new register */
.hero-plate--base { opacity: 0.45; filter: grayscale(0.3) brightness(0.8); }

@media (prefers-reduced-motion: reduce) {
  .site-field .plate--lit { display: none; }
  .site-field .glow { display: none; }
}

/* ---------- touch devices: the light is a cursor gesture, so it rests ----------
   No pointer means no roving light. The figure simply stands in the field,
   still, and the phone stops repainting the viewport sixty times a second. */

@media (hover: none), (pointer: coarse) {
  .site-field .plate--lit,
  .site-field .glow,
  .hero-plate--lit,
  .hero-glow { display: none; }

  /* the grain stays, but without blend-mode compositing */
  body::before { mix-blend-mode: normal; opacity: 0.03; }

  /* backdrop blur is the single most expensive thing in a sticky bar */
  .masthead { backdrop-filter: none; background: var(--field); }

  /* the base plate carries the whole image now, so let it sit a touch brighter */
  .site-field .plate--base { opacity: 0.5; }
  .hero-plate--base { opacity: 0.6; }
}