/* TRIBEAWAKEN HOME v2 — 2026-11-06
   Built on the Ancestral Peaks engine (engine/site.css + site.js, GSAP, ScrollTrigger, Lenis), re-skinned for
   TribeAwaken: daylight grounds, the mountain green, the runner's blue, the sun. Fraunces + Hanken Grotesk.
   Every band carries moving media: film loops, drifting mist, sun, rain, a living mosaic, his masked voice. */

:root{
  --stone:#F7FAF4;           /* pale leaf-white, the page ground */
  --stone-2:#EFF5EC;
  --paper:#F4F6F1;           /* the magazine's cool paper */
  --ink:#1E2419;             /* deep forest ink */
  --ink-2:#49523F;           /* moss */
  --creek:#2E8540;           /* the mountain green */
  --green-2:#1E6E34;
  --green-deep:#16522A;
  --blue:#1C5BA8;            /* the runner's blue: actions */
  --blue-deep:#124279;       /* headline blue */
  --earth:#1C5BA8;
  --sky:#1C5BA8;
  --sun:#E0A400;
  --sun-2:#FFD75E;
  --gold:#E0A400;
  --gold-deep:#8A5F00;       /* the sun at reading size, AA on leaf-white */
  --amber:#E0A400;
  --crimson:#B10324;         /* the horse's red, the magazine only */
  --night:#0F1A12;           /* the one dark ground: the footer */
  --line:rgba(30,36,25,.14);
  --glass:rgba(247,250,244,.82);
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --text:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(18px,4.5vw,76px);
}
html{background:var(--stone)}
body{background:var(--stone);color:var(--ink);font-weight:400;font-size:clamp(1.02rem,.98rem + .25vw,1.14rem);line-height:1.58}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.02;font-optical-sizing:auto;font-variation-settings:"SOFT" 40;color:var(--blue-deep)}
h1 b,h2 b{font-weight:900}
.label{font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.num{font-family:var(--display);font-weight:300;letter-spacing:-.04em;line-height:.8;color:var(--creek)}
.masked{color:var(--ink-2)}
.masked::before{background:var(--sun);box-shadow:0 0 0 3px rgba(224,164,0,.22)}
:focus-visible{outline-color:var(--blue)}
.btn{background:var(--blue);color:#fff;font-weight:700;padding:.95em 1.5em;box-shadow:0 10px 30px -14px rgba(28,91,168,.6)}
.btn:hover{background:var(--blue-deep)}
.btn.green{background:var(--creek)}.btn.green:hover{background:var(--green-2)}
.btn.light{background:#fff;color:var(--blue-deep)}.btn.light:hover{background:var(--stone-2)}
.btn.ghost.dark{color:var(--blue-deep);border-color:rgba(18,66,121,.45);box-shadow:none}
.btn.ghost.dark:hover{background:rgba(28,91,168,.08)}
.btn.ghost{box-shadow:none}
p.lede{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);line-height:1.5}
a.more{color:var(--blue);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(28,91,168,.35)}
a.more:hover{border-color:var(--blue)}
.fine{font-size:.86rem;color:var(--ink-2)}
img{color:transparent}

/* ---------- the bar ---------- */
.ta-bar{color:var(--ink);background:linear-gradient(180deg,rgba(247,250,244,.9),rgba(247,250,244,.55));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ta-bar.solid{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(30,36,25,.08)}
.ta-bar .ap-mark{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--blue-deep);letter-spacing:-.01em}
.ta-bar .ap-mark img{width:34px;height:32px;object-fit:contain;mix-blend-mode:multiply}
.ta-bar .ap-mark span{color:var(--creek)}
.ta-bar .ap-nav{font-weight:600;font-size:.92rem}
.ta-bar .ap-sound{border-color:rgba(30,36,25,.3)}
.ta-bar .btn{padding:.65em 1.15em;font-size:.92rem}
.ta-menu{background:var(--night);color:#fff}
.ta-menu .foot a{color:#fff;text-decoration:none;margin-right:1rem;font-weight:600}
@media (max-width:1180px){.ta-bar .ap-nav{gap:.9rem;font-size:.86rem}}
@media (max-width:1040px){.ta-bar .ap-nav{display:none}.ap-burger{display:block}}

/* ---------- ARRIVAL: his garden at first light in a portrait frame, its own light spread across the screen, dew and sunbeams ---------- */
.arrive{--pw:min(36vw,470px,calc((100svh - var(--bar-h) - 120px) * .5625));position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:#E9EFE4;color:var(--ink)}
.arrive .cutwrap{position:absolute;inset:0;z-index:0;will-change:transform}
.arrive .glow{position:absolute;inset:0;overflow:hidden;background:#E9EFE4}
.arrive .glow img{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;object-position:50% 40%;filter:blur(38px) saturate(1.25) brightness(1.1);transform:scale(1.06);transition:opacity 2.6s ease}
.arrive .glow img.b{opacity:0}
.arrive .glow.two img.a{opacity:0}.arrive .glow.two img.b{opacity:1}
.arrive .glow::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,250,244,.5),rgba(247,250,244,.12) 45%,rgba(247,250,244,.06) 75%,rgba(247,250,244,.3)),linear-gradient(180deg,rgba(247,250,244,.25),rgba(247,250,244,0) 30%,rgba(247,250,244,0) 70%,rgba(247,250,244,.45))}
.arrive .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arrive .mist{z-index:1;mix-blend-mode:screen;opacity:.9}
.arrive .dew{z-index:3;mix-blend-mode:screen;opacity:.9}
.arrive .rays{position:absolute;z-index:2;right:-18vw;top:-52vh;width:120vw;height:120vw;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:conic-gradient(from 196deg at 50% 50%,rgba(255,236,170,0) 0deg,rgba(255,240,190,.6) 5deg,rgba(255,236,170,0) 11deg,rgba(255,236,170,0) 22deg,rgba(255,244,200,.5) 27deg,rgba(255,236,170,0) 34deg,rgba(255,236,170,0) 50deg,rgba(255,240,190,.55) 56deg,rgba(255,236,170,0) 64deg,rgba(255,236,170,0) 82deg,rgba(255,244,200,.45) 88deg,rgba(255,236,170,0) 96deg,rgba(255,236,170,0) 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.6) 26%,transparent 58%);mask-image:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.6) 26%,transparent 58%);
  animation:rays 110s linear infinite;transform-origin:50% 50%}
