/* ── Protocol page tokens / aliases ─────────────────────────────── */
:root { --gdk: var(--gold-dk); --wmgray: rgba(250,246,236,.55); }

/* ── Long-form hero with table of contents ──────────────────────── */
.protocol-hero { background: var(--char); color: var(--cream); padding: clamp(72px,9vw,116px) 0 clamp(48px,6vw,80px); position: relative; overflow: hidden; }
.protocol-hero::before { content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 80% 16%, rgba(231,195,144,.16), transparent 55%), radial-gradient(circle at 6% 92%, rgba(143,167,155,.08), transparent 50%);
  pointer-events:none; }
.protocol-hero .inner { position:relative; }
.protocol-hero h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem,6.4vw,4.8rem); line-height: 1.02; letter-spacing: -.022em; color: var(--cream); margin: 0; max-width: 16ch; }
.protocol-hero h1 em { font-style: italic; font-weight: 400; color: var(--gold-lt); }
.protocol-hero .lead { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem,1.7vw,1.45rem); line-height: 1.5; color: rgba(250,246,236,.78); margin: 30px 0 0; max-width: 600px; }
.protocol-hero .meta-row { margin-top: 40px; display:flex; flex-wrap:wrap; gap: 28px; padding-top: 26px; border-top: 1px solid rgba(231,195,144,.2); }
.protocol-hero .meta-it .lb { font-family: var(--sans); font-size:.54rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color: var(--gold-lt); margin-bottom: 6px; }
.protocol-hero .meta-it .v { font-family: var(--serif); font-size: 1rem; color: var(--cream); }

/* Table of contents */
.toc { margin-top: 48px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(231,195,144,.18); border: 1px solid rgba(231,195,144,.18); border-radius: 8px; overflow:hidden; }
@media (max-width: 760px){ .toc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .toc { grid-template-columns: 1fr; } }
.toc a { background: var(--char); padding: 18px 20px; display:flex; flex-direction:column; gap: 4px; transition: background var(--t); }
.toc a:hover { background: var(--char-2); }
.toc a .n { font-family: var(--serif); font-style: italic; font-size: .82rem; color: var(--gold-lt); }
.toc a .t { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--cream); }

/* ── Section header (left, "Part One" style) ────────────────────── */
.sec-eye { font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 16px; }
.section.dark .sec-eye, .section.darker .sec-eye { color: var(--gold-lt); }
.sec-h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem,3.6vw,2.8rem); line-height: 1.1; letter-spacing: -.012em; margin: 0; }
.sec-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem,1.5vw,1.25rem); color: var(--char-soft); margin-top: 12px; }
.section.dark .sec-sub, .section.darker .sec-sub { color: rgba(231,195,144,.7); }
.grule { width: 56px; height: 2px; background: var(--gold); margin: 26px 0 32px; transform-origin: left; }
.body-txt { font-size: 1.02rem; line-height: 1.85; color: var(--char-soft); max-width: 72ch; margin: 0 0 22px; }
.section.dark .body-txt, .section.darker .body-txt { color: rgba(250,246,236,.76); }
.body-txt strong { color: var(--char); font-weight: 600; }
.section.dark .body-txt strong, .section.darker .body-txt strong { color: var(--cream); }
.sub-eye { font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dk); margin: 10px 0 14px; }
.section.dark .sub-eye, .section.darker .sub-eye { color: var(--gold-lt); }
.hr-rule { height: 1px; background: var(--mist); border: none; margin: 40px 0; }
.section.dark .hr-rule, .section.darker .hr-rule { background: rgba(231,195,144,.16); }

/* Pull quote */
.pq { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem,2.3vw,1.8rem); line-height: 1.45; color: var(--char); padding-left: 26px; border-left: 2px solid var(--gold); margin: 34px 0; max-width: 62ch; }
.section.dark .pq, .section.darker .pq { color: var(--gold-lt); }

/* Science callout box */
.sci-box { background: var(--paper); border: 1px solid var(--mist); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 30px 32px; margin: 30px 0; box-shadow: var(--sh-1); max-width: 78ch; }
.section.dark .sci-box, .section.darker .sci-box { background: var(--char-2); border-color: rgba(231,195,144,.2); border-left-color: var(--gold); }
.sci-eye { font-family: var(--sans); font-size: .56rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 10px; }
.section.dark .sci-eye, .section.darker .sci-eye { color: var(--gold-lt); }
.sci-h { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--char); margin-bottom: 14px; }
.section.dark .sci-h, .section.darker .sci-h { color: var(--cream); }
.sci-t { font-size: .96rem; line-height: 1.8; color: var(--char-soft); }
.section.dark .sci-t, .section.darker .sci-t { color: rgba(250,246,236,.72); }
.sci-t strong { color: var(--char); font-weight: 600; }
.section.dark .sci-t strong, .section.darker .sci-t strong { color: var(--gold-lt); }
.sci-t em { color: var(--gold-dk); font-style: italic; }
.section.dark .sci-t em, .section.darker .sci-t em { color: var(--gold-lt); }

