/* ===== handmade.css - paper, brass and pen (all pages) =====
   Reference: cream paper, brass gold, serif headings with gold italic phrases,
   Caveat hand notes, irregular hand-drawn underlines, taped cards, highlighter,
   stamps. Tokens first; pages load this after their own CSS so it wins ties. */
:root{
  --head:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --sig:"Mrs Saint Delafield","Segoe Script","Brush Script MT",cursive;
  --paper:#FCFAF6; --paper-2:#F7F6F2; --peach:#F6F0E5; --btn:#F4EEE2; --hl:#ECE0CC; --tape:#EDE4D1;
  --ink:#1E1E1D; --ink-soft:#6B6A66;
  --gold:#9C7D36;        /* large italic headings (3.4:1 on peach, 3.7:1 on paper - large text only) */
  --brass:#BF9C56;       /* strokes, borders, fills behind dark text */
  --gold-text:#7F6227;   /* small text: 5.0:1 on peach, 5.8:1 on paper */
  --gold-ink:#5C4718;
  --sage-deep:#7F6227; --sage-text:#7F6227; --sage:#D9C9A2;   /* old names keep working */
  --alert:#A34A28;
  --hair:rgba(30,30,29,.1);
  --u1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C28 4 52 11 86 7 S142 10 197 4' fill='none' stroke='%23BF9C56' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' opacity='1.0'/%3E%3Cpath d='M12 12.5 C62 9.5 120 13 188 9.5' fill='none' stroke='%23BF9C56' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'/%3E%3C/svg%3E"); --u2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C40 10.5 70 3 110 8 S170 5 198 9.5' fill='none' stroke='%23BF9C56' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' opacity='1.0'/%3E%3Cpath d='M22 12 C80 13 140 8.5 186 12.5' fill='none' stroke='%23BF9C56' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E"); --u3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5 C50 12.5 100 6 150 7.5 S190 5 198 2.5' fill='none' stroke='%23BF9C56' stroke-width='3.0' stroke-linecap='round' stroke-linejoin='round' opacity='1.0'/%3E%3C/svg%3E"); --rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath d='M2 4.5 C60 2 120 6.5 200 4 S340 2.5 398 5' fill='none' stroke='%23BF9C56' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.8'/%3E%3C/svg%3E"); --circ:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56' preserveAspectRatio='none'%3E%3Cpath d='M64 5 C30 1 6 14 8 30 C10 49 58 55 93 46 C117 39 118 15 90 8 C76 4 58 3 38 9' fill='none' stroke='%23BF9C56' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' opacity='1.0'/%3E%3C/svg%3E"); --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M3 4 C8 22 24 26 40 20' fill='none' stroke='%23BF9C56' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='1.0'/%3E%3Cpath d='M32 14 L41 20 L31 26' fill='none' stroke='%23BF9C56' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='1.0'/%3E%3C/svg%3E"); --grain:url(paper-grain.png);
}
html{-webkit-text-size-adjust:100%}
body{background-color:var(--paper); background-image:var(--grain); background-size:180px 180px;
  font-family:var(--body); color:var(--ink)}
::selection{background:var(--hl)}
:focus-visible{outline-color:var(--gold-text)}

