/* =========================================================
   NCSL 2026 — National Conference on School Libraries
   Shared stylesheet
   ========================================================= */

:root{
  --navy:#16264f;
  --navy-deep:#0d1730;
  --cream:#faf3e6;
  --cream-warm:#f2e6cf;
  --paper:#fffdf8;
  --terracotta:#c1592e;
  --terracotta-deep:#a8471f;
  --gold:#c69a2f;
  --maroon:#7a2a2a;
  --ink:#26241f;
  --slate:#5c6178;
  --line: rgba(22,38,79,0.14);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

*{ scroll-behavior:smooth; }

body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  overflow-x:hidden;
}

::selection{ background: var(--gold); color:var(--navy-deep); }

h1,h2,h3,h4,.display-serif{
  font-family: var(--serif);
  font-weight:600;
  color: var(--navy-deep);
  letter-spacing:-0.01em;
}

.eyebrow{
  font-family: var(--mono);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.72rem;
  font-weight:600;
  color: var(--terracotta-deep);
}
.eyebrow.on-dark{ color: var(--gold); }

a{ color: var(--terracotta-deep); }
a:hover{ color: var(--terracotta); }

/* ---------- Spine (desktop) ---------- */
.spine{
  position:fixed; left:0; top:0; bottom:0; width:34px;
  background: var(--navy-deep); z-index: 1040;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom: 22px;
}
.spine span{
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size:0.68rem; letter-spacing:0.22em;
  color: rgba(250,243,230,0.65); text-transform:uppercase; white-space:nowrap;
}
.spine .dot{ width:7px;height:7px;border-radius:50%; background: var(--gold); margin-bottom:14px; flex-shrink:0; }
@media (min-width:992px){ body{ padding-left:34px; } }

/* ---------- Navbar ---------- */
.navbar-ncsl{
  background: rgba(250,243,230,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
  padding-top:.7rem; padding-bottom:.7rem;
}
.brand-mark{ display:flex; align-items:center; gap:.65rem; }
.brand-mark .emblem{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  color:var(--navy); letter-spacing:0.03em; line-height:1;
}
.brand-mark .brand-text .t1{ font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--navy-deep); line-height:1.1; }
.brand-mark .brand-text .t2{ font-family:var(--mono); font-size:.65rem; letter-spacing:.12em; color:var(--slate); text-transform:uppercase; }
.navbar-nav .nav-link{ font-size:.85rem; font-weight:600; color:var(--navy) !important; padding:.5rem .75rem !important; }
.navbar-nav .nav-link:hover{ color:var(--terracotta-deep) !important; }
.navbar-nav .nav-link.active{ color:var(--terracotta-deep) !important; }
.btn-terracotta{
  background:var(--terracotta); border:none; color:var(--paper);
  font-weight:600; font-size:.85rem; padding:.55rem 1.2rem; border-radius:2px; letter-spacing:.02em;
}
.btn-terracotta:hover{ background:var(--terracotta-deep); color:var(--paper); }
.btn-outline-navy{
  border:1.5px solid var(--navy); color:var(--navy); font-weight:600; font-size:.85rem;
  padding:.5rem 1.15rem; border-radius:2px;
}
.btn-outline-navy:hover{ background:var(--navy); color:var(--cream); }

/* ---------- Hero (home) ---------- */
.hero{
  padding: 6.5rem 0 5rem; position:relative;
  background: radial-gradient(ellipse at top right, rgba(198,154,47,0.14), transparent 55%), var(--cream);
}
.hero h1{ font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height:1.06; }
.hero .lede{ font-size:1.08rem; color:var(--slate); max-width:34rem; line-height:1.6; }
.fact-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); background: var(--paper);
  padding:.5rem .9rem; border-radius:2px; font-size:.82rem; font-weight:600; color:var(--navy);
}
.fact-pill i{ color:var(--terracotta-deep); }