/* Diagram figure */
.figure { margin: 32px 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--mist); box-shadow: var(--sh-2); background: var(--cream); }
.section.dark .figure, .section.darker .figure { border-color: rgba(231,195,144,.18); }
.figure img { width: 100%; height: auto; display: block; }
.figure figcaption { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--char-soft); padding: 14px 20px; background: var(--paper); border-top: 1px solid var(--mist); }

/* Fact strip */
.fact-strip { display:grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: rgba(231,195,144,.2); border: 1px solid rgba(231,195,144,.2); border-radius: 8px; overflow:hidden; margin: 30px 0; }
@media (max-width: 760px){ .fact-strip { grid-template-columns: 1fr 1fr; } }
.fact-item { background: var(--char); padding: 24px 18px; text-align:center; }
.section.cream .fact-item, .section.cream-2 .fact-item { background: var(--paper); }
.fact-num { font-family: var(--serif); font-weight: 700; font-size: 1.7rem; color: var(--gold-dk); line-height: 1; }
.section.dark .fact-num, .section.darker .fact-num { color: var(--gold-lt); }
.fact-label { font-family: var(--sans); font-size: .56rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--char-soft); margin-top: 10px; line-height: 1.5; }
.section.dark .fact-label, .section.darker .fact-label { color: rgba(250,246,236,.6); }

/* Grids */
.g2 { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 8px 0; }
.g3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 8px 0; }
@media (max-width: 820px){ .g2, .g3 { grid-template-columns: 1fr; } }

