/* Case study: Circles Conference 2027 (_case-study-circles2027.php). Loads after case-study-showcase.css; scoped to .c27x.
   Titles stay Gilroy 600 like the rest of circlesco.com; the conference type (C27, Archivo, Geist Mono) lives inside the artwork. */
@font-face{font-family:C27;src:url(../fonts/c27/Circles2027Display-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:C27;src:url(../fonts/c27/Circles2027Display-Thin.woff2) format("woff2");font-weight:200;font-display:swap}
.c27x{--red:#D13A1E;--stage:#0B0B0D;--paper:#EDEBE6}
.c27x .mono{font:600 12px/1.2 "Geist Mono","Space Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.c27x .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.c27x .hero{background:#120604}
.c27x .hero img{opacity:.78}
.c27x .hero .eyebrow{color:#FFB4A5}
.c27x figure{margin:0}
.c27x .x-head{max-width:760px}
.c27x .x-head h2{font-weight:600;font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:normal;margin-top:18px}
.c27x .x-head .lead{font-size:18px;line-height:1.65;color:var(--muted);margin:22px 0 0;max-width:640px}
.c27x .x-sub{margin-top:120px}

/* dark bands: the conference's own stage */
.c27x .x-dark{background:var(--stage);color:#F5F5F7;border-radius:28px;padding:clamp(56px,8vw,120px) clamp(24px,6vw,104px);margin-top:40px;overflow:hidden;position:relative}
.c27x .x-dark .eyebrow{color:#FF8A73}
.c27x .x-dark h2,.c27x .x-dark h3{color:#fff!important}
.c27x .x-dark .lead{color:#A9A9B0}

/* 1. type */
.c27x .x-lock{display:flex;flex-direction:column;margin:clamp(56px,7vw,100px) 0 0;line-height:.86;user-select:none}
.c27x .x-lock .b{font:700 clamp(64px,15.4vw,236px)/.9 C27,Gilroy,sans-serif;letter-spacing:0;white-space:nowrap}
.c27x .x-lock .t{font:200 clamp(54px,12.6vw,194px)/1 C27,Gilroy,sans-serif;color:var(--red);margin-top:.06em}
.c27x .x-tester{margin-top:72px;border-top:1px solid #2A2A2E;border-bottom:1px solid #2A2A2E;padding:20px 0 6px}
.c27x .x-bar{display:flex;justify-content:space-between;align-items:center;color:#8C8C91}
.c27x .x-seg{display:flex;border:1px solid #3A3A3E;border-radius:999px;padding:3px}
.c27x .x-seg button{all:unset;cursor:pointer;font:600 13px Gilroy,sans-serif;color:#A9A9B0;padding:8px 16px;border-radius:999px}
.c27x .x-seg button.on{background:#F5F5F7;color:#0B0B0D}
.c27x .x-try{all:unset;display:block;width:100%;box-sizing:border-box;font:700 clamp(30px,6vw,92px)/1.25 C27,Gilroy,sans-serif;text-transform:uppercase;color:#fff;caret-color:var(--red);padding:18px 0 14px;outline:none!important;box-shadow:none!important;white-space:nowrap;overflow:hidden;text-overflow:clip}
.c27x .x-try.thin{font-weight:200}
.c27x .x-glyphs{display:grid;grid-template-columns:repeat(12,1fr);margin-top:56px;border-left:1px solid #2A2A2E;border-top:1px solid #2A2A2E}
.c27x .x-glyphs span{display:grid;place-items:center;aspect-ratio:1;border-right:1px solid #2A2A2E;border-bottom:1px solid #2A2A2E;font:700 clamp(22px,3.2vw,46px)/1 C27,Gilroy,sans-serif;transition:font-weight 0s,color .3s}
.c27x .x-glyphs span:hover,.c27x .x-glyphs span.lit{font-weight:200;color:var(--red)}
.c27x .x-three{list-style:none;padding:0;margin:72px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.c27x .x-three li{border-top:1px solid #2A2A2E;padding-top:22px}
.c27x .x-three .mono{color:var(--red)}
.c27x .x-three h3{font-weight:700;font-size:24px;margin-top:14px}
.c27x .x-three p{font-size:16px;line-height:1.6;color:#A9A9B0;margin:10px 0 0}

/* stage numbers in red */
.c27x .points .k{background:var(--red)}

/* 2. worlds */
.c27x .x-worlds{padding:40px 0 40px}
.c27x .x-switch{display:grid;grid-template-columns:330px 1fr;gap:40px;margin-top:64px;align-items:start}
.c27x .x-tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.c27x .x-tabs button{all:unset;cursor:pointer;display:grid;grid-template-columns:22px 30px 1fr;column-gap:12px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);position:relative}
.c27x .x-tabs s{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.c27x .x-tabs .n{font:600 12px "Geist Mono","Space Mono",monospace;color:var(--muted)}
.c27x .x-tabs b{font:600 19px/1.2 Gilroy,sans-serif;color:var(--ink)}
.c27x .x-tabs small{grid-column:3;font-size:14px;line-height:1.5;color:var(--muted);max-height:0;overflow:hidden;transition:max-height .45s,margin .45s}
.c27x .x-tabs [aria-selected=true] b{color:var(--red)}
.c27x .x-tabs [aria-selected=true] small{max-height:90px;margin-top:6px}
.c27x .x-tabs button:after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--red)}
.c27x .x-tabs [aria-selected=true]:after{width:calc(var(--t,0) * 100%)}
.c27x .x-screen{position:relative;padding:0 6% 9% 0}
.c27x .x-pane{display:none;position:relative}
.c27x .x-pane.on{display:block;animation:x-in .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes x-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.c27x .x-desk{border-radius:16px;overflow:hidden;border:1px solid #E1E1E6;background:#000;box-shadow:0 60px 120px -50px rgba(12,12,24,.45)}
.c27x .x-desk img{aspect-ratio:16/10;height:auto;object-position:50% 0}
.c27x .x-phone{position:absolute;right:-6%;bottom:-10%;width:23%;container-type:inline-size}
.c27x .x-phone img{height:auto;aspect-ratio:390/844;object-position:50% 0;border:3.6cqw solid #0C0C0E;border-radius:15.5cqw;background:#0C0C0E;box-shadow:0 0 0 1px #2A2A30,0 50px 90px -40px rgba(12,12,24,.6)}
.c27x .x-think{position:absolute;inset:0 6% 9% 0;border-radius:16px;background:#000;color:#F5F5F7;display:flex;align-items:center;gap:14px;padding:0 8%;font:600 clamp(17px,2vw,28px) Archivo,Gilroy,sans-serif;opacity:0;pointer-events:none;transition:opacity .25s;z-index:3}
.c27x .x-think.on{opacity:1}
.c27x .x-think svg{width:1.2em;height:1.2em;animation:x-spin 1s linear infinite;flex:none}
.c27x .x-think i{display:inline-block;width:.42em;height:1em;background:#F5F5F7;margin-left:-8px}
@keyframes x-spin{to{transform:rotate(360deg)}}

/* 3. people and AI */
.c27x .x-human{margin-top:120px}
.c27x .x-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:64px}
.c27x .x-cols>div{border:1px solid #2A2A2E;border-radius:22px;padding:36px 36px 30px}
.c27x .x-cols .h{border-color:var(--red);background:linear-gradient(160deg,rgba(209,58,30,.16),rgba(209,58,30,0) 60%)}
.c27x .x-cols .mono{color:#8C8C91} .c27x .x-cols .h .mono{color:#FF8A73}
.c27x .x-cols ul{list-style:none;padding:0;margin:20px 0 0}
.c27x .x-cols li{font:600 19px/1.4 Gilroy,sans-serif;padding:14px 0;border-top:1px solid #2A2A2E;color:#D7D7DC}
.c27x .x-cols .h li{color:#fff}

/* 4. gallery */
.c27x .x-gallery{padding:140px 0 0}
.c27x .x-masonry{columns:3;column-gap:20px;margin-top:56px}
.c27x .x-masonry figure,.c27x .x-real figure,.c27x .x-pages figure{position:relative;border-radius:18px;overflow:hidden;break-inside:avoid;margin:0 0 20px;background:#111}
.c27x .x-masonry img,.c27x .x-real img{height:auto}
.c27x figcaption{position:absolute;left:14px;bottom:12px;font:600 12px "Geist Mono","Space Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:6px 9px;border-radius:6px;backdrop-filter:blur(6px)}
.c27x .x-real{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.c27x .x-real figure{margin:0;aspect-ratio:4/3}
.c27x .x-real img{height:100%}

/* 5. social */
.c27x .x-social{padding:150px 0 0}
.c27x .x-feeds{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;perspective:1600px}
.c27x .x-feeds figure{border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(12,12,24,.5)}
.c27x .x-feeds img{aspect-ratio:4/5;height:auto}
.c27x .x-feeds figure:nth-child(1){transform:rotate(-2.5deg) translateY(18px)}
.c27x .x-feeds figure:nth-child(3){transform:rotate(2.5deg) translateY(18px)}
.c27x .x-stories{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;margin-top:96px;background:var(--stage);border-radius:28px;padding:clamp(40px,6vw,88px) clamp(24px,6vw,96px)}
.c27x .x-ph{container-type:inline-size;position:relative}
.c27x .x-ph img,.c27x .x-ph video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border:3.4cqw solid #1A1A1E;border-radius:13cqw;background:#000;box-shadow:0 0 0 1px #2E2E33,0 50px 90px -40px rgba(0,0,0,.8)}
.c27x .x-copy{color:#fff;text-align:center}
.c27x .x-copy .mono{color:#FF8A73}
.c27x .x-copy h3{font:700 clamp(30px,3.4vw,52px)/1 C27,Gilroy,sans-serif;color:#fff!important;margin:18px 0 0}
.c27x .x-copy p{color:#A9A9B0;font-size:16px;line-height:1.6;margin:16px auto 0;max-width:300px}
.c27x .x-strip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin:40px calc(-1 * clamp(20px,6vw,96px)) 0;padding:0 clamp(20px,6vw,96px) 12px;scrollbar-width:thin;outline:none}
.c27x .x-strip figure{flex:0 0 clamp(220px,24%,320px);scroll-snap-align:start;border-radius:14px;overflow:hidden;position:relative}
.c27x .x-strip img{aspect-ratio:4/5;height:auto}

/* 6. films */
.c27x .x-films{margin-top:150px}
.c27x .x-reels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);margin-top:72px;max-width:900px}
.c27x .x-reel .x-ph{max-width:340px}
.c27x .x-reel figcaption{position:static;background:none;padding:0;backdrop-filter:none;margin-top:28px;text-transform:none;letter-spacing:0;font:inherit;color:inherit}
.c27x .x-reel figcaption .mono{color:#FF8A73}
.c27x .x-reel h3{font-weight:700;font-size:24px;margin-top:10px}
.c27x .x-reel p{color:#A9A9B0;font-size:16px;line-height:1.6;margin:8px 0 0;max-width:340px}
.c27x .x-snd{all:unset;cursor:pointer;position:absolute;left:50%;bottom:7%;transform:translateX(-50%);font:600 13px Gilroy,sans-serif;color:#fff;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 16px;backdrop-filter:blur(8px);white-space:nowrap}
.c27x .x-snd[aria-pressed=true]{background:var(--red);border-color:var(--red)}

/* 7. pages */
.c27x .x-pages{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.c27x .x-pages figure{grid-column:span 2;margin:0;aspect-ratio:16/10;border:1px solid #E1E1E6}
.c27x .x-pages figure:nth-child(1),.c27x .x-pages figure:nth-child(2){grid-column:span 3}
.c27x .x-pages img{object-position:50% 0}
.c27x .x-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:150px;border-top:1px solid var(--line);padding-top:40px}
.c27x .x-nums b{display:block;font:700 clamp(56px,7vw,104px)/1 C27,Gilroy,sans-serif;color:var(--ink)}
.c27x .x-nums div:nth-child(3) b{color:var(--red)}
.c27x .x-nums span{display:block;margin-top:14px;font-size:15px;color:var(--muted)}
.c27x .next{padding-top:130px}
.c27x .card.live{background:var(--stage)} .c27x .card.live .eyebrow{color:#FF8A73}


/* 2. the stack: desktop, two phones and live cards, layered (sizes in % of the scene via cqw) */
.c27x .x-stack{margin-top:56px;border-radius:28px;padding:clamp(28px,5vw,80px) clamp(16px,4vw,64px);overflow:hidden;background:radial-gradient(55% 48% at 52% 58%,rgba(209,58,30,.42),rgba(209,58,30,0) 72%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,var(--stage)}
.c27x .s-scene{position:relative;container-type:inline-size;aspect-ratio:100/72}
.c27x .s-scene>*{position:absolute;margin:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),scale .9s cubic-bezier(.2,.7,.2,1);will-change:translate}
.c27x.anim .s-scene:not(.in)>*:not(.s-desk){opacity:0;scale:.92}
.c27x .s-scene>*:nth-child(2){transition-delay:.1s}.c27x .s-scene>*:nth-child(3){transition-delay:.18s}.c27x .s-scene>*:nth-child(4){transition-delay:.28s}.c27x .s-scene>*:nth-child(5){transition-delay:.36s}.c27x .s-scene>*:nth-child(6){transition-delay:.46s}.c27x .s-scene>*:nth-child(7){transition-delay:.56s}.c27x .s-scene>*:nth-child(8){transition-delay:.66s}
.c27x .s-desk{left:15cqw;top:8cqw;width:64cqw;border-radius:1.1cqw;overflow:hidden;background:#000;box-shadow:0 0 0 1px #2A2A30,0 60px 120px -40px rgba(0,0,0,.85);z-index:1}
.c27x .s-desk .bar{display:flex;align-items:center;gap:.55cqw;height:2.6cqw;padding:0 1.1cqw;background:#18181B;border-bottom:1px solid #26262A}
.c27x .s-desk .bar i{width:.75cqw;height:.75cqw;border-radius:50%;background:#3A3A3F}
.c27x .s-desk .bar span{margin:0 auto;font:600 .95cqw Gilroy,sans-serif;color:#8C8C91;background:#0F0F11;border-radius:.5cqw;padding:.35cqw 3cqw}
.c27x .s-desk img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.c27x .s-ph{container-type:inline-size}
.c27x .s-ph img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:50% 0;border:3.6cqw solid #0C0C0E;border-radius:15.5cqw;background:#0C0C0E;box-shadow:0 0 0 1px #34343A,0 50px 90px -30px rgba(0,0,0,.9)}
.c27x .s-ph1{left:73cqw;top:24cqw;width:17cqw;z-index:4}
.c27x .s-ph2{left:2cqw;top:15cqw;width:14.5cqw;rotate:-6deg;z-index:2}
.c27x .s-card{width:var(--w);--u:calc(var(--w) / var(--dw));box-shadow:0 40px 80px -30px rgba(0,0,0,.75);z-index:5}
.c27x .s-card .mono{font-family:"Geist Mono",monospace;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
/* the pass (drawn at 300 wide) */
.c27x .s-pass{--w:21cqw;--dw:300;left:8cqw;top:40cqw;rotate:-3deg;background:var(--paper);color:var(--stage)}
.c27x .s-pass .tp{padding:calc(22*var(--u)) calc(22*var(--u)) calc(18*var(--u))}
.c27x .s-pass .hd{display:flex;justify-content:space-between;font-size:calc(9.5*var(--u))}
.c27x .s-pass .hd b,.c27x .s-pass .ok b{color:var(--red);font-weight:600}
.c27x .s-pass .lk{margin-top:calc(22*var(--u));line-height:.86}
.c27x .s-pass .c{font:700 calc(39*var(--u))/1 C27,Gilroy,sans-serif}
.c27x .s-pass .y{font:200 calc(33*var(--u))/1 C27,Gilroy,sans-serif;margin-top:calc(4*var(--u))}
.c27x .s-pass .tr{display:flex;justify-content:space-between;align-items:flex-end;margin-top:calc(22*var(--u));padding-top:calc(14*var(--u));border-top:1px solid #D6D3CC;font-size:calc(9*var(--u));color:#6d6d72}
.c27x .s-pass .tr b{display:block;font:800 calc(17*var(--u)) Archivo,Gilroy,sans-serif;letter-spacing:-.01em;color:var(--stage);margin-top:calc(5*var(--u));text-transform:none}
.c27x .s-pass .tr .p{text-align:right}.c27x .s-pass .tr .p b{color:var(--red)}
.c27x .s-pass .rw{margin-top:calc(12*var(--u));font-size:calc(9.5*var(--u))}
.c27x .s-pass .rw div{display:flex;justify-content:space-between;padding:calc(6*var(--u)) 0;border-bottom:1px dashed #D6D3CC}
.c27x .s-pass .rw span{color:#6d6d72}
.c27x .s-pass .pf{border-top:2px dashed #BDB9B0;margin:0 calc(14*var(--u))}
.c27x .s-pass .st{display:flex;gap:calc(14*var(--u));align-items:center;padding:calc(16*var(--u)) calc(22*var(--u)) calc(20*var(--u))}
.c27x .s-pass .bc{flex:1;height:calc(40*var(--u));background:repeating-linear-gradient(90deg,var(--stage) 0 2px,transparent 2px 4px,var(--stage) 4px 5px,transparent 5px 8px,var(--stage) 8px 11px,transparent 11px 12px)}
.c27x .s-pass .ok{font-size:calc(9*var(--u));text-align:right;line-height:1.6}.c27x .s-pass .ok b{display:block}
/* the world switcher (400 wide) */
.c27x .s-worlds{--w:30cqw;--dw:400;left:63cqw;top:1.5cqw;background:#000;color:#F5F5F7;padding:calc(22*var(--u));box-shadow:0 0 0 1px #2A2A2E,0 40px 80px -30px rgba(0,0,0,.9)}
.c27x .s-worlds .th{display:flex;align-items:center;gap:calc(12*var(--u));font:600 calc(15*var(--u)) Archivo,Gilroy,sans-serif}
.c27x .s-worlds .th svg{width:calc(22*var(--u));height:calc(22*var(--u));animation:x-spin 1.4s linear infinite}
.c27x .s-worlds .th i{display:inline-block;width:calc(8*var(--u));height:calc(17*var(--u));background:#F5F5F7;vertical-align:-.15em;margin-left:calc(3*var(--u));animation:x-blink 1s steps(1) infinite}
@keyframes x-blink{50%{opacity:0}}
.c27x .s-worlds .lb{display:flex;justify-content:space-between;font-size:calc(9.5*var(--u));color:#8C8C91;margin-top:calc(20*var(--u))}
.c27x .s-worlds .w{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(6*var(--u));margin-top:calc(10*var(--u))}
.c27x .s-worlds .w div{border:1px solid #2A2A2E;padding:calc(9*var(--u));font:600 calc(10.5*var(--u))/1.25 Archivo,Gilroy,sans-serif}
.c27x .s-worlds .w s{display:block;width:calc(16*var(--u));height:calc(16*var(--u));border-radius:50%;margin-bottom:calc(9*var(--u));box-shadow:inset 0 0 0 1px #3a3a3e}
.c27x .s-worlds .w .on{border-color:var(--red);background:#1a0806}
/* workshop seat (280 wide) */
.c27x .s-seat{--w:20cqw;--dw:280;left:49cqw;top:50cqw;background:var(--red);color:#fff;padding:calc(20*var(--u)) calc(20*var(--u)) calc(22*var(--u))}
.c27x .s-seat>.mono{font-size:calc(9.5*var(--u));opacity:.85}
.c27x .s-seat b{display:block;font:800 calc(21*var(--u))/1.1 Archivo,Gilroy,sans-serif;letter-spacing:-.01em;margin:calc(10*var(--u)) 0 calc(14*var(--u))}
.c27x .s-seat .mt{display:flex;justify-content:space-between;font-size:calc(9.5*var(--u));padding:calc(8*var(--u)) 0;border-top:1px solid rgba(255,255,255,.3)}
.c27x .s-seat .br{height:calc(4*var(--u));background:rgba(255,255,255,.3);margin-top:calc(10*var(--u))}
.c27x .s-seat .br i{display:block;height:100%;background:#fff}
/* sale toast (360 wide) */
.c27x .s-toast{--w:30cqw;--dw:360;left:22cqw;top:2.2cqw;display:flex;align-items:center;gap:calc(10*var(--u));background:rgba(255,255,255,.94);color:var(--stage);border-radius:999px;padding:calc(12*var(--u)) calc(18*var(--u));font:500 calc(13*var(--u)) Archivo,Gilroy,sans-serif;z-index:6}
.c27x .s-toast i{flex:none;width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;background:var(--red);box-shadow:0 0 0 calc(4*var(--u)) rgba(209,58,30,.2);animation:x-pulse 2s ease-in-out infinite}
@keyframes x-pulse{50%{box-shadow:0 0 0 calc(8*var(--u)) rgba(209,58,30,0)}}
.c27x .s-toast b{font-weight:700}
.c27x .s-toast em{font-style:normal;margin-left:auto;font-size:calc(9.5*var(--u));color:#8C8C91}
/* the dates (160 wide) */
.c27x .s-day{--w:12cqw;--dw:160;left:84cqw;top:57cqw;background:var(--paper);color:var(--stage);padding:calc(16*var(--u)) calc(16*var(--u)) calc(18*var(--u));rotate:4deg;z-index:6}
.c27x .s-day .mono{display:block;font-size:calc(9*var(--u));color:#6d6d72}
.c27x .s-day b{display:block;font:700 calc(58*var(--u))/.92 C27,Gilroy,sans-serif;margin-top:calc(8*var(--u))}
.c27x .s-day b.t{font-weight:200;color:var(--red);margin:0 0 calc(10*var(--u))}

/* 4. the experience */
.c27x .x-exp{padding:150px 0 0}
.c27x .x-days{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;align-items:start}
.c27x .x-day:nth-child(2){margin-top:64px}
.c27x .x-day figure{border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:#111}
.c27x .x-day figure img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s cubic-bezier(.2,.7,.2,1)}
.c27x .x-day:hover figure img{scale:1.04}
.c27x .x-day .dt{display:flex;align-items:baseline;gap:14px;margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.c27x .x-day .dt .mono{color:var(--red)}
.c27x .x-day .dt b{font:700 64px/.9 C27,Gilroy,sans-serif;color:var(--ink);margin-left:auto}
.c27x .x-day h3{font-weight:600;font-size:24px;margin-top:6px}
.c27x .x-day p{font-size:16px;line-height:1.6;color:var(--muted);margin:10px 0 0}
.c27x .x-day .tag{display:inline-block;margin-top:16px;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--ink)}
.c27x .x-between{display:grid;grid-template-columns:5fr 7fr;gap:24px;margin-top:72px}
.c27x .x-walk{background:var(--stage);color:#fff;border-radius:28px;padding:clamp(32px,4vw,56px);display:flex;flex-direction:column}
.c27x .x-walk .mono{color:#FF8A73}
.c27x .x-walk b{font:700 clamp(120px,15vw,230px)/.85 C27,Gilroy,sans-serif;color:var(--red);margin:auto 0 0;padding-top:40px}
.c27x .x-walk p{font-size:18px;line-height:1.55;color:#C9C9CF;margin:20px 0 0;max-width:380px}
.c27x .x-night{position:relative;border-radius:28px;overflow:hidden;min-height:440px;background:#111}
.c27x .x-night img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c27x .x-night:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75))}
.c27x .x-night blockquote{position:absolute;left:clamp(24px,3.4vw,48px);right:clamp(24px,3.4vw,48px);bottom:clamp(24px,3vw,44px);margin:0;z-index:1;color:#fff;font:600 clamp(22px,2.4vw,36px)/1.2 Gilroy,sans-serif;max-width:620px}

/* 5. directing AI */
.c27x .x-steps{list-style:none;padding:0;margin:80px 0 0}
.c27x .x-steps>li{display:grid;grid-template-columns:4fr 8fr;gap:clamp(28px,4vw,64px);padding:56px 0;border-top:1px solid #2A2A2E;align-items:start}
.c27x .x-steps .k{font:600 13px "Geist Mono",monospace;letter-spacing:.16em;color:var(--red)}
.c27x .x-steps h3{font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin-top:14px}
.c27x .x-steps .tx p{font-size:16px;line-height:1.65;color:#A9A9B0;margin:14px 0 0;max-width:360px}
.c27x .ar-brief{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
.c27x .doc{background:var(--paper);color:var(--stage);border-radius:18px;padding:clamp(22px,2.6vw,36px);font-size:12px;line-height:1.55;letter-spacing:.1em}
.c27x .doc .dh{display:flex;justify-content:space-between;color:var(--red);padding-bottom:14px;border-bottom:1px solid #CFCBC2;margin-bottom:8px}
.c27x .doc p{margin:0;padding:11px 0;border-bottom:1px dashed #CFCBC2}
.c27x .doc .no{border:0;color:var(--red);padding-top:18px}
.c27x .doc .no b{display:block;font-weight:700;margin-bottom:4px}
.c27x.anim .doc p{opacity:0;translate:0 8px;transition:opacity .5s,translate .5s}
.c27x.anim .doc.in p{opacity:1;translate:none}
.c27x .doc p:nth-of-type(2){transition-delay:.15s}.c27x .doc p:nth-of-type(3){transition-delay:.3s}.c27x .doc p:nth-of-type(4){transition-delay:.45s}.c27x .doc p:nth-of-type(5){transition-delay:.6s}.c27x .doc p:nth-of-type(6){transition-delay:.85s}
.c27x .ar-brief figure{position:relative;border-radius:18px;overflow:hidden;background:#111}
.c27x .ar-brief figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c27x .ar-cut{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.c27x .ar-cut figure{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#111}
.c27x .ar-cut img{width:100%;height:100%;object-fit:cover;transition:filter .6s,opacity .6s}
.c27x .ar-cut .cut img{filter:grayscale(1) contrast(.9);opacity:.32}
.c27x .ar-cut .cut:hover img{opacity:.6}
.c27x .ar-cut .kept{box-shadow:0 0 0 2px var(--red)}
.c27x .ar-cut .kept figcaption{background:var(--red)}
.c27x .ar-cut .cut figcaption{background:rgba(255,255,255,.08);color:#8C8C91;text-decoration:line-through}
.c27x .ba{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1600/1382;background:#111;--x:50%}
.c27x .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c27x .ba .bf{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.c27x .ba>i{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.c27x .ba>i:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.c27x .ba .mono{position:absolute;top:16px;font-size:11px;color:#fff;background:rgba(0,0,0,.55);padding:6px 9px;border-radius:6px;backdrop-filter:blur(6px);pointer-events:none}
.c27x .ba .l{left:16px}.c27x .ba .r{right:16px;background:var(--red)}
.c27x .ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.c27x .ar-arch{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c27x .ar-arch div{min-width:0}.c27x .ar-arch div:first-child{grid-column:1/3}
.c27x .ar-arch div:first-child b{font-size:clamp(64px,8vw,132px)}
.c27x .ar-arch div{border:1px solid #2A2A2E;border-radius:22px;padding:clamp(22px,2.6vw,36px)}
.c27x .ar-arch b{display:block;font:700 clamp(44px,5vw,84px)/1 C27,Gilroy,sans-serif;color:#fff}
.c27x .ar-arch .r{border-color:var(--red);background:linear-gradient(160deg,rgba(209,58,30,.18),rgba(209,58,30,0) 60%)}
.c27x .ar-arch .r b{color:var(--red)}
.c27x .ar-arch span{display:block;margin-top:14px;font-size:15px;color:#A9A9B0}
.c27x .x-human .x-cols{margin-top:24px}

@media (max-width:900px){
 .c27x .x-switch{grid-template-columns:1fr;gap:28px}
 .c27x .x-tabs{flex-direction:row;overflow-x:auto;border:0;gap:8px;scrollbar-width:none;margin:0 -20px;padding:0 20px}
 .c27x .x-tabs::-webkit-scrollbar{display:none}
 .c27x .x-tabs button{display:flex;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
 .c27x .x-tabs .n,.c27x .x-tabs small,.c27x .x-tabs button:after{display:none}
 .c27x .x-tabs b{font-size:15px}
 .c27x .x-tabs [aria-selected=true]{border-color:var(--red)}
 .c27x .x-screen{padding:0 14% 22% 0}
 .c27x .x-think{inset:0 14% 22% 0}
 .c27x .x-phone{right:-2%;bottom:-4%;width:30%}
 .c27x .x-three,.c27x .x-cols,.c27x .x-reels{grid-template-columns:1fr;gap:32px}
 .c27x .x-glyphs{grid-template-columns:repeat(6,1fr)}
 .c27x .x-masonry{columns:2;column-gap:12px} .c27x .x-masonry figure{margin-bottom:12px}
 .c27x .x-real{grid-template-columns:1fr 1fr;gap:12px}
 .c27x .x-feeds{grid-template-columns:1fr 1fr;gap:14px} .c27x .x-feeds figure{transform:none!important} .c27x .x-feeds figure:nth-child(3){display:none}
 .c27x .x-stories{grid-template-columns:1fr 1fr;gap:20px} .c27x .x-copy{grid-column:1/3;grid-row:1}
 .c27x .x-pages{grid-template-columns:1fr 1fr;gap:12px} .c27x .x-pages figure,.c27x .x-pages figure:nth-child(1),.c27x .x-pages figure:nth-child(2){grid-column:auto}
 .c27x .x-pages figure:nth-child(1){grid-column:1/3}
 .c27x .x-nums{grid-template-columns:1fr 1fr;row-gap:40px;margin-top:100px}
 .c27x .x-gallery,.c27x .x-social{padding-top:100px} .c27x .x-human,.c27x .x-films{margin-top:100px}
 .c27x .x-reel .x-ph{max-width:280px}
 .c27x figcaption{font-size:10px;left:10px;bottom:9px}

 .c27x .x-days{grid-template-columns:1fr;gap:56px} .c27x .x-day:nth-child(2){margin-top:0}
 .c27x .x-day figure{aspect-ratio:4/3}
 .c27x .x-between{grid-template-columns:1fr}
 .c27x .x-night{min-height:360px}
 .c27x .x-steps>li{grid-template-columns:1fr;padding:44px 0}
 .c27x .x-exp{padding-top:100px}
}
@media (max-width:600px){
 .c27x .x-masonry{columns:1}
 .c27x .x-real{grid-template-columns:1fr}
 .c27x .x-cols>div{padding:26px 22px}
 .c27x .x-seg button{padding:7px 12px}

 .c27x .s-scene{aspect-ratio:100/128}
 .c27x .s-desk{left:0;top:14cqw;width:100cqw;border-radius:2cqw}
 .c27x .s-desk .bar{height:5cqw;gap:1cqw;padding:0 2cqw} .c27x .s-desk .bar i{width:1.4cqw;height:1.4cqw} .c27x .s-desk .bar span{font-size:2.4cqw}
 .c27x .s-ph1{left:62cqw;top:46cqw;width:34cqw}
 .c27x .s-pass{left:3cqw;top:63cqw;--w:46cqw}
 .c27x .s-toast{left:5cqw;top:1cqw;--w:90cqw}
 .c27x .s-ph2,.c27x .s-worlds,.c27x .s-seat,.c27x .s-day{display:none}
 .c27x .ar-brief{grid-template-columns:1fr} .c27x .ar-brief figure{aspect-ratio:4/5}
 .c27x .ar-cut{gap:8px}
 .c27x .ar-arch{grid-template-columns:1fr 1fr;gap:10px}
}
@media (prefers-reduced-motion:reduce){
 .c27x .x-pane.on{animation:none} .c27x .x-think svg,.c27x .s-worlds .th svg,.c27x .s-worlds .th i,.c27x .s-toast i{animation:none}
}
/* Mixed widths (owner, 2026-11-12): dark bands, the stack and the photo wall run edge to edge; text stays in the column. */
.c27x .x-dark,.c27x .x-stack{margin-inline:calc(50% - 50vw);border-radius:0;padding-inline:var(--gut)}
.c27x .s-scene{max-width:1320px;margin-inline:auto}
.c27x .x-masonry{margin-inline:calc(50% - 50vw);padding-inline:12px;column-gap:12px}
.c27x .x-masonry figure{margin-bottom:12px;border-radius:14px}
@media (min-width:1700px){.c27x .x-masonry{columns:4}}
/* Mostly full width, like the Circles site itself (owner, 2026-11-12): only the reading sections keep the 1320 column. */
.c27x{--gut:clamp(20px,6vw,96px)}
.c27x .wrap{max-width:none}
.c27x .facts,.c27x .statement,.c27x .two,.c27x .next{max-width:1320px;margin-left:auto;margin-right:auto}
.c27x .x-nums{max-width:1320px;margin-left:auto;margin-right:auto}
/* The type lockup scales with its own width, so CIRCLES always fits the band. */
.c27x .x-lock{container-type:inline-size;width:100%}
.c27x .x-lock .b{font-size:16.2cqw}
.c27x .x-lock .t{font-size:13.2cqw}
/* Wide screens: the films sit beside their heading instead of stranded on the left; the stories panel runs edge to edge. */
@media (min-width:1200px){
 .c27x .x-films{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,900px);column-gap:clamp(48px,6vw,120px);align-items:start}
 .c27x .x-films .x-head{position:sticky;top:120px}
 .c27x .x-films .x-reels{margin-top:0;max-width:none}
}
.c27x .x-stories{margin-inline:calc(50% - 50vw);border-radius:0;padding-inline:var(--gut)}
/* Full width, content too (owner, 2026-11-12): drop the 1320 caps; section heads split heading left, intro right. */
.c27x{--gut:clamp(20px,3.4vw,64px)}
.c27x .facts,.c27x .statement,.c27x .two,.c27x .next,.c27x .x-nums{max-width:none}
.c27x .s-scene{max-width:1680px}
@media (min-width:1100px){
 .c27x .x-head{max-width:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,2.6vw,48px);align-items:end}
 .c27x .x-head .eyebrow{grid-column:1/-1}
 .c27x .x-head h2{grid-column:1/8;font-size:clamp(48px,5.4vw,104px)}
 .c27x .x-head .lead{grid-column:9/13;max-width:none;margin:0}
 .c27x .x-films .x-head{display:block}
 .c27x .x-films .x-head h2{font-size:clamp(44px,4.4vw,84px)}
 .c27x .x-films .x-head .lead{margin-top:22px}
}
/* Mixed widths, round 3 (owner, 2026-11-12): reading sections sit in a 1440 column, two dark bands and the photo
   wall become rounded 1640 panels, and the site stack and films stay edge to edge. */
.c27x{--box:min(1640px,calc(100vw - 2 * clamp(12px,1.6vw,28px)))}
.c27x .facts,.c27x .statement,.c27x .two,.c27x .tour-head,.c27x .x-worlds,.c27x .x-exp,.c27x .x-gallery>.x-head,
.c27x .x-social,.c27x .pages,.c27x .x-nums,.c27x .next{max-width:1440px;margin-left:auto;margin-right:auto}
.c27x .x-type,.c27x .x-human{width:var(--box);margin-inline:calc(50% - var(--box) / 2);border-radius:clamp(20px,2vw,32px);padding-inline:clamp(24px,5vw,96px)}
.c27x .x-type>*,.c27x .x-human>*{max-width:1440px;margin-left:auto;margin-right:auto}
.c27x .x-masonry{width:var(--box);margin-inline:calc(50% - var(--box) / 2);padding-inline:0}
/* Hero (owner, 2026-11-12): the visor photo on its own wall color, in a rounded 1640 panel. The photo keeps its
   true size on the right and its motion trail fades into the wall, so the title sits on clean paper at the left. */
.c27x .x-hero{width:var(--box);margin-inline:calc(50% - var(--box) / 2);border-radius:clamp(20px,2vw,32px);background:#E8E5E0;height:min(86vh,900px);min-height:560px}
.c27x .x-hero:after{display:none}
.c27x .x-hero img{inset:0 0 0 auto;width:auto;height:100%;aspect-ratio:3/4;object-fit:cover;object-position:60% 30%;opacity:1;right:clamp(0px,4vw,96px);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
.c27x .x-hero .in{color:var(--stage);right:auto;max-width:min(56%,760px);flex-direction:column;align-items:flex-start;gap:28px}
.c27x .x-hero .eyebrow{color:var(--red)}
.c27x .x-hero h1{color:var(--stage)!important}
.c27x .x-hero p{color:#4A4A50;max-width:420px}
@media (max-width:900px){
 .c27x .x-hero{height:auto;min-height:0;display:flex;flex-direction:column}
 .c27x .x-hero img{position:relative;inset:auto;right:auto;width:100%;height:auto;aspect-ratio:1/1;object-position:62% 28%;-webkit-mask-image:none;mask-image:none}
 .c27x .x-hero .in{position:relative;left:auto;right:auto;bottom:auto;max-width:none;padding:28px 24px 32px}
}
/* The hero photo is now extended wide (images/c27/hero-visor-wide.jpg): it fills the panel, the title sits on the
   clean wall at the top left, above the motion trail. */
.c27x .x-hero img{inset:0;right:auto;width:100%;height:100%;aspect-ratio:auto;object-position:72% 40%;-webkit-mask-image:none;mask-image:none}
.c27x .x-hero .in{top:clamp(36px,4.4vw,72px);bottom:auto;max-width:min(52%,820px)}
.c27x .x-hero h1{font-size:clamp(46px,6.4vw,124px)}
@media (max-width:900px){
 .c27x .x-hero img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;object-position:78% 40%}
 .c27x .x-hero .in{top:auto}
}
/* Hero, final crop: the original photo fills the panel, framed on the visor; a soft shade on the left carries the title. */
.c27x .x-hero{height:min(80vh,820px)}
.c27x .x-hero img{object-position:58% 36%}
.c27x .x-hero:after{display:block;background:linear-gradient(90deg,rgba(11,11,13,.62),rgba(11,11,13,.18) 48%,rgba(11,11,13,0) 66%)}
.c27x .x-hero .in{top:auto;bottom:clamp(36px,4.4vw,72px);color:#fff}
.c27x .x-hero .eyebrow{color:#FFB4A5}
.c27x .x-hero h1{color:#fff!important}
.c27x .x-hero p{color:rgba(255,255,255,.88)}
@media (max-width:900px){
 .c27x .x-hero{height:auto}
 .c27x .x-hero img{aspect-ratio:1/1;object-position:62% 30%}
 .c27x .x-hero:after{display:none}
 .c27x .x-hero .in{color:var(--stage)} .c27x .x-hero h1{color:var(--stage)!important} .c27x .x-hero .eyebrow{color:var(--red)} .c27x .x-hero p{color:#4A4A50}
}