@font-face{
  font-family:'Fraunces';
  src:url('fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
:root{
  --bg:#FBF7F5; --bg-soft:#F4E9E6; --ink:#2A1F22; --muted:#8A7479;
  --accent:#B85770; --accent-dark:#A93D54; --border:#ECE0DD; --card:#fff;
  --navy:#1E3A5F;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  font-size:clamp(1.05rem,1rem + 1.1vw,1.35rem);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.serif,h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:430; letter-spacing:-.02em; line-height:1.04;}
em{font-style:italic;} strong{font-weight:600;}
img{display:block; max-width:100%;}
.wrap{max-width:1100px; margin:0 auto; padding:0 7vw;}
.narrow{max-width:760px; margin-inline:auto;}

/* reveal on scroll — progressive enhancement: visible without JS */
.reveal{transition:opacity .8s ease, transform .8s ease;}
html.js .reveal{opacity:0; transform:translateY(28px);}
html.js .reveal.in{opacity:1; transform:none;}
.body-lead{font-size:clamp(1.15rem,1rem + 1.2vw,1.5rem); line-height:1.55; color:var(--ink);}
.mt6{margin-top:6vh;}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden;}
.hero .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero .scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(42,31,34,.18) 0%, rgba(42,31,34,.05) 30%, rgba(42,31,34,.55) 100%);}
.hero .inner{position:relative; z-index:2; padding:0 7vw 12vh; width:100%;}
.hero .eyebrow{text-transform:uppercase; letter-spacing:.32em; font-size:.78rem; font-weight:700; opacity:.92; margin-bottom:1.2rem;}
.hero h1{font-size:clamp(3rem,2rem + 9vw,7rem); color:#fff; margin-bottom:1.4rem;}
.hero .sub{font-size:clamp(1.1rem,1rem + 1.2vw,1.6rem); max-width:34ch; opacity:.95; font-style:italic;}
.scrolldown{position:absolute; bottom:3vh; left:50%; transform:translateX(-50%); z-index:2; color:#fff; opacity:.85; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------- generic section ---------- */
section{padding:22vh 0 14vh;}
.eyebrow{text-transform:uppercase; letter-spacing:.26em; font-size:.78rem; font-weight:700; color:var(--accent-dark); margin-bottom:1.4rem;}
.h-sec{font-size:clamp(2.2rem,1.6rem + 5vw,4.2rem); margin-top:12vh; margin-bottom:1.6rem;}
.lead{font-size:clamp(1.25rem,1.1rem + 1.4vw,1.9rem); line-height:1.45; color:var(--ink);}
p+p{margin-top:1.4rem;}
.big-quote{font-family:'Fraunces',serif; font-size:clamp(2rem,1.4rem + 5vw,3.6rem); line-height:1.12; color:var(--accent-dark); margin:6vh 0;}

/* philosophy headline (statement) */
.statement{font-size:clamp(2.6rem,1.6rem + 8vw,6rem); line-height:1.02; margin-top:12vh; margin-bottom:5vh;}
.statement .em{color:var(--accent-dark);}

/* principle cards */
.principles{display:grid; gap:1.2rem; margin-top:6vh;}
@media(min-width:760px){.principles{grid-template-columns:1fr 1fr;}}
.pcard{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:2rem 1.8rem;}
.pcard h3{font-size:1.5rem; color:var(--accent-dark); margin-bottom:.5rem;}
.pcard p{font-size:1.05rem; color:var(--muted); line-height:1.55;}

/* ---------- skin twins ---------- */
.twins-intro{text-align:center;}
.twin{padding-block:9vh; border-top:1px solid var(--border);}
/* mobile (default): name + "Skin twin No." ABOVE the photo.
   The text column is unwrapped via display:contents so its name/No. can be
   ordered above the image; the rest stays below. */
.twin .grid{display:flex; flex-direction:column; gap:0;}
.twin .grid > :nth-child(2){display:contents;}
.twin .no{order:1;}
.twin .name{order:2;}
.twin .photo{order:3; margin:1.4rem 0 2rem;}
.twin .arch{order:4;}
.twin .q{order:5;}
.twin .bio{order:6;}
.twin .facts{order:7;}
@media(min-width:860px){
  .twin .grid{display:grid; grid-template-columns:1fr 1fr; column-gap:6vw; align-items:center;}
  .twin .grid > :nth-child(2){display:block;}
  .twin .photo{order:0; margin:0;}
  .twin.alt .photo{order:2;}
}
.twin .photo{border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:var(--bg-soft); box-shadow:0 30px 60px -30px rgba(42,31,34,.35);}
.twin .photo img{width:100%; height:100%; object-fit:cover;}
.twin .no{font-family:'Fraunces',serif; letter-spacing:.2em; color:var(--accent); font-size:.95rem; text-transform:uppercase; margin-bottom:.6rem;}
.twin .name{font-size:clamp(3rem,2rem + 9vw,5.5rem); margin-bottom:.4rem;}
.twin .arch{font-style:italic; color:var(--muted); font-size:1.15rem; margin-bottom:1.6rem;}
.twin .bio{font-size:1.15rem; line-height:1.6; margin-bottom:1.8rem;}
.twin .q{font-family:'Fraunces',serif; font-size:clamp(1.5rem,1.2rem + 2.4vw,2.2rem); line-height:1.2; color:var(--accent-dark); border-left:3px solid var(--accent); padding-left:1.2rem; margin-bottom:2rem;}
.twin .facts{display:grid; gap:1rem;}
.twin .fact{border-top:1px solid var(--border); padding-top:.9rem;}
.twin .fact h4{text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--accent-dark); margin-bottom:.25rem;}
.twin .fact p{font-size:1.02rem; color:var(--ink);}

/* ---------- full-bleed chapter image ---------- */
/* content sections have no vertical padding (.wrap zeroes it); give the last
   one before a chapter image some breathing room so it doesn't butt the image */
section.wrap:has(+ .bleed){padding-bottom:12vh;}
.bleed + section.wrap{padding-top:6vh;}
/* keep the gap under a chapter image consistent: don't let a grid's own margin-top stack on it */
.bleed + section.wrap > :first-child{margin-top:0;}
.bleed{position:relative; min-height:62vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; padding:0;}
.bleed img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.bleed .scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(42,31,34,.05),rgba(42,31,34,.5));}
.bleed .inner{position:relative; z-index:2; padding:0 7vw 8vh;}
.bleed .eyebrow{color:#fff; opacity:.9;}
.bleed h2{font-size:clamp(2.4rem,1.6rem + 6vw,5rem); color:#fff;}
.bleed .sub{font-size:1.2rem; opacity:.95; margin-top:1rem; max-width:40ch;}

/* ---------- method steps ---------- */
/* one layer per line so they read as a real ordered list, not wrapped pills */
.layer{display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; margin:4vh 0;}
.chip{background:var(--card); border:1px solid var(--border); border-radius:999px; padding:.7rem 1.3rem; font-size:1rem;}
.chip b{font-family:'Fraunces',serif; color:var(--accent-dark); margin-right:.5rem;}
.cyc{display:grid; gap:1rem; margin-top:4vh;}
@media(min-width:680px){.cyc{grid-template-columns:repeat(4,1fr);}}
.cyc .c{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.6rem;}
.cyc .c .n{text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--muted);}
.cyc .c b{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--accent-dark); display:block; margin:.3rem 0 .6rem;}
.cyc .c p{font-size:.98rem; color:var(--muted);}

