/* 말랑 shared site styles — rules copied from home.html (same selectors, values, breakpoints). Hero rules stay inline in index.html.
   Normalized: .faq summary::after font-weight 500 -> 600 (only 400/600/700 are loaded; 500 already rendered as 600).
   Normalized: .daily-goal / .cats dt had NO font-weight, so they computed to 400 while using --display. Read the
   whole stack before touching this: --display is "Fredoka","Jua","Apple SD Gothic Neo". Fredoka has no Hangul, so
   ONE element draws from two files — digits/Latin from Fredoka (served 600;700), Hangul from Jua (served 400 ONLY).
   The two scripts therefore answered the old 400 differently:
     digits — no Fredoka 400 exists, so matching stayed in the family and drew Fredoka-SemiBold. The CSS asked for
              a weight that is not served and nothing could show it (the weights checker only reads declarations).
     Hangul — Jua 400 exists, so it drew Jua-Regular, clean.
   At 600 the digits are unchanged (same SemiBold face) and the Hangul now gets Chrome's SYNTHETIC bold, because
   Jua has no 600 face. So this edit is NOT a no-op, and must not be described as one: measured on daily.html at
   390, the goal line differs by 53,507 of 997,272 pixels (5.4%), mean luminance 0.2387 → 0.2629.
   It is deliberate. 600 over Hangul is already the house treatment for every other display element — tokens.css
   h1,h2,h3, .mini b, daily.html .day-main b, game.css .facts dd / .more a b all ask 600 through --display — so
   these two were the outliers, not the new value. Cost: none. A cold index.html at 390 downloads 46 font files
   before and after; synthetic bold adds no request.
   Measured, not reasoned: _dev/audit-fonts.mjs (CDP CSS.getPlatformFontsForNode) — _dev/perf/fonts-before.json
   shows "Fredoka|400 … actually rasterised with Fredoka Light [Fredoka-SemiBold]", fonts-after.json shows none. */

/* ---------- header ---------- */
html{scroll-padding-top:72px} /* sticky .hdr is 64px + 1px border: focus/anchor scrolling stops below it (WCAG 2.4.11) */
.hdr{position:sticky;top:0;z-index:20;background:var(--bg-alt);border-bottom:1px solid var(--line);transition:transform var(--d-1) ease}
/* accidental-click guard, viewport side. .ad's margins (below) hold static neighbours 160px away in PAGE
   coordinates, but .hdr follows the scroll: without this, a reader can park an ad directly under the nav and the
   real on-screen gap is ~15px. site.js adds .ad-near while any ad sits in the band under the header; the header
   then tucks away and stops being tappable until the ad leaves that band. Keyboard focus inside the header keeps
   it in place. Measured in viewport coordinates by _dev/check-ads.mjs.
   Leaving is instant (transition:none): an animated exit keeps the header visible and beside the ad for the whole
   slide, which is exactly the window an accidental tap lands in. Coming back still animates (the rule above). */
.hdr.ad-near:not(:focus-within){transform:translateY(-100%);visibility:hidden;transition:none}
.hdr-in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:32px;height:32px;flex:none}
.logo-word{font-family:"Jua",var(--display);font-size:25px;line-height:1;letter-spacing:0}
.logo-tag{font:700 11px/1 var(--body);color:var(--text-3);border:1px solid var(--line-strong);border-radius:var(--r-xs);padding:3px 5px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-weight:700;font-size:15px;color:var(--text-2);padding:8px 14px;border-radius:var(--r-sm);transition:color var(--d-1),background-color var(--d-1)}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a[aria-current]{color:var(--text)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;border-radius:var(--r-sm);cursor:pointer;place-items:center}
.menu-btn span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;box-shadow:0 -6px 0 var(--text),0 6px 0 var(--text)}
@media (max-width:760px){
  .menu-btn{display:grid}
  .nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg-alt);border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px;box-shadow:var(--e2);display:none}
  .nav.open{display:flex}
  /* open menu: a transparent full-screen catcher (below the header's own content) so a tap outside the panel lands on
     the document — not inside a cross-origin ad iframe that the site.js outside-tap guard can never see */
  .hdr.menu-open::after{content:"";position:fixed;inset:0;z-index:-1}
  .nav a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:16px}
  .nav a:last-child{border-bottom:0}
  .nav a:hover{background:transparent}
}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r-sm);font:700 16px/1 var(--body);border:0;cursor:pointer;transition:background-color var(--d-1),transform var(--d-2) var(--ease-out)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:#FF6D5A}
.btn-primary:active{background:var(--accent-press);transform:scale(.98)}
.link-arrow{font-weight:700;color:var(--text);display:inline-flex;gap:6px;align-items:center;padding-block:10px}
.link-arrow::after{content:"→";transition:transform var(--d-2) var(--ease-out)}
.link-arrow:hover{color:var(--accent)}
.link-arrow:hover::after{transform:translateX(3px)}

