/* The site's own pages: one scroll-driven 3D story per page (site-story.js),
   then the page's full content, then "Where to next".

   Layout matches the app pages (daily-six.css): a sticky full-screen canvas
   behind tall chapters, each chapter's card pinned while the scene plays.
   Without WebGL (or with reduced motion) the chapters are a plain stack of
   cards and every figure shows. Colors are the theme's own variables, so the
   admin's theme engine and light/dark mode reach these pages too. */

.ss { position: relative; overflow: clip; isolation: isolate; background: var(--bg); color: var(--text); --ss-hero-h: 140vh; }
/* The hero is the hamdouchi.com hero: the theme's --panel gradient with the
   white honeycomb over it, so it takes each event theme's colours from the
   admin (navy for Signature, purple and pumpkin for Halloween...). With the 3D
   stage up, both layers sit on the story at the hero's height, under the
   canvas (z-index -1 inside the isolated .ss); the stage is sticky, so the
   hero scrolls away behind the scene. Without WebGL the hero section paints
   them itself. */
.ss.is-3d::before, .ss:not(.is-3d) .ss-hero::before, .faq-hero::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: var(--ss-hero-h); z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 50%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, color-mix(in srgb, var(--accent-soft) 12%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--panel-light) 25%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 80%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 40%),
        linear-gradient(160deg, var(--panel) 0%, var(--panel) 50%, var(--panel-light) 100%);
}
/* The mesh, drawn as on hamdouchi.com: white lines at 14%, flowing from crisp
   to faint on the diagonal. */
.ss.is-3d::after, .ss:not(.is-3d) .ss-hero::after, .faq-hero::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: var(--ss-hero-h); z-index: -1; pointer-events: none; opacity: .06;
    background: var(--honeycomb-dark) 0 0 / 76.21px 132px repeat;
    -webkit-mask-image: linear-gradient(120deg, #000 0%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.18) 74%, rgba(0,0,0,.75) 100%);
            mask-image: linear-gradient(120deg, #000 0%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.18) 74%, rgba(0,0,0,.75) 100%);
}
/* Without WebGL the hero is a centred grid column; bleed its panel to the edges. */
.ss:not(.is-3d) .ss-hero::before, .ss:not(.is-3d) .ss-hero::after { height: auto; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); }
.faq-hero { position: relative; overflow: clip; isolation: isolate; --ss-hero-h: 100%; }

