/* FOXED — secondhand & rare books (concept) */
:root {
  --paper: #efe6d2;
  --paper-2: #e5d8bc;
  --ink: #231e1a;
  --mute: #5f564b;
  --line: rgba(35, 30, 26, .2);
  --mustard: #f1c232;
  --blue: #4c70b5;
  --red: #e03e58;
  --cream: #f7f0e0;
  --kraft: #c8a676;
  --bottle: #2d5340;
  --body: 'Newsreader', Georgia, serif;
  --type: 'Courier Prime', 'Courier New', monospace;
  --pad: clamp(18px, 4vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--paper) var(--noise); color: var(--ink);
  font: 400 clamp(17px, 1.15vw, 19px)/1.55 var(--body); font-optical-sizing: auto;
  overflow-x: clip;
}
/* foxing: faint age spots fixed to the viewport */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 8% 14%, rgba(150, 100, 40, .10) 0 2px, transparent 3px),
    radial-gradient(circle at 9.5% 16%, rgba(150, 100, 40, .07) 0 5px, transparent 7px),
    radial-gradient(circle at 91% 72%, rgba(150, 100, 40, .08) 0 4px, transparent 6px),
    radial-gradient(circle at 87% 9%, rgba(150, 100, 40, .06) 0 9px, transparent 13px),
    radial-gradient(circle at 46% 93%, rgba(150, 100, 40, .07) 0 3px, transparent 5px),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(120, 80, 30, .10) 100%);
}
main, header, footer { position: relative; z-index: 1; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--mustard); color: var(--ink); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--ink); color: var(--cream); padding: 8px 12px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.type { font-family: var(--type); font-size: .78em; letter-spacing: .02em; }
.label { font-family: var(--type); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.wrap { padding-inline: var(--pad); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- ransom letters ---------- */
.rn-word { display: inline-block; white-space: nowrap; }
.rn-gap { display: inline-block; width: .32em; }
.rn {
  display: inline-block; position: relative; vertical-align: baseline;
  padding: .02em .09em .0em; margin: 0 .018em;
  line-height: 1.02; background: var(--bg); color: var(--fg);
  font-family: var(--ff); font-weight: var(--fw, 400); font-style: var(--fi, normal);
  font-size: var(--fs, 1em); text-transform: var(--tt, none);
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg));
  box-shadow: 1px 2px 0 rgba(35, 30, 26, .18), 0 6px 14px -6px rgba(35, 30, 26, .35);
  backface-visibility: hidden;
}
.rn::after { content: ""; position: absolute; inset: 0; background: var(--noise); mix-blend-mode: multiply; opacity: .8; pointer-events: none; }
.rn.is-drag { cursor: grab; touch-action: none; }
.rn.is-drag:active { cursor: grabbing; }
[data-ransom] { font-size: inherit; }
.rn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ---------- page transition sheet ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 150; background: var(--mustard) var(--noise);
  display: grid; place-items: center; pointer-events: none; visibility: hidden;
  font-size: clamp(54px, 11vw, 150px);
}
.sheet.is-on { visibility: visible; pointer-events: auto; }

