/* a5 — the merged, dark SiteWorks.cloud + VideoWorks.cloud (shared look; per-site copy) */
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(media/archivo.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(media/serif.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(media/serif-italic.woff2) format('woff2')}
:root{
 --g0:#111214;--g1:#16181B;--lb:#0B0C0E;
 --ink:#F1EFEA;--ink2:rgba(241,239,234,.72);--rule:rgba(241,239,234,.22);--rule2:rgba(241,239,234,.12);
 --link-rule:var(--teal);--slip-shadow:0 26px 50px -30px rgba(0,0,0,.9);
 --field-bg:#fff;--field-ink:#111214;--field-rule:#6f7074;--field-placeholder:#6a6b6f;--detail-placeholder:#757575;--check-fill:#1A5E9E;
 --teal:#54AAF2;--teal-ink:#111214;--paper:#F4F1EA;--pink:#111214;--pteal:#1A5E9E;
 --serif:'Source Serif 4',Georgia,'Times New Roman',serif;--disp:Archivo,'Arial Narrow',Arial,sans-serif;
 --gut:clamp(20px,5vw,120px);--col:clamp(14px,1.8vw,32px);--sec:clamp(72px,8vw,136px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--g0);color:var(--ink);font:400 18px/1.6 var(--serif);text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h1,h2,h3,h4,p,figure,ol,ul,dl,dd,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
img,video{display:block;max-width:100%;height:auto}
img{width:100%}
video{width:100%;background:#000}
figure,picture,article,section,div{min-width:0}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--link-rule);text-decoration-thickness:1.5px;text-underline-offset:5px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.slip :focus-visible,.np :focus-visible{outline-color:var(--pteal)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.skip{position:fixed;left:16px;top:-80px;z-index:90;background:var(--paper);color:var(--pink);padding:12px 16px;font:700 16px var(--disp)}
.skip:focus{top:12px}

/* containers */
.wrap{max-width:1680px;margin-inline:auto;padding-inline:var(--gut)}
.band{background:var(--g0)}.band.b1{background:var(--g1)}
.sec{padding-block:var(--sec)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col)}
.g12>*{grid-column:1/-1}

/* type */
.disp,h1,h2{font-family:var(--disp);font-stretch:62.5%;font-weight:800;text-transform:uppercase;letter-spacing:.008em;line-height:.92;text-wrap:balance}
h1{font-size:clamp(56px,8.4vw,168px)}
h2{font-size:clamp(44px,5.6vw,104px)}
h1,.big{font-weight:700;letter-spacing:.01em}
@media (max-width:1100px){h2{font-weight:800}}
h3{font:800 clamp(26px,2.4vw,40px)/1.02 var(--disp);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.01em}
h4,.q{font:600 22px/1.3 var(--serif)}
.q{font-style:italic;font-weight:400;font-size:clamp(22px,1.8vw,28px);color:var(--ink)}
.kick,.run,.cap,.meta,.label,figcaption{font-family:var(--disp);font-stretch:100%;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;line-height:1.45;color:var(--ink2)}
.kick{display:block;margin-bottom:18px}
.lead{font-size:clamp(19px,1.45vw,23px);line-height:1.55;max-width:34em}
.body{max-width:68ch}
.body p+p,.lead+p,.lead+.lead{margin-top:16px}
.muted{color:var(--ink2)}
.nw{white-space:nowrap}

/* running head + section rule */
.run{display:flex;justify-content:space-between;gap:24px;border-top:2px solid var(--ink);padding-top:14px;margin-bottom:clamp(36px,4vw,64px)}
.run span:nth-child(2){text-align:center}
.run span:last-child{text-align:right}
@media (max-width:700px){.run span:nth-child(2){display:none}}

/* header */
.head{background:var(--g0)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px;border-bottom:2px solid var(--ink)}
.brand{display:block;flex-shrink:0;text-decoration:none}
.brand img{width:auto;height:52px}
.nav{display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.nav a{font:600 16px/1 var(--disp);font-stretch:100%;letter-spacing:.04em;text-decoration:none;display:flex;align-items:center;min-height:48px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--ink)}
.nav a[aria-current=page]{border-bottom-color:var(--ink)}
.nav .hcta{border:1px solid var(--rule);padding:0 16px;margin-left:8px}
.nav .hcta:hover{border-color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--rule);min-height:48px;padding:0 16px;font:600 16px var(--disp);font-stretch:100%;letter-spacing:.06em}
@media (max-width:1020px){
 .js .menu-btn{display:block}
 .js .nav{display:none;position:absolute;left:0;right:0;top:96px;z-index:40;background:var(--g1);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 24px;border-bottom:2px solid var(--ink)}
 .js .nav.open{display:flex}
 .js .nav a{min-height:56px;border-bottom:1px solid var(--rule);font-size:18px}
 .js .nav .hcta{margin:16px 0 0;justify-content:center}
 .head{position:relative}
 .nav{flex-wrap:wrap;gap:4px 18px}
}
@media (max-width:600px){.bar{min-height:80px}.brand img{height:48px}.js .nav{top:80px}}

/* buttons + links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:54px;padding:12px 24px;background:var(--teal);color:var(--teal-ink);border:1px solid var(--teal);font:800 19px/1 var(--disp);font-stretch:62.5%;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border-radius:0}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:48px;font:600 17px/1.2 var(--disp);font-stretch:100%;letter-spacing:.03em}
.linkbar{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:18px;margin-top:clamp(48px,5vw,80px)}
.linkbar p{font-size:18px;color:var(--ink2)}
.linkbar a{font:600 18px var(--disp);font-stretch:100%;letter-spacing:.02em;min-height:48px;display:inline-flex;align-items:center}
@media (max-width:700px){.linkbar{flex-direction:column;align-items:flex-start;gap:4px}}

/* client screen frame */
.frame{position:relative;border:1px solid var(--rule);background:#000;box-shadow:0 22px 44px -26px rgba(0,0,0,.85),0 2px 0 rgba(0,0,0,.4)}
.frame img,.frame video{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.frame.tall img{aspect-ratio:auto}
.frame.phone{border-radius:18px;padding:6px;background:#050506;border-color:rgba(241,239,234,.28)}
.frame.phone img,.frame.phone video{border-radius:12px;aspect-ratio:9/19.5}
figcaption{padding-top:12px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between}
figcaption b{color:var(--ink);font-weight:600}
.live{display:inline-block;border:1px solid var(--rule);padding:0 6px;color:var(--ink)}

/* reply slip (paper) */
.slip{background:var(--paper);color:var(--pink);border:1px solid var(--pink);padding:clamp(20px,2vw,32px);position:relative;box-shadow:var(--slip-shadow)}
.slip::before{content:'';position:absolute;left:14px;right:14px;top:8px;border-top:1px dashed rgba(17,18,20,.45)}
.slip .slip-label{font:700 13px/1.4 var(--disp);font-stretch:100%;letter-spacing:.12em;text-transform:uppercase;color:#3b3c3f;margin:6px 0 14px;display:flex;justify-content:space-between;gap:12px}
.slip h2,.slip h3{color:var(--pink)}
.slip a{color:var(--pink);text-decoration-color:var(--pteal)}
.form label{display:block;font:600 16px/1.3 var(--disp);font-stretch:100%;letter-spacing:.02em;color:var(--pink)}
.url-field>label{font:800 clamp(26px,2.3vw,34px)/1.05 var(--disp);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.01em;margin-bottom:10px}
.url-row{display:flex;gap:10px;align-items:stretch}
.url-row input{flex:1;min-width:0;height:56px;padding:8px 14px;font:400 19px var(--serif);color:var(--field-ink);background:var(--field-bg);border:1px solid var(--pink);border-radius:0}
.url-row input:disabled{background:#e4e1da;color:#55565a;border-color:#8a8b8e}
.url-row input::placeholder{color:var(--field-placeholder)}
.start,.send{min-height:56px;padding:0 22px;background:var(--teal);color:var(--teal-ink);border:1px solid var(--pink);font:800 19px/1 var(--disp);font-stretch:62.5%;letter-spacing:.05em;text-transform:uppercase;border-radius:0}
.start:hover,.send:hover{background:var(--pink);color:var(--paper)}
.start{display:none}
.js .compact .start{display:block}
.check{display:flex!important;align-items:center;gap:12px;min-height:48px;margin-top:8px;font:500 17px/1.3 var(--serif)!important;letter-spacing:0!important;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:44px;height:44px;margin:0 -6px 0 -9px;flex-shrink:0;position:relative;background:transparent;border:0;cursor:pointer}
.check input::before{content:'';position:absolute;inset:9px;border:2px solid #111214;background:#fff}
.check input:checked::before{background:var(--check-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6'/%3E%3C/svg%3E") center/18px no-repeat;border-color:var(--check-fill)}
.details{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:14px}
.details label input,.details label textarea{display:block;width:100%;margin-top:6px;min-height:50px;padding:10px 12px;font:400 18px var(--serif);background:var(--field-bg);color:var(--field-ink);border:1px solid var(--field-rule);border-radius:0}
.details input::placeholder,.details textarea::placeholder{color:var(--detail-placeholder)}
.details .wide{grid-column:1/-1}
.details .send{justify-self:start;min-width:160px}
.privacy{margin-top:14px;font:400 16px/1.5 var(--serif);color:#2f3033}
.status:empty{display:none}
.status{margin-top:8px}
.status h3{font-size:34px;color:var(--pink)}
.status p{margin-top:6px;color:#2f3033}
@media (max-width:600px){.details{grid-template-columns:1fr}.url-row{flex-direction:column}.start,.send{width:100%}}

/* photo hero / band (full-bleed) */
.ph{position:relative;width:100%;overflow:hidden;background:var(--g1)}
.ph picture,.ph img{display:block;width:100%;height:100%}
.ph img{object-fit:cover}
.ph-hero{height:min(64vh,680px);min-height:440px}
.ph-hero.short{height:min(48vh,520px);min-height:360px}
.ph-band{height:min(60vh,640px);min-height:380px}
@media (min-width:1800px){.ph-hero{height:min(68vh,900px)}.ph-band{height:min(62vh,760px)}}
.ph-copy{position:absolute;inset:0;display:flex;align-items:flex-end;pointer-events:none}
.ph-copy .wrap{width:100%}
.ph-copy .in{position:relative;max-width:min(46%,760px);padding-bottom:clamp(36px,5vw,80px);pointer-events:auto}
.ph-copy.right .in{margin-left:auto;text-align:left}
.ph-copy .in::before{content:'';position:absolute;z-index:-1;inset:-12% -22% -6% -22%;background:radial-gradient(closest-side,rgba(17,18,20,.78),rgba(17,18,20,.55) 55%,rgba(17,18,20,0));pointer-events:none}
.ph-copy .in>*{position:relative}
.ph-copy h1{font-size:clamp(56px,6.6vw,132px)}
.ph-copy .kick{color:var(--ink)}
.ph-copy .lead{margin-top:16px;color:var(--ink)}
.ph-line{font:700 clamp(36px,3.6vw,64px)/.95 var(--disp);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.ph-cta{display:none!important}
.diptych{display:grid;grid-template-columns:1fr 1fr;height:100%}
.diptych picture{height:100%}
.diptych .lab{position:absolute;top:24px;font:700 15px/1 var(--disp);font-stretch:100%;letter-spacing:.1em;text-transform:uppercase;background:rgba(17,18,20,.72);padding:10px 14px}
@media (max-width:600px){
 .ph-hero,.ph-hero.short,.ph-band{height:auto;min-height:0}
 .ph-hero img,.ph-band img{aspect-ratio:4/5;height:auto}
 .ph-band.thin img{aspect-ratio:4/3}
 .ph{overflow:visible;background:var(--g0)}
 .ph-copy{position:static;display:block;pointer-events:auto}
 .ph-copy .in{max-width:none;padding:28px 0 4px}
 .ph-copy .in::before{display:none}
 .ph-copy h1{font-size:clamp(46px,13vw,64px)}
 .ph-copy .lead{margin-top:14px}
 .ph-cta{display:flex!important;width:100%;margin-top:20px}
 .ph-line{font-size:clamp(30px,8.4vw,40px)}
 .diptych picture,.diptych img{height:auto}
 .diptych img{aspect-ratio:4/5}
 .diptych .lab{top:auto;bottom:10px;font-size:13px;padding:8px 10px}
}

/* SW hero: headline + moving real-site cluster + slip */
.hero{padding-top:clamp(28px,3vw,48px);padding-bottom:var(--sec)}
.hero h1{grid-column:1/span 8;font-size:clamp(56px,7.4vw,156px)}
.hero h1 .l2{display:block}
.hero-sub{grid-column:1/span 7;margin-top:clamp(18px,2vw,30px)}
.hero .hero-slip{grid-column:9/-1;grid-row:1/span 2;align-self:start}
.hero .cluster{grid-column:1/-1;margin-top:clamp(36px,4vw,64px)}
.cluster{position:relative;aspect-ratio:16/6.6}
.cluster figure{position:absolute;margin:0}
.cluster .c1{left:0;top:0;width:58%}
.cluster .c2{right:0;top:12%;width:39%}
.cluster .c3{left:52%;top:30%;width:10.5%;z-index:2}
.cluster figcaption{padding-top:8px}
.cluster .c3 figcaption{display:none}
@media (max-width:1100px){.hero .hero-slip{order:2}.hero .cluster{order:3}.hero h1,.hero-sub{grid-column:1/-1}.hero .hero-slip{grid-column:1/span 9;grid-row:auto;margin-top:28px}.cluster{aspect-ratio:16/7.4}}
@media (max-width:700px){
 .hero .hero-slip{grid-column:1/-1}
 .cluster{aspect-ratio:16/15.5}
 .cluster .c1{width:88%}.cluster .c2{width:62%;top:auto;bottom:0}.cluster .c3{display:none}
}

/* moving real-site band (full-bleed) */
.reel-band{background:var(--g1);padding-block:clamp(40px,4vw,64px)}
.reel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding-inline:14px}
.reel figure{margin:0}
.reel figcaption{font-size:13px;padding-inline:2px}
@media (max-width:1100px){.reel{grid-template-columns:repeat(3,minmax(0,1fr))}.reel figure:nth-child(n+4){display:none}}
@media (max-width:600px){.reel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-inline:10px}.reel figure:nth-child(n+3){display:none}}
.reel-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}

/* two covers */
.ways-line{grid-column:1/span 9;font:700 clamp(30px,2.8vw,50px)/1.04 var(--disp);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.covers{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--col);margin-top:clamp(32px,3vw,56px)}
.cover{background:var(--g1);border:1px solid var(--rule);padding:clamp(20px,2.2vw,40px);display:flex;flex-direction:column;gap:22px}
.b1 .cover{background:var(--g0)}
.cover .mast{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:10px}
.cover h3{font-size:clamp(44px,4.6vw,88px);font-weight:700;line-height:.9}
.cover .who{font:italic 400 clamp(22px,1.8vw,28px)/1.3 var(--serif)}
.cover ul li{border-top:1px solid var(--rule);padding-block:10px;font-size:18px}
.cover .fee{display:flex;justify-content:space-between;gap:12px;border-top:2px solid var(--ink);padding-top:12px;font:600 16px/1.4 var(--disp);font-stretch:100%;letter-spacing:.04em;text-transform:uppercase}
.cover .fee span:last-child{color:var(--ink)}
.cover-jump{display:none}
@media (max-width:800px){
 .covers{grid-template-columns:1fr}
 .cover-jump{display:flex;gap:10px;margin-top:20px;grid-column:1/-1}
 .cover-jump a{flex:1;text-align:center;border:1px solid var(--rule);min-height:48px;display:flex;align-items:center;justify-content:center;font:600 15px var(--disp);font-stretch:100%;text-decoration:none;letter-spacing:.04em}
}

/* ledger (o3) */
.ledger{width:100%;border-collapse:collapse;margin-top:clamp(36px,3vw,56px);font-size:18px}
.ledger th,.ledger td{text-align:left;vertical-align:top;padding:16px 14px 16px 0;border-top:1px solid var(--rule)}
.ledger thead th{border-top:2px solid var(--ink);font:600 13px/1.4 var(--disp);font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.ledger thead th.pl{font:800 22px/1.1 var(--disp);font-stretch:62.5%;color:var(--ink);letter-spacing:.04em}
.ledger .n{width:56px;font:600 15px var(--disp);font-stretch:100%;color:var(--ink2);font-variant-numeric:tabular-nums}
.ledger .item{font:600 19px/1.35 var(--serif);width:22%}
.ledger .item small{display:block;font-weight:400;font-size:16px;color:var(--ink2)}
.ledger .pic{width:24%}
.ledger .pic img{border:1px solid var(--rule);aspect-ratio:12/5;object-fit:cover;object-position:top left}
.ledger td.man,.ledger td.diy{width:22%}
.ledger tfoot td,.ledger tfoot th{border-top:2px solid var(--ink)}
@media (max-width:860px){
 .ledger thead{display:none}
 .ledger,.ledger tbody,.ledger tfoot,.ledger tr,.ledger th,.ledger td{display:block;width:auto}
 .ledger tr{border-top:1px solid var(--rule);padding-block:16px;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px}
 .ledger .n{width:auto}
 .ledger th,.ledger td{border:0;padding:4px 0}
 .ledger .n{grid-row:1/span 4}
 .ledger .pic{grid-column:2;margin:8px 0}
 .ledger .pic:empty{display:none}
 .ledger td.man,.ledger td.diy{grid-column:2;width:auto}
 .ledger td.man::before,.ledger td.diy::before{content:attr(data-l);display:block;font:600 13px/1.4 var(--disp);font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
 .ledger .item{width:auto}
}
.small-print{margin-top:20px;color:var(--ink2);font-size:17px}

/* work grid on SW */
.work-head{grid-column:1/span 7}
.work-note{grid-column:9/-1;align-self:end}
.wgrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);row-gap:clamp(36px,4vw,64px);margin-top:clamp(36px,4vw,64px);align-items:start}
.wgrid figure{margin:0}
.w-big{grid-column:1/span 7}
.w-tall{grid-column:8/span 3}
.w-ph{grid-column:11/span 2}
.flip .w-big{grid-column:6/span 7;grid-row:1}
.flip .w-tall{grid-column:3/span 3;grid-row:1}
.flip .w-ph{grid-column:1/span 2;grid-row:1}
.w-tall img{aspect-ratio:720/1125;object-fit:cover;object-position:top}
.w-mid{grid-column:span 4}.w-mid2{grid-column:span 6}
@media (max-width:1100px){.w-big,.flip .w-big{grid-column:1/-1;grid-row:auto}.w-tall,.flip .w-tall{grid-column:1/span 7;grid-row:auto}.w-ph,.flip .w-ph{grid-column:9/span 4;grid-row:auto}.w-mid{grid-column:span 6}}
@media (max-width:600px){.w-tall,.flip .w-tall{grid-column:1/span 8}.w-ph,.flip .w-ph{grid-column:9/span 4}.w-mid,.w-mid2{grid-column:1/-1}.work-head,.work-note{grid-column:1/-1}.work-note{margin-top:16px}}
.cat{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:2px solid var(--ink);padding-top:14px}
.cat h2{font-size:clamp(40px,4.4vw,80px)}

/* run-in capability text (not an icon grid) */
.runin{grid-column:1/-1;columns:2;column-gap:clamp(32px,4vw,80px);margin-top:clamp(28px,3vw,48px);max-width:1360px}
.runin p{break-inside:avoid;margin-bottom:18px;max-width:62ch}
.runin b{font-weight:600}
@media (max-width:800px){.runin{columns:1}}

/* steps */
.steps{grid-column:1/-1;margin-top:clamp(28px,3vw,48px);counter-reset:s}
.steps li{display:grid;grid-template-columns:clamp(70px,9vw,160px) minmax(0,1fr) minmax(0,1fr);column-gap:var(--col);border-top:1px solid var(--rule);padding-block:clamp(18px,2vw,28px);align-items:baseline}
.steps .num{font:700 clamp(48px,5vw,96px)/.85 var(--disp);font-stretch:62.5%;color:var(--ink)}
.steps h3{font-size:clamp(26px,2.4vw,40px)}
.steps p{max-width:56ch}
.steps .fork{color:var(--ink)}
@media (max-width:800px){.steps li{grid-template-columns:64px 1fr}.steps li p{grid-column:2;margin-top:8px}}

/* price */
.price{font:700 clamp(84px,10vw,200px)/.82 var(--disp);font-stretch:62.5%;letter-spacing:.005em;white-space:nowrap}
.price small{font-size:.32em;letter-spacing:.04em;vertical-align:.9em;margin-inline:.1em}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:var(--col);margin-top:28px}
.tier{border-top:2px solid var(--ink);padding-top:14px}
.tier .t{font:800 30px/1 var(--disp);font-stretch:62.5%;text-transform:uppercase}
.tier .f{margin-top:10px;font:600 16px/1.4 var(--disp);font-stretch:100%;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.tier p{margin-top:10px}
@media (max-width:700px){.tiers{grid-template-columns:1fr}}

/* FAQ (a3 plain-question subheads) */
.faq{grid-column:1/-1;margin-top:clamp(28px,3vw,48px)}
.faq>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col);border-top:1px solid var(--rule);padding-block:22px}
.faq dt{font:italic 400 clamp(22px,1.7vw,27px)/1.3 var(--serif)}
.faq dd{max-width:62ch}
@media (max-width:800px){.faq>div{grid-template-columns:1fr}.faq dd{margin-top:8px}}

/* case: site + film pairing (o4) */
.pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:end;margin-top:clamp(32px,3vw,56px)}
.pair .site{grid-column:1/span 5}
.pair .film{grid-column:6/span 7}
.pair .join{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);margin-top:18px;padding-top:12px}
@media (max-width:800px){.pair .site,.pair .film{grid-column:1/-1}.pair .film{margin-top:28px}}

/* film window + running-time rule (o1) */
.fw{position:relative;border:1px solid var(--rule);background:#000}
.fw video{aspect-ratio:16/9;object-fit:cover}
.fw.v916 video{aspect-ratio:9/16}
.rt{position:relative;height:40px;margin-top:12px}
.rt::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.rt .fill{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.rt .t{position:absolute;top:0;width:1px;height:6px;background:var(--ink2)}
.rt .t.m{height:12px;background:var(--ink)}
.rt .n{position:absolute;top:16px;font:500 13px/1 var(--disp);font-stretch:100%;letter-spacing:.04em;color:var(--ink2);transform:translateX(-50%);font-variant-numeric:tabular-nums}
.rt .n.first{transform:none}.rt .n.last{transform:translateX(-100%)}
.np .rt::before{background:rgba(17,18,20,.3)}
.ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.ctl button,.watch{min-height:48px;padding:0 16px;background:transparent;border:1px solid var(--rule);font:600 16px/1 var(--disp);font-stretch:100%;letter-spacing:.04em;color:var(--ink);display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.ctl button:hover,.watch:hover{border-color:var(--ink)}
.ctl .tc{margin-left:auto;font:500 15px var(--disp);font-stretch:100%;color:var(--ink2);font-variant-numeric:tabular-nums}

/* VW stage on letterbox (a2 + o3) */
.stage-band{background:var(--lb);padding-block:clamp(28px,3vw,56px)}
.stage{max-width:1680px;margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.stage .player{max-width:1360px;width:100%;margin-inline:auto}
@media (min-width:1500px){.stage{grid-template-columns:minmax(0,1fr) minmax(300px,360px);align-items:start}.stage .player{margin:0;max-width:none}}
.np{background:var(--paper);color:var(--pink);border:1px solid var(--pink);padding:24px}
.np .label{color:#3b3c3f;font-weight:700}
.np dl{margin-top:12px}
.np dl div{display:grid;grid-template-columns:110px 1fr;gap:10px;border-top:1px solid rgba(17,18,20,.25);padding-block:9px}
.np dt{font:600 13px/1.6 var(--disp);font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;color:#3b3c3f}
.np dd{font-size:18px;line-height:1.4}
.np dd.big{font:800 28px/1 var(--disp);font-stretch:62.5%;text-transform:uppercase}
.np .form{margin-top:18px;border-top:2px solid var(--pink);padding-top:16px}
.np .url-field>label{font-size:26px}
@media (min-width:1500px){.np .url-row{flex-direction:column}.np .start{width:100%}}
@media (min-width:1500px){.np .details{grid-template-columns:1fr}}
.order{max-width:1680px;margin:28px auto 0;padding-inline:var(--gut)}
.order ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col);max-width:1360px}
@media (min-width:1500px){.order ol{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}}
.order li button,.order li a{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;width:100%;text-align:left;background:none;border:0;border-top:2px solid var(--rule);padding:14px 0 6px;color:var(--ink);text-decoration:none;min-height:48px}
.order li [aria-current=true],.order li [aria-pressed=true]{border-top-color:var(--ink)}
.order .no{font:700 34px/1 var(--disp);font-stretch:62.5%;grid-row:1/span 2}
.order .b{font:600 17px/1.25 var(--serif)}
.order .m{font:500 14px/1.3 var(--disp);font-stretch:100%;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
@media (max-width:900px){.order ol{grid-template-columns:1fr 1fr;row-gap:8px}}
.vw-hero{padding-top:clamp(24px,3vw,44px);padding-bottom:clamp(24px,2.4vw,40px)}
.vw-hero h1{grid-column:1/span 8;font-size:clamp(54px,7.4vw,150px)}
.vw-hero .lead{grid-column:9/-1;align-self:end}
@media (max-width:1100px){.vw-hero h1,.vw-hero .lead{grid-column:1/-1}.vw-hero .lead{margin-top:18px}}

/* contact sheets (VW) */
.sheet{grid-column:1/-1;margin-top:clamp(36px,4vw,64px)}
.sheet+.sheet{margin-top:clamp(48px,5vw,88px)}
.sheet .row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sheet .fr{margin:0}
.sheet .fr .no{display:flex;justify-content:space-between;font:600 13px/1 var(--disp);font-stretch:100%;letter-spacing:.08em;color:var(--ink2);padding-bottom:8px}
.sheet .fr img,.sheet .fr video{aspect-ratio:16/9;object-fit:cover;border:1px solid var(--rule)}
.sheet .fr.lead-fr .no span:first-child{color:var(--ink)}
.sheet .foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:6px}
.sheet .foot .who{font:600 19px/1.3 var(--serif)}
.sheet .foot .who span{font-weight:400;color:var(--ink2)}
.sprockets .row{position:relative;padding-block:22px;background:#0b0c0e}
.sprockets .row::before,.sprockets .row::after{content:'';position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,rgba(241,239,234,.3) 0 14px,transparent 14px 30px)}
.sprockets .row::before{top:6px}.sprockets .row::after{bottom:6px}
.sprockets .fr .no{padding-top:6px}
.sheet .row.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:800px){.sheet .row,.sheet .row.r4{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet .fr.lead-fr{grid-column:1/-1}.sheet .fr:nth-child(5){display:none}}

/* two shapes */
.shapes{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col);align-items:end;margin-top:clamp(32px,3vw,56px)}
.shapes .land{grid-column:1/span 8}
.shapes .port{grid-column:10/span 3}
@media (max-width:700px){.shapes .land{grid-column:1/-1}.shapes .port{grid-column:3/span 8;margin-top:28px}}

/* review (o1) */
.review .stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col);margin-top:22px}
.review .stages li{border-top:2px solid var(--ink);padding-top:12px}
.review .stages b{display:block;font:800 26px/1 var(--disp);font-stretch:62.5%;text-transform:uppercase;margin-bottom:6px}
@media (max-width:700px){.review .stages{grid-template-columns:1fr;gap:14px}}

/* closing slip section */
.closing .intro{grid-column:1/span 5}
.closing .slip{grid-column:7/-1}
@media (max-width:1000px){.closing .intro,.closing .slip{grid-column:1/-1}.closing .slip{margin-top:32px}}

/* lists */
.ticks li{border-top:1px solid var(--rule);padding-block:12px}
.two-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col);grid-column:1/-1}
@media (max-width:900px){.two-col{grid-template-columns:1fr}.two-col>*+*{margin-top:28px}}

/* footer (full-bleed) */
.foot-band{background:var(--g1);border-top:2px solid var(--ink);padding-block:clamp(48px,5vw,80px) 40px}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--col)}
.foot-grid .brand img{height:52px}
.foot-grid p{margin-top:18px;max-width:36em;color:var(--ink2)}
.fnav{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:flex-end;align-content:start}
.fnav a{font:600 16px var(--disp);font-stretch:100%;letter-spacing:.04em;min-height:48px;display:inline-flex;align-items:center}
.sister{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:40px;padding-top:20px}
.sister a{font:700 clamp(24px,2.2vw,36px)/1.1 var(--disp);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.02em;min-height:48px;display:inline-flex;align-items:center}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr}.fnav{justify-content:flex-start}}

