/* Swiss Soil — experience.css
   Art-directed CSS for the six-page Living Intelligence preview.
   Owns layout, typography, and visual rhythm for all sections
   generated by experience/build.py. Never overrides hero.css or v2.css
   approved fragments; scoped to new section classes only.

   Palette: --peat #f1ecdf · --peat-2 #e7e0cf · --bone #2b2119
             --ash #7d6f5f · --moss #5f6b3a · --slate #3f5b66
   Typography: Archivo 300, width axis 72→112 for hierarchy.
   Field exposes ≥60% of viewport. Copy sits in left ~27%.
*/

/* ─── SHARED SECTION RHYTHM ────────────────────────────────────── */

.experience-mast {
  padding: clamp(120px, 14svh, 200px) 0 clamp(64px, 7vw, 96px);
  max-width: var(--w);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.experience-mast .mono { color: var(--moss); }
.experience-mast h1 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(52px, 7.2vw, 118px);
  line-height: .92;
  letter-spacing: -.03em;
  margin-top: 20px;
  max-width: 20ch;
}
.experience-mast p {
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--bone-2);
  margin-top: 24px;
  max-width: 48ch;
}

/* ─── LIVING FIELD — the field as protagonist ───────────────────── */
/*
  Desktop:
  - Section is 330svh tall; sticky panel fills calc(100svh - 64px).
  - .field-visual occupies the right ~73% of the sticky frame.
  - .scene-copy floats left, max ~27% wide.
  Mobile:
  - Sticky is NOT used; field is a fixed-height non-scrolling panel
    with manual scene tabs, no giant blank scroll.
*/

.living-story {
  position: relative;
  /* desktop: tall enough to scroll through 4 scenes */
  height: 330svh;
  /* canvas is sized to full sticky width; clip to prevent scrollWidth inflation */
  overflow-x: hidden;
  contain: layout style;
}

.living-sticky {
  position: sticky;
  top: 64px;
  height: calc(100svh - 64px);
  overflow: hidden;
  /* max-width ensures the sticky never exceeds viewport on any breakpoint */
  max-width: 100%;
  width: 100%;
  display: grid;
  /* field eats right; copy panel on left */
  grid-template-columns: minmax(0, 28%) 1fr;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "top   top"
    "copy  field"
    "tabs  tabs"
    "prog  prog";
}

/* The field canvas zone — right side, full height */
.field-visual {
  grid-area: field;
  position: relative;
  overflow: hidden;
  /* column starts at 28% of the sticky width; total field ≥72% of full viewport */
}

.field-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  z-index: 0;
}

#field-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

/* Scene top bar — spans full width */
.scene-top {
  grid-area: top;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad);
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
  border-bottom: 1px solid var(--line);
  background: var(--peat);
  z-index: 10;
  grid-column: 1 / -1;
}
.scene-top .scene-location { color: var(--bone-2); }
.scene-top a {
  color: var(--ash);
  font-size: 11px;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  white-space: nowrap;
}
.scene-top a:hover { color: var(--bone); }

/* Copy panel — left column, vertically centred in its row */
.scene-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px var(--pad) 24px;
  /* left padding only from --pad; right edge matches 27% column */
  z-index: 5;
  background: var(--peat);
  /* a very faint right bleed so the field edge isn't hard */
  box-shadow: 8px 0 24px rgba(241,236,223,.85);
}

.scene-eyebrow {
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--moss);
  display: block;
  margin-bottom: 16px;
}

.scene-copy h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--bone);
  margin: 0 0 20px;
  text-wrap: balance;
}

.scene-copy p {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.55;
  color: var(--bone-2);
  max-width: 30ch;
}

/* Float labels — suppressed per art direction brief */
.scene-labels { display: none; }

/* Bottom row: tabs + pause + caption */
.scene-bottom {
  grid-column: 1 / -1;
  grid-area: tabs;
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--line);
  background: var(--peat);
  min-height: 56px;
  z-index: 10;
}

.scene-tabs {
  display: flex;
  flex: 1;
}

.scene-tabs button {
  flex: 1;
  min-height: 56px;
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ash);
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 0 12px;
  transition: background .18s, color .18s;
  position: relative;
}
.scene-tabs button:last-child { border-right: 0; }
.scene-tabs button[aria-selected="true"] {
  color: var(--bone);
  background: var(--peat-2);
}
.scene-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--moss);
}
.scene-tabs button:hover { color: var(--bone); background: rgba(95,107,58,.06); }

