/* ROKI visual system: rendered form and conceptual programme connections. */
.film-section{background:var(--paper);padding-block:var(--space-20);border-bottom:1px solid var(--line)}
.film-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-16);align-items:end;margin-bottom:var(--space-10)}
.film-intro .eyebrow{margin-bottom:var(--space-5)}
.film-intro h2{font-size:clamp(2.2rem,1rem + 2.5vw,3.65rem);line-height:1.1}
.film-intro h2 span{font-family:var(--font-display);font-style:italic;color:var(--forest)}
.film-intro>div:last-child>p{max-width:47ch;color:var(--muted)}
.film-intro .text-link{margin-top:var(--space-5)}
.film-frame{margin:0}
.film-screen{position:relative}
#film-start{position:absolute;right:var(--space-8);bottom:76px;display:flex;align-items:center;gap:var(--space-5);background:var(--paper);color:var(--forest);padding:var(--space-5) var(--space-6);min-height:68px;font-size:var(--text-sm);border:1px solid rgb(255 255 255 / 55%);transition:background .2s}
#film-start[hidden]{display:none}
#film-start:hover{background:var(--lime)}
#film-start svg{width:24px;height:24px;flex-shrink:0}
.film-duration{font-variant-numeric:tabular-nums;font-size:var(--text-xs);padding-left:var(--space-5);border-left:1px solid var(--line)}
.film-frame video{display:block;width:100%;aspect-ratio:16/9;background:#0b2a23;object-fit:contain;scroll-margin-top:120px}
.film-frame figcaption{display:flex;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-4);border-bottom:1px solid var(--line);font-size:var(--text-xs)}
.film-frame figcaption>span{letter-spacing:.08em;color:var(--muted)}
.film-frame figcaption>a{text-decoration:underline;text-underline-offset:5px}
.film-note{font-size:var(--text-xs);color:var(--muted);max-width:90ch;margin-top:var(--space-4)}
#film-error{font-size:var(--text-sm);margin-top:var(--space-4);color:var(--forest)}
#sculpture-home{position:absolute;inset:0;overflow:hidden;background:transparent}
#sculpture-home canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .6s}
.hero.webgl-ready #sculpture-home canvas{opacity:1}
.hero.webgl-ready .hero-image>img{opacity:0}
.hero-image>img{transition:opacity .6s}
.hero.webgl-ready::before{background:linear-gradient(90deg,rgb(6 28 21 / 45%),transparent 68%)}
.sculpture-launch{position:absolute;right:var(--gutter);bottom:126px;display:flex;align-items:center;gap:var(--space-6);z-index:2}
.sculpture-caption{font-size:var(--text-xs);letter-spacing:.12em;color:var(--lime);background:#0b2a23;padding:var(--space-2) var(--space-3)}
.sculpture-launch button{min-height:52px;padding:var(--space-3) var(--space-5);border:1px solid rgb(234 244 215 / 45%);background:rgb(6 30 21 / 82%);color:var(--white);font-size:var(--text-sm);display:flex;gap:var(--space-8);align-items:center}
.sculpture-launch button:hover{background:var(--lime);color:var(--forest)}
.convergence{background:#0b2a23;color:var(--white);padding-block:var(--space-20);overflow:hidden}
.atlas-heading{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:var(--space-16)}
.atlas-heading .eyebrow{color:var(--lime);margin-bottom:var(--space-6)}
.atlas-heading h2{font-size:clamp(2.1rem,1rem + 2.5vw,3.65rem);line-height:1.08;max-width:23ch}
.atlas-heading h2 span{font-family:var(--font-display);font-style:italic;color:var(--lime);font-size:1.1em}
.atlas-heading>div:last-child>p{font-size:var(--text-base);color:#c8d7ce;max-width:45ch}
.atlas-key{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);color:#c8d7ce;margin-top:var(--space-6)}
.atlas-key i{width:6px;height:6px;border-radius:50%;background:var(--lime);flex-shrink:0}
.atlas-column-labels{display:grid;grid-template-columns:240px 1fr 250px;margin-top:var(--space-16);padding-bottom:var(--space-4);font-size:var(--text-xs);color:#a0b7a8;letter-spacing:.08em;border-bottom:1px solid rgb(225 240 221 / 20%)}
.atlas-column-labels>span:nth-child(2){text-align:center}
.atlas-board{display:grid;grid-template-columns:240px minmax(0,1fr) 250px;grid-template-rows:minmax(0,1fr);height:516px}
.atlas-board>*{min-height:0}
.atlas-fields{display:grid;grid-template-rows:repeat(6,1fr)}
.atlas-fields button{display:flex;align-items:center;gap:var(--space-4);color:#b7c9bd;border-bottom:1px solid rgb(225 240 221 / 13%);text-align:left;padding:var(--space-4) var(--space-3) var(--space-4) 0;position:relative;transition:color .25s}
.atlas-fields button>span{font-size:var(--text-xs);font-variant-numeric:tabular-nums;opacity:.6}
.atlas-fields strong{font-size:var(--text-sm);font-weight:400;line-height:1.4}
.atlas-fields i{width:7px;height:7px;border:1px solid currentColor;border-radius:50%;margin-left:auto;flex-shrink:0;transition:background .25s}
.atlas-fields button[aria-pressed=true]{color:var(--lime)}
.atlas-fields button[aria-pressed=true] i{background:var(--lime)}
.atlas-fields button:hover{color:var(--white)}
.atlas-drawing{position:relative;min-width:0}
.atlas-svg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.atlas-svg-mobile,.atlas-mobile-label{display:none}
.atlas-thread{fill:none;stroke:#a6c3ac;stroke-width:.7;opacity:.11;transition:opacity .5s,stroke .5s;vector-effect:non-scaling-stroke}
.atlas-thread.is-active{stroke:#e2efb5;opacity:.8}
.atlas-ribbon{fill:#c2d4bb;opacity:.025;transition:opacity .5s}
.atlas-ribbon.is-active{fill:#dce9ab;opacity:.1}
.atlas-programmes{display:grid;grid-template-rows:repeat(3,1fr)}
.atlas-programmes>button{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:var(--space-5) var(--space-6);border-bottom:1px solid rgb(225 240 221 / 13%);border-left:1px solid rgb(225 240 221 / 13%);color:#a5b9ac;transition:background .4s,color .4s}
.atlas-programmes>button.is-connected{background:rgb(220 235 175 / 7%);color:var(--white)}
.atlas-programmes .eyebrow{font-size:var(--text-xs);color:#91aa9a;margin-bottom:var(--space-3)}
.atlas-programmes strong{font-size:var(--text-lg);font-weight:400;line-height:1.15}
.atlas-open{font-size:var(--text-xs);margin-top:var(--space-4);color:#a5b9ac}
.atlas-programmes>button:hover{background:rgb(220 235 175 / 13%);color:var(--white)}
.atlas-detail{display:grid;grid-template-columns:1fr 1.6fr auto;gap:var(--space-8);align-items:start;border-bottom:1px solid rgb(225 240 221 / 20%);padding-block:var(--space-8);min-height:160px}
.atlas-detail .eyebrow{color:var(--lime)}
.atlas-detail h3{font-family:var(--font-display);font-size:var(--text-lg);margin-top:var(--space-3)}
.atlas-detail>p{font-size:var(--text-sm);color:#c8d7ce;max-width:55ch}
.atlas-detail .text-link{font-size:var(--text-xs);margin-top:var(--space-2);gap:var(--space-5)}
.atlas-detail .text-link:hover{color:var(--lime)}
.atlas-note{font-size:var(--text-xs);color:#91aa9a;margin-top:var(--space-5);max-width:85ch}
.convergence :focus-visible{outline-color:var(--lime)}
#sculpture-dialog{width:min(1200px,calc(100% - 48px));padding:var(--space-6) var(--space-8);background:#0b2a23;color:var(--white);max-height:calc(100dvh - 32px)}
#sculpture-dialog .dialog-heading{margin-bottom:var(--space-4)}
#sculpture-dialog .dialog-heading p{color:var(--lime);margin:0}
#sculpture-dialog :focus-visible{outline-color:var(--lime)}
.atelier-heading{display:flex;align-items:start;justify-content:space-between;gap:var(--space-8)}
.atelier-heading h2{font-family:var(--font-display);font-size:var(--text-xl);padding:0;margin:0}
.atelier-heading p{font-size:var(--text-sm);color:#c0d1c5;margin:0;max-width:43ch}
#sculpture-stage{position:relative;height:clamp(260px,48vh,520px);overflow:hidden;margin-top:var(--space-4);cursor:grab;touch-action:none;border:1px solid rgb(225 240 221 / 14%)}
#sculpture-stage:active{cursor:grabbing}
#sculpture-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sculpture-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
#sculpture-stage.is-rendered .sculpture-fallback{display:none}
#sculpture-status{position:absolute;bottom:var(--space-3);left:var(--space-4);right:var(--space-4);font-size:var(--text-xs);color:#d1e0d4;z-index:2;pointer-events:none}
.sculpture-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-4);border-bottom:1px solid rgb(225 240 221 / 20%)}
.sculpture-presets{display:flex;gap:var(--space-2)}
.sculpture-presets button{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);min-height:48px;border:1px solid rgb(225 240 221 / 20%);color:#b7c9bd;font-size:var(--text-sm);transition:background .2s,color .2s}
.sculpture-presets button>span:first-child{font-size:var(--text-xs);opacity:.6}
.sculpture-presets button[aria-pressed=true]{background:var(--lime);color:var(--forest)}
.sculpture-options{display:flex;gap:var(--space-5)}
.sculpture-options button{font-size:var(--text-xs);min-height:44px;color:#d1e0d4;text-decoration:underline;text-underline-offset:5px}
.sculpture-options button:disabled,.sculpture-presets button:disabled{opacity:.45;cursor:not-allowed}
.atelier-foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-6)}
.atelier-foot p{font-size:var(--text-sm);color:#d1e0d4;max-width:52ch;margin:var(--space-4) 0 0}
.atelier-foot>span{font-size:var(--text-xs);color:#91aa9a}
.roki-symbol{width:40px;height:40px;flex-shrink:0}
.wordmark{gap:var(--space-3)}.brand-expansion{margin-left:var(--space-3)}
.brand-motto{font-family:var(--font-display);font-size:var(--text-lg);font-style:italic;color:var(--lime)}
.footer-identity{display:flex;align-items:center;gap:var(--space-8)}
.footer-symbol{width:80px;height:80px;flex-shrink:0;color:var(--lime)}
@media(max-width:1100px){
 .atlas-column-labels,.atlas-board{grid-template-columns:200px minmax(0,1fr) 220px}
 .atlas-programmes>button{padding-inline:var(--space-5)}
 .atlas-detail{grid-template-columns:1fr 1.5fr}.atlas-detail .text-link{grid-column:2;width:fit-content;margin-top:0}
 .sculpture-caption{display:none}.sculpture-launch{bottom:112px}
 .sculpture-toolbar{align-items:stretch;flex-direction:column;gap:var(--space-2)}.sculpture-options{justify-content:flex-end}
}
@media(max-width:760px){
 .film-section{padding-block:var(--space-12)}
 .film-intro{grid-template-columns:1fr;gap:var(--space-5);margin-bottom:var(--space-6)}
 .film-intro h2{font-size:var(--text-xl)}.film-intro>div:last-child>p{font-size:var(--text-sm)}
 .film-frame figcaption{flex-direction:column;gap:var(--space-3)}
 #film-start{right:var(--space-3);bottom:52px;min-height:44px;padding:var(--space-2) var(--space-3);gap:var(--space-2);font-size:var(--text-xs)}
 #film-start svg{width:18px;height:18px}.film-duration{display:none}
 .sculpture-launch{position:relative;bottom:auto;right:auto;align-self:flex-start;margin-top:var(--space-6)}
 .sculpture-launch button{min-height:44px;padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}
 .hero{padding-bottom:112px;min-height:800px}
 .hero.webgl-ready #sculpture-home canvas{opacity:0}
 .hero.webgl-ready .hero-image>img{opacity:.65}
 .atlas-heading{grid-template-columns:1fr;gap:var(--space-6)}
 .atlas-heading h2{font-size:var(--text-xl)}
 .convergence{padding-block:var(--space-12)}
 .atlas-column-labels{display:none}
 .atlas-board{display:flex;flex-direction:column;height:auto;margin-top:var(--space-8)}
 .atlas-fields{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,1fr);gap:var(--space-2)}
 .atlas-fields button{border:1px solid rgb(225 240 221 / 20%);padding:var(--space-3);gap:var(--space-2);min-height:72px}
 .atlas-fields button[aria-pressed=true]{background:rgb(220 235 175 / 8%);border-color:rgb(220 235 175 / 60%)}
 .atlas-fields button strong{font-size:var(--text-xs)}.atlas-fields i{display:none}
 .atlas-drawing{height:160px;margin-top:var(--space-6)}
 .atlas-svg{display:none}.atlas-svg-mobile{display:block;width:100%;height:122px}
 .atlas-mobile-label{display:block;text-align:center;font-size:var(--text-sm);color:var(--lime);height:38px}
 .atlas-programmes{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}
 .atlas-programmes>button{padding:var(--space-4) var(--space-2);min-height:154px;border:1px solid rgb(225 240 221 / 15%);justify-content:space-between;gap:var(--space-2)}
 .atlas-programmes>button+button{border-left:0}.atlas-programmes strong{font-size:var(--text-sm);line-height:1.3;overflow-wrap:normal}.atlas-programmes .eyebrow{font-size:var(--text-xs);margin:0}.atlas-open{font-size:var(--text-xs);margin-top:var(--space-2);line-height:1.45}
 .atlas-detail{grid-template-columns:1fr;gap:var(--space-5);padding-block:var(--space-6);min-height:300px}
 .atlas-detail .text-link{grid-column:auto}.atlas-detail h3{margin-top:var(--space-2)}
 #sculpture-dialog{width:calc(100% - 24px);padding:var(--space-4);max-height:calc(100dvh - 24px)}
 .atelier-heading{display:block}.atelier-heading h2{font-size:var(--text-lg)}.atelier-heading p{margin-top:var(--space-3);font-size:var(--text-xs)}
 #sculpture-stage{height:290px}
 .sculpture-presets{width:100%;gap:var(--space-2)}.sculpture-presets button{flex:1;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-2);font-size:var(--text-xs)}
 .sculpture-options{justify-content:space-between;gap:var(--space-4)}
 .atelier-foot{display:block}.atelier-foot p{font-size:var(--text-xs)}.atelier-foot>span{display:block;margin-top:var(--space-3);font-size:var(--text-xs)}
 .footer-top>p{margin-left:0}
 .roki-symbol{width:32px;height:32px}.wordmark{gap:var(--space-2)}.brand-motto{font-size:var(--text-base)}
 .footer-identity{gap:var(--space-5)}.footer-symbol{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){.hero-image>img,#sculpture-home canvas,.atlas-thread,.atlas-ribbon{transition:none}}