/* ============================================================
   Sloane Wimberly — shared styles
   The :root custom properties below are the SOURCE OF TRUTH for color.
   Dark mode: @media (prefers-color-scheme: dark) + :root[data-theme="dark"]
   Section pattern: full-width colored bg + inner .wrap/.in capped at 1080px.
   Loaded by every page. Edit here, not in a page.
   ============================================================ */

:root{
  --page:#EDF4F7; --ink:#1A2E35; --ink-soft:#3B5461; --muted:#6A8A95; --line:#D3E0E6;
  --surface:#FFFFFF; --link:var(--accent-tx);
  /* Palette refresh: SLATE signature + TERRACOTTA accent on the cool ground.
     Rule to remember: accent-as-text lightens in dark; accent-as-a-block stays saturated. */
  --sig:#3f6d8f;           /* slate — primary buttons, hero frame, focus */
  --sig-tx:var(--sig);     /* slate as TEXT/'UI' — lightens in dark mode */
  --accent:#b63d2d;        /* terracotta — stars, emphasis, closing band */
  --accent-lt:#d38b81;     /* AA-safe terracotta tint for text ON teal / in dark */
  --accent-tx:var(--accent); /* terracotta as TEXT on a light ground */
  --sage:#596f5f;          /* demoted: fintech era badge + one frame rotation only */
  --hero-tx:var(--ink); --hero-lede:var(--ink-soft);   /* hero now sits on --page, not a panel */
  --maroon:var(--sig);     /* primary buttons flipped terracotta -> slate */
  --terra:var(--accent); --terra-card:#FDE8D8; --terra-card-tx:#4A1A08; --terra-ctrl:rgba(255,255,255,.5); --on-terra:#FFFFFF; --terra-em:#FFFFFF;
  --teal:#1E3840; --teal-tx:#F2F6F7; --teal-muted:#9DB6BD; --teal-soft:#C7D6DB; --gold:#FFFFFF;
  --olive:var(--accent); --band-tx:#FFFFFF; --band-p:#F4F1EB; --band-btn-tx:#FFFFFF;
  --acc-blue:var(--sig); --acc-terra:var(--accent); --acc-olive:var(--sage); --on-bar:#FFFFFF; --on-bar-sub:rgba(255,255,255,.86);
  --acc-body:#FAF9F6; --acc-body-tx:#1A2E36; --acc-body-muted:#536E79; --acc-meta:#437386;
  /* ^ deepened within the same hue families: 4.23 -> 5.15 and 4.02 -> 4.94.
     The dark-mode counterparts are separate values and already pass. */
  --footer:#1E3840; --footer-brand:#FFFFFF; --footer-meta:#B0CCD5; --footer-copy:#8DAFB7; --footer-em:var(--accent-lt);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --page:#0D1A1F; --ink:#E7EEF0; --ink-soft:#B6C6CB; --muted:#89A0A7; --line:#26383F;
  --surface:#13232A; --link:var(--accent-tx); --accent-tx:var(--accent-lt);
  --sig-tx:#5b93b6;        /* slate as TEXT/UI lightens on near-black; the FILL
                              stays #3f6d8f so white button labels keep 5.53:1
                              (lightening the fill dropped them to 3.34:1) */
  --hero-tx:var(--ink); --hero-lede:var(--ink-soft);
  --terra-card:#F6DECB;
  --acc-body:#182930; --acc-body-tx:#E7EEF0; --acc-body-muted:#9DB4BB; --acc-meta:#79B0C4;
}}
:root[data-theme="dark"]{
  --page:#0D1A1F; --ink:#E7EEF0; --ink-soft:#B6C6CB; --muted:#89A0A7; --line:#26383F;
  --surface:#13232A; --link:var(--accent-tx); --accent-tx:var(--accent-lt);
  --sig-tx:#5b93b6;        /* slate as TEXT/UI lightens on near-black; the FILL
                              stays #3f6d8f so white button labels keep 5.53:1
                              (lightening the fill dropped them to 3.34:1) */
  --hero-tx:var(--ink); --hero-lede:var(--ink-soft);
  --terra-card:#F6DECB;
  --acc-body:#182930; --acc-body-tx:#E7EEF0; --acc-body-muted:#9DB4BB; --acc-meta:#79B0C4;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--page);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1080px;margin:0 auto;padding:0 40px}
@media(min-width:1180px){.wrap{padding:0}}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.012em;text-wrap:balance;line-height:1.1}
em{font-style:italic}
:focus-visible{outline:2.5px solid var(--accent-tx);outline-offset:3px;border-radius:2px}
section{scroll-margin-top:80px}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:15.5px;padding:12px 22px;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:transform .16s ease,opacity .16s ease,background .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn .ar{transition:transform .16s ease}
.btn:hover .ar{transform:translateX(3px)}