.scene-pause {
  padding: 0 20px;
  min-height: 56px;
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  border-left: 1px solid var(--line);
  border-radius: 0;
  white-space: nowrap;
}
.scene-pause:hover { color: var(--bone); }

.scene-caption {
  padding: 0 var(--pad);
  font-size: 10px;
  color: var(--ash);
  font-variation-settings: "wdth" 112;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-left: 1px solid var(--line);
  min-height: 56px;
  display: flex;
  align-items: center;
}

/* Progress bar */
.scene-progress {
  grid-column: 1 / -1;
  grid-area: prog;
  height: 2px;
  background: var(--peat-2);
  overflow: hidden;
}
.scene-progress i {
  display: block;
  height: 100%;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .1s linear;
}

/* ─── FIELD TOOLS (added by parent rewrite — defensive CSS) ─────── */

.field-tools {
  position: absolute;
  bottom: 72px; /* above bottom bar */
  right: clamp(16px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 8;
}
.field-tools button {
  min-height: 44px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  letter-spacing: .04em;
  border: 1px solid rgba(241,236,223,.55);
  border-radius: 999px;
  background: rgba(241,236,223,.12);
  color: var(--peat);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.field-tools button:hover {
  background: rgba(241,236,223,.28);
  color: #fff;
}
.field-tools button:active { transform: scale(.96); }

.field-legend {
  position: absolute;
  bottom: 72px;
  left: clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 8;
  padding: 10px 12px;
  background: rgba(43,33,25,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(241,236,223,.78);
}
.field-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

#field-status {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 7px 14px;
  background: rgba(43,33,25,.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(241,236,223,.88);
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .3s;
}
#field-status:empty { opacity: 0; }

/* ─── HOME — below opening ─────────────────────────────────────── */

/* AGROSTASIS gateway — enormous word as landscape, not a logo */
.platform-gateway {
  padding: clamp(80px, 9vw, 140px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  border-top: 1px solid var(--line);
}
.gateway-word {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.gateway-word h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 68;
  font-size: clamp(52px, 8.4vw, 136px);
  line-height: .88;
  letter-spacing: -.04em;
  color: var(--bone);
}
.gateway-word span {
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 400;
  color: var(--ash);
  align-self: flex-start;
  padding-top: .6em;
}
.gateway-caption {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 8px;
}
.gateway-caption p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  max-width: 44ch;
  color: var(--bone-2);
}
.gateway-scroll {
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ash);
}

/* System statement — Active Inference editorial sentence */
.system-statement {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.system-statement .mono { color: var(--moss); }
.system-statement h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 76;
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--bone);
  margin-top: 20px;
  max-width: 26ch;
}
.system-statement div {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 42px;
}
.system-statement p {
  font-size: 16px;
  line-height: 1.55;
  max-width: 46ch;
}

/* Research horizon — two seasons, Cognitive Vineyard */
.research-horizon {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 0 clamp(32px, 5vw, 96px);
}
.horizon-title { grid-column: 1; }
.horizon-title .mono { color: var(--moss); }
.horizon-title h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(38px, 5vw, 80px);
  line-height: .9;
  letter-spacing: -.035em;
  margin-top: 18px;
}
.horizon-years {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding-top: 24px;
}
.horizon-years span {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(64px, 8vw, 112px);
  line-height: .88;
  letter-spacing: -.04em;
  color: var(--peat-2);
  -webkit-text-stroke: 1px var(--ash);
}
.horizon-bottom {
  grid-column: 1;
  padding-top: 28px;
}
.horizon-bottom p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 40ch;
}
.partner-line {
  grid-column: 1 / -1;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 32px;
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Instrument scene — hero with real microscope image */
.instrument-scene {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.instrument-image {
  position: relative;
}
.instrument-image img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  background: var(--peat-2);
}
.documentary-note {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ash);
}
.instrument-copy .mono { color: var(--moss); }
.instrument-copy h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: .94;
  letter-spacing: -.03em;
  margin: 18px 0 22px;
}
.instrument-copy p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 44ch;
}
.instrument-copy p + p { margin-top: 14px; }
.instrument-goal {
  font-weight: 400;
  color: var(--bone) !important;
}
.instrument-copy .experience-link { margin-top: 28px; display: inline-flex; }