/* Checklist */
.cl { display:grid; gap: 4px; margin: 8px 0; max-width: 80ch; }
.ci { display:grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--mist); align-items: start; }
.section.dark .ci, .section.darker .ci { border-color: rgba(231,195,144,.12); }
.cb { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--gold); margin-top: 4px; }
.ci.warn .cb { border-color: var(--bordeaux); background: rgba(166,74,58,.1); }
.cl-t { font-size: .95rem; line-height: 1.7; color: var(--char-soft); }
.section.dark .cl-t, .section.darker .cl-t { color: rgba(250,246,236,.76); }
.cl-t strong { color: var(--char); font-weight: 600; }
.section.dark .cl-t strong, .section.darker .cl-t strong { color: var(--cream); }
.av { color: var(--bordeaux); font-weight: 600; }
.section.dark .av, .section.darker .av { color: #e08a78; }

/* Mini FAQ */
.mfaq { grid-column: 1 / -1; margin: 2px 0 6px 36px; }
.mfaq details { border-left: 2px solid var(--gold-fade); padding-left: 16px; }
.mfaq summary { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .04em; color: var(--gold-dk); cursor: pointer; padding: 6px 0; list-style: none; }
.section.dark .mfaq summary, .section.darker .mfaq summary { color: var(--gold-lt); }
.mfaq summary::-webkit-details-marker { display: none; }
.mfaq summary::before { content: '+ '; color: var(--gold); }
.mfaq details[open] summary::before { content: '– '; }
.mfaq details > div { font-size: .88rem; line-height: 1.7; color: var(--char-soft); padding: 4px 0 10px; }
.section.dark .mfaq details > div, .section.darker .mfaq details > div { color: rgba(250,246,236,.66); }

/* Product callout */
.prod-strip { background: var(--cream-2); border: 1px solid var(--mist); border-radius: 8px; padding: 22px 24px; margin: 18px 0; }
.section.dark .prod-strip, .section.darker .prod-strip { background: rgba(231,195,144,.06); border-color: rgba(231,195,144,.18); }
.prod-e { font-family: var(--sans); font-size: .54rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 8px; }
.section.dark .prod-e, .section.darker .prod-e { color: var(--gold-lt); }
.prod-n { font-family: var(--serif); font-weight: 700; font-size: 1.22rem; color: var(--char); margin-bottom: 8px; }
.section.dark .prod-n, .section.darker .prod-n { color: var(--cream); }
.prod-d { font-size: .9rem; line-height: 1.72; color: var(--char-soft); }
.section.dark .prod-d, .section.darker .prod-d { color: rgba(250,246,236,.7); }
.prod-d a, .cl-t a, .body-txt a, .sci-t a, .note a, .n-t a { color: var(--gold-dk); border-bottom: 1px solid var(--gold-fade); }
.section.dark .prod-d a, .section.darker .prod-d a, .section.dark .cl-t a, .section.dark .n-t a { color: var(--gold-lt); border-color: rgba(231,195,144,.3); }
.prod-d a:hover, .cl-t a:hover { color: var(--char); }

/* Wear cards */
.wc { background: var(--paper); border: 1px solid var(--mist); border-radius: 8px; padding: 26px 24px; box-shadow: var(--sh-1); }
.wc.y { border-top: 3px solid var(--sage-dk); }
.wc.n { border-top: 3px solid var(--bordeaux); }
.w-ic { width: 36px; height: 36px; display:flex; align-items:center; justify-content:center; border-radius: 50%; border: 1px solid var(--gold-fade); color: var(--gold-dk); margin-bottom: 14px; background: rgba(231,195,144,.06); }
.w-ic svg { width: 18px; height: 18px; stroke-width: 1.5; }
.w-lb { font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.wc.y .w-lb { color: var(--sage-dk); }
.wc.n .w-lb { color: var(--bordeaux); }
.w-it { font-family: var(--serif); font-size: .96rem; line-height: 1.95; color: var(--char-soft); }

/* Note callout */
.note { display:grid; grid-template-columns: 28px 1fr; gap: 16px; background: rgba(231,195,144,.08); border: 1px solid var(--gold-fade); border-radius: 8px; padding: 20px 24px; margin: 22px 0; align-items: start; max-width: 80ch; }
.section.dark .note, .section.darker .note { background: rgba(231,195,144,.06); }
.n-i { font-family: var(--serif); font-size: 1.2rem; color: var(--gold); line-height: 1; }
.n-t { font-size: .92rem; line-height: 1.75; color: var(--char-soft); }
.section.dark .n-t, .section.darker .n-t { color: rgba(250,246,236,.74); }
.n-t strong { color: var(--char); }
.section.dark .n-t strong, .section.darker .n-t strong { color: var(--gold-lt); }

/* ── Development window — improved timeline graphic ─────────────── */
.devtl { margin: 36px 0 12px; }
.devtl-bar { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(to right, #F0D9B5 0%, #D9A86E 32%, #A86F3E 64%, #4A2C16 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
.devtl-nodes { display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 720px){ .devtl-nodes { grid-template-columns: 1fr 1fr; } }
.devnode { position: relative; padding-top: 26px; text-align: center; }
.devnode::before { content:''; position:absolute; top: -46px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--cream); border: 3px solid var(--gold); box-shadow: 0 0 0 4px var(--char); }
.section.dark .devnode::before { background: var(--char); }
.devnode .hr { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; color: var(--gold-lt); line-height: 1; }
.devnode .sh { font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); margin: 8px 0 6px; }
.devnode .ds { font-family: var(--serif); font-style: italic; font-size: .86rem; color: rgba(250,246,236,.66); line-height: 1.45; }
.devtl-legs { display:flex; justify-content: space-between; margin-top: 22px; font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(231,195,144,.6); }

/* Beach / security cards */
.beach-card { background: var(--char-2); border: 1px solid rgba(231,195,144,.18); border-radius: 8px; padding: 30px 32px; margin: 8px 0 16px; }
.beach-head { display:flex; align-items:center; gap: 14px; margin-bottom: 14px; }
.beach-ic { width: 40px; height: 40px; display:flex; align-items:center; justify-content:center; border-radius:50%; border: 1px solid rgba(231,195,144,.3); color: var(--gold-lt); }
.beach-ic svg { width: 20px; height: 20px; stroke-width: 1.5; }
.beach-ti { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--cream); }
.beach-t { font-size: .95rem; line-height: 1.78; color: rgba(250,246,236,.74); margin-bottom: 20px; max-width: 74ch; }
.beach-steps { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px){ .beach-steps { grid-template-columns: 1fr; } }
.bstep-n { font-family: var(--sans); font-size: .56rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 8px; }
.bstep-t { font-size: .9rem; line-height: 1.72; color: rgba(250,246,236,.72); }
.bstep-t strong { color: var(--cream); }
.bstep-t a { color: var(--gold-lt); border-bottom: 1px solid rgba(231,195,144,.3); }

/* Emergency cards */
.ec { background: var(--paper); border: 1px solid var(--mist); border-radius: 8px; overflow: hidden; box-shadow: var(--sh-1); }
.ec-h { display:flex; align-items:center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--mist); }
.ec-h.rain { background: rgba(143,167,155,.08); }
.ec-h.fix { background: rgba(231,195,144,.08); }
.ec-ic { width: 30px; height: 30px; display:flex; align-items:center; justify-content:center; color: var(--gold-dk); }
.ec-ic svg { width: 18px; height: 18px; stroke-width: 1.5; }
.ec-ti { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--char); }
.ec-b { padding: 18px 22px; display:grid; gap: 14px; }
.ec-step { display:grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: .88rem; line-height: 1.65; color: var(--char-soft); }
.ec-step strong { color: var(--char); }
.ec-step a { color: var(--gold-dk); border-bottom: 1px solid var(--gold-fade); }
.ec-num { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--gold-dk); }

