/* Cathy Cousins personal brand · Design tokens. CURRENT: v4 "Ivory + Ink, light and dark" (--cc-v4-*, 26 Oct 2026; themes in /_pb/v4.css). Older: v3 "Gallery White + Black Label" (--cc-v3-*). Older: v2 "Rose clay + Deep Rust" (chosen 24 Oct 2026)
   Direction: pure black, warm blush-tinted glass, rose clay + blush sand accents, Deep Rust for CTAs only, gold for fine detail.
   v1 (rust-led) values are documented on /design/ under "History".
   Reuse: <link rel="stylesheet" href="/_pb/design-tokens.css"> then use var(--cc-*). */





:root{
  /* Base */
  --cc-black:#000000;          /* Pure Black: page base, always */
  --cc-onyx:#0F0D0C;           /* Onyx: solid surface / glass fallback */
  --cc-ember:#1A1512;          /* Ember: raised solid surface, inputs */
  /* Text */
  --cc-bone:#F3ECE2;           /* Bone: headings + body text (17.91:1 on black) */
  --cc-blush:#E3CBBE;          /* Blush Sand: headline italic accents (13.55:1) */
  --cc-sand:#D9C8AF;           /* Sand (beige): sub lines, secondary copy (12.83:1) */
  --cc-taupe:#9D9289;          /* Taupe: captions, meta, muted text (6.91:1) */
  /* Accents */
  --cc-rose:#C98676;           /* Rose Clay: eyebrows, links, key numbers, glow (7.16:1 on black, 6.61 on Onyx) */
  --cc-rust-top:#A8461F;       /* Deep Rust gradient top: primary button (Bone text 5.03:1) */
  --cc-rust-deep:#9A3F1E;      /* Deep Rust: primary CTA fill only (Bone text 5.77:1); print accent on Bone */
  --cc-gold:#C6A664;           /* Brass Gold: hairlines, tiny marks, focus rings (9.04:1) */
  --cc-rust:var(--cc-rose);    /* legacy alias from v1; v1 Rust was #C4602F */
  /* Glass (warm, tinted with blush/sand, never plain white) */
  --cc-glass-1:rgba(227,203,190,.085);   /* top/leading edge of a glass panel */
  --cc-glass-2:rgba(217,200,175,.025);   /* far edge */
  --cc-glass-hover:rgba(227,203,190,.12);
  --cc-glass-line:rgba(227,203,190,.18); /* hairline border */
  --cc-glass-line-hi:rgba(198,166,100,.42); /* hover border (gold) */
  --cc-glass-blur:blur(22px) saturate(160%);
  --cc-glass-fallback:rgba(20,17,15,.92);
  --cc-hairline:rgba(243,236,226,.10);
  --cc-glow-rose:radial-gradient(circle at 40% 40%,rgba(201,134,118,.50),rgba(148,80,63,.20) 45%,transparent 70%);
  --cc-glow-rose-soft:rgba(201,134,118,.10);
  --cc-glow-gold:rgba(198,166,100,.20);
  /* ===== v3 "Gallery White + Black Label" (chosen 26 Oct 2026) — CURRENT site theme (body.light + light.css) =====
     The dark v2 tokens above are kept only for the archived /design/v2/ page. */
  --cc-v3-white:#FFFFFF;        /* page background */
  --cc-v3-linen:#F4F1EC;        /* surfaces: cards, panels, PDF paper */
  --cc-v3-linen-2:#EAE5DC;      /* deeper linen: chips, table header on light */
  --cc-v3-ink:#151413;          /* headings, body, primary buttons (18.40:1 on white) */
  --cc-v3-graphite:#5B5751;     /* secondary text (7.17 white, 6.37 linen) */
  --cc-v3-black:#0B0B0B;        /* Black Label: header, black cards, bands */
  --cc-v3-carbon:#1A1A1A;       /* raised black */
  --cc-v3-stone:#CFCAC2;        /* secondary text on black (12.07) */
  --cc-v3-champagne:#C8A96A;    /* hairlines, frames, seals; decor only on light (2.25) */
  --cc-v3-gold-text:#7D6233;    /* Deep Champagne: gold text on light (5.73 white, 5.08 linen) */
  --cc-v3-gold-bright:#E2C27A;  /* Bright Gold: gold text on black (11.46) */
  --cc-v3-foil:linear-gradient(100deg,#8C6A2F 0%,#F0D99A 30%,#B8913E 50%,#F7E7BC 68%,#9A7638 100%);   /* foil on black */
  --cc-v3-foil-ink:linear-gradient(100deg,#5E4720 0%,#957541 30%,#6E5428 52%,#9C7C45 72%,#5E4720 100%); /* foil type on light (>=3.2:1, large text only) */
  --cc-v3-hair:linear-gradient(90deg,transparent,#C8A96A 20%,#E9D29A 50%,#C8A96A 80%,transparent);
  --cc-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  /* light-page aliases used by light.css / articles.css (now v3) */
  --cc-light-bg:#FFFFFF;
  --cc-light-paper:#F4F1EC;
  --cc-light-oat:#EAE5DC;
  --cc-light-ink:#151413;
  --cc-light-ink-2:#5B5751;
  --cc-light-muted:#5B5751;
  --cc-light-accent:#7D6233;
  --cc-light-line:rgba(21,20,19,.12);
  --cc-light-line-strong:rgba(21,20,19,.35);
  --cc-light-brass:#C8A96A;
  --cc-light-glass-1:rgba(244,241,236,.92);
  --cc-light-glass-2:rgba(244,241,236,.72);
  --cc-light-glass-line:rgba(21,20,19,.08);
  --cc-light-shadow:0 1px 2px rgba(20,18,15,.04),0 14px 40px rgba(20,18,15,.06);
  /* Type */
  --cc-display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --cc-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --cc-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --cc-fs-display:clamp(44px,5.4vw,72px);
  --cc-fs-h2:clamp(30px,3.2vw,40px);
  --cc-fs-h3:22px;
  --cc-fs-sub:20px;
  --cc-fs-body:17px;
  --cc-fs-caption:13px;
  --cc-fs-eyebrow:11.5px;
  /* Shape, space, motion */
  --cc-r-sm:10px;--cc-r:18px;--cc-r-lg:26px;--cc-r-pill:999px;
  --cc-space:8px;
  --cc-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);
  --cc-inset:inset 0 1px 0 rgba(243,236,226,.10),inset 0 -1px 0 rgba(0,0,0,.35);
  --cc-ease:cubic-bezier(.2,.8,.2,1);
  --cc-dur:240ms;
}

/* ===== v4 "Ivory + Ink" (26 Oct 2026) · CURRENT. Light and dark themes are mapped in /_pb/v4.css ===== */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/geist-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/cormorant-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url(/fonts/cormorant-italic-latin.woff2) format("woff2")}
:root{
  /* light */
  --cc-v4-ivory:#FAF8F4;       /* light page */
  --cc-v4-crema:#F6F2EC;       /* light cards, and text on dark */
  --cc-v4-sand:#EDE5D8;        /* pills, stripes, code */
  --cc-v4-arena:#D8CEC2;       /* borders on light */
  --cc-v4-ink:#17140F;         /* text on light, primary button */
  --cc-v4-ink-soft:#5A5249;    /* secondary text on light (7.23 on Ivory) */
  --cc-v4-tinta:#0E0E0E;       /* the one dark section on light pages */
  /* dark */
  --cc-v4-night:#100F0D;       /* dark page */
  --cc-v4-night-card:#1A1815;  /* dark cards */
  --cc-v4-night-raised:#24211D;/* pills, stripes, hover on dark */
  --cc-v4-taupe:#BDB3A6;       /* secondary text on dark (9.27 on Night) */
  --cc-v4-stroke:rgba(250,248,244,.62); /* the "bright": thin ivory strokes on dark */
  /* matte gold, three steps */
  --cc-v4-gold-1:#C9A882;      /* Oro Suave: gold on dark; decor on light */
  --cc-v4-gold-2:#A07850;      /* Oro Medio: rules, dots, icons (decor) */
  --cc-v4-gold-3:#7A5636;      /* Oro Oscuro: gold TEXT on light (6.16 on Ivory) */
  /* one foil moment per view */
  --cc-v4-foil:linear-gradient(105deg,#7A5636 0%,#A07850 18%,#E9D3AE 38%,#C9A882 50%,#F4E6CC 62%,#A07850 80%,#7A5636 100%);
  --cc-v4-serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --cc-v4-sans:"Geist","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cc-v4-ease:cubic-bezier(.22,.61,.36,1);
  --cc-v4-ease-out:cubic-bezier(.16,1,.3,1);
}

/* Cathy Cousins · Personal Brand Workspace. Uses Design System v2 "Rose clay + Deep Rust" (24 Oct 2026).
   Load /_pb/design-tokens.css first; colours come from the --cc-* tokens. */
:root{--bg:var(--cc-black,#000);--card:rgba(20,17,15,.92);--line:var(--cc-glass-line,rgba(227,203,190,.18));--ink:var(--cc-bone,#F3ECE2);--muted:var(--cc-taupe,#9D9289);--accent:var(--cc-rose,#C98676);--accent-soft:rgba(201,134,118,.14);--sage:#9FC79A;--sage-soft:rgba(159,199,154,.12);--sand:rgba(217,200,175,.07)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--cc-body,Inter,system-ui,sans-serif);-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;width:720px;height:720px;right:-260px;top:-300px;border-radius:50%;pointer-events:none;z-index:-1;background:var(--cc-glow-rose);opacity:.55;filter:blur(10px)}
::selection{background:var(--cc-rust-deep,#9A3F1E);color:var(--cc-bone,#F3ECE2)}
:focus-visible{outline:2px solid var(--cc-gold,#C6A664);outline-offset:3px;border-radius:6px}
a{color:var(--accent)}
.top{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.72);backdrop-filter:var(--cc-glass-blur,blur(22px));-webkit-backdrop-filter:var(--cc-glass-blur,blur(22px));border-bottom:1px solid var(--cc-hairline,rgba(243,236,226,.1))}
.top-inner{max-width:1080px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 17px var(--cc-display,Inter);letter-spacing:-.01em;white-space:nowrap}
.brand .dot{width:30px;height:30px;border-radius:50%;background:var(--cc-rust-deep,#9A3F1E);color:var(--cc-bone);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav a{padding:7px 13px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:14px}
nav a:hover{background:rgba(217,200,175,.08);color:var(--ink)}
nav a.on{background:var(--cc-bone);color:#000}
.out{font-size:13px;color:var(--muted);text-decoration:none}.out:hover{color:var(--accent)}
main{max-width:1080px;margin:0 auto;padding:44px 28px 80px}
.narrow{max-width:820px}
h1,h2,h3{font-family:var(--cc-display,Inter);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h1{font-weight:800;letter-spacing:-.03em}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--cc-blush)}
h1{font-size:40px;margin:0 0 12px;letter-spacing:-.01em}
h2{font-size:26px;margin:48px 0 14px}
h3{font-size:19px;margin:0 0 10px}
.lead{font-size:18px;color:var(--cc-sand,#D9C8AF);max-width:680px;margin:0 0 32px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 11.5px/1 var(--cc-display,Inter);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cc-gold)}
.card .eyebrow::before{display:none}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--cc-r,18px);padding:24px;box-shadow:var(--cc-inset)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,ol.steps li,.log li,.links a,table,.toc a{background:linear-gradient(160deg,var(--cc-glass-1),var(--cc-glass-2) 70%);backdrop-filter:var(--cc-glass-blur);-webkit-backdrop-filter:var(--cc-glass-blur)}}
a.card{text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s;display:block}
a.card:hover{transform:translateY(-3px);border-color:var(--cc-glass-line-hi);box-shadow:var(--cc-inset),0 24px 60px rgba(0,0,0,.55),0 0 40px var(--cc-glow-rose-soft)}
a.card p{color:var(--muted);font-size:15px;margin:0}
a.card .go{display:inline-block;margin-top:16px;color:var(--accent);font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card ul{margin:0;padding-left:20px}.card li{margin:4px 0}
.pill{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--sand);color:var(--muted);vertical-align:middle;white-space:nowrap}
.pill.prog{background:var(--accent-soft);color:var(--cc-rose)}
.pill.done{background:var(--sage-soft);color:var(--sage)}
.pill.rec{background:linear-gradient(180deg,var(--cc-rust-top),var(--cc-rust-deep));color:var(--cc-bone)}
.sec-head{display:flex;align-items:center;gap:12px;margin:48px 0 14px}.sec-head h2{margin:0}
blockquote{margin:10px 0;padding:10px 16px;border-left:1px solid var(--cc-gold);background:transparent;font-style:italic;color:var(--cc-blush)}
.note{background:var(--sand);border:1px solid var(--cc-hairline);border-radius:12px;padding:14px 18px;font-size:14px;color:var(--muted)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.toc a{font-size:13px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--muted);background:var(--card)}
.toc a:hover{border-color:var(--accent);color:var(--accent)}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;background:rgba(217,200,175,.05)}
tr:last-child td{border-bottom:0}
dl.props{display:grid;grid-template-columns:170px 1fr;gap:8px 18px;margin:0;font-size:15px}
dl.props dt{color:var(--muted)}dl.props dd{margin:0}
.idea{margin-bottom:18px}.idea .num{font-family:var(--cc-mono);color:var(--accent);font-size:15px;margin-right:6px}
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:12px}
ol.steps li{counter-increment:s;position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px 16px 60px}
ol.steps li::before{content:counter(s);position:absolute;left:18px;top:15px;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--cc-rose);display:flex;align-items:center;justify-content:center;font-size:14px}
ol.steps b{display:block}
ol.steps span{color:var(--muted);font-size:15px}
.links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.links a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-decoration:none;color:var(--ink);font-size:15px}
.links a small{display:block;color:var(--muted);font-size:12px}
.links a:hover{border-color:var(--accent)}
.log{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.log li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;display:grid;grid-template-columns:130px 1fr;gap:16px}
.log time{color:var(--accent);font-size:14px}
footer{max-width:1080px;margin:0 auto;padding:24px 28px 40px;color:var(--muted);font-size:13px;border-top:1px solid var(--cc-hairline)}
@media (max-width:860px){.cards,.grid2,.links{grid-template-columns:1fr}.top-inner{flex-wrap:wrap;gap:10px}h1{font-size:32px}dl.props{grid-template-columns:1fr}dl.props dt{margin-top:8px}.log li{grid-template-columns:1fr;gap:4px}}
@media (max-width:860px){.top-inner{padding:12px 20px}.out{margin-left:auto}nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}nav::-webkit-scrollbar{display:none}nav a{white-space:nowrap;flex:none}}

@media (prefers-reduced-motion:reduce){a.card:hover{transform:none}}
.swl{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:14px}
.swl span{display:inline-flex;align-items:center;gap:8px}
.swl i{width:18px;height:18px;border-radius:5px;border:1px solid rgba(243,236,226,.12);display:inline-block}
.swl code{font:500 12px var(--cc-mono);color:var(--muted)}
@media (max-width:600px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* Signature sign-off (Whisper, chosen 24 Oct 2026) */
.signoff{margin:72px 0 0}
.signoff img{display:block;width:240px;max-width:60%;height:auto}

@media (max-width:600px){.signoff{margin-top:48px}.signoff img{width:180px}}

/* v4 "Ivory + Ink" (26 Oct 2026) · content components for <body class="light"> pages, in both themes.
   Colours come from the --t-* theme variables in /_pb/v4.css (load v4.css after this file).
   Headings Cormorant Garamond 300–500 + italic, body Geist. One dark section per light page (.dark). v3 is archived at /_pb/v3/light.css. */
body.light{font-size:17px;line-height:1.72;font-weight:400;letter-spacing:-.003em}
body.light :focus-visible{outline:1.5px solid var(--t-gold);outline-offset:3px;border-radius:6px}
body.light main{max-width:1180px;padding:64px 32px 96px}
body.light main.narrow{max-width:860px}
body.light h1,body.light h2,body.light h3{font-family:var(--cc-v4-serif);color:var(--t-ink);letter-spacing:-.012em}
body.light h1{font-weight:300;font-size:clamp(46px,6.2vw,78px);line-height:1;margin:0 0 20px}
body.light h1 em,body.light h2 em{font-style:italic;font-weight:300;color:var(--t-gold);background:none}
body.light h2{font-weight:400;font-size:clamp(34px,3.8vw,46px);line-height:1.05;margin:88px 0 22px;padding-top:34px;border-top:0;position:relative}
body.light h2::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--t-line)}
body.light .sec-head{padding-top:34px;position:relative;margin:88px 0 22px}
body.light .sec-head::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--t-line)}
body.light .sec-head h2,body.light .card h2{padding:0;margin:0}
body.light .sec-head h2::before,body.light .card h2::before{display:none}
body.light h3{font-weight:500;font-size:27px;line-height:1.15;margin:0 0 10px}
body.light .lead{color:var(--t-ink-2);font-size:20px;font-weight:300;line-height:1.6;max-width:62ch}
body.light .eyebrow{display:block;color:var(--t-gold);font:500 11px/1.4 var(--cc-v4-sans);letter-spacing:.26em;text-transform:uppercase;margin:0 0 18px}
body.light .eyebrow::before{content:"";display:block;width:40px;height:1px;background:var(--t-gold-deco);margin:0 0 16px}
body.light .card .eyebrow::before{display:none}
body.light a{color:var(--t-gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:color .3s var(--cc-v4-ease),text-decoration-color .3s}
body.light a:hover{color:var(--t-ink);text-decoration-color:currentColor}
body.light main p,body.light main li,body.light dd{max-width:70ch}
body.light code{font:500 .84em var(--cc-mono);background:var(--t-surface-2);border:1px solid var(--t-line);border-radius:6px;padding:1px 6px;color:var(--t-ink)}
body.light strong,body.light b{color:var(--t-ink);font-weight:600}

/* cards */
body.light .card,body.light ol.steps li,body.light .links a,body.light .log li{background:var(--t-surface);border:1px solid var(--t-line);border-radius:20px;box-shadow:var(--t-shadow-sm);color:var(--t-ink);backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .6s var(--cc-v4-ease-out),box-shadow .6s var(--cc-v4-ease-out),border-color .4s,background-color .5s}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.light .card,body.light ol.steps li,body.light .links a,body.light .log li{background:var(--t-surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  body.light table,body.light .toc a{backdrop-filter:none;-webkit-backdrop-filter:none}
}
body.light .card{padding:28px}
body.light .card:hover{box-shadow:var(--t-shadow);border-color:var(--t-line-strong)}
body.light a.card{color:var(--t-ink);text-decoration:none}
body.light a.card p{color:var(--t-ink-2)}
body.light a.card .go{color:var(--t-gold);font-weight:500;font-size:14px;letter-spacing:.02em;display:inline-flex;gap:6px;transition:gap .4s var(--cc-v4-ease-out)}
body.light a.card:hover,body.light .links a:hover{transform:translateY(-4px);box-shadow:var(--t-shadow-lg);border-color:var(--t-stroke)}
body.light a.card:hover .go{gap:12px}
body.light .cards{gap:20px}

/* the one dark section */
body.light .dark{background:var(--t-dark-bg);color:var(--t-dark-ink);border:1px solid var(--t-dark-line);box-shadow:var(--t-shadow-lg);position:relative;overflow:hidden}
body.light .card.dark,body.light a.card.dark,body.light .note.dark{background:var(--t-dark-bg)}
body.light .dark::after{content:"";position:absolute;inset:9px;border:1px solid var(--t-dark-frame);border-radius:13px;pointer-events:none;transition:border-color .5s}
body.light .dark:hover::after{border-color:rgba(250,248,244,.5)}
body.light .dark>*{position:relative;z-index:1}
body.light .dark h2,body.light .dark h3{color:var(--t-dark-ink)}
body.light .dark h3 em{color:var(--t-dark-gold)}
body.light .dark b,body.light .dark strong{color:var(--t-dark-ink)}
body.light .dark p,body.light .dark dd,body.light .dark li,body.light a.card.dark p{color:var(--t-dark-ink-2)}
body.light .dark dt,body.light .dark dl.props dt,body.light .dark .eyebrow,body.light .dark .num,body.light .dark a,body.light a.card.dark .go{color:var(--t-dark-gold)}
body.light .dark a:hover{color:var(--t-dark-ink)}
body.light .dark code{background:rgba(250,248,244,.06);border-color:var(--t-dark-line);color:var(--t-dark-ink)}
body.light .dark li::marker{color:var(--t-dark-gold)}

/* notes */
body.light .note{background:transparent;border:0;border-left:1px solid var(--t-gold-deco);border-radius:0;color:var(--t-ink-2);font-size:15.5px;padding:6px 0 6px 20px}
body.light .note.dark{border-radius:20px;border:1px solid var(--t-dark-line);padding:24px 26px;font-size:16px}

/* toc chips */
body.light .toc a{background:transparent;border:1px solid var(--t-line-strong);color:var(--t-ink);font-weight:450;text-decoration:none;padding:7px 14px;transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--cc-v4-ease-out)}
body.light .toc a:hover{background:var(--t-ink);border-color:var(--t-ink);color:var(--t-bg);transform:translateY(-1px)}

/* tables */
body.light table{background:var(--t-surface);border:1px solid var(--t-line);border-radius:18px;box-shadow:var(--t-shadow-sm);font-size:15.5px}
body.light th{background:transparent;color:var(--t-gold);font:500 11px/1.3 var(--cc-v4-sans);letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--t-gold-deco)}
body.light td{border-bottom:1px solid var(--t-line);background:transparent}
body.light tr:nth-child(odd) td{background:transparent}
body.light tbody tr:hover td,body.light tr:hover td{background:var(--t-gold-wash)}
body.light td a{font-weight:500}

/* pills */
body.light .pill{background:var(--t-surface-2);color:var(--t-ink-2);border:1px solid var(--t-line);font:500 12px/1.4 var(--cc-v4-sans);padding:3px 11px}
body.light .pill.prog{background:transparent;color:var(--t-gold);border-color:var(--t-gold-deco)}
body.light .pill.done{background:transparent;color:var(--t-ink);border-color:var(--t-line-strong)}
body.light .pill.done::before{content:"✓ ";color:var(--t-gold)}
body.light .pill.rec{background:var(--t-pill-rec-bg);color:var(--t-pill-rec-ink);border:1px solid var(--t-pill-rec-bg)}

/* idea cards + props */
body.light .idea{margin-bottom:22px}
body.light .idea h3{font-size:30px;font-weight:400;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--t-line)}
body.light .dark.idea h3{border-color:var(--t-dark-line)}
body.light .idea .num{color:var(--t-gold);font:italic 300 30px/1 var(--cc-v4-serif);margin-right:10px}
body.light dl.props dt{color:var(--t-ink-2);font:500 11px/1.5 var(--cc-v4-sans);letter-spacing:.16em;text-transform:uppercase;padding-top:4px}
body.light dl.props dd{color:var(--t-ink)}

