/* =====================================================================
   Berolink — Chapter 2 · The Approach
   Reuses warm tokens + atoms from berolink-home.css.
   Signature: the climb spine threading the reading rungs —
   one ladder, climbed in the animals we love for the first time.
   ===================================================================== */

/* ---- scroll reveal (no-JS shows everything) ---- */
html.js .reveal{ opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
html.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ html.js .reveal{ opacity:1; transform:none; transition:none; } }

/* ---- section scaffolding ---- */
.ap-section{ padding:clamp(4.5rem,10vh,8rem) var(--pad); }
.ap-inner{ max-width:var(--maxw); margin:0 auto; }
.ap-section .eyebrow{ color:var(--ink-faint); }
.ap-h{ font-family:var(--title); font-weight:400; letter-spacing:-0.014em;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.12; margin:clamp(16px,2.6vh,24px) 0 0;
  color:var(--umber); max-width:20ch; }
.ap-h .em{ font-style:normal; color:var(--peri-deep); }
.ap-lead{ font-family:var(--body); color:var(--taupe); font-size:clamp(1rem,1.5vw,1.14rem);
  line-height:1.64; max-width:50ch; margin:clamp(18px,3vh,26px) 0 0; }
.ap-lead .em{ color:var(--umber); font-weight:600; font-style:normal; }

/* ---- module list (subhead — body units) ---- */
.ap-mods{ margin:clamp(26px,4.2vh,42px) 0 0; }
.ap-mod{ display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.6fr);
  gap:clamp(0.8rem,3vw,2.6rem); padding:clamp(18px,2.8vh,26px) 0;
  border-top:1px solid var(--line); align-items:baseline; }
.ap-mh{ font-family:var(--title); font-weight:500; font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.2; letter-spacing:-0.01em; color:var(--umber); margin:0; }
.ap-mb{ font-family:var(--body); font-weight:400; font-size:clamp(0.95rem,1.35vw,1.05rem);
  line-height:1.62; color:var(--taupe); margin:0; }
.ap-mb .em{ color:var(--umber); font-weight:600; font-style:normal; }
.ap-mb .ref{ font-family:var(--mono); font-size:0.82em; letter-spacing:0.02em; color:var(--ink-faint); }

/* ---- close line + source caption ---- */
.ap-closeline{ display:flex; align-items:flex-start; gap:0.9em; margin:clamp(26px,4vh,40px) 0 0; }
.ap-closeline .keyline{ flex:none; margin-top:0.66em; }
.ap-closeline p{ font-family:var(--title); font-weight:430; font-size:clamp(1.14rem,1.9vw,1.45rem);
  line-height:1.3; letter-spacing:-0.012em; color:var(--umber); margin:0; max-width:30ch; }
.ap-closeline p .em{ font-style:normal; color:var(--peri-deep); }
.ap-src{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; line-height:1.55;
  color:var(--ink-faint); margin:clamp(20px,3vh,28px) 0 0; max-width:66ch; }

