/* BEJÚ Creative — shared layout + components for every page.
Tokens and material primitives live in /tokens.css; this file is structure.
Documented in /DESIGN.md. No raw hex here — tokens only. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{overflow-x:hidden;min-height:100vh}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
main,header,footer,.nav{position:relative;z-index:1}
[hidden]{display:none!important}
/* ── container + 12-column grid ─────────────────────────────── */
.wrap{width:min(100% - 2 * var(--pad), var(--container));margin-inline:auto}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
/* ── section rhythm (one scale) ─────────────────────────────── */
.sec{padding-block:var(--sec-m)}
.sec-s{padding-block:var(--sec-s)}
.sec-l{padding-block:var(--sec-l)}
.sec + .sec{border-top:1px solid rgba(255,255,255,.045)}
/* anchor targets land below the floating nav */
[id]{scroll-margin-top:96px}
/* ── type ───────────────────────────────────────────────────── */
.display{font-weight:700;color:var(--ink);font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.grad{background:var(--silver-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h3,.h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink);text-wrap:balance}
.kicker{
display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.25rem;
font-size:var(--t-label);font-weight:600;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;color:var(--gold-solid);
text-wrap:balance;
}
/* the rule sits on the FIRST line even when the kicker wraps */
.kicker::before{content:'';flex:0 0 1.6rem;height:1px;margin-top:.75em;background:linear-gradient(90deg,var(--gold-bronze),var(--gold-champagne))}
.kicker.center{justify-content:center}
.lede{font-size:var(--t-lead);line-height:1.5;letter-spacing:-.01em;color:var(--body);max-width:40ch;text-wrap:pretty}
.body{font-size:var(--t-body);line-height:1.65;color:var(--body);max-width:62ch;text-wrap:pretty}
.body + .body{margin-top:1.1em}
.body strong,.lede strong{color:var(--ink);font-weight:600}
.caption{font-size:var(--t-caption);line-height:1.5;color:var(--muted)}
.link{color:var(--gold-solid);text-decoration:underline;text-decoration-color:rgba(216,184,101,.4);text-underline-offset:4px;text-decoration-thickness:1px;transition:color var(--dur-1) var(--ease-out),text-decoration-color var(--dur-1) var(--ease-out)}
.link:hover{color:var(--gold-champagne);text-decoration-color:var(--gold-champagne)}
.arrow-link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:600;color:var(--gold-solid);transition:color var(--dur-1) var(--ease-out)}
.arrow-link::after{content:'→';transition:transform var(--dur-1) var(--ease-out)}
.arrow-link:hover{color:var(--gold-champagne)}
.arrow-link:hover::after{transform:translateX(3px)}
.nowrap{white-space:nowrap} /* keeps a hyphenated word whole in balanced headings */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:16px;z-index:2000;padding:12px 16px;border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.skip:focus{top:16px}
/* ── buttons: materials come from tokens.css ────────────────── */
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn-sm{min-height:44px;padding:.6rem 1.15rem;font-size:.88rem}
/* ── nav: floating glass capsule ────────────────────────────── */
.nav{
position:fixed;top:14px;left:0;right:0;z-index:1000;margin-inline:auto;
width:min(calc(100% - 28px),calc(var(--container) + 48px));height:64px;padding:0 10px 0 20px;
display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:var(--r-xl);
background:var(--glass-bar);border:1px solid rgba(255,255,255,.1);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:var(--glass-bar-edge);
transition:transform var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
}
.nav.is-strong{background:var(--glass-fill-strong);border-color:var(--hairline-strong);box-shadow:var(--glass-highlight),var(--shadow-float)}
.nav.is-hidden{transform:translateY(calc(-100% - 20px))}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.nav{background:var(--surface)}}
.brand{display:flex;align-items:center;min-height:44px;border-radius:var(--r-sm)}
.brand img{height:1.7rem;width:auto;transition:opacity var(--dur-1) var(--ease-out)}
.brand:hover img{opacity:.75}
.nav-links{display:flex;align-items:center;gap:2px;position:relative;isolation:isolate}
.nav-marker{position:absolute;left:0;top:0;height:44px;border-radius:var(--r-pill);background:rgba(255,255,255,.075);box-shadow:var(--glass-bar-edge),inset 0 0 0 1px var(--hairline);pointer-events:none;z-index:-1;transform-origin:left center;opacity:0}
.nav-links.has-marker a:hover,.nav-links.has-marker a[aria-current="location"]{background:transparent;box-shadow:none}
.nav-links a{display:flex;align-items:center;min-height:44px;padding:0 .9rem;border-radius:var(--r-pill);font-size:.92rem;font-weight:400;color:var(--body);transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.nav-links a:hover,.nav-links a[aria-current="location"]{color:var(--ink);background:rgba(255,255,255,.07)}
.nav-links a[aria-current="location"]{box-shadow:inset 0 0 0 1px var(--hairline)}
.nav-end{display:flex;align-items:center;gap:6px}
.burger{display:none;width:44px;height:44px;border:0;background:none;border-radius:var(--r-pill);cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-1)}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21.5px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* mobile sheet */
.sheet{
position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;justify-content:center;
padding:96px var(--pad) 40px;background:var(--sheet-fill);
-webkit-backdrop-filter:saturate(160%) blur(30px);backdrop-filter:saturate(160%) blur(30px);
opacity:0;visibility:hidden;transition:opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2);
}
.sheet.is-open{opacity:1;visibility:visible;transition:opacity var(--dur-2) var(--ease-out),visibility 0s}
.sheet nav a{transform:translateY(12px);opacity:0;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.sheet.is-open nav a{transform:none;opacity:1}
.sheet.is-open nav a:nth-child(2){transition-delay:40ms}.sheet.is-open nav a:nth-child(3){transition-delay:80ms}.sheet.is-open nav a:nth-child(4){transition-delay:120ms}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.sheet{background:var(--canvas)}}
.sheet nav{display:flex;flex-direction:column;gap:4px}
.sheet nav a{display:flex;align-items:center;min-height:56px;font-size:clamp(1.8rem,8vw,2.4rem);font-weight:700;letter-spacing:-.035em;color:var(--ink);border-bottom:1px solid var(--hairline)}
.sheet nav a:hover{color:var(--gold-champagne)}
.sheet .btn-gold{margin-top:32px;align-self:flex-start}
.sheet .caption{margin-top:20px}
@media(max-width:900px){.nav-links,.nav-end .btn-gold{display:none}.burger{display:block}.nav{height:58px;top:10px;width:calc(100% - 20px);padding-left:16px}}
body.menu-open{overflow:hidden}
/* ── cards + media frames ───────────────────────────────────── */
.card{border-radius:var(--r-lg);padding:clamp(1.4rem,2.2vw,1.9rem)}
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--media-black);aspect-ratio:var(--ar,16/9);box-shadow:var(--shadow-float)}
.frame video,.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--hairline);pointer-events:none}
button.frame{padding:0;border:0;color:inherit;text-align:left}
/* a clip's still is a lazy ![]()
under its video (a poster attribute can't be lazy);
the video fades in once it is actually playing, so its first frame never flashes */
img + video[data-inview]{opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
img + video[data-inview].is-playing{opacity:1}
/* chips + play badge float over moving video: live glass is allowed here */
.chip{position:absolute;top:12px;left:12px;z-index:2;padding:.4rem .7rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:600;letter-spacing:0;color:var(--ink);
background:var(--media-glass);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border:1px solid rgba(255,255,255,.14)}
.watch{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:.45rem;min-height:36px;padding:0 .85rem 0 .7rem;border-radius:var(--r-pill);
font-size:.75rem;font-weight:600;color:var(--ink);background:var(--media-glass);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
border:1px solid rgba(255,255,255,.14);transition:background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
/* play glyph: optically centred (nudged right of the geometric centre) */
.watch::before{content:'';width:0;height:0;margin-left:2px;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.chip,.watch{background:rgba(12,14,10,.88)}}
.playable{cursor:pointer;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.playable img{transition:transform var(--dur-3) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
.playable:hover{transform:translateY(-4px);box-shadow:0 20px 60px -25px rgba(0,0,0,.7)}
.playable:hover img{transform:scale(1.025)}
.playable:hover .watch{background:var(--media-glass);transform:scale(1.04)}
}
.playable:focus-visible{outline:2px solid var(--gold-champagne);outline-offset:4px}
/* launch gallery: a wide feature, then a two-up whose frames share one height
(--grow is each clip's W/H, so flex widths come out proportional) */
.launch-feature{display:block;width:100%;padding:0;border:0;color:inherit;text-align:left}
.launch-meta{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem}
.launch-meta b{color:var(--ink);font-weight:600}
.launch-two{display:flex;gap:var(--gutter);margin-top:var(--gutter)}
.launch-two .frame{flex:var(--grow) 1 0;padding:0;border:0;color:inherit}
@media(max-width:900px){.launch-two{flex-direction:column}.launch-two .frame{flex:none;width:100%}}
/* Preview playback is a deliberate choice; controls affect inline clips only. */
.preview-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:44px;padding:.5rem .85rem;border:1px solid var(--hairline-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--body);font-size:.75rem;cursor:pointer;transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.preview-toggle:hover{color:var(--ink);background:var(--surface-2)}
.preview-toggle::before{content:'';width:9px;height:11px;border-inline:3px solid currentColor}
.preview-toggle[aria-pressed="true"]::before{width:0;height:0;border:0;border-left:8px solid currentColor;border-block:5px solid transparent}
.gallery-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.gallery-tools[hidden]{display:flex!important;visibility:hidden}
.gallery-tools .preview-toggle[hidden]{display:inline-flex!important;visibility:hidden}
.gallery-filters{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border:1px solid var(--hairline);border-radius:var(--r-pill);background:var(--canvas-2)}
.gallery-filters button{border:0;background:transparent;color:var(--muted);min-height:44px;padding:.5rem 1rem;font-size:.85rem;border-radius:var(--r-pill);cursor:pointer;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.gallery-filters button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);box-shadow:var(--glass-highlight)}
.gallery-filters button:hover{color:var(--ink)}
.gallery-status{font-size:.75rem;color:var(--muted);min-height:1.5em}
.rail-progress{height:2px;background:var(--hairline);flex:1;max-width:10rem;overflow:hidden;border-radius:var(--r-pill)}
.rail-progress span{display:block;height:100%;width:100%;transform:scaleX(var(--rail-progress,.08));transform-origin:left;background:var(--body);transition:transform var(--dur-2) var(--ease-out)}
.gallery-foot{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:.5rem}
.magnetic{transition:translate var(--dur-2) var(--ease-out)}
/* phones: one row of filters that scrolls sideways like the gallery under it, never two rows */
@media(max-width:560px){.gallery-filters{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}.gallery-filters::-webkit-scrollbar{display:none}.gallery-filters button{flex:1 0 auto;padding-inline:.5rem}.gallery-filters.is-scrollable:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}.gallery-tools .preview-toggle{margin-left:auto}}
/* ── FAQ accordion (details/summary, height animated by site.js) ── */
.acc details{border-bottom:1px solid var(--hairline)}
.acc details:first-child{border-top:1px solid var(--hairline)}
.acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:64px;padding:1.1rem 0;cursor:pointer;
font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--ink);text-wrap:balance;border-radius:var(--r-sm);transition:color var(--dur-1) var(--ease-out)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--gold-champagne)}
.acc .ico{flex:0 0 28px;height:28px;border-radius:50%;border:1px solid var(--hairline-strong);position:relative;transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-1)}
.acc .ico::before,.acc .ico::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;border-radius:2px;background:var(--gold-solid)}
.acc .ico::after{transform:rotate(90deg)}
.acc details[open] .ico{transform:rotate(45deg);border-color:rgba(216,184,101,.5)}
.acc .ans{overflow:hidden}
.acc .ans p{padding:0 3rem 1.4rem 0;color:var(--body);line-height:1.7;max-width:62ch;text-wrap:pretty}
/* ── lightbox (native