/* steps */
body.light ol.steps{gap:14px}
body.light ol.steps li{padding:20px 24px 20px 74px}
body.light ol.steps li:hover{border-color:var(--t-stroke)}
body.light ol.steps li::before{background:transparent;color:var(--t-gold);font:italic 300 22px/1 var(--cc-v4-serif);top:17px;left:22px;width:34px;height:34px;box-shadow:none;border:1px solid var(--t-gold-deco)}
body.light ol.steps span{color:var(--t-ink-2)}
body.light ol.steps b{margin-bottom:2px;font-weight:600}

/* source links + log */
body.light .links a{color:var(--t-ink);text-decoration:none}
body.light .links a small{color:var(--t-gold);text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;font-weight:500}
body.light .log li{padding:20px 24px}
body.light .log time{color:var(--t-gold);font:italic 400 19px/1.3 var(--cc-v4-serif)}

/* buttons */
body.light .btn{display:inline-flex;align-items:center;gap:10px;font:500 15px/1 var(--cc-v4-sans);letter-spacing:.01em;padding:16px 26px;border-radius:999px;text-decoration:none;color:var(--t-btn-ink)!important;background:var(--t-btn-bg);border:1px solid var(--t-btn-bg);box-shadow:var(--t-shadow);transition:transform .5s var(--cc-v4-ease-out),box-shadow .5s var(--cc-v4-ease-out),background-color .3s,gap .4s var(--cc-v4-ease-out)}
body.light .btn:hover{transform:translateY(-2px);box-shadow:var(--t-shadow-lg),0 0 0 3px var(--t-bg),0 0 0 4px var(--t-gold-deco);gap:14px}
body.light .btn:active{transform:translateY(0) scale(.98)}
body.light .btn.ghost{background:transparent;color:var(--t-ink)!important;border:1px solid var(--t-line-strong);box-shadow:none}
body.light .btn.ghost:hover{border-color:var(--t-stroke);background:var(--t-gold-wash);box-shadow:var(--t-shadow-sm)}

