@import url('https://fonts.googleapis.com/css2?family=Iansui&family=Noto+Serif+TC:wght@400;500;600;700;900&display=swap');
/* =========================================================
   site-responsive.css — shared responsive + EN typography
   injected by site-shell.js (loads after page styles)
   ========================================================= */

/* ---------- universal wrapping safety ---------- */
*{min-width:0}
img,svg,video{max-width:100%}
h1,h2,h3,h4,h5,p,li,a,b,em,small,span,div{overflow-wrap:break-word}
p,li{text-wrap:pretty}

/* =========================================================
   EN MODE — Latin text needs tighter tracking + real wrapping
   (CJK display type here uses very wide letter-spacing)
   ========================================================= */
body[data-lang="en"]{word-break:normal}
/* EN typography, done at the SOURCE: --font-song and --font-title are CJK-only faces
   (Noto Serif SC / ZCOOL XiaoWei) with no usable Latin, and --font-brush likewise.
   Redefining the variables in EN fixes every consumer at once — including the
   full-width U+2019 that opened gaps in apostrophes — while elements authored on
   --font-latin-serif / --font-hei keep exactly the face their page chose. */
body[data-lang="en"]{
  --font-song:"Cormorant Garamond","Noto Serif SC","Songti SC",serif;
  --font-title:"Cormorant Garamond","Noto Serif SC",serif;
}
/* headline weight/tracking for the display face (the family now comes from the vars) */
body[data-lang="en"] .hero__title,
body[data-lang="en"] .section__titles h2,
body[data-lang="en"] .merit__title,
body[data-lang="en"] .visit__title,
body[data-lang="en"] .lineage__title,
body[data-lang="en"] .hall__title,
body[data-lang="en"] .retreat__title,
body[data-lang="en"] .halls-plan__head h3,
body[data-lang="en"] .dharma__lunar,
body[data-lang="en"] .abbot__name,
body[data-lang="en"] .sangha-tier__name,
body[data-lang="en"] .visit__info-top h3,
body[data-lang="en"] .origin__verse-mark,
body[data-lang="en"] [class*="__verse-mark"],
body[data-lang="en"] .origin__mark,
body[data-lang="en"] .title__cn,
body[data-lang="en"] .mast__cn,
body[data-lang="en"] [class*="__titles"] h2{
  font-weight:600;letter-spacing:-.005em;line-height:1.06;
}
body[data-lang="en"] .origin__mark{font-size:clamp(38px,4.4vw,64px);line-height:1.02;word-break:normal}
body[data-lang="en"] .hero__title{font-weight:600;line-height:.98}
/* single long words must never split: cap the display size so the longest word
   fits its column (hero__t sits in a ~620px grid column, not the full viewport) */
body[data-lang="en"] .hero__t,
body[data-lang="en"] .hero__title,
body[data-lang="en"] .mast__cn,
body[data-lang="en"] .subhead__title h1,
body[data-lang="en"] .feat__t,
body[data-lang="en"] .section__titles h2{word-break:keep-all;overflow-wrap:normal;hyphens:none}
body[data-lang="en"] .hero__t{font-size:clamp(54px,8vw,150px);line-height:1.02;letter-spacing:0}
/* .hero__title sits in a ~343px grid column (half of .hero__grid), so it needs a
   smaller measure than .hero__t — at 5.02px of width per 1px of size, the longest
   single word must stay under ~68px here */