/* ---------- sections ---------- */
.sec{padding-block:72px}
.sec-alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,2.6vw,34px)}
.sec-head .sub{margin-top:6px;color:var(--text-2);font-size:15px}
@media (max-width:760px){.sec{padding-block:48px}}

/* chips */
.chips-scroll{margin-top:24px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
.chips-scroll::-webkit-scrollbar{display:none}
.chips{display:flex;gap:8px;width:max-content;padding-block:2px}
.chip{min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font:700 14px/1 var(--body);color:var(--text-2);cursor:pointer;white-space:nowrap;transition:background-color var(--d-1),color var(--d-1),border-color var(--d-1)}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip .n{font-family:"Fredoka",sans-serif;font-weight:600;margin-left:6px;opacity:.7}

/* game grid */
.grid{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:transform var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-out),border-color var(--d-2)}
.card:hover{transform:translateY(-3px);box-shadow:var(--e1);border-color:rgba(255,90,69,.4)}
.card:active{transform:scale(.98)}
.card[data-soon]{cursor:default}
.card[data-soon]:hover,.card[data-soon]:active{transform:none;box-shadow:none;border-color:var(--line)}
.card[data-soon] .thumb img,.card[data-soon]:hover .thumb img{transform:none;opacity:.45;filter:grayscale(.6)}
.card[data-soon] .thumb::after{content:"준비 중";position:absolute;top:10px;right:10px;font:700 12px/1 var(--body);padding:6px 8px;border-radius:var(--r-xs);background:rgba(14,19,22,.85);color:var(--text-2)}
.thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--stage,#2a3438)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform 320ms var(--ease-out)}
.card:hover .thumb img{transform:scale(1.03)}
.tag{position:absolute;top:10px;left:10px;font:700 12px/1 var(--body);padding:6px 8px;border-radius:var(--r-xs);background:rgba(14,19,22,.85);color:var(--text)}
.badge{position:absolute;top:10px;right:10px;font:700 12px/1 var(--body);padding:6px 8px;border-radius:var(--r-xs);background:var(--accent);color:var(--on-accent)}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:18px;line-height:1.3}
.card p{font-size:14px;line-height:1.6;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{margin-top:auto;padding-top:6px;display:flex;gap:12px;font:700 13px/1.4 var(--body);color:var(--text-3)}
.meta span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--text-3);vertical-align:middle;margin-right:12px}
.grid-empty{margin-top:24px;color:var(--text-3)}
@media (max-width:640px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid .card.feature{grid-column:span 2}
  .card-body{padding:12px 12px 14px}
  .card h3{font-size:16px}
  .card p{font-size:13px}
  .meta{gap:8px;font-size:12px}
  .meta span+span::before{margin-right:8px}
  .card:not(.feature) .meta span:nth-child(2){display:none}
  .tag{top:8px;left:8px;font-size:11px;padding:5px 6px}
}
.all-link{margin-top:24px;display:flex;justify-content:center}