/* ============================ INTRO (gardenia) ============================ */
.ap-intro{ padding-top:clamp(3rem,6vh,5rem); }
.ap-intro-grid{ display:grid; grid-template-columns:1.06fr 0.94fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.ap-intro .ap-h{ font-size:clamp(2rem,4.2vw,3rem); line-height:1.08; max-width:16ch; margin-top:clamp(14px,2.2vh,20px); }
.ap-intro-photo{ position:relative; border-radius:4px; overflow:hidden; background:var(--umber); aspect-ratio:4/5; }
.ap-intro-photo img{ width:100%; height:100%; object-fit:cover; object-position:48% 46%; display:block;
  filter:saturate(0.96) contrast(1.05); }
.ap-honest{ margin:clamp(2.4rem,5vh,3.8rem) 0 0; padding:clamp(20px,2.8vh,26px) 0 0; border-top:1px solid var(--line); }
.ap-honest p{ font-family:var(--title); font-weight:430; font-size:clamp(1.18rem,2.1vw,1.62rem);
  line-height:1.3; letter-spacing:-0.012em; color:var(--umber); margin:0; max-width:38ch; }
.ap-honest p .em{ font-style:normal; color:var(--peri-deep); }

/* ============================ THE LIMIT OF THE OUTSIDE (cream-hi) ====== */
.ap-limit{ background:var(--cream-hi); }

/* ============================ THE CLIMB (gardenia · spine signature) ===== */
.ap-climb{ --rail:clamp(7px,2vw,36px); --rail-gap:clamp(34px,7vw,90px); --rung-top:clamp(3.2rem,6.5vh,5.5rem); }
.ap-rungs{ position:relative; }
.ap-rungs::before{ content:""; position:absolute; left:var(--rail); top:0.4rem; bottom:0.4rem; width:1px;
  background:linear-gradient(var(--line) 0%, rgba(78,95,162,0.30) 6%, rgba(78,95,162,0.30) 94%, var(--line) 100%); }
.ap-rung{ position:relative; padding:var(--rung-top) 0 0 var(--rail-gap); }
.ap-rung:first-child{ padding-top:clamp(0.4rem,1.2vh,1.2rem); }
.ap-rung::before{ content:""; position:absolute; left:var(--rail);
  top:calc(var(--rung-top) + 0.42rem); width:12px; height:1px; background:var(--line);
  transition:background .45s ease, width .45s ease, height .45s ease; }
.ap-rung:first-child::before{ top:calc(clamp(0.4rem,1.2vh,1.2rem) + 0.42rem); }
.ap-rung .ap-h{ max-width:22ch; }

/* --- the read-head: scroll progress fills the spine, the active rung emphasises ---
   transform-based (GPU-composited) + no transition on scroll-linked props = smooth.
   single read-line coordinate space = fill, head and node lighting stay aligned. */
.ap-fill{ position:absolute; left:var(--rail); top:0.4rem; width:1px; height:calc(100% - 0.8rem);
  background:var(--peri-deep); transform:scaleY(0); transform-origin:top center;
  will-change:transform; pointer-events:none; }
.ap-readhead{ position:absolute; left:var(--rail); top:calc(0.4rem - 0.75px);
  width:14px; height:1.5px; background:var(--peri-deep);
  will-change:transform; pointer-events:none; opacity:0; transition:opacity .3s ease; }

.ap-rung.is-read::before{ background:var(--peri-deep); }
.ap-rung.is-active::before{ background:var(--peri-deep); width:20px; height:1.5px; }

.ap-rung .eyebrow{ transition:color .4s ease; }
.ap-rung .ap-h{ transition:color .45s ease, font-weight .25s linear; }
.ap-rung.is-active .eyebrow{ color:var(--peri-deep); }
.ap-rung.is-active .ap-h{ font-weight:600; }

@media (prefers-reduced-motion:reduce){ .ap-fill, .ap-readhead{ display:none; } }

/* ============================ THE SUMMIT (umber · answering) ============= */
.ap-summit{ background:var(--umber); color:var(--gardenia); }
.ap-summit .eyebrow{ color:var(--peri); }
.ap-summit .ap-h{ color:#F4ECE3; max-width:20ch; }
.ap-summit .ap-h .em{ color:var(--peri); }
.ap-summit .ap-lead{ color:rgba(244,236,227,0.82); }
.ap-summit .ap-lead .em{ color:#F4ECE3; }
.ap-summit .ap-mod{ border-top-color:var(--line-um); }
.ap-summit .ap-mh{ color:#F4ECE3; }
.ap-summit .ap-mb{ color:rgba(244,236,227,0.74); }
.ap-summit .ap-mb .em{ color:var(--peri); }

/* ============================ THE INTERFACE (gardenia · photo) ========== */
.ap-interface .ap-inner{ display:grid; grid-template-columns:0.86fr 1.14fr;
  gap:clamp(2rem,5vw,4.6rem); align-items:start; }
.ap-interface-photo{ position:relative; border-radius:4px; overflow:hidden; background:var(--umber);
  aspect-ratio:4/5; position:sticky; top:calc(var(--nav-h) + clamp(1rem,3vh,2.4rem)); }
.ap-interface-photo img{ width:100%; height:100%; object-fit:cover; object-position:46% 30%; display:block; }
.ap-interface-copy .ap-h{ margin-top:0; }

/* ============================ INTERFACE LADDER (cream-hi · 3-step) ===== */
.ap-ladder{ background:var(--cream-hi); }
.ap-ladder .ap-h{ font-size:clamp(1.4rem,2.6vw,1.9rem); max-width:24ch; }
.ap-track{ position:relative; height:14px; margin:clamp(34px,5vh,52px) 0 20px; }
.ap-track::before{ content:""; position:absolute; left:16.66%; right:16.66%; top:50%; height:1px;
  background:var(--line); transform:translateY(-50%); }
.ap-track::after{ content:""; position:absolute; top:50%; width:60px; height:2px; border-radius:2px;
  transform:translateY(-50%); pointer-events:none;
  background:linear-gradient(90deg, rgba(78,95,162,0) 0%, var(--peri-deep) 55%, rgba(78,95,162,0) 100%);
  animation:ap-track-run 3.4s linear infinite; }
@keyframes ap-track-run{ 0%{ left:12%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:84%; opacity:0; } }
.ap-track .dot{ position:absolute; top:50%; z-index:1; transform:translate(-50%,-50%); width:13px; height:13px;
  border-radius:50%; background:var(--cream-hi); border:1.6px solid var(--cobble); }
.ap-track .dot:nth-child(1){ left:16.66%; }
.ap-track .dot:nth-child(2){ left:50%; }
.ap-track .dot:nth-child(3){ left:83.33%; }
.ap-track .dot.now{ border-color:var(--peri-deep); background:var(--peri-deep); }
.ap-track .dot.now::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--peri-deep); animation:ap-ping 2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ap-ping{ 0%{ transform:scale(1); opacity:0.5; } 80%,100%{ transform:scale(3); opacity:0; } }

.ap-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.6vw,2.2rem); }
.ap-step{ display:flex; flex-direction:column; gap:0.62em; }
.ap-step .stg{ font-family:var(--mono); font-size:0.64rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--ink-faint); }
.ap-step h3{ font-family:var(--title); font-weight:500; font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.18; letter-spacing:-0.01em; color:var(--umber); margin:0; }
.ap-step .desc{ font-family:var(--body); font-size:0.92rem; line-height:1.55; color:var(--taupe); margin:0; }
.ap-cap{ font-family:var(--mono); font-size:0.64rem; letter-spacing:0.04em; color:var(--taupe);
  display:inline-flex; align-items:baseline; gap:0.6em; margin-top:0.3em; }