/* Land mandate — service image teaser */
.land-mandate {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.land-mandate img {
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
  filter: brightness(.88) saturate(.9);
}
.mandate-top,
.mandate-bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: var(--pad);
  color: var(--peat);
}
.mandate-top {
  top: 0;
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(24,30,26,.6) 0%, transparent 100%);
}
.mandate-bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(24,30,26,.72) 0%, transparent 100%);
  align-items: flex-end;
}
.mandate-bottom h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(32px, 4.4vw, 72px);
  line-height: .9;
  letter-spacing: -.03em;
}
.mandate-bottom div {
  max-width: 36ch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mandate-bottom p {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(241,236,223,.82);
}

/* Chapter link — huge typographic next-page hook */
.chapter-link {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.chapter-link .mono { color: var(--ash); }
.chapter-link .experience-link {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(36px, 5.2vw, 80px);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--bone);
  display: flex;
  align-items: baseline;
  gap: 20px;
  width: fit-content;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 8px;
  transition: color .2s, border-color .2s;
}
.chapter-link .experience-link span:last-child {
  font-size: .5em;
  opacity: .55;
  transition: transform .25s cubic-bezier(.22,.68,.24,1);
}
.chapter-link .experience-link:hover {
  color: var(--moss);
  border-color: var(--moss);
}
.chapter-link .experience-link:hover span:last-child {
  transform: translate(8px, -6px);
}

/* ─── PLATFORM PAGE ─────────────────────────────────────────────── */

/* Intelligence atlas — typographic section index with expandable mechanisms */
.intelligence-atlas {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
}
.atlas-heading {
  position: sticky;
  top: 80px;
}
.atlas-heading .mono { color: var(--moss); }
.atlas-heading h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: .9;
  letter-spacing: -.03em;
  margin-top: 18px;
}
.atlas-layers {
  border-top: 1px solid var(--line);
}
.atlas-layers details {
  border-bottom: 1px solid var(--line);
}
.atlas-layers summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 300;
  font-variation-settings: "wdth" 82;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
  gap: 24px;
  transition: color .15s;
}
.atlas-layers summary::-webkit-details-marker { display: none; }
.atlas-layers summary:hover { color: var(--moss); }
.atlas-layers summary span {
  flex: 1;
}
.atlas-layers summary i {
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  color: var(--ash);
  width: 24px;
  text-align: center;
  transition: transform .2s cubic-bezier(.22,.68,.24,1), color .15s;
  flex: none;
}
.atlas-layers details[open] summary i {
  transform: rotate(45deg);
  color: var(--moss);
}
.atlas-layers details > div {
  padding: 0 0 28px;
}
.atlas-layers details > div p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone-2);
  max-width: 54ch;
}
.atlas-layers details > div p + p { margin-top: 10px; }
.atlas-layers .status {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--moss);
  border: 1px solid var(--moss);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 14px;
}

/* Inference editorial — single philosophical sentence */
.inference-editorial {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.inference-editorial .mono { color: var(--moss); }
.inference-editorial h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(32px, 4vw, 62px);
  line-height: .92;
  letter-spacing: -.03em;
  margin-top: 18px;
  max-width: 18ch;
}
.inference-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 40px;
}
.inference-text p.large {
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 300;
  font-variation-settings: "wdth" 82;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--bone);
  max-width: 38ch;
}
.inference-text p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--bone-2);
  max-width: 46ch;
}

/* ─── SCIENCE PAGE ──────────────────────────────────────────────── */

/* Lab spread — instrument hero */
.lab-spread {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.lab-photo {
  position: relative;
}
.lab-photo img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  background: var(--peat-2);
}
.lab-photo span {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
}
.lab-heading .mono { color: var(--moss); }
.lab-heading h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(42px, 5.6vw, 88px);
  line-height: .9;
  letter-spacing: -.035em;
  margin: 20px 0 22px;
}
.lab-heading p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 44ch;
  color: var(--bone-2);
}
.circle-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font-size: 20px;
  color: var(--bone);
  margin-top: 28px;
  transition: background .2s, color .2s, border-color .2s;
}
.circle-link:hover {
  background: var(--bone);
  color: var(--peat);
  border-color: var(--bone);
}

/* Science signals — multiomics index */
.science-signals {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: .8fr 1.2fr .9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.signal-intro .mono { color: var(--moss); }
.signal-intro h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(28px, 3vw, 46px);
  line-height: .92;
  letter-spacing: -.03em;
  margin-top: 16px;
}
.signal-index {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.signal-index > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.signal-index span {
  display: block;
  font-size: 17px;
  font-weight: 300;
  font-variation-settings: "wdth" 82;
  color: var(--bone);
  margin-bottom: 4px;
}
.signal-index small {
  font-size: 12px;
  font-variation-settings: "wdth" 112;
  letter-spacing: .04em;
  color: var(--ash);
  line-height: 1.4;
}
.signal-note {
  padding-top: 20px;
}
.signal-note > span {
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--moss);
  display: block;
  margin-bottom: 14px;
}
.signal-note p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-2);
}

