/* AION 2 Pets — field-journal design system.
   Warm paper surfaces, dark ink bands, one teal accent, brass for progress.
   System fonts only. No inline styles anywhere (CSP: style-src 'self'). */

/* ---------- Tokens ---------- */
:root{
  color-scheme:light dark;
  --page:#f3eee3;--paper:#fcfaf5;--paper-2:#f6f1e7;--plate:#e9e1d0;
  --ink:#1c2127;--ink-2:#3a4048;--muted:#5d646e;--faint:#8b9098;
  --line:#ded5c3;--line-2:#cbbfa8;
  --accent:#1d5b53;--accent-2:#164841;--accent-soft:#dcebe5;--on-accent:#fdfbf6;
  --brass:#b07a22;--brass-ink:#7c5311;--brass-soft:#f4e6c8;
  --focus:#1d5b53;
  --band:#1b2027;--band-2:#252c35;--band-3:#13171c;--band-ink:#efe9dc;--band-muted:#aab1ba;--band-line:#353d48;--band-accent:#e3bb6a;
  --shadow-sm:0 1px 2px rgb(52 40 20/.06),0 2px 8px -2px rgb(52 40 20/.08);
  --shadow:0 2px 4px rgb(52 40 20/.06),0 14px 30px -10px rgb(52 40 20/.24);
  --radius:14px;--radius-sm:10px;
  --gutter:clamp(16px,3vw,32px);--wide:1440px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",P052,Georgia,serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --g:#7a7263;
  --surface:var(--paper);--gold:var(--accent);--bg:var(--page);
  --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
  --i-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.5 7.5 0 0 0-7.5 7.5C4.5 15 12 22 12 22s7.5-7 7.5-12.5A7.5 7.5 0 0 0 12 2Zm0 10.2a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Z'/%3E%3C/svg%3E");
  --i-claw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7.5 3.5c1.6 5.2.9 11-3 17M13 3c1.6 6 .9 12-3 18M18.5 3.5c1.6 5.2.9 11-3 17'/%3E%3C/svg%3E");
  --i-chest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5h17v9h-17zM3.5 10.5V9a5 4 0 0 1 5-4h7a5 4 0 0 1 5 4v1.5M3.5 14h17'/%3E%3Cpath d='M10.5 12.5h3v3.5h-3z' fill='%23000'/%3E%3C/svg%3E");
  --i-unknown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.6 2.3c-.8.4-1.2 1-1.2 1.8v.5'/%3E%3Ccircle cx='12' cy='17' r='.7' fill='%23000'/%3E%3C/svg%3E");
  --i-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18'/%3E%3C/svg%3E");
  --i-bookmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11v17l-5.5-4-5.5 4z'/%3E%3C/svg%3E");
  --i-bookmark-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 2.5h13v19.5L12 17.3 5.5 22z'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
[data-genus="Cogni"]{--g:#3d5a98}
[data-genus="Fera"]{--g:#a3472a}
[data-genus="Natura"]{--g:#4b7932}
[data-genus="Varian"]{--g:#7d4590}
[data-genus="Special"]{--g:#8a6510}

@media (prefers-color-scheme:dark){
  :root{
    --page:#121519;--paper:#1a1e24;--paper-2:#20252c;--plate:#262c34;
    --ink:#ece7dd;--ink-2:#cdc7bb;--muted:#a1a7af;--faint:#757c85;
    --line:#2d333b;--line-2:#3e4652;
    --accent:#80c7b7;--accent-2:#a6dacd;--accent-soft:#1d3531;--on-accent:#0d1917;
    --brass:#e0b45c;--brass-ink:#e8c57d;--brass-soft:#352d1f;
    --focus:#9ad7c9;
    --band:#0f1216;--band-2:#1c2128;--band-3:#0b0d10;--band-line:#272d36;
    --shadow-sm:0 1px 2px rgb(0 0 0/.35);--shadow:0 16px 32px -12px rgb(0 0 0/.6);
    --g:#9a9488;
  }
  [data-genus="Cogni"]{--g:#97b0ee}
  [data-genus="Fera"]{--g:#f0967b}
  [data-genus="Natura"]{--g:#a2cd82}
  [data-genus="Varian"]{--g:#d29ee2}
  [data-genus="Special"]{--g:#e2bf62}
}

/* CJK: keep Latin game names in the serif, use native sans for CJK glyphs, no tracking. */
:lang(ja){--sans:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif}
:lang(ko){--sans:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
:lang(zh){--sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(1100px 420px at 78% -140px,color-mix(in oklab,var(--brass) 13%,transparent),transparent 70%) no-repeat,var(--page);color:var(--ink);font:400 1rem/1.6 var(--sans);overflow-wrap:break-word}
main{flex:1;display:block}
:lang(ja) body,:lang(zh) body,:lang(ko) body{line-height:1.75}
:lang(ja),:lang(zh){line-break:strict}
:lang(ko){word-break:keep-all}
img{max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
:lang(ja) :is(h1,h2,h3),:lang(zh) :is(h1,h2,h3),:lang(ko) :is(h1,h2,h3){letter-spacing:0;line-height:1.3}
p{margin:0 0 1em;text-wrap:pretty}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--brass-soft);color:var(--ink)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.visually-hidden,.pet-card .level-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:60;padding:10px 16px;border-radius:10px;background:var(--band-accent);color:#1b2027;font-weight:700}
.skip:focus{top:12px;color:#1b2027}
.eyebrow{font:650 .75rem/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);margin:0 0 .75rem}
:lang(ja) .eyebrow,:lang(zh) .eyebrow,:lang(ko) .eyebrow{letter-spacing:.04em}
.lede{font-size:clamp(1rem,.96rem + .2vw,1.125rem);color:var(--ink-2);max-width:62ch}
.fine{font-size:.8125rem;line-height:1.6;color:var(--muted)}
.ad-slot{display:none}

/* ---------- Buttons & form controls ---------- */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:650;font-size:.9375rem;line-height:1.2;cursor:pointer;text-align:center;transition:background-color .15s,border-color .15s,color .15s}
button:hover,.button:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}
.secondary,button.secondary{background:transparent;color:var(--accent)}
.secondary:hover,button.secondary:hover{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent)}
.text-button,button.text-button{min-height:40px;padding:6px 2px;border:0;border-radius:6px;background:none;color:var(--accent);font-weight:650;font-size:.875rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.text-button:hover,button.text-button:hover{background:none;color:var(--accent-2)}
select,input[type=search],input[type=number]{min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background-color:var(--paper);color:var(--ink);font-size:1rem;line-height:1.3;transition:border-color .15s,box-shadow .15s}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;text-overflow:ellipsis;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:hover,input[type=search]:hover,input[type=number]:hover{border-color:var(--muted)}
select:focus-visible,input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 30%,transparent)}
input::placeholder{color:var(--muted);opacity:1}
progress{display:block;width:100%;height:10px;border:0;border-radius:999px;background:color-mix(in oklab,var(--line) 75%,var(--paper-2));overflow:hidden;appearance:none;-webkit-appearance:none;accent-color:var(--accent)}
progress::-webkit-progress-bar{background:color-mix(in oklab,var(--line) 75%,var(--paper-2));border-radius:999px}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 55%,var(--brass)));border-radius:999px;transition:width .4s ease}
progress::-moz-progress-bar{background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 55%,var(--brass)));border-radius:999px}

/* ---------- Header ---------- */
.header{background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--band-line);position:relative;z-index:20}
.header-inner{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);min-height:64px;display:flex;align-items:center;gap:clamp(12px,3vw,40px)}
.header :focus-visible,.site-footer :focus-visible,.guides-band :focus-visible{outline-color:var(--band-accent)}
.brand{display:inline-flex;align-items:center;gap:10px;font:650 1.1875rem/1 var(--serif);letter-spacing:.01em;white-space:nowrap;color:var(--band-ink)}
.brand:hover{color:var(--band-ink)}
.brand img{flex:none;display:block}
.brand b{color:var(--band-accent);font-weight:650}
.main-nav{display:flex;align-items:stretch;align-self:stretch;gap:4px;margin-right:auto}
.main-nav a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0 14px;min-height:48px;color:var(--band-muted);font-size:.9375rem;font-weight:550;line-height:1.2}
.main-nav a:hover{color:var(--band-ink)}
.main-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:transparent}
.main-nav a[aria-current]{color:var(--band-ink)}
.main-nav a[aria-current]::after{background:var(--band-accent)}
.nav-count{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--band-accent);color:#1b2027;font-size:.75rem;font-weight:750;font-variant-numeric:tabular-nums;line-height:1}
.languages{position:relative;font-size:.875rem}
.languages summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 12px;border:1px solid var(--band-line);border-radius:999px;color:var(--band-ink);cursor:pointer;white-space:nowrap}
.languages summary::-webkit-details-marker{display:none}
.languages summary::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--i-globe) center/contain no-repeat;mask:var(--i-globe) center/contain no-repeat;opacity:.85}
.languages summary::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.languages summary:hover{border-color:var(--band-muted)}
.languages[open] summary{background:var(--band-2)}
.languages>div{position:absolute;right:0;top:calc(100% + 8px);z-index:40;display:grid;min-width:210px;padding:6px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.languages a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:6px 12px;border-radius:8px}
.languages a:hover{background:var(--paper-2);color:var(--ink)}
.languages a[aria-current]{font-weight:700;color:var(--accent)}
.languages a[aria-current]::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}

