/* Shared shell for established article URLs. Keeps the copy and SEO stable
   while bringing older guides into the current Happy Latte look. */
:root{
  --hl-ink:#123e31;
  --hl-paper:#fffdf8;
  --hl-wash:#f4efdf;
  --hl-line:#d9d2c2;
  --hl-muted:#5d746a;
}
body{background:var(--hl-paper);color:var(--hl-ink);font-family:Avenir,"Avenir Next",system-ui,sans-serif}
.top{position:sticky;top:0;z-index:10;background:#fffdf8e8;backdrop-filter:blur(12px);border-bottom:1px solid var(--hl-line)}
.top .wrap{width:min(1100px,calc(100% - 34px));min-height:76px}
.brand img{width:142px;max-height:52px;object-fit:contain;object-position:center;filter:none}
.back{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--hl-ink);border-radius:999px;color:var(--hl-ink);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-decoration:none;transition:background .18s,color .18s}
.back:hover,.back:focus-visible{background:var(--hl-ink);color:#fff}
.article{padding:64px 0 86px}
.article .wrap{width:min(780px,calc(100% - 34px))}
.article .eyebrow,.article h1,.article .lead,.article h2{text-align:center}
.article .eyebrow{display:block;color:var(--hl-muted);letter-spacing:.16em}
.article h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.55rem,7vw,5rem);line-height:.96;letter-spacing:-.055em;margin:18px auto 22px;max-width:13ch}
.article .lead{margin:0 auto 42px;max-width:58ch;font-size:1.1rem;color:var(--hl-muted)}
.article h2{font-family:Georgia,"Times New Roman",serif;max-width:19ch;margin:52px auto 14px;color:var(--hl-ink)}
.article p,.article li{color:#38564b}
.article p{max-width:68ch;margin:0 auto 20px}
.article ul,.article ol{max-width:66ch;margin:0 auto 24px}
.paper-test{border:1px solid var(--hl-line);border-radius:18px;overflow:hidden}
.tip{border-left:0;border:1px solid var(--hl-line);border-radius:16px;background:var(--hl-wash);text-align:center;font-weight:650}
.footer{padding:34px 0;text-align:center;background:var(--hl-ink);color:#fff}
.footer .wrap{width:min(1100px,calc(100% - 34px))}
.footer a{font-weight:700}
@media(max-width:600px){
  .top .wrap{min-height:68px}
  .brand img{width:124px;max-height:48px}
  .back{padding:0 12px;font-size:.7rem}
  .article{padding:42px 0 64px}
  .article h1{font-size:clamp(2.4rem,13vw,3.25rem)}
  .article .lead{font-size:1rem;margin-bottom:30px}
  .article h2{margin-top:40px}
}

/* Keep editorial art proportional on narrow screens. */
.article .paper-test{height:auto;max-width:100%}

.article a{color:var(--hl-ink);text-underline-offset:3px}.article a:hover{color:#597842}