/* nav */
nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
nav .row{max-width:1080px;margin:0 auto;padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px}
@media(min-width:1180px){nav .row{padding:0}}
.brand{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:.14em;color:var(--ink)}
.brand .d{color:var(--accent-tx)}
.nav-right{display:flex;align-items:center;gap:24px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:16px;color:var(--ink)}
.nav-links a.tlk{font-weight:600;color:var(--link);white-space:nowrap}
.nav-links a.lnk{position:relative}
.nav-links a.lnk::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:var(--accent-tx);transition:right .22s ease}
.nav-links a.lnk:hover::after{right:0}
.theme-tgl{background:transparent;border:1px solid var(--line);color:var(--ink);width:34px;height:34px;border-radius:8px;cursor:pointer;display:grid;place-items:center;font-size:15px}
.theme-tgl:hover{border-color:var(--accent-tx)}
/* Nav shrinks in two steps: first drop the Home-section anchors (.sec), then
   the page links, leaving the brand + "Let's talk" + theme toggle on mobile. */
@media(max-width:860px){.nav-links a.sec{display:none}}
@media(max-width:740px){.nav-links a.lnk{display:none}}
/* §10 the wordmark was sitting hard against the top edge on phones. */
@media(max-width:740px){nav .row{height:auto;padding-top:14px;padding-bottom:10px;padding-right:22px;align-items:flex-start;gap:12px}}

/* hero */
/* §4 the blue hero panel is retired — the hero sits on the page ground. */
.hero{background:var(--page);color:var(--ink)}
/* The frame used to right-align in a wide column, leaving a dead lane in the
   middle. The column is now sized to the frame and the pair packs left, so the
   slack falls to the outer edge instead of between them. */
.hero .in{max-width:1080px;margin:0 auto;padding:76px 40px 34px;display:grid;grid-template-columns:minmax(0,740px) auto;justify-content:start;gap:clamp(36px,4.6vw,56px);align-items:center}
@media(min-width:1180px){.hero .in{padding:76px 0 34px}}
h1{font-size:clamp(42px,6.4vw,66px);color:var(--ink);margin-bottom:24px}
h1 em{font-style:italic}
.lede{font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--ink-soft);max-width:46ch;margin-bottom:32px;font-weight:400}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}
.btn-maroon{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.btn-maroon:hover{opacity:.92}
.btn-onhero{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-onhero:hover{border-color:var(--sig-tx)}
/* §D4 mobile hero rework (≤820px only — desktop is untouched).
   Order becomes h1 → landscape frame → lede → CTAs. display:contents promotes
   the copy wrapper's children into the grid so the frame can sit BETWEEN the
   headline and the lede without duplicating any markup. */
@media(max-width:820px){
  .hero .in{grid-template-columns:1fr;gap:26px;padding:44px 40px 30px}
  .hero .in > div:first-child{display:contents}
  .hero h1{order:1;margin-bottom:0}
  .frame-wrap{order:2}
  .hero .lede{order:3;margin-bottom:0;max-width:none}
  .hero-cta{order:4;justify-content:center;gap:10px;flex-wrap:nowrap}
  /* the pair has to fit ~295px at 375px wide, so trim the buttons a little */
  .hero-cta .btn{padding:11px 15px;font-size:14.5px;white-space:nowrap}
  /* the portrait→landscape swap lives with the frame rules below, where it
     out-orders the base .frame-svg / .frame-landscape declarations. */
}

/* strip */
/* The hero no longer has a colour panel, so the strip carries the contrast:
   its own surface band, hairlines top and bottom. */
.strip{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .in{max-width:1080px;margin:0 auto;padding:38px 40px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
@media(min-width:1180px){.strip .in{padding:38px 0}}
.strip .cap{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-soft);line-height:1.4}
.brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 22px}
.brands b{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.4vw,26px);color:var(--ink)}
.brands .s{color:var(--accent-tx);font-size:15px}
/* Linked company names: same held-open underline the nav links use, so the
   row still reads as a calm logo wall until you hover. GUNNER is unlinked. */
.brands a{position:relative}
.brands a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:var(--accent-tx);transition:right .22s ease}
.brands a:hover::after,.brands a:focus-visible::after{right:0}
@media (prefers-reduced-motion:reduce){.brands a::after{transition:none}}

/* eras */
.eras{background:var(--teal);color:var(--teal-tx)}
.eras .in{max-width:1080px;margin:0 auto;padding:80px 40px}
@media(min-width:1180px){.eras .in{padding:80px 0}}
.kick{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold)}
.eras h2{font-size:clamp(30px,4vw,48px);color:var(--teal-tx);margin-top:14px;max-width:20ch}
.eras h2 em{color:var(--accent-lt)}   /* terracotta tint: this sits on the dark panel */
.tl{margin-top:44px}
.tl-line{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative;margin-bottom:22px}
.tl-line::before{content:"";position:absolute;left:24px;right:calc(20% - 43px);top:23px;height:2px;background:rgba(255,255,255,.16)}
/* Ring, not a hue change: the Option B colours are kept exactly as specced;
   a 2px light hairline lifts each badge off the teal panel instead. */
