@font-face{
  font-family:"DM Serif Display";
  src:url("./assets/dm-serif.ttf") format("truetype");
  font-display:swap;
  font-weight:400;
}
@font-face{
  font-family:"DM Sans";
  src:url("./assets/dm-sans.ttf") format("truetype");
  font-display:swap;
  font-weight:400 700;
}
@font-face{
  font-family:"Literata";
  src:url("./assets/literata.ttf") format("truetype");
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("./assets/ibm-plex-mono.ttf") format("truetype");
  font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("./assets/space-grotesk.ttf") format("truetype");
  font-display:swap;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none !important; transition:none !important}}
:root{
  --bg:#F7F3EB;
  --bg-2:#EDE7DC;
  --paper:#FFFFFF;
  --ink:#0F0F0F;
  --ink-2:#3A3632;
  --muted:#6B635B;
  --muted-2:#9A9288;
  --border:#E7DDCB;
  --border-2:#D9CFBC;
  --accent:#BF3A2B;
  --accent-hover:#A93224;
  --accent-bg:#FFF0EB;
  --teal:#1E3A3A;
  --mustard:#D8A72E;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 8px 32px rgba(16,12,8,.08);
  --shadow-sm:0 2px 12px rgba(16,12,8,.06);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans", system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit}
img{max-width:100%; display:block}

/* Utility top bar */
.utility-bar{
  border-bottom:1px solid var(--border);
  background:rgba(247,243,235,.9);
  backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:30;
  font-family:"IBM Plex Mono", monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.utility-inner{
  max-width:1280px; margin:0 auto; padding:8px 24px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.utility-inner span.dot{width:5px;height:5px;background:var(--accent);border-radius:50%;display:inline-block;vertical-align:middle;margin:0 8px}

/* Masthead */
.masthead{
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.masthead-inner{
  max-width:1280px; margin:0 auto; padding:28px 24px 20px;
}
.masthead-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
}
.edition-badge{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; background:var(--paper);
  white-space:nowrap;
}
.masthead-center{text-align:center; flex:1}
.logo{
  font-family:"DM Serif Display", Georgia, serif;
  font-size:clamp(36px, 7vw, 78px);
  line-height:.9;
  letter-spacing:-.04em;
  font-weight:400;
  margin:0;
  display:flex; justify-content:center; align-items:baseline; gap:.18em;
}
.logo span.slash{font-family:"Space Grotesk", sans-serif; font-weight:300; color:var(--accent); font-size:.62em; transform:translateY(-.05em)}
.logo-meta{
  font-family:"IBM Plex Mono", monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-top:10px;
}
.tagline{
  font-family:"Literata", Georgia, serif;
  font-style:italic;
  font-size:clamp(13px, 1.6vw, 16px);
  color:var(--ink-2);
  margin:12px 0 0;
  line-height:1.4;
}
.masthead-nav{
  display:flex; gap:18px; align-items:center;
  font-family:"IBM Plex Mono", monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
}
.masthead-nav a{
  text-decoration:none; color:var(--muted);
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.masthead-nav a:hover{color:var(--ink); border-color:var(--ink)}
.masthead-nav a.active{color:var(--ink); border-color:var(--ink)}

/* Toolbar sticky */
.toolbar{
  position:sticky; top:33px; z-index:29;
  background:rgba(247,243,235,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.toolbar-inner{
  max-width:1280px; margin:0 auto; padding:14px 24px;
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:14px; align-items:center;
}
.search-wrap{
  position:relative;
  display:flex; align-items:center;
}
.search-wrap label{
  position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)
}
.search-icon{
  position:absolute; left:14px; width:16px;height:16px; color:var(--muted-2); pointer-events:none;
}
#searchInput{
  width:100%;
  padding:11px 14px 11px 40px;
  border:1px solid var(--border-2);
  background:var(--paper);
  border-radius:999px;
  font-family:"DM Sans", sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
#searchInput:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(15,15,15,.08)}
#searchInput::placeholder{color:var(--muted-2)}
.filter-group{
  display:flex; align-items:center; gap:10px;
}
.filter-label{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.select-wrap{position:relative}
.select-wrap select{
  appearance:none;
  padding:10px 36px 10px 14px;
  border:1px solid var(--border-2);
  background:var(--paper);
  border-radius:999px;
  font-size:13px; font-weight:500;
  min-width:148px;
  cursor:pointer;
  outline:none;
}
.select-wrap select:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(15,15,15,.08)}
.select-arrow{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; width:14px;height:14px; color:var(--muted);
}
.saved-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--border-2);
  background:var(--paper);
  font-size:13px; font-weight:600;
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
}
.saved-toggle[aria-pressed="true"]{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.saved-toggle svg{width:14px;height:14px}
.saved-toggle .count{
  background:var(--accent); color:#fff; font-size:11px; padding:2px 6px; border-radius:999px; min-width:18px; text-align:center;
}
.saved-toggle[aria-pressed="true"] .count{background:#fff; color:var(--ink)}

/* Hero intro */
.hero{
  max-width:1280px; margin:0 auto; padding:24px 24px 0;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:28px;
}
.hero-left{
  border:1px solid var(--border);
  background:var(--paper);
  border-radius:var(--radius);
  padding:28px;
  display:flex; flex-direction:column; gap:14px;
}
.hero-kicker{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.hero-title{
  font-family:"DM Serif Display", Georgia, serif;
  font-size:28px; line-height:1.1; letter-spacing:-.02em; margin:0;
}
.hero-desc{
  font-family:"Literata", Georgia, serif;
  font-size:15px; line-height:1.6; color:var(--ink-2); margin:0;
}
.hero-meta{
  margin-top:8px; display:flex; gap:12px; flex-wrap:wrap;
  font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--muted)
}
.hero-meta span{border:1px solid var(--border); padding:4px 8px; border-radius:999px; background:var(--bg)}
.hero-right{
  display:flex; flex-direction:column; gap:14px;
}
.info-card{
  border:1px solid var(--border);
  background:var(--teal);
  color:#E8E0D0;
  border-radius:var(--radius);
  padding:20px;
}
.info-card h3{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px; color:#B8C4B8;
}
.info-stats{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.stat-num{font-family:"DM Serif Display", serif; font-size:26px; line-height:1}
.stat-label{font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#B8C4B8; margin-top:4px}
.quote-card{
  border:1px solid var(--border);
  background:var(--paper);
  border-radius:var(--radius);
  padding:18px;
  font-family:"Literata", Georgia, serif;
  font-style:italic; font-size:14px; line-height:1.5; color:var(--ink-2);
}
.quote-card cite{
  display:block; margin-top:10px; font-family:"IBM Plex Mono", monospace; font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)
}

/* Results bar */
.results-bar{
  max-width:1280px; margin:0 auto; padding:18px 24px 0;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.results-text{
  font-family:"IBM Plex Mono", monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.results-text strong{color:var(--ink); font-weight:600}
.view-toggle{ display:flex; gap:6px}
.view-btn{
  width:34px;height:34px; border-radius:50%; border:1px solid var(--border);
  background:var(--paper); display:grid; place-items:center; cursor:pointer;
}
.view-btn.active{background:var(--ink); color:#fff; border-color:var(--ink)}

/* Grid */
.grid-wrap{max-width:1280px; margin:0 auto; padding:16px 24px 48px}
.items-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}
.items-grid.list{grid-template-columns:1fr}

/* Card */
.card{
  border:1px solid var(--border);
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--border-2)}
.card.featured{
  grid-column: span 2;
  flex-direction:row;
}
.card.featured .card-media{flex:1.2; min-height:280px}
.card.featured .card-body{flex:1}
.card-media{
  position:relative; aspect-ratio: 16/10; overflow:hidden; background:var(--bg-2);
}
.card.featured .card-media{aspect-ratio:auto}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.card:hover .card-media img{transform:scale(1.03)}
.card-category{
  position:absolute; top:12px; left:12px;
  background:var(--paper);
  border:1px solid rgba(0,0,0,.08);
  padding:5px 10px; border-radius:999px;
  font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.cat-dot{width:7px;height:7px;border-radius:50%; display:inline-block}
.card-save-badge{
  position:absolute; top:12px; right:12px;
  width:28px;height:28px; border-radius:50%;
  background:var(--paper); border:1px solid var(--border);
  display:grid; place-items:center; color:var(--accent);
}
.card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.06), transparent 40%);
  pointer-events:none;
}
.card-body{padding:18px 18px 16px; display:flex; flex-direction:column; gap:10px; flex:1}
.card-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.card-meta .sep{opacity:.4}
.card-title{
  font-family:"DM Serif Display", Georgia, serif;
  font-size:19px; line-height:1.2; letter-spacing:-.015em; margin:0;
}
.card.featured .card-title{font-size:24px}
.card-summary{
  font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-footer{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.author{font-size:12px; color:var(--muted); font-family:"Literata", serif; font-style:italic}
.author strong{font-style:normal; font-family:"DM Sans", sans-serif; color:var(--ink); font-weight:600}
.open-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  cursor:pointer; transition:all .2s;
}
.open-btn:hover{background:var(--accent); border-color:var(--accent)}
.open-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.card.list-variant{flex-direction:row; align-items:stretch}
.card.list-variant .card-media{width:280px; flex-shrink:0; aspect-ratio:4/3}
.card.list-variant .card-body{flex:1}

/* Empty state */
.empty-state{
  border:1px dashed var(--border-2);
  background:var(--paper);
  border-radius:var(--radius);
  padding:48px 32px; text-align:center;
  max-width:640px; margin:24px auto;
}
.empty-state h3{
  font-family:"DM Serif Display", serif; font-size:20px; margin:0 0 8px;
}
.empty-state p{color:var(--muted); font-size:14px; margin:0 0 16px; line-height:1.5}
.empty-actions{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.btn-primary{
  padding:10px 18px; border-radius:999px; border:1px solid var(--ink);
  background:var(--ink); color:#fff; font-size:13px; font-weight:600; cursor:pointer;
}
.btn-secondary{
  padding:10px 18px; border-radius:999px; border:1px solid var(--border-2);
  background:var(--paper); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer;
}
.btn-primary:hover{background:var(--accent); border-color:var(--accent)}
.btn-secondary:hover{border-color:var(--ink)}

/* Detail overlay */
.detail-backdrop{
  position:fixed; inset:0; background:rgba(15,15,15,.42); backdrop-filter:blur(6px);
  z-index:40; opacity:0; pointer-events:none; transition:opacity .25s;
}
.detail-backdrop.open{opacity:1; pointer-events:auto}
.detail-panel{
  position:fixed; inset:0; z-index:41;
  overflow:auto;
  display:none;
  padding:24px;
}
.detail-panel.open{display:block}
.detail-sheet{
  max-width:980px; margin:20px auto;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.18);
  animation:sheetIn .32s ease;
}
@keyframes sheetIn{from{transform:translateY(16px); opacity:0} to{transform:translateY(0); opacity:1}}
.detail-header{
  border-bottom:1px solid var(--border);
  padding:14px 18px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--bg);
}
.detail-header-left{
  display:flex; align-items:center; gap:10px;
  font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.detail-header-left span.pill{
  background:var(--paper); border:1px solid var(--border); padding:5px 10px; border-radius:999px;
}
.detail-actions{display:flex; align-items:center; gap:8px}
.icon-btn{
  width:38px;height:38px; border-radius:50%; border:1px solid var(--border);
  background:var(--paper); display:grid; place-items:center; cursor:pointer; transition:all .2s;
}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn.save-active{background:var(--accent); border-color:var(--accent); color:#fff}
.detail-top{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:0;
}
.detail-text{padding:28px}
.detail-title{
  font-family:"DM Serif Display", Georgia, serif;
  font-size:32px; line-height:1.08; letter-spacing:-.03em; margin:0 0 12px;
}
.detail-summary{
  font-family:"Literata", Georgia, serif;
  font-size:16px; line-height:1.5; color:var(--ink-2);
  border-left:3px solid var(--accent); padding-left:14px; margin:0 0 16px;
}
.detail-meta-row{
  display:flex; flex-wrap:wrap; gap:8px; margin:16px 0;
  font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--muted);
}
.detail-meta-row span{border:1px solid var(--border); padding:6px 10px; border-radius:999px; background:var(--bg)}
.detail-body{
  font-family:"Literata", Georgia, serif;
  font-size:16px; line-height:1.75; color:var(--ink);
}
.detail-body p{margin:0 0 1em}
.detail-media{
  background:var(--bg-2); padding:18px;
  border-left:1px solid var(--border);
  display:flex; flex-direction:column; gap:16px;
}
.detail-img-wrap{
  border-radius:12px; overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; background:var(--paper);
}
.detail-img-wrap img{width:100%; height:100%; object-fit:cover}
.detail-caption{
  font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); line-height:1.4;
}
.detail-pullquote{
  border:1px solid var(--border); background:var(--bg); border-radius:12px; padding:16px;
  font-family:"DM Serif Display", serif; font-size:18px; line-height:1.3; color:var(--ink);
}
.detail-pullquote cite{font-family:"IBM Plex Mono", monospace; font-size:10px; color:var(--muted); display:block; margin-top:8px; letter-spacing:.1em; text-transform:uppercase}
.detail-extra{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.mini-stat{border:1px solid var(--border); background:var(--paper); border-radius:10px; padding:12px}
.mini-stat strong{font-family:"DM Serif Display", serif; font-size:18px; display:block}
.mini-stat span{font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* Footer */
footer{
  border-top:1px solid var(--border);
  background:var(--ink);
  color:#E8E0D0;
  padding:36px 24px;
}
.footer-inner{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:24px}
.footer-brand h4{font-family:"DM Serif Display", serif; font-size:20px; margin:0 0 6px}
.footer-brand p{font-size:13px; line-height:1.6; color:#B8B2A6; margin:0}
.footer-col h5{font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#B8B2A6; margin:0 0 10px}
.footer-col a{color:#E8E0D0; text-decoration:none; font-size:13px; display:block; margin:6px 0}
.footer-col a:hover{color:#fff; text-decoration:underline}
.footer-bottom{max-width:1280px; margin:24px auto 0; padding-top:16px; border-top:1px solid rgba(232,224,208,.15); display:flex; justify-content:space-between; gap:12px; font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#B8B2A6}

/* Focus */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Responsive */
@media(max-width:960px){
  .hero{grid-template-columns:1fr}
  .items-grid{grid-template-columns:repeat(2,1fr)}
  .card.featured{grid-column:span 1; flex-direction:column}
  .card.featured .card-media{min-height:auto; aspect-ratio:16/10}
  .detail-top{grid-template-columns:1fr}
  .detail-media{border-left:none; border-top:1px solid var(--border)}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .utility-inner{padding:8px 14px}
  .utility-inner span.hide-m{display:none}
  .masthead-inner{padding:18px 14px 14px}
  .masthead-top{flex-direction:column; align-items:center}
  .masthead-nav{order:3}
  .toolbar{top:0}
  .toolbar-inner{grid-template-columns:1fr; padding:12px 14px}
  .filter-group{justify-content:space-between}
  .hero{padding:16px 14px 0}
  .hero-left{padding:18px}
  .results-bar{padding:14px 14px 0}
  .grid-wrap{padding:12px 14px 36px}
  .items-grid{grid-template-columns:1fr}
  .card.list-variant{flex-direction:column}
  .card.list-variant .card-media{width:100%}
  .detail-panel{padding:10px}
  .detail-sheet{margin:8px auto; border-radius:14px}
  .detail-text{padding:18px}
  .detail-title{font-size:26px}
  .detail-header{padding:10px 12px}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}