/* Better Days — shared subpage styles (About, FAQ, journal)
   Same woodblock language as the landing page, lighter canvas. */
:root{
  --ink:#20261D;--parchment:#F1E7D0;--parchment-deep:#E7DABC;--pine:#2E4034;
  --sage:#8FA382;--sage-pale:#B9C4A7;--madder:#7E2A35;--madder-bright:#9A3442;
  --gold:#C9A15A;--clay:#C0573D;--teal:#3F7A6E;
  --display:'Fraunces',serif;--body:'Archivo',system-ui,sans-serif;
  --shadow-ink:0 4px 0 var(--ink);--radius-stamp:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--parchment);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-variation-settings:'WONK' 1,'SOFT' 30;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.wrap{max-width:880px;margin:0 auto;padding:0 22px}
a{color:var(--madder)}

/* topbar — same as landing, always visible */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1.4rem;background:color-mix(in srgb,var(--parchment) 90%,transparent);backdrop-filter:blur(10px)}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--pine),var(--teal),var(--sage),var(--gold),var(--madder),var(--pine));
  background-size:300% 100%;animation:holo-drift 14s linear infinite}
@keyframes holo-drift{to{background-position:300% 0}}
.topbar .brand{display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:800;font-size:1.05rem;text-decoration:none;color:var(--ink)}
.topbar .brand img{width:38px;height:38px}
.topbar .brand .brand-line{display:flex;flex-direction:column;line-height:1.05}
.topbar .brand .brand-sub{display:block;font-family:var(--body);font-size:.56rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--madder);line-height:1;margin-top:.28rem}
.topbar nav{display:flex;gap:1.4rem;align-items:center}
.topbar nav a{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding-bottom:3px;position:relative}
.topbar nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--madder);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.topbar nav a:hover::after{transform:scaleX(1)}
@media(max-width:640px){.topbar nav a:not(.btn){display:none}}

.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--body);font-weight:700;font-size:.92rem;
  letter-spacing:.04em;padding:.8em 1.6em;border-radius:var(--radius-stamp);border:2px solid var(--ink);
  cursor:pointer;text-decoration:none;transition:transform .16s,box-shadow .16s;position:relative}
.btn-primary{background:var(--madder);color:var(--parchment);box-shadow:var(--shadow-ink),inset 0 0 0 1.5px rgba(241,231,208,.42)}
.btn-primary:hover{transform:translate(-1px,-3px);box-shadow:0 5px 0 var(--ink),0 14px 30px rgba(32,38,29,.24);background:var(--madder-bright)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--parchment)}

/* page hero — emblem crest + headline over the panorama strip */
.page-hero{position:relative;text-align:center;padding:4.2rem 0 3.4rem;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;
  background:url('woodblock-panorama.webp') center 30%/cover no-repeat;
  opacity:.22;filter:saturate(1.2)}
.page-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--parchment) 60%,transparent),var(--parchment) 92%)}
.page-hero>*{position:relative;z-index:1}
.page-hero img.crest{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(32,38,29,.3))}
.eyebrow{font-weight:700;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--madder);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before,.eyebrow::after{content:'✦';font-size:.8em;color:var(--clay)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;margin:.9rem 0 .6rem}
.page-hero h1 em{font-style:italic;color:var(--madder)}
.page-hero p.lede{max-width:44em;margin:0 auto;font-size:1.05rem;color:color-mix(in srgb,var(--ink) 85%,var(--parchment))}

/* ornament rule */
.orn-rule{display:flex;align-items:center;justify-content:center;gap:.65rem;margin:1rem auto 1.4rem;color:var(--ink)}
.orn-rule::before,.orn-rule::after{content:'';height:2px;flex:0 1 92px;border-radius:2px;background:linear-gradient(90deg,transparent,currentColor)}
.orn-rule::after{background:linear-gradient(90deg,currentColor,transparent)}
.orn-rule svg{width:118px;height:24px;flex:none;overflow:visible}
.orn-rule .dmd{fill:var(--madder)}

/* content blocks */
.prose{padding-bottom:3.5rem}
.prose h2{font-size:1.7rem;margin:2.2rem 0 .8rem}
.prose p{margin-bottom:1.1rem;color:color-mix(in srgb,var(--ink) 88%,var(--parchment))}
.prose strong{color:var(--ink)}
.card-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.3rem;margin:1.6rem 0 2.4rem}
.mini-card{background:var(--parchment-deep);border:2.5px solid var(--ink);border-radius:var(--radius-stamp);
  padding:1.3rem 1.2rem;box-shadow:var(--shadow-ink);
  outline:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent);outline-offset:-8px}
