:root { --yellow:#FFB800; --purple:#6A2FF3; --lavender:#E1D5FD; --ink:#1C1C1C; --white:#FFFFFF; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--white); color:var(--ink); }
body { margin:0; font-family:"Open Sans",system-ui,sans-serif; background:var(--lavender); }
h1,h2,h3 { font-family:"Titillium Web",system-ui,sans-serif; text-wrap:balance; }
a,button { outline-offset:4px; }
a:focus-visible,button:focus-visible { outline:3px solid var(--purple); }
.site-header { position:fixed; z-index:1000; inset:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:20px clamp(20px,5vw,64px); }
/* Gold rule capping the page, above the header's own gradient. Decorative only. */
.site-header::before { content:""; position:absolute; z-index:2; top:0; left:0; width:100%; height:7px; background:var(--yellow); }
.site-brand,.site-header nav,.site-contact { position:relative; z-index:1; }
.site-header nav { display:flex; gap:24px; }
.site-contact { justify-self:end; }
.poster-world { padding:120px clamp(20px,6vw,88px) 80px; }
.poster-hero { min-height:55vh; display:grid; align-content:center; max-width:760px; }
.poster-case { min-height:80vh; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); align-items:center; gap:clamp(28px,6vw,96px); border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.poster-case img { width:100%; border-radius:28px; }
.poster-case ul { display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; list-style:none; }
/* Same gold-ruled tag treatment as the scroll-world skin (see .sw-copy__tags). */
.poster-case li { position:relative; padding:0 0 7px; font-family:"Titillium Web",system-ui,sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.poster-case li::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--yellow); }
.eyebrow { color:var(--purple); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
/* Button — the site-wide CTA. Ink panel wipes in from the left on hover while
   the face exits right, so both layers carry the label (see src/button.js). */
.btn { position:relative; display:inline-block; overflow:hidden; height:50px; padding:0; border:0; border-radius:2px; font-family:inherit; text-decoration:none; cursor:pointer; }
.btn__back,.btn__front { display:flex; align-items:center; justify-content:center; height:100%; padding:10px 30px; border-radius:2px; font-size:14px; font-weight:600; line-height:2; white-space:nowrap; transition:transform .3s cubic-bezier(.76,0,.24,1); }
.btn__back { position:absolute; left:0; width:100%; background:var(--ink); color:var(--white); transform-origin:100% 0; transform:translate3d(-100.6%,0,0); }
.btn:hover .btn__back,.btn:focus-visible .btn__back { transform:translate3d(0,0,0); }
.btn:hover .btn__front,.btn:focus-visible .btn__front { transform:translate3d(100.6%,0,0); }
.btn--gold { background:var(--yellow); }
.btn--gold .btn__front { background:var(--yellow); color:var(--ink); }
.btn--ghost { background:transparent; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 25%,transparent); }
.btn--ghost .btn__front { color:var(--ink); }
.site-header a,.poster-case a { color:inherit; text-decoration-thickness:2px; text-underline-offset:4px; }
.site-header nav a { text-decoration:none; }
.site-header .site-contact { color:var(--ink); text-decoration:none; }
.site-brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.08em; text-decoration:none; }
.site-brand img { display:block; width:clamp(142px,12.5vw,180px); height:auto; }
.poster-hero h1 { max-width:720px; margin:.15em 0; font-size:clamp(3rem,8vw,7rem); line-height:.9; }
.poster-hero > p:last-child { max-width:650px; font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.6; }
.poster-case h2 { margin:.25em 0; font-size:clamp(2.3rem,5vw,5rem); line-height:.95; }
.poster-case strong { display:block; margin:24px 0; font-size:1.1rem; }
.poster-case .btn { margin-left:16px; }
@media (max-width:860px) {
  .site-header { grid-template-columns:1fr auto; } .site-header nav { display:none; }
  .site-header::before { height:3px; }
  .poster-case { grid-template-columns:1fr; padding:60px 0; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Desktop scroll-world skin. Engine selectors stay namespaced under .sw-root. */
.sw-root {
  --sw-bg:var(--lavender);
  --sw-ink:var(--ink);
  --sw-ink-soft:color-mix(in srgb,var(--ink) 70%,var(--lavender));
  --sw-accent:var(--purple);
  --sw-font-display:"Titillium Web",system-ui,sans-serif;
  --sw-font-body:"Open Sans",system-ui,sans-serif;
  /* Room the fixed header and the status pill already claim. Scene copy centers
     in what is left, so it stays on screen on short laptop displays. */
  --sw-copy-safe-top:clamp(86px,12vh,118px);
  --sw-copy-safe-bottom:clamp(78px,11vh,108px);
}
.sw-root .sw-topbar { display:none; }
.sw-root .sw-sky { background:var(--lavender); }
.sw-root .sw-copy-backdrop { background:linear-gradient(90deg,color-mix(in srgb,var(--white) 96%,transparent) 0%,color-mix(in srgb,var(--white) 80%,transparent) 28%,color-mix(in srgb,var(--white) 38%,transparent) 56%,transparent 78%); }
.sw-root .sw-copy__eyebrow,.sw-root .sw-hero__eyebrow { color:var(--purple); }
/* Tags are typographic, not chips: uppercase micro-type capped by a gold rule that
   echoes the band at the top of the page. Unsets the engine's enclosure — its
   background, border and 999px radius — rather than restyling it. */
.sw-root .sw-copy__tags { gap:12px clamp(16px,1.6vw,24px); }
.sw-root .sw-copy__tags li {
  position:relative;
  padding:0 0 7px;
  border:0;
  border-radius:0;
  background:none;
  font-family:"Titillium Web",system-ui,sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 88%,transparent);
  text-shadow:0 1px 10px color-mix(in srgb,var(--lavender) 85%,transparent);
}
.sw-root .sw-copy__tags li::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--yellow); }
.sw-root .sw-copy__title,.sw-root .sw-hero__title { font-family:"Titillium Web",system-ui,sans-serif; }
.sw-root .sw-copy__body,.sw-root .sw-hero__body { font-family:"Open Sans",system-ui,sans-serif; }
.sw-root .sw-btn--primary { background:var(--yellow); color:var(--ink); }
/* Engine buttons also carry .btn; outrank its pill defaults without editing the engine. */
.sw-root .btn { height:50px; padding:0; border:0; border-radius:2px; font-size:14px; transition:none; }
.sw-root .btn:hover { transform:none; }
@media (min-width:861px) {
.sw-root .sw-copy-backdrop { width:min(76vw,1040px); }
.sw-root .sw-copy-backdrop[data-context="hero"] { width:min(82vw,1120px); }
.sw-root .sw-copy,.sw-root .sw-hero {
  left:clamp(24px,6vw,88px);
  right:auto;
  width:min(40vw,520px);
  text-align:left;
}
.sw-root .sw-copy[data-side="right"],.sw-root .sw-hero[data-side="right"] {
  left:auto;
  right:clamp(24px,6vw,88px);
  width:min(40vw,520px);
  text-align:right;
}
.sw-root [data-side="right"] .sw-copy__body,.sw-root [data-side="right"] .sw-hero__body { margin-left:auto; }
.sw-root [data-side="right"] .sw-copy__tags,.sw-root [data-side="right"] .sw-copy__cta { justify-content:flex-end; }
.sw-root .sw-route { display:none; }
.sw-root .sw-status {
  display:flex;
  bottom:clamp(24px,4vh,48px);
  padding:10px 16px;
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--white) 55%,transparent);
  backdrop-filter:blur(10px);
}
  /* The gradient fills the header box, so the box carries the extra height. It is
     scrim, not chrome: the band must not steal clicks from the scene beneath. */
  .site-header { padding-bottom:45px; pointer-events:none; background:linear-gradient(180deg,color-mix(in srgb,var(--white) 96%,transparent) 0%,color-mix(in srgb,var(--white) 76%,transparent) 55%,transparent 100%); }
  .site-header > * { pointer-events:auto; }
}
.sw-root .sw-status__bar i { background:var(--purple); }
.sw-root .sw-hint { display:none; }