body[data-lang="en"] .hero__title{font-size:clamp(46px,6.8vw,104px);line-height:1.02;letter-spacing:0}
/* masthead sits in a ~350px column — size so the longest word fits one line */
body[data-lang="en"] .mast__cn{font-size:clamp(40px,4.4vw,62px);line-height:1.08;letter-spacing:.01em}
/* paired CJK title + Latin gloss: translating the title makes the gloss a stutter */
body[data-lang="en"] .title__en,body[data-lang="en"] .cat__en,body[data-lang="en"] .mast__en,
body[data-lang="en"] .hero__sub,body[data-lang="en"] .post-rel__c-sub,body[data-lang="en"] .pull em,
body[data-lang="en"] .role-card .en,body[data-lang="en"] .day__plan-en,
body[data-lang="en"] .player__art-disc > span:not([class]){font-family:"Cormorant Garamond",serif;font-size:26px;line-height:1.15;letter-spacing:.02em;text-align:center}
body[data-lang="en"] .merit__item-en,
body[data-lang="en"] .hero__vtext em,body[data-lang="en"] .hero__en,
body[data-lang="en"] .preamble__en,body[data-lang="en"] .lamps__en,
body[data-lang="en"] .preamble__seal em,body[data-lang="en"] .wall__sep em,
body[data-lang="en"] .hero__verse em,
body[data-lang="en"] .day__what em,body[data-lang="en"] .day__where b,
body[data-lang="en"] .pack__col li em,body[data-lang="en"] .rule__pull small,
body[data-lang="en"] .types__en,body[data-lang="en"] .lodge__room em,
body[data-lang="en"] .rule__cell em,body[data-lang="en"] .pack__col-h em,
body[data-lang="en"] .flow__step em{display:none}
/* translated brush verse: set in Latin serif, not the CJK brush script */
body[data-lang="en"] .rule__pull{font-family:"Cormorant Garamond",serif;font-size:52px;line-height:1.16}
/* pseudo-element section labels can't take data-en — translate via content */
body[data-lang="en"] .verse::before{content:"A DAILY VERSE"}
body[data-lang="en"] .visit__title small,body[data-lang="en"] .section__titles h2 small{font-weight:400}
body[data-lang="en"] h1,body[data-lang="en"] h2,body[data-lang="en"] h3,
body[data-lang="en"] h4,body[data-lang="en"] h5{letter-spacing:.01em;text-wrap:balance;line-height:1.18}
/* body tracking only — the family comes from the redefined vars above */
body[data-lang="en"] p,body[data-lang="en"] li,body[data-lang="en"] em,
body[data-lang="en"] b,body[data-lang="en"] small,body[data-lang="en"] span,
body[data-lang="en"] dt,body[data-lang="en"] dd,body[data-lang="en"] td,body[data-lang="en"] th,
body[data-lang="en"] label,body[data-lang="en"] button,body[data-lang="en"] a{letter-spacing:.01em}
/* eyebrows / kickers keep some tracking but far less than CJK */
body[data-lang="en"] .section__num,body[data-lang="en"] [class*="__kick"],
body[data-lang="en"] [class*="__eyebrow"],body[data-lang="en"] [class*="-kicker"],
body[data-lang="en"] .nav__link,body[data-lang="en"] .nav__menu-h,
body[data-lang="en"] [class*="__tag"],body[data-lang="en"] [class*="__stamp"]{letter-spacing:.12em}
/* long English words in narrow columns */
body[data-lang="en"] .foot__col li,body[data-lang="en"] .foot__col a,
body[data-lang="en"] [class*="__item-t"],body[data-lang="en"] [class*="__item-m"],
body[data-lang="en"] [class*="-card__title"],body[data-lang="en"] [class*="__title"]{hyphens:auto}
/* CJK-only devices that must not run in EN */
/* plan-SVG labels: presentation attrs are sized for 3–4 CJK glyphs; Latin needs less */
body[data-lang="en"] .halls-plan__map svg text:not([fill="#faf6ec"]){font-size:8px !important;letter-spacing:0 !important}
body[data-lang="en"] .halls-plan__map svg text[fill="#faf6ec"]{font-size:11px !important;letter-spacing:0 !important}
body[data-lang="en"] .nav__menu a em,body[data-lang="en"] .nav__mobile-sub em{display:none}
body[data-lang="en"] .hero__vtext{writing-mode:horizontal-tb;height:auto;letter-spacing:.18em;font-size:20px}
/* full-viewport heroes with overflow:hidden clip the taller EN content — let them grow */
body[data-lang="en"] .hero{height:auto !important;min-height:100vh}
body[data-lang="en"] .hero__content{height:auto !important}
/* certificate watermark: Latin set in a CJK brush face */
body[data-lang="en"] .cert__sample-mark{font-family:"Cormorant Garamond",serif}
/* translated text consuming --font-brush needs a real Latin face; scoped to the
   translated nodes so untranslated decorative brush glyphs keep Ma Shan Zheng */