/* swatches */
body.light .swl code{color:var(--t-ink-2);background:none;border:0;padding:0}
body.light .swl i{border-color:var(--t-line-strong)}
blockquote{border-left-color:var(--t-gold-deco)!important}
body.light blockquote{color:var(--t-ink-2);font:italic 400 20px/1.45 var(--cc-v4-serif)}
body.light .dark blockquote{color:var(--t-dark-ink-2)}

@media (max-width:860px){body.light main{padding:40px 20px 70px}body.light h2{font-size:32px;margin-top:64px}body.light .sec-head{margin-top:64px}body.light ol.steps li{padding-left:66px}body.light .card{padding:22px}}
@media (prefers-reduced-motion:reduce){body.light a.card:hover,body.light .links a:hover,body.light .btn:hover{transform:none}}
html:has(body.light){scroll-padding-top:90px}
/* dark-section overrides that must beat the component rules above */
body.light .dark dl.props dd{color:var(--t-dark-ink-2)}
body.light .dark dl.props dt{color:var(--t-dark-gold)}
body.light .dark.idea .num{color:var(--t-dark-gold)}
body.light .dark .pill{background:transparent;color:var(--t-dark-ink);border-color:var(--t-dark-line)}
body.light .dark .note{color:var(--t-dark-ink-2)}