/* ad slots — reserved space in the markup, filled by the ad script once ads are approved.
   Invisible until then: the slot takes NO space at all unless <html> carries class ads-live. So a pre-approval
   build ships no empty boxes and nothing to undo later.
   WHO STAMPS ads-live: nobody yet, outside dev tooling. It is meant to be the deploy build, reading the
   site.config.json ads.live flag — _dev/build-deploy.mjs stamps data-ads="<network>" instead, and no rule in this
   file (or any other stylesheet) matches [data-ads], so today a fully configured build ships every slot
   display:none. That gap is the S4 hand-off in _dev/HANDOFF-S4-ads-live.md; _dev/check-ad-spacing.mjs FAILs on it
   until the build stamps the class. (_dev/chrome.mjs stamps ads-live for measurement runs, so the ad-geometry
   checks still see the live layout; MALLANG_ADS_LIVE=0 observes the pre-approval state.)
   --ad-gap is the AdSense accidental-click guard: every .ad keeps >=150px of clear space from the nearest
   tappable element (card, button, link) at every viewport. 160px = 150px rule + 10px spare so small
   spacing edits cannot silently break it. Measured by _dev/check-ads.mjs and _dev/check-ad-spacing.mjs. */
.ad{--ad-gap:160px;margin-block:var(--ad-gap)}
html:not(.ads-live) .ad{display:none}
/* the open mobile panel is absolutely positioned OVER the content, so page margins cannot separate it from an ad:
   hide the ads while it is open. A mis-tap at the panel edge then cannot land in an ad iframe, which the
   .hdr.menu-open catcher alone cannot guarantee for cross-origin frames. site.js sets html.nav-open. */
html.nav-open .ad{visibility:hidden}
/* the "광고" label rides with the slot: it shows exactly when the slot does (html.ads-live) */
.ad-label{display:inline-block;font:700 11px/1 var(--body);color:var(--text-3);letter-spacing:.02em;margin-bottom:6px}
/* reserved height per slot type, so a loading ad never pushes the page (CLS). No border and no text: an empty
   slot must look like nothing at all, never like a card or a button. */
.ad-box{display:grid;place-items:center;text-align:center;min-height:90px;border-radius:var(--r-xs);color:var(--text-3);font-size:13px;line-height:1.5;padding:12px}
@media (max-width:760px){.ad-box{min-height:100px}}
/* in-article slots are the tall ones; the horizontal slots keep the 90/100px above */
.ad-in{margin-block:var(--ad-gap)}
.ad-in .ad-box,
.ad[data-slot="home-b"] .ad-box,
.ad[data-slot="list-b"] .ad-box,
.ad[data-slot="game-in"] .ad-box,
.ad[data-slot="doc-in"] .ad-box,
.ad[data-slot="daily-in"] .ad-box{min-height:250px}