@keyframes rays{to{transform:rotate(360deg)}}
.arrive .sun{position:absolute;z-index:1;right:10vw;top:2vh;width:min(40vw,520px);aspect-ratio:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,248,222,1) 0,rgba(255,234,165,.6) 16%,rgba(255,220,130,.2) 40%,rgba(255,220,130,0) 70%);animation:sunbreathe 12s ease-in-out infinite}
@keyframes sunbreathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
.arrive-grid{position:relative;z-index:4;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) var(--pw);gap:clamp(20px,3.5vw,64px);align-items:center;padding:calc(var(--bar-h) + 18px) var(--gutter) clamp(24px,3vh,40px)}
.panel{background:rgba(247,250,244,.9);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:clamp(20px,2.4vw,34px);box-shadow:0 40px 90px -40px rgba(18,40,30,.45)}
.arrive .copy{max-width:44rem}
.arrive h1{font-size:clamp(1.85rem,1.1rem + 2.05vw,3.1rem);line-height:1.05;max-width:24ch;margin-top:.5rem}
.arrive .lede{margin-top:.9rem;max-width:40rem;color:var(--ink);font-size:clamp(1.02rem,.96rem + .35vw,1.18rem)}
.byline{display:flex;align-items:center;gap:.9rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.byline img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.byline b{display:block;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--blue-deep)}
.byline span{display:block;font-size:.86rem;line-height:1.4;color:var(--ink-2)}
.byline span i,.byline span em{font-style:normal}.byline span i{color:var(--ink-2);padding:0 .35em}
.pend,.byline span .pend{display:inline-block;margin-bottom:.15rem;font-family:var(--text);font-size:.64rem;letter-spacing:.12em;font-weight:800;color:#7A5516;background:#FFF1C2;border:1px solid #F1D98A;border-radius:4px;padding:.12em .45em;margin-right:.5em;vertical-align:middle;text-transform:uppercase}
.arrive .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem;align-items:center}
.arrive .say{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.arrive .say .ap-say{max-width:34rem}
.arrive .say .ap-say .txt{font-size:.98rem}
.soundbtn{display:inline-flex;align-items:center;gap:.5em;border:1.5px solid rgba(18,66,121,.4);background:transparent;color:var(--blue-deep);border-radius:999px;padding:.65em 1.05em;font-weight:700;font-size:.9rem}
.soundbtn i{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.soundbtn i b{display:block;width:2.5px;height:4px;background:currentColor;border-radius:1px;transform-origin:bottom}
.soundbtn[aria-pressed="true"] i b{animation:apbars 1.1s ease-in-out infinite}
.soundbtn[aria-pressed="true"] i b:nth-child(2){animation-delay:.18s;animation-duration:.9s}
.soundbtn[aria-pressed="true"] i b:nth-child(3){animation-delay:.36s;animation-duration:1.3s}
/* the portrait frame: his vertical footage at full height, lit from behind by its own blurred light */
.framecol{margin:0;position:relative;justify-self:end;width:var(--pw);display:block}
.portrait{position:relative;width:100%;aspect-ratio:9/16;height:auto;border-radius:24px;overflow:hidden;background:#C9D6C4;box-shadow:0 60px 120px -40px rgba(18,40,30,.6),0 0 0 1px rgba(255,255,255,.65),0 0 80px 10px rgba(255,236,170,.35);isolation:isolate}
.portrait .ap-cut{position:absolute;inset:0;background:#C9D6C4}
.portrait .ap-cut .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,246,214,.18),rgba(255,246,214,0) 30%,rgba(247,250,244,0) 70%,rgba(247,250,244,.25))}
.portrait .dew2,.portrait .mist3{position:absolute;inset:0;width:100%;height:100%;z-index:3;mix-blend-mode:screen;pointer-events:none}
.portrait .mist3{z-index:2;opacity:.8}
.framecol figcaption{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;font-family:var(--display);font-size:.98rem;line-height:1.25;color:var(--blue-deep);background:rgba(247,250,244,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:.6rem .85rem;display:flex;flex-direction:column;gap:.25rem}
.framecol figcaption span{font-family:var(--text);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
@media (max-width:980px){
  .arrive-grid{grid-template-columns:1fr;align-items:start;padding-top:var(--bar-h);gap:14px;padding-bottom:28px;padding-inline:0}
  .arrive .copy{margin-inline:var(--gutter)}
  .framecol{justify-self:stretch;width:100%;order:-1}
  .portrait{height:66svh;aspect-ratio:auto;width:100%;border-radius:0 0 26px 26px;box-shadow:0 30px 60px -30px rgba(18,40,30,.5)}
  .framecol figcaption{left:var(--gutter);right:var(--gutter);bottom:16px;font-size:.95rem}
  .arrive h1{font-size:clamp(1.75rem,6.4vw,2.6rem);max-width:none}
  .panel{padding:20px;border-radius:20px}
  .arrive .sun{right:-10vw;top:-4vh;width:70vw}
  .arrive .rays{right:-60vw;top:-30vh;width:200vw;height:200vw}
}
@media (max-width:480px){.byline span i{display:none}.byline span em{display:block}}

/* ---------- BY LAMPLIGHT: Masan bleeding off the left, the guide's story ---------- */
.lamplight{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--stone);overflow:clip}
.lamplight .photo{position:relative;min-height:min(92vh,900px);overflow:hidden}
.lamplight .photo img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:60% 50%}
.lamplight .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,250,244,0) 70%,var(--stone) 100%)}
.lamplight .glow{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(0deg,rgba(255,215,94,.28),rgba(255,215,94,0));mix-blend-mode:multiply;pointer-events:none}
.lamplight .text{padding:clamp(40px,6vw,88px) var(--gutter) clamp(40px,6vw,88px) clamp(12px,2vw,40px);display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
.lamplight .num{font-size:clamp(4rem,8vw,7.5rem);color:var(--sun)}
.lamplight h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,4.2rem);max-width:15ch;margin-top:-.4rem}
.lamplight p{max-width:36rem}
.lamplight .tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:.8rem;max-width:36rem}
.lamplight .tile{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#dfe6dc}
.lamplight .tile .ap-loop,.lamplight .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lamplight .tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;font-size:.78rem;font-weight:600;color:#fff;background:linear-gradient(0deg,rgba(15,26,18,.75),rgba(15,26,18,0));z-index:2}
.lamplight .ap-player{max-width:36rem;margin-top:.4rem}
@media (max-width:980px){.lamplight{grid-template-columns:1fr}.lamplight .photo{min-height:70vw}.lamplight .photo::after{background:linear-gradient(180deg,rgba(247,250,244,0) 75%,var(--stone))}.lamplight .text{padding:28px var(--gutter) 48px}}

/* ---------- THE TWO PILLARS: editorial rows, media bleeding to the edge ---------- */
.pillars{background:var(--stone-2);padding:clamp(40px,6vw,88px) 0 0}
.pillars .head{padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem 3rem;align-items:end}
.pillars .head h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,4.2rem);max-width:14ch}
.pillars .head p{max-width:32rem;padding-bottom:.5rem}
.row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch;margin-top:clamp(32px,4vw,64px);position:relative}
.row .media{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:10px;min-height:min(72vh,680px)}
.row .media .kb{min-height:320px;position:relative;background:#dfe6dc}
.row .media .kb>img,.row .media .kb>.ap-loop{position:absolute;inset:0;width:100%;height:100%}
.row .media .fx{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.row .media .stack{display:grid;grid-template-rows:1fr 1fr;gap:10px}
.row .media .stack .kb{min-height:0}
.row .text{padding:clamp(24px,3.4vw,56px) var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:.9rem}
.row .text .num{font-size:clamp(4.5rem,9vw,9rem)}
.row .text h3{font-size:clamp(2rem,1.4rem + 2.4vw,3.6rem)}
.row .text p{max-width:32rem}
.row .text .acts{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center;margin-top:.3rem}
.row .text .links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.92rem}
.row.r2 .text{order:-1}
.row.r2 .text .num{color:var(--sun)}
.bignum{display:flex;align-items:baseline;gap:.5rem;font-family:var(--display);color:var(--blue-deep);margin-top:.2rem}
.bignum b{font-weight:900;font-size:clamp(3rem,2rem + 4vw,5.6rem);letter-spacing:-.04em;line-height:.9}
.bignum span{font-size:1rem;font-family:var(--text);color:var(--ink-2);max-width:14rem;line-height:1.3}
.row .cover{position:absolute;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);width:min(26%,170px);z-index:3;border-radius:6px;box-shadow:0 24px 50px -18px rgba(0,0,0,.6);transform:rotate(-2deg)}
@media (max-width:980px){
  .pillars .head{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;margin-top:40px}
  .row .media{min-height:0}
  .row .media .kb{min-height:0;height:64vw}
  .row .media .stack .kb{height:31vw}
  .row .text{order:initial}
  .row.r2 .text{order:initial}
}

/* ---------- TAKE A STONE BREATH: his Oak Creek, the ring, his voice ---------- */
.breath{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;isolation:isolate;background:#2f4a3d;color:#fff}
.breath .bg{position:absolute;inset:0;z-index:0}
.breath .bg .ap-loop{position:absolute;inset:0}
.breath .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,26,18,.18),rgba(15,26,18,0) 45%,rgba(15,26,18,.25))}
.breath .tall{display:none}
.breath .ripples{position:absolute;inset:0;z-index:1;mix-blend-mode:screen;opacity:.75}
.breath .inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center;padding:clamp(80px,10vh,120px) var(--gutter) clamp(48px,7vw,100px)}
.breath .panel{color:var(--ink);max-width:36rem}
.breath h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,4rem)}
.breath .line{margin-top:.8rem;font-family:var(--display);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.3;color:var(--blue-deep)}
.breath .panel p{margin-top:.8rem}
.breath .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem;align-items:center}
.breath .panel .say{margin-top:1rem}
.breath .ringcol{display:grid;place-items:center}
.breath .ringcol .ap-ring{width:min(78%,480px)}
.breath .done{margin-top:.8rem;font-weight:600;color:var(--green-deep);min-height:1.4em}
@media (max-width:980px){
  .breath .inner{grid-template-columns:1fr;padding-top:calc(var(--bar-h) + 24px)}
  .breath .ringcol{order:-1}.breath .ringcol .ap-ring{width:min(70%,320px)}
  .breath .wide{display:none}.breath .tall{display:block}
}

