/* ============================================================
   The Alustiza Collection — shared stylesheet
   Palette derived from the source catalog PDFs: charcoal/navy
   covers with muted teal/purple/cream illustration, bold black
   sans-serif headers on white content pages.
   ============================================================ */

:root{
  --ink: #17181c;
  --paper: #ffffff;
  --paper-warm: #f7f5f0;
  --charcoal: #1c1e24;
  --charcoal-2: #24262d;
  --rule: #17181c;
  --teal: #7fada2;
  --purple: #6f6f95;
  --cream: #e8e2cf;
  --muted: #5b5d63;
  --hairline: #e3e1da;
  --max: 1100px;
  --font: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

img{ max-width:100%; display:block; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Site header / nav ---------- */

.site-header{
  background: var(--charcoal);
  color: #f2f1ec;
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.brand{
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand span{
  display:block;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 2px;
}

.nav-catalogs{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nav-catalogs a, .nav-catalogs span{
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.16);
}

.nav-catalogs a{
  background: transparent;
}
.nav-catalogs a:hover{
  background: rgba(255,255,255,0.08);
}
.nav-catalogs a.active{
  background: var(--teal);
  color: #10231d;
  border-color: var(--teal);
}
.nav-catalogs span.disabled{
  color: rgba(255,255,255,0.32);
  border-color: rgba(255,255,255,0.08);
  cursor: default;
}

.nav-extra{
  display:flex;
  gap: 14px;
  font-size: 13px;
}
.nav-extra a{ opacity: 0.85; }
.nav-extra a:hover{ opacity: 1; text-decoration: underline; }

/* ---------- Site search ---------- */

.site-search{
  position: relative;
}

.site-search input{
  width: 220px;
  max-width: 60vw;
  font-family: var(--font);
  font-size: 13px;
  color: #f2f1ec;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  padding: 7px 12px;
  outline: none;
  transition: background 0.15s, border-color 0.15s;
}
.site-search input::placeholder{ color: rgba(242,241,236,0.5); }
.site-search input:focus{
  background: rgba(255,255,255,0.13);
  border-color: var(--teal);
}
/* remove native search input decorations for a consistent look */
.site-search input::-webkit-search-decoration,
.site-search input::-webkit-search-cancel-button{
  -webkit-appearance: none;
}

.search-results{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: 80vw;
  max-height: 420px;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  z-index: 60;
}

.search-empty{
  padding: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.search-result{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
}
.search-result:last-child{ border-bottom: none; }
.search-result:hover,
.search-result.active{
  background: var(--paper-warm);
}
.search-result-feature{ border-left: 3px solid var(--purple); }

.search-result img{
  width: 34px;
  height: 46px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  flex-shrink: 0;
  background: var(--paper-warm);
}

.search-result-text{
  display:flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-result-title{
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta{
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px){
  .site-search input{ width: 150px; }
  .search-results{ right: auto; left: 0; }
}

/* ---------- Hero (dark, cover-art) ---------- */

.hero{
  position: relative;
  background: var(--charcoal) url("images/hero-bg.jpg") center 30%/cover no-repeat;
  color: #f4f3ee;
  padding: 96px 0 80px;
}

.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,21,26,0.35) 0%, rgba(20,21,26,0.72) 100%);
  pointer-events:none;
}

.hero .wrap{ position:relative; z-index:1; }

.eyebrow{
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 10px;
}

.hero h1{
  font-size: 52px;
  line-height: 1.05;
  font-weight: 800;
  margin: 0 0 8px;
  border-bottom: 4px solid #f4f3ee;
  display: inline-block;
  padding-bottom: 10px;
}

.hero .sub{
  font-size: 17px;
  color: #d9d7ce;
  max-width: 640px;
  margin: 18px 0 0;
  line-height: 1.5;
}

.hero .meta{
  margin-top: 28px;
  font-size: 13px;
  color: #b9b7ae;
  letter-spacing: 0.03em;
}

.hero.small{
  padding: 64px 0 56px;
}
.hero.small h1{ font-size: 38px; }

/* ---------- Section headers (catalog interior style) ---------- */

.section-head{
  border-top: 6px solid var(--rule);
  padding-top: 14px;
  margin: 64px 0 28px;
}
.section-head h2{
  font-size: 34px;
  font-weight: 800;
  margin: 0;
}
.section-head .range{
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

.wrap > .section-head:first-of-type{ margin-top: 40px; }

main.wrap > .book-grid:first-child{ margin-top: 88px; }
main.wrap > .feature-index-group:first-child{ margin-top: 88px; }

/* ---------- Book grid ---------- */

.book-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 28px;
  margin-bottom: 8px;
}

@media (max-width: 900px){
  .book-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .book-grid{ grid-template-columns: 1fr; }
}

/* Highlight a book-card when linked to directly (e.g. from search results) */
.book-card:target{
  outline: 3px solid var(--teal);
  outline-offset: 6px;
  border-radius: 4px;
  animation: target-fade 2.4s ease-out 1;
}
@keyframes target-fade{
  0%{ outline-color: var(--teal); }
  70%{ outline-color: var(--teal); }
  100%{ outline-color: transparent; }
}

.book-card{
  /* CSS Grid items default to min-width: auto, which resolves to their
     content's min-content size. .feature-chip-title uses white-space: nowrap
     (needed for its ellipsis truncation), and without this reset that
     unbroken text becomes .book-card's automatic minimum width -- which
     widens the ENTIRE grid column (all 1fr tracks default to minmax(auto,1fr))
     to fit the longest chip title anywhere in that column, not just the
     card carrying it. That's why some .cover images render larger than
     others: the column itself is wider, not the image. min-width: 0 lets
     .book-card shrink to the column's normal 1fr share; the chip title's
     own overflow:hidden + text-overflow:ellipsis then truncates as designed. */
  min-width: 0;
}

.book-card .year{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

.book-card .cover{
  background: var(--paper-warm);
  border: 1px solid var(--hairline);
  aspect-ratio: 3 / 4;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.book-card .cover img{
  width:100%; height:100%;
  object-fit: cover;
}

.book-card h3{
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 2px;
  line-height: 1.3;
}
.book-card .author{
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--ink);
}
.book-card .note{
  font-size: 13px;
  line-height: 1.5;
  color: #2f3136;
  margin: 0 0 10px;
}
.book-card .biblio{
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.book-card .biblio div{ margin: 0; }

/* ---------- Sub-section head (for large catalogs w/ internal groupings) ---------- */

.section-head.sub{
  border-top: 3px solid var(--hairline);
  padding-top: 10px;
  margin: 44px 0 22px;
}
.section-head.sub h3{
  font-size: 21px;
  font-weight: 800;
  margin: 0;
}
.section-head.sub .range{
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

/* ---------- No-image placeholder cover ---------- */

.book-card .cover.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.book-card .cover.placeholder span{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 14px;
}

.book-card .provenance{
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 8px;
}

/* ---------- Special feature spread ---------- */

.feature{
  position: relative;
  margin: 72px 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--charcoal-2);
}
.feature-bg{
  position:relative;
  background-size: cover;
  background-position: center;
  padding: 40px;
}
.feature-bg::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(235,231,220,0.72);
}
.feature-head{
  position:relative;
  display:inline-block;
  background: #fff;
  border-top: 6px solid var(--rule);
  padding: 10px 18px 14px;
  margin-bottom: 22px;
}
.feature-head .eyebrow{ color: var(--purple); margin-bottom: 2px;}
.feature-head h2{ font-size: 30px; font-weight: 800; margin: 0; }
.feature-head .dek{ font-size: 15px; color: var(--muted); margin-top: 2px; }

.feature-body{
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 800px){
  .feature-body{ grid-template-columns: 1fr; }
}

.feature-text{
  columns: 2;
  column-gap: 28px;
  font-size: 14.5px;
  line-height: 1.6;
  background: #fff;
  padding: 20px 24px;
}
.feature-text p{ margin: 0 0 14px; break-inside: avoid; }
.feature-text p.note{ font-style: italic; color: var(--muted); font-size: 13px; }

.feature-text.single-col{ columns: 1; }

@media (max-width: 700px){
  .feature-text{ columns: 1; }
}

.feature-aside{
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.feature-aside figure{ margin:0; background:#fff; padding: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.feature-aside figcaption{
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  padding: 8px 4px 2px;
}

/* ---------- Long-form feature article (deep-dive spreads) ---------- */

.feature-article{
  position: relative;
  background: #fff;
  padding: 8px 40px 40px;
}
@media (max-width: 700px){
  .feature-article{ padding: 8px 20px 32px; }
}

.feature-section{
  max-width: 760px;
  margin: 40px auto 0;
}
.feature-section:first-child{ margin-top: 0; }

.feature-section h3{
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 4px;
  padding-top: 18px;
  border-top: 3px solid var(--rule);
}
.feature-section .kicker{
  display:block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 6px;
}
.feature-section p{
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 14px;
}
.feature-section p.note{ font-style: italic; color: var(--muted); font-size: 13px; }

/* specimen ledger / chapter crosswalk tables */
.feature-table-wrap{
  max-width: 940px;
  margin: 18px auto 0;
  overflow-x: auto;
}
table.feature-ledger, table.feature-crosswalk{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.feature-ledger caption, table.feature-crosswalk caption{
  caption-side: top;
  text-align: left;
  font-style: italic;
  color: var(--muted);
  font-size: 12.5px;
  margin-bottom: 8px;
}
table.feature-ledger th, table.feature-ledger td,
table.feature-crosswalk th, table.feature-crosswalk td{
  border: 1px solid var(--hairline);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
table.feature-ledger thead th, table.feature-crosswalk thead th{
  background: var(--paper-warm);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
table.feature-ledger thead th .yr{
  display:block;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  font-size: 11px;
  margin-top: 2px;
}
table.feature-ledger th[scope="row"]{
  background: var(--paper-warm);
  font-weight: 700;
  white-space: nowrap;
}
table.feature-ledger td.sov{ border-left: 3px solid var(--purple); }

/* side-by-side image comparison pairs */
.feature-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 940px;
  margin: 18px auto 0;
}
@media (max-width: 700px){
  .feature-pair{ grid-template-columns: 1fr; }
}
.feature-pair figure{ margin:0; background:#fff; border: 1px solid var(--hairline); padding: 8px; }
.feature-pair figcaption{
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  padding: 8px 4px 0;
}

/* small figure gallery (marks of use, provenance) */
.feature-gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 940px;
  margin: 18px auto 0;
}
@media (max-width: 700px){
  .feature-gallery{ grid-template-columns: repeat(2, 1fr); }
}
.feature-gallery figure{ margin:0; background:#fff; border: 1px solid var(--hairline); padding: 6px; }
.feature-gallery figcaption{
  font-size: 11.5px;
  font-style: italic;
  color: var(--muted);
  padding: 6px 2px 0;
}

.feature-sources{
  max-width: 760px;
  margin: 32px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--muted);
}
.feature-sources p{ margin: 0 0 4px; }

/* ---------- Featured chip (on book-cards, links to features.html) ---------- */

.feature-chip{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--purple);
  border-radius: 3px;
  background: #fff;
  transition: background 0.15s;
}
.feature-chip:hover{ background: var(--paper-warm); }
.feature-chip img{
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--paper-warm);
}
.feature-chip-text{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.feature-chip-eyebrow{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
}
.feature-chip-title{
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-chip-arrow{
  margin-left: auto;
  color: var(--muted);
  font-size: 15px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.feature-chip:hover .feature-chip-arrow{ transform: translateX(2px); }

/* ---------- Features hub (features.html) index grid ---------- */

.feature-index-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 8px;
}
@media (max-width: 900px){
  .feature-index-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .feature-index-grid{ grid-template-columns: 1fr; }
}

.feature-index-card{
  display: block;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s, transform 0.15s;
}
.feature-index-card:hover{
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.feature-index-thumb{
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid var(--purple);
}
.feature-index-text{ padding: 12px 14px 16px; }
.feature-index-cat{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple);
  margin: 0 0 4px;
}
.feature-index-text h3{
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 4px;
  line-height: 1.3;
}
.feature-index-dek{
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

.feature-index-group + .feature-index-group{ margin-top: 8px; }
.feature-index-group-head{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 32px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.feature-index-group:first-child .feature-index-group-head{ border-top: none; padding-top: 0; margin-top: 0; }

/* ---------- Catalog index / home cards ---------- */

.catalog-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
  margin: 48px 0 64px;
}

.catalog-card{
  border: 1px solid var(--hairline);
  padding: 22px 20px;
  min-height: 180px;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  transition: box-shadow .15s ease, transform .15s ease;
}
.catalog-card .letter{
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.catalog-card h3{
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
  line-height: 1.2;
}
.catalog-card .years{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.catalog-card .status{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.catalog-card.active{
  cursor: pointer;
}
.catalog-card.active:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.catalog-card.active .status{ color: #2f7a63; }
.catalog-card.disabled{
  background: var(--paper-warm);
  color: var(--muted);
}
.catalog-card.disabled .status{ color: #a3a1996; color:#a19f95; }

/* ---------- Prose (about page) ---------- */

.prose{
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
}
.prose h2{
  font-size: 26px;
  font-weight: 800;
  border-top: 5px solid var(--rule);
  padding-top: 12px;
  margin: 56px 0 18px;
}
.prose h2:first-child{ margin-top: 0; }
.prose p{ margin: 0 0 18px; }
.prose .refs p{ font-size: 14.5px; color: var(--muted); }
.prose .refs p b{ color: var(--ink); }

/* ---------- Jump nav (catalog page in-page contents) ---------- */

.jumpnav{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin: 36px 0 0;
}
.jumpnav a{
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.jumpnav a:hover{ background: var(--paper-warm); }

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

.site-footer{
  background: var(--charcoal);
  color: #b9b7ae;
  padding: 40px 0;
  margin-top: 96px;
  font-size: 13px;
}
.site-footer a{ color: #f2f1ec; }
.site-footer .wrap{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}