/* ---------- Shared containers ---------- */
.intro,.atlas,.journal,.page-head,.guides-index,.pet-detail{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-bottom:8px;font-size:.9375rem;font-weight:650;color:var(--accent)}
.back:hover{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}

/* ---------- Home intro (compact; the atlas is the hero) ---------- */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:20px 48px;align-items:end;padding-block:clamp(24px,3.6vw,44px) clamp(18px,2.4vw,28px)}
.intro h1{font-size:clamp(1.75rem,1.05rem + 2vw,2.75rem);margin-bottom:.35em}
.intro .lede{margin:0}
.intro-side{display:grid;gap:12px}
.stat-row{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin:0;padding:0;font-size:.875rem;color:var(--muted)}
.stat-row b{font:650 1.375rem/1 var(--serif);color:var(--ink);margin-right:3px;font-variant-numeric:tabular-nums}
.journal-teaser{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px 12px;padding:14px 16px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.journal-teaser:hover{color:inherit;border-color:var(--accent);box-shadow:var(--shadow)}
.teaser-title{font-weight:700;color:var(--accent)}
.teaser-count{font-size:.875rem;color:var(--muted);text-align:right}
.teaser-count b{font:650 1.25rem/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.journal-teaser progress{grid-column:1/-1;height:8px}
.start-link{justify-self:start;font-size:.9375rem;font-weight:650;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------- Atlas: facet rail + specimen grid ---------- */
.atlas{display:grid;grid-template-columns:272px minmax(0,1fr);grid-template-rows:auto 1fr;gap:18px 28px;align-items:start;padding-block:8px 56px}
.atlas>.filter-search{grid-column:2;grid-row:1}
.atlas-filters{grid-column:1;grid-row:1/span 2;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:var(--radius)}
.atlas-results{grid-column:2;grid-row:2;min-width:0}
.filters{display:grid;gap:16px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.filter-search{position:relative}
.filter-search::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);background:var(--muted);-webkit-mask:var(--i-search) center/contain no-repeat;mask:var(--i-search) center/contain no-repeat;pointer-events:none}
.filter-search input{width:100%;min-height:52px;padding-left:46px;border-radius:var(--radius);background-color:var(--paper);box-shadow:var(--shadow-sm);font-size:1.0625rem}
.filter-search::before{left:16px;width:20px;height:20px}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.filter-search input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 30%,transparent),var(--shadow-sm)}
.pet-level:focus-visible{border-style:solid;border-color:var(--accent)}
.facet{min-width:0;margin:0;padding:0;border:0}
.facet legend,.facet-select>span{display:block;padding:0;margin:0 0 8px;font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:lang(ja) :is(.facet legend,.facet-select>span),:lang(zh) :is(.facet legend,.facet-select>span),:lang(ko) :is(.facet legend,.facet-select>span){letter-spacing:.02em;font-size:.75rem}
.chips{display:flex;flex-direction:column;gap:2px}
.chip{position:relative;display:block;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip span{display:flex;align-items:center;gap:10px;min-height:36px;padding:5px 10px;border:1px solid transparent;border-radius:9px;font-size:.9375rem;color:var(--ink-2);line-height:1.25;transition:background-color .12s,color .12s}
.facet-genus .chip span::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--g);box-shadow:0 0 0 2px color-mix(in oklab,var(--g) 22%,transparent)}
.facet-genus .chip:first-child span::before{background:conic-gradient(#3d5a98 0 25%,#a3472a 0 50%,#4b7932 0 75%,#7d4590 0)}
.chip small{margin-left:auto;padding-left:8px;font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chip:hover span{background:var(--paper-2);color:var(--ink)}
.chip input:checked+span{background:var(--accent-soft);color:var(--accent-2);font-weight:700}
.chip input:checked+span small{color:inherit}
.chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:1px}
.facet-select{display:block}
.facet-select select{width:100%}
.filter-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding-top:12px;border-top:1px solid var(--line)}
.checkbox{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-size:.9375rem;line-height:1.3;cursor:pointer}
.checkbox input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accent);cursor:pointer}