/* Optics study — instrument detail with interactive focus controls */
.optics-study {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(32px, 4vw, 64px);
}
.optics-head {
  grid-column: 1 / 2;
  grid-row: 1;
}
.optics-head .mono { color: var(--moss); }
.optics-head h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(32px, 3.8vw, 58px);
  line-height: .9;
  letter-spacing: -.03em;
  margin: 16px 0 16px;
}
.optics-head p { font-size: 16px; line-height: 1.55; max-width: 38ch; }

.optics-apparatus {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  position: relative;
}
.optics-apparatus img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--peat-2);
  filter: brightness(.95) saturate(.85);
  transition: filter .35s;
}
/* When a specific optic is active, lift brightness on the apparatus image */
.optics-apparatus[data-active-optic="focus"] img { filter: brightness(1.05) saturate(1.1); }
.optics-apparatus[data-active-optic="light"] img  { filter: brightness(1.12) saturate(1.05) contrast(1.04); }

.optics-annotations {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.optics-annotations button {
  min-height: 44px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  letter-spacing: .04em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ash);
  transition: background .18s, color .18s, border-color .18s;
}
.optics-annotations button:hover {
  border-color: var(--bone);
  color: var(--bone);
}
.optics-annotations button[aria-pressed="true"] {
  background: var(--bone);
  color: var(--peat);
  border-color: var(--bone);
}

/* Reticle — visual callout on image, repositioned by JS */
.optic-reticle {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: calc(100% - 56px);
  pointer-events: none;
  overflow: hidden;
}
.optic-reticle::before {
  content: "";
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  border: 1.5px solid rgba(241,236,223,.85);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(241,236,223,.15);
  transition: top .35s cubic-bezier(.22,.68,.24,1),
              left .35s cubic-bezier(.22,.68,.24,1),
              opacity .25s;
  opacity: 0;
}
/* Positions driven by [data-active-optic] on the apparatus */
.optics-apparatus[data-active-optic="stage"]  .optic-reticle::before { top: 55%; left: 42%; opacity: 1; }
.optics-apparatus[data-active-optic="focus"]  .optic-reticle::before { top: 28%; left: 50%; opacity: 1; width: 80px; height: 80px; }
.optics-apparatus[data-active-optic="light"]  .optic-reticle::before { top: 62%; left: 20%; opacity: 1; width: 56px; height: 56px; }

.optics-caption {
  grid-column: 1 / 2;
  grid-row: 2;
  align-self: start;
  padding-top: 4px;
}
.optics-caption > span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 14px;
}
.optics-caption p { font-size: 15px; line-height: 1.55; max-width: 36ch; }

/* Optic description — injected by experience.js */
.optic-description {
  grid-column: 1 / 2;
  grid-row: 3;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 4px;
}
#optic-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-2);
  max-width: 36ch;
  transition: opacity .25s;
}

/* ─── SERVICE PAGE ──────────────────────────────────────────────── */

/* Service mast inherits .experience-mast */

/* Responsibility scene — supplier collapse interaction */
.responsibility-scene {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.responsibility-scene > div:first-child .mono { color: var(--moss); }
.responsibility-scene > div:first-child h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(30px, 3.8vw, 58px);
  line-height: .92;
  letter-spacing: -.03em;
  margin: 16px 0 16px;
}
.responsibility-scene > div:first-child p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 40ch;
}

.responsibility-switch {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Mandate controls — the segmented toggle */
.mandate-controls {
  display: flex;
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px;
  width: fit-content;
  margin-bottom: 24px;
  background: var(--peat-2);
}
.mandate-controls button {
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  letter-spacing: .04em;
  border-radius: 999px;
  min-height: 44px;
  transition: background .2s, color .2s;
  color: var(--ash);
  white-space: nowrap;
}
.mandate-controls button[aria-pressed="true"] {
  background: var(--bone);
  color: var(--peat);
}
.mandate-controls button:hover:not([aria-pressed="true"]) {
  color: var(--bone);
}

/* Mandate list — six supplier rows that consolidate */
.mandate-list {
  border-top: 1px solid var(--line);
  transition: background .3s;
}
.mandate-list[data-mode="after"] {
  background: rgba(95,107,58,.04);
}

.mandate-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--bone);
  transition: opacity .3s, transform .3s;
}
.mandate-list > div:last-child { border-bottom: 0; }