/* Catalog card signature element */
.catalog-card{
  background: var(--paper); border:1px solid rgba(22,38,79,0.2);
  box-shadow: 8px 8px 0 rgba(22,38,79,0.08), 0 18px 40px rgba(22,38,79,0.12);
  padding: 1.9rem 1.9rem 1.5rem; position:relative; max-width: 430px;
  transform: rotate(1.2deg); transition: transform .35s ease;
}
.catalog-card:hover{ transform: rotate(0deg) translateY(-4px); }
.catalog-card::before{
  content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%; background: var(--cream); border:1.5px solid var(--navy);
}
.catalog-card .card-label{ font-family: var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:.15rem; }
.catalog-card .card-value{ font-family: var(--serif); font-size:1.02rem; color:var(--navy-deep); font-weight:600; margin-bottom:.9rem; line-height:1.3; }
.catalog-card .card-value.sm{ font-family: var(--sans); font-weight:500; font-size:.9rem; color:var(--ink); }
.catalog-card hr{ border-top:1px dashed var(--line); margin:.9rem 0; }
.stamp-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.stamp{
  border:1.5px solid var(--terracotta-deep); color:var(--terracotta-deep);
  font-family:var(--mono); font-size:.66rem; font-weight:600; padding:.28rem .5rem; border-radius:2px;
  transform: rotate(-2deg); text-transform:uppercase; letter-spacing:.04em;
}

/* ---------- Interior page banner ---------- */
.page-banner{
  padding: 8.5rem 0 3.2rem;
  background:
    linear-gradient(rgba(13,23,48,0.82), rgba(13,23,48,0.88)),
    var(--navy-deep);
  background-size: cover; background-position:center;
  color: var(--cream);
}
.page-banner.has-photo{
  background-image:
    linear-gradient(rgba(13,23,48,0.82), rgba(13,23,48,0.88)),
    var(--photo-url, none);
}
.page-banner h1{ color: var(--cream); font-size: clamp(2rem, 3.6vw, 2.9rem); }
.page-banner p{ color: rgba(250,243,230,0.75); max-width:40rem; }
.breadcrumb-ncsl{
  font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(250,243,230,0.55);
}
.breadcrumb-ncsl a{ color: rgba(250,243,230,0.75); }
.breadcrumb-ncsl a:hover{ color: var(--gold); }

/* ---------- Sections general ---------- */
section{ padding: 5rem 0; }
.section-cream{ background: var(--cream); }
.section-paper{ background: var(--paper); }
.section-navy{ background: var(--navy-deep); color: rgba(250,243,230,0.88); }
.section-navy h2, .section-navy h3, .section-navy h4{ color: var(--cream); }
.section-navy .slate-on-dark{ color: rgba(250,243,230,0.65); }

.divider-rule{ width:46px; height:3px; background: var(--terracotta); margin: .9rem 0 1.4rem; }
.section-navy .divider-rule{ background: var(--gold); }

.lead-text{ color: var(--slate); font-size:1.05rem; line-height:1.7; }

/* stat strip */
.stat-box{ text-align:center; padding: 1.2rem .5rem; border-left:1px solid var(--line); }
.stat-box:first-child{ border-left:none; }
.stat-box .num{ font-family:var(--serif); font-size:2.1rem; font-weight:700; color:var(--terracotta-deep); }
.stat-box .lbl{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }

/* Theme catalog cards (overview grid) */
.theme-card{
  background: var(--paper); border:1px solid var(--line); border-top: 4px solid var(--terracotta);
  padding: 1.8rem 1.6rem; height:100%; position:relative;
  transition: box-shadow .25s ease, transform .25s ease;
  text-decoration:none; display:block; color:inherit;
}
.theme-card:hover{ box-shadow: 0 16px 32px rgba(22,38,79,0.12); transform: translateY(-3px); color:inherit; }
.theme-card .dewey{ font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--slate); display:flex; align-items:center; gap:.4rem; margin-bottom:.6rem; }
.theme-card .dewey .num-badge{ background: var(--navy-deep); color: var(--cream); font-weight:600; padding:.15rem .48rem; border-radius:2px; font-size:.7rem; }
.theme-card h4{ font-size:1.18rem; margin-bottom:.6rem; }
.theme-card p{ font-size:.9rem; color:var(--slate); line-height:1.6; }
.theme-card .subtoggle{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--terracotta-deep); font-weight:600; display:inline-flex; align-items:center; gap:.35rem;
}
.theme-card .sub-list{ margin-top:.9rem; padding-top:.9rem; border-top:1px dashed var(--line); font-size:.85rem; }
.theme-card .sub-list ul{ padding-left:1.1rem; margin-bottom:0; }
.theme-card .sub-list li{ margin-bottom:.35rem; color:var(--ink); }

/* Theme DETAIL page */
.theme-hero-number{
  font-family: var(--serif); font-weight:700; font-size:5.5rem; line-height:1;
  color: rgba(198,154,47,0.35);
}
.dewey-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1.5px solid var(--gold); color: var(--gold);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.35rem .75rem; border-radius:2px;
}
.subtheme-list{ list-style:none; padding:0; margin:0; }
.subtheme-list li{
  display:flex; gap:.9rem; padding: .9rem 0; border-bottom:1px solid var(--line);
  font-size:.98rem; color:var(--ink);
}
.subtheme-list li:last-child{ border-bottom:none; }
.subtheme-list .idx{
  font-family:var(--mono); font-size:.78rem; color:var(--terracotta-deep); font-weight:700; flex-shrink:0; width:1.6rem; padding-top:.15rem;
}
.theme-pagination{
  display:flex; justify-content:space-between; align-items:stretch; gap:1rem; flex-wrap:wrap;
}
.theme-pagination a{
  flex:1; min-width:220px; text-decoration:none; color:inherit;
  border:1px solid var(--line); background:var(--paper); padding:1.1rem 1.3rem;
  display:flex; flex-direction:column; gap:.2rem; transition: box-shadow .2s ease;
}
.theme-pagination a:hover{ box-shadow: 0 10px 24px rgba(22,38,79,0.1); }
.theme-pagination .dir{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.theme-pagination .ttl{ font-family:var(--serif); font-weight:600; color:var(--navy-deep); font-size:1.02rem; }
.theme-pagination a.next{ text-align:right; align-items:flex-end; }

/* showcase panels */
.showcase-panel{ background: var(--navy); color: var(--cream); padding: 2.2rem; height:100%; position:relative; border: 1px solid rgba(250,243,230,0.12); }
.showcase-panel .roman{ font-family:var(--serif); font-size:2.6rem; color: rgba(198,154,47,0.55); line-height:1; font-weight:700; }
.showcase-panel h4{ color:var(--cream); margin-top:.6rem; }
.showcase-panel p{ color: rgba(250,243,230,0.78); font-size:.94rem; line-height:1.65; }

/* focus area mini cards */
.focus-card{ background: var(--cream-warm); padding: 1.4rem 1.3rem; border-radius:2px; height:100%; }
.focus-card i{ color: var(--terracotta-deep); font-size:1.3rem; margin-bottom:.6rem; display:block; }
.focus-card h5{ font-family:var(--serif); font-size:1.02rem; color:var(--navy-deep); margin-bottom:.5rem; }
.focus-card ul{ font-size:.85rem; color:var(--slate); padding-left:1.05rem; margin-bottom:0; }
.focus-card li{ margin-bottom:.25rem; }

/* Submission table */
.table-ledger{ background: var(--paper); border:1px solid var(--line); }
.table-ledger th{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--terracotta-deep); background: var(--cream-warm);
  width: 190px; vertical-align:middle; border-color:var(--line) !important;
}
.table-ledger td{ font-size:.92rem; color:var(--ink); vertical-align:middle; border-color:var(--line) !important; }