/* v4.1 heading scale (26 Oct 2026): heavier and smaller, so short titles sit on one line and wrapped lines never touch.
   Cormorant Garamond is a variable font (300–700) already self-hosted, so 600/700 need no extra files. */
body.light h1,body.light h2,body.light h3{letter-spacing:-.005em}
body.light h1{font-weight:600;font-size:clamp(34px,4.2vw,52px);line-height:1.12;margin:0 0 18px}
body.light h1 em,body.light h2 em{font-weight:600}
body.light h2{font-weight:600;font-size:clamp(28px,3vw,36px);line-height:1.15;margin:80px 0 20px}
body.light h3{font-weight:700;font-size:clamp(21px,1.9vw,24px);line-height:1.2}
body.light .idea h3{font-size:clamp(22px,2.2vw,26px);font-weight:600;line-height:1.2}
body.light .idea .num{font:italic 600 24px/1 var(--cc-v4-serif)}
body.light ol.steps li::before{font:italic 600 19px/1 var(--cc-v4-serif)}
body.light .log time{font:italic 600 18px/1.3 var(--cc-v4-serif)}
body.light blockquote{font-weight:500}
@media (max-width:860px){body.light h1{font-size:clamp(32px,8.4vw,40px);line-height:1.14}body.light h2{font-size:clamp(26px,6.6vw,30px);margin-top:60px}body.light h3{font-size:21px}}