/* SAFEGUARD \u2014 absolutely-positioned nowrap decorative text (watermarks) is sized so a
   few CJK glyphs fit the card; English runs 1.3\u20133\u00d7 wider and nothing clips it, so it
   bleeds onto neighbours. Fit it to the card instead of re-tuning each string. */
body[data-lang="en"] [class*="watermark"][data-en]{max-width:100% !important;white-space:normal !important;overflow:hidden;font-size:30px !important;line-height:1.1 !important;letter-spacing:.02em !important}
body[data-lang="en"] .cert{overflow:hidden}

/* SAFEGUARD \u2014 seals/stamps are fixed-size squares laid out one cell per CJK glyph
   (grid-template-columns:1fr 1fr) or vertical writing. Any seal that IS translated must
   collapse to a single centred column with type that fits, or the words overlap. */
body[data-lang="en"] [class*="__seal"][data-en],
body[data-lang="en"] [class*="-seal"][data-en],
body[data-lang="en"] [class*="__stamp"][data-en],
body[data-lang="en"] [class*="cornerseal"][data-en]{grid-template-columns:1fr !important;writing-mode:horizontal-tb !important;text-orientation:mixed !important;font-size:9px !important;line-height:1.2 !important;letter-spacing:.02em !important;text-align:center;padding:2px;overflow:hidden}

/* the 繁简 tweaks panel only applies to Chinese \u2014 hide it in EN */
body[data-lang="en"] #tweaks{display:none !important}
body[data-lang="en"] .hero__vtext [data-en],
body[data-lang="en"] .hero__vtext[data-en],
body[data-lang="en"] .origin__mark [data-en],
body[data-lang="en"] .origin__verse-mark[data-en],
body[data-lang="en"] .hero__corner small[data-en],
body[data-lang="en"] .preamble__seal [data-en],
body[data-lang="en"] .preamble__mark[data-en],
body[data-lang="en"] .wall__sep [data-en],
body[data-lang="en"] .cert__sample-top-l[data-en],
body[data-lang="en"] .cert__sample-sig [data-en],
body[data-lang="en"] .methods__receipt-i[data-en],
body[data-lang="en"] .hero__mark[data-en],
body[data-lang="en"] .intro-card__glyph[data-en],
body[data-lang="en"] .discord__title[data-en] em{font-family:"Cormorant Garamond",serif}
/* nav dropdown labels: the shared shell sets font-family literally, so the EN var
   override cannot reach them */
body[data-lang="en"] .nav__menu a b,
body[data-lang="en"] .nav__menu-h,
body[data-lang="en"] .nav__mobile-a,
body[data-lang="en"] .nav__mobile-h,
body[data-lang="en"] .nav__mobile-sub{font-family:"Cormorant Garamond","Noto Serif SC",serif}
/* vertical CJK pull-quote: upright orientation puts one Latin letter per line */
body[data-lang="en"] .intro__pull,
body[data-lang="en"] .ritual__pull{writing-mode:horizontal-tb !important;text-orientation:mixed !important;font-family:"Cormorant Garamond",serif;font-size:40px;line-height:1.14;letter-spacing:.01em;height:auto !important;border-left:none !important;border-top:1px solid var(--hairline);padding-left:0 !important;padding-top:24px}
/* sutra scroll verse: vertical CJK column — Latin must run horizontally or it stacks into the seal */
body[data-lang="en"] .scroll__verse{writing-mode:horizontal-tb !important;text-orientation:mixed !important;font-size:15px;line-height:1.9;letter-spacing:.02em;height:auto;max-height:none}
/* folio card title: vertical 7-glyph sutra name in CN; horizontal in EN or the card blows out */
body[data-lang="en"] .hero__sutra-title h1{writing-mode:horizontal-tb !important;text-orientation:mixed !important;font-size:clamp(30px,3vw,44px);line-height:1.12;letter-spacing:.01em}
/* brush calligraphy panels: vertical CJK writing must run horizontally in EN,
   or Latin letters stack one per line and blow out the frame's aspect ratio */
