/* ============================================================
   Perspective article — self-contained page styles.
   Design tokens + fonts come from ../colors_and_type.css.
   Nav + buttons are defined HERE (not site.css) to avoid class
   collisions — site.css's .exhibit is a 3-col grid that would
   break the article figures.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--fw-semibold) 15px/1 var(--font-sans);
  padding: 15px 24px; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn-primary { background: var(--green-700); color: #fff; }
.btn-primary:hover { background: var(--green-800); }
.btn-text { display: inline-flex; align-items: center; gap: 8px; font: var(--fw-semibold) 15px/1 var(--font-sans); text-decoration: none; color: var(--green-deep); }
.btn-text .arr { transition: transform .15s; }
.btn-text:hover .arr { transform: translateX(4px); }

/* ---------- nav ---------- */
.siteNav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(28px, 5vw, 56px);
  background: rgba(244,238,226,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stone-soft);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 32px; height: 32px; display: block; }
.brand .wm { font: var(--fw-light) 21px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.brand .wm b { font-weight: var(--fw-bold); }
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font: var(--fw-medium) 14px/1 var(--font-sans); text-decoration: none; color: var(--ink); opacity: 0.8; transition: opacity .15s; white-space: nowrap; }
.nav-links a:hover { opacity: 1; }
.nav-cta { font: var(--fw-semibold) 14px/1 var(--font-sans); padding: 11px 18px; }

/* language toggle (self-contained; mirrors site.css) */
.seg { display: inline-flex; align-items: center; border: 1px solid var(--stone); border-radius: var(--radius-pill); padding: 3px; gap: 2px; color: var(--ink); }
.seg button { font: var(--fw-semibold) 12px/1 var(--font-sans); letter-spacing: .04em; border: 0; background: transparent; cursor: pointer; padding: 6px 11px; border-radius: var(--radius-pill); color: inherit; opacity: .55; transition: all .15s; }
.seg button.on { opacity: 1; background: rgba(0,83,58,0.10); }

.page { max-width: 1020px; margin: 0 auto; padding: 76px 40px 120px; }
.measure { max-width: 700px; margin-left: auto; margin-right: auto; }

svg.ico { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- title block ---- */
.art-head { max-width: 700px; margin-left: auto; margin-right: auto; }
.eyebrow { font: 700 13px var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--green-deep); margin: 0; }
h1.title { font: 500 62px/1.02 var(--font-serif); letter-spacing: -.02em; color: var(--ink); margin: 18px 0 0; }
.subtitle { font: 400 23px/1.4 var(--font-serif); font-style: italic; color: var(--ink-soft); margin: 18px 0 0; }
.byline { font: 500 14px/1.5 var(--font-sans); color: var(--ink-mute); margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--stone); }

/* ---- section + body ---- */
section.art { margin-top: 76px; }
section.art:first-of-type { margin-top: 60px; }
section.art.fresh-page { margin-top: 110px; }
.sec-head { margin-bottom: 26px; }
.sec-eyebrow { display: flex; align-items: center; gap: 9px; font: 700 12px var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 13px; }
.sec-eyebrow .ico { width: 17px; height: 17px; color: var(--green-600); flex: none; }
h2.sec { font: 500 38px/1.08 var(--font-serif); letter-spacing: -.015em; color: var(--ink); margin: 0; }
.sec-head .rule { height: 3px; width: 54px; background: var(--green-600); border-radius: 3px; margin-top: 18px; }
.sec-dek { font: 400 20px/1.42 var(--font-serif); font-style: italic; color: var(--ink-soft); margin: 13px 0 0; }

/* ---- in-brief abstract ---- */
.in-brief { max-width: 700px; margin: 54px auto 0; background: var(--paper-card); border: 1px solid var(--stone); border-top: 3px solid var(--green-600); border-radius: 3px 3px 8px 8px; padding: 30px 34px 32px; }
.in-brief .lbl { display: flex; align-items: center; gap: 9px; font: 700 12px var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 14px; }
.in-brief .lbl .ico { width: 16px; height: 16px; color: var(--green-600); flex: none; }
.in-brief p { font: 400 17.5px/1.62 var(--font-sans); color: var(--ink); margin: 0; text-wrap: pretty; }
.in-brief p b { font-weight: 700; }

/* ---- definition accent ---- */
.define { margin: 28px 0; background: var(--paper-card); border: 1px solid var(--stone); border-top: 3px solid var(--green-600); border-radius: 3px 3px 8px 8px; padding: 20px 24px; }
.define .lbl { display: flex; align-items: center; gap: 8px; font: 700 11.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 10px; }
.define .lbl .ico { width: 16px; height: 16px; color: var(--green-600); flex: none; }
.define p { font: 400 16px/1.55 var(--font-sans); color: var(--ink); margin: 0; text-wrap: pretty; }
.define p b { font-weight: 700; }

