/* =========================================================================
   Hidden Species — Style A: specimen catalog / institutional archive
   Black field. Photos at full strength. Sparse warm-grey serif metadata.
   Typography stack is set on :root and can be swapped wholesale by edit.
   ========================================================================= */

:root {
    --bg:        #0a0a0a;
    --surface:   #131313;
    --surface-2: #181818;
    --rule:      #2a2a2a;
    --rule-soft: #1d1d1d;

    --text:      #d8d2c4;       /* warm parchment off-white */
    --text-dim:  #aea796;
    --muted:     #807868;
    --accent:    #c9b67c;       /* faint amber, used sparingly */

    --serif: Charter,"Iowan Old Style","Iowan Old Style BT","Sitka Text",Georgia,"Times New Roman",serif;
    --mono:  ui-monospace,"SF Mono",Menlo,Consolas,monospace;

    --max:    1240px;
    --gap:    1.25rem;
    --gap-lg: 2rem;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:var(--serif)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--serif);
    line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.container{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:1rem;top:1rem;background:var(--surface);padding:.5rem .75rem;z-index:100;border:1px solid var(--rule)}

/* ---------- Header / nav ---------- */

.site-header{
    border-bottom:1px solid var(--rule-soft);
    padding:1.25rem 0 1.1rem;
    background:var(--bg);
    position:sticky;top:0;z-index:10;
    backdrop-filter:saturate(140%) blur(6px);
    -webkit-backdrop-filter:saturate(140%) blur(6px);
}
.site-header .container{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.wordmark{display:flex;flex-direction:column;line-height:1.05;border:none}
.wordmark:hover{color:var(--text)}
.wordmark-text{font-size:1.35rem;letter-spacing:.01em}
.wordmark-sub{
    font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;
    color:var(--muted);margin-top:.35rem;
}
.primary-nav ul{
    list-style:none;display:flex;gap:1.4rem;margin:0;padding:0;
    font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;
}
.nav-link{
    color:var(--text-dim);border:none;padding:.25rem 0;
    border-bottom:1px solid transparent;
}
.nav-link:hover{color:var(--text);border-bottom-color:var(--rule)}
.nav-link.is-active{color:var(--accent);border-bottom-color:var(--accent)}

.mobile-menu-toggle{display:none;background:none;border:1px solid var(--rule);padding:.45rem;cursor:pointer;width:38px;height:34px;flex-direction:column;justify-content:space-between;align-items:stretch}
.mobile-menu-toggle span{display:block;height:1px;background:var(--text-dim)}

@media (max-width:720px){
    .site-header{position:static}
    .site-header .container{align-items:center}
    .mobile-menu-toggle{display:flex}
    .primary-nav{flex-basis:100%;display:none}
    .primary-nav.is-open{display:block}
    .primary-nav ul{flex-direction:column;gap:.6rem;padding-top:.5rem}
}

/* ---------- Main ---------- */

.site-main{padding:2.5rem 0 4rem}

/* ---------- Masthead block on home / category overviews ---------- */

.archive-mast{padding:2rem 0 2.5rem;border-bottom:1px solid var(--rule-soft);margin-bottom:2.25rem}
.archive-mast h1{
    font-weight:400;font-size:clamp(1.8rem,3.4vw,2.6rem);
    margin:0 0 .55rem;letter-spacing:-.005em;line-height:1.15;
}
.archive-mast .mast-sub{
    color:var(--text-dim);font-size:1.04rem;max-width:62ch;margin:0;
}
.archive-mast .mast-meta{
    color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;
    margin-top:1rem;
}

/* ---------- Section title (label + view-all) ---------- */

.section-title{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    border-bottom:1px solid var(--rule-soft);padding-bottom:.6rem;margin:2.25rem 0 1.25rem;
}
.section-title .label{
    font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:var(--muted);
}
.section-title .view-all{font-size:.85rem;color:var(--text-dim);border:none}
.section-title .view-all:hover{color:var(--accent)}

/* ---------- Category cards (group/cover landings) ---------- */

.cat-grid{
    display:grid;gap:1.4rem;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.cat-card{
    display:block;border:1px solid var(--rule-soft);background:var(--surface);
    overflow:hidden;transition:border-color .15s ease;border-bottom:1px solid var(--rule-soft);
}
.cat-card:hover{border-color:var(--rule);color:inherit}
.cat-card .cover{
    aspect-ratio:4/3;background:#000;display:block;overflow:hidden;
}
.cat-card .cover img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .15s ease,transform .4s ease}
.cat-card:hover .cover img{opacity:1;transform:scale(1.02)}
.cat-card .meta{padding:.85rem 1rem 1rem}
.cat-card .name{
    font-size:1.05rem;margin:0 0 .25rem;color:var(--text);
}
.cat-card .count{
    font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:var(--muted);
}

/* ---------- Specimen grid (image listings) ---------- */

.specimen-grid{
    display:grid;gap:1.6rem 1.25rem;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.specimen{
    display:flex;flex-direction:column;gap:.55rem;border:none;
}
.specimen .frame{
    aspect-ratio:1/1;background:#000;
    border:1px solid var(--rule-soft);
    overflow:hidden;display:flex;align-items:center;justify-content:center;
    transition:border-color .15s ease;
}
.specimen:hover .frame{border-color:var(--rule)}
.specimen .frame img{
    width:100%;height:100%;object-fit:cover;
    opacity:.94;transition:opacity .15s ease,transform .4s ease;
}
.specimen:hover .frame img{opacity:1;transform:scale(1.015)}
.specimen .meta{display:flex;flex-direction:column;gap:.18rem;padding:0 .1rem}
.specimen .title{font-size:.95rem;color:var(--text);line-height:1.3}
.specimen .stamp{
    font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
    display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;
}
.specimen .stamp .date{font-family:var(--mono);letter-spacing:.04em;color:var(--text-dim)}

/* ---------- Breadcrumbs ---------- */

.crumbs{
    font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
    margin:0 0 1.25rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
}
.crumbs a{color:var(--text-dim);border:none}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.6}

/* ---------- Image detail page ---------- */

.specimen-page{padding-top:.5rem}
.specimen-page .plate{
    background:#000;border:1px solid var(--rule-soft);
    display:flex;align-items:center;justify-content:center;
    margin:.5rem 0 1.5rem;min-height:240px;
}
.specimen-page .plate img{
    max-width:100%;max-height:84vh;width:auto;height:auto;display:block;object-fit:contain;
}
.specimen-page .lede{
    display:flex;justify-content:space-between;align-items:flex-end;
    gap:1.5rem;flex-wrap:wrap;border-bottom:1px solid var(--rule-soft);
    padding-bottom:1rem;margin-bottom:1.5rem;
}
.specimen-page .lede h1{
    font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);margin:0;letter-spacing:-.005em;
}
.specimen-page .lede .stamp{
    font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
    display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;
}
.specimen-page .lede .stamp .date{font-family:var(--mono);letter-spacing:.04em;color:var(--text-dim)}