/* v4 "Ivory + Ink" (26 Oct 2026) · theme layer + shared chrome (header, toggle, footer, signature, motion, foil).
   Load last. <html data-theme="light|dark"> is set before paint by the inline script in each page's <head>. */
:root,html[data-theme="light"]{color-scheme:light;
  --t-bg:var(--cc-v4-ivory);--t-surface:var(--cc-v4-crema);--t-surface-2:var(--cc-v4-sand);
  --t-line:rgba(122,86,54,.16);--t-line-strong:rgba(23,20,15,.22);--t-hair:linear-gradient(90deg,rgba(160,120,80,0),rgba(160,120,80,.55) 18%,rgba(160,120,80,.55) 82%,rgba(160,120,80,0));
  --t-ink:var(--cc-v4-ink);--t-ink-2:var(--cc-v4-ink-soft);--t-gold:var(--cc-v4-gold-3);--t-gold-deco:var(--cc-v4-gold-2);--t-gold-wash:rgba(201,168,130,.16);
  --t-stroke:rgba(122,86,54,.42);
  --t-shadow-sm:0 1px 2px rgba(40,28,16,.05),0 2px 6px -2px rgba(40,28,16,.06);
  --t-shadow:0 1px 2px rgba(40,28,16,.04),0 8px 24px -10px rgba(40,28,16,.12),0 24px 48px -28px rgba(40,28,16,.14);
  --t-shadow-lg:0 2px 4px rgba(40,28,16,.05),0 18px 40px -14px rgba(40,28,16,.18),0 40px 80px -40px rgba(40,28,16,.22);
  --t-btn-bg:var(--cc-v4-ink);--t-btn-ink:var(--cc-v4-ivory);
  --t-header:rgba(250,248,244,.82);
  --t-dark-bg:var(--cc-v4-tinta);--t-dark-ink:var(--cc-v4-crema);--t-dark-ink-2:var(--cc-v4-taupe);--t-dark-gold:var(--cc-v4-gold-1);--t-dark-line:rgba(250,248,244,.16);--t-dark-frame:rgba(250,248,244,.22);
  --t-pill-rec-bg:var(--cc-v4-ink);--t-pill-rec-ink:var(--cc-v4-ivory);
}
html[data-theme="dark"]{color-scheme:dark;
  --t-bg:var(--cc-v4-night);--t-surface:var(--cc-v4-night-card);--t-surface-2:var(--cc-v4-night-raised);
  --t-line:rgba(250,248,244,.10);--t-line-strong:rgba(250,248,244,.26);--t-hair:linear-gradient(90deg,rgba(250,248,244,0),rgba(250,248,244,.5) 18%,rgba(250,248,244,.5) 82%,rgba(250,248,244,0));
  --t-ink:var(--cc-v4-crema);--t-ink-2:var(--cc-v4-taupe);--t-gold:var(--cc-v4-gold-1);--t-gold-deco:var(--cc-v4-gold-1);--t-gold-wash:rgba(201,168,130,.12);
  --t-stroke:var(--cc-v4-stroke);
  --t-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --t-shadow:0 1px 0 rgba(250,248,244,.04) inset,0 10px 30px -12px rgba(0,0,0,.6),0 30px 60px -30px rgba(0,0,0,.7);
  --t-shadow-lg:0 1px 0 rgba(250,248,244,.06) inset,0 22px 50px -16px rgba(0,0,0,.75),0 50px 90px -40px rgba(0,0,0,.8);
  --t-btn-bg:var(--cc-v4-crema);--t-btn-ink:var(--cc-v4-night);
  --t-header:rgba(16,15,13,.78);
  --t-dark-bg:var(--cc-v4-night-card);--t-dark-ink:var(--cc-v4-crema);--t-dark-ink-2:var(--cc-v4-taupe);--t-dark-gold:var(--cc-v4-gold-1);--t-dark-line:rgba(250,248,244,.14);--t-dark-frame:var(--cc-v4-stroke);
  --t-pill-rec-bg:var(--cc-v4-crema);--t-pill-rec-ink:var(--cc-v4-night);
}
html{background:var(--t-bg)}
html[data-theme] body{background:var(--t-bg);color:var(--t-ink);font-family:var(--cc-v4-sans);transition:background-color .5s var(--cc-v4-ease),color .5s var(--cc-v4-ease)}
html[data-theme] body::before{display:none}
html[data-theme] ::selection{background:var(--t-ink);color:var(--t-bg)}

