@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{background:var(--paper);border:1px solid var(--line);padding:12px;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;}
.cell:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(70,58,32,.13);}
.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;}
}