/* ---------- header ---------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 100; height: 68px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding-inline: var(--pad);
}
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: rgba(239, 230, 210, .92); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hd.is-solid::before { opacity: 1; }
.hd.is-open::before { opacity: 0; }
.logo { font-size: 26px; text-decoration: none; justify-self: start; display: inline-flex; }
.logo .rn { box-shadow: 1px 1px 0 rgba(35, 30, 26, .2); }
.nav { display: flex; gap: clamp(16px, 2.4vw, 36px); font-family: var(--type); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.nav a { text-decoration: none; position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.hd__open { justify-self: end; font-family: var(--type); font-size: 13px; color: var(--mute); display: flex; align-items: center; gap: 8px; }
.hd__open i { width: 8px; height: 8px; border-radius: 50%; background: var(--bottle); box-shadow: 0 0 0 3px rgba(45, 83, 64, .18); }
.hd__open.is-shut i { background: var(--red); box-shadow: 0 0 0 3px rgba(224, 62, 88, .18); }
.burger { display: none; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; padding: 110px var(--pad) 40px; display: grid; grid-template-rows: 1fr auto; position: relative; }
.hero__title { margin: 0; font-weight: 400; font-size: clamp(62px, min(11.6vw, 19.5vh), 214px); line-height: 1.04; position: relative; z-index: 3; align-self: center; }
.hero__title .line { display: block; }
.hero__title .line:nth-child(2) { padding-left: 1.4em; }
.hero__title .line:nth-child(3) { padding-left: .6em; }
.hero__covers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cut { position: absolute; width: var(--w, 14vw); transform: rotate(var(--r, 0deg)); }
.cut img { width: 100%; height: auto; box-shadow: 0 2px 0 rgba(0, 0, 0, .12), 0 18px 34px -14px rgba(35, 30, 26, .55); }
.cut::before, .cut::after { content: ""; position: absolute; z-index: 2; width: 74px; height: 22px; background: rgba(240, 228, 190, .62); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.cut::before { top: -9px; left: 18%; transform: rotate(-6deg); }
.cut::after { bottom: -8px; right: 14%; transform: rotate(4deg); }
.hero__foot { display: grid; grid-template-columns: minmax(0, 520px) 1fr auto; gap: 32px; align-items: end; position: relative; z-index: 3; }
.hero__lede { margin: 0; font-size: clamp(18px, 1.4vw, 22px); }
.hero__hint { font-family: var(--type); font-size: 13px; color: var(--mute); justify-self: center; display: flex; gap: 12px; align-items: center; }
.hero__hint button { font: inherit; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0; cursor: pointer; color: var(--ink); }
.hero__meta { text-align: right; font-family: var(--type); font-size: 13px; line-height: 1.7; color: var(--mute); }

.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--type); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--cream); padding: 14px 20px 13px; border: 0; cursor: pointer;
  box-shadow: 3px 3px 0 var(--red); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--red); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 4px 4px 0 var(--mustard); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

/* ---------- strip (marquee) ---------- */
.strip { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; background: var(--paper-2) var(--noise); }
.strip__track { display: flex; gap: 40px; width: max-content; font-size: clamp(28px, 3.2vw, 46px); align-items: center; will-change: transform; }
.strip__track .dot { width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); flex: none; }

