/* ==========================================================================
   Blog layout -- .gd-*
   Kept entirely apart from the .bz-* framework of the naming almanac: this is how a long
   emotional piece wants to be read, so instead of a sticky left-hand contents list with
   numeral badges it runs
   cover -> three lines to read first -> horizontal anchor bar -> big numbered sections ->
   side-by-side comparison / self-check list / step bar -> Q&A
   The colours come from the variables in css/style.css, and this file overrides no global class.
   ========================================================================== */

/* Reading progress bar at the top ----------------------------------------- */
.gd-prog{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--gold),var(--vermilion));
  transition:width .12s linear;
}

/* Article frame: a single narrow column, easier on a long read ------------ */
.gd-wrap{max-width:920px;margin:0 auto;}

/* Cover ------------------------------------------------------------------- */
.gd-cover{padding:26px 0 22px;border-bottom:1px solid var(--line);margin-bottom:30px;}
.gd-cover .kind{
  display:inline-block;font-size:12.5px;letter-spacing:.08em;
  color:var(--vermilion);background:var(--vermilion-soft);
  border-radius:999px;padding:5px 13px;margin-bottom:16px;
}
.gd-cover h1{
  font-family:var(--serif);font-size:36px;line-height:1.42;
  color:var(--ink);margin:0 0 16px;font-weight:700;
}
.gd-cover .lead{
  font-size:16.5px;line-height:1.95;color:var(--ink-soft);
  margin:0 0 20px;padding-left:16px;border-left:3px solid var(--gold-soft);
}
.gd-cover .info{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
  font-size:13px;color:var(--muted);
}
.gd-cover .info .sp{color:var(--line);}

