:root { --paper:#f4f1e8; --ink:#182523; --muted:#64706c; --line:#d8d3c6; --accent:#56734c; --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(86,115,76,.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; }.language-switch { display:flex;justify-content:flex-end;gap:8px;padding-top:22px; }.language-switch a { padding:7px 10px;border:1px solid transparent;border-radius:999px;color:var(--muted);font-size:.72rem;font-weight:750;text-decoration:none; }.language-switch a:hover { color:var(--ink);border-color:var(--line); }.language-switch a[aria-current=page] { color:var(--paper);background:var(--ink); }.hero { display:grid;justify-items:start;padding:clamp(54px,8vw,100px) 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:none;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; }.filters .filter-button:first-child { width:74px; }.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); }
.dinosaur-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px; }.dinosaur-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; }.dinosaur-card:hover { transform:translateY(-3px);border-color:#bcb6a8;box-shadow:0 18px 50px rgba(29,40,37,.08); }.dinosaur-card.fictional { background:rgba(86,115,76,.09);border-style:dashed; }.dinosaur-card.extinct { background:rgba(82,76,63,.07);border-style:dashed; }.card-heading { min-height:145px;border-bottom:1px solid var(--line); }.status-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 .status-badge,.extinct .status-badge { display:inline-block; }.extinct .status-badge { background:var(--muted); }.dinosaur-mark { width:78px;height:30px;margin-bottom:22px;background:var(--accent);clip-path:polygon(0 54%,10% 41%,23% 36%,43% 10%,41% 36%,72% 40%,86% 29%,93% 8%,94% 38%,100% 21%,98% 54%,91% 67%,73% 59%,25% 69%,10% 64%); }.scientific { margin:6px 0 20px;color:var(--muted);font-family:Georgia,serif;font-size:.82rem;font-style:italic; }.dinosaur-card h2 { margin:0;font-family:Georgia,serif;font-size:1.75rem;font-weight:400;line-height:1;letter-spacing:-.035em; }.copy-name { position:relative;padding:0;border:0;color:inherit;background:none;cursor:pointer;font:inherit;text-align:left; }.copy-name:hover { color:var(--accent); }.copy-name:focus-visible { outline:2px solid var(--accent);outline-offset:4px;border-radius:2px; }.copy-name.copied::after { content:attr(data-copy-feedback);position:absolute;left:0;bottom:calc(100% + 7px);padding:4px 7px;border-radius:6px;color:var(--paper);background:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.58rem;font-style:normal;font-weight:700;letter-spacing:0; }
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 div[hidden] { display:none; } 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,.place-link { color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px; }.zone-link:hover,.place-link:hover { color:var(--accent); }.sources,.universes { display:flex;flex-wrap:wrap;gap:7px 12px; }.sources a,.universes a { color:var(--muted);font-size:.7rem;font-weight:750;text-decoration:none; }.sources a:hover,.universes 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; }

h1{white-space:normal}.hero{padding-bottom:42px}.intro{max-width:850px}.design-note{margin:0 0 24px;color:var(--muted);font-size:.8rem;line-height:1.6}.dinosaur-card{min-height:460px}.dinosaur-mark{clip-path:none;width:66px;height:40px;background:none;color:var(--accent);margin-bottom:18px}.dinosaur-mark svg{width:100%;height:100%;fill:currentColor}.placeholder{display:block;height:8px;width:65%;border-radius:6px;background:var(--line);opacity:.65;margin:5px 0}.placeholder.short{width:42%}.card-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.7rem;color:var(--muted)}.card-heading{min-height:145px}.scientific{font-size:.85rem}.filter-button:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.empty-state[hidden],.dinosaur-grid[hidden]{display:none}.filter-group>span{flex-basis:90px}.filters{flex-wrap:wrap;overflow:visible}.summary{margin-top:24px}
@media(max-width:900px){.dinosaur-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){main,footer{width:calc(100% - 28px)}.hero{padding-top:56px}h1{font-size:clamp(3rem,12vw,4.5rem)}.intro{margin:28px 0}.dinosaur-grid{grid-template-columns:1fr}.filter-group{display:block}.filter-group>span{display:block;margin:0 0 9px}.dinosaur-card{min-height:430px}kbd{display:none}.language-switch{padding-top:18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Populated catalogue */
.dinosaur-card[hidden]{display:none}.dinosaur-card h2{overflow-wrap:anywhere}.card-heading{min-height:125px}.kind-label{margin:0 0 22px;color:var(--accent);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.card-note{margin:0 0 18px;color:var(--muted);font-size:.78rem;line-height:1.5}.sources a{overflow-wrap:anywhere}
/* Geological periods */
.period-link,.period-source{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:4px}.period-link:hover,.period-source:hover{color:var(--accent)}
.back-link{display:inline-block;margin-top:30px;color:var(--muted);font-size:.8rem;text-underline-offset:4px}.back-link:hover{color:var(--accent)}.periods-page .hero{padding-top:65px}.periods-page h1{font-size:clamp(3rem,6.5vw,5.8rem);line-height:1.05}.periods-page .intro{margin-bottom:0}
.period-timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.period-timeline a{display:grid;gap:10px;padding:24px;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:3px 3px 18px 18px;background:var(--card);text-decoration:none}.period-timeline a:hover{background:#fff}.period-timeline span{color:var(--accent);font-size:.7rem;font-weight:800}.period-timeline strong{font:400 1.8rem Georgia,serif}.period-timeline small{color:var(--muted)}.period-caption{margin:16px 0 45px;color:var(--muted);font-size:.75rem;line-height:1.6}
.period-sections{display:grid;gap:20px}.period-section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:40px;padding:36px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);scroll-margin-top:24px}.period-section:target{border-color:var(--accent);box-shadow:0 0 0 3px rgba(86,115,76,.12)}.period-section h2{margin:0;font:400 clamp(2.2rem,4vw,3.3rem) Georgia,serif;letter-spacing:-.045em}.period-section .eyebrow{font-size:.64rem;line-height:1.7;letter-spacing:.08em}.period-tagline{color:var(--accent);font-size:.85rem;line-height:1.6}.period-copy p{margin:0 0 18px;color:var(--muted);font-size:.95rem;line-height:1.75}.period-source{font-size:.76rem}.bottom-back{margin:32px 0 70px}
@media(max-width:700px){.period-section{grid-template-columns:1fr;gap:14px;padding:24px}.period-timeline{gap:6px}.period-timeline a{padding:14px 10px}.period-timeline strong{font-size:1.25rem}.period-timeline small{font-size:.7rem}.periods-page .hero{padding-top:44px}.period-caption{margin-bottom:28px}}
/* Compact, locally hosted NHM silhouettes beside each dinosaur name. */
.card-title-row{display:grid;grid-template-columns:minmax(0,1fr) 88px;align-items:center;gap:12px;margin-bottom:18px}.card-title-copy{flex:1;min-width:0}.card-title-copy .scientific{margin:8px 0 0;overflow-wrap:anywhere}.size-comparison{grid-column:2;grid-row:1;justify-self:end;display:flex;align-items:center;justify-content:center;flex:0 0 88px;border-radius:8px}.size-comparison img{display:block;width:88px;height:68px;object-fit:contain}.size-comparison:hover{background:rgba(86,115,76,.06)}.card-heading{min-height:150px}.image-credit{font-size:.7rem;line-height:1.6}.image-credit a{text-underline-offset:3px}

.dinosaur-card h2.long-name{font-size:1.18rem;line-height:1.2}
.card-title-row.without-image{grid-template-columns:minmax(0,1fr)}.fictional .kind-label{color:var(--accent)}