/* ---- citations ---- */
sup.ref { font: 700 11px var(--font-sans); color: var(--green-deep); line-height: 0; }
sup.ref a { color: inherit; text-decoration: none; }
.endmark { max-width: 700px; margin: 90px auto 0; display: flex; align-items: center; gap: 20px; }
.endmark .line { flex: 1; height: 1px; background: var(--stone); }
.endmark img { height: 28px; }
section.notes { margin-top: 96px; }
.notes .lbl { font: 700 12px var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 20px; }
ol.notes-list { margin: 0; padding: 0; list-style: none; counter-reset: note; }
ol.notes-list li { display: flex; gap: 13px; font: 400 13.5px/1.5 var(--font-sans); color: var(--ink-soft); padding: 12px 0; border-top: 1px solid var(--stone-soft); }
ol.notes-list li:last-child { border-bottom: 1px solid var(--stone-soft); }
ol.notes-list li::before { counter-increment: note; content: counter(note); font: 700 12px var(--font-sans); color: var(--green-deep); flex: none; width: 16px; padding-top: 1px; }
ol.notes-list b { color: var(--ink); font-weight: 700; }
ol.notes-list em { font-style: italic; }
ol.notes-list a { color: var(--green-deep); text-decoration: none; border-bottom: 1px solid var(--stone); }

p.body { font: 400 18px/1.62 var(--font-sans); color: var(--ink); margin: 0 0 20px; text-wrap: pretty; }
p.lead { font: 400 21px/1.55 var(--font-sans); color: var(--ink-soft); margin: 0 0 24px; }
p.body b, p.lead b { font-weight: 700; }
p.body em { font-style: italic; }
.green { color: var(--green-deep); }

/* idea list (icon bullets) */
ul.ideas { list-style: none; margin: 16px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
ul.ideas li { display: flex; gap: 16px; align-items: flex-start; }
ul.ideas .tile { flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--green-50); border: 1px solid var(--green-100); display: grid; place-items: center; color: var(--green-deep); }
ul.ideas .tile svg { width: 21px; height: 21px; }
ul.ideas .tx { font: 400 17.5px/1.5 var(--font-sans); color: var(--ink); padding-top: 2px; }
ul.ideas .tx b { font-weight: 700; }

/* stage portraits */
ul.stages { list-style: none; margin: 8px 0 0; padding: 0; }
ul.stages li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--stone-soft); }
ul.stages li:last-child { border-bottom: 1px solid var(--stone-soft); }
ul.stages .n { flex-shrink: 0; font: 300 30px/1 var(--font-sans); color: var(--green-deep); width: 52px; }
ul.stages .tile { flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--green-50); border: 1px solid var(--green-100); display: grid; place-items: center; color: var(--green-deep); margin: 2px 0 0; }
ul.stages .tile svg { width: 21px; height: 21px; }
ul.stages li.horizon .tile { background: var(--paper-card); border-color: var(--stone); color: var(--ink-mute); }
ul.stages .nm { font: 700 18px var(--font-sans); color: var(--ink); }
ul.stages .tx { font: 400 16.5px/1.55 var(--font-sans); color: var(--ink-soft); margin-top: 4px; }
ul.stages li.horizon .n, ul.stages li.horizon .nm { color: var(--ink-mute); }
ul.stages li.horizon .n { font: 700 11.5px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding-top: 9px; }

/* climb steps */
ul.climb { list-style: none; margin: 10px 0; padding: 0; }
ul.climb li { display: flex; gap: 22px; padding: 20px 0; border-top: 1px solid var(--stone-soft); }
ul.climb li:last-child { border-bottom: 1px solid var(--stone-soft); }
ul.climb .move { flex: none; width: 168px; }
ul.climb .move .arr { display: flex; align-items: center; gap: 7px; color: var(--green-deep); }
ul.climb .move .arr svg { width: 15px; height: 15px; }
ul.climb .move .a { font: 700 14.5px var(--font-sans); color: var(--ink); }
ul.climb .move .b { font: 700 14.5px var(--font-sans); color: var(--green-deep); }
ul.climb .tx { flex: 1; display: flex; flex-direction: column; gap: 13px; }
ul.climb .half { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: baseline; }
ul.climb .half .k { font: 700 11px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
ul.climb .half.pay .k { color: var(--green-deep); }
ul.climb .half p { margin: 0; font: 400 16px/1.55 var(--font-sans); color: var(--ink-soft); }
ul.climb .half p b { color: var(--ink); font-weight: 700; }

/* pull quote */
blockquote.pull { margin: 36px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--green-600); }
blockquote.pull p { font: 500 25px/1.42 var(--font-serif); font-style: italic; color: var(--ink); margin: 0 0 14px; }
blockquote.pull p:last-child { margin-bottom: 0; }
blockquote.pull footer { font: 700 12px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }

/* ---- exhibits (embedded, native, no slide chrome) ---- */
figure.exhibit { margin: 60px 0; }
figure.exhibit .ex-head { border-top: 2px solid var(--ink); padding-top: 13px; margin-bottom: 24px; }
figure.exhibit .ex-kicker { font: 700 12px var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 7px; }
figure.exhibit .ex-title { font: 700 23px/1.28 var(--font-sans); letter-spacing: -.01em; color: var(--ink); margin: 0; max-width: 760px; }
figure.exhibit figcaption { font: 500 12.5px/1.5 var(--font-sans); color: var(--ink-mute); margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--stone-soft); }
figure.exhibit figcaption b { color: var(--ink-soft); font-weight: 700; }

/* ---- exhibit horizontal-scroll frame (phone) ----
   Wide figures (matrix, wider map, diptych, foundation) keep their
   natural width and scroll sideways inside the article column instead
   of overflowing the page. The hint only shows when actually scrollable. */
figure.exhibit .ex-viz { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--stone) transparent; }
/* Pin each figure to its design width so it scrolls to the right size on
   narrow screens (not its unwrapped max-content). Stat has no min — it reflows. */
figure.exhibit .ex-viz[data-fig="matrix"] > * { min-width: 844px; }
figure.exhibit .ex-viz[data-fig="wider"] > * { min-width: 868px; }
figure.exhibit .ex-viz[data-fig="diptych"] > * { min-width: 552px; }
figure.exhibit .ex-viz[data-fig="foundation"] > * { min-width: 466px; }
figure.exhibit .ex-viz::-webkit-scrollbar { height: 7px; }
figure.exhibit .ex-viz::-webkit-scrollbar-thumb { background: var(--stone); border-radius: 999px; }
figure.exhibit .ex-viz::-webkit-scrollbar-track { background: transparent; }
.ex-scrollnote { display: none; align-items: center; gap: 7px; font: 700 11px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); margin-top: 12px; }
.ex-scrollnote .sw { animation: exNudge 1.6s ease-in-out infinite; }
figure.exhibit.has-scroll .ex-scrollnote { display: inline-flex; }
@keyframes exNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .ex-scrollnote .sw { animation: none; } }


footer.colophon { margin-top: 96px; padding-top: 28px; border-top: 1px solid var(--stone); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
footer.colophon .l { font: 400 13px/1.5 var(--font-sans); color: var(--ink-mute); max-width: 520px; }
footer.colophon .b { display: flex; align-items: center; gap: 8px; flex: none; }
footer.colophon .b img { height: 20px; }
footer.colophon .b span { font: 300 15px var(--font-sans); color: var(--ink); }
footer.colophon .b b { font-weight: 700; }

/* ---- back-to-perspective nav affordance ---- */
.nav-back { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-medium) 14px/1 var(--font-sans); text-decoration: none; color: var(--ink); opacity: .8; transition: opacity .15s; }
.nav-back:hover { opacity: 1; }
.nav-back .ar { transition: transform .15s; }
.nav-back:hover .ar { transform: translateX(-3px); }

@media (max-width: 1080px) {
  .nav-links { display: none; }
}
@media (max-width: 760px) {
  .page { padding: 56px 22px 90px; }
  h1.title { font-size: 44px; }
  ul.climb li { flex-direction: column; gap: 14px; }
  ul.climb .move { width: auto; }
  .nav-links { display: none; }
}
@media (max-width: 540px) {
  .nav-cta { display: none; }
}

@media print {
  @page { size: A4; margin: 16mm; }
  body { background: #fff; }
  .siteNav { display: none; }
  .page { padding: 0; max-width: none; }
  figure.exhibit, ul.stages li, ul.climb li, blockquote.pull { break-inside: avoid; }
  .in-brief, ol.notes-list li, .define { break-inside: avoid; }
  section.notes { break-before: page; margin-top: 0; }
  figure.exhibit .ex-head { break-after: avoid; }
  h2.sec, .sec-head { break-after: avoid; }
  section.art.fresh-page { break-before: page; margin-top: 0; }
}