/* Three lines to read first ------------------------------------------------ */
.gd-key{
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;margin-bottom:34px;
}
.gd-key h2{
  font-family:var(--serif);font-size:17px;color:var(--ink);
  margin:0 0 16px;display:flex;align-items:center;gap:9px;font-weight:700;
}
.gd-key h2::before{
  content:"";width:16px;height:2px;background:var(--vermilion);border-radius:2px;
}
.gd-key ol{margin:0;padding:0;list-style:none;counter-reset:gk;}
.gd-key li{
  counter-increment:gk;position:relative;padding-left:34px;
  font-size:15px;line-height:1.9;color:var(--ink-soft);margin-bottom:11px;
}
.gd-key li:last-child{margin-bottom:0;}
.gd-key li::before{
  content:counter(gk);position:absolute;left:0;top:3px;
  width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:1px solid var(--gold);
  color:var(--gold);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.gd-key li b{color:var(--ink);}

/* Sections: big pale numerals --------------------------------------------- */
.gd-part{margin-bottom:44px;scroll-margin-top:80px;}
.gd-part > h2{
  position:relative;font-family:var(--serif);font-size:23px;line-height:1.5;
  color:var(--ink);margin:0 0 18px;padding-top:16px;font-weight:700;
}
.gd-part > h2 .no{
  position:absolute;left:-2px;top:-6px;z-index:0;
  font-family:var(--serif);font-size:52px;font-weight:700;
  color:var(--gold-soft);letter-spacing:-.02em;line-height:1;
  pointer-events:none;
}
.gd-part > h2 .tx{position:relative;z-index:1;}
.gd-part p{font-size:15.5px;line-height:2.02;color:var(--ink-soft);margin:0 0 15px;}
.gd-part p b{color:var(--ink);}
.gd-part p:last-child{margin-bottom:0;}
.gd-part h3{
  font-family:var(--serif);font-size:17.5px;color:var(--ink);
  margin:26px 0 12px;font-weight:700;
}

/* Key-point list: vertical rule plus small dots -------------------------- */
.gd-list{margin:0 0 15px;padding:0 0 0 2px;list-style:none;}
.gd-list li{
  position:relative;padding-left:20px;font-size:15.5px;line-height:2.02;
  color:var(--ink-soft);margin-bottom:10px;
}
.gd-list li::before{
  content:"";position:absolute;left:2px;top:14px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.gd-list li b{color:var(--ink);}

/* Plain body copy (.gd-sec): newspaper-style typesetting -------------------------
   Modelled on a broadsheet feature: subheading plus paragraphs, first line indented, generous
   leading. It sits alongside the boxed components above, and older articles keep using the
   .gd-part set. */
.gd-sec{margin-bottom:14px;scroll-margin-top:80px;}
.gd-sec > h2{
  font-family:var(--serif);font-size:22px;line-height:1.5;
  color:var(--vermilion-dark);margin:38px 0 16px;font-weight:700;
}
.gd-sec h3{font-family:var(--serif);font-size:17.5px;color:var(--ink);margin:28px 0 12px;font-weight:700;}
.gd-sec p{font-size:15.5px;line-height:2.02;color:var(--ink-soft);margin:0 0 15px;text-indent:2em;}
.gd-sec p b{color:var(--ink);}

/* Inline body links (2026-10) ------------------------------------------------ */
/* The model writes [[link:topic]] and the template turns it into <a class="gd-link">.
   Kept deliberately light so the few links in a body paragraph do not read as noise. */
.gd-sec p a.gd-link,
.gd-faq p a.gd-link{
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);
  transition:color .15s,border-color .15s;
}
.gd-sec p a.gd-link:hover,
.gd-faq p a.gd-link:hover{color:var(--vermilion-dark);border-bottom-color:var(--vermilion);}

/* FAQ (2026-10) -------------------------------------------------------------- */
/* Same restrained layout as the body: whitespace + h2 + h3 questions + p answers.
   No accordion, no boxed panel - matches the note at the top of template.en.js. */
.gd-faq{margin-bottom:14px;scroll-margin-top:80px;}
.gd-faq > h2{
  font-family:var(--serif);font-size:22px;line-height:1.5;
  color:var(--vermilion-dark);margin:38px 0 16px;font-weight:700;
}
.gd-faq h3{
  font-family:var(--serif);font-size:16.5px;color:var(--ink);
  margin:22px 0 10px;font-weight:700;line-height:1.6;
}
.gd-faq p{font-size:15.5px;line-height:1.9;color:var(--ink-soft);margin:0 0 14px;text-indent:0;}

/* Pull quote -------------------------------------------------------------- */
.gd-quote{
  position:relative;margin:26px 0;padding:22px 26px 22px 54px;
  background:linear-gradient(180deg,var(--cream),var(--paper));
  border:1px solid var(--line);border-left:3px solid var(--vermilion);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.gd-quote::before{
  content:"“";position:absolute;left:16px;top:6px;
  font-family:var(--serif);font-size:52px;color:var(--gold);opacity:.5;line-height:1;
}
.gd-quote p{font-family:var(--serif);font-size:16.5px;line-height:1.95;color:var(--ink);margin:0;}
.gd-quote .who{display:block;margin-top:10px;font-family:var(--sans);font-size:13px;color:var(--muted);}

/* Side-by-side comparison: read it this way / not this way ---------------- */
.gd-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0;}
.gd-two .col{border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;background:var(--paper);}
.gd-two .col h4{
  font-size:14.5px;margin:0 0 14px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.gd-two .col h4::before{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
.gd-two .col.yes{background:linear-gradient(180deg,#f4faf7,var(--paper));border-color:#d9e9e2;}
.gd-two .col.yes h4{color:var(--jade);}
.gd-two .col.yes h4::before{content:"✓";background:#e3f0ea;color:var(--jade);}
.gd-two .col.no{background:linear-gradient(180deg,#fdf5f4,var(--paper));border-color:#f0dedb;}
.gd-two .col.no h4{color:var(--vermilion);}
.gd-two .col.no h4::before{content:"✕";background:var(--vermilion-soft);color:var(--vermilion);}
.gd-two ul{margin:0;padding:0;list-style:none;}
.gd-two li{font-size:14.5px;line-height:1.85;color:var(--ink-soft);margin-bottom:10px;padding-left:12px;position:relative;}
.gd-two li:last-child{margin-bottom:0;}
.gd-two li::before{content:"";position:absolute;left:0;top:12px;width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.55;}

/* Self-check list --------------------------------------------------------- */
.gd-check{
  margin:24px 0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);overflow:hidden;
}
.gd-check .hd{
  background:var(--cream-mid);padding:14px 22px;
  font-family:var(--serif);font-size:15.5px;color:var(--ink);font-weight:700;
  border-bottom:1px solid var(--line);
}
.gd-check .it{display:flex;gap:13px;padding:15px 22px;border-bottom:1px dashed var(--line);}
.gd-check .it:last-child{border-bottom:none;}
.gd-check .bx{
  flex:0 0 auto;width:18px;height:18px;margin-top:4px;
  border:1.5px solid var(--gold);border-radius:4px;background:var(--cream);
}
.gd-check .tt{font-size:15px;line-height:1.85;color:var(--ink-soft);}
.gd-check .tt b{display:block;color:var(--ink);margin-bottom:3px;}

/* Step bar ---------------------------------------------------------------- */
.gd-step{margin:24px 0;padding-left:4px;}
.gd-step .st{position:relative;padding:0 0 22px 34px;}
.gd-step .st::before{
  content:"";position:absolute;left:9px;top:22px;bottom:0;width:1px;background:var(--line);
}
.gd-step .st:last-child{padding-bottom:0;}
.gd-step .st:last-child::before{display:none;}
.gd-step .st .dot{
  position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
  background:var(--vermilion);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.gd-step .st h4{font-size:15.5px;color:var(--ink);margin:0 0 7px;font-weight:700;}
.gd-step .st p{font-size:14.5px;line-height:1.9;color:var(--ink-soft);margin:0;}

/* Notice block ------------------------------------------------------------ */
.gd-note{
  margin:24px 0;padding:16px 20px;border-radius:var(--radius-sm);
  background:var(--gold-soft);border:1px solid #e6d5b4;
}
.gd-note p{font-size:14.5px;line-height:1.9;color:#6b5427;margin:0;}
.gd-note p b{color:#4d3c17;}

/* Boundary list (conclusions that should not be drawn) ------------------- */
.gd-bound{margin:24px 0;display:grid;gap:12px;}
.gd-bound .row{
  display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:start;
  padding:15px 18px;background:var(--cream);border-radius:var(--radius-sm);
  border:1px solid var(--line);
}
.gd-bound .k{
  font-family:var(--serif);font-size:14.5px;color:var(--vermilion);font-weight:700;line-height:1.7;
}
.gd-bound .v{font-size:14.5px;line-height:1.85;color:var(--ink-soft);}

/* Closing action bar ------------------------------------------------------ */
.gd-cta{
  margin:40px 0 0;padding:30px 32px;border-radius:var(--radius);
  background:linear-gradient(135deg,#2a2536,#3a3348);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.gd-cta .tx{flex:1 1 320px;}
.gd-cta h3{font-family:var(--serif);font-size:20px;margin:0 0 9px;color:#fff;font-weight:700;}
.gd-cta p{font-size:14.5px;line-height:1.85;color:rgba(255,255,255,.76);margin:0;}
.gd-cta a{
  flex:0 0 auto;text-decoration:none;font-size:15px;font-weight:700;
  background:linear-gradient(135deg,var(--vermilion),var(--vermilion-dark));
  color:#fff;padding:13px 26px;border-radius:999px;
  box-shadow:0 8px 20px rgba(192,57,43,.32);transition:transform .18s;
}
.gd-cta a:hover{transform:translateY(-2px);}

/* Related reading: numbered list in a row -------------------------------- */
.gd-more{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);}

/* Article category tag (sits at the end of the piece, before Read next) -- */
.article-tag{
  margin:20px 0 26px;
  padding:0 0 12px;
  border-bottom:1px solid var(--line);
}
.article-tag .kind{
  display:inline-block;font-size:12.5px;letter-spacing:.08em;
  color:var(--vermilion);background:var(--vermilion-soft);
  border-radius:999px;padding:5px 13px;
}
/* The category tag already carries a bottom border, so the Read next block right after it must
   not draw a top rule as well, or two parallel lines end up under the tag. Older articles have
   no .article-tag, so they are unaffected and keep their top rule. */
.article-tag + .gd-more{border-top:none;padding-top:0;}
.gd-more h2{font-family:var(--serif);font-size:19px;color:var(--ink);margin:0 0 18px;font-weight:700;}
.gd-more .ln{
  display:flex;gap:15px;align-items:flex-start;text-decoration:none;
  padding:16px 0;border-bottom:1px dashed var(--line);
}
.gd-more .ln:last-of-type{border-bottom:none;}
.gd-more .ln .n{
  flex:0 0 auto;font-family:var(--serif);font-size:19px;font-weight:700;
  color:var(--gold-soft);line-height:1.3;width:26px;
}
.gd-more .ln .bd{flex:1 1 auto;}
.gd-more .ln .cat{display:block;font-size:12px;color:var(--vermilion);margin-bottom:5px;}
.gd-more .ln h4{font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 6px;font-weight:700;transition:color .18s;}
.gd-more .ln p{font-size:13.5px;line-height:1.8;color:var(--muted);margin:0;}
.gd-more .ln:hover h4{color:var(--vermilion);}
.gd-more .ln:hover .n{color:var(--gold);}
.gd-more .back{display:inline-block;margin-top:20px;font-size:14px;color:var(--vermilion);text-decoration:none;}
.gd-more .back:hover{text-decoration:underline;}

/* Mobile ------------------------------------------------------------------ */
@media (max-width:760px){
  .gd-cover{padding:18px 0 18px;margin-bottom:24px;}
  .gd-cover h1{font-size:26px;line-height:1.45;}
  .gd-cover .lead{font-size:15px;line-height:1.9;padding-left:13px;}
  .gd-key{padding:20px 18px;margin-bottom:26px;border-radius:var(--radius-sm);}
  .gd-key li{font-size:14.5px;padding-left:30px;}
  .gd-part{margin-bottom:34px;}
  .gd-part > h2{font-size:19.5px;padding-top:13px;}
  .gd-part > h2 .no{font-size:40px;top:-4px;}
  .gd-part p,.gd-list li{font-size:15px;line-height:1.95;}
  .gd-sec > h2{font-size:19.5px;margin:30px 0 14px;}
  .gd-sec p,.gd-defs li{font-size:15px;line-height:1.95;text-indent:2em;}
  .gd-defs{padding-left:16px;}
  .gd-quote{padding:18px 18px 18px 44px;margin:20px 0;}
  .gd-quote p{font-size:15.5px;}
  .gd-two{grid-template-columns:1fr;gap:12px;}
  .gd-check .hd{padding:12px 16px;font-size:14.5px;}
  .gd-check .it{padding:13px 16px;gap:11px;}
  .gd-bound .row{grid-template-columns:1fr;gap:6px;padding:13px 15px;}
  .gd-cta{padding:22px 20px;flex-direction:column;align-items:stretch;gap:16px;}
  .gd-cta h3{font-size:17.5px;}
  .gd-cta a{text-align:center;padding:12px 20px;}
  .gd-more{margin-top:34px;padding-top:24px;}
}