/* daily */
.daily{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.daily .thumb{aspect-ratio:auto;min-height:100%}
.daily .thumb img{position:absolute;inset:0}
.daily-body{padding:32px;display:flex;flex-direction:column;gap:16px}
.daily-date{font:700 14px/1 var(--body);color:var(--text-3)}
.daily h2{font-size:clamp(26px,2.6vw,34px)}
/* font-weight is explicit on purpose: --display leads with Fredoka, which is served at 600/700 only (see header) */
.daily-goal{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.35}
.daily-goal em{font-style:normal;color:var(--accent)}
.rules{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;color:var(--text-2)}
.rules li{display:grid;grid-template-columns:20px 1fr;gap:6px}
.rules li::before{content:attr(data-n);font:600 14px/1.75 "Fredoka",sans-serif;color:var(--text-3)}
.daily-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.count{display:flex;flex-direction:column;gap:2px}
.count small{font-size:13px;color:var(--text-3);font-weight:700}
.count b{font:700 28px/1 "Fredoka",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.board{margin:0;padding:0;list-style:none;font-size:14px}
.board-cap{font-size:13px;color:var(--text-3);font-weight:700;margin-bottom:6px}
.board li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;padding-block:6px;border-bottom:1px solid var(--line)}
.board li:last-child{border-bottom:0}
.board .rk{font:700 15px/1.6 "Fredoka",sans-serif;color:var(--text-3)}
.board li:first-child .rk{color:var(--accent)}
.board .sc{font:600 15px/1.6 "Fredoka",sans-serif;font-variant-numeric:tabular-nums}
@media (max-width:900px){.daily{grid-template-columns:minmax(0,1fr)}.daily .thumb{aspect-ratio:16/10;min-height:0}.daily-body{padding:24px 20px}}

/* recent strip */
.strip-scroll{margin-top:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.strip{display:flex;gap:12px;width:max-content;margin:0;padding:0;list-style:none}
.strip li{width:216px;scroll-snap-align:start}
.mini{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;padding:8px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);transition:border-color var(--d-1),background-color var(--d-1)}
.mini:hover{border-color:var(--line-strong);background:var(--surface-2)}
.mini .thumb{border-radius:4px}
.mini b{display:block;font:600 15px/1.3 var(--display)}
.mini span{display:block;font-size:13px;color:var(--text-3);line-height:1.5;margin-top:2px}
.mini .rec{color:var(--text-2);font-weight:700}
.strip-note{font-size:14px;color:var(--text-3)}
@media (max-width:760px){.strip-scroll{margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}}
.empty-msg{margin-top:20px;font-size:15px;color:var(--text-2)}
.empty-msg:focus{outline:none}
.example-cap{margin-top:20px;font-size:13px;font-weight:700;color:var(--text-3)}
.strip-note button{background:none;border:0;padding:0;color:var(--text-2);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* prose */
.prose{max-width:var(--measure);margin:0 auto}
.prose h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:20px}
.prose > :where(p,dl,ul,ol,div,aside,figure) + h2{margin-top:64px}
@media (max-width:760px){.prose > :where(p,dl,ul,ol,div,aside,figure) + h2{margin-top:48px}}
.prose h3{font-size:22px;margin:48px 0 14px}
/* a section h2 that follows prose (not the article's first heading) gets more room above than the h3s under it */
.sec .prose > h2:not(:first-child){margin-top:64px}
.prose [id]{scroll-margin-top:88px}
.prose p{color:var(--text-2);margin-top:16px}
.prose p:first-of-type{margin-top:0}
.prose a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;transition:text-decoration-color var(--d-1)}
.prose a:hover{text-decoration-color:var(--accent)}
.cats{margin:18px 0 0;display:grid;grid-template-columns:8.5em 1fr;border-top:1px solid var(--line)}
.cats dt,.cats dd{padding-block:14px;border-bottom:1px solid var(--line);margin:0}
.cats dt{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.6} /* explicit: see header */
.cats dd{color:var(--text-2);font-size:15px}
@media (max-width:560px){.cats{grid-template-columns:1fr}.cats dt{border-bottom:0;padding-bottom:0}.cats dd{padding-top:4px}}
.faq{margin-top:18px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:600 24px/1 "Fredoka",sans-serif;color:var(--text-3);transition:transform var(--d-2) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--text-2);font-size:15px}
.byline{margin-top:40px;font-size:14px;color:var(--text-3)}

/* footer */
.ftr{background:var(--bg-alt);border-top:1px solid var(--line);padding-block:48px 32px}
.ftr-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.ftr p{font-size:14px;color:var(--text-3);margin-top:12px;max-width:26em}
.ftr h4{margin:0 0 10px;font:700 13px/1 var(--body);color:var(--text-3)}
.ftr ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.ftr li a{font-size:14px;color:var(--text-2);padding-block:4px;display:inline-block}
.ftr li a:hover{color:var(--text)}
.ftr-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
@media (max-width:760px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-grid>div:first-child{grid-column:span 2}}


/* ---------- shared additions (built from existing tokens only) ---------- */
.page-head{padding-block:56px 32px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(34px,4.2vw,52px);line-height:1.1}
.page-head .lead,.page-head .prose .lead{margin-top:14px;font-size:18px;line-height:1.7;color:var(--text-2);max-width:40em}
@media (max-width:760px){.page-head{padding-block:40px 24px}.page-head .prose .lead{font-size:16px}}
.table-wrap{margin-top:18px;overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:15px;min-width:480px}
.table th,.table td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.table th{font:700 13px/1.4 var(--body);color:var(--text-3)}
.table td{color:var(--text-2)}
.status-good{color:var(--good)}
.card-best{font:700 13px/1.4 var(--body);color:var(--good)}
@media (max-width:640px){.card-best{font-size:12px}}
/* games list: .chips-scroll scrolls sideways, which also clips vertically; give the focus ring (3px offset + 2px) room.
   padding +4px each side, cancelled by the margins, so the chips and the grid stay exactly where they were */