/* ---------- not-to-mix groups ---------- */
.mx-group{margin-top:7vh;}
.mx-h{display:flex; align-items:center; gap:.7rem; font-family:'Fraunces',serif; font-size:clamp(1.4rem,1.1rem + 1.4vw,1.9rem); margin-bottom:.5rem;}
.mx-dot{width:.8rem; height:.8rem; border-radius:50%; flex:0 0 auto;}
.mx-dot.red{background:#B0495B;} .mx-dot.amber{background:#C79A3D;} .mx-dot.green{background:#4F7A5B;}
.mx-intro{color:var(--muted); font-size:1.05rem; line-height:1.55; max-width:62ch;}
.mx-list{list-style:none; display:grid; gap:0; margin-top:1.4rem;}
@media(min-width:680px){.mx-list{grid-template-columns:1fr 1fr; gap:0 3rem;}}
.mx-list li{font-family:'Fraunces',serif; font-size:1.12rem; padding:.85rem 0; border-top:1px solid var(--border);}
.mx-universal{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border); color:var(--muted); font-size:1.05rem; line-height:1.55; max-width:62ch;}
.mx-universal strong{display:block; margin-top:.5rem; font-family:'Fraunces',serif; font-weight:430; font-size:1.25rem; color:var(--accent-dark);}
.mx-note{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border); color:var(--muted); font-size:1.02rem; line-height:1.55; max-width:62ch;}
.mx-note strong{color:var(--ink);}