/* header */
html[data-theme] body .top{background:var(--t-header);backdrop-filter:saturate(140%) blur(18px);-webkit-backdrop-filter:saturate(140%) blur(18px);border-bottom:1px solid var(--t-line);transition:background-color .5s var(--cc-v4-ease),border-color .5s,box-shadow .4s}
html[data-theme] body .top.scrolled{box-shadow:var(--t-shadow-sm)}
html[data-theme] body .top-inner{max-width:1180px}
html[data-theme] body .top .brand{color:var(--t-ink);font:400 23px/1 var(--cc-v4-serif);letter-spacing:.005em}
html[data-theme] body .top .brand .dot{background:transparent;color:var(--t-gold);border:1px solid var(--t-gold-deco);font:italic 400 17px/1 var(--cc-v4-serif);width:30px;height:30px;transition:transform .6s var(--cc-v4-ease-out),border-color .3s}
html[data-theme] body .top .brand:hover .dot{transform:rotate(-8deg);border-color:var(--t-gold)}
html[data-theme] body .top nav a{color:var(--t-ink-2);background:transparent;font:450 13.5px/1 var(--cc-v4-sans);padding:9px 12px;border-radius:999px;position:relative;transition:color .3s var(--cc-v4-ease)}
html[data-theme] body .top nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1px;background:var(--t-gold-deco);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--cc-v4-ease-out)}
html[data-theme] body .top nav a:hover{color:var(--t-ink);background:transparent}
html[data-theme] body .top nav a:hover::after,html[data-theme] body .top nav a.on::after{transform:scaleX(1)}
html[data-theme] body .top nav a.on{color:var(--t-ink);background:transparent;font-weight:550}
html[data-theme] body .top .out{color:var(--t-ink-2);font:450 13px var(--cc-v4-sans)}
html[data-theme] body .top .out:hover{color:var(--t-gold)}
html[data-theme] body .top :focus-visible{outline:1.5px solid var(--t-gold);outline-offset:3px}
.theme-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border-radius:999px;border:1px solid var(--t-line-strong);background:transparent;color:var(--t-ink);font:500 12.5px/1 var(--cc-v4-sans);letter-spacing:.02em;cursor:pointer;white-space:nowrap;transition:border-color .3s,background-color .3s,box-shadow .3s,transform .2s}
.theme-toggle:hover{border-color:var(--t-stroke);box-shadow:var(--t-shadow-sm)}
.theme-toggle:active{transform:scale(.97)}
.theme-toggle .knob{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--t-surface-2);color:var(--t-gold);transition:transform .6s var(--cc-v4-ease-out),background-color .3s}
.theme-toggle svg{width:14px;height:14px}
.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:block}
html[data-theme="dark"] .theme-toggle .knob{transform:rotate(-30deg)}
.theme-toggle + .out{margin-left:14px}
html[data-theme] body .top .out{margin-left:14px}