/* timeline */
.timeline-wrap{ position:relative; }
.timeline-track{ position:absolute; top:26px; left:0; right:0; height:2px; background: var(--line); display:none; }
@media(min-width:768px){ .timeline-track{ display:block; } }
.due-stamp{ text-align:center; position:relative; z-index:2; }
.due-stamp .ring{
  width:52px;height:52px;border-radius:50%; border:2px solid var(--terracotta);
  display:flex; align-items:center; justify-content:center; margin:0 auto .9rem; background:var(--cream);
  font-family:var(--mono); font-size:.68rem; color:var(--terracotta-deep); font-weight:700;
}
.due-stamp.final .ring{ border-color:var(--navy); color:var(--navy); }
.due-stamp .due-label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-bottom:.3rem;}
.due-stamp .due-date{ font-family:var(--serif); font-weight:700; color:var(--navy-deep); font-size:1.15rem; }

/* accordion */
.accordion-ncsl .accordion-item{ background:transparent; border:1px solid var(--line); margin-bottom:.7rem; border-radius:0; }
.accordion-ncsl .accordion-button{ font-family:var(--serif); font-weight:600; color:var(--navy-deep); background:var(--paper); border-radius:0; font-size:1rem; }
.accordion-ncsl .accordion-button:not(.collapsed){ background:var(--cream-warm); color:var(--navy-deep); box-shadow:none; }
.accordion-ncsl .accordion-button:focus{ box-shadow:none; border-color:var(--line); }
.accordion-ncsl .accordion-body{ font-size:.92rem; color:var(--slate); background:var(--paper); }
.accordion-ncsl .accordion-body ul{ padding-left:1.1rem; }
.accordion-ncsl .accordion-body li{ margin-bottom:.4rem; }

/* council */
.council-card{ background: var(--paper); border:1px solid var(--line); padding:1.5rem 1.3rem; text-align:center; height:100%; }
.council-card .role{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terracotta-deep); margin-bottom:.5rem; }
.council-card .name{ font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--navy-deep); }
.council-card .org{ font-size:.82rem; color:var(--slate); }
.avatar-ring{
  width:64px; height:64px; border-radius:50%; margin:0 auto .8rem; border:1.5px solid var(--line); background: var(--cream-warm);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; color:var(--navy-deep); font-size:1.3rem;
}

/* gallery */
.gallery-item{ overflow:hidden; border:1px solid var(--line); position:relative; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(transparent, rgba(13,23,48,0.85));
  color: var(--cream); font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding: 1.4rem .8rem .6rem;
}

/* contact */
.contact-card{ background: var(--paper); border:1px solid var(--line); padding:1.6rem; height:100%; }
.contact-card i{ font-size:1.4rem; color:var(--terracotta-deep); margin-bottom:.6rem; display:block; }
.contact-card h5{ font-family:var(--serif); font-size:1.05rem; color:var(--navy-deep); }
.form-control{ border-radius:0; border-color: var(--line); }
.form-control:focus{ border-color: var(--terracotta); box-shadow: 0 0 0 .2rem rgba(193,89,46,0.12); }
.form-label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); }

/* footer */
footer{ background: var(--navy-deep); color: rgba(250,243,230,0.7); padding: 3.4rem 0 2rem; }
footer h5{ color: var(--cream); font-family:var(--serif); }
footer a{ color: rgba(250,243,230,0.75); text-decoration:none; }
footer a:hover{ color: var(--gold); }
footer .fine{ font-size:.78rem; color: rgba(250,243,230,0.45); }
.footer-rule{ border-top:1px solid rgba(250,243,230,0.14); margin: 2rem 0 1.4rem; }

/* scroll reveal */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } * { scroll-behavior:auto; } }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{ background: var(--navy); border-radius:6px; }

.back-to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:1030;
  width:44px; height:44px; border-radius:50%; background:var(--navy-deep); color:var(--cream);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,0.25);
  opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s ease;
  text-decoration:none;
}
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ background:var(--terracotta); color:var(--cream); }