/* ---------- routine ---------- */
.rt{background:var(--bg-soft); border-radius:22px; padding:clamp(1.6rem,1rem + 3vw,3rem); margin-top:5vh;}
.rt h3{font-size:1.8rem; margin-bottom:1.4rem;}
.rt .step{display:flex; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--border);}
.rt .step .num{font-family:'Fraunces',serif; color:var(--accent); font-size:1.5rem; min-width:1.6rem;}
.rt .step .lab{font-family:'Fraunces',serif; font-size:1.3rem;}
.rt .step .why{font-size:1rem; color:var(--muted); margin-top:.2rem;}

/* ---------- journal CTA ---------- */
.cta{background:var(--ink); color:#fff; border-radius:26px; padding:clamp(2.2rem,1.4rem + 5vw,4.5rem); text-align:center; margin-top:6vh;}
.cta h2{font-size:clamp(2rem,1.4rem + 5vw,3.6rem); color:#fff; margin-bottom:1.2rem;}
.cta p{font-size:1.2rem; opacity:.92; max-width:46ch; margin-inline:auto;}
.btn{display:inline-block; margin-top:2.2rem; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:1.1rem; padding:1rem 2.2rem; border-radius:999px;}

/* ---------- closing ---------- */
.closing{text-align:center;}
.closing .tagline{font-family:'Fraunces',serif; font-size:clamp(2rem,1.4rem + 5vw,3.4rem); color:var(--accent-dark); margin:4vh 0;}
.disclosure{font-size:.85rem; color:var(--muted); max-width:60ch; margin:5vh auto 0; line-height:1.5;}
footer{padding:8vh 7vw; text-align:center; color:var(--muted); font-size:.9rem; border-top:1px solid var(--border);}

/* ---------- nav + progress + menu ---------- */
.progress{position:fixed; top:0; left:0; height:3px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; z-index:60;}
.nav{position:fixed; top:0; left:0; right:0; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 7vw; z-index:50; color:#fff; transition:background .3s,color .3s,box-shadow .3s;}
.nav.solid{background:rgba(251,247,245,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); box-shadow:0 1px 0 var(--border);}
.nav .brand{font-family:'Fraunces',serif; font-size:1.05rem; letter-spacing:.04em; color:inherit; text-decoration:none;}
.menu-btn{font:inherit; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; background:none; border:1px solid currentColor; color:inherit; padding:.45rem 1rem; border-radius:999px; cursor:pointer;}
.menu{position:fixed; inset:0; background:var(--ink); color:#fff; z-index:70; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .35s;}
.menu.open{opacity:1; pointer-events:auto;}
.menu-inner{display:flex; flex-direction:column; gap:1rem; text-align:center;}
.menu-inner a{font-family:'Fraunces',serif; font-size:clamp(1.36rem,1.02rem + 2.55vw,2.21rem); color:#fff; text-decoration:none; opacity:.85;}
.menu-inner .lang-switch{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; opacity:.7; margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.22);}
.menu-close{position:absolute; top:20px; right:7vw; background:none; border:none; color:#fff; font-size:2.4rem; cursor:pointer; line-height:1;}
.hero .bg,.bleed img.parallax{will-change:transform;}

/* ---------- sub-headings ---------- */
.sub-h{font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem); color:var(--accent-dark); margin-bottom:1.3rem;}
.muted{color:var(--muted);}

/* ---------- ingredients ---------- */
.ingrid{display:grid; gap:0; margin-top:5vh;}
@media(min-width:760px){.ingrid{grid-template-columns:1fr 1fr; gap:0 4rem;}}
.ingredient{padding:1.6rem 0; border-top:1px solid var(--border);}
.ingredient b{font-family:'Fraunces',serif; font-size:1.5rem; display:block; margin-bottom:.4rem;}
.ingredient p{font-size:1.05rem; color:var(--muted); line-height:1.5;}

/* ---------- routine tabs ---------- */
.rtabs{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.2rem;}
.rtab{border:1px solid var(--border); background:var(--card); border-radius:999px; padding:.6rem 1.2rem; font:inherit; font-size:1rem; color:var(--muted); cursor:pointer; transition:.15s;}
.rtab.active{background:var(--accent-dark); color:#fff; border-color:var(--accent-dark);}
.rpanel{display:none;} .rpanel.active{display:block;}
.rt-head{display:flex; gap:1rem; align-items:baseline; margin-bottom:1rem;}
.rt-type{font-family:'Fraunces',serif; font-size:1.8rem;} .rt-time{color:var(--accent); font-weight:600;}

/* ---------- checklists ---------- */
.clgrid{display:grid; gap:1.2rem; margin-top:4vh;}
@media(min-width:760px){.clgrid{grid-template-columns:1fr 1fr;}}
.clcard{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:2rem;}
.clcard h3{font-size:1.6rem; margin-bottom:.3rem;}
.cl-lead{color:var(--muted); font-size:1rem; margin-bottom:1.2rem;}
.ci{display:flex; gap:.8rem; align-items:flex-start; padding:.55rem 0; cursor:pointer; font-size:1.05rem;}
.ci input{display:none;}
.cbox{width:1.4rem; height:1.4rem; border:2px solid var(--accent); border-radius:6px; flex:0 0 auto; margin-top:.15rem; position:relative; transition:.15s;}
.ci input:checked + .cbox{background:var(--accent);}
.ci input:checked + .cbox::after{content:'✓'; color:#fff; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.9rem;}
.ci input:checked ~ span:last-child{color:var(--muted); text-decoration:line-through;}

/* ---------- /book language chooser ---------- */
.chooser{min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; color:#fff; padding:7vw;}
.chooser .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.chooser .scrim{position:absolute; inset:0; background:rgba(42,31,34,.5); z-index:1;}
.chooser .ci2{position:relative; z-index:2; max-width:40ch;}
.chooser .eyebrow{color:#fff; opacity:.85; justify-content:center;}
.chooser h1{font-size:clamp(2.6rem,1.6rem + 8vw,5.5rem); color:#fff; margin-bottom:1rem;}
.chooser p{font-size:1.2rem; opacity:.92; margin-bottom:2.5rem; font-style:italic;}
.chooser .langs{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;}
.chooser .lang{background:#fff; color:var(--ink); text-decoration:none; font-weight:600; padding:1rem 2rem; border-radius:999px; font-size:1.1rem;}
.chooser .lang.alt{background:transparent; color:#fff; border:1.5px solid #fff;}

/* ================= personalized journal (interactive) ================= */
.jr-mount{margin-top:4vh;}
.jr-card{background:var(--card); border:1px solid var(--border); border-radius:20px; padding:clamp(1.4rem,1rem + 2vw,2.4rem); box-shadow:0 20px 50px -34px rgba(42,31,34,.35);}
.jr-eyebrow{text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; font-weight:700; color:var(--accent-dark); margin-bottom:.5rem;}
.jr-h{font-family:'Fraunces',serif; font-size:clamp(1.5rem,1.2rem + 1.6vw,2.1rem); margin-bottom:.4rem;}
.jr-sub{color:var(--muted); font-size:1rem; line-height:1.5; margin-bottom:.4rem;}
.jr-q{margin-top:1.5rem;}
.jr-qlabel{font-weight:600; font-size:1rem; margin-bottom:.2rem;}
.jr-qsub{color:var(--muted); font-size:.92rem; line-height:1.45; margin-bottom:.7rem;}
.jr-opts{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem;}
.jr-opt{font:inherit; font-size:.95rem; padding:.55rem 1.1rem; border:1px solid var(--border); background:var(--bg); color:var(--ink); border-radius:999px; cursor:pointer; transition:.15s;}
.jr-opt:hover{border-color:var(--accent);}
.jr-opt.sel{background:var(--accent-dark); color:#fff; border-color:var(--accent-dark);}
.jr-cta{font:inherit; font-weight:600; font-size:1.05rem; margin-top:1.6rem; background:var(--accent); color:#fff; border:none; padding:.9rem 1.8rem; border-radius:999px; cursor:pointer;}
.jr-cta:disabled{opacity:.4; cursor:not-allowed;}
.jr-result{margin-top:1.2rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;}
.jr-pill{display:inline-block; background:var(--bg-soft); color:var(--accent-dark); font-weight:600; padding:.5rem 1rem; border-radius:999px; font-size:.95rem;}
.jr-link{font:inherit; background:none; border:none; color:var(--accent-dark); text-decoration:underline; cursor:pointer; font-size:.95rem;}
/* matched twin highlight */
.twin.jr-match{position:relative;}
.twin.jr-match .photo{box-shadow:0 0 0 3px var(--accent), 0 30px 60px -30px rgba(42,31,34,.35);}
.twin.jr-match .name{color:var(--accent-dark);}

/* summary */
.jr-summary{display:grid; gap:1.2rem; margin:1rem 0 1.5rem;}
@media(min-width:620px){.jr-summary{grid-template-columns:1fr 1fr;}}
.jr-rcol h4{font-family:'Fraunces',serif; font-size:1.1rem; color:var(--accent-dark); margin-bottom:.4rem;}
.jr-rcol ol{margin-left:1.1rem;}
.jr-rcol li{font-size:.98rem; padding:.15rem 0;}
.jr-active-slot{color:var(--accent-dark); font-style:italic;}
.jr-tags{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.5rem;}
.jr-tag{background:var(--ink); color:#fff; font-size:.8rem; padding:.35rem .8rem; border-radius:999px;}

/* date row */
.jr-daterow{display:flex; flex-wrap:wrap; align-items:flex-end; gap:.8rem; margin-top:.5rem;}
.jr-daterow .jr-qlabel{width:100%;}
.jr-date{font:inherit; font-size:1rem; padding:.7rem .9rem; border:1px solid var(--border); border-radius:12px; background:var(--bg);}
.jr-daterow .jr-cta{margin-top:0;}

/* calendar */
.jr-cal{margin-top:3vh;}
.jr-calbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem;}
.jr-caltitle{font-family:'Fraunces',serif; font-size:clamp(1.4rem,1.1rem + 1.6vw,2rem);}
.jr-calactions{display:flex; gap:.6rem;}
.jr-ghost{font:inherit; font-size:.9rem; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:.5rem 1rem; cursor:pointer;}
.jr-ghost:hover{border-color:var(--accent);}
.jr-grid{display:grid; gap:1rem; grid-template-columns:1fr;}
@media(min-width:640px){.jr-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.jr-grid{grid-template-columns:1fr 1fr 1fr;}}
.jr-day{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.7rem;}
.jr-day.is-ret{border-left:4px solid var(--accent);}
.jr-day.done{opacity:.62;}
.jr-dhead{display:flex; align-items:baseline; gap:.6rem;}
.jr-dno{font-family:'Fraunces',serif; font-size:1.2rem; color:var(--accent-dark);}
.jr-ddate{color:var(--muted); font-size:.85rem;}
.jr-done{margin-left:auto; width:1.3rem; height:1.3rem; accent-color:var(--accent);}
.jr-block{font-size:.92rem;}
.jr-btitle{font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.3rem; display:flex; align-items:center; gap:.5rem;}
.jr-badge{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.12rem .5rem; border-radius:999px; color:#fff;}
.k-retinoid{background:var(--accent-dark);} .k-exfoliant{background:#C79A3D;} .k-recover{background:#4F7A5B;} .k-hydrate{background:#3E7CA8;} .k-base{background:var(--muted);}
.jr-steps{margin-left:1.05rem;}
.jr-steps li{padding:.1rem 0; line-height:1.35;}
.jr-act b{color:var(--accent-dark);}
.jr-act .jr-why{display:block; color:var(--muted); font-size:.82rem; line-height:1.3;}
.jr-hint{background:var(--bg-soft); color:var(--accent-dark); font-size:.82rem; border-radius:8px; padding:.4rem .6rem; margin-top:.4rem;}
.jr-dfoot{margin-top:auto; display:flex; gap:.7rem; align-items:stretch;}
.jr-photo{flex:0 0 auto;}
.jr-phbox{width:64px; height:64px; border:1px dashed var(--accent); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:var(--muted); cursor:pointer; background-size:cover; background-position:center; position:relative; text-align:center;}
.jr-phbox.has-img{border-style:solid; color:transparent;}
.jr-phrm{position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:50%; border:none; background:var(--ink); color:#fff; font-size:.9rem; line-height:1; cursor:pointer;}
.jr-file{display:none;}
.jr-note{flex:1; min-height:64px; resize:vertical; font:inherit; font-size:.85rem; border:1px solid var(--border); border-radius:10px; padding:.5rem .6rem; background:var(--bg); color:var(--ink);}
.jr-disc{color:var(--muted); font-size:.8rem; line-height:1.5; margin-top:2vh; max-width:60ch;}

/* print: isolate the generated calendar */
@media print{
  body *{visibility:hidden;}
  .jr-cal, .jr-cal *{visibility:visible;}
  .jr-cal{position:absolute; left:0; top:0; width:100%;}
  .jr-calactions, .jr-done, .jr-phrm, .jr-file{display:none !important;}
  .jr-grid{grid-template-columns:1fr 1fr; gap:.5rem;}
  .jr-day{break-inside:avoid; border:1px solid #bbb; box-shadow:none; opacity:1 !important;}
  .jr-phbox{border:1px dashed #999;}
  .jr-note{min-height:2.5rem;}
  .jr-day, .jr-badge, .jr-tag{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}

/* journal fine-tune extras */
.jr-whyline{font-size:.85rem; color:var(--muted); font-style:italic; margin-top:.55rem; line-height:1.45;}
.jr-subq{margin-left:1rem; padding-left:1rem; border-left:2px solid var(--border);}
.jr-card .jr-link{display:block; margin-top:.9rem;}

/* twin thumbnail strip (horizontal scroll, under the intro) */
.twin-thumbs{display:flex; gap:1rem; overflow-x:auto; padding:1.5rem .2rem 1rem; margin-top:2rem; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;}
.twin-thumbs::-webkit-scrollbar{height:6px;} .twin-thumbs::-webkit-scrollbar-thumb{background:var(--border); border-radius:999px;}
.twin-thumb{flex:0 0 auto; width:88px; text-align:center; text-decoration:none; color:var(--ink); scroll-snap-align:center;}
.twin-thumb img{width:88px; height:108px; object-fit:cover; border-radius:14px; box-shadow:0 12px 26px -18px rgba(42,31,34,.55); transition:transform .15s;}
.twin-thumb:hover img{transform:translateY(-3px);}
.twin-thumb span{display:block; margin-top:.45rem; font-family:'Fraunces',serif; font-size:.88rem;}

/* prose recommendation block (cycling / retinoid chapters) */
.jr-rec{margin-top:2.4rem; background:var(--bg-soft); border-radius:16px; padding:clamp(1.3rem,1rem + 1.5vw,1.8rem);}
.jr-recline{font-size:1.08rem; line-height:1.55; margin-bottom:1rem;}
.jr-recline strong{color:var(--accent-dark);}
.jr-recsub{font-size:.9rem; color:var(--muted); margin:1rem 0 .4rem;}
.jr-choice{display:flex; flex-wrap:wrap; gap:.5rem;}
.jr-rec .jr-link{display:inline-block; margin-top:1.2rem;}

/* after a twin is chosen: hide the others so the reader goes straight to cycling;
   a thumbnail click (anchor → :target) can still reveal any twin on demand */
html.jr-filtered .twin{display:none;}
html.jr-filtered .twin.jr-match,
html.jr-filtered .twin:target{display:block;}

/* more breathing room after the lead sentence in the cycling/retinoid chapters */
#cycling .lead, #retinoid .lead{margin-bottom:3vh;}

/* "jump to plan" CTA inside the retinoid recommendation box */
.jr-cta-block{display:block; width:fit-content; margin-top:1.4rem;}

/* local-storage privacy note above the generated calendar */
.jr-privacy{font-size:.85rem; color:var(--muted); line-height:1.5; margin-top:1.2rem; max-width:60ch;}

/* generated shopping list (top of the calendar) */
.jr-shop{background:var(--bg-soft); border-radius:16px; padding:clamp(1.2rem,1rem + 1.5vw,1.8rem); margin-bottom:2.5vh;}
.jr-shop-h{font-family:'Fraunces',serif; font-size:clamp(1.3rem,1.1rem + 1.2vw,1.7rem); color:var(--accent-dark); margin-bottom:.3rem;}
.jr-shop-sub{color:var(--muted); font-size:.92rem; margin-bottom:1rem;}
.jr-shop-list{list-style:disc; margin-left:1.2rem; display:grid; gap:.4rem;}
@media(min-width:560px){.jr-shop-list{grid-template-columns:1fr 1fr; gap:.4rem 2rem;}}
.jr-shop-list li{font-size:1rem; line-height:1.4;}

/* shopping-list product cards (affiliate) */
.jr-shop-grid{display:grid; gap:.8rem; grid-template-columns:1fr;}
@media(min-width:520px){.jr-shop-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:920px){.jr-shop-grid{grid-template-columns:1fr 1fr 1fr;}}
.jr-prod{display:flex; gap:.8rem; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.6rem .7rem; text-decoration:none; color:var(--ink);}
a.jr-prod:hover{border-color:var(--accent);}
.jr-prod-th{flex:0 0 auto; width:56px; height:56px; border-radius:8px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center;}
.jr-prod-th img{width:100%; height:100%; object-fit:contain;}
.jr-prod-meta{min-width:0;}
.jr-prod-role{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}
.jr-prod-title{font-size:.95rem; line-height:1.25; font-weight:600;}
.jr-prod-buy{font-size:.8rem; color:var(--accent-dark); font-weight:600;}
.jr-prod-disc{font-size:.78rem; color:var(--muted); margin-top:1rem;}

/* shopping-list region toggle (amazon.com / amazon.de) */
.jr-shop-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.2rem;}
.jr-region{display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden;}
.jr-region-btn{font:inherit; font-size:.82rem; background:var(--card); border:none; padding:.4rem .9rem; cursor:pointer; color:var(--muted);}
.jr-region-btn.sel{background:var(--accent-dark); color:#fff;}