.mini-card h3{font-size:1.08rem;margin-bottom:.35rem}
.mini-card p{font-size:.9rem;margin:0;color:color-mix(in srgb,var(--ink) 82%,var(--parchment))}

/* FAQ accordion — native details, elder-friendly */
.faq{padding-bottom:3.5rem}
.faq details{background:var(--parchment-deep);border:2.5px solid var(--ink);border-radius:var(--radius-stamp);
  margin-bottom:1rem;box-shadow:var(--shadow-ink);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.9rem;
  padding:1.05rem 1.3rem;font-family:var(--display);font-weight:700;font-size:1.12rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'✦';color:var(--madder);font-size:.9em;flex:none;transition:transform .3s}
.faq details[open] summary::before{transform:rotate(135deg)}
.faq summary .qnum{margin-left:auto;font-size:.72rem;font-weight:600;letter-spacing:.2em;color:var(--clay);flex:none}
.faq details .a{padding:0 1.3rem 1.2rem 3.1rem;font-size:.95rem;color:color-mix(in srgb,var(--ink) 88%,var(--parchment))}
.faq details[open]{background:var(--parchment);border-color:var(--teal)}
.faq details{transition:background .25s}
.faq details:hover{border-color:var(--madder)}

/* CTA band */
.cta-band{background:var(--ink);color:var(--parchment);text-align:center;padding:3.6rem 0 3.2rem;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;opacity:.12;
  background:url('woodblock-panorama.webp') center 70%/cover no-repeat}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:var(--parchment);font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:.6rem}
.cta-band h2 em{color:var(--gold);font-style:italic}
.cta-band p{color:color-mix(in srgb,var(--parchment) 80%,var(--pine));margin-bottom:1.5rem}
.cta-band .btn-ghost{color:var(--parchment);border-color:var(--parchment)}
.cta-band .btn-ghost:hover{background:var(--parchment);color:var(--ink)}
.cta-band .row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta-band .fine{margin-top:1rem;font-size:.8rem;opacity:.75}

/* postcard strip + emblem seal — the landing footer's stamp, miniaturized */
.subpostcard{position:relative;height:70px;max-width:560px;margin:0 auto 1.4rem;border:3px solid var(--ink);
  border-radius:14px;box-shadow:var(--shadow-ink),0 10px 24px rgba(0,0,0,.2);
  background:url('woodblock-panorama.webp') center 62%/cover no-repeat}
.subpostcard .seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:94px;height:94px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));transition:transform .3s cubic-bezier(.34,1.5,.5,1)}
.subpostcard .seal:hover{transform:translate(-50%,-50%) rotate(-5deg) scale(1.06)}

/* mini footer */
.subfoot{background:var(--pine);color:var(--parchment);padding:2rem 0;text-align:center}
.subfoot .waves{width:min(300px,70%);height:20px;color:var(--sage);opacity:.8;margin:0 auto .8rem;display:block}
.subfoot p{font-size:.8rem;color:color-mix(in srgb,var(--parchment) 72%,var(--pine))}
.subfoot .subcredit{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--parchment) 42%,var(--pine));margin-top:.7rem}

/* ---------- about: hover-to-peek surprises ---------- */
.peek-hint{font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--madder);margin:-.4rem 0 1rem}
.mini-card{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.34,1.5,.5,1)}
.mini-card:hover,.mini-card:focus-visible{transform:translateY(-4px) rotate(-.3deg)}
.mini-card .peek{display:block;max-height:0;opacity:0;overflow:hidden;margin-top:0;
  font-size:.78rem;font-weight:600;color:var(--madder);
  transition:max-height .35s ease,opacity .3s .05s,margin-top .35s}
.mini-card:hover .peek,.mini-card:focus-visible .peek,.mini-card:focus .peek{max-height:5em;opacity:1;margin-top:.7rem}

.subfoot{position:relative}

