:root { --paper:#f4f1e8; --ink:#182523; --muted:#64706c; --line:#d8d3c6; --accent:#4f91ad; --card:rgba(255,255,255,.58); --radius:22px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 86% 4%,rgba(79,145,173,.15),transparent 27rem),var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; } button,input { font:inherit; }.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
main,footer { width:min(1180px,calc(100% - 40px));margin-inline:auto; }.hero { display:grid;justify-items:start;padding:clamp(74px,11vw,132px) 0 clamp(46px,6vw,70px); }
.eyebrow { margin:0 0 18px;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; }.eyebrow a { text-underline-offset:3px; }
h1 { margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.2rem,7.2vw,6.4rem);font-weight:400;line-height:.92;letter-spacing:-.075em;white-space:nowrap; } h1 em { color:var(--accent);font-weight:400; }
.intro { max-width:760px;margin:42px 0 38px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.62; }
.search { display:flex;align-items:center;width:100%;min-height:66px;padding:0 19px;border:1px solid var(--ink);border-radius:18px;background:rgba(255,255,255,.48);box-shadow:6px 6px 0 var(--ink);transition:160ms ease; }.search:focus-within { transform:translate(3px,3px);background:#fff;box-shadow:3px 3px 0 var(--ink); }.search svg { width:22px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.7; }.search input { flex:1;min-width:0;padding:18px 16px;border:0;outline:0;color:var(--ink);background:transparent;font-size:1rem; }.search input::placeholder { color:#8b928f; } kbd { padding:4px 8px;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:var(--paper);font-size:.75rem;box-shadow:0 2px 0 var(--line); }
.summary { display:flex;align-items:baseline;gap:7px;margin-top:30px;color:var(--muted);font-size:.8rem; }.summary strong { color:var(--ink);font-size:1rem; }
.catalog { padding:0 0 100px; }.filter-group { display:flex;align-items:flex-start;gap:12px;margin-bottom:12px; }.type-filter-group { margin-bottom:30px; }.filter-group>span { flex:0 0 72px;margin-top:12px;color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }.filters { display:flex;gap:8px;padding-bottom:8px;overflow-x:auto; }.filter-button { flex:0 0 auto;padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:transparent;cursor:pointer;font-size:.78rem;font-weight:700; }.filter-button:hover { border-color:var(--ink);color:var(--ink); }.filter-button[aria-pressed=true] { border-color:var(--ink);color:var(--paper);background:var(--ink); }
.shark-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px; }.shark-card { display:flex;min-height:520px;flex-direction:column;padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);transition:180ms ease; }.shark-card:hover { transform:translateY(-3px);border-color:#bcb6a8;box-shadow:0 18px 50px rgba(29,40,37,.08); }.shark-card.fictional { background:rgba(79,145,173,.09);border-style:dashed; }.card-heading { min-height:145px;border-bottom:1px solid var(--line); }.fiction-badge { display:none;margin:0 0 12px;padding:5px 8px;border-radius:999px;color:#fff;background:var(--accent);font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase; }.fictional .fiction-badge { display:inline-block; }.shark-mark { width:72px;height:30px;margin-bottom:22px;background:var(--accent);clip-path:polygon(0 51%,15% 31%,30% 25%,48% 8%,45% 30%,75% 40%,92% 25%,86% 47%,100% 56%,86% 64%,90% 84%,74% 68%,30% 72%,12% 64%); }.scientific { margin:0 0 6px;color:var(--muted);font-family:Georgia,serif;font-size:.82rem;font-style:italic; }.shark-card h2 { margin:0 0 20px;font-family:Georgia,serif;font-size:1.75rem;font-weight:400;line-height:1;letter-spacing:-.035em; }
dl { display:grid;gap:0;margin:15px 0 18px; } dl div { display:grid;grid-template-columns:92px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid rgba(216,211,198,.72); } dl .source-row { margin-top:4px;border-bottom:0; } dt { color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; } dd { margin:0;font-size:.8rem;line-height:1.4; }.zone-link { color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px; }.zone-link:hover { color:var(--accent); }.sources { display:flex;flex-wrap:wrap;gap:7px 12px; }.sources a { color:var(--muted);font-size:.7rem;font-weight:750;text-decoration:none; }.sources a:hover { color:var(--accent); }.edit-link { display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);color:var(--ink);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-decoration:none; }.edit-link:hover { color:var(--accent); }
.empty-state { padding:80px 20px;text-align:center; }.empty-state>span { color:var(--accent);font-size:3rem; }.empty-state h2 { font-family:Georgia,serif;font-size:2rem;font-weight:400; }.empty-state p { color:var(--muted); }.empty-state button { padding:10px 16px;border:1px solid var(--ink);border-radius:999px;color:var(--paper);background:var(--ink);cursor:pointer; }
footer { padding:35px 0 48px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.78rem; }
.zones-page { padding-top:38px; }.back-link { display:inline-block;color:var(--muted);font-size:.78rem;font-weight:700;text-decoration:none; }.back-link:hover { color:var(--accent); }.zones-hero { padding:clamp(60px,9vw,105px) 0 60px; }.zones-hero .intro { max-width:720px;margin-bottom:0; }.zones-layout { display:grid;grid-template-columns:minmax(280px,.85fr) minmax(420px,1.15fr);gap:clamp(28px,5vw,72px);align-items:start;padding-bottom:70px; }.zone-diagram { position:sticky;top:24px;margin:0;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card); }.zone-diagram img { display:block;width:100%;height:auto;border-radius:12px; }.zone-diagram figcaption { margin-top:14px;color:var(--muted);font-size:.67rem;line-height:1.5; }.zone-diagram a,.zones-source a { text-underline-offset:2px; }.zone-list { display:grid;gap:12px; }.zone-card { scroll-margin-top:24px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card); }.zone-card:target { border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,145,173,.18); }.zone-card span { color:var(--accent);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }.zone-card h2 { margin:8px 0 12px;font-family:Georgia,serif;font-size:2rem;font-weight:400;letter-spacing:-.04em; }.zone-card p { margin:0;color:var(--muted);font-size:.9rem;line-height:1.6; }.zones-source { margin:0 0 80px;color:var(--muted);font-size:.78rem; }
@media(max-width:900px){.shark-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.zones-layout{grid-template-columns:1fr}.zone-diagram{position:static;max-width:560px}} @media(max-width:620px){main,footer{width:min(100% - 28px,1180px)}.hero{padding-top:70px}h1{white-space:normal}.shark-grid{grid-template-columns:1fr}.filter-group{display:block}.filter-group>span{display:block;margin:0 0 9px}.shark-card{min-height:auto}kbd{display:none}.zones-hero{padding-top:50px}.zone-card{padding:21px}}