body[data-lang="en"] .notes__feat-brush{writing-mode:horizontal-tb !important;text-orientation:mixed !important;font-family:"Cormorant Garamond",serif;font-size:34px;line-height:1.25;letter-spacing:.01em;align-self:flex-end;text-align:right;margin-right:0 !important}
body[data-lang="en"] .notes__feat-seal span[data-en]{writing-mode:horizontal-tb !important;font-size:10px;letter-spacing:.02em;line-height:1.1;text-align:center}

/* seals are sized for 2 CJK glyphs in vertical writing — Latin must run horizontally and fit the square.
   Scoped to translated spans so the decorative 4-glyph seals (home/about) are untouched. */
body[data-lang="en"] .hero__seal span[data-en]{writing-mode:horizontal-tb !important;letter-spacing:.04em;font-size:12px;line-height:1.15;text-align:center}
body[data-lang="en"] [class*="__vquote"]{writing-mode:horizontal-tb;height:auto;font-size:clamp(22px,2.4vw,30px);letter-spacing:.05em;line-height:1.25}
/* elements sized for 4 CJK glyphs must grow for words */
body[data-lang="en"] [class*="__item-t"],body[data-lang="en"] [class*="__item-m"],
body[data-lang="en"] .event__title,body[data-lang="en"] [class*="-card__title"],
body[data-lang="en"] [class*="__stamp"],body[data-lang="en"] .visit__card h4,
body[data-lang="en"] [class*="__btn"],body[data-lang="en"] [class*="__cta"],
body[data-lang="en"] .btn-pill{height:auto;min-height:0;white-space:normal}
/* .hero__scroll is position:absolute (bottom:30px) so the hero reserves no space for
   it; in EN the stamps grow taller (strings wrap) and reach into that band. Reserve
   the indicator's height as hero padding rather than nudging its offset. */
body[data-lang="en"] .hero{padding-bottom:120px}
body[data-lang="en"] .hero__title{letter-spacing:-.01em;line-height:1.02}
body[data-lang="en"] .merit__title,body[data-lang="en"] .visit__title{letter-spacing:.02em}
/* nav in EN is wider — allow it to breathe, then wrap to burger sooner */
body[data-lang="en"] .nav__link{font-size:12px}

/* =========================================================
   繁体专用字体 · Iansui (芫豆) + Noto Serif TC — both open-license
   (SIL OFL), proper Traditional Chinese glyph forms.
   html[lang="zh-Hant"] is set by site-shell.js's 简/繁 toggle —
   scope the face there so it never touches the simplified pages.
   ========================================================= */
html[lang="zh-Hant"] body{
  font-family:"Noto Serif TC",var(--font-song),serif;
}
html[lang="zh-Hant"] .hero__title,
html[lang="zh-Hant"] .hero__t,
html[lang="zh-Hant"] [class*="__title"],
html[lang="zh-Hant"] [class*="__brush"],
html[lang="zh-Hant"] [class*="__seal"],
html[lang="zh-Hant"] h1,html[lang="zh-Hant"] h2,html[lang="zh-Hant"] h3,
html[lang="zh-Hant"] h4,html[lang="zh-Hant"] h5{
  font-family:"Iansui","Noto Serif TC",var(--font-title),serif !important;
}
html[lang="zh-Hant"] p,html[lang="zh-Hant"] li,html[lang="zh-Hant"] span,
html[lang="zh-Hant"] a,html[lang="zh-Hant"] b,html[lang="zh-Hant"] em{
  font-family:"Noto Serif TC",var(--font-song),serif;
}