.results-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:2px 0 16px}
.results-bar h2{font-size:1.5rem;margin:0}
.results-bar p{margin:0;font-size:.9375rem;color:var(--muted);font-variant-numeric:tabular-nums}
.results-bar p b{color:var(--ink)}
.results-bar .edition{margin-left:auto;font-size:.75rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.pet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px}
.pet-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;content-visibility:auto;contain-intrinsic-size:auto 340px}
.pet-link{display:flex;flex-direction:column;flex:1;color:inherit;border-radius:var(--radius) var(--radius) 0 0}
.pet-link:hover{color:inherit}
.pet-link:focus-visible{outline-offset:-3px;border-radius:var(--radius)}
.pet-art{position:relative;display:grid;place-items:center;aspect-ratio:1/.9;margin:6px 6px 0;border-radius:calc(var(--radius) - 5px);overflow:hidden;background:var(--plate);background:radial-gradient(110% 90% at 50% 30%,color-mix(in oklab,var(--g) 7%,var(--plate)) 0%,color-mix(in oklab,var(--g) 24%,var(--plate)) 100%)}
.pet-art img{display:block;width:86%;height:auto;aspect-ratio:1;object-fit:contain;transition:transform .3s ease,filter .3s ease,opacity .3s ease}
.sigil{font:400 4.5rem/1 var(--serif);color:var(--g);opacity:.7}
.pet-copy{display:flex;flex-direction:column;gap:3px;padding:12px 14px 8px}
.genus-tag{display:inline-flex;align-items:center;gap:6px;font:750 .6875rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--g)}
.genus-tag::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.pet-copy h3{margin:3px 0 5px;font-size:1.0625rem;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
.pet-english-name{display:block;margin:-3px 0 4px;font-size:.75rem;font-style:italic;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.specimen-id .pet-english-name{margin:-.2em 0 .8em;font:italic 1rem/1.3 var(--serif)}
.pet-meta{position:relative;display:flex;align-items:flex-start;gap:7px;margin:0;font-size:.8125rem;line-height:1.35;color:var(--ink-2);overflow-wrap:anywhere}
.pet-meta::before{content:"";flex:none;width:14px;height:14px;margin-top:1px;background:var(--faint);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.meta-region{--icon:var(--i-pin)}
.meta-source{--icon:var(--i-chest)}
.meta-source.is-monster{--icon:var(--i-claw)}
.meta-source.is-unknown{--icon:var(--i-unknown);color:var(--brass-ink)}
.meta-source.is-unknown::before{background:var(--brass)}
.pet-meta.is-unknown{color:var(--muted);font-style:italic}
.card-bottom{margin-top:auto;padding:4px 14px 14px}
.level-label{display:block}
.pet-level{width:100%;min-height:40px;padding:6px 30px 6px 12px;font-size:.875rem;font-weight:600;border-style:dashed;background-color:var(--paper-2);color:var(--muted)}
.pet-level:has(option:checked:not([value="0"])){border-style:solid;border-color:color-mix(in oklab,var(--accent) 45%,var(--line));background-color:var(--accent-soft);color:var(--accent-2)}

/* Progress pips: filled by the selected level via :has(); no extra JS. */
.pips{display:inline-flex;align-items:center;gap:4px}
.pips i{display:block;width:9px;height:9px;border:1.5px solid var(--brass);border-radius:2px;transform:rotate(45deg);background:transparent;transition:background-color .2s}
:is(.pet-card,.tracker):has(option[value="1"]:checked) .pips i:nth-child(-n+1),
:is(.pet-card,.tracker):has(option[value="2"]:checked) .pips i:nth-child(-n+2),
:is(.pet-card,.tracker):has(option[value="3"]:checked) .pips i:nth-child(-n+3){background:var(--brass)}
.pet-art .pips{position:absolute;top:8px;right:8px;padding:6px 8px;border-radius:999px;background:color-mix(in oklab,var(--paper) 90%,transparent);box-shadow:var(--shadow-sm);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.pet-card:has(.pet-level option:checked:not([value="0"])) .pet-art .pips{opacity:1;transform:none}
.pet-card[data-max-level="3"]:has(option[value="3"]:checked),.pet-card[data-max-level="1"]:has(option[value="1"]:checked){border-color:color-mix(in oklab,var(--brass) 65%,var(--line));box-shadow:0 0 0 1px color-mix(in oklab,var(--brass) 45%,transparent),var(--shadow-sm)}
.pet-card[data-max-level="3"]:has(option[value="3"]:checked) .pet-art .pips,.pet-card[data-max-level="1"]:has(option[value="1"]:checked) .pet-art .pips{background:var(--band);--brass:var(--band-accent)}
.pet-card[data-max-level="3"]:has(option[value="3"]:checked) .pet-level,.pet-card[data-max-level="1"]:has(option[value="1"]:checked) .pet-level{border-color:var(--brass);background-color:var(--brass-soft);color:var(--brass-ink)}

/* Collection page: uncollected plates stay in ink-wash until recorded. */
.is-journal .pet-card:has(.pet-level option[value="0"]:checked) .pet-art img{filter:grayscale(1) contrast(.9);opacity:.5}
.is-journal .pet-card:has(.pet-level option[value="0"]:checked):is(:hover,:focus-within) .pet-art img{filter:none;opacity:1}

.empty{display:grid;justify-items:center;gap:14px;padding:56px 16px;margin-top:8px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--radius);color:var(--muted)}
.empty p{margin:0;font-size:1.0625rem}

@media (hover:hover){
  .pet-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in oklab,var(--g) 45%,var(--line))}
  .pet-card:hover .pet-art img{transform:scale(1.045)}
}

/* ---------- Guides band (home) ---------- */
.guides-band{background:var(--band);color:var(--band-ink);padding:56px max(var(--gutter),calc((100% - var(--wide))/2 + var(--gutter))) 64px}
.band-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 48px;align-items:end;margin-bottom:28px}
.band-head .eyebrow{grid-column:1/-1;color:var(--band-accent);margin:0}
.band-head h2{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);color:var(--band-ink);margin:0}
.band-head p{margin:0;color:var(--band-muted);max-width:52ch}
.guide-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.guide-list li{display:flex}
.guide-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;gap:4px 16px;width:100%;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s}
.guide-card:hover{color:var(--ink);border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.chapter{grid-row:1/3;font:650 1.875rem/1 var(--serif);color:var(--brass);font-variant-numeric:lining-nums tabular-nums}
.guide-copy h3{font-size:1.1875rem;margin:0 0 6px;overflow-wrap:anywhere;hyphens:auto}
.guide-copy p{margin:0;font-size:.9375rem;color:var(--muted)}
.read{grid-column:2;margin-top:12px;font-size:.875rem;font-weight:700;color:var(--accent)}
.guides-band .guide-card{background:var(--band-2);border-color:var(--band-line);color:var(--band-ink)}
.guides-band .guide-card:hover{border-color:var(--band-accent);color:var(--band-ink);box-shadow:none}
.guides-band .guide-copy h3{color:var(--band-ink)}
.guides-band .guide-copy p{color:var(--band-muted)}
.guides-band .chapter,.guides-band .read{color:var(--band-accent)}

/* ---------- Collection journal ---------- */
.journal{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px 24px;padding-block:clamp(24px,3.6vw,44px) 28px}
.journal-intro{grid-column:1/-1}
.journal-intro h1{font-size:clamp(2rem,1.4rem + 2vw,3rem);margin-bottom:.3em}
.journal-intro .lede{margin:0}
.progress-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.progress-total{margin:0 0 12px;font-size:1rem;color:var(--muted)}
.progress-total b{font:650 clamp(2.75rem,2rem + 2.4vw,3.75rem)/1 var(--serif);color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
.progress-main>progress{height:12px}
.progress-stats{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0 10px;padding:0;font-size:.9375rem;color:var(--muted)}
.progress-stats b{font:650 1.375rem/1 var(--serif);color:var(--ink);margin-right:3px;font-variant-numeric:tabular-nums}
.progress-stats li:first-child b{color:var(--brass-ink)}
.progress-main .fine{margin:0}
.genus-progress{padding-left:28px;border-left:1px solid var(--line)}
.genus-progress h2,.backup-actions h2{font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
:lang(ja) :is(.genus-progress h2,.backup-actions h2),:lang(zh) :is(.genus-progress h2,.backup-actions h2),:lang(ko) :is(.genus-progress h2,.backup-actions h2){letter-spacing:.02em;font-size:.8125rem}
.genus-progress ul{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.genus-progress li a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 8px;margin:-6px -8px;padding:6px 8px;border-radius:8px;color:inherit;transition:background-color .15s}
.genus-progress li a:hover{background:var(--paper-2);color:inherit}
.genus-progress li a:hover .genus-tag{text-decoration:underline;text-underline-offset:3px}
.genus-count{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.genus-count b{color:var(--ink)}
.genus-progress progress{grid-column:1/-1;height:6px}
.genus-progress progress::-webkit-progress-value{background:var(--g)}
.genus-progress progress::-moz-progress-bar{background:var(--g)}
.backup-actions{display:grid;align-self:start;align-content:start;gap:12px;padding:24px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius)}
.backup-buttons{display:flex;flex-wrap:wrap;gap:10px}
.backup-actions p{margin:0;font-size:.875rem;color:var(--muted)}
#backup-status{font-weight:700;color:var(--accent)}
#backup-status:empty{display:none}

/* ---------- Page heads, guides index, articles ---------- */
.page-head{padding-block:clamp(28px,4.5vw,56px) 24px}
.page-head h1{font-size:clamp(2rem,1.4rem + 2vw,3rem);margin-bottom:.3em}
.guides-index{padding-bottom:72px}
.guides-index .guide-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.notfound{min-height:55vh}
.notfound .button{margin-top:12px}

.article{width:100%;max-width:780px;margin:0 auto;padding:clamp(20px,4vw,40px) var(--gutter) 80px}
.article-head{padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.article h1{font-size:clamp(2rem,1.45rem + 2vw,3rem);margin-bottom:.3em}
.article-head .lede{margin:0;font-family:var(--serif);font-size:clamp(1.125rem,1.05rem + .3vw,1.3125rem);font-style:italic;color:var(--ink-2)}
:lang(ja) .article-head .lede,:lang(zh) .article-head .lede,:lang(ko) .article-head .lede{font-style:normal}
.prose{counter-reset:note}
.prose section{counter-increment:note;margin-bottom:30px}
.prose h2{display:flex;align-items:baseline;gap:12px;font-size:clamp(1.3rem,1.2rem + .4vw,1.5rem);margin-bottom:.55em}
.prose h2::before{content:counter(note,decimal-leading-zero);flex:none;font:700 .8125rem/1 var(--sans);letter-spacing:.06em;color:var(--brass-ink);font-variant-numeric:tabular-nums}
.prose p,.policy p:not(.eyebrow){font-size:1.0625rem;line-height:1.78;color:var(--ink-2)}
:lang(ja) .prose p,:lang(zh) .prose p,:lang(ko) .prose p{line-height:1.9}
.prose section:first-child p:first-of-type::first-letter{float:left;margin:.06em .12em 0 0;font:650 3.3em/.82 var(--serif);color:var(--brass-ink)}
:lang(ja) .prose p::first-letter,:lang(zh) .prose p::first-letter,:lang(ko) .prose p::first-letter{float:none;font:inherit;color:inherit;margin:0}
.prose a,.evidence p a,.note a,.policy a,td a,.evidence>section>a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.evidence{margin:8px 0 12px}
.evidence>section>h2,.evidence>.calculator h2{font-size:1.375rem}
.evidence>section{margin-bottom:24px}
.policy h1{margin-bottom:.6em}
.policy h2{font-size:1.375rem;margin-top:1.4em}
.policy ul{padding-left:20px;line-height:1.9}
.note{margin:24px 0;padding:14px 18px;border-left:3px solid var(--brass);border-radius:0 10px 10px 0;background:var(--brass-soft);font-size:.9375rem;color:var(--ink-2)}
.note p{margin:6px 0 0;font-size:.875rem}
.next-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin:36px 0 44px}
.step{display:grid;align-content:start;gap:6px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.step:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.step span{font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.step b{font:650 1.0625rem/1.3 var(--serif);color:var(--accent)}
.more-guides{padding-top:28px;border-top:1px solid var(--line)}
.more-guides h2{font-size:1.25rem}
.more-guides .guide-list{grid-template-columns:1fr;gap:10px}
.more-guides .guide-card{padding:14px 16px;grid-template-rows:auto;align-items:center}
.more-guides .chapter{grid-row:auto;font-size:1.375rem}
.more-guides .guide-copy p,.more-guides .read{display:none}

/* ---------- Pet detail ---------- */
.pet-detail{padding-block:16px 72px}
.specimen{position:relative;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr) minmax(250px,330px);gap:clamp(20px,4vw,48px);align-items:center;margin-bottom:28px;padding:clamp(14px,2.4vw,24px);background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow-sm);overflow:hidden}
.specimen::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--g),color-mix(in oklab,var(--g) 0%,transparent))}
.detail-art{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--radius);background:var(--plate);background:radial-gradient(100% 90% at 50% 32%,color-mix(in oklab,var(--g) 6%,var(--plate)) 0%,color-mix(in oklab,var(--g) 26%,var(--plate)) 100%)}
.detail-art img{display:block;width:min(256px,90%);height:auto;aspect-ratio:1}
.detail-art .sigil{font-size:8rem}
.specimen-id{min-width:0}
.specimen-id .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.specimen-id .eyebrow .genus-tag{font-size:inherit;letter-spacing:inherit}
.specimen-id h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem);margin-bottom:.25em;overflow-wrap:anywhere;hyphens:auto}
.specimen-id .lede{margin-bottom:16px}
.specimen-status{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.status-pill,.region-pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;font-size:.8125rem;font-weight:700;line-height:1.2}
.status-pill{background:var(--accent-soft);color:var(--accent-2)}
.status-pill::before{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.status-pill.uncertain{background:var(--brass-soft);color:var(--brass-ink)}
.status-pill.uncertain::before{-webkit-mask-image:var(--i-unknown);mask-image:var(--i-unknown)}
.region-pill{border:1px solid var(--line-2);background:var(--paper);color:var(--ink)}
.region-pill::before{content:"";width:13px;height:13px;background:var(--muted);-webkit-mask:var(--i-pin) center/contain no-repeat;mask:var(--i-pin) center/contain no-repeat}
.region-pill:hover{border-color:var(--accent);color:var(--accent)}
.tracker{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;max-width:480px;padding:14px 16px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius)}
.tracker .level-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;flex:1 1 240px}
.tracker .level-text{font-weight:700;font-size:.9375rem}
.tracker .pet-level{width:auto;min-width:160px;flex:1;font-size:1rem}
.tracker .pips i{width:12px;height:12px;border-width:2px}
.tracker:has(option:checked:not([value="0"])){border-color:color-mix(in oklab,var(--accent) 40%,var(--line))}