.dot{width:48px;height:48px;border-radius:50%;position:relative;z-index:1;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
/* Art is already white with alpha — nothing recolors it here. Aspect ratios
   differ per icon, so contain-fit them into one square box for even sizing. */
.dot img{width:26px;height:26px;object-fit:contain;display:block}
/* Era 1's art is much taller than it is wide (358x686). Fitting it to the same
   box as the others renders it ~13px wide and visibly slighter, so give it a
   larger box — the icons then read as the same size even though the numbers differ. */
.dot-1 img{width:30px;height:30px}
/* era-0 is an inline SVG (not a PNG) so its currentColor can be set to white. */
.dot svg{width:26px;height:26px;color:#fff;display:block}
/* §2 per-era node colors (plain circles this round — icons come later) */
.dot-0{background:var(--accent)}  /* fashion & formation — terracotta */
.dot-1{background:#c98a3e}        /* hair-care — amber */
.dot-2{background:var(--sage)}    /* fintech — sage (its one surviving brand use) */
.dot-3{background:#4f7d97}        /* pet — teal */
.dot-4{background:var(--sig)}     /* next era — slate */
.tl-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
/* §A "Option A": eyebrow (year · era) → bold company anchor → ✶ short lines.
   Replaces the old year-label + serif-italic title + prose paragraph. All four
   colours clear AA on the teal panel (5.82 / 11.39 / 8.30 / 4.59). */
.era .yr{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:6px}
/* Desktop columns are CENTRED, in this order: era name -> date -> company -> bullets.
   The era name is the larger of the two header lines (serif italic); the date sits
   under it, small and muted. `.co` reserves two lines so every column's bullets start
   on the same baseline even when a company name wraps ("Harry's & Function of Beauty.").
   Era 5 has no company but KEEPS that reserved height, so its single bullet still lines
   up with the rest. `.phs` is the trick that makes centred + left-aligned coexist: an
   inline-block shrinks to its content and is centred by the parent, while the bullet
   lines inside it stay flush left as a tidy group. */
.era{text-align:center}
.era h3.ename{font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;line-height:1.1;color:var(--teal-tx)}
.era .yr{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-muted);margin-top:4px}
.era .co{font-weight:700;font-size:15px;line-height:1.35;color:var(--teal-tx);margin-top:11px;min-height:2.8em}
.era .phs{display:inline-block;text-align:left;margin:2px auto 0}
.era .ph{position:relative;padding-left:15px;font-size:13.5px;line-height:1.5;color:var(--teal-soft);margin-bottom:4px}
.era .ph::before{content:"\2736";position:absolute;left:0;top:1px;font-size:9px;color:var(--accent-lt)}
.era.fut h3{color:var(--teal-tx)}

/* Milestone dots — the quieter second layer on the same timeline line.
   Big badges = career chapters; these small dots = life moments.
   The layer is inset to exactly match the rule, so each dot's left % maps
   straight onto the line between the first and last badge centres. */
.tl-line::after{content:"";position:absolute;left:-34px;width:58px;top:23px;height:2px;background:rgba(255,255,255,.16)}
.tl-miles{position:absolute;left:24px;right:calc(20% - 43px);top:24px;height:0;z-index:2}
/* The 2011 dot sits BEFORE the first badge, so it hangs off .tl-line rather than
   riding the % scale inside .tl-miles. Its tooltip is left-anchored — centred it
   would run past the viewport edge at 1180px, where the page margin is only 50px. */
/* .tl-mile-pre must out-specify .tl-mile, which sets top:0 and appears later
   in this file — equal specificity would let it win and float the dot above
   the rule. Doubling the class makes this order-independent. */
.tl-mile.tl-mile-pre{position:absolute;left:-17px;top:24px;z-index:2}
.tl-mile-pre .tl-tip{left:0;transform:none}
.tl-mile{position:absolute;top:0;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.42);transition:background .16s ease,transform .16s ease}
.tl-mile:hover,.tl-mile:focus-visible,.tl-mile[aria-expanded="true"]{background:#fff;transform:translate(-50%,-50%) scale(1.18)}
.tl-tip{position:absolute;bottom:calc(100% + 11px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--teal-tx);background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.24);border-radius:7px;padding:6px 11px;opacity:0;pointer-events:none;transition:opacity .16s ease}
.tl-mile:hover .tl-tip,.tl-mile:focus-visible .tl-tip,.tl-mile[aria-expanded="true"] .tl-tip{opacity:1}
@media (prefers-reduced-motion:reduce){.tl-mile,.tl-tip{transition:none}}
/* Stacked: the badge row is hidden, so the milestones ride above the era list. */
@media(max-width:760px){.tl-miles{display:none}}
/* Below 760px the rule the dots sit on is gone, so each milestone reappears as
   an inline chip inside the era it belongs to. Only one copy is ever exposed:
   the chips are hidden above 760px, the dots hidden below it. */
.era-mile{display:none}
@media(max-width:760px){
  .era-mile{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--teal-tx);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:7px;padding:5px 10px}
}
.era p{font-size:14px;line-height:1.5;color:var(--teal-soft)}
/* Optional bold lead line in an era. Wrap the opening sentence in <b> and it
   becomes its own line, brighter than the body copy — no <br> needed.
   Adjust the gap between the two lines here, once, for all eras. */
.era p b{display:block;font-weight:600;color:var(--teal-tx);margin-bottom:5px}
/* "The next era" has no company line; this reserves the same slot so all five
   descriptions start on the same baseline. The gap is intentional. */
.era p b.sp{color:transparent}
@media(max-width:760px){
  /* Stacked: the badge row and the era text live in separate containers, so a
     shared column would leave the badges floating above the copy. Drop the row
     and give each era its own badge instead. */
  .tl-line{display:none}
  /* §D.5 vertical timeline: a spine runs behind the stacked badges from the first
     badge's centre downward; the last era paints over the tail in the panel colour
     so the line stops at that badge instead of running past it. CSS can't express
     "end at the last child's centre" directly. */
  .tl-cols{grid-template-columns:1fr;gap:26px;position:relative}
  .tl-cols::before{content:"";position:absolute;left:13px;top:14px;bottom:0;width:2px;background:rgba(255,255,255,.18);z-index:0}
  .era{position:relative;padding-left:46px;z-index:1}
  /* The transparent company stand-in only exists to align five side-by-side
     columns; stacked, it just leaves a hole under era 5's eyebrow. */
  /* Mobile keeps the same source order but goes LEFT-aligned, and the two-line
     company reservation is pointless once the eras stack. */
  .era{text-align:left}
  .era .co{min-height:0}
  .era .phs{display:block}
  .era .co.sp{display:none}
  .era:last-child::after{content:"";position:absolute;left:12px;top:14px;bottom:0;width:4px;background:var(--teal);z-index:1}
  /* Stacked badges are pseudo-elements, so the icon rides in as a background.
     Keep these URLs in step with the <img> tags in index.html. */
  /* Nodes punch through the spine: a panel-coloured ring first, then the light hairline. */
  .era::before{content:"";position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:14px 14px;box-shadow:0 0 0 3px var(--teal),0 0 0 5px rgba(255,255,255,.5);z-index:2}
  /* era-0 first: its icon is an SVG using currentColor, which a background-image
     can't recolor — so the circle is ::before and the white icon is a masked ::after. */
  /* Keep these in step with .dot-0..4 above — Option B warm→cool ramp. */
  .era:nth-child(1)::before{background-color:var(--accent)}
  .era:nth-child(1)::after{content:"";position:absolute;left:0;top:1px;width:26px;height:26px;z-index:3;background-color:#fff;-webkit-mask:url(assets/icons/era-0-fashion.svg) center/auto 16px no-repeat;mask:url(assets/icons/era-0-fashion.svg) center/auto 16px no-repeat}
  .era:nth-child(2)::before{background-color:#c98a3e;background-image:url(assets/icons/era-1-haircare.png);background-size:auto 17px}
  .era:nth-child(3)::before{background-color:var(--sage);background-image:url(assets/icons/era-2-fintech.png)}
  .era:nth-child(4)::before{background-color:#4f7d97;background-image:url(assets/icons/era-3-pet.png)}
  .era:nth-child(5)::before{background-color:var(--sig);background-image:url(assets/icons/era-4-next.png);background-size:auto 15px}
}

/* approach carousel */
.appr{background:var(--terra);color:var(--on-terra)}
.appr .in{max-width:1080px;margin:0 auto;padding:44px 40px}
@media(min-width:1180px){.appr .in{padding:44px 0}}
.appr h2{font-size:clamp(30px,4vw,48px);color:#fff;margin-bottom:26px}
.appr h2 em{color:var(--terra-em)}
.carousel{display:flex;align-items:center;gap:20px}
.carou-ctrl{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--terra-ctrl);background:transparent;color:#fff;font-size:16px;cursor:pointer;display:grid;place-items:center;transition:background .15s ease}
.carou-ctrl:hover{background:rgba(255,255,255,.14)}
.carou-track{flex:1;overflow:hidden}
.carou-cards{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.carou-cards{transition:none}}
.scenario{flex:0 0 100%;box-sizing:border-box;background:var(--terra-card);color:var(--terra-card-tx);border-radius:8px;padding:26px 40px;display:flex;align-items:center;gap:24px}
.scenario p{flex:1;text-align:center;font-size:clamp(16px,1.7vw,20px);font-weight:500;line-height:1.5}
.scenario .chk{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--terra);color:#fff;display:grid;place-items:center;font-size:15px}
.dots{display:flex;justify-content:center;gap:9px;margin-top:20px}
.dots button{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:transparent;padding:0;cursor:pointer}
.dots button[aria-current="true"]{background:#fff;border-color:#fff}
@media(max-width:600px){.scenario{padding:22px 22px}.carou-ctrl{width:34px;height:34px}}

/* ways to work */
.work{background:var(--surface)}
.work .in{max-width:1080px;margin:0 auto;padding:80px 40px}
@media(min-width:1180px){.work .in{padding:80px 0}}
.work h2{font-size:clamp(30px,4vw,48px);color:var(--ink);max-width:none;text-align:center}
.work h2 em{font-weight:600;font-style:italic;color:var(--accent-tx)}   /* §3 emphasis word */
/* §10 — the star acts as an asterisk footnoting the moments row below. */
.work h2 .ast{font-size:.5em;color:var(--accent-tx);vertical-align:super;line-height:0;font-style:normal;font-weight:600;margin-left:.04em}
/* §10 moments row — centred, each word led by an accent star. Words are
   Newsreader italic in ink; --ink-soft is used because plain --muted only
   reaches 3.70:1 on this white section and fails AA at this size. */
.work .range{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,21px);color:var(--ink-soft);margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 26px}
.work .range .m{display:inline-flex;align-items:baseline;gap:6px}
.work .range .s{color:var(--accent-tx);font-style:normal;font-size:13px}
.work .sub{font-size:clamp(16px,2vw,20px);color:var(--ink-soft);margin-top:12px;max-width:56ch;margin-left:auto;margin-right:auto;text-align:center}
/* Second sentence on its own line. A block span rather than <br>, so the gap
   between the two lines stays adjustable here in one place. */
.work .sub .l2{display:block;margin-top:2px}
/* §6 The three tiers are separated OUTLINED CARDS now, not filled bars.
   Each carries a terracotta triangle flush to its left edge, tip pointing
   right, with a serif italic number inside, and a terracotta caret at right. */
.acc{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.bar{border:1px solid var(--line);background:var(--surface);border-radius:12px;overflow:hidden}
.bar-head{width:100%;border:0;cursor:pointer;text-align:left;background:transparent;color:var(--ink);padding:20px 22px 20px 76px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--sans);min-height:82px}
/* triangle: base flush to the card's left edge, full height, tip to the right */
.bar-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:56px;background:var(--accent);clip-path:polygon(0 0,0 100%,100% 50%)}
.bar-num{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:var(--serif);font-style:italic;font-weight:500;font-size:25px;line-height:1;color:#fff}
.bar-head>span.bar-txt{display:flex;flex-direction:column;gap:3px}
.bar-head .t{font-weight:600;font-size:20px;letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
.bar-head .st{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft);font-weight:400}
.bar-head .chev{font-size:30px;line-height:1;color:var(--accent-tx);transition:transform .25s ease;flex:0 0 auto}
.bar-head[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.bar-head .chev{transition:none}}
@media(max-width:520px){.bar-head{padding-left:64px;min-height:74px}.bar-head::before{width:46px}.bar-num{left:11px;font-size:22px}}
.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;background:var(--acc-body);border-top:1px solid var(--line)}
.panel.open{grid-template-rows:1fr}
@media (prefers-reduced-motion:reduce){.panel{transition:none}}
.panel-in{overflow:hidden}
.panel-pad{padding:18px 26px 22px 76px;display:flex;flex-direction:column;gap:18px}
.offer .on{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--acc-body-tx);letter-spacing:-.01em;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.offer .sig{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--acc-terra);letter-spacing:.02em}
.offer .meta{font-size:14px;color:var(--acc-meta);font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.offer p{font-size:15px;line-height:1.5;color:var(--acc-body-muted);margin-top:6px;max-width:64ch}
.offer + .offer{border-top:1px solid color-mix(in srgb,var(--acc-body-muted) 22%,transparent);padding-top:16px}
.notfit{margin-top:26px;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted)}
.notfit b{font-style:normal;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase;margin-right:8px}

/* band */
.band{background:var(--olive);color:var(--band-tx)}
.band .in{max-width:1080px;margin:0 auto;padding:74px 40px;text-align:center;display:flex;flex-direction:column;align-items:center}
@media(min-width:1180px){.band .in{padding:74px 0}}
.band .kick{color:var(--band-p)}
/* Sized so the headline sits on one line on desktop: at 48px the current copy
   is 1119px wide against a 1000px container; 42px brings it to 963px. The 22ch
   cap suited the old shorter headline and would force a 3-line wrap now.
   It still wraps on tablet/phone, which is correct. */
.band h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.9vw,42px);color:#fff;margin-top:12px;max-width:100%}
.band p{font-size:clamp(16px,2vw,20px);color:var(--band-p);max-width:50ch;margin:18px auto 0;line-height:1.55}
.band-cta{display:flex;gap:13px;margin-top:28px;flex-wrap:wrap;justify-content:center}
/* §7 primary on the terracotta band is SLATE. Slate vs terracotta is only
   1.03:1, so without a light edge the button shape disappears into the band
   and reads as floating text — hence the cream border. */
.btn-white{background:var(--sig);color:#fff;border-color:rgba(255,255,255,.85)}
.btn-white:hover{opacity:.92;border-color:#fff}
.btn-onband{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-onband:hover{border-color:#fff}

/* footer */
footer{background:var(--footer);color:var(--footer-meta)}
footer .in{max-width:1080px;margin:0 auto;padding:40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px 24px}
@media(min-width:1180px){footer .in{padding:40px 0}}
.foot-brand{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:.14em;color:var(--footer-brand);justify-self:start}
.foot-brand .d{color:var(--accent-lt)}
.place{font-family:var(--serif);font-style:italic;color:var(--footer-meta);font-size:16px;justify-self:center;text-align:center}
.place .s{color:var(--footer-em);font-style:normal}
.foot-meta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:16px;justify-self:end}
.foot-meta a{color:var(--footer-meta)}
.foot-meta a:hover{color:#fff}
.foot-meta .cp{color:var(--footer-copy)}
@media(max-width:760px){footer .in{grid-template-columns:1fr;justify-items:center;text-align:center}.foot-brand,.foot-meta{justify-self:center}}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   Interior pages (About / Orbit / Projects)
   Added in Phase 1. The only edit above this line is the nav's
   1000px breakpoint, added because the nav grew to seven links.
   ============================================================ */

/* active nav item — reuses the .lnk hover underline, held open */
.nav-links a.lnk[aria-current="page"]::after{right:0}

/* page header — the interior-page counterpart to Home's .hero */
.pagehead{background:var(--teal);color:var(--teal-tx)}
.pagehead .in{max-width:1080px;margin:0 auto;padding:76px 40px 64px}
@media(min-width:1180px){.pagehead .in{padding:76px 0 64px}}
.pagehead h1{font-size:clamp(38px,5.4vw,58px);color:var(--teal-tx);margin-top:14px;max-width:18ch}
.pagehead h1 em{color:var(--accent-lt)}  /* §3 emphasis on the dark page head */
@media(max-width:820px){.pagehead .in{padding:52px 40px 46px}}

/* TEMP stub block — delete from each page as Phase 2 builds it out */
.stub{background:var(--page)}
.stub .in{max-width:1080px;margin:0 auto;padding:96px 40px;text-align:center}
@media(min-width:1180px){.stub .in{padding:96px 0}}
.stub p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--muted);max-width:44ch;margin:0 auto}

/* Short interior pages: push the footer to the bottom of the viewport.
   Scoped to body.page so Home's layout is untouched. */
body.page{display:flex;flex-direction:column;min-height:100vh}
body.page footer{margin-top:auto}

/* ============================================================
   Phase 2 — About + Orbit
   ============================================================ */

/* optional lede under a .pagehead h1 */
.pagehead .phlede{font-size:clamp(17px,2vw,20px);color:var(--teal-soft);max-width:52ch;margin-top:18px;line-height:1.55}
.pagehead .stamp{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-muted);margin-top:22px}

/* generic interior prose section on the page background */
.prose{background:var(--page)}
.prose .in{max-width:1080px;margin:0 auto;padding:76px 40px}
@media(min-width:1180px){.prose .in{padding:76px 0}}
.prose.on-surface{background:var(--surface)}
.prose h2{font-size:clamp(26px,3.4vw,40px);color:var(--ink);max-width:22ch}
.prose h2 em{color:var(--accent-tx)}
.prose .body{max-width:64ch;margin-top:22px;display:flex;flex-direction:column;gap:18px}
.prose .body p{font-size:clamp(16px,1.9vw,18.5px);line-height:1.62;color:var(--ink-soft)}
.prose .body p b{font-weight:600;color:var(--ink)}

/* pull-quote list — the POV lines */
.povs{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.pov{background:var(--surface);border-left:3px solid var(--accent-tx);border-radius:0 6px 6px 0;padding:20px 22px}
.prose.on-surface .pov{background:var(--page)}
.pov p{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.45;color:var(--ink)}

/* Orbit — the rotating /now sections */
.orbit{background:var(--page)}
.orbit .in{max-width:1080px;margin:0 auto;padding:72px 40px}
@media(min-width:1180px){.orbit .in{padding:72px 0}}
.orbit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px 26px}
.card .lbl{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--acc-meta);display:flex;align-items:center;gap:8px}
.card .lbl .s{color:var(--accent-tx);font-size:13px}
.card h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:21px;color:var(--ink);margin-top:8px}
.card ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.card li{font-size:15.5px;line-height:1.5;color:var(--ink-soft);padding-left:16px;position:relative}
.card li::before{content:"→";position:absolute;left:0;color:var(--accent-tx);font-size:13px}
.card li b{font-weight:600;color:var(--ink)}
.card.wide{grid-column:1/-1}

/* ============================================================
   Design update (§3, §9)
   ============================================================ */

/* §3 wordmark dropdown — the mark still links home; the caret opens the menu.
   Hover opens it on pointer devices; the caret handles touch + keyboard. */
.brand-wrap{position:relative;display:flex;align-items:center}
/* The wordmark itself opens the menu now — no caret. It still links home on
   desktop; on touch the first tap opens the menu (Home is an item inside). */
.brand{position:relative}
.brand::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:var(--accent-tx);transition:right .22s ease}
.brand-wrap:hover .brand::after,.brand:focus-visible::after,.brand[aria-expanded="true"]::after{right:0}
@media (prefers-reduced-motion:reduce){.brand::after{transition:none}}