/* ---------- sections ---------- */
.sec { padding: clamp(90px, 12vw, 180px) var(--pad); position: relative; }
.sec__head { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 40px; align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.h2 { margin: 0; font-weight: 400; font-size: clamp(44px, 7vw, 116px); line-height: 1.08; }
.sec__head p { margin: 0; color: var(--mute); }

/* intro */
.intro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.intro__photo { position: relative; margin: 0; }
.intro__photo .clip { overflow: hidden; }
.intro__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: sepia(.25) contrast(1.02); }
.intro__photo figcaption { font-family: var(--type); font-size: 12px; color: var(--mute); margin-top: 10px; }
.intro__text { font-size: clamp(22px, 2.3vw, 36px); line-height: 1.3; margin: 0 0 32px; text-wrap: pretty; }
.intro__text em { font-style: italic; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.facts div { padding: 22px 18px 0 0; }
.facts b { display: block; font-family: var(--type); font-size: clamp(30px, 3vw, 46px); font-weight: 700; line-height: 1; margin-bottom: 8px; }
.facts span { font-size: 15px; color: var(--mute); }

/* shelf (horizontal) */
.shelf { position: relative; overflow: hidden; padding-block: clamp(80px, 8vw, 110px) 50px; }
.shelf .sec__head { margin-bottom: 10px; }
.shelf__head { padding-inline: var(--pad); }
.shelf { --bw: clamp(170px, 14vw, 230px); }
.shelf__rail { display: flex; gap: clamp(28px, 3.6vw, 60px); padding: 30px var(--pad) 0; width: max-content; align-items: flex-start; will-change: transform; position: relative; }
.shelf__rail::after { content: ""; position: absolute; left: 0; right: 0; top: calc(30px + var(--bw) * 1.4667); height: 16px; background: linear-gradient(#8a6440, #6e4e31); box-shadow: 0 10px 18px -8px rgba(35, 30, 26, .5); }
.shelf .bk__meta { padding-top: 34px; }
.shelf__board { height: 18px; margin: 0 0 0; background: linear-gradient(#8a6440, #6e4e31); box-shadow: 0 10px 18px -8px rgba(35, 30, 26, .5); position: relative; }
.shelf__board::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 90px); }
.bk { flex: none; width: var(--bw, 230px); text-decoration: none; display: block; }
.bk__cover { position: relative; transform-origin: 50% 100%; transform: rotate(var(--lean, 0deg)); transition: transform .5s var(--ease); }
.bk__cover img { width: 100%; height: auto; aspect-ratio: 3 / 4.4; object-fit: cover; box-shadow: 0 2px 0 rgba(0, 0, 0, .14), 6px 18px 28px -14px rgba(35, 30, 26, .7); }
.bk:hover .bk__cover { transform: translateY(-12px) rotate(-2deg); }
.tag {
  position: absolute; right: -10px; bottom: 22px; background: var(--cream); color: var(--ink);
  font-family: var(--type); font-size: 13px; padding: 6px 10px 5px 16px; transform: rotate(5deg);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .2); clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.tag::before { content: ""; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); translate: 0 -50%; }
.bk__meta { padding-top: 16px; }
.bk__meta h3 { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.2; }
.bk__meta p { margin: 4px 0 0; font-size: 14px; color: var(--mute); font-family: var(--type); }
.shelf__foot { padding: 50px var(--pad) 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; }

/* book of the week: opens on scroll */
.botw { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.botw__stage { perspective: 1800px; display: grid; place-items: center; min-height: 72vh; }
.book3d { position: relative; width: min(30vw, 360px); aspect-ratio: 760 / 1077; transform-style: preserve-3d; transform: rotateY(-18deg) rotateX(6deg); }
.book3d__page, .book3d__cover { position: absolute; inset: 0; }
.book3d__page { background: var(--cream) var(--noise); padding: 12%; font-size: clamp(14px, 1.2vw, 17px); box-shadow: inset 12px 0 18px -12px rgba(0, 0, 0, .3), 0 20px 40px -20px rgba(35, 30, 26, .6); display: flex; flex-direction: column; justify-content: space-between; }
.book3d__page p { margin: 0; font-family: var(--type); line-height: 1.6; }
.book3d__page .sig { font-family: var(--body); font-style: italic; font-size: 1.3em; }
.book3d__cover { transform-origin: left center; transform-style: preserve-3d; }
.book3d__cover img, .book3d__cover .inside { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; }
.book3d__cover .inside { transform: rotateY(180deg); background: #e6d4b0 var(--noise); display: grid; place-items: center; }
.book3d__cover .inside span { font-family: var(--type); font-size: 13px; color: var(--mute); transform: rotate(-3deg); border: 1px solid var(--line); padding: 10px 14px; background: var(--cream); }
.book3d__spine { position: absolute; top: 0; bottom: 0; left: 0; width: 26px; transform: rotateY(-90deg); transform-origin: left; background: linear-gradient(90deg, #08243d, #134064); }
.botw__text .botw__kicker { font-size: clamp(34px, 4vw, 64px); margin: 0; }
.botw__text h3 { font-size: clamp(30px, 3.4vw, 54px); font-weight: 500; line-height: 1.06; margin: 18px 0 20px; letter-spacing: -.01em; }
.botw__text p { margin: 0 0 16px; max-width: 520px; }
.price-row { display: flex; gap: 24px; align-items: baseline; margin: 26px 0 0; font-family: var(--type); }
.price-row b { font-size: 30px; }

/* grades */
.grades { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.grade { padding: 26px 22px 30px 0; border-right: 1px solid var(--line); }
.grade + .grade { padding-left: 22px; }
.grade:last-child { border-right: 0; }
.grade h3 { margin: 0 0 12px; font-size: clamp(30px, 2.8vw, 44px); font-weight: 400; }
.grade p { margin: 0; color: var(--mute); font-size: 16px; }
.grade__spots { height: 46px; margin-bottom: 18px; background: var(--cream); position: relative; box-shadow: inset 0 0 0 1px var(--line); }

/* events list */
.events { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ev { display: grid; grid-template-columns: 210px 1fr auto; gap: 30px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.ev__date { font-size: 42px; }
.ev h3 { margin: 0 0 4px; font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.15; }
.ev p { margin: 0; color: var(--mute); font-size: 16px; max-width: 640px; }
.ev__side { font-family: var(--type); font-size: 14px; text-align: right; white-space: nowrap; }
.ev.is-past { opacity: .45; }
.ev.is-past .ev__side::before { content: "Already happened · "; }

/* sell + visit split */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 90vh; }
.split__img { position: relative; overflow: hidden; }
.split__img img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: var(--op, 50% 50%); filter: sepia(.2); will-change: transform; }
.split__body { padding: clamp(60px, 8vw, 130px) var(--pad); display: flex; flex-direction: column; justify-content: center; background: var(--bottle) var(--noise); color: var(--cream); }
.split__body .label { color: rgba(247, 240, 224, .7); }
.split__body h2 { margin: 16px 0 26px; }
.split__body p { max-width: 520px; margin: 0 0 16px; color: rgba(247, 240, 224, .86); }
.split__body .btn { background: var(--cream); color: var(--ink); box-shadow: 3px 3px 0 var(--mustard); }
.split__body ol { margin: 10px 0 26px; padding: 0; list-style: none; counter-reset: s; max-width: 520px; }
.split__body li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; padding: 12px 0; border-top: 1px solid rgba(247, 240, 224, .2); color: rgba(247, 240, 224, .9); }
.split__body li::before { content: counter(s, decimal-leading-zero); font-family: var(--type); color: var(--mustard); }

.hours { width: 100%; border-collapse: collapse; font-family: var(--type); font-size: 15px; }
.hours td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; }
.hours tr.is-today td { font-weight: 700; color: var(--ink); }
.hours tr.is-today td:first-child::after { content: " · today"; color: var(--red); font-weight: 400; }

/* ---------- footer ---------- */
.ft { padding: clamp(80px, 10vw, 140px) var(--pad) 30px; background: var(--ink) var(--noise); color: var(--cream); overflow: hidden; }
.ft__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; font-size: 16px; }
.ft__cols h4 { margin: 0 0 14px; font-family: var(--type); font-weight: 400; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(247, 240, 224, .55); }
.ft__cols p { margin: 0 0 6px; color: rgba(247, 240, 224, .85); }
.ft__cols a { text-decoration: none; display: block; padding: 2px 0; color: rgba(247, 240, 224, .85); }
.ft__cols a:hover { color: var(--mustard); }
.ft__big { font-size: clamp(80px, 20vw, 360px); line-height: 1; margin: clamp(60px, 8vw, 120px) 0 30px; text-align: center; white-space: nowrap; }
.ft__legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--type); font-size: 12px; color: rgba(247, 240, 224, .5); border-top: 1px solid rgba(247, 240, 224, .15); padding-top: 20px; }
.ft__legal a { color: inherit; }
.news { display: flex; margin-top: 14px; max-width: 360px; }
.news input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid rgba(247, 240, 224, .3); border-right: 0; background: transparent; color: var(--cream); border-radius: 0; }
.news input::placeholder { color: rgba(247, 240, 224, .45); }
.news button { font-family: var(--type); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding: 0 16px; border: 0; background: var(--mustard); color: var(--ink); cursor: pointer; }
.news-ok { font-family: var(--type); font-size: 13px; color: var(--mustard); margin-top: 10px; min-height: 1.4em; }

/* ---------- inner pages ---------- */
.ph { padding: 150px var(--pad) clamp(50px, 6vw, 90px); display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 40px; align-items: end; border-bottom: 1px solid var(--line); }
.ph h1 { margin: 0; font-weight: 400; font-size: clamp(56px, 10vw, 170px); line-height: 1.06; }
.ph p { margin: 0; color: var(--mute); }
.crumb { font-family: var(--type); font-size: 13px; color: var(--mute); margin-bottom: 26px; display: block; text-decoration: none; }
.crumb:hover { color: var(--ink); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 26px var(--pad); position: sticky; top: 68px; z-index: 20; background: rgba(239, 230, 210, .94); border-bottom: 1px solid var(--line); }
.chip { font-family: var(--type); font-size: 14px; padding: 9px 14px 8px; border: 1.5px solid var(--ink); background: transparent; cursor: pointer; color: var(--ink); transition: background .25s, color .25s, transform .25s var(--ease); }
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.chip b { font-weight: 400; opacity: .55; margin-left: 4px; }
.search { margin-left: auto; display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--ink); padding: 4px 0; }
.search input { font: inherit; font-size: 16px; border: 0; background: transparent; width: 220px; outline: none; color: var(--ink); }
.search label { font-family: var(--type); font-size: 13px; color: var(--mute); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(24px, 3vw, 48px); padding: clamp(50px, 6vw, 90px) var(--pad); }
.grid .bk { width: auto; }
.grid .bk[hidden] { display: none; }
.empty { padding: 0 var(--pad) 90px; font-family: var(--type); color: var(--mute); }
.note-band { margin: 0 var(--pad) clamp(70px, 8vw, 120px); padding: 34px 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 1fr 2fr; gap: 30px; }
.note-band p { margin: 0; }