/* ---------- THE MAGAZINE: a broadsheet on cool paper, the feed live ---------- */
.mag{background:var(--paper);color:var(--ink);padding:clamp(44px,6vw,88px) var(--gutter) clamp(40px,6vw,80px);border-top:3px double var(--ink)}
.mag .mast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.2rem 2rem;align-items:end;border-bottom:1px solid var(--ink);padding-bottom:1.2rem}
.mag .horse{width:clamp(70px,8vw,110px);mix-blend-mode:multiply}
.mag .mast h2{font-size:clamp(2.2rem,1.6rem + 3vw,4.8rem);letter-spacing:-.03em;color:var(--ink);font-variation-settings:"SOFT" 0}
.mag .mast .label{color:var(--crimson)}
.mag .why{max-width:40rem;margin-top:.5rem}
.mag .editions{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.9rem;font-weight:600;align-self:end}
.mag .editions a{text-decoration:none;color:var(--ink);border-bottom:1.5px solid rgba(30,36,25,.3);padding-bottom:1px}
.mag .editions a:hover{border-color:var(--ink)}
.mag .dateline{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:.5rem 0;border-bottom:3px double var(--ink)}
.mag .body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 clamp(20px,3vw,48px);margin-top:1.4rem}
.mag .lead-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem;align-items:center;padding-bottom:1.4rem;border-bottom:1px solid var(--ink)}
.mag .lead-story .kick{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--crimson)}
.mag .lead-story h3{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);margin-top:.4rem;color:var(--ink)}
.mag .lead-story h3 a{text-decoration:none}
.mag .lead-story .dek{margin-top:.6rem}
.mag .lead-art{width:100%;max-height:260px;object-fit:contain;mix-blend-mode:multiply}
.mag .lead-story .pic{position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden}
.mag .lead-story .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.amm__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 1.6rem;padding-top:1.2rem}
.amm__c{display:grid;grid-template-columns:64px minmax(0,1fr);gap:.2rem .9rem;text-decoration:none;color:inherit;padding-bottom:1rem;border-bottom:1px solid rgba(30,36,25,.18)}
.amm__c .amm__art{grid-row:1 / span 3;width:64px;height:64px;object-fit:contain;mix-blend-mode:multiply}
.amm__c i{font-style:normal;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--crimson)}
.amm__c b{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.15;color:var(--ink)}
.amm__c:hover b{text-decoration:underline;text-underline-offset:.15em}
.amm__c span{font-size:.92rem;color:var(--ink-2)}
.amm__en{font-weight:400;letter-spacing:0;text-transform:none}
.mag .rail{border-left:1px solid var(--ink);padding-left:clamp(16px,2.5vw,36px)}
.mag .rail .label{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:.4rem;display:block}
.amm__found{display:grid;gap:.9rem;padding-top:.9rem}
.amm__f{display:block;text-decoration:none;color:inherit;padding-bottom:.9rem;border-bottom:1px solid rgba(30,36,25,.18)}
.amm__f i{font-style:normal;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.amm__f b{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.2;margin-top:.15rem;color:var(--ink)}
.amm__f:hover b{text-decoration:underline;text-underline-offset:.15em}
.amm__f span{display:block;font-size:.88rem;color:var(--ink-2);margin-top:.15rem}
.mag .world{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:1.6rem}
.mag .world .kb{aspect-ratio:4/3;border-radius:4px}
.mag .world figure{margin:0}
.mag .world figcaption{font-size:.78rem;color:var(--ink-2);margin-top:.35rem}
.mag .foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-top:1.6rem;padding-top:1.2rem;border-top:3px double var(--ink)}
.mag .foot .ap-say{max-width:44rem;background:rgba(255,255,255,.6)}
.mag .foot .btn{background:var(--ink)}
.mag .foot .btn:hover{background:#000}
@media (max-width:980px){.mag .mast{grid-template-columns:auto minmax(0,1fr)}.mag .editions{grid-column:1 / -1}.mag .body{grid-template-columns:1fr}.mag .rail{border-left:0;padding-left:0;border-top:1px solid var(--ink);margin-top:1.4rem;padding-top:1rem}.mag .lead-story{grid-template-columns:1fr}.amm__grid{grid-template-columns:1fr}.mag .world{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- THE JOURNAL: a reading room that drifts ---------- */
.journal{background:var(--stone);padding:clamp(44px,6vw,88px) 0 clamp(44px,6vw,80px);overflow:clip}
.journal .head{padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem 3rem;align-items:end}
.journal .head h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,4.2rem);max-width:14ch}
.journal .head p{max-width:32rem;padding-bottom:.4rem}
.jrows{margin-top:clamp(24px,3vw,40px);display:grid;gap:14px}
.jrow{display:flex;gap:14px;width:max-content;will-change:transform}
.jcard{display:grid;grid-template-columns:84px minmax(0,1fr);gap:.2rem 1rem;align-items:center;width:min(78vw,420px);text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;box-shadow:0 16px 40px -28px rgba(18,40,30,.5);transition:transform .3s,box-shadow .3s}
.jcard:hover{transform:translateY(-3px);box-shadow:0 26px 50px -26px rgba(18,40,30,.55)}
.jcard img{grid-row:1 / span 2;width:84px;height:84px;object-fit:contain;mix-blend-mode:multiply}
.jcard i{font-style:normal;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--green-2)}
.jcard b{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.15;color:var(--blue-deep);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jcard.photo{grid-template-columns:110px minmax(0,1fr)}
.jcard.photo img{width:110px;height:84px;object-fit:cover;border-radius:10px;mix-blend-mode:normal}
.jfeat{margin-top:clamp(28px,4vw,48px);padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(16px,2.5vw,40px);align-items:stretch}
.jfeat .big{position:relative;border-radius:22px;overflow:hidden;min-height:420px;text-decoration:none;color:#fff;display:flex;align-items:flex-end;background:#2f4a3d}
.jfeat .big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jfeat .big .t{position:relative;z-index:2;padding:clamp(18px,3vw,36px);background:linear-gradient(0deg,rgba(15,26,18,.86),rgba(15,26,18,.5) 60%,rgba(15,26,18,0));width:100%}
.jfeat .big i{font-style:normal;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--sun-2)}
.jfeat .big h3{color:#fff;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);margin-top:.4rem;max-width:20ch}
.jfeat .big p{color:rgba(255,255,255,.9);margin-top:.5rem;max-width:34rem}
.jfeat .side{display:grid;gap:12px}
.jfeat .side a{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:1rem;align-items:center;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem}
.jfeat .side a img{width:120px;height:90px;object-fit:cover;border-radius:10px}
.jfeat .side a img.art{object-fit:contain;mix-blend-mode:multiply;height:90px}
.jfeat .side i{font-style:normal;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--green-2)}
.jfeat .side b{display:block;font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.15;color:var(--blue-deep);margin-top:.2rem}
.jfeat .side a:hover b{text-decoration:underline;text-underline-offset:.15em}
.jall{margin-top:clamp(24px,3vw,40px);padding-inline:var(--gutter)}
.jall summary{cursor:pointer;font-weight:700;color:var(--blue);list-style:none;display:inline-flex;gap:.6em;align-items:center}
.jall summary::-webkit-details-marker{display:none}
.jall summary::after{content:"↓";font-family:var(--display)}
.jall[open] summary::after{content:"↑"}
.jall ul{columns:3;column-gap:2.5rem;margin:1rem 0 0;padding:0;list-style:none;font-size:.95rem}
.jall li{break-inside:avoid;padding:.3rem 0;border-bottom:1px solid var(--line)}
.jall li a{text-decoration:none;color:var(--ink)}
.jall li a:hover{color:var(--blue)}
.journal .acts{padding-inline:var(--gutter);margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center}
@media (max-width:980px){.journal .head{grid-template-columns:1fr}.jfeat{grid-template-columns:1fr}.jfeat .big{min-height:70vw}.jall ul{columns:1}}

/* ---------- THE WORLD: culture in motion, a living mosaic ---------- */
.world-band{background:var(--stone-2);padding:clamp(44px,6vw,88px) 0 clamp(40px,6vw,80px);overflow:clip}
.world-band .head{padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem 3rem;align-items:end}
.world-band .head h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,4.2rem);max-width:14ch}
.world-band .head p{max-width:32rem;padding-bottom:.4rem}
.mosaic{margin-top:clamp(24px,3vw,40px);display:grid;gap:10px;padding-inline:10px}
.mrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;will-change:transform}
.tile{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#dfe6dc}
.tile.wide{grid-column:span 2;aspect-ratio:2/1}
.tile img,.tile .ap-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile img.b{opacity:0;transition:opacity 1.6s ease}
.tile.flip img.b{opacity:1}
.tile .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.55rem .75rem;font-size:.74rem;font-weight:600;color:#fff;background:linear-gradient(0deg,rgba(15,26,18,.7),rgba(15,26,18,0));opacity:0;transition:opacity .3s}
.tile:hover .cap{opacity:1}
.tile.cta{display:grid;place-items:center;text-decoration:none;color:#fff;background:var(--blue);text-align:left}
.tile.cta>div{padding:1rem 1.2rem;align-self:end;width:100%}
.tile.cta b{font-family:var(--display);font-size:clamp(1.15rem,1rem + .7vw,1.6rem);display:block;line-height:1.1}
.tile.cta span{display:block;font-size:.85rem;opacity:.9;margin-top:.4rem}
.tile.cta:hover{background:var(--blue-deep)}
.tile.cta svg{position:absolute;right:1rem;top:1rem;width:40px;height:40px;fill:#fff;opacity:.9}
.world-band .fine{padding-inline:var(--gutter);margin-top:1rem}
@media (max-width:980px){.world-band .head{grid-template-columns:1fr}.mrow{grid-template-columns:repeat(3,minmax(0,1fr))}.tile.wide{grid-column:span 2}.tile.cta b{font-size:1.05rem}.tile .cap{opacity:1}}

/* ---------- THE BOOKS ---------- */
.books{background:var(--stone);padding:clamp(44px,6vw,88px) var(--gutter);position:relative;overflow:clip}
.books .head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem 3rem;align-items:end}
.books .head h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,4.2rem);max-width:14ch}
.books .head p{max-width:32rem;padding-bottom:.4rem}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,40px);margin-top:clamp(24px,3vw,40px)}
.book{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1rem;align-items:end;text-decoration:none;color:inherit}
.book img{width:100%;border-radius:4px;box-shadow:0 30px 60px -24px rgba(18,40,30,.6);transition:transform .5s}
.book:hover img{transform:translateY(-6px) rotate(-1deg)}
.book h3{font-size:clamp(1.3rem,1rem + 1vw,1.8rem)}
.book p{font-size:.95rem;margin-top:.4rem;color:var(--ink-2)}
.book small{display:block;margin-top:.5rem;font-weight:700;color:var(--blue)}
.books .acts{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center;margin-top:2rem}
@media (max-width:980px){.books .head{grid-template-columns:1fr}.shelf{grid-template-columns:1fr;gap:28px}.book{grid-template-columns:140px minmax(0,1fr)}}