/* Provider label (right column — who does this today) */
.mandate-list > div b {
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ash);
  text-align: right;
  transition: opacity .25s, color .25s;
  white-space: nowrap;
}

/* "After" state — providers converge visually into Swiss Soil */
.mandate-list[data-mode="after"] > div b {
  color: var(--moss);
}
.mandate-list[data-mode="after"] > div b::after {
  content: " → Swiss Soil";
  font-variation-settings: "wdth" 112;
}
/* Last row (The grower) in after mode gets special treatment */
.mandate-list[data-mode="after"] > div:last-child {
  opacity: .35;
}

.mandate-result {
  font-size: 14px;
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  color: var(--moss);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  letter-spacing: .01em;
}

/* Service price — clear tentative price */
.service-price {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.service-price > div .mono { color: var(--ash); }
.service-price > div h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 68;
  font-size: clamp(52px, 7.6vw, 112px);
  line-height: .88;
  letter-spacing: -.04em;
  color: var(--bone);
  margin: 16px 0 6px;
}
.service-price > div > span {
  font-size: 13px;
  color: var(--ash);
  font-variation-settings: "wdth" 100;
}
.service-price p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 44ch;
  padding-top: 20px;
}
.service-price .source-note {
  font-size: 12px;
  color: var(--ash);
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}

/* Delivery statements — three article columns */
.delivery-statements {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.delivery-statements article {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 2px solid var(--line);
}
.delivery-statements article span {
  font-size: 11px;
  font-weight: 500;
  font-variation-settings: "wdth" 112;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ash);
}
.delivery-statements article h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 76;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--bone);
}
.delivery-statements article p { font-size: 15px; line-height: 1.6; }

/* ─── ABOUT PAGE ────────────────────────────────────────────────── */

.team-register {
  padding: clamp(80px, 9vw, 128px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

/* Editorial roster: reading-line flow, not a card grid */
.team-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.team-member {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: baseline;
  gap: clamp(24px, 4vw, 64px);
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.team-member:hover {
  background: rgba(95,107,58,.025);
}
.team-member > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-member .mono {
  color: var(--moss);
  font-size: 11px;
}
.team-member h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 82;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--bone);
  margin: 0;
}
.team-member p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--bone-2);
  max-width: 52ch;
  grid-column: 2 / 4;
}

.partner-register {
  padding: clamp(60px, 7vw, 96px) var(--pad);
  max-width: var(--w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.partner-register .mono { color: var(--moss); }
.partner-register h2 {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(28px, 3.6vw, 54px);
  line-height: .92;
  letter-spacing: -.03em;
  margin: 16px 0 32px;
}

/* ─── CONTACT PAGE ──────────────────────────────────────────────── */

.contact-oversize {
  padding: clamp(96px, 12svh, 160px) var(--pad) clamp(64px, 8vw, 96px);
  max-width: var(--w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Oversized email — functional, huge, welcoming */
.contact-oversize .experience-link {
  font-weight: 300;
  font-variation-settings: "wdth" 72;
  font-size: clamp(28px, 4.8vw, 76px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--bone);
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: fit-content;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 6px;
  word-break: break-all;
  transition: color .2s, border-color .2s;
}
.contact-oversize .experience-link:hover {
  color: var(--moss);
  border-color: var(--moss);
}
.contact-oversize .experience-link span:last-child {
  font-size: .5em;
  opacity: .45;
  flex: none;
}
.contact-oversize a[href^="tel"] {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 300;
  font-variation-settings: "wdth" 86;
  color: var(--bone-2);
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--line);
  width: fit-content;
  padding-bottom: 4px;
}
.contact-oversize a[href^="tel"]:hover { color: var(--bone); }

.contact-land {
  border-top: 1px solid var(--line);
}
.contact-land img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
  filter: brightness(.9) saturate(.85);
}

/* ─── EXPERIENCE FOOTER ─────────────────────────────────────────── */

.experience-footer {
  padding: 44px var(--pad) 28px;
  border-top: 1px solid var(--line);
  overflow-x: hidden;
}
.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  flex-wrap: wrap;
}
.footer-main .wm {
  width: 180px;
  height: auto;
  color: var(--bone);
  opacity: .7;
}
/* Footer nav: wrap on small screens, never overflow */
.footer-main nav {
  display: flex;
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  flex-wrap: wrap;
  max-width: 100%;
}
.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 11px;
  color: var(--ash);
  flex-wrap: wrap;
}
.footer-base a:hover { color: var(--bone); text-decoration: underline; }