/* Timing cards */
.tc { background: var(--char-2); border: 1px solid rgba(231,195,144,.18); border-radius: 8px; padding: 24px 26px; }
.tc-h { display:flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(231,195,144,.14); }
.tc-lb { font-family: var(--sans); font-size: .56rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(250,246,236,.6); }
.tc-ti { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--gold-lt); white-space: nowrap; }
.tc-b { font-size: .9rem; line-height: 1.72; color: rgba(250,246,236,.72); }

/* Solution cards */
.sol-card { background: var(--char-2); border: 1px solid rgba(231,195,144,.18); border-top: 3px solid var(--gold); border-radius: 0 0 8px 8px; padding: 24px 24px; height: 100%; }
.sol-card.a { border-top-color: var(--sage); }
.sol-card.b { border-top-color: var(--gold); }
.sol-card.c { border-top-color: var(--sage-dk); }
.sol-card.d { border-top-color: var(--gold-dk); }
.sol-card.e { border-top-color: var(--gold-lt); }
.sol-card.f { border-top-color: var(--mist); }
.sol-e { font-family: var(--sans); font-size: .54rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 8px; }
.sol-n { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--cream); margin-bottom: 10px; }
.sol-n a { color: inherit; }
.sol-d { font-size: .88rem; line-height: 1.72; color: rgba(250,246,236,.72); }
.sol-d strong { color: var(--gold-lt); font-weight: 600; }
.sol-d a { color: var(--gold-lt); border-bottom: 1px solid rgba(231,195,144,.3); }

/* Fitzpatrick */
.fitz-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 8px 0; }
@media (max-width: 820px){ .fitz-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .fitz-grid { grid-template-columns: 1fr; } }
.fitz-card { background: var(--paper); border: 1px solid var(--mist); border-radius: 8px; padding: 22px 22px; box-shadow: var(--sh-1); }
.fitz-swatch { height: 54px; border-radius: 6px; margin-bottom: 16px; box-shadow: inset 0 1px 4px rgba(0,0,0,.18); }
.fitz-label { font-family: var(--sans); font-size: .56rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 4px; }
.fitz-name { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--char); margin-bottom: 10px; }
.fitz-detail { font-size: .86rem; line-height: 1.72; color: var(--char-soft); }

/* Tone cards (cool/neutral/warm + problem areas) */
.tone-card { background: var(--paper); border: 1px solid var(--mist); border-radius: 8px; padding: 20px 22px; box-shadow: var(--sh-1); }
.tone-card .tt-lb { font-family: var(--sans); font-size: .56rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 6px; }
.tone-card .tt-n { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: var(--char); margin-bottom: 8px; }
.tone-card .tt-d { font-size: .84rem; line-height: 1.74; color: var(--char-soft); }
.tone-card .tt-d em { color: var(--gold-dk); font-style: italic; }

/* Master checklist */
.mcg { margin-bottom: 26px; }
.mc-head { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--cream); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(231,195,144,.18); }
.mc-phase { display:block; font-family: var(--sans); font-size: .54rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 4px; }
.mi { display:grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 9px 0; align-items: start; }
.mc-cb { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid var(--gold); margin-top: 4px; }
.mc-t { font-size: .88rem; line-height: 1.65; color: rgba(250,246,236,.74); }
.mc-t strong { color: var(--cream); }
.mc-t a { color: var(--gold-lt); border-bottom: 1px solid rgba(231,195,144,.3); }

/* Closing */
.closing { background: var(--char-3); text-align:center; padding: clamp(64px,8vw,96px) 24px; }
.closing .eyebrow { display:block; color: var(--sage); margin-bottom: 20px; }
.closing .word { font-family: 'Bodoni Moda', var(--serif); font-size: clamp(2.6rem,7vw,4.2rem); font-weight: 700; color: var(--gold); line-height: .95; letter-spacing: -.01em; }
.closing .rule { width: 40px; height: 1.5px; background: var(--gold); margin: 22px auto; }
.closing .it { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: rgba(231,195,144,.6); line-height: 1.7; margin: 0 0 24px; }
.closing .bd { font-size: .9rem; font-weight: 300; color: rgba(250,246,236,.6); line-height: 1.9; max-width: 480px; margin: 0 auto 32px; }
.closing .ctas { display:flex; gap: 12px; justify-content:center; flex-wrap: wrap; }