/* footer + signature */
html[data-theme] body footer{color:var(--t-ink-2);border-top:1px solid var(--t-line);max-width:1180px}
.signoff .sig-dark{display:none}
html[data-theme="dark"] .signoff .sig-light{display:none}
html[data-theme="dark"] .signoff .sig-dark{display:block}

/* foil: one moment per view */
.foil-rule{display:block;width:84px;height:2px;border-radius:2px;margin:26px 0 0;background:var(--cc-v4-foil);background-size:250% 100%;background-position:100% 0;transition:background-position 2.4s var(--cc-v4-ease),width .9s var(--cc-v4-ease-out)}
.foil-host:hover .foil-rule,.foil-rule.in{background-position:0 0}
.foil-host:hover .foil-rule{width:120px}
.foil-text{color:transparent;background:var(--cc-v4-foil);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;transition:background-position 2.4s var(--cc-v4-ease)}
.foil-text:hover{background-position:100% 0}
.seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--cc-v4-foil);background-size:250% 100%;color:#17140F;font:italic 400 28px/1 var(--cc-v4-serif);box-shadow:0 0 0 1px rgba(122,86,54,.5) inset,0 0 0 4px var(--t-bg),0 0 0 5px rgba(160,120,80,.6),var(--t-shadow);transition:background-position 2.4s var(--cc-v4-ease)}
.seal:hover{background-position:100% 0}

/* motion: fade/rise on scroll (only when JS is on and motion is allowed) */
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--cc-v4-ease-out),transform .9s var(--cc-v4-ease-out);transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (max-width:860px){
  .theme-toggle{order:2;height:32px}
  .theme-toggle .lbl{display:none}.theme-toggle{padding:0 4px}
  html[data-theme] body .top .out{order:2;margin-left:10px}
  html[data-theme] body .top .brand{font-size:21px}
}
html[data-theme] body .top a{text-decoration:none}
html[data-theme] body .top .brand{font-weight:600;font-size:22px}
html[data-theme] body .top .brand .dot{font-weight:600}
@media (max-width:860px){html[data-theme] body .top .brand{font-size:20px}}

