/* Shared foundation. Each site sets its own tokens: --bg --fg --muted --accent --line --font-d --font-b */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;min-height:100vh;font-family:var(--font-b,system-ui,sans-serif);color:var(--fg);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul[role=list],ol[role=list]{list-style:none;padding:0}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.tnum{font-variant-numeric:tabular-nums}

/* Reveal: visible by default; only hidden once JS has opted in. */
.js-reveal [data-reveal]:not(.is-in){opacity:0;transform:translateY(28px)}
.js-reveal [data-reveal][data-stagger]:not(.is-in){opacity:1;transform:none}
.js-reveal [data-reveal][data-stagger]:not(.is-in)>*{opacity:0;transform:translateY(24px)}
[data-reveal],[data-reveal][data-stagger]>*{transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0)*90ms)}

/* Background video: fade in once frames exist. */
video[data-bg]{opacity:0;transition:opacity .6s ease}
video[data-bg].is-ready{opacity:1}

/* YouTube facade */
[data-yt]{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;cursor:pointer;overflow:hidden;border:0;padding:0;width:100%}
[data-yt]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
[data-yt] .yt-play{position:absolute;z-index:2;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent,#fff);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
[data-yt]:hover .yt-play{transform:scale(1.08)}
[data-yt] .yt-cap{position:absolute;z-index:2;left:20px;bottom:16px;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em}
[data-yt] iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

/* Lightbox */
.dtx-lightbox{position:fixed;inset:0;z-index:999;background:rgba(5,5,5,.94);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;padding:24px 8px}
.dtx-lightbox[hidden]{display:none}
.dtx-lightbox figure{display:grid;gap:12px;justify-items:center;min-width:0}
.dtx-lightbox img{max-height:82vh;width:auto;border-radius:8px}
.dtx-lightbox figcaption{color:#ddd;font:13px/1.4 system-ui,sans-serif;text-align:center}
.dtx-lightbox button{background:rgba(255,255,255,.08);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;justify-self:center}
.dtx-lightbox button:hover{background:rgba(255,255,255,.18)}
.dtx-lightbox .lb-close{position:absolute;top:16px;right:16px}

/* Forms (sites restyle via tokens) */
.field{display:grid;gap:6px}
.field label,.field legend{font-size:13px;font-weight:600;letter-spacing:.01em}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--fg) 4%,transparent);outline:none;transition:border-color .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:color-mix(in srgb,var(--fg) 7%,transparent)}
.field textarea{min-height:120px;resize:vertical}
.check{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer;padding:8px 0}
.check input{width:18px;height:18px;accent-color:var(--accent)}
[data-form-msg]{font-size:14px;min-height:1.4em}
[data-form-msg][data-state=ok]{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}