#list .chips{padding-block:6px}
#list .chips-scroll{margin-block:20px -4px}
.page-head+#list{padding-top:32px}
@media (max-width:760px){.page-head+#list{padding-top:24px}.page-head .lead{font-size:16px}}

/* long-form pages (about, contact): h2 rhythm inside one article */
.doc h2{margin:64px 0 16px}
.doc h2:first-of-type{margin-top:0}
.doc h2+p,.doc h3+p{margin-top:0}
@media (max-width:760px){.doc h2{margin-top:48px}.doc h3{margin-top:36px}}
.bullets{margin:16px 0 0;padding-left:1.2em;color:var(--text-2)}
.bullets li+li{margin-top:8px}
.bullets li::marker{color:var(--text-3)}
.steps-plain{margin:16px 0 0;padding-left:1.4em;color:var(--text-2)}
.steps-plain li+li{margin-top:8px}
.steps-plain li::marker{font:600 15px "Fredoka",sans-serif;color:var(--text-3)}

/* about: toy figure */
.toys{margin:28px 0 0}
.toys-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.toys .thumb{border-radius:var(--r-sm);border:1px solid var(--line)}
.toys figcaption{margin-top:10px;font-size:13px;line-height:1.6;color:var(--text-3)}

/* contact: mail line + pre-launch placeholders */
.mail-line{margin-top:16px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text)}
.mail-line dt{font:700 13px/1.4 var(--body);color:var(--text-3)}
.mail-line dd{margin:4px 0 0;font-weight:700}
[data-todo]{color:var(--text-3);text-decoration:underline dashed var(--line-strong);text-underline-offset:4px}

/* 404 */
.nf{padding-block:96px 120px}
.nf-mark{width:88px;height:88px;display:block}
.nf h1{margin-top:24px;font-size:clamp(34px,4.2vw,52px);line-height:1.1}
.nf p{margin-top:14px;font-size:18px;line-height:1.7;color:var(--text-2);max-width:32em}
.nf-actions{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.nf .btn,.nf .link-arrow{text-decoration:none}
.nf .btn-primary{color:var(--on-accent)}
@media (max-width:760px){.nf{padding-block:56px 72px}.nf p{font-size:16px}}
/* 404 polish: .prose p:first-of-type zeroes the gap under h1; short page fills the viewport; mascot idles (eased squash) */
.nf .prose p{margin-top:14px}
.nf{min-height:calc(100vh - 64px - 300px);display:flex;align-items:center}
.nf>.wrap{width:100%}
.nf-mark{transform-origin:50% 100%;animation:nf-bob 2.8s var(--ease-out) infinite}
.nf-mark path:first-child{transform-box:fill-box;transform-origin:50% 100%;animation:nf-leaf 2.8s ease-in-out infinite}
@keyframes nf-bob{0%,58%,100%{transform:translateY(0) scale(1,1)}66%{transform:translateY(0) scale(1.08,.9)}76%{transform:translateY(-10px) scale(.95,1.06)}86%{transform:translateY(0) scale(1.04,.96)}92%{transform:translateY(0) scale(1,1)}}
@keyframes nf-leaf{0%,62%,100%{transform:rotate(0)}74%{transform:rotate(-8deg)}84%{transform:rotate(6deg)}92%{transform:rotate(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation:none!important;scroll-behavior:auto!important}
  .card:hover,.card:active{transform:none}
  .card:hover .thumb img{transform:none}
}

/* skip link (visible only on keyboard focus) */
.skip{position:absolute;left:var(--gutter);top:8px;z-index:40;padding:10px 16px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font-weight:700;transform:translateY(-200%)}
.skip:focus,.skip:focus-visible{transform:none}
/* skip-link target: receives focus for screen readers, no ring around the whole page */
main[tabindex="-1"]:focus,main[tabindex="-1"]:focus-visible{outline:none}