/* One-pager preview (26 Oct 2026), v4 + v4.1 headings. Inspiration only: original layout and content. */
.op-preview{background:var(--t-surface-2);color:var(--t-ink-2);font-size:13px;text-align:center;padding:8px 16px;border-bottom:1px solid var(--t-line)}
.op-preview b{color:var(--t-ink)}
mark.ph{background:transparent;color:var(--t-gold);border:1px dashed var(--t-gold-deco);border-radius:6px;padding:0 6px;font-style:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.op main.op-main{max-width:1180px;padding-top:56px}
body.op section{scroll-margin-top:90px}
.op-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;min-height:min(78vh,760px)}
.op-hero h1{font-size:clamp(34px,3.9vw,50px)}
.op-hero .lead{margin:22px 0 28px}
.op-btns{display:flex;flex-wrap:wrap;gap:12px}
.op-small{font-size:13px;color:var(--t-ink-2);margin:14px 0 0}
.op-hero-photo,.op-about-photo{margin:0;position:relative}
.op-hero-photo img,.op-about-photo img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:var(--t-shadow-lg);position:relative;z-index:1;transition:transform 1.2s var(--cc-v4-ease-out)}
.op-hero-photo::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--t-stroke);border-radius:26px;z-index:0;transition:transform 1.2s var(--cc-v4-ease-out)}
.op-hero-photo:hover::before{transform:translate(6px,-6px)}
.op-hero-photo:hover img{transform:scale(1.01)}
.op-strip{display:grid;grid-template-columns:repeat(4,1fr);margin:72px 0 0;border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line)}
.op-strip div{padding:22px 20px;border-left:1px solid var(--t-line)}
.op-strip div:first-child{border-left:0;padding-left:0}
.op-strip .k{display:block;font:500 10.5px/1.4 var(--cc-v4-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--t-gold);margin-bottom:6px}
.op-strip b{font:600 22px/1.2 var(--cc-v4-serif);color:var(--t-ink)}
.op-about{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center;margin-top:96px}
.op-about h2,.op-split h2{margin-top:0;padding-top:0}
.op-about h2::before,.op-split h2::before,.op-signup h2::before{display:none}
.op-about-photo img{border-radius:22px}
.op-about-photo::after{content:"";position:absolute;left:-18px;bottom:-18px;width:90px;height:90px;border-left:1px solid var(--t-gold-deco);border-bottom:1px solid var(--t-gold-deco);border-radius:0 0 0 22px}
.op-sub{color:var(--t-ink-2);margin:-6px 0 24px}
.op-pillars .op-n,.op-offers .op-price{font:italic 600 26px/1 var(--cc-v4-serif);color:var(--t-gold)}
.op-pillars .op-n{display:block;margin-bottom:16px}
.op-pillars p,.op-offers p{color:var(--t-ink-2);margin:0}
.op-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.op-offers .card:hover{transform:translateY(-3px);box-shadow:var(--t-shadow-lg);border-color:var(--t-stroke)}
.op-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.op-offers .op-price{font-size:22px}
body.light .op-feature .op-price{color:var(--t-dark-gold)}
.op-feature a{display:inline-block;margin-top:14px;font-weight:500}
.op-feature h3 em{font-style:italic;font-weight:500;font-size:.8em}
.op-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:96px;padding-top:40px;border-top:1px solid var(--t-line)}
.op-social{list-style:none;margin:0;padding:0;border-top:1px solid var(--t-line)}
.op-social li{border-bottom:1px solid var(--t-line)}
body.light .op-social a{display:grid;grid-template-columns:130px 1fr auto;align-items:baseline;gap:12px;padding:16px 4px;text-decoration:none;color:var(--t-ink);transition:padding .5s var(--cc-v4-ease-out),background-color .3s}
.op-social a span{font:600 22px/1.2 var(--cc-v4-serif)}
.op-social a small{color:var(--t-ink-2);font-size:14px}
.op-social a i{font-style:normal;color:var(--t-gold);transition:transform .5s var(--cc-v4-ease-out)}
body.light .op-social a:hover{padding-left:12px;background:var(--t-gold-wash)}
.op-social a:hover i{transform:translateX(4px)}
.op-signup{margin-top:96px;padding:48px;border:1px solid var(--t-line);border-radius:24px;background:var(--t-surface);box-shadow:var(--t-shadow-sm);text-align:center}
.op-signup h2{margin:0 0 12px;padding:0}
.op-signup p{margin-left:auto;margin-right:auto}
.op-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:24px 0 0}
.op-form input{font:400 16px var(--cc-v4-sans);padding:15px 20px;border-radius:999px;border:1px solid var(--t-line-strong);background:var(--t-bg);color:var(--t-ink);min-width:min(320px,100%)}
.op-form input::placeholder{color:var(--t-ink-2)}
.op-form [disabled]{cursor:not-allowed}
body.light .op-form .btn[disabled]{opacity:.85;transform:none}
@media (max-width:960px){.op-hero,.op-about,.op-split{grid-template-columns:1fr;gap:40px}.op-hero{min-height:0}.op-hero-photo{max-width:460px;margin-left:14px}.op-about-photo{max-width:420px;margin-left:18px}.op-strip{grid-template-columns:1fr 1fr}.op-strip div:nth-child(3){border-left:0;padding-left:0}.op-strip div:nth-child(n+3){border-top:1px solid var(--t-line)}.op-offers{grid-template-columns:1fr}}
@media (max-width:600px){.op-signup{padding:32px 20px}.op-strip b{font-size:19px}body.light .op-social a{grid-template-columns:1fr auto}.op-social a small{grid-column:1;grid-row:2}.op-social a i{grid-row:1/3;grid-column:2;align-self:center}.op-preview{font-size:12px}}
/* keep each section's label with its heading */
body.op #help,body.op #offers{margin-top:110px}
body.light.op section .eyebrow+h2{margin-top:0;padding-top:0}
body.light.op section .eyebrow+h2::before{display:none}
@media (max-width:860px){body.op #help,body.op #offers{margin-top:80px}.op-about,.op-split,.op-signup{margin-top:80px}}
.op-hero h1{font-size:clamp(32px,3.3vw,46px);text-wrap:balance}body.light h1,body.light h2{text-wrap:balance}
/* bio version (26 Oct 2026, evening) */
body.opbio .op-hero{grid-template-columns:1.1fr .9fr;min-height:min(74vh,720px)}
body.opbio .op-hero h1{font-size:clamp(40px,4.6vw,60px);margin-bottom:6px}
.op-title{font:500 clamp(19px,1.7vw,22px)/1.4 var(--cc-v4-sans);color:var(--t-ink-2);margin:22px 0 30px;max-width:none}
.op-btns .ic{width:17px;height:17px;flex:none}
.op-ph-btn mark.ph{font-size:12px;margin-left:4px}
body.light.opbio .op-roles{font-size:clamp(24px,2.3vw,30px);line-height:1.25;margin:0 0 26px;padding:0}
.op-roles span{color:var(--t-gold-deco);font-weight:400;padding:0 .15em}
.op-bio p{font-size:17.5px}
.op-bio .op-beat{font:italic 600 clamp(24px,2.2vw,28px)/1.25 var(--cc-v4-serif);color:var(--t-gold);margin:26px 0}
body.opbio .op-about{align-items:start;margin-top:110px}
body.opbio .op-about-photo{position:sticky;top:110px}
.op-ps{margin:72px auto 0;max-width:900px;padding:40px 44px}
.op-ps-k{font:italic 600 34px/1 var(--cc-v4-serif);color:var(--t-dark-gold)!important;margin:0 0 14px}
body.light .op-ps p:not(.op-ps-k){font:italic 500 clamp(20px,1.9vw,24px)/1.5 var(--cc-v4-serif);color:var(--t-dark-ink);max-width:none;margin:0}
.op-links{margin-top:96px;max-width:760px}
body.opbio .op-social a{grid-template-columns:220px 1fr auto}
@media (max-width:960px){body.opbio .op-hero{grid-template-columns:1fr}body.opbio .op-about-photo{position:relative;top:0}body.opbio .op-about{margin-top:80px}}
@media (max-width:600px){.op-ps{padding:30px 24px;margin-top:56px}.op-links{margin-top:72px}body.light.opbio .op-social a{grid-template-columns:1fr auto}}
@media (max-width:600px){body.opbio .op-about-photo{max-width:260px}}
/* centred PS card + centred signature (26 Oct 2026) */
body.opbio .op-ps{display:block;margin-left:auto;margin-right:auto;max-width:860px;text-align:center}
body.light.opbio .op-ps p{margin-left:auto;margin-right:auto;max-width:62ch}
body.opbio .signoff{display:flex;justify-content:center;margin-left:auto;margin-right:auto}
body.opbio .signoff img{margin:0 auto}
/* centred Find me block (26 Oct 2026) */
body.opbio .op-links{margin-left:auto;margin-right:auto;text-align:center}
body.opbio .op-links .eyebrow::before{margin-left:auto;margin-right:auto}
body.opbio .op-links .op-social a{text-align:left}

/* public build */
.op-preview{display:none}