/* ---------- THE WORK ---------- */
.work{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:var(--stone-2);overflow:clip}
.work .body{padding:clamp(44px,6vw,88px) clamp(12px,2vw,40px) clamp(44px,6vw,88px) var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.work h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,4.2rem);max-width:14ch}
.work .intro{max-width:34rem}
.offers{display:grid;gap:0;margin-top:.6rem;max-width:38rem}
.offer{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.2rem 1rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.offer:last-child{border-bottom:1px solid var(--line)}
.offer .num{font-size:2rem;color:var(--sun)}
.offer h3{font-size:clamp(1.25rem,1rem + .9vw,1.7rem)}
.offer h3 span{display:block;font-family:var(--text);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-2);margin-bottom:.25rem}
.offer p{grid-column:2;font-size:.95rem;color:var(--ink-2)}
.offer:hover h3{color:var(--blue)}
.work .pics{position:relative;display:grid;grid-template-rows:1.3fr 1fr;gap:10px;min-height:min(100vh,900px)}
.work .pics .kb{position:relative;min-height:0}
.work .pics .kb img,.work .pics .kb .ap-loop{position:absolute;inset:0;width:100%;height:100%}
.work .pics .fx{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
@media (max-width:980px){.work{grid-template-columns:1fr}.work .pics{min-height:0;grid-template-rows:auto;grid-template-columns:1fr 1fr}.work .pics .kb{height:52vw}.work .body{padding:28px var(--gutter) 48px}}

/* ---------- WRITE TO ME ---------- */
.write{position:relative;overflow:hidden;isolation:isolate;background:#DCE8DF;min-height:80vh;display:grid;align-items:center}
.write .bg{position:absolute;inset:0;z-index:0}
.write .bg .ap-loop,.write .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.write .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,250,244,.2),rgba(247,250,244,0) 40%,rgba(247,250,244,.4))}
.write .mist2{position:absolute;inset:0;z-index:1;mix-blend-mode:screen;opacity:.9;pointer-events:none}
.write .inner{position:relative;z-index:2;padding:clamp(60px,9vh,110px) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:stretch}
.write .panel h2{font-size:clamp(1.9rem,1.4rem + 2vw,3.2rem)}
.write .panel p{margin-top:.7rem;max-width:30rem}
.join{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.join__in{flex:1 1 220px;min-width:0;font:inherit;padding:.9em 1.1em;border-radius:999px;border:1.5px solid rgba(18,66,121,.35);background:#fff;color:var(--ink)}
.join__in:focus{outline:2px solid var(--blue);outline-offset:2px}
.join__note{margin-top:.8rem;font-size:.9rem;color:var(--ink-2)}
.join__note a{color:var(--blue)}
.write .touch{display:flex;flex-direction:column;justify-content:center}
.write .touch .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
@media (max-width:980px){.write .inner{grid-template-columns:1fr;padding-top:60px}}

/* ---------- FOOTER ---------- */
.ta-foot{background:var(--night);color:rgba(255,255,255,.78);padding:clamp(36px,5vw,64px) var(--gutter) calc(1.6rem + env(safe-area-inset-bottom,0px));font-size:.94rem}
.ta-foot .grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
.ta-foot .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font-family:var(--display);font-weight:800;font-size:1.3rem}
.ta-foot .brand img{width:34px;height:32px;object-fit:contain;background:#fff;border-radius:6px;padding:2px}
.ta-foot .brand span{color:#8FD1A0}
.ta-foot .tag{margin-top:.6rem;max-width:28rem}
.ta-foot .langs{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.3rem .8rem}
.ta-foot .langs a{color:#fff;text-decoration:none;font-weight:600}
.ta-foot h4{color:#fff;font-family:var(--text);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.7rem}
.ta-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.ta-foot ul a{color:rgba(255,255,255,.86);text-decoration:none}
.ta-foot ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.ta-foot .legal{margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.6)}
@media (max-width:980px){.ta-foot .grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ta-foot .grid{grid-template-columns:1fr}}

/* ---------- the player and the voice line on daylight ---------- */
.ap-player{--pc:var(--blue);background:rgba(255,255,255,.8);box-shadow:0 1px 0 rgba(30,36,25,.08),0 20px 50px -30px rgba(18,40,30,.5)}
.ap-player .meta h3,.ap-player .meta .t{color:var(--blue-deep)}
.ap-say{background:rgba(255,255,255,.78);border-color:rgba(30,36,25,.16)}
.ap-say:hover{border-color:var(--sun)}
.ap-say .ic{background:var(--sun);color:var(--ink)}
.ap-say .txt{color:var(--blue-deep);font-weight:600}
.ap-say .who::before{background:var(--sun)}
.ap-scene-chip{background:rgba(15,26,18,.7)}
.ap-ring .word{fill:#fff}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .arrive .rays,.arrive .sun{animation:none}
  .jrow{transform:none !important;flex-wrap:wrap;width:auto}
}
html.render .arrive .rays,html.render .arrive .sun{animation:none}
/* full-page captures (#flat): viewport units would stretch the hero to the whole page */
html.flat .arrive,html.flat .arrive-grid,html.flat .breath{min-height:860px}
html.flat .write{min-height:760px}
html.flat .reveal,html.flat [data-words] .w{opacity:1;transform:none;transition:none}
html.flat .arrive{--pw:400px}
@media (max-width:980px){html.flat .arrive,html.flat .arrive-grid,html.flat .breath{min-height:0}html.flat .portrait{width:100%;height:560px;aspect-ratio:auto}}

/* ---------- the weather on the whole page: mist at the seams, dew on the leaves, warm light, a few sunbeams ---------- */
[data-wx]{position:relative;isolation:isolate}
.wx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
[data-wx-top] > .wx{z-index:2}
.wx .warm{position:absolute;inset:0;background:radial-gradient(60% 55% at 88% -5%,rgba(255,236,170,.5),rgba(255,236,170,0) 70%),radial-gradient(40% 40% at 5% 100%,rgba(255,246,214,.35),rgba(255,246,214,0) 70%)}
.wx .beams{position:absolute;right:-24vw;top:-46vw;width:96vw;height:96vw;mix-blend-mode:screen;opacity:.42;transform-origin:50% 50%;animation:rays 130s linear infinite;
  background:conic-gradient(from 200deg at 50% 50%,rgba(255,236,170,0) 0deg,rgba(255,240,190,.55) 5deg,rgba(255,236,170,0) 11deg,rgba(255,236,170,0) 24deg,rgba(255,244,200,.45) 29deg,rgba(255,236,170,0) 36deg,rgba(255,236,170,0) 54deg,rgba(255,240,190,.5) 60deg,rgba(255,236,170,0) 68deg,rgba(255,236,170,0) 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.6) 26%,transparent 56%);mask-image:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.6) 26%,transparent 56%)}
.wx canvas.mistc{position:absolute;left:0;right:0;top:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.9}
[data-wx]:not([data-wx-top]) > .wx canvas.mistc{height:52%;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
.wx canvas.dewc{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.85}
.mag .wx .warm{opacity:.6}
@media (prefers-reduced-motion:reduce){.wx .beams{animation:none}}
html.render .wx .beams{animation:none}

/* ---------- 11/7: a visible "Menu" on phones, and the section dock (Tony: "we do need a menu", "navigate to the other sections") ---------- */
@media (max-width:980px){
  .ap-burger{display:flex;align-items:center;width:auto;min-width:44px;padding:0 42px 0 12px;border:1px solid currentColor;border-radius:999px;height:40px}
  .ap-burger::before{content:"Menu";font-weight:600;font-size:.9rem;letter-spacing:.02em}
  .ap-burger span{left:auto;right:12px;width:20px;top:13px}
  .ap-burger span:nth-child(2){top:19px}.ap-burger span:nth-child(3){top:25px}
}
.sec-dock{position:fixed;z-index:50;right:clamp(10px,1.6vw,24px);top:50%;transform:translateY(-50%);font-family:inherit}
.sec-dock .sec-toggle{display:none}
.sec-dock ol{list-style:none;margin:0;padding:.6rem .5rem;display:flex;flex-direction:column;gap:.15rem;background:rgba(250,252,247,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;box-shadow:0 6px 24px rgba(20,40,30,.12)}
.sec-dock a{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;text-decoration:none;color:#1d2b22;font-size:.82rem;font-weight:600;padding:.28rem .4rem;border-radius:10px;white-space:nowrap}
.sec-dock a::after{content:"";width:8px;height:8px;border-radius:50%;background:#2E8540;opacity:.35;flex:none;transition:transform .3s,opacity .3s}
.sec-dock a span.t{max-width:0;overflow:hidden;opacity:0;transition:max-width .35s ease,opacity .25s}
.sec-dock:hover a span.t,.sec-dock:focus-within a span.t,.sec-dock a.on span.t{max-width:14rem;opacity:1}
.sec-dock a.on::after{opacity:1;transform:scale(1.35);background:#1C5BA8}
.sec-dock a:hover{background:rgba(46,133,64,.10)}
@media (max-width:980px){
  .sec-dock{right:12px;left:auto;top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:none}
  .sec-dock .sec-toggle{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:999px;padding:.62rem 1rem;background:rgba(250,252,247,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 22px rgba(20,40,30,.18);color:#1d2b22;font-weight:700;font-size:.9rem}
  .sec-dock .sec-toggle i{width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(-45deg) translateY(2px);transition:transform .3s}
  .sec-dock.open .sec-toggle i{transform:rotate(135deg) translateY(2px)}
  .sec-dock ol{position:absolute;right:0;left:auto;bottom:calc(100% + 10px);min-width:15rem;max-height:70vh;overflow:auto;display:none;background:rgba(250,252,247,.97)}
  .sec-dock.open ol{display:flex}
  .sec-dock a{justify-content:flex-end;font-size:.98rem;padding:.6rem .7rem;flex-direction:row-reverse}
  .sec-dock a span.t{max-width:none;opacity:1}
}
html.menu-open .sec-dock{display:none}
@media (prefers-reduced-motion:reduce){.sec-dock *{transition:none!important}}

/* ---------- 11/7 evening: early morning and cool, a calmer bar (Tony: "a bit darker... like early morning and cool", "its too bright", "the menu is too jammed", "logo and title is too small") ---------- */
.arrive{background:#4f6069}
.arrive .glow{background:#465760}
.arrive .glow img{filter:blur(38px) saturate(.75) brightness(.55)}
.arrive .glow::after{background:linear-gradient(90deg,rgba(24,38,50,.42),rgba(24,38,50,.18) 45%,rgba(24,38,50,.14) 75%,rgba(24,38,50,.38)),linear-gradient(180deg,rgba(206,220,228,.16),rgba(206,220,228,0) 30%,rgba(26,40,50,0) 65%,rgba(26,40,50,.34))}
.arrive .mist{opacity:.6}
.arrive .dew{opacity:.5}
.arrive .rays{opacity:.2}
.arrive .sun{background:radial-gradient(circle,rgba(255,244,222,.5) 0,rgba(255,232,186,.24) 16%,rgba(255,222,160,.07) 40%,rgba(255,222,160,0) 70%)}
.arrive .panel{background:rgba(232,238,240,.9);border-color:rgba(255,255,255,.45);box-shadow:0 40px 90px -40px rgba(10,24,32,.6)}
.ta-bar{background:linear-gradient(180deg,rgba(226,233,236,.92),rgba(226,233,236,.7))}
.ta-bar .ap-mark{font-size:1.62rem;gap:.7rem}
.ta-bar .ap-mark img{width:46px;height:43px}
@media (max-width:980px){.ta-bar .ap-mark{font-size:1.42rem}.ta-bar .ap-mark img{width:40px;height:38px}}
/* the laptop bar: five main pages with room between them; Home, Teaching, For Teams and About sit behind the Menu pill */
@media (min-width:981px){
  .ta-bar .ap-nav{gap:clamp(1.3rem,2.3vw,2.5rem);font-size:.95rem}
  .ta-bar .ap-nav a[href="/"],.ta-bar .ap-nav a[href="/teaching/"],.ta-bar .ap-nav a[href="/teams/"],.ta-bar .ap-nav a[href="/#about"]{display:none}
  .ta-bar .ap-sound{padding:.6em .85em}.ta-bar .ap-sound .lbl{display:none}
  .ta-bar .acts{gap:.75rem}
  .ap-burger{display:flex;align-items:center;width:auto;min-width:44px;padding:0 44px 0 15px;border:1px solid currentColor;border-radius:999px;height:42px}
  .ap-burger::before{content:"Menu";font-weight:600;font-size:.92rem;letter-spacing:.02em}
  .ap-burger span{left:auto;right:14px;width:20px;top:14px}
  .ap-burger span:nth-child(2){top:20px}.ap-burger span:nth-child(3){top:26px}
}
/* the whole first screen at dawn (Tony: "its totally bright"): the panel and the bar go dark and cool, the type turns light */
.arrive .panel{background:rgba(20,32,40,.58);border-color:rgba(255,255,255,.1);box-shadow:0 40px 90px -40px rgba(0,0,0,.6);color:#E6ECEA}
.arrive .label{color:rgba(230,236,234,.72)}
.arrive h1,.arrive h1 *{color:#F3EFE5}
.arrive h1 em,.arrive h1 .accent,.arrive h1 b{color:#D9C38C}
.arrive .lede{color:#DCE4E2}
.arrive .byline{border-top-color:rgba(255,255,255,.14)}
.arrive .byline img{box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.arrive .byline b{color:#F3EFE5}
.arrive .byline span,.arrive .byline span i{color:rgba(220,228,226,.78)}
.arrive .btn.ghost.dark{color:#F3EFE5;border-color:rgba(243,239,229,.5)}
.arrive .btn.ghost.dark:hover{background:rgba(255,255,255,.08)}
.arrive .ap-say{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#E6ECEA}
.arrive .soundbtn{color:#E6ECEA;border-color:rgba(255,255,255,.3)}
.ta-bar{background:linear-gradient(180deg,rgba(22,34,42,.9),rgba(22,34,42,.74));color:#E9EEEC}
.ta-bar.solid{background:rgba(22,34,42,.9)}
.ta-bar .ap-mark{color:#F3EFE5}.ta-bar .ap-mark span{color:#B9D2C4}
.ta-bar .ap-mark img{mix-blend-mode:normal;filter:brightness(1.6) saturate(.6)}
.ta-bar .ap-sound,.ap-bar.on-light .ap-sound{border-color:rgba(255,255,255,.35);color:#E9EEEC}
.ap-bar.on-light{color:#E9EEEC}
.sec-dock ol{background:rgba(22,34,42,.62)}
.sec-dock a{color:#E6ECEA}.sec-dock a::after{background:#9FC7AE}.sec-dock a.on::after{background:#F3EFE5}.sec-dock a:hover{background:rgba(255,255,255,.08)}
.arrive .framecol figcaption{background:rgba(20,32,40,.66);color:#E6ECEA;border-color:rgba(255,255,255,.12)}
.arrive .framecol figcaption b{color:#F3EFE5}.arrive .framecol figcaption span{color:rgba(220,228,226,.8)}

/* ---------- 11/7 night: the film fills the first screen on a laptop; the books on top; Magazine & Journal in one box; the magazine cover ---------- */
@media (min-width:981px){
  .arrive .arrive-grid{grid-template-columns:minmax(0,1fr);align-items:center}
  .arrive .framecol{position:absolute;inset:0;width:auto;z-index:0;justify-self:stretch}
  .arrive .portrait{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;background:#26343c}
  .arrive .portrait .ap-cut{background:#26343c}
  .arrive .portrait .ap-cut .shot::after{background:none}
  .arrive .portrait .mist3{opacity:.32}
  .arrive .portrait::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(10,18,24,.82) 0%,rgba(10,18,24,.62) 34%,rgba(10,18,24,.2) 64%,rgba(10,18,24,.06) 100%),linear-gradient(180deg,rgba(10,18,24,.4) 0%,rgba(10,18,24,0) 24%,rgba(10,18,24,0) 68%,rgba(10,18,24,.55) 100%)}
  .arrive .framecol figcaption{left:auto;right:var(--gutter);bottom:clamp(18px,3vh,30px);max-width:24rem;background:rgba(14,24,30,.5)}
  .arrive .copy.panel{position:relative;z-index:2;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;max-width:42rem}
  .arrive h1{font-size:clamp(2.2rem,1.3rem + 2.3vw,3.6rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .arrive .lede{text-shadow:0 1px 14px rgba(0,0,0,.4)}
  .ta-bar .ap-nav{position:absolute;left:50%;transform:translateX(-50%)}
}
html.at-top .sec-dock{opacity:0;pointer-events:none}
.sec-dock{transition:opacity .5s}
.hero-books{display:flex;align-items:center;gap:.9rem;margin-top:1.1rem;padding:.6rem .9rem .6rem .6rem;border-radius:14px;text-decoration:none;color:#F3EFE5;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);max-width:30rem;transition:background .3s}
.hero-books:hover{background:rgba(255,255,255,.13)}
.hero-books .covers{display:flex;flex:none}
.hero-books .covers img{width:38px;height:57px;object-fit:cover;border-radius:3px;box-shadow:0 6px 14px rgba(0,0,0,.45)}
.hero-books .covers img+img{margin-left:-10px}
.hero-books .t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.hero-books .t b{font-family:var(--display);font-size:1.02rem;font-weight:700}
.hero-books .t small{font-size:.8rem;color:rgba(220,228,226,.8)}
.hero-books .arrow{margin-left:auto;font-size:1.1rem}
.nav-drop{position:relative}
.nav-drop>button{background:none;border:0;color:inherit;font:inherit;font-weight:600;cursor:pointer;padding:.3em 1.1em .3em 0;position:relative;opacity:.88}
.nav-drop>button::after{content:"";position:absolute;right:.15em;top:50%;width:.4em;height:.4em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.nav-drop .drop{position:absolute;left:50%;top:calc(100% + 12px);transform:translate(-50%,6px);min-width:19rem;background:rgba(22,34,42,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:.5rem;box-shadow:0 20px 50px rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
.nav-drop .drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-drop:hover .drop,.nav-drop:focus-within .drop,.nav-drop.open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-drop .drop a{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .85rem;border-radius:10px;text-decoration:none;color:#F3EFE5}
.nav-drop .drop a::after{display:none}
.nav-drop .drop a:hover{background:rgba(255,255,255,.08)}
.nav-drop .drop b{font-family:var(--display);font-size:1rem}
.nav-drop .drop span{font-size:.8rem;font-weight:500;color:rgba(220,228,226,.75)}
.ap-menu nav .duo{font-family:var(--display);font-weight:800;font-size:clamp(2rem,9vw,3rem);letter-spacing:-.03em;line-height:1.15}
.ap-menu nav .duo small{display:block;font-family:var(--text);font-weight:500;font-size:.9rem;letter-spacing:0;color:rgba(255,255,255,.6);margin-bottom:.5em}
.ap-menu nav .duo a{display:inline}
.ap-menu nav .duo i{font-style:normal;opacity:.55;font-weight:500}
.mag-plate{display:block;position:relative;height:clamp(170px,21vw,320px);margin:1.2rem 0 1.6rem;border-radius:6px;overflow:hidden;text-decoration:none;box-shadow:0 20px 50px -30px rgba(30,36,25,.5)}
.mag-plate object{display:block;width:100%;height:100%;border:0;pointer-events:none}
.mag-plate .cap{position:absolute;right:.8rem;bottom:.6rem;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:#fff;background:rgba(20,30,24,.45);padding:.3em .7em;border-radius:999px}
@media (min-width:981px){.arrive .framecol figcaption{bottom:auto;top:calc(100svh - 104px)}.arrive h1{font-size:clamp(2.1rem,1.2rem + 2.2vw,3.35rem)}}
.arrive .portrait .mist3{opacity:.4}@media (min-width:981px){.arrive .portrait .mist3{opacity:.32}}
.ta-bar.solid,.ta-bar.on-light.solid,.ap-bar.ta-bar.on-light.solid{background:rgba(22,34,42,.92)}
.ap-bar.ta-bar,.ap-bar.ta-bar.on-light,.ap-bar.ta-bar.solid,.ap-bar.ta-bar.on-light.solid{background:rgba(22,34,42,.9);transition:box-shadow .5s}
/* the email capture thank-you (js/capture.js), as on the current home page */
.cap-done{border-left:3px solid #2E8540;background:rgba(46,133,64,.08);padding:.8rem 1rem;border-radius:8px;margin:.6rem 0}
.cap-done b{display:block;font-size:1rem;line-height:1.4}
.cap-done span{display:block;margin-top:.3rem;font-size:.88rem;opacity:.8}
.cap-done--err{border-left-color:#8A3C1E;background:rgba(138,60,30,.07)}
/* the Executive Reader, carried over from the current home page */
.reader-feature{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:center;margin-top:clamp(24px,3vw,40px);padding:clamp(14px,1.6vw,22px);border-radius:18px;background:rgba(255,253,246,.7);border:1px solid rgba(30,36,25,.1);text-decoration:none;color:inherit;max-width:56rem;transition:background .3s}
.reader-feature:hover{background:rgba(255,253,246,.92)}
.reader-feature img{width:100%;height:auto;border-radius:4px;box-shadow:0 18px 40px -18px rgba(30,36,25,.55)}
.reader-feature small{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson,#9b2c2c)}
.reader-feature h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);margin:.3rem 0 .5rem}
.reader-feature p{margin:0 0 .5rem;max-width:40rem}
.reader-feature .pull{font-family:var(--display);font-style:italic}
.reader-feature .go{font-weight:700;color:var(--blue-deep,#124279)}
@media (max-width:600px){.reader-feature{grid-template-columns:96px minmax(0,1fr)}}

/* ---------- Listen: the song, the word before you begin, the morning playlist; the Council Fire film beside the books ---------- */
.hear{position:relative;padding:clamp(56px,8vw,110px) var(--gutter);background:#F3F0E6;color:var(--ink)}
.hear-in{max-width:1180px;margin:0 auto}
.hear h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);margin:.4rem 0 .6rem;max-width:22ch}
.hear .lede{max-width:44rem;font-size:clamp(1.02rem,.96rem + .35vw,1.18rem)}
.hear-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px)}
.hear-card{background:rgba(255,253,246,.85);border:1px solid rgba(30,36,25,.1);border-radius:18px;padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:.5rem}
.hear-card.wide{grid-column:1 / -1}
.hear-card small{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson,#9b2c2c)}
.hear-card h3{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);margin:0}
.hear-card p{margin:0 0 .4rem;max-width:44rem}
.hear-card audio{width:100%;margin-top:auto}
.hear-card .yt{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#1b2420;margin:.4rem 0}
.hear-card .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:760px){.hear-grid{grid-template-columns:1fr}}
.books-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,260px);gap:clamp(16px,2.5vw,36px);align-items:center;margin-top:clamp(24px,3vw,40px);max-width:80rem}
.books-pair .reader-feature{margin-top:0;max-width:none}
.cf-film{position:relative;margin:0;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#1b2420;box-shadow:0 30px 60px -30px rgba(30,36,25,.6)}
.cf-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:0;background:rgba(255,253,246,.9);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.cf-play svg{width:26px;height:26px;fill:#1b2420;margin-left:3px}
.cf-film figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;background:linear-gradient(0deg,rgba(10,16,12,.8),rgba(10,16,12,0));color:#fff;display:flex;flex-direction:column}
.cf-film figcaption b{font-family:var(--display);font-size:1.05rem}.cf-film figcaption span{font-size:.78rem;opacity:.85}
.cf-film.is-playing .cf-play,.cf-film.is-playing figcaption{display:none}
@media (max-width:760px){.books-pair{grid-template-columns:1fr}.cf-film{max-width:300px;justify-self:center;width:100%}}
.hear-card .yt{max-width:760px}

/* ---------- the Global language strip and the three greetings, carried over from the current home page ---------- */
:root{--strip-h:34px}
.gstrip{position:fixed;top:0;left:0;right:0;z-index:62;height:var(--strip-h);display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.6rem);padding:0 var(--gutter);background:#1B5530;color:#EEF2EC;font-size:.82rem;font-weight:600;white-space:nowrap;overflow-x:auto;scrollbar-width:none;transition:transform .35s ease}
.gstrip::-webkit-scrollbar{display:none}
.gstrip .lbl{display:flex;align-items:center;gap:.4rem;color:#E6C46A;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.gstrip .lbl svg{width:15px;height:15px}
.gstrip a{color:inherit;text-decoration:none;opacity:.92;padding:.25em 0;border-bottom:2px solid transparent}
.gstrip a:hover{opacity:1;border-bottom-color:rgba(230,196,106,.6)}
.gstrip a.on{border-bottom-color:#E6C46A;opacity:1}
.gstrip .soon{opacity:.5;font-weight:500}
.gstrip .mail{margin-left:auto;color:#B9E0C4}
.ap-bar.ta-bar{top:var(--strip-h);transition:top .35s ease,box-shadow .5s}
html.past-strip .gstrip,html:has(.ap-bar.menu-open) .gstrip{transform:translateY(-100%)}
html.past-strip .ap-bar.ta-bar,html:has(.ap-bar.menu-open) .ap-bar.ta-bar{top:0}
.arrive .arrive-grid{padding-top:calc(var(--bar-h) + var(--strip-h) + 18px)}
@media (max-width:980px){.gstrip{font-size:.78rem;gap:1rem}.gstrip .lbl span{display:none}}
.greet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,32px);padding:clamp(28px,4vw,56px) var(--gutter);background:linear-gradient(100deg,#DCE6EC 0%,#F2EEDD 55%,#EBD9A6 100%)}
.greet-c{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-decoration:none;color:#124279;transition:transform .3s}
.greet-c:hover{transform:translateY(-3px)}
.greet-c svg{width:clamp(56px,7vw,96px);height:auto}
.greet-c:nth-child(1) svg{color:#2E7D3E}.greet-c:nth-child(2) svg{color:#C9962B}.greet-c:nth-child(3) svg{color:#8FA592}
.greet-c .w{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,1rem + 1.4vw,2.3rem);letter-spacing:-.01em}
.greet-c .l{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(40,46,40,.6)}

/* ---------- join, free ---------- */
.gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--gutter);background:rgba(12,20,26,.72);backdrop-filter:blur(12px) saturate(.9);-webkit-backdrop-filter:blur(12px) saturate(.9);opacity:0;transition:opacity .6s ease}
.gate.on{opacity:1}
.gate-card{width:min(560px,100%);background:rgba(20,32,40,.92);color:#EEF2EC;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:clamp(24px,3.4vw,40px);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.gate-card .label{color:#E6C46A}
.gate-card h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);line-height:1.12;margin:.5rem 0 .7rem;color:#F3EFE5}
.gate-card p{color:rgba(230,236,234,.86);margin:0 0 1rem}
.gate-join{display:flex;gap:.6rem;flex-wrap:wrap}
.gate-join input[type=email]{flex:1 1 220px;min-width:0;font:inherit;font-size:1rem;padding:.85em 1em;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
.gate-join input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.gate-card .fine{font-size:.8rem;opacity:.7;margin:.9rem 0 0}
.gate-card .cap-done{color:#EEF2EC;background:rgba(46,133,64,.18)}
.gate-card .cap-done span{color:rgba(230,236,234,.8)}
html.gated body{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gstrip>*{flex:none}

/* ---------- recent work ---------- */
.recent{padding:clamp(56px,8vw,110px) var(--gutter);background:#EEF1EA;color:var(--ink)}
.recent-in{max-width:1240px;margin:0 auto}
.recent h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);margin:.4rem 0 0;max-width:22ch}
.recent-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px)}
.rw{grid-column:span 2;display:flex;flex-direction:column;background:#FFFDF6;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;border:1px solid rgba(30,36,25,.08);transition:transform .35s,box-shadow .35s}
.rw:nth-child(4),.rw:nth-child(5){grid-column:span 3}
.rw:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(30,36,25,.45)}
.rw img{width:100%;aspect-ratio:3/2;object-fit:cover}
.rw div{padding:clamp(14px,1.6vw,22px);display:flex;flex-direction:column;gap:.35rem}
.rw small{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson,#9b2c2c)}
.rw h3{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);margin:0;line-height:1.15}
.rw p{margin:0;font-size:.95rem;color:var(--ink-2,#3d4338)}
@media (max-width:980px){.recent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rw,.rw:nth-child(4),.rw:nth-child(5){grid-column:span 1}}
@media (max-width:600px){.recent-grid{grid-template-columns:1fr}}
.hear-card[hidden]{display:none}

/* ---------- the phone, built for the hand (Tony: "the phone version has to be world class... different from anything out there") ----------
   The first screen is the film itself, full height like a story, with the headline rising out of the mist at the bottom;
   the rest of the welcome follows on the same dawn; cards travel sideways under the thumb; one bar at the bottom for the thumb. */
@media (max-width:980px){
  .arrive{background:#0F1A20}
  .arrive .arrive-grid{display:flex;flex-direction:column;padding:0 0 30px;gap:0}
  .arrive .framecol{order:-1;width:100%;margin:0}
  .arrive .portrait{height:100svh;min-height:560px;border-radius:0;box-shadow:none;background:#0F1A20}
  .arrive .portrait::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(15,26,32,.55) 0%,rgba(15,26,32,0) 18%,rgba(15,26,32,0) 42%,rgba(15,26,32,.72) 72%,#0F1A20 100%)}
  .arrive .framecol figcaption{top:calc(var(--bar-h) + var(--strip-h) + 10px);bottom:auto;left:var(--gutter);right:auto;max-width:72%;padding:.4rem .7rem;font-size:.8rem;background:rgba(15,26,32,.45)}
  .arrive .framecol figcaption b{font-size:.84rem}
  .arrive .copy.panel{position:relative;z-index:5;margin:-40svh var(--gutter) 0;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .arrive .copy .label{display:none}
  .arrive h1{font-size:clamp(2rem,8.6vw,2.9rem);line-height:1.04;text-shadow:0 2px 26px rgba(0,0,0,.45)}
  .arrive .lede{margin-top:1.1rem}
  .arrive .hero-books{max-width:none}
  /* cards travel sideways under the thumb, the next one always peeking */
  .recent-grid,.shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .recent-grid::-webkit-scrollbar,.shelf::-webkit-scrollbar{display:none}
  .rw,.rw:nth-child(4),.rw:nth-child(5){flex:0 0 84%;scroll-snap-align:start}
  .shelf .book{flex:0 0 80%;scroll-snap-align:start;grid-template-columns:120px minmax(0,1fr)}
  .hear-grid{gap:14px}
  /* the floating scene label only while the sound is on */
  html:not(.sound-on) .ap-scene-chip{display:none}
  html[data-scene].sound-on .ap-scene-chip{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* one bar for the thumb */
  .sec-dock{left:10px;right:10px;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:none}
  .sec-dock .sec-toggle{display:none}
  .thumbbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:rgba(15,26,32,.86);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:6px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
  .thumbbar a,.thumbbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:0;background:none;color:#E6ECEA;font:inherit;font-size:.68rem;font-weight:600;line-height:1.15;text-align:center;text-decoration:none;border-radius:16px;padding:4px 2px}
  .thumbbar a.on,.thumbbar a:active,.thumbbar button:active{background:rgba(255,255,255,.1);color:#fff}
  .thumbbar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .sec-dock ol{position:absolute;left:0;right:0;bottom:calc(100% + 8px);max-height:62svh;overflow:auto;background:rgba(15,26,32,.94);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s}
  .sec-dock.open ol{opacity:1;pointer-events:auto;transform:none}
  .sec-dock ol a{justify-content:flex-start;font-size:.95rem;padding:.6rem .8rem}
  .sec-dock ol a::after{order:-1}
  html.at-top .sec-dock{opacity:1;pointer-events:auto}
  .write{padding-bottom:110px}
}
@media (max-width:980px){.thumbbar a::after{display:none}.arrive .framecol figcaption span{display:none}}
.arrive .ap-say .txt,.arrive .ap-say .txt .w{color:#EEF2EC}
.arrive .ap-say .who{color:rgba(230,236,234,.75)}
@media (max-width:980px){.recent-grid,.shelf{scroll-padding-inline:var(--gutter)}}

/* ---------- the record: his portrait and his credentials, in Who I am ---------- */
.record{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:center;margin:1.6rem 0;padding:clamp(14px,1.6vw,20px);background:rgba(255,253,246,.72);border:1px solid rgba(30,36,25,.1);border-radius:20px}
.record img{width:100%;height:auto;border-radius:14px;box-shadow:0 24px 50px -24px rgba(30,24,16,.55)}
.record ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.record li{display:flex;flex-direction:column;gap:.1rem;border-bottom:1px solid rgba(30,36,25,.1);padding-bottom:.6rem}
.record li:last-child{border-bottom:0;padding-bottom:0}
.record b{font-family:var(--display);font-size:1.08rem;color:var(--blue-deep,#124279)}
.record span{font-size:.92rem;color:var(--ink-2,#3d4338)}
@media (max-width:600px){.record{grid-template-columns:1fr}.record img{max-width:300px;justify-self:center}}
.arrive .byline span{line-height:1.5}
/* the join step must never sit over the page while it is closed (Tony: "the links do not work") */
.gate[hidden]{display:none!important}
.gate:not(.on){pointer-events:none}
.peaks-card{text-decoration:none;color:inherit;background:linear-gradient(120deg,#163a2a,#1d4a36);border-color:transparent}.peaks-card small{color:#E6C46A}.peaks-card h3{color:#F3EFE5}.peaks-card p{color:rgba(238,242,236,.86)}.peaks-card .go{font-weight:700;color:#E6C46A}
.mag-plate img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media (max-width:600px){.mag-plate{height:210px}.mag-plate .cap{font-size:.72rem;left:.6rem;right:.6rem}}
@media (max-width:980px){.thumbbar span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;overflow-wrap:anywhere}}
/* the whole photograph of Masan, the boy and the dog: the frame takes the photograph's own shape instead of cropping it tall (Tony: "you cut me out of the pic with masan") */
@media (min-width:981px){
  .lamplight .photo{min-height:0;aspect-ratio:4/3;align-self:start;position:sticky;top:calc(var(--bar-h) + 24px)}
}
.lamplight .photo img{inset:-6% 0;height:112%;object-position:50% 55%}
/* invited by: the hosts, in other people's names, right under the first screen */
.invited{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.45rem .9rem;padding:14px var(--gutter);background:#0F1A20;color:rgba(230,236,234,.86);font-size:.9rem;text-align:center}
.invited b{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:#E6C46A;margin-right:.2rem}
.invited i{font-style:normal;opacity:.45}
.work-outcome{max-width:46rem;margin:.6rem 0 0;font-size:clamp(1.02rem,.96rem + .3vw,1.15rem);color:var(--ink)}
/* ---------- Ancestral Peaks, the practice: a full band right after the Stone Breath ---------- */
.peaks-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:min(88vh,820px);background:#100B0D;color:#F3EFE5}
.peaks-band .pb-media{position:relative;overflow:hidden}
.peaks-band .pb-media .ap-loop{position:absolute;inset:0}
.peaks-band .pb-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,11,13,0) 55%,#100B0D 100%)}
.peaks-band .pb-text{display:flex;flex-direction:column;justify-content:center;gap:.8rem;padding:clamp(32px,5vw,80px) var(--gutter)}
.peaks-band .label{color:#E6C46A}
.peaks-band h2{color:#F3EFE5;font-size:clamp(2rem,1.3rem + 2.4vw,3.4rem);max-width:18ch}
.peaks-band p{color:rgba(238,242,236,.86);max-width:36rem;font-size:clamp(1.02rem,.96rem + .3vw,1.16rem)}
.peaks-band .btn.ghost{color:#F3EFE5;border-color:rgba(243,239,229,.45)}
.peaks-band .fine{font-size:.88rem;opacity:.75}
.ta-bar .ap-nav a.peaks-nav{color:#E6C46A;opacity:1}
@media (max-width:980px){.peaks-band{grid-template-columns:1fr}.peaks-band .pb-media{min-height:56vw}.peaks-band .pb-media::after{background:linear-gradient(180deg,rgba(16,11,13,0) 60%,#100B0D)}}

/* 11/8 the playlist waits for a press: one picture and a play button, YouTube loads on tap */
.hear-card .yt-go{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;cursor:pointer;background:#1b2420;display:block}
.hear-card .yt-go img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.82)}
.hear-card .yt-go .yt-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(20,26,22,.62);border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;transition:transform .25s ease,background .25s ease}
.hear-card .yt-go .yt-play svg{width:28px;height:28px;fill:#fff;margin-left:3px}
.hear-card .yt-go:hover .yt-play,.hear-card .yt-go:focus-visible .yt-play{transform:scale(1.06);background:rgba(20,26,22,.78)}
.hear-card .yt-go .yt-label{position:absolute;left:14px;bottom:12px;color:#fff;font-size:.9rem;letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.6)}