/* Guides — shared by every article and both guide indexes (EN + FR).
   Site-wide tokens, nav, footer, .nightcard and .cairn live in /style.css. */

.ghead{padding:clamp(28px,6vh,64px) 0 clamp(26px,4vh,40px);max-width:860px;}
.ghead .label{display:block;margin:22px 0 14px;}
.ghead h1{font-family:'Fraunces',serif;font-weight:300;letter-spacing:-.025em;
  font-size:clamp(36px,5.6vw,66px);line-height:1.02;margin:0;text-wrap:balance;}
.ghead .dek{font-size:clamp(18px,1.9vw,21px);color:var(--mute);max-width:56ch;margin:22px 0 0;line-height:1.55;}
.gmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:26px;font-size:14px;color:var(--mute);}

.gwrap{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:clamp(40px,6vw,90px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(34px,5vh,52px);}
.toc{position:sticky;top:96px;font-size:14.5px;}
.toc .label{display:block;margin-bottom:12px;}
.toc ol{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line);}
.toc li a{display:block;padding:6px 0;padding-inline-start:14px;margin-inline-start:-2px;border-inline-start:2px solid transparent;color:var(--mute);line-height:1.4;}
.toc li a:hover{color:var(--ink);border-inline-start-color:var(--accent);}

/* Reading column: ~68ch, sans body a touch larger than the site default */
.prose{max-width:68ch;font-size:18.5px;line-height:1.72;}
.prose > p,.prose li{color:var(--ink);}
.prose p{margin:0 0 1.15em;}
.prose h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(25px,2.8vw,32px);letter-spacing:-.015em;
  line-height:1.15;margin:2.1em 0 .6em;scroll-margin-top:100px;text-wrap:balance;}
.prose h3{font-size:19px;font-weight:700;margin:1.6em 0 .4em;}
.prose ul,.prose ol{padding-inline-start:1.25em;margin:0 0 1.2em;}
.prose li{margin:.35em 0;}
.prose li::marker{color:var(--accent);}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--accent) 50%,transparent);}
.prose a:hover{text-decoration-color:var(--accent);}
.prose strong{font-weight:700;}
.prose blockquote{margin:1.6em 0;padding:0;padding-inline-start:22px;border-inline-start:3px solid var(--s-today);
  font-family:'Fraunces',serif;font-weight:300;font-size:1.25em;line-height:1.45;color:var(--ink);}

/* "The short answer" — first thing under the header, written to be quotable */
.keys{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px 28px 10px;margin:0 0 2em;}
.keys .label{display:block;margin-bottom:8px;}
.keys ul{padding-inline-start:1.1em;}
.keys li{font-size:17px;line-height:1.6;}

/* A worked example or a rule of thumb, set apart from the flow */
.note{border:1px solid var(--line);border-radius:20px;padding:20px 24px;margin:1.6em 0;font-size:17px;}
.note p:last-child{margin-bottom:0;}
.note .label{display:block;margin-bottom:6px;}

/* Phone screenshot beside the text */
figure.phone{float:inline-end;width:230px;margin:6px 0 24px;margin-inline-start:34px;}
figure.phone img{width:100%;height:auto;aspect-ratio:414/900;border-radius:28px;display:block;
  box-shadow:0 26px 60px -26px var(--shot-shadow),0 6px 16px -8px var(--shot-shadow);}
figure.phone figcaption{font-size:14px;color:var(--mute);margin-top:12px;line-height:1.45;}
.prose h2{clear:both;}

/* The Yolmira card inside an article */
.gcta{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,44px);align-items:center;
  padding:clamp(26px,4vw,42px);margin:2.4em 0;clear:both;}
.gcta h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,2.6vw,30px);margin:0 0 .4em;color:var(--on-night);}
.gcta p{font-size:16.5px;line-height:1.6;margin:0 0 1em;color:var(--on-night-soft);}
.gcta ul{margin:0 0 1.3em;padding-inline-start:1.1em;font-size:16px;color:var(--on-night);}
.gcta li::marker{color:var(--s-today);}
.prose .gcta li{color:var(--on-night);}
.prose .gcta a.store{text-decoration:none;color:var(--on-night);}
.prose .gcta a.store.primary{color:var(--night);}
.gcta .cairn{min-width:190px;}
.gcta .pricenote{font-size:13.5px;margin-top:14px;color:var(--on-night-soft);}

/* FAQ — native disclosure, no script */
.faq details{border-top:1px solid var(--line);padding:4px 0;}
.faq details:last-of-type{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:18px;padding:14px 0;padding-inline-end:32px;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;inset-inline-end:6px;top:22px;width:10px;height:10px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(-135deg);top:26px;}
.faq details p{margin:0 0 16px;color:var(--mute);font-size:17px;}

.sources ol{font-size:15px;line-height:1.55;color:var(--mute);}
.sources li{margin:.55em 0;}
.disclaimer{font-size:15px;color:var(--mute);border-top:1px solid var(--line);padding-top:18px;margin-top:2em;}

/* Related guides + guide index cards */
.related{padding:clamp(50px,8vh,90px) 0;}
.related h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(26px,3.4vw,38px);margin:0 0 26px;letter-spacing:-.015em;}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;}
.gcard{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:22px;padding:24px 26px;transition:border-color .2s,transform .15s;}
.gcard:hover{border-color:var(--accent);transform:translateY(-2px);}
.gcard .label{font-size:13.5px;}
.gcard h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;line-height:1.2;margin:0;letter-spacing:-.01em;}
.gcard p{margin:0;color:var(--mute);font-size:15.5px;line-height:1.55;}
.gcard .more{margin-top:auto;padding-top:6px;font-size:14.5px;font-weight:600;color:var(--accent-ink);}

/* Guide index: the first guide is featured as a night card */
.gfeature{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,60px);align-items:center;
  padding:clamp(30px,5vw,56px);margin:0 0 22px;}
.gfeature .label{color:var(--s-today);}
.gcards.two{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:760px){ .gcards.two{grid-template-columns:1fr;} }
.gfeature h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(28px,4vw,46px);line-height:1.06;margin:10px 0 14px;letter-spacing:-.02em;}
.gfeature p{color:var(--on-night-soft);margin:0 0 22px;max-width:52ch;}

@media (prefers-reduced-motion:reduce){ .gcard,.faq summary::after{transition:none;} }
@media(max-width:1060px){
  .gwrap{grid-template-columns:1fr;}
  .toc{display:none;}
}
@media(max-width:760px){
  figure.phone{float:none;width:210px;margin:8px auto 26px;}
  .gcta,.gfeature{grid-template-columns:1fr;}
  .gcta .cairn,.gfeature .cairn{order:-1;}
  .prose{font-size:17.5px;}
}

/* Guide index: one section per theme */
.ggroup{margin:clamp(40px,6vh,64px) 0 0;}
.ggroup h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(24px,3vw,34px);letter-spacing:-.015em;margin:0 0 20px;}

/* Promo visual in the Yolmira card (same image as the ad that lands on this guide) */
.gcta-shot{width:280px;height:auto;aspect-ratio:1;border-radius:22px;display:block;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);}
@media(max-width:760px){ .gcta .gcta-shot{order:-1;width:100%;max-width:360px;} }