.spec-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:1.5rem 2rem;border-top:1px solid var(--rule-soft);padding-top:1.25rem;margin-top:1.5rem;
}
.spec-grid dt{
    font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:var(--muted);margin-bottom:.3rem;
}
.spec-grid dd{
    margin:0;font-size:.95rem;color:var(--text);
}

.specimen-nav{
    display:flex;justify-content:space-between;gap:1rem;
    border-top:1px solid var(--rule-soft);padding-top:1.25rem;margin-top:2.25rem;
    font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--text-dim);
}
.specimen-nav a{border:none;display:inline-flex;flex-direction:column;gap:.2rem;max-width:45%}
.specimen-nav a:hover .label{color:var(--accent)}
.specimen-nav .dir{color:var(--muted);font-size:.7rem}
.specimen-nav .label{color:var(--text);text-transform:none;letter-spacing:0;font-size:.95rem}
.specimen-nav .next{text-align:right;align-items:flex-end}

/* ---------- Body prose (about, methodology, optional notes) ---------- */

.prose{max-width:64ch;font-size:1.05rem;line-height:1.7}
.prose h1{font-weight:400;font-size:1.9rem;margin:0 0 1rem}
.prose h2{font-weight:400;font-size:1.35rem;margin:2rem 0 .6rem;color:var(--text)}
.prose p{margin:0 0 1rem}
.prose a{border-bottom:1px solid var(--rule)}
.prose a:hover{color:var(--accent)}

/* ---------- Footer ---------- */

.site-footer{
    border-top:1px solid var(--rule-soft);background:var(--bg);
    padding:3rem 0 2rem;margin-top:5rem;color:var(--text-dim);
}
.footer-grid{
    display:grid;gap:2rem;
    grid-template-columns:1.4fr 1fr 1fr;align-items:start;
}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr}}
.footer-section h4{
    font-weight:400;font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;
    color:var(--muted);margin:0 0 .85rem;
}
.footer-section ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
.footer-section a{font-size:.95rem;color:var(--text-dim);border:none}
.footer-section a:hover{color:var(--accent)}
.footer-wordmark{font-size:1.05rem;color:var(--text);border:none;display:block;margin-bottom:.4rem}
.footer-tagline{font-size:.9rem;color:var(--text-dim);max-width:36ch;margin:0}
.footer-bottom{
    border-top:1px solid var(--rule-soft);margin-top:2.5rem;padding-top:1.25rem;
    font-size:.78rem;color:var(--muted);
}

/* ---------- 404 ---------- */
.notfound{padding:5rem 0;text-align:center}
.notfound h1{font-weight:400;font-size:2.5rem;margin:0 0 1rem}
.notfound p{color:var(--text-dim);max-width:48ch;margin:0 auto 1.25rem}