/* ==========================================================================
   Novitium Encyclopedia — styles
   Matches the Novitium "Technical Library" look: deep navy, golden-hour
   imagery, bold orange uppercase headlines (Archivo), monospace body
   (IBM Plex Mono), and · / | separators.
   ========================================================================== */
:root {
  --navy:        #0a1b30;   /* page background */
  --navy-2:      #0e2440;   /* panels / cards */
  --navy-3:      #122c4f;   /* elevated / hover */
  --navy-line:   rgba(255,255,255,.09);
  --navy-line-2: rgba(255,255,255,.16);
  --orange:      #f5912a;
  --orange-2:    #ffb25a;
  --orange-dark: #db7a16;
  --cream:       #eef3fa;
  --muted:       #a7b6cc;
  --muted-2:     #76869e;
  --shadow:      0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:   0 28px 70px rgba(0,0,0,.5);
  --radius:      14px;
  --radius-sm:   10px;
  --maxw:        1280px;
  --head: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mono);
  color: var(--cream);
  background: var(--navy);
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--head); font-weight: 800; letter-spacing: .01em; }
a { color: var(--orange-2); text-decoration: none; }
a:hover { color: var(--orange); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
.eyebrow, .kicker { font-family: var(--mono); }

/* ---------- Header ---------- */
.site-header {
  background:
    radial-gradient(135% 340% at 72% -140%, rgba(245,145,42,.34), rgba(245,145,42,0) 52%),
    radial-gradient(90% 260% at 22% -120%, rgba(245,145,42,.12), rgba(245,145,42,0) 58%),
    linear-gradient(180deg, rgba(8,20,38,.62) 0%, rgba(8,20,38,.88) 100%);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--navy-line);
  position: sticky; top: 0; z-index: 40;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand:hover { color: inherit; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: rgba(245,145,42,.12); border: 1px solid rgba(245,145,42,.35);
  display: grid; place-items: center;
}
.brand-text strong { display: block; font-family: var(--head); font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.brand-text span { font-size: 11px; color: var(--muted-2); letter-spacing: .14em; text-transform: uppercase; }
.nav { display: flex; gap: 28px; align-items: center; }
.nav a { color: var(--muted); font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.nav a:hover { color: var(--orange); text-decoration: none; }
.domain-pill {
  font-size: 12px; font-weight: 600; color: var(--orange-2); letter-spacing: .04em;
  background: rgba(245,145,42,.10); border: 1px solid rgba(245,145,42,.40); padding: 7px 14px; border-radius: 999px;
}

/* ---------- Title header ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: 520px; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("assets/hero-scene.svg") center/cover no-repeat, var(--navy);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 62% at 52% 60%, rgba(245,145,42,.24), rgba(245,145,42,0) 62%),
    radial-gradient(82% 80% at 50% 40%, rgba(8,20,38,.52), rgba(8,20,38,0) 70%),
    linear-gradient(180deg, rgba(8,20,38,.46) 0%, rgba(8,20,38,.08) 46%, rgba(8,20,38,.66) 100%);
}
.hero-inner { position: relative; padding: 92px 0; width: 100%; }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--orange-2);
  border: 1px solid rgba(245,145,42,.4); background: rgba(245,145,42,.08);
  padding: 7px 14px; border-radius: 6px; margin-bottom: 26px;
}
.hero h1 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 700; font-optical-sizing: auto;
  font-size: clamp(52px, 9.5vw, 132px); line-height: .94; margin: 0 0 24px;
  text-transform: uppercase; letter-spacing: -.015em; color: var(--cream);
  text-shadow: 0 6px 46px rgba(0,0,0,.55);
}
.hero h1 .accent { color: var(--orange); font-style: normal; }
.hero .powered-by { font-size: clamp(11px, 1.1vw, 13px); color: var(--muted); letter-spacing: .08em; margin: 0 0 14px; font-style: italic; }
.hero .subtitle { font-size: clamp(13px, 1.5vw, 16px); color: var(--cream); letter-spacing: .08em; margin: 0; }

/* ---------- Search band ---------- */
.search-band { background: var(--navy); border-bottom: 1px solid var(--navy-line); padding: 44px 0 50px; }
.search-band .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.search-band .lede { font-size: 14.5px; color: var(--muted); max-width: 640px; margin: 0 0 24px; }

.search-bar {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: rgba(255,255,255,.04); border: 1px solid var(--navy-line-2);
  border-radius: 12px; padding: 8px 8px 8px 16px; max-width: 760px;
}
.search-bar svg { color: var(--muted); flex: none; }
.search-bar input { border: 0; outline: 0; flex: 1; font-size: 14.5px; color: var(--cream); background: transparent; font-family: var(--mono); }
.search-bar input::placeholder { color: var(--muted-2); }
.search-bar button {
  border: 0; background: var(--orange); color: #0a1b30; font-weight: 700; font-family: var(--head);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 12px 24px; border-radius: 9px; cursor: pointer; font-size: 13px;
}
.search-bar button:hover { background: var(--orange-2); }
.quick-tags { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }
.quick-tags span { font-size: 12px; color: var(--muted-2); letter-spacing: .08em; text-transform: uppercase; margin-right: 2px; }
.quick-tags button {
  background: rgba(255,255,255,.05); color: var(--cream); border: 1px solid var(--navy-line-2);
  border-radius: 7px; padding: 6px 13px; font-size: 12.5px; cursor: pointer; font-family: var(--mono);
}
.quick-tags button:hover { background: rgba(245,145,42,.16); border-color: var(--orange); color: var(--orange-2); }

.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 40px; border-top: 1px solid var(--navy-line); padding-top: 26px; }
.hero-stats .stat { display: flex; flex-direction: column; }
.hero-stats .stat b { font-family: var(--head); font-size: 32px; font-weight: 800; color: var(--orange); line-height: 1; }
.hero-stats .stat span { font-size: 11.5px; color: var(--muted); margin-top: 7px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Featured topics strip ---------- */
.topics-band { background: var(--navy-2); border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); }
.topics-band .wrap { padding-top: 26px; padding-bottom: 26px; }
.topics-band h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .16em; color: var(--orange); margin: 0 0 12px; }
.topics-list { font-family: var(--mono); font-size: 13.5px; color: var(--muted); line-height: 2; }
.topics-list .dot { color: var(--orange); margin: 0 10px; }
.topics-list b { color: var(--cream); font-weight: 500; }

/* ---------- Library ---------- */
.library { padding: 56px 26px 90px; }
.section-head { margin-bottom: 22px; }
.section-head h2 { font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; letter-spacing: .01em; color: var(--orange); margin: 0 0 8px; }
.section-head p { color: var(--muted); margin: 0; font-size: 13.5px; }

/* ---------- Toolbar / dropdown filters ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px;
}
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-label { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-right: 4px; }

.dd { position: relative; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--navy-line-2); color: var(--cream);
  font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .04em;
  padding: 9px 13px; border-radius: 9px; cursor: pointer; transition: border-color .15s, background .15s;
}
.dd-btn:hover { border-color: var(--orange); color: var(--orange-2); }
.dd.open .dd-btn { border-color: var(--orange); background: rgba(245,145,42,.10); color: var(--orange-2); }
.dd-btn .chev { transition: transform .18s ease; color: var(--muted); }
.dd.open .dd-btn .chev { transform: rotate(180deg); }
.dd-count { background: var(--orange); color: #0a1b30; font-size: 11px; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; }
.dd-count[hidden] { display: none; }

.dd-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 252px; background: var(--navy-3); border: 1px solid var(--navy-line-2);
  border-radius: 12px; box-shadow: var(--shadow); padding: 8px;
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .14s, transform .14s;
}
.dd.open .dd-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; font-size: 13px; color: var(--cream); border-radius: 8px; }
.opt:hover { background: rgba(255,255,255,.05); }
.opt input { accent-color: var(--orange); width: 15px; height: 15px; }
.opt .count { margin-left: auto; font-size: 11.5px; color: var(--muted-2); background: rgba(255,255,255,.06); border-radius: 6px; padding: 1px 8px; }

.clear-btn {
  background: transparent; border: 1px dashed var(--navy-line-2); color: var(--orange-2);
  font-family: var(--mono); font-weight: 500; padding: 9px 13px; border-radius: 9px; cursor: pointer; font-size: 12.5px; letter-spacing: .04em;
}
.clear-btn:hover { border-color: var(--orange); background: rgba(245,145,42,.10); }

.toolbar-right { display: flex; align-items: center; gap: 18px; }
.count-label { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }
.count-label b { color: var(--orange); font-family: var(--head); }
.sort { display: flex; align-items: center; gap: 8px; }
.sort label { font-size: 11.5px; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; }
.sort select { padding: 9px 12px; border: 1px solid var(--navy-line-2); border-radius: 9px; background: var(--navy-3); font-size: 13px; color: var(--cream); font-family: var(--mono); cursor: pointer; }

/* Active filter chips */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.active-filters:empty { display: none; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: .03em;
  background: rgba(245,145,42,.10); color: var(--orange-2); border: 1px solid rgba(245,145,42,.4); padding: 5px 8px 5px 12px; border-radius: 7px;
}
.fchip button { border: 0; background: rgba(245,145,42,.2); color: var(--orange-2); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; }
.fchip button:hover { background: var(--orange); color: #0a1b30; }

/* ---------- Grid + cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(326px, 1fr)); gap: 22px; }
.card {
  background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(245,145,42,.45); }

/* Preview / thumbnail */
.card-thumb {
  /* 260px: tall enough for an entire portrait title page to be shown whole
     rather than cropped to a band. Every card uses the same height whether
     it has a real cover or the generated placeholder, so the grid stays on
     one baseline and a placeholder never leaves a gap beside a cover. */
  position: relative; height: 260px; padding: 16px;
  background: linear-gradient(135deg, var(--g1, #1f5fa8), var(--g2, #0a1b30));
  display: flex; align-items: flex-end; overflow: hidden;
}
.card-thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size: 15px 15px; opacity: .45;
}

/* ---------- Real cover page (rendered page 1 of the document) ---------- */

/* A cover card is taller than a placeholder card, because the whole title
   page has to fit inside it rather than being cropped to a band. The extra
   height buys back most of the legibility that switching from a crop to a
   fit would otherwise cost. */
/* Padding is dropped on a cover card because the fitted page positions
   itself against the block's edges. The category gradient underneath is
   kept: most title pages are mostly white, and a blurred white page on its
   own washes out to flat grey against the navy grid. */
.card-thumb.has-cover { padding: 0; }

/* Backdrop: the same cover, blown up, blurred and dimmed, filling the
   whole block. It gives the fitted page something to sit on that is keyed
   to the document's own colours, so the leftover space either side reads
   as depth rather than as empty letterbox bars. Decorative only — the
   real cover carries the alt text (empty, since the title is right below). */
.thumb-blur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* Dimmed hard. A title page is mostly white, and at full strength the
     backdrop turns into a bright panel that fights both the page sitting on
     it and the dark grid around it. Checked against the live library:
     soft-light blending was tried first and pushed the lighter category
     colours (Policy & Incentives is a pale purple) up into lavender, so the
     backdrop is laid on normally and darkened instead. */
  filter: blur(26px) saturate(1.15) brightness(.42);
  /* Just short of opaque, so a little of the category gradient still reads
     through and a white-paged document keeps a hint of its topic colour. */
  opacity: .82;
  /* Scaled up so the blur radius never drags the block's own edges inward
     and leaves a pale halo around the frame. */
  transform: scale(1.25);
  z-index: 0;
  animation: cover-in .25s ease both;
}

/* The cover itself, fitted whole inside the block: nothing is cropped.
   Inset rather than full-bleed — the 40px at the top is the band the two
   chips sit in, so they never land on the document's own words, and the
   14px elsewhere keeps the page from touching the card edge. */
.thumb-img {
  position: absolute; top: 40px; left: 14px;
  /* Sized explicitly rather than by the four insets: an absolutely
     positioned <img> with auto width falls back to its INTRINSIC size and
     spills out of the box, which puts the crop straight back. */
  width: calc(100% - 28px); height: calc(100% - 54px); max-width: none;
  object-fit: contain; object-position: center;
  z-index: 1;
  /* Shadow follows the page silhouette (drop-shadow, not box-shadow), so a
     portrait PDF and a landscape slide both look like a sheet lying on the
     backdrop. */
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
  /* The image fades in only once it has decoded, so a slow cover never
     flashes a half-drawn page over the gradient. */
  animation: cover-in .25s ease both;
}
@keyframes cover-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .thumb-img, .thumb-blur { animation: none }
}

/* With a real cover the decorative layers would fight it, so they go away:
   the dot pattern, the oversized type icon, and the fake page-lines sheet. */
.card-thumb.has-cover::before,
.card-thumb.has-cover .thumb-icon,
.card-thumb.has-cover .thumb-page { display: none; }

/* Both chips ride along the TOP edge on a cover card, in the 40px band the
   fitted page is inset from. They never touch the document's own words,
   which is what the old bottom-left category chip used to do: a title page
   carries its title roughly a third of the way down, and that is exactly
   where a bottom chip landed. Keeping both chips in the inset band lets the
   cover's own title read cleanly underneath. */
.card-thumb.has-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Painted over the blurred backdrop but under the page itself (the page
     carries z-index 1), so it darkens the chip band without hazing the
     cover. Much lighter than before — the backdrop is already dim. */
  background:
    linear-gradient(to bottom, rgba(4,12,24,.42) 0%, rgba(4,12,24,.10) 20%,
                               rgba(4,12,24,0) 30%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
/* Over a photographic background the chips need a firmer plate than the
   translucent one that works on the flat gradient placeholder. */
.card-thumb.has-cover .thumb-type { background: rgba(4,12,24,.78); }
.card-thumb.has-cover .thumb-cat {
  position: absolute; top: 15px; right: 16px; bottom: auto; left: auto;
  background: rgba(4,12,24,.7);
  border-color: rgba(255,255,255,.3);
  backdrop-filter: blur(2px);
  /* "Grid & Interconnection" next to "WHITE PAPER" is a squeeze on the
     narrowest card, so the category truncates rather than wrapping into
     the artwork or shoving the type chip off the edge. */
  max-width: 56%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thumb-icon { position: absolute; top: -18px; right: -12px; color: rgba(255,255,255,.18); }
/* Scaled with the taller block so the placeholder does not look sparse
   next to a card carrying a real cover page. */
.thumb-icon svg { width: 152px; height: 152px; }
.thumb-page {
  position: absolute; right: 18px; bottom: -22px; width: 108px; height: 132px; border-radius: 9px 9px 0 0;
  background: rgba(255,255,255,.92); box-shadow: 0 12px 26px rgba(0,0,0,.4); padding: 12px 12px 0; transform: rotate(3deg);
}
.thumb-page i { display: block; height: 5px; border-radius: 3px; background: #c9d2df; margin-bottom: 6px; }
.thumb-page i:nth-child(1){ width: 60%; background: var(--g2, #0a1b30); opacity:.55; height:7px;}
.thumb-page i:nth-child(2){ width: 92%; } .thumb-page i:nth-child(3){ width: 80%; }
.thumb-page i:nth-child(4){ width: 88%; } .thumb-page i:nth-child(5){ width: 50%; }
.thumb-cat {
  position: relative; z-index: 1; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: #fff; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.28);
  padding: 5px 11px; border-radius: 6px;
}
.thumb-type {
  position: absolute; top: 16px; left: 16px; z-index: 1; font-family: var(--head); font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: rgba(0,0,0,.28); padding: 4px 9px; border-radius: 5px;
}

.card-content { padding: 20px 22px 8px; flex: 1; }
.card-content h3 { font-family: var(--head); font-size: 19px; font-weight: 700; line-height: 1.22; color: var(--cream); margin: 0 0 9px; }
.synopsis { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--navy-line); padding: 3px 9px; border-radius: 6px; }

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid var(--navy-line); margin-top: 6px; }
.author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(245,145,42,.14); border: 1px solid rgba(245,145,42,.4); color: var(--orange-2);
  font-family: var(--head); font-size: 12px; font-weight: 700;
}
.byline { display: flex; flex-direction: column; min-width: 0; }
.byline strong { font-size: 12.5px; font-weight: 500; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.byline small { font-size: 11px; color: var(--muted-2); letter-spacing: .02em; }
.card-foot .open {
  flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--head); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-2); border: 1px solid rgba(245,145,42,.4); background: rgba(245,145,42,.08); padding: 8px 13px; border-radius: 8px;
}
.card-foot .open:hover { background: var(--orange); color: #0a1b30; border-color: var(--orange); }

mark { background: rgba(245,145,42,.32); color: var(--cream); padding: 0 2px; border-radius: 3px; }

.empty { text-align: center; padding: 72px 20px; color: var(--muted); }
.empty h3 { color: var(--orange); margin-bottom: 6px; font-size: 22px; text-transform: uppercase; }

/* ---------- Stay updated band ---------- */
.cta-band { background: var(--navy-2); border-top: 1px solid var(--navy-line); }
.cta-band .wrap { padding: 56px 26px; max-width: 820px; text-align: center; }
.cta-band h2 { font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; color: var(--orange); margin: 0 0 12px; }
.cta-band p { color: var(--muted); margin: 0 auto 24px; max-width: 600px; font-size: 13.5px; }
.cta-form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.cta-form input { flex: 1; background: var(--navy); border: 1px solid var(--navy-line-2); border-radius: 10px; padding: 13px 16px; color: var(--cream); font-family: var(--mono); font-size: 14px; outline: 0; }
.cta-form input:focus { border-color: var(--orange); }
.cta-form button { border: 0; background: var(--orange); color: #0a1b30; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 0 24px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.cta-form button:hover { background: var(--orange-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); border-top: 1px solid var(--navy-line); padding: 44px 0 36px; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.footer-brand strong { font-family: var(--head); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); display: block; margin-bottom: 10px; }
.footer-brand p { margin: 0; max-width: 520px; font-size: 12.5px; color: var(--muted-2); line-height: 1.8; }
.footer-meta { display: flex; flex-direction: column; gap: 10px; font-size: 12px; text-align: right; }
.footer-links { display: flex; gap: 18px; justify-content: flex-end; }
.footer-links a { color: var(--muted); letter-spacing: .04em; }
.footer-links a:hover { color: var(--orange); }
.footer-meta .copy { color: var(--muted-2); letter-spacing: .04em; }

/* ---------- Chatbot ---------- */
.chat-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  display: flex; align-items: center; gap: 11px;
  background: var(--navy-3); color: var(--cream); border: 1px solid var(--navy-line-2); cursor: pointer;
  padding: 8px 18px 8px 8px; border-radius: 999px; box-shadow: var(--shadow-lg);
  font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.chat-fab:hover { border-color: var(--orange); }
.chat-fab img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.chat-fab .ping { position: absolute; top: 6px; left: 42px; width: 12px; height: 12px; background: var(--orange); border: 2px solid var(--navy-3); border-radius: 50%; }

.chat-panel {
  position: fixed; right: 26px; bottom: 26px; z-index: 61;
  width: 388px; max-width: calc(100vw - 32px); height: 580px; max-height: calc(100vh - 52px);
  background: var(--navy-2); border-radius: 18px; box-shadow: var(--shadow-lg);
  display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--navy-line-2);
}
.chat-panel.open { display: flex; }
.chat-head { background: var(--navy-3); color: #fff; padding: 15px 18px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--navy-line); }
.chat-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(245,145,42,.5); }
.chat-head .who strong { display: block; font-family: var(--head); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.chat-head .who span { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.chat-head .who .status { color: #6ee0a0; }
.chat-head .close { margin-left: auto; background: rgba(255,255,255,.08); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 17px; }
.chat-head .close:hover { background: rgba(255,255,255,.18); }

.chat-body { flex: 1; overflow-y: auto; padding: 18px; background: var(--navy); display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 8px; max-width: 90%; }
.msg .bubble { padding: 11px 14px; border-radius: 13px; font-size: 13px; line-height: 1.55; font-family: var(--mono); }
.msg.bot { align-self: flex-start; }
.msg.bot .bubble { background: var(--navy-2); border: 1px solid var(--navy-line); border-bottom-left-radius: 4px; color: var(--cream); }
.msg.bot img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; align-self: flex-end; }
.msg.user { align-self: flex-end; }
.msg.user .bubble { background: var(--orange); color: #0a1b30; border-bottom-right-radius: 4px; }
.msg .bubble a { color: var(--orange-2); font-weight: 600; }
.msg.user .bubble a { color: #0a1b30; text-decoration: underline; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 12px; background: var(--navy); }
.chips button { background: var(--navy-2); border: 1px solid var(--navy-line-2); color: var(--cream); font-family: var(--mono); font-size: 12px; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.chips button:hover { border-color: var(--orange); color: var(--orange-2); }

.typing .bubble { color: var(--muted); }
.typing .dot { display: inline-block; width: 6px; height: 6px; margin: 0 1px; background: var(--muted); border-radius: 50%; animation: blink 1.2s infinite both; }
.typing .dot:nth-child(2){ animation-delay: .2s } .typing .dot:nth-child(3){ animation-delay: .4s }
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--navy-line); background: var(--navy-2); }
.chat-input input { flex: 1; background: var(--navy); border: 1px solid var(--navy-line-2); border-radius: 10px; padding: 12px 14px; font-size: 13px; outline: 0; color: var(--cream); font-family: var(--mono); }
.chat-input input:focus { border-color: var(--orange); }
.chat-input button { border: 0; background: var(--orange); color: #0a1b30; border-radius: 10px; width: 46px; cursor: pointer; font-size: 17px; }
.chat-input button:hover { background: var(--orange-2); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .nav { display: none; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-right { justify-content: space-between; }
  .hero { min-height: 520px; }
  .grid { grid-template-columns: 1fr; }
  /* One card per row means a much wider block, and a fitted portrait page is
     sized by height, not width — so the block grows to keep the cover from
     shrinking into a stamp between two wide bands of backdrop. */
  .card-thumb { height: 340px; }
  .footer-inner, .footer-meta { text-align: left; }
  .footer-links { justify-content: flex-start; }
}

/* ---------- Auth pages (signup / login) ---------- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--navy); }
.auth-card { max-width: 420px; width: 100%; background: var(--navy-2); border: 1px solid var(--navy-line-2); border-radius: var(--radius); padding: 40px 36px; box-shadow: var(--shadow-lg); }
.auth-card h1 { font-family: var(--head); font-size: 22px; text-transform: uppercase; letter-spacing: .04em; color: var(--cream); margin: 0 0 6px; }
.auth-card .auth-sub { font-size: 13px; color: var(--muted); margin: 0 0 28px; }
.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.auth-field input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--navy-line-2); border-radius: 9px; padding: 11px 14px; color: var(--cream); font-family: var(--mono); font-size: 14px; outline: 0; }
.auth-field input:focus { border-color: var(--orange); }
.auth-submit { width: 100%; border: 0; background: var(--orange); color: #0a1b30; font-weight: 700; font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; padding: 13px 24px; border-radius: 9px; cursor: pointer; font-size: 13px; margin-top: 6px; }
.auth-submit:hover { background: var(--orange-2); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; }
.auth-alt { text-align: center; font-size: 13px; color: var(--muted); margin-top: 22px; }
.auth-alt a { color: var(--orange-2); }
.auth-message { font-size: 13px; border-radius: 8px; padding: 10px 12px; margin-bottom: 18px; }
.auth-message.error { background: rgba(219,58,58,.12); border: 1px solid rgba(219,58,58,.35); color: #ff9d9d; }
.auth-message.success { background: rgba(47,158,94,.12); border: 1px solid rgba(47,158,94,.35); color: #8be3ab; }
.logout-fab { position: fixed; top: 18px; right: 18px; z-index: 50; background: rgba(10,27,48,.7); border: 1px solid var(--navy-line-2); color: var(--cream); font-family: var(--mono); font-size: 12px; padding: 8px 14px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); }
.logout-fab:hover { border-color: var(--orange); color: var(--orange-2); }