/* ---- headings: Cormorant, with a gold italic phrase ---- */
h1,h2,h3{font-family:var(--head); font-weight:600; letter-spacing:-.012em; line-height:1.08}
em.scribble,.scribble{font-style:italic; font-weight:600; color:var(--gold);
  background:var(--u1) no-repeat 0 100%/100% .34em; padding-bottom:.2em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
.scribble--b{background-image:var(--u2)} .scribble--c{background-image:var(--u3)}
.scribble--sm{color:var(--gold-text)}

/* ---- handwritten eyebrow / notes (Caveat) ---- */
.eyebrow,.hand{font-family:var(--hand); font-weight:600; font-size:clamp(1.35rem,1.7vw,1.6rem); line-height:1.15;
  letter-spacing:0; text-transform:none; color:var(--gold-text); display:inline-block; rotate:-1.2deg; transform-origin:left center}
.note-hand{font-family:var(--hand); font-weight:600; font-size:1.3rem; line-height:1.2; color:var(--gold-text)}
.note-hand::before{content:""; display:inline-block; width:40px; height:26px; margin-right:8px; vertical-align:-8px;
  background:var(--arrow) no-repeat center/contain}

/* ---- highlighter pen ---- */
mark,.hl{background:var(--hl); color:var(--ink); font-weight:500; padding:.04em .32em; border-radius:.22em .5em .3em .55em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}

/* ---- circled number ---- */
.circled{position:relative; display:inline-block; padding:.02em .42em; background:var(--circ) no-repeat center/100% 100%}

/* ---- tape ---- */
.tape,.card,.fig,.glance .chip,.doc-note,.szn,.creds{position:relative}
.tape::before,.card::before,.fig::before,.glance .chip::before,.doc-note::before,.szn::after{
  content:""; position:absolute; top:-12px; left:50%; width:84px; height:24px; margin-left:-42px;
  background:var(--tape); opacity:.92; rotate:-2deg; pointer-events:none; z-index:2;
  box-shadow:0 1px 2px rgba(30,30,29,.08);
  clip-path:polygon(0 0,2.5% 14%,0 28%,2.5% 42%,0 56%,2.5% 70%,0 84%,2.5% 100%,97.5% 100%,100% 84%,97.5% 70%,100% 56%,97.5% 42%,100% 28%,97.5% 14%,100% 0)}

/* ---- stamp ---- */
.stamp{display:inline-block; font-family:var(--disp); font-weight:700; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-text); border:1.5px solid var(--gold-text); border-radius:6px 9px 7px 10px/9px 7px 10px 6px; padding:7px 12px 6px;
  rotate:-3deg; background:rgba(252,250,246,.5)}

/* ---- buttons: cream fill, pen outline, offset second line ---- */
.topbar .go,.cta,.szn-open,.szn-appt,.btn-hand{
  background:var(--btn); color:var(--ink); border:2px solid var(--gold-text);
  border-radius:15px 18px 14px 19px/19px 14px 18px 15px;
  box-shadow:0 0 0 4px rgba(191,156,86,.2), 0 8px 16px rgba(134,103,42,.12);
  font-family:var(--disp); font-weight:700; rotate:-.4deg;
  transition:rotate .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease}
.topbar .go:hover,.cta:hover,.szn-open:hover,.szn-appt:hover,.btn-hand:hover{
  background:#EFE5D0; rotate:.4deg; transform:translateY(-1px);
  box-shadow:0 0 0 5px rgba(191,156,86,.26), 0 10px 20px rgba(134,103,42,.16)}
.topbar .go:focus-visible,.cta:focus-visible,.szn-open:focus-visible{outline:3px solid var(--gold-text); outline-offset:5px}
.cta-ghost,.cta-phone{background:none; border:0; border-radius:0; padding:12px 4px; color:var(--ink);
  font-family:var(--disp); font-weight:700; text-decoration:underline; text-decoration-color:var(--brass);
  text-decoration-thickness:2px; text-underline-offset:7px}
.cta-ghost:hover,.cta-phone:hover{background:none; color:var(--gold-ink)}

/* ---- links ---- */
a{color:var(--gold-text); text-decoration-color:rgba(191,156,86,.6)}
.card,.ay,.topbar a,.cta,.cta-ghost,.cta-phone,.pub-cta{color:inherit}
a:hover{color:var(--gold-ink)}

/* ---- topbar ---- */
.topbar{background:rgba(252,250,246,.94); border-bottom:1px solid var(--hair)}
.topbar .who{font-family:var(--head); font-weight:700; font-size:1.22rem; letter-spacing:-.005em; color:var(--ink)}
.topbar .who small{font-family:var(--disp); font-weight:500; font-size:.7rem; letter-spacing:.01em}
.topbar .back{font-family:var(--head); font-weight:700; font-size:1.15rem; color:var(--ink)}
.topbar .lang{border-radius:12px 15px 11px 14px/14px 11px 15px 12px; border:1.5px solid rgba(134,103,42,.5); color:var(--gold-ink); background:transparent}
.topbar .lang:hover{background:var(--btn); color:var(--ink)}
.topbar .go{font-size:.9rem}

