/* ═══════════════════════════════════════════════════════════════════════════
   USER — franchise site

   Every colour is a token on :root, and a palette preset is nothing more
   than a different set of those tokens — see palettes() in
   includes/functions.php, which is the one place they are defined. The
   accent does the shouting: it is used only for things a reader is meant to
   act on — a buy button, a live state, a focus ring. A title can override
   --accent on its own pages on top of whichever palette is chosen.

   Every preset is measured against WCAG AA before it ships: body text and
   small labels at 4.5:1, controls and focus rings at 3:1.

   Type: Chakra Petch for anything that carries weight, Share Tech Mono for
   the small technical lines — labels, dates, counts, platform names. Both are
   openly licensed.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --bg:        #0a0a0c;
    --bg-soft:   #121216;
    --bg-lift:   #1b1b21;
    --ink:       #f5f5f7;
    --ink-soft:  #a3a3ad;
    --ink-mute:  #8b8b96;   /* 5.87:1 on --bg. The old #6f6f7a was 3.99 and
                               this token styles every .mono label, date and
                               count on the site, so it has to clear 4.5. */
    --line:      rgba(245, 245, 247, 0.12);
    --line-soft: rgba(245, 245, 247, 0.06);
    --accent:    #ff5a1f;
    --accent-ink:#0a0a0c;
    /* Flattens the logo to suit the background. A dark palette forces it
       white, a light one forces it black — which covers a logo an editor
       uploads later as well as the one that ships. */
    --logo-filter: brightness(0) invert(1);
    /* The bar and the overlay sit ON the page, so they need their own
       translucent versions of the background rather than a flat token. */
    --bar-bg:       rgba(10, 10, 12, 0.72);
    --bar-bg-solid: rgba(10, 10, 12, 0.94);
    --overlay-bg:   rgba(5, 5, 7, 0.94);

    --display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
    --mono:    'Share Tech Mono', ui-monospace, Consolas, monospace;

    --gutter:  clamp(16px, 4vw, 64px);
    --bar-h:   68px;
    --strip-h: 54px;
    --measure: 68ch;
    --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::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-family: var(--display);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, picture, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
    position: absolute; top: -60px; left: var(--gutter); z-index: 300;
    padding: 10px 16px; background: var(--accent); color: var(--accent-ink);
    font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
}
.skip:focus { top: 12px; }

/* ─── Type ────────────────────────────────────────────────────────────────── */
.h1, .h2, .h3 { font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; margin: 0; text-transform: uppercase; }
.h1 { font-size: clamp(40px, 8vw, 104px); }
.h2 { font-size: clamp(28px, 4.4vw, 56px); }
.h3 { font-size: clamp(20px, 2.4vw, 30px); }

