/* Guides (/learn): editorial reading layout shared by the hub and every guide.
   Loaded after the page styles and responsive.css, so it only refines them. */

/* Self-hosted fonts (replaces the Google Fonts request on these pages) */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/cormorant-garamond-300.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("/assets/fonts/cormorant-garamond-300-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-400-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/manrope-300.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/manrope-400.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/manrope-600.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2")}

/* ---------- Header: photo band, title, byline ---------- */
.guide .policy-header {
  background:
    linear-gradient(180deg, rgba(10,8,7,.55) 0%, rgba(10,8,7,.78) 55%, rgba(10,8,7,.96) 100%),
    var(--guide-img, none) var(--guide-pos, center 40%) / cover no-repeat,
    var(--ink);
  padding-bottom: clamp(56px, 8vh, 88px);
}
.guide .policy-header::before { opacity: .6; }
.guide .policy-header-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
/* Wide enough that every title sits on two lines at most on tablet and desktop */
.guide .policy-title { font-size: clamp(34px, 4vw, 54px); line-height: 1.08; max-width: 34ch; text-wrap: balance; }
.guide .policy-label { font-size: 10px; letter-spacing: .24em; }
/* The legal info box becomes a simple byline */
.guide .policy-meta { flex-direction: row; flex-wrap: wrap; gap: 8px 28px; padding: 0; border: 0; background: none; min-width: 0; }
.guide .meta-row { gap: 10px; }
.guide .meta-row + .meta-row { padding-left: 28px; border-left: 1px solid rgba(255,240,220,.18); }
.guide .meta-row:nth-child(3) { display: none; }
.guide .meta-key { font-size: 9px; }
.guide .meta-val { font-size: 13px; color: rgba(236,228,212,.86); }

/* ---------- Reading column ---------- */
.guide .policy-content { max-width: 700px; }
.guide .policy-content .policy-section p,
.guide .policy-content .policy-section ul li,
.guide .policy-content .policy-section ol li { font-size: 16.5px; line-height: 1.8; color: rgba(26,20,14,.78); }
.guide .section-title { font-size: clamp(25px, 2.6vw, 32px); margin-bottom: 14px; text-wrap: balance; }
.guide .policy-section { padding: 40px 0 28px; }
.guide .policy-content a:not(.guide-cards a) { color: var(--bronze-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.guide .policy-content a:not(.guide-cards a):hover { color: var(--on-light); }

/* Short answer: the first thing a reader (or an AI engine) should take away */
.guide .guide-answer {
  position: relative;
  background: #fffaf2;
  border: 1px solid rgba(140,108,71,.28);
  padding: 26px 30px 26px;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.5;
  margin-bottom: clamp(28px, 4vh, 40px);
}
.guide .guide-answer::before {
  content: "The short answer";
  display: block; margin-bottom: 10px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-deep);
}
.guide.is-hub .guide-answer { background: none; border: 0; padding: 0 0 clamp(28px,4vh,40px); border-bottom: 1px solid rgba(26,20,14,.1); }
.guide.is-hub .guide-answer::before { content: none; }

/* Key takeaways: tinted panel */
.guide #key-takeaways {
  background: var(--cream-2);
  border-top: 0;
  padding: 28px 30px 22px;
  margin-bottom: 8px;
}
.guide #key-takeaways .section-title {
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-deep);
}
.guide #key-takeaways + .policy-section { border-top: 0; }

/* Numbered steps */
.guide .policy-section ol { gap: 18px; margin-top: 18px; }
.guide .policy-section ol li { padding-left: 52px; min-height: 34px; }
.guide .policy-section ol li::before {
  content: counter(list, decimal);
  top: 1px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bronze); color: var(--bronze-deep);
  font-family: var(--f-display); font-size: 18px; font-weight: 500;
}
.guide .policy-section ol li strong { color: var(--on-light); font-weight: 600; }

/* FAQ: tap to open */
.guide .faq { border-top: 1px solid rgba(26,20,14,.12); }
.guide .faq:last-of-type { border-bottom: 1px solid rgba(26,20,14,.12); }
.guide .faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 44px 18px 0;
  font-family: var(--f-display); font-size: 21px; font-weight: 500; line-height: 1.35; color: var(--on-light);
}
.guide .faq summary::-webkit-details-marker { display: none; }
.guide .faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-body); font-size: 22px; font-weight: 300; color: var(--bronze-deep);
  transition: transform .25s ease;
}
.guide .faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.guide .faq summary:hover { color: var(--bronze-deep); }
.guide .faq summary:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.guide .policy-content .faq p { margin: 0 0 20px; }

/* Comparison tables */
.guide .table-wrap { border: 1px solid rgba(26,20,14,.1); }
.guide .table-wrap .data-table thead th { background: var(--cream-2); }

/* Sources: quieter */
.guide #sources .section-title { font-size: 20px; }
.guide .policy-content #sources ul li { font-size: 13.5px; line-height: 1.7; }

/* Guide cards (related guides and the hub) */
.guide .guide-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.guide .guide-cards li, .guide .guide-cards li:last-child { border: 1px solid rgba(26,20,14,.12); background: #fffaf2; transition: border-color .25s ease, transform .25s ease; }
.guide .guide-cards li:hover { border-color: var(--bronze); transform: translateY(-2px); }
.guide .guide-cards a { padding: 22px 22px 24px; height: 100%; }
.guide .guide-card-title { font-size: 20px; }
.guide .guide-card-title::after { content: " \2192"; color: var(--bronze-deep); font-family: var(--f-body); font-size: 15px; }
.guide .guide-card-desc { font-size: 13.5px; }

/* Closing call to action */
.guide .guide-next {
  background: var(--ink); color: rgba(236,228,212,.86);
  border: 0; padding: 30px 32px; margin-top: clamp(40px, 6vh, 64px);
  font-size: 15px;
}
.guide .guide-next strong { display: block; margin-bottom: 6px; font-family: var(--f-display); font-size: 24px; font-weight: 400; color: #fff; }
.guide .guide-next a { color: var(--bronze-2) !important; }
.guide .guide-next a:hover { color: #fff !important; }

/* ---------- Phones and tablets ---------- */
@media (max-width: 960px) {
  .guide:not(.is-hub) .toc { display: none; }
  .guide .meta-row + .meta-row { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .guide .policy-title { font-size: clamp(27px, 7.4vw, 32px); line-height: 1.12; }
  .guide .guide-answer { padding: 22px 20px; }
  .guide #key-takeaways { padding: 24px 20px 18px; }
  .guide .guide-next { padding: 26px 22px; }
  .guide .policy-content .policy-section p,
  .guide .policy-content .policy-section ul li,
  .guide .policy-content .policy-section ol li { font-size: 16px; }
}