/* A grain, a bowl, a daily habit. Motion belongs to the story. */
.we-opening[hidden]{display:none}
.opening-pending{overflow:hidden;scroll-behavior:auto!important}
.opening-pending .we-opening[hidden],.we-opening:not([hidden]){display:grid}
.we-opening{position:fixed;inset:0;z-index:120;place-items:center;background:transparent;color:var(--paper);isolation:isolate;overflow:clip}
.we-opening::before,.we-opening::after{content:'';position:absolute;left:0;right:0;height:51%;background:var(--ink);z-index:-1;transition:transform .85s cubic-bezier(.76,0,.24,1)}
.we-opening::before{top:0}.we-opening::after{bottom:0}
.opening-scene{display:flex;flex-direction:column;align-items:center;width:min(90%,760px);text-align:center;transition:opacity .25s,scale .6s var(--story-ease)}
.opening-eyebrow{font-size:11px;letter-spacing:.2em;animation:opening-copy .8s .1s both}
.opening-emblem{width:360px;max-width:80%;height:225px;margin:12px 0 8px}
.opening-emblem svg{width:100%;height:100%;overflow:visible;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.opening-seed{transform-origin:210px 130px;animation:opening-grain 1.8s .15s both}
.opening-seed path{stroke-dasharray:370;stroke-dashoffset:370;animation:opening-draw .9s .1s forwards}
.opening-land path{stroke-dasharray:450;stroke-dashoffset:450;animation:opening-draw 1.1s .25s forwards}
.opening-land{opacity:.4}
.opening-bowl{stroke:var(--paper);stroke-dasharray:520;stroke-dashoffset:520;animation:opening-draw 1.2s .85s forwards}
.opening-message{font:700 clamp(27px,3.4vw,48px)/1.85 var(--serif);letter-spacing:.025em}
.opening-message>span,.opening-message>strong{display:block;font-weight:700;animation:opening-copy 1s .45s var(--story-ease) both}
.opening-message>strong{animation-delay:.62s}
.opening-wordmark{width:145px;height:65px;margin-top:30px;color:var(--paper);overflow:visible;font:900 58px/1.12 'M PLUS Rounded 1c',sans-serif;letter-spacing:-.055em;animation:opening-copy .85s .9s both}
.opening-rule{height:1px;width:150px;background:#fffbed33;margin-top:27px;overflow:hidden}
.opening-rule i{display:block;height:1px;width:100%;background:var(--yellow);transform-origin:left;animation:opening-progress 3s linear both}
.opening-skip{position:absolute;right:5%;bottom:max(35px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:22px;min-height:44px;border:0;border-bottom:1px solid #fffbed66;background:none;color:inherit;font-size:11px;letter-spacing:.12em;padding:10px 0}
.opening-skip span{font-size:22px}
.opening-skip:focus-visible{outline:2px solid var(--yellow);outline-offset:7px}
.we-opening.is-exiting::before{transform:translateY(-103%)}
.we-opening.is-exiting::after{transform:translateY(103%)}
.we-opening.is-exiting .opening-scene,.we-opening.is-exiting .opening-skip{opacity:0;scale:.96;pointer-events:none}
.opening-pending .we-header{opacity:0;pointer-events:none}
.opening-pending .material-hero .hero-title__preface,.opening-pending .material-hero .hero-title__main{animation:none!important;opacity:0}
.opening-replay{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;margin-top:20px;padding:8px 0;background:none;border:0;color:var(--ink);font-size:11px;text-align:left}
.opening-replay span{font-size:23px}.opening-replay+.we-menu__home{margin-top:4px}
.still .opening-replay,html:not(.js) .opening-replay{display:none}
@keyframes opening-draw{to{stroke-dashoffset:0}}
@keyframes opening-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes opening-copy{from{opacity:0;translate:0 20px;clip-path:inset(100% 0 0)}to{opacity:1;translate:0 0;clip-path:inset(0)}}
@keyframes opening-grain{0%,45%{opacity:1;transform:translateY(-18px) scale(1)}85%,100%{opacity:0;transform:translateY(43px) scale(.18)}}

/* Seven hits the page once, then turns with the reader's scroll. */
.fiber-stage{isolation:isolate;overflow:clip;margin-inline:-20px;padding-inline:20px}
.fiber-impact{position:absolute;left:-10%;top:0;width:120%;height:100%;z-index:-1;overflow:visible;rotate:var(--impact-turn,0deg);opacity:.35;pointer-events:none}
.impact-rays{stroke:var(--paper);stroke-width:8;stroke-linecap:butt;transform-origin:center}
.impact-rings{stroke:var(--ink);stroke-width:1;opacity:.3;stroke-dasharray:2 11}
.nutrition .fiber-display{overflow:visible;isolation:isolate}
.fiber-display strong{position:relative;z-index:2;rotate:0deg;transform:rotate(var(--seven-turn,-5deg)) scale(var(--seven-scale,1));opacity:1;text-shadow:var(--seven-shadow-x,9px) 12px 0 #fffbed99}
.fiber-display__label{z-index:4}
.fiber-display small,.fiber-display .about{position:relative;z-index:3}
.seven-trails{position:absolute;inset:60px 0 0;z-index:0;pointer-events:none}
.seven-trails i{position:absolute;left:25%;top:0;font:900 clamp(300px,33vw,480px)/.85 var(--sans);letter-spacing:-.105em;font-style:normal;color:transparent;-webkit-text-stroke:1px var(--ink);opacity:.13;transform:translate(var(--echo-x,-25px),var(--echo-y,-15px)) rotate(-9deg)}
.seven-trails i:last-child{opacity:.08;translate:-22px -20px;rotate:-7deg}
.fiber-caption{position:relative;z-index:4;background:#edcd51;width:max-content;max-width:100%;margin-inline:auto;padding:10px 13px;margin-top:25px}
.fiber-orbit{font-size:15px;right:8px;bottom:15px;letter-spacing:.1em;rotate:4deg}
.js:not(.still) .seven-is-live .fiber-display strong{animation:seven-slam 1.15s cubic-bezier(.2,.7,.15,1) backwards}
.js:not(.still) .seven-is-live .impact-rays{animation:seven-rays 1.3s var(--story-ease) backwards}
.js:not(.still) .seven-is-live .seven-trails{animation:seven-echo 1.1s .07s var(--story-ease) backwards}
@keyframes seven-slam{0%{opacity:0;transform:translate(80px,-90px) rotate(-28deg) scale(2.4)}36%{opacity:1;transform:translate(-8px,12px) rotate(4deg) scale(.84)}58%{transform:translate(3px,-8px) rotate(-8deg) scale(1.13)}78%{transform:translate(-2px,2px) rotate(-3deg) scale(.98)}100%{transform:rotate(var(--seven-turn,-5deg)) scale(var(--seven-scale,1))}}
@keyframes seven-rays{0%,22%{opacity:0;transform:scale(.4) rotate(-35deg)}48%{opacity:1;transform:scale(1.18) rotate(7deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes seven-echo{from{opacity:0;scale:1.5}to{opacity:1;scale:1}}

/* The frame moves, while the writing has its own steady reading surface. */
.story-cut__grid,.city__grid{isolation:isolate}
.story-cut .panel,.city__grid>.panel{rotate:var(--comic-rotate,-2deg);translate:var(--comic-x,0px) var(--comic-y,0px);transition:box-shadow .4s}
.story-cut .art>img,.city__grid .art>img{transform:translate(var(--comic-pan-x,0px),var(--comic-pan-y,0px)) scale(var(--comic-zoom,1.08));transform-origin:25% 25%;will-change:transform}
.city__grid .art>img{transform-origin:center}
.story-beat,.city__facts article{display:flex;align-items:center;min-height:62svh;padding:35px 0 60px;border:0}
.story-beat:last-child,.city__facts article:last-child{min-height:55svh;padding-bottom:35px}
.narrative-card{width:100%;padding:30px 28px 35px;border-left:2px solid #143d2b33;background:transparent;transition:border-color .4s,background .4s,box-shadow .4s;position:relative}
.narrative-card::before{content:'';position:absolute;left:-2px;top:0;width:4px;height:100%;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--story-ease)}
.is-current>.narrative-card{background:#eee9d9;border-color:var(--ink);box-shadow:8px 10px 0 #143d2b0b}
.is-current>.narrative-card::before{transform:scaleY(1)}
.story-beat h2,.story-beat h3{font-size:clamp(27px,2.7vw,38px);line-height:1.8}
.story-beat p{font-size:15px;line-height:2.25;max-width:30em}
.narrative-card .mini-label{font-size:10px;rotate:0deg;transform:none;line-height:1.8;margin-bottom:25px}
.city__facts .narrative-card{border-color:#fffbed44}
.city__facts .narrative-card::before{background:var(--yellow)}
.city__facts .is-current>.narrative-card{background:#214d39;border-color:var(--yellow);box-shadow:8px 10px 0 #0001}
.city__facts h3{font-size:21px;line-height:1.9}
.city__facts p{font-size:15px;line-height:2.25}
.story-cut .panel figcaption,.city__grid>.panel figcaption{display:flex;flex-direction:column}
.story-cut .panel-caption,.city__grid .panel-caption{position:static;order:2;display:block;font-size:9px;line-height:1.65;padding:4px 9px}
.story-cut .sfx{bottom:100px}
.panel-progress{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;position:relative;order:1;background:var(--paper);color:var(--ink);padding:13px 15px 11px;border-top:2px solid var(--ink);line-height:1.6}
.panel-count{font:500 10px/1.6 var(--sans);white-space:nowrap;align-self:center}
.panel-count b{font-size:19px;font-weight:900;letter-spacing:-.05em;margin-right:5px}
.panel-topic{font-size:10px;font-weight:700;align-self:center}
.panel-progress__line{grid-column:1/-1;height:2px;background:#143d2b22;overflow:hidden}
.panel-progress__line i{display:block;width:100%;height:100%;background:var(--ink);transform:scaleX(var(--scene-step,.333));transform-origin:left;transition:transform .65s var(--story-ease)}
.bubble{overflow:visible}
.bubble-copy{display:block}
.bubble-copy>span{display:block;white-space:nowrap}
.bubble.is-changing::before{content:'';position:absolute;inset:-11px;border:2px solid var(--yellow);border-radius:50%;pointer-events:none;animation:bubble-pulse .6s var(--story-ease) both}
.story-cut .bubble,.city__grid .bubble{min-width:180px;z-index:4}
@keyframes bubble-pulse{from{opacity:1;scale:.85}to{opacity:0;scale:1.18}}

/* Native, interruptible accordion with a clear question/answer rhythm. */
.faq-grid>div:first-child{isolation:isolate}
.faq-grid>div:first-child::after{content:'?';position:absolute;right:0;bottom:-170px;font:900 270px/1 var(--sans);color:transparent;-webkit-text-stroke:1px #143d2b33;z-index:-1;rotate:12deg;pointer-events:none}
.qa details{position:relative;padding:0;border-bottom:1px solid #143d2b66;transition:background .35s,box-shadow .35s}
.qa details:first-child{border-top:1px solid #143d2b66}
.qa summary{display:grid;grid-template-columns:34px 1fr 24px;align-items:center;gap:18px;padding:25px 0;cursor:pointer;list-style:none;min-height:82px}
.qa summary::marker,.qa summary::-webkit-details-marker{display:none;content:''}
.qa-number{font:700 10px/1.5 var(--sans);letter-spacing:.05em}
.qa-question{font-size:15px;line-height:1.95}
.qa-toggle{position:relative;width:24px;height:24px;display:block}
.qa-toggle i{position:absolute;left:3px;right:3px;top:11px;height:2px;background:var(--ink);transition:rotate .4s var(--story-ease),scale .4s var(--story-ease)}
.qa-toggle i:last-child{rotate:90deg}
.qa details[open] .qa-toggle i:first-child{rotate:180deg}
.qa details[open] .qa-toggle i:last-child{rotate:180deg;scale:0 1}
.qa details[open]{background:#fffbed88;box-shadow:15px 0 0 #fffbed88,-15px 0 0 #fffbed88}
.qa-answer{overflow:clip}
.qa-answer__inner{padding:0 40px 29px 52px}
.qa details .qa-answer p{padding:0;font-size:14px;line-height:2.3;margin:0}
.qa details.is-closing .qa-toggle i:last-child{rotate:90deg;scale:1 1}
.qa details.is-closing .qa-toggle i:first-child{rotate:0deg}
.qa details::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--story-ease)}
.qa details[open]::after{transform:scaleX(1)}

@media(max-width:1050px) and (min-width:761px){
 .narrative-card{padding:26px 21px 30px}.story-beat h2,.story-beat h3{font-size:28px}.story-beat p,.city__facts p{font-size:14px}.story-cut .bubble,.city__grid .bubble{min-width:145px;font-size:14px}.panel-topic{font-size:9px}.seven-trails i{font-size:310px}
}
@media(max-width:760px){
 .opening-emblem{width:285px;height:175px;margin:7px 0 15px}.opening-message{font-size:29px;line-height:1.85}.opening-eyebrow{font-size:9px}.opening-wordmark{width:125px;height:56px;margin-top:28px}.opening-rule{width:120px;margin-top:25px}.opening-skip{right:7%;bottom:max(28px,env(safe-area-inset-bottom));font-size:10px}.opening-replay{margin-top:10px;min-height:44px;font-size:10px}
 .fiber-stage{margin-inline:-10px;padding-inline:10px;overflow:visible}.fiber-impact{left:-2%;top:-15px;width:104%;height:110%}.impact-rays{stroke-width:5px}.impact-rings{opacity:.2}.fiber-display strong{text-shadow:6px 7px 0 #fffbed99}.seven-trails{inset:34px 0 0}.seven-trails i{font-size:200px;left:30%;-webkit-text-stroke-width:1px}.seven-trails i:last-child{translate:-12px -10px}.fiber-caption{font-size:10px;margin-top:15px;padding:5px 9px}.fiber-orbit{font-size:10px;right:0;bottom:13px}
 .story-cut .panel,.city__grid>.panel{top:100px;margin-top:0;z-index:4;rotate:var(--comic-rotate,-1.5deg);translate:0 var(--comic-y,0px)}
 .story-cut .panel::before,.city__grid>.panel::before{content:'';position:absolute;left:-40px;right:-40px;bottom:calc(100% + 2px);height:140px;background:var(--paper);z-index:-1;pointer-events:none}
 .story-cut .panel::after,.city__grid>.panel::after{content:'';position:absolute;left:-40px;right:-40px;top:calc(100% + 2px);height:18px;background:var(--paper);z-index:-1;pointer-events:none}
 .city__grid>.panel::before,.city__grid>.panel::after{background:var(--ink)}
 .story-cut .art,.city__grid .art{aspect-ratio:2.05}
 .story-cut__text,.city__facts{padding-top:38px}
 .story-beat,.city__facts article{padding:32px 0 55px;min-height:63svh}
 .story-beat:last-child,.city__facts article:last-child{padding-bottom:25px;min-height:58svh}
 .narrative-card{padding:25px 21px 29px}
 .story-beat h2,.story-beat h3{font-size:26px;line-height:1.85}
 .story-beat p,.city__facts p{font-size:14px;line-height:2.25;margin-top:22px}
 .narrative-card .mini-label{font-size:10px;margin-bottom:22px}
 .city__facts h3{font-size:19px;line-height:1.9}
 .city__facts .no{font-size:11px;margin-bottom:18px}
 .panel-progress{padding:8px 10px;gap:6px 12px;min-height:46px}.panel-count{font-size:9px}.panel-count b{font-size:16px}.panel-topic{font-size:9px}.panel-progress__line{height:2px}
 .story-cut .panel-caption,.city__grid .panel-caption{font-size:8px;padding:3px 7px}
 .story-cut .sfx{bottom:85px;font-size:34px}.story-cut .bubble,.city__grid .bubble{font-size:13px;line-height:1.7;min-width:145px;padding:11px 15px;top:2%;left:3%}.city__grid .bubble{left:auto;right:2%}
 .faq-grid>div:first-child{position:relative}
 .faq-grid>div:first-child::after{font-size:140px;bottom:-10px;right:0;opacity:.6}
 .qa summary{grid-template-columns:28px 1fr 22px;gap:12px;padding-block:22px;min-height:80px}.qa-question{font-size:14px;line-height:1.9}.qa-number{font-size:9px}.qa-answer__inner{padding:0 12px 26px 40px}.qa details .qa-answer p{font-size:13px;line-height:2.3}.qa details[open]{box-shadow:10px 0 0 #fffbed88,-10px 0 0 #fffbed88}
}
@media(max-width:760px) and (max-height:680px){
 .story-cut .panel,.city__grid>.panel{position:relative;top:auto}.story-cut .panel::before,.city__grid>.panel::before,.story-cut .panel::after,.city__grid>.panel::after{display:none}.story-beat,.city__facts article{min-height:0;padding-block:25px}.opening-emblem{height:125px}.opening-message{font-size:25px}.opening-wordmark{margin-top:20px}
}
.still .fiber-display strong{animation:none;transform:rotate(-4deg);text-shadow:7px 9px 0 #fffbed99}
.still .fiber-impact{rotate:0deg}.still .seven-trails{display:none}
.still .story-cut .panel,.still .city__grid>.panel{translate:0 0;rotate:-1deg}
.still .story-cut .art>img,.still .city__grid .art>img{transform:scale(1.06)}
.still .panel-progress,html:not(.js) .panel-progress{display:none}
.still .story-cut .panel::before,.still .city__grid>.panel::before,html:not(.js) .story-cut .panel::before,html:not(.js) .city__grid>.panel::before,.still .story-cut .panel::after,.still .city__grid>.panel::after,html:not(.js) .story-cut .panel::after,html:not(.js) .city__grid>.panel::after{display:none}
.still .bubble.is-changing::before{display:none}
@media(prefers-reduced-motion:reduce){.we-opening{display:none!important}.opening-pending{overflow:auto}.fiber-display strong{transform:rotate(-4deg)!important}.fiber-impact{rotate:0deg!important}}