:root{
  --bg:#f2efe7;
  --ink:#141313;
  --muted:rgba(20,19,19,.62);
  --paper:#fbf9f3;
  --line:rgba(20,19,19,.16);
  --line2:rgba(20,19,19,.10);
  --accent:#a08344; /* warm brass */
  --shadow: 0 18px 70px rgba(20,19,19,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 900px at 18% -10%, rgba(160,131,68,.10), transparent 60%),
    radial-gradient(900px 700px at 85% 10%, rgba(0,0,0,.06), transparent 60%),
    var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1160px, calc(100% - 40px)); margin:0 auto;}

/* subtle grain */
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.08;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="180" height="180" filter="url(%23n)" opacity="0.35"/></svg>');
  mix-blend-mode:multiply;
}

.top{position:sticky;top:0;z-index:20;background:rgba(242,239,231,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.top-in{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:baseline;gap:10px}
.dot{width:9px;height:9px;border-radius:999px;background:var(--ink);box-shadow:0 0 0 6px rgba(160,131,68,.10)}
.b1{font-weight:800;letter-spacing:.3px}
.b2{display:none;font-size:12px;color:rgba(160,131,68,.85);letter-spacing:.16em;text-transform:uppercase;font-family:"IBM Plex Mono", monospace}
@media(min-width:900px){.b2{display:inline}}
.nav{display:none;gap:14px;align-items:center}
@media(min-width:900px){.nav{display:flex}}
.a{font-size:13px;color:rgba(20,19,19,.58);padding:10px 10px;border-radius:10px;font-family:"IBM Plex Mono", monospace}
.a:hover{background:rgba(20,19,19,.04);color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;font-weight:700;font-size:13px;border:1px solid var(--line);background:rgba(251,249,243,.9);box-shadow:0 10px 28px rgba(20,19,19,.10)}
.btn2{border-color:rgba(160,131,68,.34)}
.ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid var(--line2);background:transparent;font-family:"IBM Plex Mono", monospace}
.w{width:100%}

.hero{padding:70px 0 22px}
.hero-in{display:grid;gap:18px;align-items:start}
@media(min-width:980px){.hero-in{grid-template-columns:1.15fr .85fr}}
.k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(160,131,68,.92);font-family:"IBM Plex Mono", monospace}
.h1{margin:12px 0 0;font-family:Fraunces,serif;font-weight:700;letter-spacing:-.6px;font-size:clamp(34px,4.6vw,62px);line-height:1.02}
.p{margin:12px 0 0;color:rgba(20,19,19,.68);line-height:1.75;max-width:62ch}
.cta{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.spec{margin-top:16px;display:grid;gap:10px}
@media(min-width:760px){.spec{grid-template-columns:repeat(3,minmax(0,1fr))}}
.s{border:1px solid var(--line2);background:rgba(251,249,243,.7);border-radius:16px;padding:12px}
.s span{display:block;font-size:12px;color:rgba(20,19,19,.58);font-family:"IBM Plex Mono", monospace}
.s b{display:block;margin-top:6px}

.hero-side .card{border:1px solid var(--line);background:linear-gradient(180deg, rgba(251,249,243,.95), rgba(251,249,243,.80));border-radius:18px;padding:14px;box-shadow:var(--shadow)}
.card-h{font-weight:800;font-family:"IBM Plex Mono", monospace;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.list{margin:10px 0 0;padding-left:18px;color:rgba(20,19,19,.68);line-height:1.7}
.stamp{margin-top:12px;font-family:"IBM Plex Mono", monospace;font-size:12px;border:1px dashed rgba(160,131,68,.45);padding:8px 10px;border-radius:12px;color:rgba(160,131,68,.95)}

.sec{padding:64px 0}
.head{max-width:78ch}
.ey{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(160,131,68,.92);font-family:"IBM Plex Mono", monospace}
.h2{margin:10px 0 0;font-family:Fraunces,serif;font-weight:700;letter-spacing:-.2px;font-size:clamp(22px,3vw,38px)}

.filters{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:"IBM Plex Mono", monospace;font-size:12px;border:1px solid var(--line2);background:rgba(251,249,243,.8);border-radius:999px;padding:8px 12px;cursor:pointer}
.chip.is-on{border-color:rgba(160,131,68,.40);box-shadow:0 0 0 4px rgba(160,131,68,.08) inset}

/* contact sheet */
.sheet{
  margin-top:14px;
  border:1px solid var(--line);
  background:rgba(251,249,243,.86);
  border-radius:18px;
  padding:14px;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:860px){.sheet{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
.frame{position:relative;display:block;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:#000}
.frame img{width:100%;height:170px;object-fit:cover;display:block;filter:saturate(.95) contrast(1.02)}
.frame:after{content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.08); pointer-events:none}
.no{position:absolute;left:10px;bottom:10px;font-family:"IBM Plex Mono", monospace;font-size:12px;background:rgba(251,249,243,.86);border:1px solid var(--line2);padding:6px 8px;border-radius:999px}

.packs{margin-top:16px;display:grid;gap:10px}
@media(min-width:980px){.packs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.pack{border:1px solid var(--line2);background:rgba(251,249,243,.82);border-radius:18px;padding:14px}
.pack.hi{border-color:rgba(160,131,68,.35);box-shadow:0 0 0 4px rgba(160,131,68,.07) inset}
.pk{font-weight:800}
.pp{font-family:Fraunces,serif;font-size:26px;margin-top:6px}
.ps{color:rgba(20,19,19,.62);margin-top:6px;font-family:"IBM Plex Mono", monospace;font-size:12px}
.pi{margin-top:8px;color:rgba(20,19,19,.70);line-height:1.65}

.book{margin-top:16px;display:grid;gap:12px}
@media(min-width:980px){.book{grid-template-columns:1.1fr .9fr; align-items:start}}
.form{border:1px solid var(--line);background:rgba(251,249,243,.88);border-radius:18px;padding:14px;box-shadow:var(--shadow)}
.row{display:grid;gap:10px}
@media(min-width:760px){.row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f{display:grid;gap:6px}
.f label{font-family:"IBM Plex Mono", monospace;font-size:12px;color:rgba(20,19,19,.62)}
.f input,.f textarea,.f select{width:100%;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.7);padding:12px;color:var(--ink);outline:none}
.f input:focus,.f textarea:focus,.f select:focus{border-color:rgba(160,131,68,.40);box-shadow:0 0 0 5px rgba(160,131,68,.10)}
.fine{margin-top:10px;font-size:12px;color:rgba(20,19,19,.58);font-family:"IBM Plex Mono", monospace}
.side{border:1px dashed rgba(20,19,19,.22);background:rgba(251,249,243,.66);border-radius:18px;padding:14px}
.side-h{font-weight:800;font-family:"IBM Plex Mono", monospace;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.side-p{margin-top:10px;color:rgba(20,19,19,.70);line-height:1.7}
.side-b{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(20,19,19,.18);font-family:"IBM Plex Mono", monospace;color:rgba(20,19,19,.62);font-size:12px}

.foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:rgba(20,19,19,.62);font-size:12px;font-family:"IBM Plex Mono", monospace}

/* viewer */
.viewer{position:fixed; inset:0; display:none; z-index:60}
.viewer.on{display:block}
.v-bg{position:absolute; inset:0; background:rgba(20,19,19,.62)}
.v-card{position:relative; width:min(1020px, calc(100% - 24px)); margin: 7vh auto 0; background:rgba(10,10,10,.96); border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow)}
.v-card img{width:100%; height: min(66vh, 600px); object-fit:cover; display:block}
.v-cap{padding:12px 14px; color:rgba(255,255,255,.82); font-family:"IBM Plex Mono", monospace; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline}
.v-title{font-weight:600}
.v-sub{color:rgba(255,255,255,.55);font-size:12px}
.v-x{position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); cursor:pointer; font-size:20px; line-height:1; color:#fff}
.v-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); cursor:pointer; color:#fff; font-size:26px; line-height:1}
.v-nav.prev{left:10px}
.v-nav.next{right:10px}

[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .65s ease, transform .65s ease;}
[data-reveal].is-in{opacity:1; transform: translateY(0)}

@media(max-width:540px){
  .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frame img{height:150px}
}