/* ---- guide pages ---- */
article h1{font-size:clamp(2.5rem,5.2vw,4rem); line-height:1.02; font-weight:600; letter-spacing:-.015em; margin:0 0 20px}
article h2{font-size:clamp(1.85rem,3vw,2.45rem); margin:48px 0 14px; font-weight:600}
article h2::after{content:""; display:block; width:min(150px,45%); height:10px; margin-top:8px;
  background:var(--u2) no-repeat left center/100% 100%}
article .callout h2::after,article .sources h2::after,article .note h2::after{display:none}
article h3{font-size:clamp(1.35rem,1.9vw,1.6rem); font-weight:700}
.lead{font-size:clamp(1.1rem,1.5vw,1.28rem); color:var(--ink-soft)}
article strong{font-weight:700; color:var(--ink)}
article .callout{border-left:4px solid var(--alert,#B4552F); border-radius:4px 16px 14px 4px/4px 14px 16px 4px}
article .callout h2{color:var(--alert,#B4552F)}
.note{background:var(--peach); border:1.5px dashed rgba(134,103,42,.45); border-radius:10px 16px 12px 15px/15px 12px 16px 10px; color:var(--ink-soft)}
.sources{border-top:1px dashed rgba(134,103,42,.4)}

/* illustrations become taped prints */
.fig{background:#fff; padding:10px 10px 0; border:1px solid var(--hair); border-radius:3px; overflow:visible;
  box-shadow:0 16px 30px rgba(30,30,29,.12), 0 1px 0 rgba(30,30,29,.05); rotate:-.6deg}
.fig img{border-radius:2px}
.fig figcaption{font-family:var(--hand); font-weight:600; font-size:1.25rem; line-height:1.2; color:var(--gold-text);
  background:transparent; text-align:center; padding:10px 12px 12px}
.sec--flip .fig{rotate:.7deg}
.intro .fig{rotate:.5deg}

/* "at a glance" chips -> little taped notes */
.glance{gap:16px}
.glance .chip{background:#fff; border:1px solid var(--hair); border-radius:3px; padding:20px 14px 16px;
  box-shadow:0 10px 20px rgba(30,30,29,.07); rotate:-.9deg}
.glance .chip:nth-child(even){rotate:.8deg}
.glance .chip:first-child{background:var(--peach)}
.glance .chip::before{width:56px; height:18px; margin-left:-28px; top:-9px}
.glance .big{font-family:var(--head); font-weight:700; color:var(--gold); font-size:clamp(1.5rem,2.4vw,1.95rem)}
.glance .chip:first-child .big{color:var(--gold-ink)}
.glance .lbl{color:var(--ink-soft)}

/* month nav */
.months a,.months span{border-radius:52% 48% 50% 50%/50% 50% 48% 52%; font-family:var(--head); font-weight:700; font-size:1.15rem}
.months a{background:#fff; color:var(--ink); border:1.5px solid var(--gold-text)}
.months a:hover{background:var(--btn)}
.months span{background:transparent; color:rgba(30,30,29,.35); border:1.5px dashed rgba(134,103,42,.35)}
.months .now{background:var(--hl); color:var(--ink); border:1.5px solid var(--gold-text); box-shadow:none}

/* tables */
table{border-collapse:collapse}
th{font-family:var(--disp); font-weight:700; letter-spacing:.02em}

/* FAQ accordions (EN home) */
.faq details{background:#fff; border:1.5px solid rgba(134,103,42,.35); border-radius:10px 15px 11px 14px/14px 11px 15px 10px}
.faq summary{font-family:var(--head); font-weight:700; font-size:1.3rem}
.faq summary::after{color:var(--gold-text)}

/* footer text on guide pages */
footer{color:var(--ink-soft)}
@media (max-width:640px){ .eyebrow{font-size:1.45rem} }
@media (prefers-reduced-motion:reduce){
  .topbar .go,.cta,.szn-open,.btn-hand{transition:none} .topbar .go:hover,.cta:hover{transform:none}
}