/* dialog */
.film-dialog{width:min(1280px,94vw);max-height:94vh;padding:0;border:1px solid var(--rule);background:#000;color:var(--ink)}
.film-dialog::backdrop{background:rgba(5,5,6,.88)}
.film-dialog video{width:100%;max-height:80vh;background:#000}
.film-dialog .dbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 14px;background:var(--g1)}
.film-dialog .dbar p{font:600 15px var(--disp);font-stretch:100%;letter-spacing:.04em}
.film-dialog .close{min-height:48px;padding:0 16px;background:none;border:1px solid var(--rule);font:600 16px var(--disp);font-stretch:100%}

/* utility spacing */
.mt-s{margin-top:16px}.mt-m{margin-top:clamp(24px,2.4vw,40px)}.mt-l{margin-top:clamp(40px,4vw,72px)}
.span-7{grid-column:1/span 7}.span-8{grid-column:1/span 8}.span-6{grid-column:1/span 6}.off-7{grid-column:8/-1}.off-8{grid-column:9/-1}
@media (max-width:1000px){.span-7,.span-8,.span-6,.off-7,.off-8{grid-column:1/-1}}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;grid-column:1/-1}
@media (max-width:700px){.section-head{flex-direction:column;align-items:flex-start;gap:8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:600px){.price{white-space:normal;font-size:clamp(64px,19vw,96px)}.price small{vertical-align:.5em}}
.full .rt .fill{transform:none}.full .rt{height:44px}.full .rt::before{height:2px}
figcaption span{min-width:0;overflow-wrap:anywhere}
.cat{flex-wrap:wrap}
@media (max-width:600px){.w-ph figcaption,.w-tall figcaption{font-size:12px;letter-spacing:.04em}}
@media (max-width:380px){.brand img{height:38px}.menu-btn{padding:0 12px}.bar{gap:12px}}

.ph.dip{height:auto;min-height:0;overflow:visible;background:var(--g0)}
.ph.dip .diptych{height:min(60vh,640px)}
.ph.dip .ph-copy{position:static;display:block}
.ph.dip .ph-copy .in{max-width:none;padding:clamp(32px,3.4vw,56px) 0 0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--col);align-items:end}
.ph.dip .ph-copy .in::before{display:none}
.ph.dip .ph-copy .kick{grid-column:1/-1}
.ph.dip .ph-copy .lead{margin:0 0 8px}
@media (max-width:900px){.ph.dip .ph-copy .in{grid-template-columns:1fr}.ph.dip .ph-copy .lead{margin-top:14px}}
@media (max-width:600px){.ph.dip .diptych{height:auto}}
.ph-copy .in::before{background:radial-gradient(closest-side,rgba(17,18,20,.86),rgba(17,18,20,.62) 60%,rgba(17,18,20,0))}