/* Invisible bridge across the gap between wordmark and menu, so travelling
   diagonally toward the menu doesn't break the hover. Paired with a close
   delay in script.js — the gap alone was what made this feel twitchy. */
.brand-wrap::before{content:"";position:absolute;top:100%;left:0;width:100%;height:14px}

/* 50% translucent + blur. Verified to clear AA over every section the menu
   can overlap; the darkest case (teal Eras) lands at 4.99:1. */
.brand-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:158px;background:color-mix(in srgb,var(--surface) 50%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:9px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.16);flex-direction:column;gap:2px;z-index:40;display:none}
.brand-menu.open{display:flex}
.brand-menu a{font-family:var(--sans);font-size:15.5px;color:var(--ink);padding:9px 12px;border-radius:6px;letter-spacing:0;white-space:nowrap}
/* Accent-colored text can't be used inside a translucent menu: over the teal
   section it lands at 2.01:1, and it still fails at 80% opacity. Hover leans on
   a near-solid background instead, and the current page is marked by weight. */
.brand-menu a:hover,.brand-menu a:focus-visible{background:color-mix(in srgb,var(--page) 90%,transparent);color:var(--ink)}
.brand-menu a[aria-current="page"]{font-weight:600}

/* §3 "Appelle-moi" → "Call Me When" on hover/focus.
   Both labels share one grid cell, so the nav never shifts width.
   Only the French label is exposed to screen readers. */