/* Hero text on the panel: white, with the theme's soft accent, like the live hero. */
.ss-hero .ss-card h1, .faq-hero h1 { color: #fff; }
.ss-hero .ss-card h1 em, .faq-hero h1 em { color: var(--accent-soft); }
.ss-hero .ss-card p, .faq-hero .faq-lede { color: rgba(255, 255, 255, .8); }
.ss-hero .ss-card .ss-lede { color: rgba(255, 255, 255, .88); }
.ss-hero .ss-eyebrow, .faq-hero > .container > .ss-eyebrow { color: color-mix(in srgb, var(--accent-soft) 70%, #fff); }
.ss-hero .ss-card a:not(.btn) { color: #fff; }
.ss-hero .btn-dark-outline { border-color: rgba(255, 255, 255, .4); color: #fff; }
.ss-hero .btn-dark-outline:hover { border-color: rgba(255, 255, 255, .75); color: #fff; background: rgba(255, 255, 255, .08); }
.ss-hero .ss-scroll-cue { color: rgba(255, 255, 255, .7); }
.ss-hero .ss-scroll-cue::after { background: linear-gradient(var(--accent-soft), transparent); }
/* The celebration badge sits in the card's flow on the story pages. */
.ss-hero .hero-celebrate { position: static; margin: 0 0 16px; }
body.ss-page { background: var(--bg); }

/* ── Chapter text (flat by default) ───────────────────────────────────────── */
.ss-stage { display: none; }
.ss-ch {
    position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 72px 24px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
}
.ss-ch + .ss-ch { border-top: 1px solid var(--border); }
.ss-card { position: relative; z-index: 2; max-width: 470px; }
.ss-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.ss-eyebrow-num { font-variant-numeric: tabular-nums; opacity: .7; }
.ss-card h1, .ss-card h2 { font-family: var(--font-display); color: var(--text); letter-spacing: -.01em; text-wrap: balance; }
.ss-card h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); line-height: 1.04; margin: 0 0 18px; }
.ss-card h1 em, .ss-card h2 em { font-style: normal; color: var(--accent); }
.ss-card h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 14px; }
.ss-card p { color: var(--text-light); font-size: 1.06rem; line-height: 1.65; margin: 0 0 12px; }
.ss-card .ss-lede { font-size: 1.2rem; color: var(--text); }
.ss-card ul.ss-ticks { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 8px; }
.ss-card ul.ss-ticks li { position: relative; padding-left: 26px; color: var(--text-light); line-height: 1.5; }
.ss-card ul.ss-ticks li::before {
    content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px;
    border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.ss-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ss-figure { margin: 0; }
.ss-figure img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .12); }
.ss-figure.ss-phone-shot img { max-width: 300px; margin: 0 auto; border-radius: 36px; }

/* A mid-page door: a quiet text link for the visitor who knows where to go. */
.ss-door {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    font-weight: 600; font-size: .95rem; color: var(--accent); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding-bottom: 2px;
}
.ss-door span { transition: transform .35s ease; }
.ss-door:hover span, .ss-door:focus-visible span { transform: translateX(4px); }

/* Centred at the foot of the first screen, placed the way the app pages place
   theirs: the hero starts under the nav, so the screen ends 100svh - nav below it. */
.ss-scroll-cue {
    position: absolute; z-index: 2; left: 50%; top: calc(100vh - var(--nav-h) - 84px); top: calc(100svh - var(--nav-h) - 84px); transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; white-space: nowrap;
    font-size: .74rem; letter-spacing: .02em; color: var(--text-light);
}
.ss-scroll-cue::after {
    content: ""; width: 1px; height: 26px; background: linear-gradient(var(--accent), transparent);
    animation: ssCue 1.8s ease-in-out infinite;
}
@keyframes ssCue { 0%, 100% { transform: translateY(-4px); opacity: .4; } 50% { transform: translateY(4px); opacity: 1; } }
.ss:not(.is-3d) .ss-scroll-cue { display: none; }

@media (max-width: 820px) {
    .ss-ch { grid-template-columns: 1fr; gap: 28px; padding: 56px 20px; }
}

/* ── 3D layout (site-story.js adds .is-3d once WebGL is up) ───────────────── */
.ss.is-3d .ss-stage {
    display: block; position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
    z-index: 0; pointer-events: none;
}
.ss.is-3d .ss-stage canvas { display: block; width: 100%; height: 100%; }
.ss.is-3d .ss-figure { display: none; }
.ss.is-3d .ss-ch {
    display: block; max-width: none; margin: 0; border: 0;
    min-height: 170vh; padding: 24vh max(32px, calc((100vw - 1200px) / 2)) 0;
}
.ss.is-3d .ss-ch.ss-right .ss-card { margin-left: auto; }
.ss.is-3d .ss-hero { min-height: 140vh; padding-top: max(16vh, 96px); }
.ss.is-3d .ss-long { min-height: 220vh; }
.ss.is-3d .ss-card {
    position: sticky; top: max(calc(var(--nav-h) + 24px), 20vh);
    padding: 30px 32px; border-radius: 26px;
    background: color-mix(in srgb, var(--bg) 76%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    box-shadow: 0 20px 50px rgba(15, 27, 51, .08);
}
/* The hero sits in a card like the chapters, so the scene never shows through its text. */
.ss.is-3d .ss-hero .ss-card { top: max(16vh, 96px); max-width: 520px; }
.ss.is-3d .ss-hero .ss-card {
    background: color-mix(in srgb, var(--panel) 45%, transparent);
    border-color: rgba(255, 255, 255, .12); box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

/* Phones and portrait tablets: the scene takes the top of the screen and the
   chapter card pins to the bottom. Matches site-story.js (aspect below 1). */
@media (max-aspect-ratio: 1/1) {
    .ss.is-3d .ss-ch { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 14px; min-height: 150vh; }
    .ss.is-3d { --ss-hero-h: 125vh; }
    .ss.is-3d .ss-hero { min-height: 125vh; }
    .ss.is-3d .ss-long { min-height: 190vh; }
    .ss.is-3d .ss-card, .ss.is-3d .ss-hero .ss-card {
        position: sticky; top: auto; bottom: 14px; max-width: 560px; width: 100%; margin: 0 auto;
        padding: 20px 22px; border-radius: 22px;
        background: color-mix(in srgb, var(--bg) 82%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
        border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    }
    .ss.is-3d .ss-hero .ss-card {
        background: color-mix(in srgb, var(--panel) 80%, transparent);
        border-color: rgba(255, 255, 255, .12);
    }
    .ss.is-3d .ss-ch.ss-right .ss-card { margin: 0 auto; }
    .ss.is-3d .ss-card h1 { font-size: 2.3rem; margin-bottom: 10px; }
    .ss.is-3d .ss-card h2 { font-size: 1.55rem; margin-bottom: 8px; }
    .ss.is-3d .ss-card p { font-size: .97rem; line-height: 1.5; margin-bottom: 8px; }
    .ss.is-3d .ss-card .ss-lede { font-size: 1.04rem; }
    .ss.is-3d .ss-card ul.ss-ticks { margin: 8px 0 2px; gap: 4px; font-size: .92rem; }
    .ss.is-3d .ss-scroll-cue { display: none; }
}

/* ── The header while the story plays: slim and see-through ───────────────── */
body.ss-page .nav-inner, body.ss-page .nav-links, body.ss-page .nav-logo img { transition: height .35s ease; }
body.ss-page.ss-immersive .nav { background: color-mix(in srgb, var(--white) 55%, transparent); border-bottom-color: transparent; }
@media (min-width: 769px) {
    body.ss-page.ss-immersive .nav { --nav-h: 50px; }
    body.ss-page.ss-immersive .nav-logo img { height: 34px !important; }
    body.ss-page.ss-immersive .nav-links a:not(.nav-cta) { font-size: .82rem; }
}

/* ── After the story: the page's full content ─────────────────────────────── */
.ss-body { position: relative; z-index: 1; background: var(--bg); padding: 96px 0; border-top: 1px solid var(--border); }
/* A body section handed the white surface keeps it, so its cards (which turn
   tinted on .section-alt) never sit on their own colour. */
.ss-body.section-alt { background: var(--white); }
.ss-body + .ss-body { padding-top: 0; border-top: 0; }
/* ...unless it changes surface (the About timeline after the bio): then it
   needs its own top padding, or its heading sits on the edge. */
.ss-body + .ss-body.section-alt { padding-top: 96px; border-top: 1px solid var(--border); }
.ss-body-head { max-width: 760px; margin-bottom: 40px; }

/* ── About: every app by year ─────────────────────────────────────────────── */
/* A rail down the left with a dot per year; each year's apps sit beside it as cards. */
.tl { --tl-y: 88px; --tl-gap: 44px; list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ''; position: absolute; left: calc(var(--tl-y) + var(--tl-gap) / 2 - 1px); top: 10px; bottom: 24px; width: 2px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.tl-year { display: grid; grid-template-columns: var(--tl-y) 1fr; column-gap: var(--tl-gap); position: relative; padding-bottom: 40px; }
.tl-year:last-child { padding-bottom: 0; }
.tl-year::before { content: ''; position: absolute; left: calc(var(--tl-y) + var(--tl-gap) / 2 - 7px); top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--white); }
.tl-y { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--primary); text-align: right; padding-top: 4px; margin: 0; }
.tl-line { color: var(--text-light); margin: 2px 0 16px; max-width: 640px; }
.tl-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tl-app { display: flex; align-items: center; gap: 14px; height: 100%; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; }
.tl-app:hover { border-color: var(--accent); transform: translateY(-2px); }
.tl-retired:hover { border-color: var(--border); transform: none; }
.tl-retired img { filter: saturate(.55); }
.tl-app img { width: 48px; height: 48px; flex: none; border-radius: 11px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.tl-app-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tl-app-text strong { font-size: .95rem; font-weight: 600; }
.tl-app-text span { font-size: .8rem; color: var(--text-light); }
@media (max-width: 640px) {
    .tl { --tl-y: 0px; --tl-gap: 28px; }
    .tl::before { left: 6px; }
    .tl-year { grid-template-columns: 1fr; padding-left: 28px; }
    .tl-year::before { left: 0; top: 8px; }
    .tl-y { text-align: left; font-size: 1.6rem; margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tl-app, .tl-app:hover { transition: none; transform: none; } }

/* ── Where to next ────────────────────────────────────────────────────────── */
.next {
    position: relative; overflow: hidden; background: var(--panel); color: #f4f2ee;
    padding: clamp(4.5rem, 3rem + 5vw, 8rem) 0 clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.next::before {
    content: ""; position: absolute; left: 50%; top: 0; width: 120vmin; height: 60vmin; pointer-events: none;
    transform: translate(-50%, -55%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
}
/* The dark band takes the hero honeycomb as it was on hamdouchi.com: white
   lines on the navy panel, fading out towards the cards. */
.next::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
    background: var(--honeycomb-dark) 0 0 / 76.21px 132px repeat;
    -webkit-mask-image: linear-gradient(170deg, #000 0%, rgba(0,0,0,.25) 45%, transparent 80%);
            mask-image: linear-gradient(170deg, #000 0%, rgba(0,0,0,.25) 45%, transparent 80%);
}
.next > .container { position: relative; z-index: 1; }
.next-head { position: relative; max-width: 38rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.next-eyebrow {
    display: inline-flex; gap: 10px; margin: 0 0 14px; color: color-mix(in srgb, var(--accent-soft) 60%, #fff);
    font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.next-eyebrow-num { opacity: .7; }
.next-heading { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1.08; margin: 0; color: #fff; text-wrap: balance; }
.next-grid {
    position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(12rem, auto);
}
.next-lead { grid-row: span 3; }
.next-card {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
    height: 100%; padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); border-radius: 22px; overflow: hidden;
    color: inherit; text-decoration: none; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
    transition: background .5s ease, border-color .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease;
}
.next-card:hover, .next-card:focus-visible {
    background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .32); transform: translateY(-4px);
    box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.next-card:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.next-num {
    position: absolute; top: .3rem; right: 1rem; z-index: -1; font-family: var(--font-display);
    font-size: clamp(5rem, 4rem + 6vw, 9rem); line-height: 1; letter-spacing: -.04em; color: rgba(255, 255, 255, .06);
    transition: color .5s ease, transform .8s ease;
}
.next-card:hover .next-num, .next-card:focus-visible .next-num { color: rgba(255, 255, 255, .12); transform: translateY(-4px); }
.next-label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--accent-soft) 60%, #fff); }
.next-title { font-family: var(--font-display); font-weight: 600; line-height: 1.1; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem); color: #fff; text-wrap: balance; }
.next-lead .next-title { font-size: clamp(2.1rem, 1.5rem + 2.5vw, 3.8rem); max-width: 12ch; }
.next-copy { color: rgba(244, 242, 238, .72); max-width: 30rem; line-height: 1.5; }
.next-lead .next-copy { font-size: 1.1rem; }
@media (min-width: 761px) { .next-lead .next-card { padding-right: 34%; } }
.next-lead .next-card::before {
    content: ""; position: absolute; right: -10%; bottom: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: -2; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent) 8%, transparent) 55%, transparent);
    filter: blur(6px); opacity: .85; transition: opacity .6s;
}
.next-lead .next-card:hover::before { opacity: 1; }
.next-go { display: inline-flex; align-items: center; gap: .5rem; margin-top: .7rem; font-weight: 600; color: #fff; }
.next-lead .next-go {
    align-self: flex-start; min-height: 48px; padding: .75rem 1.4rem; border-radius: 999px; margin-top: 1.2rem;
    background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent);
    transition: background .3s;
}
.next-lead .next-card:hover .next-go { background: var(--accent-soft); }
.next-arrow { display: inline-block; transition: transform .5s ease; }
.next-card:hover .next-arrow, .next-card:focus-visible .next-arrow { transform: translateX(6px); }
.next-restart { position: relative; margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; text-align: center; }
.restart {
    display: inline-flex; align-items: center; gap: .85rem; padding: .45rem 1.5rem .45rem .45rem; border-radius: 999px;
    color: #f4f2ee; text-decoration: none; font-weight: 500; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
}
.restart-arrow {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
    transition: transform .5s ease, background-color .3s, border-color .3s, color .3s;
}
.restart-arrow svg { transition: transform .5s ease; }
.restart-hint { color: rgba(244, 242, 238, .6); font-weight: 400; }
.restart:hover .restart-arrow, .restart:focus-visible .restart-arrow {
    background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent-soft); color: var(--accent-soft);
}
.restart:hover .restart-arrow svg, .restart:focus-visible .restart-arrow svg { transform: translateY(-2px); }
@media (max-width: 760px) {
    .next-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .next-lead { grid-row: auto; }
    .next-lead .next-card { min-height: 22rem; }
    .next-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-scroll-cue::after { animation: none; }
    .next-card, .next-num, .next-arrow, .restart-arrow, .ss-door span { transition: none; }
    .next-card:hover { transform: none; }
    body.ss-page .nav-inner, body.ss-page .nav-links, body.ss-page .nav-logo img { transition: none; }
}