.ph-copy .in::before{inset:-14% -16% -2% -16%;background:rgba(17,18,20,.74);filter:blur(30px);border-radius:40%}
.ph-sub{padding-top:clamp(24px,2.6vw,40px)}
.ph-sub .lead{grid-column:1/span 7;max-width:40em}
.ph-sub .ph-cta{grid-column:1/-1}
@media (max-width:600px){.ph-sub{padding-top:8px}.ph-sub .lead{grid-column:1/-1}}
.ph-copy{z-index:1}
.ph-copy .in::before{inset:-34% -34% -16% -34%;filter:none;border-radius:0;background:radial-gradient(ellipse closest-side,rgba(17,18,20,.74) 0,rgba(17,18,20,.6) 38%,rgba(17,18,20,.28) 70%,rgba(17,18,20,0) 100%)}
@media (max-width:600px){.ph-hero:not(.dip) img{max-height:50vh;object-fit:cover}.ph-copy h1{font-size:clamp(40px,11.4vw,52px)}.ph-copy .in{padding-top:22px}}
.cluster .c3{left:49%;top:16%}.cluster .c2 figcaption{justify-content:flex-end}

/* a5p: shared finishing pass */
.head{border-bottom:2px solid var(--ink)}
.bar{border-bottom:0}
main>section:first-child>.wrap>.run{border-top:0}
:root{--edge:calc(max(0px,(100vw - 1680px)/2) + var(--gut))}
/* In-flow copy gives the photograph a content-sized minimum height. */
@media(min-width:601px){
 .ph-hero,.ph-band{height:auto;min-height:min(64vh,680px);display:grid;align-items:end}
 .ph-band{min-height:min(60vh,640px)}
 .ph-hero.short{height:auto;min-height:min(48vh,520px)}
 .ph>picture{position:absolute;inset:0}
 .ph-copy{position:relative;inset:auto;width:100%;display:block}
 .ph-copy .in{max-width:43%;padding:72px 0 64px}
 .ph-copy h1{font-size:clamp(48px,min(5.2vw,8.2vh),100px);line-height:.98}
 .ph-hero.short .ph-copy h1{font-size:clamp(40px,min(4.3vw,7vh),78px)}
 .ph-hero.short .ph-copy .in{padding:72px 0 48px;max-width:45%}
 .ph-copy .in::before{display:none}
 .ph.shade-left::after,.ph.shade-right::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(17 18 20/var(--scrim,.6)) 0%,rgb(17 18 20/calc(var(--scrim,.6) - .12)) 32%,rgb(17 18 20/0) 62%)}
 .ph.shade-right::after{background:linear-gradient(270deg,rgb(17 18 20/var(--scrim,.6)) 0%,rgb(17 18 20/calc(var(--scrim,.6) - .12)) 32%,rgb(17 18 20/0) 62%)}
 .ph-copy{z-index:2}
 .ph-copy h1,.ph-copy .ph-line,.ph-copy .kick,.ph-copy .lead{text-shadow:0 2px 10px rgba(0,0,0,.3)}
 .ph.dip{display:grid;min-height:min(64vh,680px);overflow:hidden}
 .ph.dip .diptych{position:absolute;inset:0;height:100%}
 .ph.dip .ph-copy{position:relative;display:block}
 .ph.dip .ph-copy .in{display:block;max-width:34%;padding:100px 0 56px}
 .ph.dip .ph-copy h1{font-size:clamp(44px,min(4.3vw,7vh),78px)}
 .ph.dip .ph-copy .lead{font-size:20px;line-height:1.5;margin-top:20px;max-width:28ch}
 .ph.dip::after{right:50%;background:linear-gradient(90deg,rgb(17 18 20/var(--scrim,.6)) 0%,rgb(17 18 20/calc(var(--scrim,.6) - .1)) 70%,transparent 100%)}
 .ph.dip .diptych>div:first-child img{object-position:65% 38%!important}
}
.ph-sub{padding-block:28px 32px}
.ph-sub .lead{max-width:52ch}
.diptych{gap:8px;background:var(--g0)}
.diptych .lab{z-index:3;top:24px;background:#111214;font-size:14px;line-height:1.3}
.diptych>div:first-child .lab{left:var(--edge)}
.diptych>div:last-child .lab{right:var(--edge)}
/* The phone stays inside the left image's bounds. */
.cluster .c3{left:45%;top:12%;width:10.5%}
.cluster .c2 figcaption{justify-content:space-between}
@media(max-width:700px){
 .cluster{display:grid;grid-template-columns:1fr;gap:32px;aspect-ratio:auto}
 .cluster figure{position:relative;inset:auto!important;width:100%!important}
 .cluster .c3{display:block;width:30%!important;position:absolute;left:64%!important;top:24px!important}
 .cluster .c3 .frame{width:100%}
}
/* Every reel item remains available on small screens. */
.reel{align-items:start}
.reel figure:nth-child(n){display:block}
.reel figcaption{display:grid;grid-template-columns:1fr;gap:8px}
.reel figcaption .live{justify-self:start}
/* Row subgrid aligns captions, including portrait and desktop screens. */
.wgrid{align-items:stretch;row-gap:16px}
.wgrid>figure{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-items:start}
.wgrid .frame{align-self:start}
.wgrid figcaption{grid-row:2;padding-top:0;display:block}
.wgrid .flip{grid-row:auto}
.flip .w-big,.flip .w-tall,.flip .w-ph{grid-row:1 / span 2}
.wgrid .w-mid,.wgrid .w-mid2{margin-top:32px}
.cat{padding-top:40px}
.wgrid+.cat{margin-top:96px}
#work .g12+.g12{margin-top:96px}
.sheet+.sheet{margin-top:96px}
.run{padding-top:40px;margin-bottom:40px}
main>section:first-child>.wrap>.run{padding-top:14px}
.sec{padding-block:max(96px,var(--sec))}
/* Keep the first work visible beneath the short film hero. */
#library{padding-top:32px!important}
#library>.wrap>.run{margin-bottom:24px;padding-top:16px}
#library .sheet:first-child{margin-top:24px}
#library .sheet:first-child .cat{padding-top:40px}
/* Feature ornaments hang from the same text column. */
.runin{--fi:28px}
.runin p{position:relative;padding-left:calc(var(--fi) + 18px)}
.runin .fi{position:absolute;left:0;top:calc(.494em - var(--fi)/8);width:var(--fi);height:var(--fi);color:var(--ink)}
@media(min-width:1024px){.runin{--fi:32px}}
/* Tall site at left; title and landscape film share the right column. */
.pair-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px var(--col);align-items:start}
.pair-layout>.site{grid-column:1;grid-row:1 / span 2;align-self:stretch}
.pair-layout>.pair-title{grid-column:2;grid-row:1}
.pair-title h2{font-size:clamp(44px,4.5vw,76px);max-width:14ch}
.pair-title .lead{margin-top:24px}
.pair-layout>.film{grid-column:2;grid-row:2;align-self:end}
.pair-layout>.join{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule);padding-top:16px}
.pair-layout>.site .frame{display:block;width:100%}
@media(max-width:1024px){
 .pair-layout{grid-template-columns:minmax(0,1fr)}
 .pair-layout>.pair-title{grid-column:1;grid-row:1}
 .pair-layout>.film{grid-column:1;grid-row:2}
 .pair-layout>.site{grid-column:1;grid-row:3;max-width:640px;width:100%}
 .pair-layout>.join{flex-wrap:wrap}
}
/* Full-page viewer: native dialog focus containment and a native scroll area. */
.site-screen{display:block;width:100%;padding:0;text-align:left;color:var(--ink);overflow:hidden;font:600 14px var(--disp);font-stretch:100%;border-radius:0}
.site-screen:focus-visible{outline-offset:5px;outline-width:3px}
.screen-affordance{position:absolute;bottom:12px;right:12px;max-width:calc(100% - 24px);padding:10px 12px;background:var(--g0);border:1px solid var(--rule);opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;pointer-events:none;font-size:14px;line-height:1.3}
.site-screen:hover .screen-affordance,.site-screen:focus-visible .screen-affordance{opacity:1;transform:none}
.site-dialog{padding:0;border:1px solid var(--rule);background:var(--g0);color:var(--ink);width:min(1280px,92vw);height:90dvh;max-width:none;max-height:none;overflow:hidden}
.site-dialog[open]{display:flex;flex-direction:column}
.site-dialog::backdrop{background:rgba(5,6,8,.9)}
.site-dialog-bar{display:flex;align-items:center;gap:16px;flex-shrink:0;min-height:64px;padding:8px 16px;border-bottom:1px solid var(--rule);background:var(--g1)}
.site-dialog-bar p{flex:1;font:600 15px/1.45 var(--disp);font-stretch:100%;min-width:0}
.site-dialog-bar .live{font:600 12px/1.5 var(--disp);letter-spacing:.08em;text-transform:uppercase}
.site-close{width:48px;height:48px;flex-shrink:0;border:1px solid var(--rule);background:none;font:400 30px/1 var(--disp)}
.site-close:hover{background:var(--ink);color:var(--g0)}
.site-viewport{flex:1;overflow:auto;overscroll-behavior:contain;min-height:0;scroll-behavior:auto;background:var(--g0)}
.site-viewport img{display:block;width:100%;height:auto;max-width:none}
body:has(.site-dialog[open]){overflow:hidden}
@media(max-width:600px){
 .sec{padding-block:72px}
 .cat{padding-top:40px}
 .wgrid+.cat,#work .g12+.g12,.sheet+.sheet{margin-top:64px}
 .ph-copy .in{padding:24px 0 24px}
 .ph-copy h1{font-size:clamp(38px,11.4vw,52px);line-height:1}
 .ph-hero:not(.dip) img{max-height:none;aspect-ratio:4/5;height:auto}
 .ph-hero .ph-cta{margin:22px 0 0}
 .ph-sub{padding-top:4px;padding-bottom:28px}
 .ph.dip .diptych{grid-template-columns:1fr;gap:4px;height:auto}
 .ph.dip .diptych img{aspect-ratio:4/5}
 .ph.dip .ph-copy .in{padding:24px 0;display:block}
 .ph.dip .ph-copy .lead{margin:20px 0 0}
 .diptych .lab{top:20px;bottom:auto;font-size:13px}
 .diptych>div:first-child .lab{left:var(--gut)}
 .diptych>div:last-child .lab{right:var(--gut)}
 .reel{grid-template-columns:1fr;gap:32px;padding-inline:var(--gut)}
 .reel-head{align-items:start;flex-wrap:wrap}
 .reel figcaption{grid-template-columns:1fr auto}
 .site-dialog{width:100vw;height:100dvh;margin:0;border:0}
 .site-dialog-bar{gap:8px;padding:8px 12px}
 .site-dialog-bar p{font-size:13px}
 .site-dialog-bar .live{display:none}
 .screen-affordance{font-size:12px;padding:6px}
 .pair-title h2{font-size:clamp(40px,11vw,52px)}
}
@media(max-width:1100px){.flip .w-big,.flip .w-tall,.flip .w-ph{grid-row:span 2}}