.detail { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(36px, 7vw, 120px); padding: 130px var(--pad) clamp(70px, 8vw, 120px); align-items: start; }
.detail__cover { position: sticky; top: 100px; }
.detail__cover .cut { position: relative; width: 100%; max-width: 520px; transform: rotate(-1.5deg); }
.detail h1 { margin: 10px 0 8px; font-weight: 400; font-size: clamp(40px, 5.4vw, 88px); line-height: 1.08; }
.detail .by { font-size: clamp(20px, 1.8vw, 26px); font-style: italic; margin: 0 0 34px; }
.spec { border-top: 2px solid var(--ink); margin: 0 0 34px; }
.spec div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-family: var(--type); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); padding-top: 3px; }
.spec dd { margin: 0; }
.staff { background: var(--cream) var(--noise); padding: 26px 28px; font-family: var(--type); font-size: 16px; line-height: 1.65; transform: rotate(.6deg); box-shadow: 0 10px 24px -14px rgba(35, 30, 26, .5); margin: 0 0 34px; position: relative; }
.staff::before { content: ""; position: absolute; top: -10px; left: 40%; width: 90px; height: 22px; background: rgba(241, 194, 50, .55); transform: rotate(-3deg); }
.reserve { display: grid; gap: 12px; max-width: 520px; }
.reserve label { font-family: var(--type); font-size: 13px; color: var(--mute); }
.reserve input { font: inherit; padding: 13px 14px; border: 1.5px solid var(--ink); background: transparent; border-radius: 0; color: var(--ink); }
.reserve .ok { font-family: var(--type); font-size: 14px; color: var(--bottle); min-height: 1.4em; margin: 0; }
.more { padding: 0 var(--pad) clamp(80px, 9vw, 140px); }
.more__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: 40px; }
.more__row .bk { width: auto; }

.visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 100px); padding: clamp(60px, 7vw, 110px) var(--pad); align-items: start; }
.visit h2 { font-size: clamp(30px, 3vw, 46px); font-weight: 500; margin: 0 0 20px; line-height: 1.1; }
.visit p { margin: 0 0 14px; }
.map { position: relative; aspect-ratio: 5 / 4; background: var(--cream) var(--noise); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.credits { padding: clamp(60px, 7vw, 110px) var(--pad); border-top: 1px solid var(--line); }
.credits ul { margin: 20px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 50px; font-size: 14px; color: var(--mute); }
.credits li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--line); }
.credits a { color: var(--ink); }

.e404 { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--pad) 60px; }
.e404 h1 { margin: 0 0 24px; font-weight: 400; font-size: clamp(44px, 9vw, 150px); line-height: 1.06; }
.e404 p { margin: 0 auto 28px; max-width: 480px; }

/* reveal helper */
.rv { opacity: 0; transform: translateY(26px); }
html.no-js .rv, html.reduce .rv { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .ft__cols { grid-template-columns: 1fr 1fr; }
  .grades { grid-template-columns: 1fr 1fr; }
  .grade:nth-child(2) { border-right: 0; }
  .grade:nth-child(3) { padding-left: 0; }
  .more__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hd { grid-template-columns: auto 1fr auto; }
  .hd__open { display: none; }
  .nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 var(--pad); gap: 12px; background: var(--paper) var(--noise); font-family: var(--body); font-size: 46px; text-transform: none; letter-spacing: -.01em; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
  .hd.is-open .nav { opacity: 1; visibility: visible; }
  .burger { display: inline-flex; grid-column: 3; justify-self: end; font-family: var(--type); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; background: none; border: 0; border-bottom: 1.5px solid var(--ink); padding: 4px 0; color: var(--ink); cursor: pointer; }
  .hero__foot { grid-template-columns: 1fr; }
  .hero__hint, .hero__meta { justify-self: start; text-align: left; }
  .hero__title { margin: 30px 0 40px; }
  .hero__title .line:nth-child(2) { padding-left: .5em; }
  .hero__title .line:nth-child(3) { padding-left: .2em; }
  .sec__head, .intro, .botw, .split, .ph, .detail, .visit, .note-band { grid-template-columns: 1fr; }
  .split__img { min-height: 60vh; }
  .botw__stage { min-height: 60vh; order: -1; }
  .book3d { width: min(62vw, 320px); }
  .ev { grid-template-columns: 1fr; gap: 10px; }
  .ev__side { text-align: left; }
  .detail { padding-top: 110px; }
  .detail__cover { position: relative; top: 0; }
  .detail__cover .cut { max-width: 340px; }
  .shelf__rail { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .shelf__rail::-webkit-scrollbar { display: none; }
  .bk { scroll-snap-align: start; }
  .search { margin-left: 0; width: 100%; }
  .search input { width: 100%; }
  .filters { position: relative; top: 0; }
  .credits ul { columns: 1; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:last-child { grid-column: 1 / -1; }
  .grades { grid-template-columns: 1fr; }
  .grade, .grade + .grade { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .ft__cols { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr 1fr; gap: 34px 18px; }
  .grid .bk__meta h3 { font-size: 16px; }
  .tag { font-size: 11px; right: -6px; }
  .bk { width: 64vw; }
  .grid .bk, .more__row .bk { width: auto; }
  .spec div { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* mobile hero + shelf */
@media (hover: none) { .hero__hint { display: none; } }
@media (max-width: 860px) {
  .hero__title { font-size: clamp(52px, 16vw, 130px); }
  .hero__covers .cut:nth-child(n+3) { display: none; }
  .hero__covers .cut:nth-child(1) { --w: 26vw !important; right: 4% !important; top: 12% !important; }
  .hero__covers .cut:nth-child(2) { --w: 20vw !important; left: auto !important; right: 30% !important; top: 9% !important; }
  .hero__title { margin-top: 26vw; }
}
@media (max-width: 560px) { .shelf { --bw: 64vw; } }
@media (max-width: 860px) {
  .shelf__rail { scroll-padding-inline: var(--pad); }
  .shelf__rail::after { display: none; }
  .shelf .bk__meta { padding-top: 16px; }
}

/* anchors land below the fixed header */
[id] { scroll-margin-top: 68px; }

/* sell page */
.steps { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.step { display: grid; grid-template-columns: 160px 1fr; gap: 30px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
.step__n { font-size: clamp(64px, 7vw, 110px); }
.step h3 { margin: 0 0 6px; font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; line-height: 1.1; }
.step p { margin: 0; color: var(--mute); max-width: 640px; }
.sell-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(36px, 6vw, 100px); align-items: start; }
.sell-h3 { margin: 18px 0 22px; font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; line-height: 1.1; }
.faq { margin-top: 36px; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-size: clamp(19px, 1.5vw, 23px); font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-family: var(--type); font-size: 24px; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--mute); max-width: 640px; }
.reserve textarea { font: inherit; padding: 13px 14px; border: 1.5px solid var(--ink); background: transparent; border-radius: 0; color: var(--ink); resize: vertical; }
.note-band a { color: var(--ink); }
@media (max-width: 860px) {
  .step { grid-template-columns: 90px 1fr; gap: 18px; }
  .step__n { font-size: 56px; }
  .sell-grid { grid-template-columns: 1fr; }
}