.nav__burger{display:none;position:relative;z-index:2;width:42px;height:42px;padding:0;border:1px solid rgba(120,105,80,.35);background:rgba(248,243,231,.9);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:2px}
.nav__burger span{display:block;width:18px;height:1.5px;background:#3d0f13;transition:transform .28s,opacity .2s}
.nav__burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav__mobile{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);z-index:200;background:#f8f3e7;border-left:1px solid #c8bea8;box-shadow:-18px 0 48px rgba(60,40,20,.22);transform:translateX(102%);transition:transform .34s cubic-bezier(.4,0,.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch;display:none}
.nav__mobile.is-open{transform:translateX(0)}
.nav__mobile-in{padding:88px 26px 44px;display:flex;flex-direction:column;gap:2px}
.nav__mobile-h{font-family:"ZCOOL XiaoWei","Noto Serif SC",serif;font-size:19px;color:#3d0f13;text-decoration:none;letter-spacing:.14em;padding:15px 4px 9px;border-bottom:1px solid #d9d0bb;margin-top:14px}
.nav__mobile-sub{display:flex;align-items:baseline;gap:12px;font-family:"ZCOOL XiaoWei","Noto Serif SC",serif;font-size:15px;color:#5a5347;text-decoration:none;letter-spacing:.1em;padding:11px 4px 11px 16px;min-height:44px;box-sizing:border-box}
.nav__mobile-sub i{font-style:normal;font-family:"Cormorant Garamond",serif;color:#a6823a;font-size:12px;min-width:16px}
.nav__mobile-sub em{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:11px;color:#6f6758;margin-left:auto}
.nav__mobile-sub b{font-weight:400}
.nav__mobile-a{display:flex;align-items:center;gap:9px;font-family:"ZCOOL XiaoWei","Noto Serif SC",serif;font-size:17px;color:#3d0f13;text-decoration:none;letter-spacing:.12em;padding:14px 4px;min-height:48px;box-sizing:border-box;border-bottom:1px solid #e6dfcc}
.nav__mobile-mask{position:fixed;inset:0;z-index:199;background:rgba(26,20,16,.42);opacity:0;pointer-events:none;transition:opacity .3s;display:none}
.nav__mobile-mask.is-open{opacity:1;pointer-events:auto}
.nav a:focus-visible,.nav button:focus-visible,.nav__mobile a:focus-visible{outline:2px solid var(--vermilion,#c1292e);outline-offset:4px}

/* =========================================================
   ≤1180 — tighten the wide desktop chrome
   ========================================================= */
@media (max-width:1180px){
  .section__wrap,.visit__wrap,.merit__wrap,.foot__wrap,[class*="__wrap"]{padding-left:32px;padding-right:32px}
  .nav{padding-left:22px;padding-right:22px}
  .nav__link{font-size:12px}
}

/* =========================================================
   ≤1024 — tablet: 2-up grids, calmer hero
   ========================================================= */
@media (max-width:1024px){
  .events{grid-template-columns:repeat(2,1fr)}
  .event--hero{grid-column:1 / -1}
  .media__grid,.visit__triple,[class*="__grid"]{grid-template-columns:repeat(2,1fr)}
  .retreat,.dharma__grid,.merit__wrap,.visit__grid{grid-template-columns:1fr}
  .retreat__visual{min-height:320px;max-height:420px}
  .hero__side{display:none}
  .hero__title{font-size:clamp(64px,11vw,120px)}
  .foot__main{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}

/* =========================================================
   ≤1100 — sub-page header: the auto/1fr/auto grid squeezes the
   title column to ~194px while the h1 is still ~74px, which forces
   a mid-word break. Stack it well before that point.
   ========================================================= */
@media (max-width:1100px){
  .subhead__wrap{grid-template-columns:1fr !important;gap:20px !important;align-items:start !important}
  .subhead__crumb{padding-top:0}
  .subhead__meta{text-align:left !important;padding-bottom:0 !important;align-self:start !important}
}

/* =========================================================
   ≤1100 — nav collapses before page-level rules can hide its links
   ========================================================= */
@media (max-width:1100px){
  .nav{padding-left:18px;padding-right:18px;grid-template-columns:1fr auto auto}
  .nav__left{display:none !important}
  /* the language toggle stays in the top bar at every width. Keep .nav__right a flex
     item (NOT display:contents \u2014 that would promote the toggle into the nav grid and
     strand the burger mid-bar) and hide only its non-toggle children. */
  .nav__right{display:flex !important;justify-content:flex-end;gap:0}
  .nav__right > *{display:none !important}
  .nav__right > #lang-toggle{display:inline-flex !important;align-items:center;padding:5px 11px;border:1px solid rgba(120,105,80,.35);font-size:12px;letter-spacing:.14em;white-space:nowrap}
  .nav__mobile .js-lang-toggle{display:none !important}
  .nav__burger{display:flex}
  .nav__mobile,.nav__mobile-mask{display:block}
  .nav__logo{position:static;left:auto;transform:none;margin-right:auto}
}

/* =========================================================
   ≤768 — mobile
   ========================================================= */
@media (max-width:768px){
  .nav{padding:0 16px;height:62px}
  .nav__logo b{font-size:16px;letter-spacing:.16em}
  .nav__logo small{font-size:8.5px;letter-spacing:.14em}

  .section__wrap,.visit__wrap,.merit__wrap,.foot__wrap,[class*="__wrap"]{padding-left:18px;padding-right:18px}
  .section,[class*="section--"]{padding-top:52px;padding-bottom:52px}

  /* hero */
  .hero{min-height:0 !important;padding:96px 0 56px}
  .hero__content{padding:0 18px}
  .hero__title{font-size:clamp(46px,15vw,74px);line-height:1.04}
  .hero__sub{flex-direction:column;gap:18px}
  .hero__coord{text-align:left}
  .hero__stamps{flex-wrap:wrap;gap:8px}
  .hero__scroll{display:none}

  /* section heads stack */
  .section__head,[class*="__head"]{flex-direction:column;align-items:flex-start;gap:14px}
  .section__more,[class*="__more"]{align-self:flex-start}
  .section__titles h2,[class*="__titles"] h2{font-size:clamp(28px,8vw,40px)}

  /* everything to one column */
  .events,.media__grid,.visit__triple,.merit__list,.foot__main,
  [class*="__grid"],[class*="__list"],[class*="__row"]{grid-template-columns:1fr !important}
  .event--hero{grid-column:auto}

  .dharma__grid{gap:22px}
  .retreat__visual{min-height:240px}
  .visit__map{min-height:280px}

  /* footer */
  .foot__main{gap:34px}
  .foot__bot{flex-direction:column;gap:18px;text-align:center}
  .foot__bot-l,.foot__bot-r{font-size:10.5px}

  /* floating chrome out of thumb range */
  .minplayer{left:12px;right:12px;bottom:12px;width:auto}
  #tweaks{bottom:12px;right:12px;left:12px;padding:11px 13px;gap:9px;font-size:11px}
  #tweaks .lbl{display:none}

  /* touch targets */
  a,button,.btn-pill,[class*="__cta"],[class*="__btn"]{min-height:44px}
  .nav__mobile-sub,.nav__mobile-a{min-height:46px}

  /* tables scroll instead of squashing */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* =========================================================
   ≤480 — small phones
   ========================================================= */
@media (max-width:480px){
  .section__wrap,.visit__wrap,.merit__wrap,.foot__wrap,[class*="__wrap"]{padding-left:14px;padding-right:14px}
  .hero__title{font-size:clamp(38px,13vw,56px)}
  body[data-lang="en"] .hero__title{font-size:clamp(32px,11vw,46px)}
  .section__titles h2,[class*="__titles"] h2{font-size:clamp(24px,7.5vw,32px)}
  .hero__stamp{font-size:10px;padding:5px 9px}
  .foot__brand p{font-size:12.5px}
}

/* The Blazor port consolidates the original page styles into nhpt.css. Restore
   the home-page declarations that its earlier compact mobile block would
   otherwise override, so the shared prototype breakpoints remain authoritative. */
@media (max-width:768px){
  .retreat__visual{aspect-ratio:5/6}
}
@media (max-width:480px){
  .hero__title-cn{letter-spacing:.4em}
  .hero__stamps{display:flex}
  .hero__coord{display:block}
  .dharma__text{font-size:30px}
  .section__num{font-size:72px}
  .retreat__body{padding:72px 56px 56px}
  .retreat__title{font-size:64px}
  .retreat__item{grid-template-columns:80px 1fr auto}
  .retreat__item-m{display:block}
  .merit__title{font-size:88px}
  .visit__title{font-size:96px}
  .visit__info{padding:48px}
  .visit__map-pin::after{display:block}
}

/* =========================================================
   print — never show mobile chrome
   ========================================================= */
@media print{
  .nav__burger,.nav__mobile,.nav__mobile-mask{display:none !important}
  .nav__left,.nav__right{display:flex !important}
}
.skip-link{position:fixed;left:16px;top:12px;z-index:9999;padding:10px 14px;background:#3d0f13;color:#fffaf0;transform:translateY(-160%);transition:transform .15s}.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #c1292e;outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}