.lore{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-bottom:2rem}
.lore-tile{position:relative;overflow:hidden;min-height:7.2rem;padding:1rem 1.15rem;
  background:var(--card,#FBF5E4);border:2.5px solid var(--ink);border-radius:14px 18px 12px 20px;
  box-shadow:0 3px 0 var(--ink);cursor:help;display:flex;align-items:center}
.lore-q{font-family:var(--display);font-variation-settings:'WONK' 1,'SOFT' 30;font-size:1.06rem;font-weight:700;line-height:1.3}
.lore-a{position:absolute;inset:0;display:flex;align-items:center;padding:1rem 1.15rem;
  background:var(--pine);color:var(--parchment);font-size:.85rem;font-weight:600;line-height:1.5;
  transform:translateY(102%);transition:transform .38s cubic-bezier(.34,1.3,.5,1)}
.lore-tile:hover .lore-a,.lore-tile:focus-visible .lore-a,.lore-tile:focus .lore-a{transform:translateY(0)}
.page-hero .crest{transition:transform .4s cubic-bezier(.34,1.6,.5,1)}
.page-hero .crest:hover{transform:rotate(-8deg) scale(1.06)}
@media(prefers-reduced-motion:reduce){.mini-card:hover{transform:none}.lore-a{transition:none}}
.subfoot a{color:var(--parchment)}

@media(prefers-reduced-motion:reduce){
  .topbar::after{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- holographic ombré thread (ties subpages to the landing) ---------- */
.holo-text{background:linear-gradient(90deg,var(--gold),#7FC0B2,var(--sage-pale),var(--gold),var(--madder-bright));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;animation:holo-drift 11s linear infinite}
.holo-text.v2{animation:holo-drift 9s linear infinite reverse;animation-delay:-4s}
.holo-text.v3{animation:holo-drift 17s linear infinite;animation-delay:-9s}
.holo-text.v4{animation:holo-drift 7s linear infinite reverse;animation-delay:-2s}

/* the clever banner — a parchment pill wrapped in the living gradient border */
.holo-banner{display:flex;align-items:center;justify-content:center;gap:.7em;flex-wrap:wrap;text-align:center;
  margin:0 auto 2.8rem;max-width:640px;padding:.85em 1.5em;border-radius:999px;
  font-weight:700;font-size:.95rem;text-decoration:none;color:var(--ink);
  border:2.5px solid transparent;
  background:linear-gradient(var(--parchment),var(--parchment)) padding-box,
             linear-gradient(90deg,var(--madder),var(--clay),var(--gold),var(--teal),var(--sage),var(--gold),var(--madder)) border-box;
  background-size:auto,300% 100%;animation:holo-drift 10s linear infinite;
  box-shadow:var(--shadow-ink);transition:transform .2s cubic-bezier(.34,1.4,.5,1)}
.holo-banner:hover{transform:translateY(-3px) rotate(-.4deg)}
.holo-banner .ph{color:var(--madder);white-space:nowrap}
@media(max-width:560px){.holo-banner{border-radius:22px;font-size:.88rem}}

/* page-hero bird — a gull riding thermals, gently bobbing */
.page-hero .bird{position:absolute;width:46px;color:var(--pine);opacity:.5;z-index:1;
  animation:bird-bob 7s ease-in-out infinite;pointer-events:none}
.page-hero .bird.right{left:auto;right:12%;top:22%;width:34px;opacity:.4;animation-delay:2.4s;animation-duration:9s}
.page-hero .bird{left:10%;top:30%}
@keyframes bird-bob{50%{transform:translateY(-10px) rotate(5deg)}}

/* nav links + headings pick up the thread */
.topbar nav a::after{background:linear-gradient(90deg,var(--madder),var(--gold),var(--teal));
  background-size:220% 100%;animation:holo-drift 5s linear infinite}
.cta-band h2 em{background:linear-gradient(90deg,var(--gold),#7FC0B2,var(--sage-pale),var(--gold));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;animation:holo-drift 11s linear infinite}
@media(prefers-reduced-motion:reduce){
  .holo-text,.holo-banner,.cta-band h2 em,.topbar nav a::after{animation:none}
  .page-hero .bird{animation:none}
}

/* ---------- deeper collage styling — same language as the landing ---------- */

/* carved ombré band on cards + every FAQ row — the thread, woven in */
.mini-card{position:relative;overflow:hidden;padding-top:1.6rem}
.mini-card::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;
  background-image:repeating-linear-gradient(118deg,transparent 0 13px,rgba(32,38,29,.18) 13px 17px),
    linear-gradient(90deg,var(--madder),var(--clay),var(--gold),var(--teal),var(--sage),var(--gold),var(--madder));
  background-size:auto,300% 100%;animation:holo-drift 12s linear infinite;border-bottom:2px solid var(--ink)}
.faq details{position:relative}
.faq details::before{content:'';position:absolute;top:0;left:0;right:0;height:7px;
  background-image:repeating-linear-gradient(118deg,transparent 0 13px,rgba(32,38,29,.16) 13px 17px),
    linear-gradient(90deg,var(--madder),var(--clay),var(--gold),var(--teal),var(--sage),var(--gold),var(--madder));
  background-size:auto,300% 100%;animation:holo-drift 12s linear infinite;border-bottom:2px solid var(--ink)}
.faq summary{padding-top:1.35rem}

/* the ✦ on each question gets the ombré too, and spins when open */
.faq summary::before{background:linear-gradient(90deg,var(--madder),var(--gold),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:holo-drift 7s linear infinite}

/* ruled-notebook lines under the FAQ column; soft sage/gold washes under About prose */
.faq{background-image:repeating-linear-gradient(0deg,transparent 0 46px,rgba(46,64,52,.05) 46px 47px);
  position:relative;isolation:isolate}
/* the forest + waves half of the woodblock print, washed into the ruled paper */
.faq::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('tex-mtn-light.webp') center 68%/cover no-repeat;
  mix-blend-mode:multiply;opacity:.14}
.prose{position:relative;isolation:isolate}
/* mountain print ghosted behind the prose pages */
.prose::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('tex-swirl-light.webp') center 30%/cover no-repeat;
  mix-blend-mode:multiply;opacity:.13}
/* framed window of carved art — sky band on FAQ, swirl-ribbon on About; slowly pans */
.art-frieze{height:96px;max-width:820px;margin:0 auto 2.4rem;
  border:3px solid var(--ink);border-radius:14px 20px 12px 16px;
  background:url('band-sky.webp') center 40%/cover no-repeat;
  box-shadow:0 5px 0 rgba(32,38,29,.85), inset 0 0 0 3px rgba(241,231,208,.45);
  animation:frieze-pan 60s ease-in-out infinite alternate}
.art-frieze.ribbon{background-image:url('band-ribbon.webp');background-position:center 60%}
@keyframes frieze-pan{from{background-position-x:15%}to{background-position-x:85%}}
@media(max-width:640px){.art-frieze{height:70px}}
@media(prefers-reduced-motion:reduce){.art-frieze{animation:none}}
.prose{background-image:
  radial-gradient(circle at 7% 10%,rgba(143,163,130,.14) 0 90px,transparent 91px),
  radial-gradient(circle at 93% 52%,rgba(201,161,90,.11) 0 130px,transparent 131px),
  radial-gradient(circle at 12% 90%,rgba(63,122,110,.10) 0 110px,transparent 111px)}

/* clouds drifting through the page-hero — calm traffic overhead */
.page-hero .cloud{position:absolute;top:var(--y,20%);width:var(--w,150px);z-index:1;opacity:.6;
  pointer-events:none;animation:cloud-drift var(--d,70s) linear infinite}
.page-hero .cloud.rev{animation-name:cloud-drift-rev}
.page-hero .cloud.up{animation-name:cloud-up}
.page-hero .cloud.dn{animation-name:cloud-dn}
@keyframes cloud-drift{from{transform:translateX(-32vw)}to{transform:translateX(112vw)}}
@keyframes cloud-drift-rev{from{transform:translateX(112vw)}to{transform:translateX(-32vw)}}
/* some clouds climb the ridge, some sink into it — weather, not a parade */
@keyframes cloud-up{0%{transform:translate(-32vw,18%)}50%{transform:translate(40vw,-10%)}100%{transform:translate(112vw,-34%)}}
@keyframes cloud-dn{0%{transform:translate(112vw,-22%)}50%{transform:translate(40vw,6%)}100%{transform:translate(-32vw,26%)}}

/* torn parchment edge where the hero meets the content — collage cut */
.edge-b{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:30px;z-index:2;display:block;color:var(--parchment)}

/* heading marks echo the footer's diamond cuts */
.prose h2::before{content:'✦';color:var(--clay);margin-right:.55em;font-size:.75em;vertical-align:.18em}

/* pine fringe running into the mini footer — the day-scene tile: two depth rows,
   gold sun with rays, a gull overhead, snow on the tips */
.pine-run{height:70px;opacity:.2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='80'%3E%3Cg fill='%23C9A15A' opacity='.85'%3E%3Ccircle cx='244' cy='17' r='9'/%3E%3Cg stroke='%23C9A15A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M244 2v4M244 28v4M229 17h4M259 17h4M234 7l2.6 2.6M254 7l-2.6 2.6M234 27l2.6-2.6M254 27l-2.6-2.6'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M118 20 Q125 12 132 18 Q139 12 146 19' fill='none' stroke='%234C5F45' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg fill='%238FA382' opacity='.55'%3E%3Cpath d='M6 78 L20 44 L26 52 L36 30 L46 52 L52 44 L66 78 Z'/%3E%3Cellipse cx='98' cy='66' rx='15' ry='10'/%3E%3Crect x='95' y='72' width='6' height='6'/%3E%3Cpath d='M144 78 l8-28 8 28z'/%3E%3Cpath d='M180 78 L191 50 L195 56 L203 36 L210 56 L215 50 L226 78 Z'/%3E%3Cellipse cx='272' cy='64' rx='14' ry='10'/%3E%3Crect x='269' y='70' width='6' height='6'/%3E%3C/g%3E%3Cg fill='%234C5F45'%3E%3Cpath d='M44 78 L56 54 L60 59 L67 42 L74 59 L78 54 L89 78 Z'/%3E%3Crect x='65' y='72' width='5' height='6'/%3E%3Cellipse cx='128' cy='70' rx='13' ry='8'/%3E%3Crect x='125' y='74' width='6' height='4'/%3E%3Cpath d='M162 78 l6-22 7 22z'/%3E%3Cpath d='M200 78 L210 58 L214 63 L220 48 L226 63 L230 58 L238 78 Z'/%3E%3Cpath d='M258 78 l7-24 7 24z'/%3E%3C/g%3E%3Cg fill='%23EFE6CF' opacity='.8'%3E%3Cpath d='M64 46 L67 41.5 L70 46 Z'/%3E%3Cpath d='M262.4 57 L265.5 53.5 L268.6 57 Z'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left/auto 70px;
  animation:forest-drift 82s linear infinite}
@keyframes forest-drift{to{background-position-x:-300px}}

/* postcard strip + emblem seal — the landing footer's stamp, miniaturized */


@media(prefers-reduced-motion:reduce){
  .mini-card::before,.faq details::before,.faq summary::before,.page-hero .cloud{animation:none}
}

/* sun-ray fan slowly turning behind the crest — the badge's rays, alive */
.page-hero .rays{position:absolute;left:50%;top:44%;width:360px;transform:translate(-50%,-50%);
  color:var(--gold);opacity:.17;z-index:1;pointer-events:none;animation:spin-rays 70s linear infinite}
@keyframes spin-rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:640px){.page-hero .rays{width:260px}}
@media(prefers-reduced-motion:reduce){.page-hero .rays{animation:none}}
@media(prefers-reduced-motion:reduce){.pine-run{animation:none}}

/* ===== tips index — a wall of little field-notes ===== */
.tip-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;padding-bottom:3.5rem}
.tip-card{position:relative;display:flex;flex-direction:column;background:var(--parchment);
  border:2.5px solid var(--ink);border-radius:var(--radius-stamp);padding:1.6rem 1.3rem 1.15rem;
  box-shadow:var(--shadow-ink);color:var(--ink);text-decoration:none;overflow:hidden;
  transition:transform .25s cubic-bezier(.34,1.5,.5,1),box-shadow .25s}
.tip-card::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,var(--madder),var(--clay),var(--gold),var(--teal),#7FC0B2,var(--sage),var(--madder));
  background-size:280% 100%;animation:holo-drift 7s linear infinite}
.tip-card:nth-child(3n)::before{animation-duration:9s}
.tip-card:nth-child(4n)::before{animation-duration:11s;animation-direction:reverse}
.tip-card:hover{transform:translateY(-5px) rotate(-.4deg);
  box-shadow:0 9px 0 rgba(32,38,29,.9),0 20px 40px rgba(32,38,29,.16)}
.tip-card .t-date{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.55rem}
.tip-card h3{font-family:var(--display);font-size:1.22rem;line-height:1.3;margin-bottom:.5rem}
.tip-card p{font-size:.9rem;line-height:1.55;color:color-mix(in srgb,var(--ink) 78%,var(--parchment));flex:1;margin-bottom:.9rem}
.tip-card .t-go{font-weight:700;font-size:.85rem;color:var(--madder)}
.tip-card .t-go::after{content:' →'}

/* ===== article pages ===== */
.article-hero h1{font-size:clamp(1.7rem,4.6vw,2.8rem);max-width:18em}
.tmeta{font-style:normal;font-size:.88rem;letter-spacing:.06em;opacity:.8}
.article{max-width:760px}
.article h3{font-family:var(--display);font-size:1.4rem;margin:2rem 0 .7rem}
.article h4{font-family:var(--display);font-size:1.15rem;margin:1.6rem 0 .6rem}
.article h5{font-size:1rem;margin:1.4rem 0 .5rem}
.article ul,.article ol{margin:0 0 1.2rem;padding-left:1.4rem;line-height:1.65}
.article li{margin-bottom:.5rem}
.article li::marker{color:var(--madder)}
.article blockquote{border-left:4px solid var(--gold);margin:1.5rem 0;padding:.4rem 0 .4rem 1.2rem;
  font-style:italic;color:color-mix(in srgb,var(--ink) 80%,var(--parchment))}
.article .back-link{display:inline-block;margin-top:2.2rem;font-weight:700;color:var(--madder)}
@media(prefers-reduced-motion:reduce){.tip-card::before{animation:none}}

/* language toggle — segmented pill in the topbar */
.lang-toggle{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;
  background:var(--parchment);box-shadow:0 2px 0 var(--ink)}
.lang-toggle a,.lang-toggle>span{padding:.34em .7em;font-size:.68rem;font-weight:800;letter-spacing:.12em;
  text-decoration:none;color:var(--ink);line-height:1.5}
.lang-toggle .on{background:var(--madder);color:var(--parchment)}
.lang-toggle a:hover{background:var(--gold)}

/* ---------- prev / next article flow ---------- */
.prevnext{display:flex;gap:1rem;justify-content:space-between;margin:3rem 0 .5rem;flex-wrap:wrap}
.prevnext a{flex:1;min-width:230px;display:flex;flex-direction:column;gap:.3rem;text-decoration:none;
  background:var(--card,#FBF5E4);border:2.5px solid var(--ink);border-radius:14px 18px 12px 20px;
  padding:.95rem 1.15rem;box-shadow:0 3px 0 var(--ink);transition:transform .18s cubic-bezier(.34,1.5,.5,1),box-shadow .18s}
.prevnext a:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 7px 0 var(--ink),0 16px 30px rgba(32,38,29,.18)}
.prevnext .dir{font-size:.68rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--madder)}
.prevnext .ttl{font-family:var(--display);font-variation-settings:'WONK' 1,'SOFT' 30;font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.25}
.prevnext .pn-next{text-align:right;align-items:flex-end}
.prevnext .pn-next .dir{color:var(--teal)}

/* ---------- faq categories ---------- */
.faq-nav{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:1.2rem auto 2rem;max-width:46em}
.faq-nav a{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.45em 1.1em;background:var(--parchment,#F1E7D0);
  box-shadow:0 2px 0 var(--ink);transition:all .15s}
.faq-nav a:hover{background:var(--madder);color:var(--parchment,#F1E7D0);transform:translateY(-2px)}
.faq-cat{scroll-margin-top:90px}
.faq-cat h2{display:flex;align-items:baseline;gap:.7rem;margin:2.4rem 0 .9rem;font-size:1.55rem}
.faq-cat h2 .catno{font-size:.72rem;font-weight:800;letter-spacing:.22em;color:var(--madder);font-family:var(--body)}
.faq-cat h2::after{content:'';flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 14px);opacity:.3;align-self:center}

/* All emblem placements retain a round silhouette rather than a white square. */
.page-hero img.crest,.subpostcard .seal,.brand>img{border-radius:50%;clip-path:circle(48%);object-fit:contain;aspect-ratio:1}
.subpostcard .seal{z-index:2}

img[src*="better-days-emblem-round-v1"]{clip-path:none!important;border-radius:50%;background:transparent;object-fit:contain}