@font-face{
  font-family:"PsychedHand";
  src:url("./fonts/PsychedHand.ttf") format("truetype"),
      url("./fonts/PsychedHand.otf") format("opentype");
  font-display:swap;
}
:root{
  --page:#f4f1ea; --paper:#fff; --ink:#0f0d0a; --gold:#b8923a; --line:#e2dccd; --soft:#8a8266;
  --hand:"PsychedHand","Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--page);color:var(--ink);
  font-family:"Jost","Helvetica Neue",system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
body{padding-top:96px;}

/* Header */
#hud{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;
  align-items:flex-start;padding:20px 30px 14px;background:rgba(244,241,234,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
#hud .title{font-size:1rem;letter-spacing:.34em;font-weight:600;}
#hud .sub{font-size:.5rem;letter-spacing:.24em;color:var(--soft);margin-top:6px;}
#hud .meta{text-align:right;}
#hud #count{display:block;font-size:.58rem;letter-spacing:.2em;color:var(--soft);}
#hud .watch{font-family:var(--hand);color:var(--gold);font-size:1.4rem;}

/* Bar */
#bar{position:fixed;top:74px;left:0;right:0;z-index:25;display:flex;gap:16px;align-items:center;
  flex-wrap:wrap;padding:10px 30px;background:rgba(244,241,234,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);}
#search{flex:0 1 320px;background:var(--paper);border:1px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:.72rem;letter-spacing:.04em;padding:8px 12px;border-radius:2px;outline:none;}
#search:focus{border-color:var(--gold);}
#lenses{display:flex;gap:6px;flex-wrap:wrap;}
#lenses .lens{background:transparent;border:1px solid var(--line);color:var(--soft);
  font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:2px;
  cursor:pointer;font-family:inherit;transition:all .15s;}
#lenses .lens:hover{border-color:var(--gold);color:var(--gold);}
#lenses .lens.active{background:var(--ink);border-color:var(--ink);color:var(--page);}