.mono {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.label { color: var(--accent); }
.lede { font-size: clamp(18px, 2vw, 23px); color: var(--ink-soft); max-width: var(--measure); margin: 0; }

.body-copy { max-width: var(--measure); color: var(--ink-soft); }
.body-copy p { margin: 0 0 1.1em; }
.body-copy h2, .body-copy h3 {
    font-size: clamp(20px, 2.2vw, 27px); color: var(--ink);
    text-transform: uppercase; letter-spacing: -0.01em; margin: 2em 0 0.6em;
}
.body-copy ul { margin: 0 0 1.2em; padding-left: 1.1em; }
.body-copy li { margin-bottom: 0.4em; }
.body-copy a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.empty { color: var(--ink-mute); font-family: var(--mono); padding: 48px 0; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: 0 22px;
    font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
    border: 1px solid var(--line); background: transparent; color: var(--ink);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn--fill { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.btn--fill:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--line { border-color: var(--ink-soft); }
/* The two cut corners are made by clip-path, which slices the border away
   along each diagonal but draws nothing there — an outlined button had two
   open corners. These draw the missing diagonals: 1px, in the button's own
   border colour (inherited, so hover and every variant follow), each with its
   outer edge on the cut and its thickness pointing inward so the clip never
   trims it. Drawn a little long; the overshoot falls outside the clip. */
.btn { position: relative; }
.btn::before, .btn::after {
    content: ''; position: absolute; width: 16px; height: 0;
    pointer-events: none;
}
.btn::before {
    left: -1px; top: 9px;                      /* (0,10) in the border box */
    border-top: 1px solid; border-top-color: inherit;
    transform-origin: 0 0; transform: rotate(-45deg);
}
.btn::after {
    right: -1px; bottom: 9px;                  /* (W,H-10) in the border box */
    border-bottom: 1px solid; border-bottom-color: inherit;
    transform-origin: 100% 100%; transform: rotate(-45deg);
}
.btn--block { width: 100%; }
.btn--buy { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; min-height: 38px; padding: 0 16px; }
.btn--buy:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ─── The page-transition wipe ────────────────────────────────────────────── */
/* Covers the page on the way out only. The stylesheet clears it after four
   seconds regardless, so a navigation that silently fails cannot trap
   anybody behind it. */
.wipe {
    position: fixed; inset: 0; z-index: 400;
    background: var(--accent);
    transform: scaleY(0); transform-origin: bottom;
    pointer-events: none;
}
.js.is-leaving .wipe {
    transform: scaleY(1); transform-origin: bottom;
    transition: transform 0.42s var(--ease);
    animation: wipe-failsafe 0s linear 4s forwards;
}
@keyframes wipe-failsafe { to { transform: scaleY(0); } }
.motion-off .wipe, .transitions-off .wipe { display: none; }

/* ─── The bar ─────────────────────────────────────────────────────────────── */
.bar {
    position: fixed; inset: 0 0 auto; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(12px, 2vw, 28px);
    height: var(--bar-h); padding: 0 var(--gutter);
    /* Transparent at every scroll position, and it never hides: the dark
       ground belongs to the strip on the right, not to the whole width, so
       the mark sits directly on whatever the page opens with. */
    background: transparent;
}

/* ─── The strip ───────────────────────────────────────────────────────────── */
/* Everything a reader can do, gathered on one slab pushed to the right. The
   corners are cut rather than rounded — a bevel reads as machined where a
   radius reads as soft, and it is the one shape the whole site repeats. */
.bar__strip {
    position: relative;
    display: flex; align-items: stretch; margin-left: auto;
    height: var(--strip-h);
}
/* The ground is a layer behind the contents, not the strip's own background.
   It has to be: `clip-path` clips an element's descendants as well as its
   box, so a bevel on .bar__strip cuts off every dropdown that hangs below it.
   Putting the cut on ::before bevels the slab and leaves the contents free. */
.bar__strip::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: rgb(0 0 0 / 0.62);
    backdrop-filter: blur(10px);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.bar__strip > * { position: relative; z-index: 1; display: flex; align-items: center; }

/* The buy button closes the strip: same height, solid accent, no gap before
   it, so it reads as the end of the slab rather than a button lying on it. */
.bar__buy {
    padding: 0 clamp(16px, 1.6vw, 26px);
    background: var(--accent); color: var(--accent-ink);
    font-family: var(--mono); font-size: clamp(12px, 0.95vw, 15px); font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.bar__buy:hover, .bar__buy:focus-visible { background: var(--ink); color: var(--bg); }

.bar__logo { display: flex; align-items: center; flex: 0 0 auto; }
.bar__logo img, .foot__logo img { filter: var(--logo-filter); }
.bar__word { font-weight: 700; font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; }
.bar__nav { display: flex; align-items: stretch; }


/* The two controls are cells on the strip like the links are: no borders of
   their own, the same padding, the same hover. */
.bar__strip > .bar__motion,
.bar__strip .locale__button {
    border: 0; height: 100%; padding: 0 clamp(10px, 1.1vw, 16px);
}
.bar__strip > .bar__motion:hover:not(:disabled),
.bar__strip .locale__button:hover { background: rgb(255 255 255 / 0.10); }
.bar__motion {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-mute); padding: 6px 8px;
}
.bar__motion:hover:not(:disabled) { color: var(--ink); }
.bar__motion:disabled { opacity: 0.4; cursor: not-allowed; }

.bar__burger { display: none; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.bar__burger-bar { display: block; width: 20px; height: 2px; background: var(--ink); }

/* ─── The menu ────────────────────────────────────────────────────────────── */
.menu { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.menu__item { position: relative; }
.menu__item > .menu__link {
    display: flex; align-items: center; gap: 7px; height: 100%;
    padding: 0 clamp(12px, 1.3vw, 22px);
}
.menu__item > .menu__link:hover, .menu__item.is-open > .menu__link { background: rgb(255 255 255 / 0.10); }
.menu__link {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px;
    font-family: var(--mono); font-size: clamp(12px, 0.95vw, 15px); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-soft);
    transition: color 0.2s var(--ease);
}
.menu__link:hover, .menu__link.is-active { color: var(--ink); }
.menu__item--has-sub > .menu__link::after { content: '▾'; font-size: 10px; opacity: 0.6; }

/* Flush under the strip and aligned to its own item, so the panel reads as
   the slab continuing downwards rather than a card floating near it. */
/* Flush under the strip and flush with its own item, so the panel reads as
   the slab continuing downwards rather than a card floating beside it. */
.submenu {
    position: absolute; top: 100%; left: 0; z-index: 95;
    min-width: 250px; margin: 0; padding: 6px 0; list-style: none;
    background: rgb(0 0 0 / 0.82);
    backdrop-filter: blur(10px);
    border: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.menu__item--has-sub.is-open .submenu { opacity: 1; visibility: visible; transform: none; }
/* A short rule before each line: it groups the panel visually without
   needing a bullet, and it is the same mark the site uses elsewhere. */
.submenu__link {
    display: grid; grid-template-columns: 14px 1fr; align-items: baseline; gap: 10px;
    padding: 10px 16px; transition: background 0.15s var(--ease);
}
.submenu__link::before {
    content: ''; grid-row: 1; width: 14px; height: 1px;
    background: var(--ink-mute); transform: translateY(-4px);
    transition: width 0.18s var(--ease), background 0.18s var(--ease);
}
.submenu__link > * { grid-column: 2; }
.submenu__link:hover::before, .submenu__link:focus-visible::before { background: var(--accent); }
.submenu__link:hover, .submenu__link:focus-visible { background: rgb(255 255 255 / 0.07); }
.submenu__name { display: block; font-size: 15px; }
.submenu__kind { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }

/* ─── The locale switcher ─────────────────────────────────────────────────── */
.locale { position: relative; }
.locale__button {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px;
    border: 1px solid var(--line); font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.locale__button:hover { color: var(--ink); border-color: var(--ink-soft); }
.locale__region { color: var(--accent); }
.locale__panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
    min-width: 230px; max-height: 70vh; overflow-y: auto; padding: 14px;
    background: var(--bg-soft); border: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.locale.is-open .locale__panel { opacity: 1; visibility: visible; transform: none; }
.locale__head { margin: 0 0 6px; }
.locale__head + .locale__list { margin-bottom: 14px; }
.locale__list { list-style: none; margin: 0; padding: 0; }
.locale__opt { display: block; padding: 7px 8px; font-size: 14px; color: var(--ink-soft); }
.locale__opt:hover { background: var(--bg-lift); color: var(--ink); }
.locale__opt.is-active { color: var(--accent); }
.locale__note { margin: 6px 0 0; font-size: 12px; color: var(--ink-mute); }

/* ─── The drawer ──────────────────────────────────────────────────────────── */
.drawer {
    position: fixed; inset: var(--bar-h) 0 0; z-index: 88;
    padding: 32px var(--gutter); overflow-y: auto;
    background: var(--bg);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.menu--stacked { flex-direction: column; align-items: stretch; gap: 0; }
.menu--stacked .menu__link {
    font-size: 15px; padding: 16px 0; border-bottom: 1px solid var(--line-soft);
    width: 100%; height: auto; background: none;
}
.menu--stacked .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; background: transparent; backdrop-filter: none; clip-path: none;
    padding: 0 0 10px 14px; min-width: 0;
}
/* ─── The hero ────────────────────────────────────────────────────────────── */
.hero {
    position: relative; display: flex; align-items: flex-end;
    min-height: min(92vh, 900px); padding: calc(var(--bar-h) + 48px) var(--gutter) 64px;
    overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.2) 40%, var(--bg) 100%);
}
.hero__body { position: relative; z-index: 2; max-width: 1100px; }
.hero__state { margin: 0 0 14px; color: var(--accent); }
.hero__state[data-state="unannounced"] { color: var(--ink-mute); }
.hero__line { font-size: clamp(42px, 9vw, 122px); font-weight: 700; line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; margin: 0; }
.hero__note { max-width: 56ch; margin: 20px 0 0; font-size: clamp(16px, 1.6vw, 20px); color: var(--ink-soft); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__scroll { position: absolute; left: var(--gutter); bottom: 20px; z-index: 2; }

/* ─── Platforms and press ─────────────────────────────────────────────────── */
.plats { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }
.plat { display: inline-flex; align-items: center; opacity: 0.75; }
.plat__logo { height: 22px; width: auto; }
.plat__name { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.plat--rating { padding: 4px 10px; border: 1px solid var(--line); opacity: 1; }

.accolades { padding: 48px var(--gutter); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.accolades__list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 5vw, 72px); list-style: none; margin: 0; padding: 0; }
.accolade { text-align: center; max-width: 30ch; }
.accolade__score { display: block; font-size: 22px; color: var(--accent); letter-spacing: 0; }
.accolade__quote { display: block; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; }
.accolade__outlet { display: block; margin-top: 6px; }

/* ─── Sections and grids ──────────────────────────────────────────────────── */
.band { padding: clamp(64px, 9vw, 140px) var(--gutter); }
.band--soft { background: var(--bg-soft); }
.band__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 42px; }

.page-head { padding: calc(var(--bar-h) + 72px) var(--gutter) 40px; }
.page-head__inner { max-width: 1100px; }
.page-head .lede { margin-top: 20px; }

.grid { display: grid; gap: clamp(16px, 2.2vw, 30px); }
.grid--titles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.grid--news   { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--media  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid--community { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* ─── Cards ───────────────────────────────────────────────────────────────── */
.tcard, .ncard { position: relative; }
.tcard__link, .ncard__link { display: block; }
.tcard__shot, .ncard__shot, .ccard__shot { display: block; overflow: hidden; background: var(--bg-lift); }
.tcard__img, .ncard__img, .ccard__img, .mcard__img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    transition: transform 0.6s var(--ease), opacity 0.3s var(--ease);
}
.tcard__link:hover .tcard__img, .ncard__link:hover .ncard__img { transform: scale(1.04); }
.tcard__body, .ncard__body { display: block; padding: 16px 0 0; }
.tcard__kind, .ncard__date { display: block; margin-bottom: 8px; }
.tcard__name, .ncard__title { display: block; font-size: 21px; font-weight: 700; text-transform: uppercase; line-height: 1.12; }
.tcard__line, .ncard__sum { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
.tcard__state { display: block; margin-top: 12px; }
.tcard__state[data-state="out"] { color: var(--accent); }
.tcard__link:hover .tcard__name, .ncard__link:hover .ncard__title { color: var(--accent); }

/* A title's own page */
.sec { display: grid; gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(40px, 6vw, 90px) var(--gutter); }
.sec--image_left, .sec--image_right { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.sec--image_right .sec__shot { order: 2; }
.sec--full_image { padding-left: 0; padding-right: 0; }
.sec--full_image .sec__img { width: 100%; max-height: 70vh; object-fit: cover; }
.sec__quote { margin: 0 auto; max-width: 24ch; text-align: center; }
.sec__quote p { font-size: clamp(26px, 4vw, 48px); font-weight: 700; text-transform: uppercase; line-height: 1.08; margin: 0; }
.sec__quote cite { display: block; margin-top: 18px; font-style: normal; }

/* Editions */
.ed { border: 1px solid var(--line); padding: clamp(20px, 3vw, 34px); background: var(--bg-soft); }
.ed__head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ed__shot { flex: 0 0 140px; }
.ed__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ed__name { margin: 0; }
.ed__sum { margin: 8px 0 0; color: var(--ink-soft); }
.ed__list { margin: 22px 0; padding-left: 1.1em; color: var(--ink-soft); }
.ed__list li { margin-bottom: 6px; }
.ed__buys { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ed__none { margin: 20px 0 0; }
.buy {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 16px; border: 1px solid var(--line);
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.buy:hover { border-color: var(--accent); background: var(--bg-lift); }
.buy__name { font-weight: 600; }

/* Media */
.mcard { margin: 0; }
.mcard__hit { display: block; position: relative; width: 100%; padding: 0; overflow: hidden; background: var(--bg-lift); }
.mcard__hit:hover .mcard__img { transform: scale(1.04); }
.mcard__play {
    position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: 54px; height: 54px; border: 2px solid var(--ink); border-radius: 50%;
}
.mcard__play::after {
    content: ''; position: absolute; inset: 50% auto auto 54%; transform: translate(-50%, -50%);
    border-left: 14px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.mcard__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 10px; }
.mcard__title { font-size: 14px; color: var(--ink-soft); }
.mcard__dl { color: var(--accent); }

/* Community */
.ccard { display: block; border: 1px solid var(--line); transition: border-color 0.2s var(--ease); }
.ccard:hover { border-color: var(--accent); }
.ccard__body { display: block; position: relative; padding: 18px; }
.ccard__name { display: block; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.ccard__sum { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 14px; }
.ccard__out { position: absolute; top: 16px; right: 16px; color: var(--accent); }

/* Questions */
.qa-list { max-width: var(--measure); }
.qa { border-bottom: 1px solid var(--line); }
.qa__q { padding: 20px 0; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q::before { content: '+'; display: inline-block; width: 24px; color: var(--accent); }
.qa[open] .qa__q::before { content: '–'; }
.qa__a { padding: 0 0 22px 24px; }

/* ─── Forms ───────────────────────────────────────────────────────────────── */
.form { max-width: 720px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.field { margin-bottom: 20px; }
.field__label { display: block; margin-bottom: 7px; color: var(--ink-soft); }
.field__input {
    width: 100%; min-height: 48px; padding: 12px 14px;
    background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink);
    font-family: var(--display); font-size: 16px;
    transition: border-color 0.2s var(--ease);
}
.field__input:focus { outline: none; border-color: var(--accent); }
.field__input--area { min-height: 140px; resize: vertical; }
.field__err { margin: 6px 0 0; color: var(--accent); font-size: 14px; }
.form__err { padding: 12px 16px; border: 1px solid var(--accent); margin-bottom: 20px; }
.form__small { margin-top: 14px; }

.form__kind { border: 0; padding: 0; margin: 0 0 22px; }
.form__kind legend { padding: 0; margin-bottom: 9px; }
.form__kindOpts { display: flex; flex-wrap: wrap; gap: 8px; }
/* The native control is replaced by its own label rather than hidden: it
   stays in the tab order, and the focus ring is drawn on the visible part. */
.chip { display: inline-flex; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
    border: 1px solid var(--line); color: var(--ink-soft);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.check input { margin-top: 3px; accent-color: var(--accent); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sign-up */
.signup { padding: clamp(56px, 8vw, 120px) var(--gutter); border-top: 1px solid var(--line-soft); }
.signup__body { max-width: 720px; }
.signup__text { color: var(--ink-soft); margin: 14px 0 0; }
.signup__ok { margin: 18px 0 0; color: var(--accent); font-family: var(--mono); }
.signup__form { margin-top: 26px; }
.signup__row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup__input {
    flex: 1 1 260px; min-height: 48px; padding: 12px 14px;
    background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink);
    font-family: var(--display); font-size: 16px;
}
.signup__input:focus { outline: none; border-color: var(--accent); }

/* ─── The overlay ─────────────────────────────────────────────────────────── */
.overlay {
    position: fixed; inset: 0; z-index: 320;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 60px);
    background: var(--overlay-bg);
}
.overlay[hidden] { display: none; }
.overlay__frame { max-width: 1400px; width: 100%; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.overlay__frame img { max-height: 88vh; width: auto; object-fit: contain; }
.overlay__frame iframe { width: min(100%, 1280px); aspect-ratio: 16 / 9; height: auto; border: 0; }
.overlay__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 1px solid var(--line); }
.overlay__close::before, .overlay__close::after {
    content: ''; position: absolute; inset: 50% auto auto 50%;
    width: 18px; height: 2px; background: var(--ink);
}
.overlay__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.overlay__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ─── The pointer ─────────────────────────────────────────────────────────── */
/* Drawn beside the real cursor, never instead of it. Nothing here hides the
   system pointer, so a reader whose script fails still has one. */
.pointer {
    position: fixed; top: 0; left: 0; z-index: 310;
    display: flex; align-items: center; justify-content: center;
    min-width: 78px; height: 78px; margin: -39px 0 0 -39px; padding: 0 12px;
    border-radius: 50%; background: var(--accent); color: var(--accent-ink);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    pointer-events: none; opacity: 0; transform: scale(0.4);
    transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
}
.pointer.is-on { opacity: 1; transform: scale(1); }
@media (hover: none), (pointer: coarse) { .pointer { display: none; } }

/* ─── Scroll reveal ───────────────────────────────────────────────────────── */
/* Only site.js ever adds .reveal, so nothing is hidden without JavaScript. */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.reveal--instant.is-in { transition: none; }

/* ─── The footer ──────────────────────────────────────────────────────────── */
.foot { padding: clamp(48px, 6vw, 90px) var(--gutter) 34px; border-top: 1px solid var(--line); }
.foot__top { margin-bottom: 44px; }
.foot__note { max-width: 48ch; margin: 14px 0 0; color: var(--ink-soft); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 32px; }
.foot__title { margin: 0 0 12px; }
.foot__list { list-style: none; margin: 0; padding: 0; }
.foot__list li { margin-bottom: 8px; }
.foot__list a { color: var(--ink-soft); font-size: 15px; }
.foot__list a:hover { color: var(--accent); }
.foot__base {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.foot__copy { margin: 0; }
.foot .locale__panel { top: auto; bottom: calc(100% + 10px); }

/* ─── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    /* The whole strip stands down rather than the links alone: a bevelled slab
       holding two controls looks like a mistake. Everything it held is in the
       drawer, which is the same list of links in the same order. */
    .bar__strip { display: none; }
    .bar__burger { display: inline-flex; }
}
.drawer__buy { display: inline-flex; margin-top: 24px; height: 46px; }
@media (min-width: 1024px) {
    .drawer { display: none; }
}

/* ─── Motion turned down ──────────────────────────────────────────────────── */
/* One rule, so a preference cannot be half-applied. */
.motion-off *, .motion-off *::before, .motion-off *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}