.swap{display:inline-grid;align-items:center}
.swap .sw-a,.swap .sw-b{grid-area:1/1;transition:opacity .16s ease}
.swap .sw-b{opacity:0;color:var(--accent-tx);font-weight:600}
.swap:hover .sw-a,.swap:focus-visible .sw-a{opacity:0}
.swap:hover .sw-b,.swap:focus-visible .sw-b{opacity:1}

/* §9 "unwritten" easter egg — quiet until you touch it. */
.egg{color:inherit;border-bottom:1px dotted rgba(255,255,255,.42);transition:color .16s ease,border-color .16s ease}
.egg:hover,.egg:focus-visible{color:var(--accent-lt);border-bottom-color:var(--accent-lt)}

/* ============================================================
   Popper — ported from popper.html (POPPER-SPEC.md)
   Every class is prefixed `pop-`: the reference used .card, .panel, .sub and
   .bar, all of which already exist here and drive the accordion and the Orbit
   cards. Values are carried over verbatim; only the names changed.
   Layering is load-bearing: back image → live 3D die → front glass.
   ============================================================ */

/* trigger, sits under the Embedded accordion item */
.pop-trigger{margin:56px auto 0;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;cursor:pointer}
.pop-thumb{width:104px;height:auto;filter:drop-shadow(0 10px 16px rgba(30,56,64,.22));transition:transform .18s ease}
.pop-trigger:hover .pop-thumb,.pop-trigger:focus-visible .pop-thumb{transform:translateY(-4px) scale(1.05)}
/* Sans 700 overrides the spec's §6 serif-italic: the sans bold is newer. */
.pop-tlabel{font-family:var(--sans);font-style:normal;font-weight:700;font-size:17px;color:var(--accent-tx)}
.pop-trigger:focus-visible{outline:3px solid var(--accent-tx);outline-offset:6px;border-radius:14px}
@media (prefers-reduced-motion:reduce){.pop-thumb{transition:none}}