/* The ordered catalogue grid */
#catalogue{max-width:1400px;margin:0 auto;padding:30px 24px 80px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px 20px;}
.cell{position:relative;background:var(--paper);border:1px solid var(--line);padding:12px;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s;}
.cell:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(70,58,32,.13);}
/* Favorite (gold) / Voted (green) curation marks */
.cell.fav{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}
.cell.voted{border-color:#3f7d4f;box-shadow:0 0 0 1px #3f7d4f inset;}
.cell.fav.voted{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 0 0 3px #3f7d4f;}
.fav-btn{position:absolute;top:8px;right:8px;z-index:2;width:26px;height:26px;line-height:1;
  border:none;background:rgba(20,16,10,.04);color:var(--line);font-size:1rem;cursor:pointer;
  border-radius:0;opacity:0;transition:opacity .18s,color .18s,background .18s;}
.cell:hover .fav-btn{opacity:1;}
.fav-btn:hover{color:var(--gold);background:rgba(184,146,58,.12);}
.cell.fav .fav-btn{opacity:1;color:var(--gold);}
.cell .frame{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#faf8f2;}
.cell img{max-width:100%;max-height:100%;display:block;}
.cell .cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;}
.cell .cr{font-family:var(--hand);font-size:1.15rem;color:var(--gold);line-height:1;}
.cell .ttl{font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  text-align:right;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* Loading */
#loading{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:var(--page);color:var(--gold);font-family:var(--hand);font-size:2rem;transition:opacity .6s;}
#loading.gone{opacity:0;pointer-events:none;}

/* Catalogue entry */
#entry{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;}
#entry.hidden{display:none;}
.entry-backdrop{position:absolute;inset:0;background:rgba(244,241,234,.97);backdrop-filter:blur(4px);}
.entry-stage{position:relative;z-index:2;display:flex;gap:44px;align-items:center;max-width:1180px;
  width:92%;padding:24px;flex-wrap:wrap;justify-content:center;}
.entry-imgwrap{background:var(--paper);padding:16px;border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(70,58,32,.18);}
#enImg{max-width:min(58vw,640px);max-height:78vh;display:block;}
.entry-card{max-width:320px;min-width:230px;}
.entry-card .cr{font-family:var(--hand);font-size:1.8rem;color:var(--gold);margin-bottom:4px;}
.entry-card h2{font-family:var(--hand);font-size:2.4rem;line-height:1;margin-bottom:16px;}
.en-meta{font-size:.6rem;letter-spacing:.1em;color:var(--soft);text-transform:uppercase;
  margin-bottom:16px;line-height:2;}
.en-meta b{color:var(--gold);font-weight:400;}
.entry-card p{font-size:.82rem;line-height:1.7;color:#4a4536;font-style:italic;}
.en-foot{margin-top:22px;font-family:var(--hand);color:var(--gold);font-size:1.5rem;}
.en-nav{margin-top:18px;display:flex;gap:14px;align-items:center;}
.en-nav button{background:none;border:1px solid var(--line);color:var(--soft);font-size:.9rem;
  width:36px;height:32px;cursor:pointer;border-radius:2px;}
.en-nav button:hover{border-color:var(--gold);color:var(--gold);}
.en-nav #enPos{font-size:.58rem;letter-spacing:.1em;color:var(--soft);}
#enClose{position:absolute;top:-6px;right:2px;background:none;border:none;color:var(--soft);
  font-size:1.4rem;cursor:pointer;}
#enClose:hover{color:var(--ink);}

@media(max-width:720px){
  #hud .title{font-size:.78rem;letter-spacing:.22em;}
  #catalogue{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px 14px;}
  .entry-stage{flex-direction:column;gap:18px;}
  #enImg{max-width:88vw;max-height:50vh;}
  .entry-card{max-width:88vw;text-align:center;}
  .en-nav{justify-content:center;}
}

/* Request & Vote — the ballot on the entry card */
#enRequest{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
#rqOpen,#rqSend{background:var(--ink);border:1px solid var(--ink);color:var(--page);
  font-family:inherit;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 16px;border-radius:2px;cursor:pointer;transition:all .15s;}
#rqOpen:hover,#rqSend:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}
#rqSend:disabled{opacity:.5;cursor:default;}
#rqOpen.hidden,#rqForm.hidden,#rqWeeks.hidden{display:none;}
#rqForm{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:2px;}
#rqProducts{display:flex;gap:6px;flex-wrap:wrap;}
.rq-p{background:transparent;border:1px solid var(--line);color:var(--soft);font-family:inherit;
  font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:2px;cursor:pointer;transition:all .15s;}
.rq-p:hover{border-color:var(--gold);color:var(--gold);}
.rq-p.on{background:var(--ink);border-color:var(--ink);color:var(--page);}
.rq-p:disabled{opacity:.35;cursor:default;}
.rq-p:disabled:hover{border-color:var(--line);color:var(--soft);}
.rq-note{flex-basis:100%;font-size:.56rem;letter-spacing:.08em;color:var(--soft);font-style:italic;}
#rqEmail{background:var(--paper);border:1px solid var(--line);color:var(--ink);font-family:inherit;
  font-size:.72rem;padding:8px 12px;border-radius:2px;outline:none;width:100%;max-width:260px;}
#rqEmail:focus{border-color:var(--gold);}
#rqWeeks{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.rq-cap{font-size:.56rem;letter-spacing:.08em;color:var(--soft);}
.rq-w{background:transparent;border:1px solid var(--line);color:var(--soft);font-family:inherit;
  font-size:.6rem;padding:4px 9px;border-radius:2px;cursor:pointer;}
.rq-w.on{background:var(--ink);border-color:var(--ink);color:var(--page);}
#rqMsg{margin-top:10px;font-family:var(--hand);color:var(--soft);font-size:1.1rem;min-height:1.2em;font-style:normal;}
#rqMsg.ok{color:var(--gold);font-size:1.3rem;}
@media(max-width:720px){
  #rqForm{align-items:center;}
  #enRequest{text-align:center;}
  #rqProducts,#rqWeeks{justify-content:center;}
}