/* =========================================================
   Announcement popup — deadline extension banner
   ========================================================= */
.announce-overlay{
  position:fixed; inset:0; z-index:2000;
  background: rgba(13,23,48,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding: 1.25rem;
  opacity:0; visibility:hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.announce-overlay.show{ opacity:1; visibility:visible; }

.announce-modal{
  position:relative;
  width:100%; max-width:460px;
  background: linear-gradient(165deg, var(--paper) 0%, var(--cream-warm) 100%);
  border-radius:6px;
  padding: 2.5rem 2.1rem 2.1rem;
  text-align:center;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(13,23,48,0.5), 0 0 0 1px rgba(198,154,47,0.3), 0 0 60px rgba(198,154,47,0.12);
  transform: scale(.82) translateY(26px);
  opacity:0;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
}
.announce-overlay.show .announce-modal{ transform:scale(1) translateY(0); opacity:1; }

.announce-modal::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:5px;
  background: linear-gradient(90deg, var(--terracotta) 0 33.33%, #f4ede0 33.33% 66.66%, #157a4a 66.66% 100%);
}

.announce-glow{
  position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(198,154,47,0.35), transparent 70%);
  pointer-events:none;
  animation: announce-pulse 3s ease-in-out infinite;
}
@keyframes announce-pulse{
  0%,100%{ opacity:.55; transform:translateX(-50%) scale(1); }
  50%{ opacity:.9; transform:translateX(-50%) scale(1.12); }
}

.announce-close{
  position:absolute; top:.85rem; right:.85rem; z-index:2;
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background: var(--paper); color:var(--navy);
  font-size:1.25rem; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .2s ease;
}
.announce-close:hover{ background:var(--navy-deep); color:var(--cream); transform:rotate(90deg); border-color:var(--navy-deep); }

.announce-ribbon{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--terracotta); color: var(--paper);
  font-family: var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:.4rem 1rem; border-radius:20px; margin-bottom:1.2rem;
  box-shadow: 0 6px 18px rgba(193,89,46,0.45);
  animation: announce-badge 2.2s ease-in-out infinite;
}
@keyframes announce-badge{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

.announce-icon{
  position:relative; z-index:2;
  width:72px; height:72px; border-radius:50%; margin: 0 auto 1rem;
  background: radial-gradient(circle, rgba(198,154,47,0.28), rgba(198,154,47,0.02) 72%);
  border: 1.5px solid rgba(198,154,47,0.4);
  display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; color: var(--gold);
  animation: announce-float 2.8s ease-in-out infinite;
}
@keyframes announce-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

.announce-modal h3{ position:relative; z-index:2; font-size:1.65rem; margin: .2rem 0 .55rem; }
.announce-modal .announce-text{ position:relative; z-index:2; color:var(--slate); font-size:.96rem; margin-bottom:1.3rem; line-height:1.55; }

.announce-dates{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap;
  background: var(--navy-deep);
  padding: 1rem 1.1rem; border-radius:6px;
  box-shadow: inset 0 0 0 1px rgba(198,154,47,0.25);
}
.announce-dates .old-date{
  font-family: var(--mono); font-size:.82rem; color: rgba(250,243,230,0.48);
  text-decoration: line-through; text-decoration-color: var(--terracotta);
}
.announce-dates i{ color: rgba(250,243,230,0.5); font-size:.85rem; }
.announce-dates .new-date{
  font-family: var(--serif); font-weight:700; font-size:1.28rem; color: var(--gold);
  letter-spacing:.01em;
}

.announce-actions{ position:relative; z-index:2; }

.announce-confetti{
  position:absolute; border-radius:50%; pointer-events:none; opacity:.8;
}
@keyframes announce-drift{
  0%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(180deg); }
  100%{ transform: translateY(0) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .announce-ribbon, .announce-icon, .announce-glow{ animation:none; }
}