.ap-cap .k{ font-size:0.92em; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint); }
.ap-step.future{ opacity:0.46; }
.ap-step.now .ap-cap{ color:var(--peri-deep); }

@media (prefers-reduced-motion:reduce){
  .ap-track::after{ display:none; }
  .ap-track .dot.now::after{ display:none; }
}
.ap-note{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.06em; line-height:1.6;
  color:var(--ink-faint); margin:clamp(28px,4vh,40px) 0 0; max-width:60ch; }

/* ============================ CLOSE (gardenia · the recap) ============== */
.ap-close{ padding-bottom:clamp(5rem,11vh,8.5rem); }
.ap-close .recap{ font-family:var(--title); font-weight:400; letter-spacing:-0.014em;
  font-size:clamp(1.6rem,3.2vw,2.45rem); line-height:1.18; color:var(--umber); margin:0; max-width:24ch; }
.ap-close .tail{ font-family:var(--body); font-size:clamp(1rem,1.5vw,1.14rem); line-height:1.6;
  color:var(--taupe); margin:clamp(20px,3vh,28px) 0 0; max-width:46ch; }
.ap-close .tail .em{ font-style:normal; color:var(--peri-deep); font-weight:600; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:860px){
  .ap-intro-grid{ grid-template-columns:1fr; gap:clamp(1.8rem,5vw,2.6rem); }
  .ap-intro-photo{ aspect-ratio:16/10; order:-1; }
  .ap-intro-photo img{ object-position:48% 45%; }
  .ap-interface .ap-inner{ grid-template-columns:1fr; gap:clamp(1.6rem,5vw,2.4rem); }
  .ap-interface-photo{ position:relative; top:auto; aspect-ratio:16/10; }
  .ap-interface-photo img{ object-position:46% 28%; }
}
@media (max-width:680px){
  .ap-mod{ grid-template-columns:1fr; gap:0.5rem; padding:clamp(16px,2.6vh,22px) 0; }
  .ap-mh{ font-size:1.06rem; }
  .ap-track{ display:none; }
  .ap-steps{ grid-template-columns:1fr; gap:0; }
  .ap-step{ padding:clamp(16px,2.4vh,20px) 0 clamp(16px,2.4vh,20px) clamp(16px,4vw,22px);
    border-left:2px solid var(--line); }
  .ap-step:first-child{ border-top:1px solid var(--line); }
  .ap-step.now{ border-left-color:var(--peri-deep); opacity:1; }
  .ap-step.future{ opacity:0.6; }
}