.detail-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:24px;align-items:start}
.detail-main,.detail-side{display:grid;gap:20px;min-width:0}
.detail-block,.facts,.calculator,.sources-card,.ownership-note{min-width:0;padding:22px 24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.detail-block h2,.detail-side h2{font-size:1.3125rem;margin-bottom:.7em}
.detail-block>.fine{margin:12px 0 0}
.specimen .facts{align-self:stretch;padding:4px 0 4px clamp(20px,2.4vw,32px);border:0;border-left:1px solid var(--line);border-radius:0;background:none;text-align:left}
.specimen .facts h2{font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:6px 0 10px}
:lang(ja) .specimen .facts h2,:lang(zh) .specimen .facts h2,:lang(ko) .specimen .facts h2{letter-spacing:.02em;font-size:.8125rem}
.specimen .facts dl div{grid-template-columns:minmax(0,1fr);gap:0;font-size:.875rem;padding:8px 0}
.specimen .facts dt{font-size:.75rem}
.specimen .facts .note{margin:12px 0 0}
.facts dl{margin:0}
.facts dl div{display:grid;grid-template-columns:minmax(84px,38%) minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.9375rem}
.facts dl div:first-child{border-top:0;padding-top:0}
dt{color:var(--muted)}
dd{margin:0;overflow-wrap:anywhere}
.acquisition-list{list-style:none;margin:0;padding:0}
.acquisition-list li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;padding:10px 0;border-top:1px solid var(--line);font-size:.9375rem}
.acquisition-list li:first-child{border-top:0;padding-top:0}
.acquisition-list strong{font-weight:650}
.acquisition-list span{font-size:.8125rem;color:var(--muted)}
.table-scroll{overflow-x:auto;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
table{width:100%;border-collapse:collapse;font-size:.9375rem;text-align:left}
th{padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line);font:700 .6875rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
:lang(ja) th,:lang(zh) th,:lang(ko) th{letter-spacing:.02em;font-size:.75rem}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:color-mix(in oklab,var(--paper-2) 60%,transparent)}
td strong{display:block;color:var(--ink);font-weight:650}
td small{display:block;margin-top:2px;font-size:.8125rem;color:var(--muted)}
.calculator{border-top:3px solid var(--brass)}
.calculator>p{font-size:.875rem;color:var(--muted)}
.calculator form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calculator label{display:grid;gap:6px;font-size:.8125rem;font-weight:650;color:var(--ink-2);min-width:0}
.calculator label:nth-of-type(3){grid-column:1/-1}
.calculator select,.calculator input{width:100%}
.calculator-result{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--brass-soft);color:var(--brass-ink);font-weight:700}
.calculator output{font:650 2.25rem/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.calculator .fine{margin:14px 0 0}
.calculator .fine a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ownership-note p{margin:0;color:var(--ink-2)}
.source-list{list-style:none;display:grid;gap:10px;margin:0 0 14px;padding:0;font-size:.875rem;line-height:1.45}
.source-list a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.sources-card .fine{margin-bottom:12px}
.guide-link{font-weight:700;color:var(--accent)}
.related{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.related h2{font-size:1.5rem}
.mini-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px;margin:0 0 20px;padding:0}
.mini-grid li{display:flex}
.mini-card{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s}
.mini-card:hover{color:inherit;border-color:color-mix(in oklab,var(--g) 55%,var(--line));box-shadow:var(--shadow)}
.mini-art{flex:none;display:grid;place-items:center;width:68px;height:68px;border-radius:10px;overflow:hidden;background:color-mix(in oklab,var(--g) 18%,var(--plate))}
.mini-art img{width:64px;height:64px}
.mini-art .sigil{font-size:2rem}
.mini-copy{min-width:0}
.mini-copy b{display:block;font:650 1rem/1.25 var(--serif);overflow-wrap:anywhere}
.mini-copy small{display:block;margin-top:2px;font-size:.8125rem;line-height:1.35;color:var(--muted)}
.route-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.route-links a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);font-size:.9375rem;font-weight:650;color:var(--ink);text-decoration:none}
.route-links a::before{content:"";width:14px;height:14px;background:var(--muted);-webkit-mask:var(--i-pin) center/contain no-repeat;mask:var(--i-pin) center/contain no-repeat}
.route-links a:hover{border-color:var(--accent);color:var(--accent)}
.route-links span{font-size:.8125rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Targets, workbench and nearby pets (main-build features) ---------- */
.goal-button{gap:8px;background:transparent;color:var(--accent);border-color:color-mix(in oklab,var(--accent) 55%,var(--line))}
.goal-button::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--i-bookmark) center/contain no-repeat;mask:var(--i-bookmark) center/contain no-repeat}
.goal-button:hover{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent)}
.goal-button[aria-pressed="true"]{background:var(--brass-soft);border-color:var(--brass);color:var(--brass-ink)}
.goal-button[aria-pressed="true"]::before{-webkit-mask-image:var(--i-bookmark-fill);mask-image:var(--i-bookmark-fill)}
.goal-button:disabled{opacity:.5;cursor:not-allowed;background:transparent}
.pet-card .goal-button{position:absolute;top:12px;left:12px;z-index:2;display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;border-color:var(--line);border-radius:50%;background:color-mix(in oklab,var(--paper) 90%,transparent);color:var(--ink-2);font-size:0;line-height:0;box-shadow:var(--shadow-sm)}
.pet-card .goal-button::before{width:17px;height:17px}
.pet-card .goal-button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#1b2027}
.pet-card .goal-button:disabled{display:none}
@media (hover:hover){
  .pet-card .goal-button{opacity:0;transition:opacity .15s,background-color .15s}
  .pet-card:is(:hover,:focus-within) .goal-button,.pet-card .goal-button[aria-pressed="true"]{opacity:1}
}
.goal-feedback{flex-basis:100%;margin:0;font-size:.875rem;font-weight:650;color:var(--accent)}
.goal-feedback:empty{display:none}
.workbench-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.workbench-actions>a{font-size:.9375rem;font-weight:650;color:var(--accent)}
.pet-workbench .level-label{display:grid;gap:6px;margin:12px 0}
.pet-workbench>p{color:var(--ink-2)}
.milestone-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:10px}
.milestone-grid>div{display:grid;align-content:space-between;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2);font-size:.8125rem;line-height:1.35;color:var(--muted)}
.milestone-grid output{font:650 1.5rem/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
#pet-progress-status{grid-column:1/-1;margin:0}
#pet-progress-status:empty{display:none}
.goal-section{margin:0 max(var(--gutter),calc((100% - var(--wide))/2 + var(--gutter))) 24px;padding:22px 24px;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.goal-section h2{display:flex;align-items:center;gap:10px;font-size:1.375rem;margin-bottom:.35em}
.goal-count{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 8px;border-radius:999px;background:var(--brass);color:#1b2027;font:750 .8125rem/1 var(--sans)}
.goal-section>p{margin:0 0 14px;font-size:.875rem;color:var(--muted)}
#goal-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:10px}
#goal-list:empty{display:none}
#goal-empty{margin:0;padding:14px 16px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);color:var(--muted)}
.goal-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px 8px 8px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.goal-row img{width:56px;height:56px;border-radius:8px;background:var(--plate);object-fit:contain}
.goal-row a{font:650 1rem/1.25 var(--serif);color:var(--ink);overflow-wrap:anywhere}
.goal-row p{margin:2px 0 0;font-size:.8125rem;line-height:1.35;color:var(--muted)}
.goal-row .goal-button{min-height:36px;padding:6px 12px;font-size:.8125rem}
.nearby-section{margin-top:20px}
.nearby-section>p{font-size:.875rem;color:var(--muted)}
.nearby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}
.nearby-pet{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.nearby-pet:hover{border-color:var(--accent);color:inherit}
.nearby-pet img{flex:none;width:56px;height:56px;border-radius:8px;background:var(--plate)}
.nearby-pet span{min-width:0;font:650 .9375rem/1.25 var(--serif)}
.nearby-pet small{display:block;margin-top:2px;font:400 .8125rem/1.35 var(--sans);color:var(--muted)}
.progress-filter{display:grid;gap:6px}
.pet-benefits{min-width:0;padding:22px 24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.pet-benefits h2{font-size:1.3125rem;margin-bottom:.6em}
.pet-benefits>p{color:var(--ink-2)}
.pet-benefits>p.fine{color:var(--muted)}
.pet-milestones{list-style:none;display:grid;gap:10px;margin:0 0 14px;padding:0}
.pet-milestones li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:12px;padding:10px 12px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.9375rem;color:var(--ink-2)}
.pet-milestones b{position:relative;display:grid;place-items:center;width:30px;height:30px;font:700 .875rem/1 var(--sans);color:var(--brass-ink)}
.pet-milestones b::before{content:"";position:absolute;inset:5px;border:2px solid var(--brass);border-radius:4px;transform:rotate(45deg)}
.pet-benefits .fine a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- Footer ---------- */
.site-footer{background:var(--band-3);color:var(--band-muted);font-size:.875rem;border-top:1px solid var(--band-line)}
.footer-inner{max-width:var(--wide);margin:0 auto;padding:40px var(--gutter) 44px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px}
.footer-brand p{margin:14px 0 0;max-width:56ch}
.smallbrand{font-size:1.0625rem}
.site-footer nav{display:flex;flex-wrap:wrap;align-content:start;gap:0 20px}
.site-footer nav a{display:inline-flex;align-items:center;min-height:40px;color:var(--band-ink)}
.site-footer nav a:hover{color:var(--band-accent)}
.site-footer .fine{grid-column:1/-1;margin:0;padding-top:16px;border-top:1px solid var(--band-line);color:var(--band-muted)}
.site-footer .text-button{grid-column:1/-1;justify-self:start;color:var(--band-accent)}
.site-footer .text-button:hover{color:var(--band-ink)}
body>.consent-panel{border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .atlas{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px}
  .atlas>.filter-search,.atlas-filters,.atlas-results{grid-column:auto;grid-row:auto}
  .atlas-filters{position:static;max-height:none;overflow:visible}
  .atlas-results{margin-top:8px}
  .filters{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px}
  .facet{grid-column:1/-1}
  .facet legend{float:left;width:96px;margin:0 12px 0 0;padding-top:11px;letter-spacing:.06em;line-height:1.25;hyphens:auto;overflow-wrap:normal}
  .chips{flex-direction:row;flex-wrap:wrap;gap:6px;overflow:hidden}
  .chip span{min-height:38px;padding:6px 12px;border-color:var(--line-2);border-radius:999px;background:var(--paper)}
  .chip input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .facet-genus .chip input:checked+span::before{box-shadow:0 0 0 2px var(--on-accent)}
  .facet-select{display:flex;align-items:center;gap:12px}
  .facet-select>span{width:96px;flex:none;margin:0;letter-spacing:.06em;hyphens:auto;overflow-wrap:normal}
  .facet-select select{max-width:360px}
  .filter-actions{border-top:0;padding-top:0;justify-content:flex-end;gap:6px 20px}
  .detail-columns{grid-template-columns:minmax(0,1fr)}
  .specimen{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}
  .specimen .facts{grid-column:1/-1;padding:16px 0 0;border-left:0;border-top:1px solid var(--line)}
  .specimen .facts dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));column-gap:24px}
  .specimen .facts dl div:first-child{border-top:1px solid var(--line);padding-top:8px}
  .detail-side{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
  .journal{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .intro{grid-template-columns:minmax(0,1fr);gap:16px}
  .intro-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .stat-row{grid-column:1/-1}
  .band-head{grid-template-columns:minmax(0,1fr)}
  .progress-box{grid-template-columns:minmax(0,1fr)}
  .genus-progress{padding-left:0;padding-top:20px;border-left:0;border-top:1px solid var(--line)}
  .specimen{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .detail-art{width:min(100%,250px)}
  .specimen-id .eyebrow,.specimen-status{justify-content:center}
  .specimen-id .lede{margin-inline:auto}
  .tracker{margin-inline:auto;text-align:left}
  .footer-inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .header-inner{flex-wrap:wrap;gap:0 12px;padding-top:6px}
  .brand{flex:1;min-height:50px}
  .main-nav{order:3;width:100%;gap:0;margin:0}
  .main-nav a{flex:1 1 0;justify-content:center;min-width:0;padding:6px 4px;min-height:48px;text-align:center;font-size:.875rem}
  .main-nav a::after{left:10%;right:10%}
  .main-nav a{gap:5px}
  .nav-count{min-width:18px;height:18px;padding:0 5px;font-size:.6875rem}
  .filter-search input,.pet-level,.facet-select select,.calculator select,.calculator input{font-size:1rem}
}
@media (max-width:640px){
  .intro{padding-block:20px 14px}
  .intro .eyebrow{margin-bottom:.5rem}
  .intro .lede{font-size:.9375rem}
  .intro-side{display:none}
  .filters{grid-template-columns:minmax(0,1fr);padding:12px;gap:10px}
  .facet legend,.facet-select>span{width:74px;margin-right:10px;font-size:.625rem;letter-spacing:.04em;line-height:1.25;hyphens:auto;overflow-wrap:normal}
  .facet-select{gap:0}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 24px 2px 2px;margin:-2px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .chip span{white-space:nowrap}
  .facet-select select{max-width:none;flex:1;min-width:0}
  .filter-actions{justify-content:space-between;padding-left:0}
  .results-bar h2{font-size:1.25rem}
  .results-bar .edition{display:none}
  .pet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pet-copy{padding:10px 10px 6px}
  .pet-copy h3{font-size:1rem}
  .pet-meta{font-size:.75rem;gap:5px}
  .pet-meta::before{width:12px;height:12px}
  .card-bottom{padding:2px 10px 10px}
  .pet-level{padding-left:10px;padding-right:26px;background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%}
  .pet-art{margin:5px 5px 0}
  .guides-band{padding-top:40px;padding-bottom:44px}
  .progress-box,.backup-actions{padding:18px}
  .detail-block,.facts,.calculator,.sources-card,.ownership-note{padding:18px}
  .specimen{padding:12px 12px 18px}
  .tracker{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .tracker .level-label{display:grid;gap:6px}
  .tracker .pet-level{min-width:0;width:100%}
  .tracker .pips{padding-bottom:14px}
  .goal-section{padding:18px}
  .goal-row{grid-template-columns:48px minmax(0,1fr)}
  .goal-row img{width:48px;height:48px}
  .goal-row .goal-button{grid-column:2;justify-self:start}
  .monster-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .monster-table,.monster-table tbody,.monster-table tr,.monster-table td{display:block}
  .monster-table tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .monster-table tbody tr:last-child{border-bottom:0}
  .monster-table td{display:grid;grid-template-columns:minmax(80px,34%) minmax(0,1fr);gap:10px;padding:3px 0;border:0;background:none!important}
  .monster-table td::before{content:attr(data-label);font-size:.75rem;line-height:1.5;color:var(--muted)}
  .monster-table td small{grid-column:2}
  .monster-table td:first-child{display:block;padding-bottom:6px}
  .monster-table td:first-child::before{display:none}
  .monster-table td:first-child strong{display:inline;margin-right:8px}
  .monster-table td:first-child small{display:inline}
  .article{padding-bottom:56px}
}
@media (max-width:369px){
  .header-inner{gap:0 8px}
  .brand{font-size:1.0625rem;gap:8px}
  .brand img{width:30px;height:30px}
  .languages summary{padding:0 10px;gap:6px;font-size:.8125rem}
  .pet-grid{grid-template-columns:minmax(0,1fr)}
  .pet-card{contain-intrinsic-size:auto 150px}
  .pet-link{flex-direction:row;align-items:center}
  .pet-art{flex:none;width:96px;margin:6px 0 6px 6px}
  .pet-copy{flex:1;min-width:0}
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .pet-card:hover,.guide-card:hover{transform:none}
  .pet-card:hover .pet-art img{transform:none}
}
@media (forced-colors:active){
  .chip input:checked+span{outline:2px solid CanvasText}
  .pips i{border-color:CanvasText}
  :is(.pet-card,.tracker):has(option[value="1"]:checked) .pips i:nth-child(-n+1),:is(.pet-card,.tracker):has(option[value="2"]:checked) .pips i:nth-child(-n+2),:is(.pet-card,.tracker):has(option[value="3"]:checked) .pips i:nth-child(-n+3){background:CanvasText}
  .pet-meta::before,.filter-search::before,.languages summary::before,.status-pill::before,.region-pill::before,.route-links a::before{background:CanvasText}
}
@media print{
  .header,.site-footer,.atlas-filters,.journal-teaser,.backup-actions,.guides-band,.skip{display:none!important}
  body{background:#fff;color:#000}
  .pet-card{break-inside:avoid;box-shadow:none}
}

/* Official editorial visuals; dimensions preserve layout before lazy loading. */
.game-visual{margin:0 0 2rem;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.game-visual>a{display:block}.game-visual img{display:block;width:100%;height:auto}.game-visual figcaption{padding:12px 16px;font-size:.78rem;line-height:1.6;color:var(--muted)}.game-visual figcaption span{white-space:nowrap}
.game-landscape{margin-bottom:1rem}.guide-items{margin:0 0 2.5rem}.guide-items h2{font-size:1rem}.guide-items ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;list-style:none}.guide-items li{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:.85rem;min-width:0}.item-art{width:56px;height:56px;object-fit:contain;flex:none}.acquisition-list li:has(.item-art){min-height:68px;padding-left:76px;position:relative}.acquisition-list .item-art{position:absolute;left:8px;top:8px}.guide-items li span{overflow-wrap:anywhere}
@media(max-width:600px){.guide-items ul{grid-template-columns:1fr}.game-visual figcaption{padding:10px 12px}.game-visual{border-radius:8px}}

/* ---------- Search answers and return visits ---------- */
.quick-answer{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);background:var(--paper-2);text-align:left}
.quick-answer h2{font-size:1.0625rem;margin:0 0 8px}
.qa-label{margin:0 0 4px;font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qa-sources{list-style:none;display:grid;gap:4px;margin:0 0 8px;padding:0}
.qa-sources li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:.9375rem}
.qa-sources span{font-size:.8125rem;color:var(--muted)}
.qa-more,.qa-also,.qa-souls{margin:0 0 6px;font-size:.875rem;color:var(--ink-2)}
.qa-also span{font-weight:650}
.qa-more a,.qa-souls a{color:var(--accent);font-weight:650;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.qa-caveat{margin:8px 0 0;font-size:.75rem;line-height:1.5;color:var(--muted)}
.qa-checked{display:inline-block}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.share-button{min-height:40px;padding:6px 16px;background:var(--paper);border-color:var(--line-2);color:var(--ink)}
.share-button:hover{background:var(--paper);border-color:var(--accent);color:var(--accent)}
.share-status{font-size:.8125rem;color:var(--muted)}
.guide-answers{margin:0 0 24px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);background:var(--paper-2)}
.guide-answers h2{font-size:1.125rem;margin:0 0 10px}
.guide-answers ul{display:grid;gap:8px;margin:0;padding-left:1.2em}
.guide-answers li{font-size:1rem;line-height:1.6;color:var(--ink-2)}
.guide-answers a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.page-date{margin:-12px 0 24px;font-size:.8125rem;color:var(--muted)}
.next-target{display:grid;align-content:start;gap:2px;min-height:5em;margin:0;padding:10px 16px;border:1px dashed var(--line-2);border-radius:var(--radius);font-size:.875rem;color:var(--ink-2)}
.next-label{font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.next-body a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.save-tip{position:fixed;z-index:40;left:18px;right:18px;bottom:18px;max-width:560px;margin:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 18px;background:var(--paper);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow)}
.save-tip p{flex:1 1 280px;margin:0;font-size:.875rem;color:var(--ink-2)}
.save-tip[hidden]{display:none}