.cluster .c3 .phone{aspect-ratio:9/17}.cluster .c3 .phone img{aspect-ratio:auto;width:100%;height:auto}
@media(min-width:601px){section:has(>.short)>.ph-sub{padding-block:20px}section:has(>.short)>.ph-sub .lead{font-size:19px;max-width:64ch}#library{padding-top:16px!important}#library>.wrap>.run{margin-bottom:8px}#library .sheet:first-child{margin-top:16px}}

.site-screen+figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 12px}.site-screen+figcaption .live{align-self:start;justify-self:end}

.frame.tall img{aspect-ratio:720/1125}

@media(max-width:600px){.site-dialog-bar .live{display:inline-block;flex-shrink:0}}

/* a5q: paper bands inherit the same component system. */
.band.paper{
 --g0:var(--paper);--g1:var(--paper);
 --ink:#111214;--ink2:rgba(17,18,20,.72);
 --rule:rgba(17,18,20,.22);--rule2:rgba(17,18,20,.12);
 --teal:#1A5E9E;--teal-ink:#F1EFEA;--link-rule:currentColor;
 --field-bg:#FAF8F3;--field-ink:#111214;--field-rule:rgba(17,18,20,.72);--field-placeholder:#60615F;--detail-placeholder:#60615F;
 --check-fill:#111214;--slip-shadow:0 8px 20px -12px rgba(17,18,20,.3);
 color:var(--ink);background:var(--paper);color-scheme:light;
}
.band-title{border-top:2px solid var(--ink);padding-top:40px;font-size:clamp(40px,4.4vw,80px)}
.order-section{padding-block:40px 48px}
.order-band{margin-block:0}
.order-band>.label{color:var(--ink);border-top:2px solid var(--ink);padding-top:24px}
.ph.dip{--scrim:.72}
.nav a{white-space:nowrap}@media (min-width:861px) and (max-width:1240px){.nav{gap:16px}.nav a{font-size:15px;letter-spacing:.02em}.nav .hcta{padding:0 12px;margin-left:4px}.brand img{height:44px}}
p,li,dd,figcaption{text-wrap:pretty}
.sheet .fr .v916 video{aspect-ratio:9/16}
.port-strip .fw{border:0;background:none}
.port-strip .row.caps{background:none;padding:0;margin-top:2px}
.port-strip .row.caps::before,.port-strip .row.caps::after{content:none}
.fr-cap .fc{margin:0;padding-top:12px;display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;font-family:var(--disp);font-stretch:100%;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;line-height:1.45;color:var(--ink2)}
.fr-cap .fc b{color:var(--ink);font-weight:600}
@media (max-width:800px){.port-strip .pwrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;margin-top:16px}.port-strip .pwrap>.row{display:contents}.port-strip .pwrap .fr{position:relative;padding:22px 0;background:#0b0c0e}.port-strip .pwrap .fr::before,.port-strip .pwrap .fr::after{content:'';position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,rgba(241,239,234,.3) 0 14px,transparent 14px 30px)}.port-strip .pwrap .fr::before{top:6px}.port-strip .pwrap .fr::after{bottom:6px}.port-strip .pwrap .fr:nth-child(1){order:1}.port-strip .pwrap .fr:nth-child(2){order:2}.port-strip .pwrap .fr-cap:nth-child(1){order:3}.port-strip .pwrap .fr-cap:nth-child(2){order:4}.port-strip .pwrap .fr:nth-child(3){order:5}.port-strip .pwrap .fr:nth-child(4){order:6}.port-strip .pwrap .fr-cap:nth-child(3){order:7}.port-strip .pwrap .fr-cap:nth-child(4){order:8}.port-strip .pwrap .fr-cap{margin-bottom:20px}}
@media (max-width:800px){.sheet .row:not(.r4) .fr:nth-child(5){display:block}}
@media (min-width:1000px){.ph-copy.past-edge .wrap{max-width:none;width:100%;padding-left:68.5vw;padding-right:3vw}.ph-copy.past-edge .in{width:auto;max-width:none;margin-left:0}}
.motion-note{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
/* seo: share row */
.share-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:10px;margin-top:clamp(40px,4vw,64px);grid-column:1/-1}
.share-row p{font-size:16px;color:var(--ink2)}
.share-row ul{display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0;padding:0}
.share-row a,.share-row button{font:600 16px var(--disp);font-stretch:100%;letter-spacing:.02em;min-height:44px;display:inline-flex;align-items:center;color:var(--ink)}
.share-row button{background:none;border:0;padding:0;text-decoration:underline;text-decoration-color:var(--link-rule);text-decoration-thickness:1.5px;text-underline-offset:5px}
.share-row button:hover{text-decoration-thickness:3px}
@media (max-width:800px){.share-row{flex-direction:column;align-items:flex-start}}
/* films: portrait strip, fifth film */
@media (max-width:800px){.port-strip .pwrap .fr:nth-child(5){order:9}.port-strip .pwrap .fr-cap:nth-child(5){order:10;grid-column:1}}
/* enquiry form: Turnstile slot, honeypot, error line (tools/import-swvw.py) */
.details .ts{grid-column:1/-1;min-height:0}
.details .ts:empty{display:none}
.details .ts iframe{max-width:100%}
.form .hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.status p.err{margin-top:0;color:#8a1c1c;font:500 17px/1.45 var(--serif)}
.status p.err a{color:inherit}
.status p.wait{margin-top:0;font:500 17px/1.45 var(--serif)}
.send[aria-busy="true"]{opacity:.6;cursor:progress}
@media (max-width:359px){.details .ts{transform:scale(.86);transform-origin:0 0;margin-bottom:-10px}}