/* Tongaw editorial page. All styles stay within this secondary experience. */

#chapter[data-chapter=tongaw],#chapter[data-chapter=tongaw] .chapter-footer{background:#090909}
#chapter[data-chapter=tongaw] .chapter-top{background:#090909e8}
#chapter .tongaw-story{--vision:0;overflow:clip;background:#090909}
#chapter .tongaw-story p{font:300 clamp(19px,1.7vw,27px)/1.7 Manrope,sans-serif;letter-spacing:-.015em;color:#d6d5cd;margin:0 0 28px}
#chapter .tongaw-story .story-label{font:400 13px/1.6 'DM Sans',sans-serif;letter-spacing:.14em;color:#bcbcb6;text-transform:uppercase;margin:0 0 30px}
#chapter .story-progress{position:sticky;top:80px;height:1px;z-index:11;margin-bottom:-1px;background:#ffffff10}
#chapter .story-progress span{display:block;height:100%;background:#d5d0c2;transform-origin:left;transform:scaleX(0)}
#chapter .story-section{position:relative}
#chapter .story-opening{min-height:calc(100svh - 80px);padding:72px 8%;display:flex;align-items:center;isolation:isolate}
#chapter .story-portrait{position:absolute;inset:0;margin:0;z-index:-1;overflow:hidden;animation:story-photo-enter 1.8s .1s both}
#chapter .story-portrait img{width:100%;height:100%;object-fit:contain;object-position:right center;filter:grayscale(1);mask-image:linear-gradient(90deg,transparent 7%,#000 52%),linear-gradient(#000 72%,transparent);mask-composite:intersect;will-change:transform}
#chapter .story-opening-copy{width:48%;max-width:630px}
#chapter .story-opening h1{font:300 clamp(72px,8.2vw,132px)/1.12 Manrope,sans-serif;letter-spacing:-.065em;margin:0 0 32px;overflow:hidden}
#chapter .story-opening h1>span{display:block;animation:story-title-enter 1.3s .28s cubic-bezier(.16,.8,.25,1) both}
#chapter .story-opening-copy>.story-label{animation:story-copy-enter .9s .15s both;margin-bottom:20px}
#chapter .story-opening .story-lead{font-size:clamp(18px,1.45vw,23px);line-height:1.8;max-width:440px;margin:0;animation:story-copy-enter 1.2s .65s both}
#chapter .story-scroll{position:absolute;bottom:28px;left:8%;font-size:12px;letter-spacing:.08em;color:#aaa9a4;display:flex;align-items:center;gap:25px;animation:story-copy-enter 1s 1.05s both}
#chapter .story-scroll span{width:55px;height:1px;background:#aaa9a4;transform-origin:left;animation:story-rule-enter 1.5s 1s both}
#chapter .story-vision,#chapter .story-approach,#chapter .story-roots,#chapter .story-ending{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:0 9%;padding:85px 8%;min-height:65svh;background:#0c0d0c;align-items:center;text-align:left}
#chapter .story-section:not(.story-opening)::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:#ffffff14}
#chapter .story-sticky,#chapter .story-approach-heading,#chapter .story-roots-heading{align-self:center}
#chapter .story-global,#chapter .story-root-word{font:300 clamp(38px,4.5vw,68px)/1.2 Manrope,sans-serif;letter-spacing:-.045em}
#chapter .story-global{position:relative;color:#73756e;white-space:nowrap}
#chapter .story-global>span{position:absolute;inset:0;color:#f3f1ea;clip-path:inset(0 calc((1 - var(--vision))*100%) 0 0)}
#chapter .story-root-word{font-style:normal;color:#d6d5cd}
#chapter .story-vision-copy,#chapter .story-approach-copy,#chapter .story-roots-copy,#chapter .story-ending-copy{padding:0;margin:0;max-width:620px;align-self:center}
#chapter .story-vision-copy .story-statement{font-size:clamp(24px,2.4vw,37px);line-height:1.4;color:#f3f1ea;margin-bottom:32px}
#chapter .story-dimensions{display:flex;flex-direction:column;gap:8px;font:300 clamp(27px,2.8vw,42px)/1.25 Manrope,sans-serif;letter-spacing:-.03em}
#chapter .story-dimensions span{color:#777a73;translate:0 7px;transition:color .65s,translate .8s}
#chapter .story-dimensions .dimension-visible{color:#f3f1ea;translate:0 0}
#chapter .story-approach-copy p+p,#chapter .story-roots-copy p+p{margin-top:32px}
#chapter .story-ending{min-height:0}
#chapter .story-finale{grid-column:1/-1;font:300 clamp(35px,4.5vw,70px)/1.3 Manrope,sans-serif;letter-spacing:-.045em;color:#f3f1ea;margin:85px 0 48px;max-width:1100px}
#chapter .story-finale em{font-style:normal;font-weight:300;color:#bdbcae}
#chapter .story-next{grid-column:1/-1;display:flex;justify-content:flex-start;gap:40px}
#chapter .story-next button{font-size:14px;padding:12px 0;border-bottom:1px solid #ffffff50;transition:border-color .3s,translate .3s}
#chapter .story-next button:hover{border-color:#fff;translate:0 -2px}
#chapter .story-reveal{opacity:.15;translate:0 24px;transition:opacity 1s var(--reveal-delay,0s),translate 1s var(--reveal-delay,0s)}
#chapter .story-reveal.story-visible{opacity:1;translate:0 0}
@keyframes story-photo-enter{from{opacity:0}to{opacity:1}}
@keyframes story-copy-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes story-title-enter{from{transform:translateY(110%)}to{transform:none}}
@keyframes story-rule-enter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:700px){
 #chapter .story-opening{min-height:calc(100svh - 70px);padding:340px 7% 80px;align-items:center}
 #chapter .story-portrait{height:440px}
 #chapter .story-portrait img{position:absolute;right:0;top:0;width:155%;max-width:none;height:100%;object-fit:contain;object-position:right top;mask-image:linear-gradient(#000 45%,transparent 100%)}
 #chapter .story-opening-copy{width:100%;align-self:center}
 #chapter .story-opening h1{font-size:clamp(60px,17vw,88px);margin-bottom:22px}
 #chapter .story-opening .story-lead{font-size:18px;line-height:1.7;max-width:100%}
 #chapter .story-scroll{left:7%;bottom:24px}
 #chapter .story-vision,#chapter .story-approach,#chapter .story-roots,#chapter .story-ending{display:block;min-height:0;padding:65px 7%}
 #chapter .story-sticky,#chapter .story-approach-heading,#chapter .story-roots-heading{margin-bottom:32px}
 #chapter .tongaw-story .story-label{font-size:12px;margin-bottom:20px}
 #chapter .story-global,#chapter .story-root-word{font-size:46px}
 #chapter .story-dimensions{flex-direction:row;flex-wrap:wrap;gap:8px 17px;font-size:27px}
 #chapter .story-vision-copy .story-statement{font-size:28px;margin-bottom:28px}
 #chapter .story-finale{margin:55px 0 34px;font-size:clamp(32px,8vw,44px)}
 #chapter .story-next{gap:24px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
 #chapter .story-reveal{opacity:1;translate:none;transition:none}
 #chapter .story-portrait,#chapter .story-opening-copy>*,#chapter .story-opening h1>span,#chapter .story-scroll,#chapter .story-scroll span{animation:none!important}
 #chapter .story-portrait img{transform:none!important}
 #chapter .story-dimensions span{color:#f3f1ea;translate:none;transition:none}
 #chapter .story-global>span{clip-path:none}
}
/* A single reading axis; chapter labels stay quiet in the margin. */
#chapter .tongaw-story p{font-weight:400;font-size:clamp(18px,1.5vw,22px);line-height:1.75;letter-spacing:0;margin-bottom:24px}
#chapter .story-opening-copy{max-width:510px}
#chapter .story-opening h1{font-weight:400;font-size:clamp(68px,7vw,108px);line-height:1.25;letter-spacing:-.045em;overflow:visible;margin-bottom:22px}
#chapter .story-opening h1>span{animation-name:story-copy-enter}
#chapter .story-opening .story-lead{font-size:clamp(18px,1.45vw,21px);max-width:430px}
#chapter .story-vision,#chapter .story-approach,#chapter .story-roots,#chapter .story-ending{grid-template-columns:180px minmax(0,680px);justify-content:center;gap:0 70px;min-height:0;padding:110px max(7%,calc((100% - 1080px)/2));align-items:start}
#chapter .story-section:not(.story-opening)::before{left:max(7%,calc((100% - 1080px)/2));right:max(7%,calc((100% - 1080px)/2))}
#chapter .tongaw-story .story-section>h2.story-label{font-size:11px;letter-spacing:.12em;margin:12px 0 0;line-height:1.8;position:sticky;top:125px}
#chapter .story-vision-copy,#chapter .story-approach-copy,#chapter .story-roots-copy,#chapter .story-ending-copy{max-width:680px;width:100%;align-self:start}
#chapter .story-global,#chapter .story-root-word{display:block;font-size:clamp(40px,4vw,58px);font-weight:400;line-height:1.3;letter-spacing:-.035em;margin-bottom:35px;color:#efeee7}
#chapter .story-vision-copy .story-statement{font-size:clamp(25px,2.4vw,34px);font-weight:400;line-height:1.5;letter-spacing:-.02em;max-width:600px;margin-bottom:26px;text-wrap:pretty}
#chapter .story-dimensions{flex-direction:row;flex-wrap:wrap;gap:10px 22px;font-size:clamp(23px,2.2vw,30px);font-weight:400;line-height:1.5;letter-spacing:-.02em;margin-bottom:34px}
#chapter .story-dimensions span{position:relative}
#chapter .story-dimensions span:not(:last-child)::after{content:'·';position:absolute;right:-15px;color:#6b6d65;font-size:20px}
#chapter .story-approach-copy p+p,#chapter .story-roots-copy p+p{margin-top:24px}
#chapter .tongaw-story p.story-finale{font-size:clamp(32px,3.2vw,46px);font-weight:400;line-height:1.4;letter-spacing:-.03em;color:#f3f1ea;margin:65px 0 32px;text-wrap:balance}
#chapter .story-finale em{font-weight:400;font-style:normal;color:#bdbcae}
#chapter .story-next{gap:30px;flex-wrap:wrap}
#chapter .story-next button{font-size:13px;min-height:44px}
#chapter .story-reveal{translate:0 16px}
@media(max-width:900px){
 #chapter .story-vision,#chapter .story-approach,#chapter .story-roots,#chapter .story-ending{grid-template-columns:135px minmax(0,1fr);gap:0 35px;padding:85px 7%}
}
@media(max-width:700px){
 #chapter .story-vision,#chapter .story-approach,#chapter .story-roots,#chapter .story-ending{display:block;padding:65px 7%}
 #chapter .tongaw-story .story-section>h2.story-label{position:static;margin:0 0 28px;font-size:11px}
 #chapter .story-opening h1{font-size:64px;line-height:1.25;margin-bottom:18px}
 #chapter .story-global,#chapter .story-root-word{font-size:40px;margin-bottom:26px}
 #chapter .story-dimensions{font-size:24px;gap:9px 22px}
 #chapter .story-vision-copy .story-statement{font-size:26px}
 #chapter .tongaw-story p.story-finale{font-size:32px;margin:45px 0 25px}
 #chapter .story-next{gap:12px 25px}
}
/* Shared editorial hierarchy: rubric, title, subtitle, paragraph. */
#chapter .tongaw-story .story-title,
#chapter .tongaw-story .story-opening h1{font:400 clamp(36px,3.8vw,52px)/1.22 Manrope,sans-serif;letter-spacing:-.035em;color:#f3f1ea;margin:0 0 24px;text-wrap:balance;overflow:visible;max-width:680px}
#chapter .tongaw-story p.story-subtitle{font:400 clamp(21px,2vw,27px)/1.5 Manrope,sans-serif;letter-spacing:-.015em;color:#efeee7;margin:0 0 24px;text-wrap:pretty;max-width:640px}
#chapter .tongaw-story p,
#chapter .tongaw-story .story-opening p.story-lead{font-size:clamp(17px,1.45vw,20px);line-height:1.8;letter-spacing:0;font-weight:400;color:#bcbdb7}
#chapter .tongaw-story .story-section>.story-label{font:400 11px/1.8 'DM Sans',sans-serif;letter-spacing:.12em;margin:10px 0 0;position:sticky;top:125px}
#chapter .story-next{margin-top:30px}
#chapter .dimension-word{color:#8b8d86;transition:color .8s}
#chapter .dimension-word.dimension-visible{color:#efeee7}
@media(max-width:700px){
 #chapter .tongaw-story .story-title,#chapter .tongaw-story .story-opening h1{font-size:36px;margin-bottom:20px;line-height:1.25}
 #chapter .tongaw-story p.story-subtitle{font-size:22px;margin-bottom:20px}
 #chapter .tongaw-story .story-section>.story-label{position:static;margin:0 0 28px}
}
@media(prefers-reduced-motion:reduce){#chapter .dimension-word{color:#efeee7;transition:none}}
/* The same restrained gestures as the homepage. */
#chapter .story-title-word{display:inline-block;white-space:nowrap}
#chapter .story-opening h1>.story-title-word{display:inline-block;animation:none}
#chapter .story-letter{display:inline-block;transition:transform .5s cubic-bezier(.2,.7,.2,1),color .4s;transition-delay:calc(var(--letter)*.025s)}
#chapter .story-section:not(.story-opening){isolation:isolate}
#chapter .story-section:not(.story-opening)::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 450px 260px at var(--hover-x,50%) var(--hover-y,50%),#ffffff08,transparent);opacity:0;transition:opacity .5s}
#chapter .story-subtitle{transition:transform .4s cubic-bezier(.2,.7,.2,1),color .4s}
#chapter .story-next button{position:relative;isolation:isolate;transition:transform .4s,color .4s;border-bottom-color:#ffffff35}
#chapter .story-next button::after{content:'';position:absolute;bottom:-1px;left:0;width:0;height:1px;background:#f3f1ea;transition:width .35s}
#chapter .story-next button:focus-visible::after{width:100%}
#chapter .story-next button:focus-visible{transform:translateX(6px)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 #chapter .story-title:hover .story-letter,#chapter .story-opening h1:hover .story-letter{transform:translateY(-3px);color:#c2bfb5}
 #chapter .story-title:hover .story-letter:nth-child(even),#chapter .story-opening h1:hover .story-letter:nth-child(even){transform:translateY(2px)}
 #chapter .story-section:hover::after{opacity:1}
 #chapter .story-section:hover .story-subtitle{transform:translateX(6px);color:#fff}
 #chapter .story-next button:hover{transform:translateX(6px);translate:none}
 #chapter .story-next button:hover::after{width:100%}
 #chapter .dimension-word:hover{color:#fff;text-decoration:underline;text-decoration-color:#ffffff55;text-underline-offset:5px}
}
@media(prefers-reduced-motion:reduce){#chapter .story-letter,#chapter .story-subtitle,#chapter .story-next button{transform:none!important}#chapter .story-section::after{display:none}}
/* Keep the closing heading on one line in the desktop reading column. */
@media(min-width:1100px){
 #chapter .tongaw-story #ending-title{font-size:clamp(32px,3vw,42px);text-wrap:nowrap}
}