/* lightbox */
.pop-overlay{position:fixed;inset:0;background:rgba(30,56,64,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;z-index:50;padding:20px;animation:popfade .2s ease}
.pop-overlay[hidden]{display:none}
@keyframes popfade{from{opacity:0}to{opacity:1}}
.pop-modal{position:relative;background:#fff;color:#1e3840;border-radius:22px;padding:30px 22px 20px;max-width:420px;width:100%;box-shadow:0 30px 70px -20px rgba(30,56,64,.55);animation:popmodal .25s cubic-bezier(.2,.85,.25,1);text-align:left}
@keyframes popmodal{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pop-overlay,.pop-modal{animation:none}}
.pop-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(30,56,64,.08);color:#1e3840;font-size:20px;line-height:1;cursor:pointer}
.pop-close:hover{background:rgba(30,56,64,.16)}
.pop-kicker{font-family:var(--sans);font-weight:800;font-size:23px;letter-spacing:.03em;line-height:1.12;text-align:center;margin:4px 0 8px;color:var(--accent)}
.pop-h{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.1;text-align:center;margin:0 0 6px;color:#1e3840}
.pop-h em{font-style:italic}

/* the dome + die */
.pop-panel{background:#fde8d8;border-radius:20px;padding:20px;display:block;margin:0 auto;width:max-content;max-width:100%}
.popper{display:block}
.pop-stage{position:relative;width:330px;height:292px;max-width:100%;border:0;background:none;padding:0;cursor:pointer;display:block;user-select:none}
.pop-stage:focus-visible{outline:3px solid var(--accent);outline-offset:8px;border-radius:24px}
.pop-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pop-front{transition:opacity .25s}
.popper[data-glass="teal"] .pop-front.teal{opacity:1}
.popper[data-glass="teal"] .pop-front.white{opacity:0}
.popper[data-glass="clear"] .pop-front.teal{opacity:0}
.pop-scene{position:absolute;left:48%;top:37%;width:67px;height:67px;transform:translate(-50%,-50%);perspective:480px;pointer-events:none}
.pop-die{position:relative;width:67px;height:67px;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(24deg);transition:transform 1.15s cubic-bezier(.2,.85,.25,1)}
@media (prefers-reduced-motion:reduce){.pop-die{transition:none}}
.pop-core{position:absolute;width:67px;height:67px;border-radius:6px;background:#a52c1a;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pop-cf1{transform:rotateY(0) translateZ(31px)}.pop-cf2{transform:rotateY(180deg) translateZ(31px)}.pop-cf3{transform:rotateY(90deg) translateZ(31px)}
.pop-cf4{transform:rotateY(-90deg) translateZ(31px)}.pop-cf5{transform:rotateX(90deg) translateZ(31px)}.pop-cf6{transform:rotateX(-90deg) translateZ(31px)}
.pop-face{position:absolute;width:67px;height:67px;border-radius:19px;display:grid;place-items:center;padding:5px;background:radial-gradient(circle at 38% 30%, rgba(255,255,255,.5), rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 58%, #d8452c, #bf3320 60%, #8f2414 100%);border:1px solid rgba(120,20,10,.28);box-shadow:inset 0 0 12px rgba(110,18,8,.55),inset 5px 6px 14px rgba(255,255,255,.14),inset -4px -6px 12px rgba(90,12,4,.4);font-family:var(--serif);font-style:italic;font-weight:600;font-size:12px;line-height:1.05;letter-spacing:-.1px;text-align:center;word-break:keep-all;overflow-wrap:normal;color:rgba(255,236,226,.9);text-shadow:0 -1.5px 1.5px rgba(70,6,0,.8),0 1.5px 0 rgba(255,255,255,.42);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pop-f1{transform:rotateY(0) translateZ(33.5px)}.pop-f2{transform:rotateY(180deg) translateZ(33.5px)}.pop-f3{transform:rotateY(90deg) translateZ(33.5px)}
.pop-f4{transform:rotateY(-90deg) translateZ(33.5px)}.pop-f5{transform:rotateX(90deg) translateZ(33.5px)}.pop-f6{transform:rotateX(-90deg) translateZ(33.5px)}

/* result + hint */
.pop-result{min-height:60px;margin:12px auto 0;max-width:42ch}
.pop-result .pop-line{font-family:var(--sans);font-size:18px;line-height:1.35;margin:0 0 16px;color:#1e3840;text-align:center;opacity:0;transform:translateY(6px);transition:.4s}
.pop-result .pop-nudge{font-size:16px;font-weight:600;text-align:center;color:var(--accent);margin:0;opacity:0;transform:translateY(6px);transition:.4s .06s}
.pop-result.show .pop-line,.pop-result.show .pop-nudge{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pop-result .pop-line,.pop-result .pop-nudge{transition:none}}
/* Reference used #8a969a here; that is 3.04:1 on white and fails AA at 12px.
   Darkened to keep the site's AA standard — the only value changed in the port. */
.pop-hint{font-size:12px;color:#697578;margin-top:12px;text-align:center}
@media(max-width:420px){.pop-stage{width:280px;height:248px}.pop-panel{padding:14px}}

/* ============================================================
   §8 Wavy frame — the hero's image device, replacing the portrait slot.
   Three stacked layers: wavy frame (inline SVG, currentColor) → mat (darker
   tone of the frame) → window (holds the photobooth strip).
   Click rotates slate → terracotta → sage; slate shows first.
   ============================================================ */
/* Capped to about the height of the hero copy block so it reads as a slim
   accent, not a full-height panel. Aspect is held by .frame's aspect-ratio,
   so the cap is expressed as width: 470 * 297/689 = 203px. */
.frame-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:203px;max-width:203px}
.frame{position:relative;display:block;width:100%;aspect-ratio:297/689;background:none;border:0;padding:0;cursor:pointer;color:var(--frame,#3f6d8f);transition:color .3s ease}
.frame:focus-visible{outline:3px solid var(--sig-tx);outline-offset:8px;border-radius:12px}
.frame-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.frame-landscape{display:none}
/* Mat: a substantial darker band around the window. Bevel = paired inset shadows. */
/* Bevel scaled down with the frame — 3px/4px read heavy at this size. */
.frame-mat{position:absolute;left:11%;right:11%;top:4.5%;bottom:4.5%;border-radius:5px;background:var(--mat,#2c4f68);transition:background .3s ease;
  box-shadow:inset -2px -2px 3px rgba(255,255,255,.30), inset 2px 2px 3px rgba(0,0,0,.50)}
/* Window: one open rectangle, tall/narrow (~1:2.4) for a photobooth strip. */
.frame-window{position:absolute;left:14%;right:14%;top:15.5%;bottom:15.5%;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden;display:grid;place-items:center}
.frame-window img{width:100%;height:100%;object-fit:cover;display:block}
.frame-window .ph{font-family:var(--serif);font-style:italic;font-size:14px;color:rgba(255,255,255,.72);text-align:center;padding:0 8px;line-height:1.35}
@media (prefers-reduced-motion:reduce){.frame,.frame-mat{transition:none}}
/* Affordance: carousel-style dots, active one takes the current frame colour. */
.frame-dots{display:flex;gap:9px}
.frame-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#c3ccce;cursor:pointer;transition:background .3s ease}
.frame-dots button[aria-current="true"]{background:var(--frame,#3f6d8f)}
.frame-dots button:focus-visible{outline:2px solid var(--sig-tx);outline-offset:3px}
/* Stacked hero: the frame moves above the copy and is capped so it doesn't
   swallow a phone screen. This lives here, after the base .frame-wrap rule —
   in the hero's media query above it lost the cascade at equal specificity. */
/* §D.4 no order:-1 — the copy (h1 + lede + CTAs) stacks above the photostrip. */
/* Landscape runs ~full column width rather than the narrow portrait cap. */
@media(max-width:820px){.frame-wrap{max-width:none;width:100%;margin:0 auto}}
/* §D4 portrait → landscape swap. This MUST sit after .frame-svg and
   .frame-landscape above: same specificity, so source order decides. */
@media(max-width:820px){
  .frame-portrait{display:none}
  .frame-landscape{display:block}
  .frame{aspect-ratio:542/348}
  .frame-mat{left:5.2%;right:5.2%;top:8.5%;bottom:8.5%;border-radius:6px}
  .frame-window{left:8.5%;right:8.5%;top:15%;bottom:15%}
}