/* ─── EXPERIENCE LINK (shared) ──────────────────────────────────── */
/* Inline "read more" link used across multiple sections */

.experience-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  letter-spacing: .04em;
  color: var(--bone);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
  width: fit-content;
}
.experience-link span:last-child { opacity: .55; }
.experience-link:hover { color: var(--moss); border-color: var(--moss); }

/* ─── MOBILE RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 900px) {

  /* Living field — no giant sticky scroll on mobile; short fixed panel */
  .living-story {
    height: auto;  /* no scroll-driven progression on mobile */
  }
  .living-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 540px;
    /* Force single-column and clip at viewport */
    grid-template-columns: 100%;
    grid-template-areas:
      "top"
      "field"
      "copy"
      "tabs"
      "prog";
    width: 100%;
    min-width: 0;
  }

  /* All grid children must not expand beyond their track */
  .living-sticky > * { min-width: 0; width: 100%; max-width: 100%; }

  .field-visual {
    grid-area: field;
    height: 260px;
    min-height: 0;
    max-width: 100%;
  }

  .scene-copy {
    grid-area: copy;
    padding: 24px var(--pad);
    box-shadow: none;
    background: var(--peat);
    max-width: 100%;
    overflow: hidden;
  }
  .scene-copy h2 { font-size: clamp(36px, 8vw, 54px); }
  .scene-copy p { max-width: none; }

  /* Collapse three-column sections */
  .intelligence-atlas,
  .inference-editorial,
  .system-statement,
  .research-horizon,
  .instrument-scene,
  .lab-spread,
  .responsibility-scene,
  .service-price,
  .optics-study {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 48px);
  }

  /* Scene tabs wrap naturally */
  .scene-bottom {
    flex-wrap: wrap;
  }
  .scene-tabs button {
    min-height: 52px;
    font-size: 11px;
    padding: 0 8px;
  }

  /* Science signals collapse */
  .science-signals { grid-template-columns: 1fr; }

  /* Optics apparatus full width */
  .optics-apparatus { grid-column: auto; grid-row: auto; }
  .optics-study {
    grid-template-rows: auto;
  }
  .optics-head, .optics-caption { grid-column: auto; grid-row: auto; }

  /* Partner register */
  .partner-register h2 { font-size: clamp(24px, 6vw, 38px); }

  /* Team roster stacks */
  .team-member {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .team-member p { grid-column: auto; }

  /* Delivery statements 2 col */
  .delivery-statements { grid-template-columns: 1fr 1fr; }

  /* Horizon years inline */
  .horizon-years {
    flex-direction: row;
    grid-row: auto;
    grid-column: auto;
  }

  /* Chapter link */
  .chapter-link .experience-link { font-size: clamp(28px, 8vw, 46px); }
}

@media (max-width: 640px) {
  /* Gateway collapses */
  .platform-gateway,
  .mandate-controls {
    grid-template-columns: 1fr;
  }
  .mandate-controls { flex-direction: column; width: 100%; border-radius: 12px; }
  .mandate-controls button { width: 100%; }

  /* Delivery three → one column */
  .delivery-statements { grid-template-columns: 1fr; }

  /* Research horizon */
  .research-horizon { grid-template-columns: 1fr; }
  .horizon-years { grid-row: auto; grid-column: auto; }

  /* Contact email wraps */
  .contact-oversize .experience-link { font-size: clamp(22px, 6.5vw, 38px); }

  /* Footer stacks */
  .footer-base { flex-direction: column; gap: 8px; }
}

@media (max-width: 360px) {
  .experience-mast h1 { font-size: clamp(40px, 11vw, 54px); }
  .scene-tabs button { font-size: 10px; padding: 0 5px; letter-spacing: .03em; }
  .service-price > div h2 { font-size: clamp(40px, 11vw, 60px); }
  .team-member { gap: 6px; }
}

/* ─── REDUCED MOTION ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .scene-progress i { transition: none; }
  .atlas-layers summary i { transition: none; }
  .optic-reticle::before { transition: none; }
  .mandate-list,
  .mandate-list > div b,
  .mandate-list > div { transition: none; }
  #optic-description { transition: none; }
}

@media(max-width:900px){.atlas-heading{position:static!important}}