:root{ --bg:#0c1018; --ink:#f2f2f0; --mute:#9aa0aa; --line:rgba(242,242,240,.16); --gap:12px; --side:max(16px,4vw,calc((100vw - 1440px)/2)); color-scheme:dark; }
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.5 "Inter Tight",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
.wrap{ padding-left:var(--side); padding-right:var(--side); }
.serif{ font-family:"Gloock",Georgia,serif; font-weight:400; }
/* header */
.hd{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px; background:rgba(12,16,24,.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.hd-logo{ text-decoration:none; font-family:"Gloock",Georgia,serif; font-size:20px; letter-spacing:.01em; }
.hd nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); font-size:15px; }
.hd nav a{ text-decoration:none; opacity:.75; transition:opacity .2s; }
.hd nav a:hover, .hd nav a[aria-current="page"]{ opacity:1; }
.hd nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.btn{ position:relative; isolation:isolate; display:inline-flex; align-items:center; text-decoration:none; border-radius:0; padding:12px 24px 13px; font-family:"Gloock",Georgia,serif; font-size:clamp(16px,1.2vw,18px); letter-spacing:.01em; line-height:1.1; border:1px solid var(--ink); color:var(--ink); background:transparent; transition:color .35s, background .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.btn::after{ content:""; position:absolute; inset:-1px; border:1px solid var(--ink); opacity:.45; transform:translate(6px,6px); transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s; pointer-events:none; z-index:-1; }
.btn:hover, .btn:focus-visible{ transform:translate(3px,3px); }
.btn:hover::after, .btn:focus-visible::after{ transform:translate(0,0); opacity:0; }
.btn--solid{ background:var(--ink); color:var(--bg) !important; opacity:1 !important; }
.btn--solid:hover{ background:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--bg) !important; }
.hd .btn{ padding:8px 16px 9px; font-size:15px; }
.hd .btn::after{ transform:translate(4px,4px); }
/* hero */
.hero{ position:relative; min-height:calc(100svh - 64px); display:flex; flex-direction:column; justify-content:flex-end; padding-top:clamp(40px,8vw,120px); padding-bottom:clamp(32px,5vw,64px); overflow:hidden; isolation:isolate; }
.hero, .contact-pg{ --mx:62%; --my:48%; --lr:clamp(200px,26vw,400px); }
.hero-bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:65% 45%; filter:brightness(1.35); -webkit-mask-image:radial-gradient(circle var(--lr) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.06) 100%); mask-image:radial-gradient(circle var(--lr) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.06) 100%); }
.hero .glow, .contact-pg .glow{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle calc(var(--lr) * 1.1) at var(--mx) var(--my), rgba(255,255,255,.06), transparent 70%); mix-blend-mode:screen; }
.contact-pg .bg img{ -webkit-mask-image:radial-gradient(circle var(--lr) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.06) 100%) !important; mask-image:radial-gradient(circle var(--lr) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.06) 100%) !important; opacity:1 !important; filter:brightness(1.8) saturate(.75) !important; }
@media (hover:none){ .hero, .contact-pg{ --lr:70vw; } }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(12,16,24,.92) 0%, rgba(12,16,24,.55) 50%, rgba(12,16,24,.15) 100%), linear-gradient(0deg, rgba(12,16,24,.9), rgba(12,16,24,0) 45%); }
.eyebrow{ font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin:0 0 18px; }
.avail{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); opacity:.85; margin-bottom:22px; }
.avail::before{ content:""; width:7px; height:7px; border-radius:50%; background:#7fd18b; }
.hero .hero-role{ margin:18px 0 0; }
.hero h1{ font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(44px,7.4vw,124px); line-height:.95; letter-spacing:-.02em; margin:0; max-width:14ch; }
.hero-sub{ max-width:52ch; font-size:clamp(16px,1.35vw,20px); line-height:1.5; margin:clamp(18px,2vw,28px) 0 0; opacity:.88; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:18px 22px; margin-top:clamp(22px,2.6vw,36px); }
/* sections */
.sec{ padding-top:clamp(64px,8vw,128px); padding-bottom:clamp(20px,3vw,40px); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(24px,3vw,44px); padding-bottom:16px; border-bottom:1px solid var(--line); }
.sec-head h2{ font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(36px,4.6vw,72px); line-height:1; margin:0; letter-spacing:-.01em; }
.sec-head a{ text-decoration:none; font-size:15px; opacity:.8; white-space:nowrap; } .sec-head a:hover{ opacity:1; }
/* cards */
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px); }
.cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.card-img{ position:relative; overflow:hidden; aspect-ratio:16/10; background:#141923; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .5s; filter:saturate(.92); }
.card:hover .card-img img, .card:focus-visible .card-img img{ transform:scale(1.04); filter:saturate(1.05); }
.card-top{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:16px; }
.card-t{ font-family:"Gloock",Georgia,serif; font-size:clamp(22px,1.9vw,28px); line-height:1.1; margin:0; }
.card-y{ font-size:13px; color:var(--mute); white-space:nowrap; }
.card-r{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:8px 0 0; font-weight:500; }
.card-c{ font-size:13.5px; color:var(--mute); margin:4px 0 0; }
.pj-r{ margin:14px 0 0; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; } .pj-r span{ color:var(--mute); margin-right:10px; }
.card-d{ font-size:15px; line-height:1.5; margin:10px 0 0; opacity:.9; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.tags li{ font-size:12px; border:1px solid var(--line); border-radius:999px; padding:3px 10px; color:var(--mute); }
.card-go{ margin-top:14px; font-size:14px; }
.card-go span{ display:inline-block; transition:transform .25s; } .card:hover .card-go span{ transform:translateX(4px); }
.card-img--type{ background:#000; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(18px,2vw,28px); }
.card-img--type span{ display:block; font-family:"Gloock",Georgia,serif; color:#f2f2f0; font-size:clamp(30px,3.4vw,56px); line-height:1.04; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.card-img--type span:nth-of-type(2){ opacity:.7; } .card-img--type span:nth-of-type(3){ opacity:.45; }
.card-img--type small{ position:absolute; top:clamp(16px,1.8vw,24px); left:clamp(18px,2vw,28px); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:#9aa0aa; }
.card:hover .card-img--type span{ transform:translateX(6px); }
.card--guide .card-img{ outline:1px solid #e8c98f; outline-offset:6px; }
.guide-badge{ position:absolute; top:12px; left:12px; z-index:2; background:#f2efe8; color:#1f1f1f; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.card:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }
/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(26px,3vw,40px); }
.filters button{ border:1px solid var(--line); background:none; color:var(--ink); font:inherit; font-size:14px; padding:8px 16px; border-radius:0; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.filters button:hover{ border-color:var(--ink); }
.filters button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.card[hidden]{ display:none; }
.page-title{ padding-top:clamp(48px,6vw,96px); padding-bottom:clamp(20px,2.4vw,32px); }
.page-title h1{ font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(52px,8vw,132px); line-height:.92; letter-spacing:-.02em; margin:0; }
.page-title p{ max-width:56ch; margin:16px 0 0; font-size:clamp(16px,1.3vw,19px); opacity:.85; }
/* about */
.about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(28px,4vw,64px); align-items:start; }
.about img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.about-lead{ font-family:"Gloock",Georgia,serif; font-size:clamp(22px,2vw,30px); line-height:1.3; margin:0 0 20px; }
.about p{ margin:0 0 14px; font-size:16.5px; line-height:1.6; opacity:.9; }
.about-links{ display:flex; flex-direction:column; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.about-links a{ text-decoration:none; font-family:"Gloock",Georgia,serif; font-size:19px; } .about-links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.principles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,28px); margin-top:clamp(36px,4vw,60px); }
#about .about > img{ max-height:min(70vh,560px); width:100%; object-fit:cover; object-position:50% 25%; }
.principles li{ list-style:none; border-top:1px solid var(--ink); padding-top:14px; }
.principles{ padding:0; }
.principles b{ display:block; font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(20px,1.7vw,26px); margin-bottom:8px; }
.principles span{ font-size:15px; opacity:.8; line-height:1.5; }
.facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,28px); margin-top:clamp(40px,5vw,72px); }
.facts h3{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); font-weight:500; margin:0 0 10px; }
.facts p{ margin:0; font-size:15px; line-height:1.6; }
.clients{ margin-top:clamp(40px,5vw,72px); padding-top:20px; border-top:1px solid var(--line); }
.clients h3{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); font-weight:500; margin:0 0 12px; }
.clients p{ margin:0; font-family:"Gloock",Georgia,serif; font-size:clamp(20px,2.2vw,34px); line-height:1.3; }
.clients i{ font-style:normal; opacity:.35; padding:0 .3em; }
.press{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:24px; padding:0; list-style:none; }
.press li{ border-top:1px solid var(--line); padding-top:10px; font-size:14px; } .press a{ text-decoration:none; } .press span{ display:block; color:var(--mute); font-size:13px; }
/* CTA + footer */
.cta{ margin-top:clamp(64px,8vw,128px); padding-top:clamp(48px,6vw,96px); padding-bottom:clamp(48px,6vw,96px); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.cta h2{ font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(36px,5vw,84px); line-height:1; margin:0; max-width:15ch; letter-spacing:-.01em; }
.ft{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; padding-top:32px; padding-bottom:40px; border-top:1px solid var(--line); font-size:14px; }
.ft h4{ margin:0 0 10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); font-weight:500; }
.ft a{ text-decoration:none; display:block; margin-bottom:6px; opacity:.85; } .ft a:hover{ opacity:1; text-decoration:underline; }
.ft p{ margin:0 0 6px; opacity:.85; }
.ft-big{ font-family:"Gloock",Georgia,serif; font-size:clamp(22px,2vw,30px) !important; opacity:1 !important; }
/* project page */
.pj-back{ display:inline-block; margin:clamp(28px,3vw,44px) 0 0; text-decoration:none; font-size:14px; opacity:.75; } .pj-back:hover{ opacity:1; }
.pj-next{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:clamp(56px,7vw,110px); padding-top:24px; border-top:1px solid var(--line); text-decoration:none; }
.pj-next small{ display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; }
.pj-next b{ font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(30px,4vw,64px); line-height:1; }
.pj-next span.arr{ font-size:clamp(28px,3vw,48px); transition:transform .3s; } .pj-next:hover span.arr{ transform:translateX(8px); }
.pj-tags{ margin-top:-6px; margin-bottom:22px; }
#hidden-orchestra .eyebrow{ margin-top:-8px; }
.ho-intro{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,64px); margin:clamp(20px,2vw,32px) 0 clamp(36px,4vw,56px); }
.ho-lead{ font-family:"Gloock",Georgia,serif; font-size:clamp(22px,2vw,30px); line-height:1.25; margin:0; }
.ho-body p{ margin:0 0 14px; color:var(--ink); opacity:.85; max-width:62ch; }
.ho-links{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; } .ho-links a{ text-decoration:underline; text-underline-offset:3px; }
.ho-draw h3{ font:500 12.5px/1 "Inter Tight",sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin:0 0 4px; }
.jrow{ display:flex; gap:var(--gap); margin-top:var(--gap); align-items:flex-start; }
.jrow .jf{ min-width:0; margin:0; } .jrow .jf img{ width:100%; height:auto; display:block; background:#f2efe8; }
.jrow figcaption{ font-size:13px; color:var(--mute); margin-top:8px; }
@media (max-width:680px){ .ho-intro{ grid-template-columns:1fr; } .jrow{ flex-wrap:wrap; } .jrow .jf{ flex-basis:100% !important; } }
.feat{ display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(20px,3vw,48px); align-items:end; margin-top:clamp(44px,5vw,72px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line); text-decoration:none; color:inherit; }
.feat-media{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
.feat-media video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.feat:hover .feat-media video{ transform:scale(1.03); }
.feat-k{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#e8c98f; margin:0 0 14px; }
.feat h3{ font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(30px,3.2vw,48px); line-height:1.05; margin:0; }
.feat-d{ font-size:15px; line-height:1.55; opacity:.85; margin:14px 0 0; }
.feat-why{ font-family:"Gloock",Georgia,serif; font-size:clamp(17px,1.4vw,20px); line-height:1.35; margin:16px 0 0; padding-left:14px; border-left:2px solid #e8c98f; }
.feat .card-go{ margin-top:18px; display:inline-block; }
@media (max-width:760px){ .feat{ grid-template-columns:1fr; } }
/* project titles: same face as the LinkedIn carousel */
.card-t, .feat h3, .tp-title, .ho-more b{ font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif !important; font-weight:500 !important; letter-spacing:0 !important; }
.card-t{ font-size:clamp(26px,2.2vw,34px) !important; line-height:1.02 !important; }
.feat h3{ font-size:clamp(36px,3.8vw,56px) !important; line-height:1 !important; }
/* --- less templated: editorial, asymmetric, fewer UI chips --- */
.avail{ font:400 12px/1.4 "IBM Plex Mono",ui-monospace,monospace !important; letter-spacing:.06em; opacity:.7 !important; }
.avail::before{ display:none !important; }
.card .tags, .feat .card-go, .card .card-go{ display:none !important; }
.card-top{ border-top:1px solid var(--line); padding-top:12px; margin-top:14px; align-items:baseline; }
.card-y{ font:400 12px/1 "IBM Plex Mono",ui-monospace,monospace; opacity:.6; }
.card-r{ letter-spacing:.08em !important; font-size:11px !important; opacity:.75; }
.card-d{ max-width:46ch; opacity:.82; }
.card-img img{ filter:none !important; }
.cards.cards--2{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(16px,2.4vw,36px); row-gap:clamp(48px,6vw,96px); }
.cards--2 > .card:nth-child(4n+1){ grid-column:1 / span 7; }
.cards--2 > .card:nth-child(4n+2){ grid-column:9 / span 4; margin-top:clamp(60px,10vw,160px); }
.cards--2 > .card:nth-child(4n+3){ grid-column:2 / span 5; }
.cards--2 > .card:nth-child(4n+4){ grid-column:7 / span 6; margin-top:clamp(40px,6vw,100px); }
.cards--2 > .card:nth-child(4n+2) .card-img, .cards--2 > .card:nth-child(4n+3) .card-img{ aspect-ratio:4/5; }
.cards--2 > .card:nth-child(4n+1) .card-img{ aspect-ratio:3/2; }
.principles{ display:block !important; columns:2; column-gap:clamp(24px,4vw,64px); max-width:980px; }
.principles li{ border-top:0 !important; padding:0 !important; margin:0 0 14px; break-inside:avoid; }
.principles b{ display:inline !important; font-size:inherit !important; font-family:inherit !important; font-weight:600 !important; margin:0 !important; }
.principles b::after{ content:" — "; font-weight:400; }
.principles span{ font-size:16px !important; }
.sec-head{ border-bottom:0 !important; padding-bottom:0 !important; }
@media (max-width:760px){ .cards.cards--2 > .card{ grid-column:1 / -1 !important; margin-top:0 !important; } .cards--2 > .card .card-img{ aspect-ratio:4/3 !important; } .principles{ columns:1; } }
.sec--light{ background:#f2efe8; color:#1f1f1f; --ink:#1f1f1f; --mute:#6a6a66; --line:rgba(31,31,31,.2); color-scheme:light; padding-bottom:clamp(64px,8vw,120px); }
.sec--light a{ color:#1f1f1f; }
.sec--light .btn--solid{ background:#1f1f1f; color:#f2efe8 !important; border-color:#1f1f1f; }
.ho-body .btn{ margin-top:10px; }
.sec--light + .sec--light{ border-top:1px solid rgba(31,31,31,.14); }
.sec--light .ho-more{ border-top-color:rgba(31,31,31,.4) !important; }
.sec--light .jrow .jf img{ background:#fff; }
.page-guide{ background:#f2efe8; color:#1f1f1f; --ink:#1f1f1f; --mute:#6a6a66; --line:rgba(31,31,31,.2); }
.page-guide .hd{ background:rgba(242,239,232,.9); }
.page-guide .btn--solid{ background:#1f1f1f; color:#f2efe8 !important; border-color:#1f1f1f; }
/* lightbox */
.lb{ border:0; padding:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; background:rgba(6,8,12,.96); }
.lb[open]{ display:flex; align-items:center; justify-content:center; }
.lb img{ max-width:94vw; max-height:88dvh; object-fit:contain; }
.lb button{ position:fixed; top:14px; right:16px; background:none; border:1px solid #f2f2f0; color:#f2f2f0; border-radius:999px; font-size:18px; width:40px; height:40px; cursor:pointer; }
.pj-gal img{ cursor:zoom-in; }
/* contact */
.contact-pg{ position:relative; min-height:calc(100svh - 64px); display:flex; flex-direction:column; justify-content:space-between; padding-top:clamp(48px,6vw,96px); padding-bottom:clamp(32px,4vw,56px); overflow:hidden; isolation:isolate; }
.contact-pg .bg{ position:absolute; inset:0; z-index:-2; } .contact-pg .bg img{ width:100%; height:100%; object-fit:cover; opacity:.45; filter:saturate(.7); }
.contact-pg::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(12,16,24,.95), rgba(12,16,24,.5)); }
.c-mail{ font-family:"Gloock",Georgia,serif; font-size:clamp(30px,4.4vw,72px); text-decoration:none; border-bottom:1px solid currentColor; }
.c-list{ display:grid; grid-template-columns:auto 1fr; gap:10px 28px; margin:clamp(28px,3vw,44px) 0 0; max-width:640px; font-size:16px; }
.c-list dt{ color:var(--mute); } .c-list dd{ margin:0; } .c-list a{ text-decoration:none; } .c-list a:hover{ text-decoration:underline; }
.giant{ font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(56px,10vw,170px); line-height:.9; letter-spacing:-.02em; margin:clamp(40px,6vw,80px) 0 0; }
@media (max-width:1000px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } .principles{ grid-template-columns:1fr 1fr; } .press{ grid-template-columns:1fr 1fr; } .ft{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .cards, .cards--2{ grid-template-columns:1fr; } .about{ grid-template-columns:1fr; } .facts{ grid-template-columns:1fr; } .hd nav .hide-m{ display:none; } .hd-logo{ font-size:17px; } .hd nav{ gap:14px; font-size:14px; } .hero h1{ font-size:clamp(40px,12vw,64px); } .principles{ grid-template-columns:1fr; } }

/* project template (reused) */
.perf-media{ width:100%; }
.perf-media video, .perf-media img{ width:100%; display:block; }
.onic-more{ margin-top:clamp(40px,5vw,72px); }
.onic-list{ list-style:none; padding:0; margin:10px 0 14px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--gap); }
.onic-list li{ border-top:1px solid currentColor; padding-top:8px; }
.onic-list a, .onic-more .small a{ text-decoration:none; font-size:clamp(17px,1.4vw,22px); letter-spacing:-.01em; }
.onic-more .small a{ font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.onic-list a::after{ content:" ↗"; font-size:.8em; }
.onic-list a:hover{ text-decoration:underline; text-underline-offset:4px; }
@media (max-width: 860px){ .onic-list{ grid-template-columns:1fr 1fr; } }
.making, .pb-label, .cx-label, .onic-more{ margin-top:clamp(28px,3vw,44px) !important; }
.perf-media video{ width:100% !important; height:auto !important; max-height:none !important; max-width:none !important; object-fit:cover; margin:0 !important; }
.ins-lead{ font-family:"Gloock",Georgia,serif; font-size:clamp(19px,1.7vw,26px); line-height:1.3; max-width:46ch; margin:clamp(28px,3vw,44px) 0 clamp(24px,3vw,40px); }
.ins-list{ border-top:1px solid rgba(242,242,240,.35); }
.ins-row{ display:grid; grid-template-columns:44px minmax(0,2.2fr) 70px minmax(0,2fr) minmax(0,2.4fr) auto; gap:10px 20px; align-items:baseline; padding:20px 0; border-bottom:1px solid rgba(242,242,240,.2); text-decoration:none; color:inherit; transition:padding .4s cubic-bezier(.2,.8,.2,1), background .3s; }
.ins-row:hover{ padding-left:14px; background:rgba(242,242,240,.04); }
.ins-n{ font-size:12px; opacity:.6; }
.ins-t{ font-family:"Gloock",Georgia,serif; font-size:clamp(20px,1.9vw,28px); line-height:1.1; }
.ins-y{ font-size:13px; opacity:.7; }
.ins-c{ font-size:13px; line-height:1.5; }
.ins-c em{ font-style:normal; opacity:.65; }
.ins-d{ font-size:13.5px; line-height:1.5; opacity:.85; }
.ins-go{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; border-bottom:1px solid currentColor; }
.ins .onic-list li{ border-color:rgba(242,242,240,.35); }
@media (max-width:860px){ .ins-row{ grid-template-columns:30px minmax(0,1fr); } .ins-y,.ins-c,.ins-d,.ins-go{ grid-column:2; } .st-list{ grid-template-columns:1fr !important; } }
.ins-band{ background:#000; color:#f2f2f0; width:100vw; margin:14px 0 0 calc(50% - 50vw); min-height:clamp(240px,40vh,440px); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:0 max(12px,1.2vw) clamp(14px,1.6vw,24px); box-sizing:border-box; }
.ins-band .ptitle{ margin:0 !important; line-height:.86; color:#f2f2f0; }
.ins-band-m{ font-size:13px; opacity:.7; white-space:nowrap; padding-bottom:.6em; }
@media (max-width:760px){ .ins-band{ flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:8px; } }
.ins-band{ min-height:clamp(170px,26vh,300px) !important; }
.ins-intro{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:calc(var(--gap)*3); align-items:start; margin:clamp(28px,3vw,44px) 0 clamp(18px,2vw,28px); }
.ins-intro .ins-lead{ margin:0 !important; }
.ins-facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
.ins-facts li{ border-top:1px solid rgba(242,242,240,.3); padding-top:10px; font-size:13px; line-height:1.4; opacity:.85; }
.ins-facts b{ display:block; font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(18px,1.6vw,24px); line-height:1.15; opacity:1; margin-bottom:2px; }
.ins-hint{ font-size:13px; opacity:.7; margin:0 0 10px; }
.ins-row{ grid-template-columns:36px minmax(0,2.1fr) minmax(0,1fr) minmax(0,1.7fr) minmax(0,2.2fr) auto !important; align-items:center !important; padding:24px 0 !important; }
.ins-tt{ display:flex; flex-direction:column; gap:4px; }
.ins-tag{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.ins-tt .ins-y{ font-size:12px; opacity:.6; }
.ins-k{ font-size:12px; line-height:1.3; opacity:.8; }
.ins-k b{ display:block; font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(28px,2.8vw,44px); line-height:1; opacity:1; color:#f2f2f0; }
.ins-go{ border:1px solid rgba(242,242,240,.7) !important; border-radius:999px; padding:7px 14px; text-transform:none !important; letter-spacing:.01em !important; font-size:13px !important; transition:background .2s, color .2s; }
.ins-go i{ font-style:normal; display:inline-block; transition:transform .2s; }
.ins-row:hover .ins-go, .ins-row:focus-visible .ins-go{ background:#f2f2f0; color:#0c1018; }
.ins-row:hover .ins-go i{ transform:translate(2px,-2px); }
.ins-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin:clamp(28px,3vw,44px) 0 clamp(36px,4vw,56px); padding:clamp(18px,2vw,26px) 0; border-top:1px solid rgba(242,242,240,.35); border-bottom:1px solid rgba(242,242,240,.35); }
.ins-cta p{ margin:0; font-family:"Gloock",Georgia,serif; font-size:clamp(20px,1.9vw,28px); }
.ins-cta a{ text-decoration:none; background:#f2f2f0; color:#0c1018; border-radius:999px; padding:10px 20px; font-size:14px; white-space:nowrap; }
.ins-cta a i{ font-style:normal; display:inline-block; transition:transform .2s; }
.ins-cta a:hover i{ transform:translateX(3px); }
@media (max-width:860px){ .ins-intro{ grid-template-columns:1fr; row-gap:24px; } .ins-row{ grid-template-columns:30px minmax(0,1fr) !important; row-gap:10px !important; align-items:start !important; } .ins-row > :not(.ins-n){ grid-column:2; } .ins-k b{ display:inline; margin-right:6px; font-size:26px; } .ins-go{ justify-self:start; } }
.mv-film{ margin:clamp(28px,3vw,48px) 0 clamp(20px,2vw,32px); }
.mv-film video{ width:100%; height:auto; display:block; background:#000; aspect-ratio:16/9; }
.mv-film figcaption{ font-size:12px; font-style:italic; color:var(--mute); padding-top:6px; }
@media (min-width:1000px){
 :root{ --side:max(var(--gap), 4vw, calc((100vw - 1440px) / 2)); }
 .wrap{ padding-inline:var(--side) !important; }
 body > footer.wrap, footer.wrap{ padding-right:calc(var(--side) + 64px) !important; }
 .tc{ padding-left:var(--side) !important; padding-right:var(--side) !important; }
 .ins-band{ padding-left:var(--side) !important; padding-right:var(--side) !important; }
 #magical-vision > .mv-film, #magical-vision > .jrow{ margin-left:var(--side) !important; margin-right:var(--side) !important; width:auto !important; max-width:none !important; }
}
.ho-more{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:center; margin:clamp(32px,4vw,56px) 0 0; padding-top:18px; border-top:1px solid var(--ink); }
.ho-more-img img{ width:100%; height:auto; display:block; aspect-ratio:1400/788; object-fit:cover; }
.ho-more p{ margin:0; font-size:14.5px; line-height:1.6; }
.ho-more b{ display:block; font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(18px,1.5vw,22px); margin-bottom:4px; }
.ho-more a{ text-underline-offset:3px; }
.ho-more-go{ opacity:.6; white-space:nowrap; }
@media (max-width:640px){ .ho-more{ grid-template-columns:110px minmax(0,1fr); gap:14px; } }
.ins-row{ scroll-margin-top:110px; }
.mv-dec{ margin:clamp(8px,1vw,14px) 0 clamp(24px,3vw,40px); }
.mv-dec ul{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,28px); }
.mv-dec li{ border-top:1px solid rgba(242,242,240,.35); padding-top:12px; font-size:14px; line-height:1.5; opacity:.92; }
.mv-dec b{ display:block; font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(18px,1.5vw,22px); margin-bottom:6px; }
@media (max-width:900px){ .mv-dec ul{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .mv-dec ul{ grid-template-columns:1fr; } }
.pplane{ position:fixed; left:0; top:0; z-index:40; width:56px; height:30px; display:block; transform:translate(-200px,-200px); will-change:transform; filter:drop-shadow(0 7px 8px rgba(0,0,0,.28)); cursor:pointer; }
.pplane svg{ width:100%; height:100%; display:block; overflow:visible; }
.pp-body{ transform-origin:0 0; }
.pp-tip{ position:absolute; right:-6px; bottom:40px; white-space:nowrap; background:#0c1018; color:#f2f2f0; font:11px/1.35 "Inter Tight",Helvetica,Arial,sans-serif; letter-spacing:.04em; padding:7px 10px; opacity:0; pointer-events:none; transition:opacity .25s; text-align:center; }
.pp-tip b{ font-family:"Gloock",Georgia,serif; font-weight:400; font-size:14px; letter-spacing:0; }
.pplane:hover .pp-tip, .pplane:focus-visible .pp-tip{ opacity:1; }
.pplane:focus-visible{ outline:2px solid #f2f2f0; outline-offset:4px; }
.pp-trail{ position:fixed; inset:0; width:100vw; height:100vh; z-index:39; pointer-events:none; }
@media (max-width:760px){ .pplane{ width:42px; height:22px; } }
.pplane{ transition:filter .4s; }
.pplane.on-light{ filter:drop-shadow(0 0 .7px rgba(12,16,24,.95)) drop-shadow(0 0 .7px rgba(12,16,24,.6)) drop-shadow(0 6px 7px rgba(0,0,0,.22)); }
.tp-cat{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.7; margin:0 0 6px; }
.tp-title{ font-family:"Gloock",Georgia,serif; font-weight:400; font-size:clamp(40px,6vw,96px); line-height:.95; letter-spacing:-.02em; margin:0 0 clamp(18px,2vw,28px); padding-bottom:clamp(12px,1.4vw,18px); border-bottom:1px solid rgba(242,242,240,.35); }
#instronic .ins-band{ margin-top:0 !important; }
.wk-main .pj{ padding-top:0; }
.wk-main .pj-hero img, .wk-main .pj-hero video{ max-height:62vh; }
.wk-main .tp-title{ font-size:clamp(38px,4.6vw,76px); }
.wk-main .pj-meta{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){
 .wk{ grid-template-columns:1fr; gap:14px; padding-top:16px; }
 .wk-side{ position:sticky; top:41px; z-index:8; max-height:none; overflow:visible; background:#0c1018; margin:0 calc(-1 * var(--gap)); padding:8px var(--gap) 10px; border-bottom:1px solid rgba(242,242,240,.15); }
 .wk-h{ display:none; }
 .wk-side .tabs-in{ flex-direction:row !important; overflow-x:auto !important; gap:6px !important; scrollbar-width:none; }
 .wk-side .tab{ width:auto; padding:6px 12px !important; border:1px solid rgba(242,242,240,.45) !important; border-radius:999px !important; }
 .wk-side .tab[aria-selected="true"]{ background:#f2f2f0 !important; color:#0c1018 !important; }
 .wk-side .tab-n{ font-family:inherit; font-size:13px; white-space:nowrap; }
 .wk-side .tab-c, .wk-side .tab-sep{ display:none; }
 .wk-main .pj-meta{ grid-template-columns:1fr 1fr; }
}
#p-hidden-orchestra .tp-cat{ color:#8a5a1f; opacity:1; }
#p-hidden-orchestra .tp-title{ border-bottom-color:rgba(31,31,31,.35); }
#p-hidden-orchestra .pj-role{ border-top-color:rgba(31,31,31,.4); }
#p-hidden-orchestra .pj-gal--contain img{ background:#e8e4da; }
#p-hidden-orchestra .ho-more{ border-top-color:rgba(31,31,31,.4) !important; }
#p-hidden-orchestra .pj-hero img{ object-fit:contain; background:#e8e4da; }
.pj{ padding-top:clamp(28px,4vw,56px); }
.pj + .pj{ margin-top:clamp(40px,5vw,72px); border-top:1px solid rgba(242,242,240,.25); }
.pj-meta{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 24px; margin:0 0 clamp(20px,2.4vw,32px); }
.pj-meta dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-bottom:3px; }
.pj-meta dd{ margin:0; font-size:14px; line-height:1.4; }
.pj-hero img, .pj-hero video{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; background:#000; }
.pj-hero figure{ margin:0; }
.pj-hero figcaption{ font-size:12px; font-style:italic; opacity:.6; padding-top:6px; }
.pj-hero:empty{ display:none; }
.pj-hero-band{ background:#000; min-height:clamp(140px,18vw,240px); display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 28px; padding:clamp(16px,2vw,28px); font-family:"Gloock",Georgia,serif; font-size:clamp(24px,3vw,44px); line-height:1; }
.pj-body{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(20px,3vw,48px); margin:clamp(22px,2.6vw,36px) 0; }
.pj-sum{ margin:0; font-family:"Gloock",Georgia,serif; font-size:clamp(19px,1.6vw,25px); line-height:1.35; }
.pj-role{ border-top:1px solid rgba(242,242,240,.4); padding-top:12px; }
.pj-role h3{ margin:0 0 6px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; opacity:.75; }
.pj-role p{ margin:0; font-size:15px; line-height:1.55; }
.pj-gal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.pj-gal figure{ margin:0; }
.pj-gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#141923; cursor:zoom-in; }
.pj-gal--contain img{ object-fit:contain; background:#f2efe8; }
.pj-gal figcaption{ font-size:12px; font-style:italic; opacity:.6; padding-top:6px; }
.pj-links{ margin:clamp(18px,2vw,26px) 0 4px; font-size:14px; }
.pj-links a{ text-underline-offset:3px; }
.pj-credit{ margin:0; font-size:12px; opacity:.55; }
.pj .mv-dec{ margin-top:clamp(32px,4vw,56px); }
.pj .ins-list{ margin-top:8px; }
.pj .onic-more{ margin-top:clamp(28px,3vw,44px); }
.pj .ho-more{ border-top-color:rgba(242,242,240,.4) !important; }
.pj .ho-more a{ color:inherit; }
.tabpanel .pj:first-child{ padding-top:0; }
@media (max-width:760px){ .pj-meta{ grid-template-columns:1fr 1fr; } .pj-body{ grid-template-columns:1fr; } .pj-gal{ grid-template-columns:1fr 1fr; gap:8px; } }
.pj{ padding-left:0 !important; padding-right:0 !important; }
#guide .pj-gal--contain img{ background:#e8e4da; } .page-guide .pj-role{ border-top-color:rgba(31,31,31,.4); } .page-guide .tp-title{ border-bottom-color:rgba(31,31,31,.35); } .page-guide .tp-cat{ color:#8a5a1f; opacity:1; } .page-guide .ho-more{ border-top-color:rgba(31,31,31,.4) !important; } .page-guide .pj-hero img{ object-fit:contain; background:#e8e4da; }