@font-face {
  font-family: "MaruBuri";
  src: url("./assets/fonts/MaruBuri-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MaruBuri";
  src: url("./assets/fonts/MaruBuri-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard Variable";
  src: url("./assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #efe3c8;
  --paper-light: #f8f1df;
  --ink: #15251f;
  --green: #17352c;
  --red: #762f2c;
  --ochre: #b68a45;
  --wood: #4b3229;
  --sage: #758077;
  --line: rgba(21, 37, 31, .28);
  --ease: cubic-bezier(.625, .05, 0, 1);
  --serif: "MaruBuri", "Noto Serif KR", "Nanum Myeongjo", serif;
  --serif-latin: Georgia, "Times New Roman", serif;
  --sans: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--green); }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-weight: 500;
  font-synthesis: none;
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
h1, h2, h3, p, blockquote, dl, dd { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link {
  position: fixed; z-index: 999; left: 12px; top: 12px; padding: 10px 14px;
  color: var(--paper-light); background: var(--green); transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* entry: a closed cloth-bound book, not the reference gate */
.cover-gate {
  position: fixed; z-index: 900; inset: 0; display: grid; place-items: center;
  color: var(--paper-light);
  background:
    radial-gradient(circle at 50% 42%, rgba(182,138,69,.16), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(239,227,200,.035) 71px 72px),
    var(--green);
  perspective: 1400px;
  transition: opacity .6s var(--ease), visibility .6s;
}
.cover-gate[hidden] { display: none; }
.gate-book {
  position: relative; width: min(520px, calc(100vw - 42px)); aspect-ratio: .76;
  padding: 54px 52px 38px; display: flex; flex-direction: column;
  color: var(--paper-light); background: var(--red);
  border: 2px solid var(--ochre); outline: 1px solid rgba(239,227,200,.65); outline-offset: -15px;
  box-shadow: 22px 26px 0 rgba(0,0,0,.22), inset 18px 0 rgba(21,37,31,.16);
  transform-origin: left center;
}
.gate-edition, .gate-book small { font: 11px/1 var(--mono); letter-spacing: .12em; }
.gate-rule { height: 1px; margin: 22px 0 34px; background: var(--ochre); }
.gate-book h1 {
  font: 600 clamp(42px, 5vw, 64px)/1.04 var(--serif); letter-spacing: -.045em;
}
.gate-book > p { margin: 28px 0; font: 500 18px/1.55 var(--serif); }
.gate-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gate-actions button {
  min-height: 54px; border: 1px solid var(--paper-light); background: transparent; cursor: pointer;
  transition: color .25s, background .25s;
}
.gate-actions button:hover, .gate-actions button:focus-visible { color: var(--green); background: var(--ochre); outline: 0; }
.gate-book small { margin-top: 26px; color: var(--ochre); }
.cover-gate.is-leaving .gate-book { animation: open-cover 1.15s var(--ease) both; }
.cover-gate.is-gone { opacity: 0; visibility: hidden; }
@keyframes open-cover {
  0% { transform: rotateY(0) translateX(0); opacity: 1; }
  55% { transform: rotateY(-72deg) translateX(-8%); opacity: 1; }
  100% { transform: rotateY(-102deg) translateX(-28%); opacity: 0; }
}

/* independent bookstore header */
.site-header {
  position: sticky; z-index: 40; top: 0; height: 72px; padding: 0 clamp(18px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: var(--paper-light); background: rgba(23,53,44,.96); border-bottom: 1px solid var(--ochre);
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: baseline; gap: 14px; }
.brand span { font: 600 23px/1 var(--serif); }
.brand small { color: var(--ochre); font: 10px/1 var(--mono); letter-spacing: .12em; }
.site-header nav { display: flex; gap: 28px; font-size: 13px; }
.site-header nav a { padding: 9px 0; border-bottom: 1px solid transparent; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--ochre); border-color: currentColor; outline: 0; }
.header-apply {
  justify-self: end; min-height: 38px; padding: 0 15px; display: inline-flex; align-items: center;
  color: var(--green); background: var(--ochre); border: 1px solid var(--ochre);
  font-size: 12px; font-weight: 700; transition: color .2s, background .2s;
}
.header-apply:hover, .header-apply:focus-visible { color: var(--paper-light); background: transparent; outline: 0; }

/* storefront hero: split copy and a physical window display */
.bookshop-hero {
  min-height: calc(100svh - 72px); padding: clamp(24px, 4vw, 64px);
  display: grid; grid-template-columns: minmax(0,.88fr) minmax(480px,1.12fr); gap: clamp(28px, 5vw, 84px);
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 14%, rgba(118,47,44,.08), transparent 24%),
    radial-gradient(circle at 74% 82%, rgba(182,138,69,.12), transparent 28%),
    var(--paper);
}
.hero-copy { align-self: center; max-width: 680px; }
.eyebrow, .section-heading > p, .catalog-heading > div > p, .cycle-stage > header > p, .visit-title > p {
  margin-bottom: 22px; color: var(--red); font: 11px/1 var(--mono); letter-spacing: .16em;
}
.hero-copy h1 {
  font: 600 clamp(42px, 4vw, 52px)/1.1 var(--serif); letter-spacing: -.04em;
}
.hero-copy h1 em { color: var(--red); font-weight: 500; }
.hero-description { max-width: 48ch; margin-top: 34px; font-size: 17px; line-height: 1.7; word-break: keep-all; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 22px; }
.text-link {
  width: fit-content; padding-bottom: 3px; border-bottom: 1px solid currentColor;
  color: var(--green); font-size: 13px; font-weight: 650; line-height: 1.4;
}
.text-link:hover, .text-link:focus-visible { color: var(--red); outline: 0; }
.button {
  min-height: 52px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--green); font-size: 13px; transition: color .25s, background .25s, transform .25s;
}
.button-primary { color: var(--paper-light); background: var(--green); }
.button:hover, .button:focus-visible { color: var(--green); background: var(--ochre); transform: translateY(-2px); outline: 0; }
.hero-facts {
  max-width: 510px; margin: 34px 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(3,1fr);
  list-style: none; border-top: 1px solid var(--line);
}
.hero-facts li { padding-right: 18px; display: flex; flex-direction: column; gap: 5px; }
.hero-facts li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.hero-facts b { font: 600 16px/1.25 var(--serif); }
.hero-facts span { color: var(--sage); font-size: 12px; }

.window-display {
  position: relative; min-height: 720px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(21,37,31,.035) 79px 80px),
    var(--paper-light);
  border: 12px solid var(--green); box-shadow: 20px 24px 0 rgba(75,50,41,.2);
}
.window-display::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(21,37,31,.22);
}
.window-lettering {
  position: absolute; z-index: 2; left: 6%; top: 6%;
  color: var(--green); font: 600 clamp(40px, 3.8vw, 56px)/.92 var(--serif-latin); letter-spacing: -.045em;
}
.window-lettering i { color: var(--red); font-weight: 500; }
.shelf {
  position: absolute; z-index: 2; left: 5%; right: 5%; height: 168px;
  display: flex; align-items: flex-end; justify-content: center; gap: 7px;
  border-bottom: 18px solid var(--wood); box-shadow: 0 9px 0 rgba(21,37,31,.16);
}
.shelf-top { top: 35%; }
.shelf-bottom { bottom: 10%; }
.book {
  display: block; width: 15%; height: 74%; background: var(--green);
  border: 1px solid rgba(21,37,31,.45); box-shadow: inset 0 -9px rgba(0,0,0,.1);
}
.book.red { height: 91%; background: var(--red); }
.book.ochre { height: 64%; background: var(--ochre); }
.book.thin { width: 7%; height: 84%; background: var(--sage); }
.book.tall { height: 100%; }
.featured-card {
  position: absolute; z-index: 5; right: 7%; top: 26%; width: min(46%, 360px); aspect-ratio: .76;
  padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(118,47,44,.26) 14% calc(14% + 1px), transparent calc(14% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(117,128,119,.2) 34px 35px),
    var(--paper-light);
  border: 2px solid var(--red); box-shadow: 13px 16px 0 rgba(75,50,41,.28); transform: rotate(-2deg);
}
.featured-card span { color: var(--red); font: 10px/1 var(--mono); letter-spacing: .08em; }
.featured-card blockquote { font: 600 clamp(18px, 1.7vw, 26px)/1.42 var(--serif); letter-spacing: -.03em; }
.featured-card b { align-self: flex-end; color: rgba(118,47,44,.3); font: 500 92px/.7 var(--serif-latin); }
.window-hours {
  position: absolute; z-index: 6; right: 4%; bottom: 3%; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; color: var(--paper-light); background: var(--green); font-size: 12px;
}
.window-hours span { color: var(--ochre); font: 10px/1 var(--mono); }

/* a plain-language explanation before the performance sections */
.club-intro {
  padding: clamp(76px, 9vw, 138px) clamp(22px, 5vw, 80px);
  display: grid; grid-template-columns: 1.05fr .85fr; gap: clamp(40px, 7vw, 110px);
  color: var(--paper-light); background: var(--green); border-top: 1px solid var(--ochre);
}
.section-kicker, .application-heading > p {
  margin-bottom: 22px; color: var(--ochre); font: 10px/1 var(--mono); letter-spacing: .16em;
}
.intro-statement h2, .application-heading h2 {
  font: 600 clamp(30px, 3.2vw, 44px)/1.22 var(--serif); letter-spacing: -.035em; word-break: keep-all;
}
.intro-copy { max-width: 58ch; align-self: end; }
.intro-copy > p { color: rgba(248,241,223,.78); font-size: 15px; line-height: 1.8; word-break: keep-all; }
.intro-copy > p + p { margin-top: 14px; }
.intro-copy .text-link { margin-top: 28px; color: var(--ochre); }
.intro-copy .text-link:hover, .intro-copy .text-link:focus-visible { color: var(--paper-light); }
.intro-specs {
  grid-column: 1/-1; margin-top: 18px; display: grid; grid-template-columns: repeat(3,1fr);
  border-top: 1px solid rgba(239,227,200,.42); border-bottom: 1px solid rgba(239,227,200,.42);
}
.intro-specs > div { min-height: 132px; padding: 26px 28px; display: grid; grid-template-columns: 74px 1fr; gap: 18px; align-content: center; }
.intro-specs > div + div { border-left: 1px solid rgba(239,227,200,.3); }
.intro-specs dt { color: var(--ochre); font: 10px/1 var(--mono); letter-spacing: .12em; }
.intro-specs dd { font: 600 17px/1.55 var(--serif); }

/* Benefits are presented as a reading ledger, not generic marketing cards. */
.member-benefits {
  padding: clamp(76px, 9vw, 138px) clamp(22px, 5vw, 80px);
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(118,47,44,.16) 7% calc(7% + 1px), transparent calc(7% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(117,128,119,.1) 47px 48px),
    var(--paper-light);
}
.benefits-heading {
  display: grid; grid-template-columns: .58fr 1.08fr .84fr; align-items: end; gap: clamp(24px, 4vw, 64px);
}
.benefits-heading > p:first-child { align-self: start; color: var(--red); font: 10px/1 var(--mono); letter-spacing: .16em; }
.benefits-heading h2 { font: 600 clamp(30px, 3.2vw, 44px)/1.22 var(--serif); letter-spacing: -.035em; word-break: keep-all; }
.benefits-heading > p:last-child { color: #526159; font-size: 14px; line-height: 1.75; word-break: keep-all; }
.benefit-ledger { margin-top: clamp(52px, 6vw, 88px); border-top: 2px solid var(--green); }
.benefit-row {
  min-height: 170px; padding: 28px 0; display: grid;
  grid-template-columns: .45fr .8fr 1.2fr .72fr; align-items: center; gap: clamp(18px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
}
.benefit-row > span { align-self: start; color: var(--red); font: 10px/1.2 var(--mono); letter-spacing: .08em; }
.benefit-row h3 { font: 600 clamp(20px, 2vw, 28px)/1.3 var(--serif); letter-spacing: -.025em; }
.benefit-row > p { max-width: 45ch; color: #526159; font-size: 14px; line-height: 1.72; word-break: keep-all; }
.benefit-row > strong {
  padding-left: 22px; color: var(--red); border-left: 2px solid var(--ochre);
  font: 600 15px/1.55 var(--serif); word-break: keep-all;
}
.benefits-action { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.benefits-action > p { color: #526159; font-size: 13px; line-height: 1.6; }
.benefits-action > p b { color: var(--green); }

/* performance 1: the card travels, but the layout is a new four-book route */
.reading-route { position: relative; height: 2450px; background: var(--paper-light); }
.route-stage {
  position: sticky; top: 72px; height: calc(100svh - 72px); min-height: 680px; overflow: hidden;
  padding: clamp(26px, 4vw, 64px); display: grid; grid-template-rows: auto 1fr; gap: 28px;
}
.section-heading { display: grid; grid-template-columns: .7fr 1.1fr .8fr; align-items: end; gap: 30px; }
.section-heading > p { align-self: start; }
.section-heading h2 { font: 600 clamp(32px, 3.2vw, 44px)/1.16 var(--serif); letter-spacing: -.035em; }
.section-heading > span { max-width: 35ch; justify-self: end; color: var(--sage); font-size: 14px; line-height: 1.6; }
.book-route {
  position: relative; align-self: stretch; display: grid; grid-template-columns: repeat(4,1fr); align-items: end;
  gap: clamp(10px, 1.7vw, 26px); padding: 8% 0 0;
}
.route-book {
  position: relative; min-width: 0; height: var(--book-h); padding: 24px 20px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--paper-light); background: var(--book-color);
  border: 1px solid rgba(21,37,31,.45); box-shadow: inset 0 -14px rgba(0,0,0,.12), 8px 10px 0 rgba(75,50,41,.14);
}
.route-book::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 20px; height: 1px; background: var(--ochre);
  box-shadow: 0 8px var(--ochre);
}
.route-book span { color: var(--ochre); font: 10px/1 var(--mono); }
.route-book h3 { margin: 14px 0 10px; font: 600 clamp(18px, 1.55vw, 23px)/1.25 var(--serif); letter-spacing: -.02em; }
.route-book p { max-width: 22ch; font-size: 13px; line-height: 1.45; }
.route-1 { --book-h: 60%; --book-color: var(--green); }
.route-2 { --book-h: 78%; --book-color: var(--red); }
.route-3 { --book-h: 68%; --book-color: var(--wood); }
.route-4 { --book-h: 88%; --book-color: var(--sage); }
.travelling-card {
  position: absolute; z-index: 8; left: clamp(26px, 4vw, 64px); top: 43%;
  width: clamp(210px, 18vw, 280px); aspect-ratio: 1.35; padding: 18px;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--red); box-shadow: 10px 12px 0 rgba(75,50,41,.24);
  transform: translate3d(var(--card-x,0),var(--card-y,0),0) rotate(var(--card-r,-3deg));
  will-change: transform;
}
.card-head { display: flex; justify-content: space-between; color: var(--red); font: 9px/1 var(--mono); }
.travelling-card > p { margin-top: 12px; color: var(--sage); font-size: 10px; }
.travelling-card > i { display: block; height: 1px; margin-top: 5px; background: var(--line); }
.card-stamps { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 4px; }
.card-stamps span {
  width: 28px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--red); border-radius: 50%;
  color: var(--red); font: 10px/1 var(--mono); opacity: .18; transition: opacity .25s, background .25s, color .25s;
}
.card-stamps span.is-active { color: var(--paper-light); background: var(--red); opacity: 1; }

/* physical card-catalog room */
.catalog-room {
  position: relative; padding: clamp(70px, 9vw, 140px) clamp(20px, 5vw, 80px);
  color: var(--paper-light);
  background:
    linear-gradient(90deg, rgba(0,0,0,.15), transparent 10%, transparent 90%, rgba(0,0,0,.15)),
    var(--wood);
}
.catalog-heading { display: grid; grid-template-columns: 1fr .8fr auto; align-items: end; gap: 36px; }
.catalog-heading > div > p { color: var(--ochre); }
.catalog-heading h2 { font: 600 clamp(32px, 3.2vw, 44px)/1.16 var(--serif); letter-spacing: -.035em; }
.catalog-heading > p { max-width: 45ch; color: rgba(239,227,200,.72); font-size: 14px; line-height: 1.6; }
.catalog-view { display: flex; }
.catalog-view button {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--ochre); color: var(--paper-light); background: transparent; cursor: pointer;
}
.catalog-view button[aria-pressed="true"] { color: var(--ink); background: var(--ochre); }
.catalog-view button:focus-visible { outline: 2px solid var(--paper-light); outline-offset: 3px; }
.catalog-drawers {
  margin-top: 52px; display: grid; grid-template-columns: repeat(5,1fr);
  border: 8px solid #2d211c; border-bottom: 18px solid #2d211c;
}
.catalog-drawers span {
  min-height: 76px; display: grid; place-items: center; color: var(--ochre); background: #5d4034;
  border-right: 4px solid #2d211c; font: 11px/1 var(--mono); letter-spacing: .14em;
}
.catalog-drawers span:last-child { border-right: 0; }
.catalog-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.catalog-card {
  min-height: 220px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(117,128,119,.16) 31px 32px),
    var(--paper-light);
  border-top: 5px solid var(--card-color,var(--red)); box-shadow: 6px 8px 0 rgba(0,0,0,.18);
  transition: transform .3s var(--ease), color .25s, background .25s;
}
.catalog-card:nth-child(3n+2) { --card-color: var(--ochre); }
.catalog-card:nth-child(3n) { --card-color: var(--sage); }
.catalog-card span { color: var(--red); font: 10px/1 var(--mono); }
.catalog-card blockquote { font: 600 clamp(17px, 1.4vw, 21px)/1.46 var(--serif); letter-spacing: -.02em; word-break: keep-all; }
.catalog-card:hover, .catalog-card:focus-visible { color: var(--paper-light); background: var(--green); transform: translateY(-8px) rotate(-1deg); outline: 2px solid var(--ochre); outline-offset: 3px; }
.catalog-room.is-list .catalog-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.catalog-room.is-list .catalog-card { min-height: 74px; flex-direction: row; align-items: center; gap: 20px; border-top-width: 1px; border-left: 8px solid var(--card-color,var(--red)); }
.catalog-room.is-list .catalog-card blockquote { font: 600 17px/1.3 var(--serif); }

/* performance 2: horizontal page travel inside a new book spread */
.thursday-cycle { position: relative; height: 3600px; background: var(--green); }
.cycle-stage {
  position: sticky; top: 72px; height: calc(100svh - 72px); min-height: 680px; overflow: hidden;
  padding: clamp(24px, 4vw, 64px); display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap: 48px;
  color: var(--paper-light);
}
.cycle-stage > header { align-self: center; }
.cycle-stage > header > p { color: var(--ochre); }
.cycle-stage h2 { font: 600 clamp(34px, 3.5vw, 48px)/1.15 var(--serif); letter-spacing: -.035em; }
.cycle-index { margin-top: 36px; display: flex; align-items: baseline; gap: 8px; color: var(--ochre); font-family: var(--mono); }
.cycle-index b { font-size: 42px; }.cycle-index em { font-style: normal; font-size: 16px; }
.page-window {
  align-self: center; height: min(72vh, 680px); overflow: hidden; background: rgba(0,0,0,.18);
  box-shadow: 18px 22px 0 rgba(0,0,0,.16);
}
.page-track { width: 400%; height: 100%; display: flex; transform: translate3d(var(--page-x,0),0,0); will-change: transform; }
.cycle-page {
  position: relative; width: 25%; height: 100%; padding: clamp(28px, 4vw, 58px);
  display: flex; flex-direction: column; color: var(--ink);
  background:
    linear-gradient(90deg, rgba(75,50,41,.12), transparent 8%, transparent 92%, rgba(75,50,41,.12)),
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(117,128,119,.18) 43px 44px),
    var(--paper-light);
  border-right: 1px solid var(--line);
}
.cycle-page::after {
  content: ""; position: absolute; left: 7%; right: 7%; top: 15%; height: 1px; background: var(--red);
}
.cycle-page > span { color: var(--red); font: 12px/1 var(--mono); }
.cycle-page > p { max-width: 34ch; margin-top: 20%; font-size: 15px; line-height: 1.65; }
.cycle-page > strong { margin-top: auto; font: 600 clamp(30px, 3.1vw, 42px)/1.18 var(--serif); letter-spacing: -.03em; }
.page-two { background-color: #f2e8d3; }.page-three { background-color: #eadfc7; }.page-four { background-color: #f4ecd9; }

/* performance 3: blur resolves into an open notebook */
.reading-notebook { position: relative; height: 1900px; background: var(--paper); }
.notebook-stage {
  position: sticky; top: 72px; height: calc(100svh - 72px); min-height: 680px; overflow: hidden;
  display: grid; place-items: center; padding: clamp(22px, 4vw, 60px);
  background:
    radial-gradient(circle at center, rgba(182,138,69,.13), transparent 40%),
    var(--paper);
}
.notebook {
  position: absolute; width: min(88vw, 1240px); height: min(72vh, 680px);
  display: grid; grid-template-columns: 1fr 1fr;
  filter: blur(var(--notebook-blur,10px)); transform: scale(var(--notebook-scale,1.08));
  box-shadow: 20px 24px 0 rgba(75,50,41,.18); will-change: filter, transform;
}
.notebook::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(75,50,41,.22); box-shadow: 0 0 20px rgba(75,50,41,.25); }
.notebook-page {
  padding: 42px;
  background:
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(117,128,119,.18) 43px 44px),
    var(--paper-light);
}
.notebook-page span { color: var(--red); font: 11px/1 var(--mono); }
.notebook-page i { display: block; width: var(--w,72%); height: 8px; margin-top: 48px; background: rgba(21,37,31,.24); }
.notebook-page i:nth-of-type(2) { --w:88%; }.notebook-page i:nth-of-type(3) { --w:52%; }.notebook-page i:nth-of-type(4) { --w:78%; }
.notebook-copy {
  position: relative; z-index: 3; width: min(820px, 84vw); padding: 44px; text-align: center;
  background: rgba(239,227,200,.9); border-top: 1px solid var(--red); border-bottom: 1px solid var(--red);
}
.notebook-copy > p { color: var(--red); font: 10px/1 var(--mono); letter-spacing: .14em; }
.notebook-copy h2 { margin-top: 18px; font: 600 clamp(32px, 3.2vw, 44px)/1.18 var(--serif); letter-spacing: -.03em; }
.notebook-copy blockquote { margin: 24px 0 30px; font: 500 clamp(19px, 2vw, 28px)/1.45 var(--serif); }

/* practical visit information */
.visit-panel {
  padding: clamp(70px, 9vw, 140px) clamp(22px, 5vw, 80px);
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 8vw, 120px);
  color: var(--paper-light); background: var(--red);
}
.visit-title > p { color: var(--ochre); }
.visit-title h2 { font: 600 clamp(34px, 3.5vw, 48px)/1.16 var(--serif); letter-spacing: -.035em; }
.visit-title .visit-lead { max-width: 38ch; margin-top: 28px; color: rgba(239,227,200,.76); font: 500 14px/1.7 var(--sans); letter-spacing: 0; }
.visit-details { border-top: 1px solid rgba(239,227,200,.55); }
.visit-details > div { padding: 22px 0; display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid rgba(239,227,200,.35); }
.visit-details dt { color: var(--ochre); font: 11px/1 var(--mono); }
.visit-details dd { font-size: 15px; }
.visit-return { align-self: end; justify-self: end; color: var(--ochre); text-decoration: underline; text-underline-offset: 7px; }

/* The conversion form borrows the visual language of a library membership card. */
.application {
  padding: clamp(76px, 9vw, 138px) clamp(22px, 5vw, 80px);
  display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px, 6vw, 96px);
  color: var(--ink); background:
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(21,37,31,.035) 95px 96px),
    var(--paper-light);
}
.application-heading { align-self: start; }
.application-heading > p:first-child { color: var(--red); }
.application-heading > p:last-child { max-width: 45ch; margin-top: 26px; color: #526159; font-size: 14px; line-height: 1.75; word-break: keep-all; }
.application-card {
  padding: clamp(24px, 3vw, 42px); color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(118,47,44,.22) 10% calc(10% + 1px), transparent calc(10% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(117,128,119,.15) 39px 40px),
    var(--paper);
  border: 2px solid var(--red); box-shadow: 14px 16px 0 rgba(75,50,41,.18);
}
.application-card-head { padding-bottom: 20px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--red); font: 10px/1 var(--mono); letter-spacing: .1em; }
.join-form { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.join-form label:not(.consent) { display: flex; flex-direction: column; gap: 9px; }
.join-form label > span { font-size: 12px; font-weight: 700; }
.join-form input[type="text"], .join-form textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--green); border-radius: 0;
  color: var(--ink); background: rgba(248,241,223,.48); font: 500 14px/1.55 var(--sans); outline: 0;
}
.join-form input[type="text"] { height: 48px; padding: 0 12px; }
.join-form textarea { min-height: 96px; padding: 12px; resize: vertical; }
.join-form input[type="text"]:focus, .join-form textarea:focus { border-bottom-width: 2px; background: var(--paper-light); box-shadow: 0 3px 0 rgba(182,138,69,.35); }
.join-form input::placeholder, .join-form textarea::placeholder { color: #7f857f; }
.form-wide { grid-column: 1/-1; }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--green); }
.consent span { color: #526159; font-size: 11px; line-height: 1.55; font-weight: 500; }
.form-action { display: flex; align-items: center; gap: 18px; }
.form-action .button { flex: 0 0 auto; border: 0; cursor: pointer; }
.form-status { color: #526159; font-size: 11px; line-height: 1.5; }
.form-status.is-success { color: var(--red); font-weight: 750; }
.connection-map { grid-column: 1/-1; margin-top: 10px; display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(30px, 6vw, 80px); }
.connection-map h3 { font: 600 22px/1.4 var(--serif); }
.connection-map ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; border-top: 1px solid var(--line); }
.connection-map li { min-height: 150px; padding: 22px 18px 12px; display: flex; gap: 15px; border-bottom: 1px solid var(--line); }
.connection-map li + li { border-left: 1px solid var(--line); }
.connection-map li > span { color: var(--red); font: 10px/1 var(--mono); }
.connection-map li b { display: block; margin-bottom: 10px; font-size: 14px; }
.connection-map li p { color: #526159; font-size: 12px; line-height: 1.6; word-break: keep-all; }
.connection-map li a { text-decoration: underline; text-underline-offset: 4px; }
.connection-map li a:hover, .connection-map li a:focus-visible { color: var(--red); outline: 0; }
.concept-notice { grid-column: 2; padding: 14px 16px; color: #526159; background: rgba(239,227,200,.6); border-left: 3px solid var(--ochre); font-size: 11px; line-height: 1.55; }
.concept-notice b { margin-right: 10px; color: var(--red); font: 10px/1 var(--mono); letter-spacing: .08em; }

.site-footer {
  min-height: 280px; padding: 54px clamp(22px, 5vw, 80px);
  display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px;
  color: var(--paper-light); background: var(--green); border-top: 8px solid var(--ochre);
}
.site-footer strong { font: 600 clamp(40px, 4.2vw, 60px)/1.06 var(--serif); letter-spacing: -.04em; }
.site-footer > span { justify-self: end; color: var(--ochre); font: 11px/1 var(--mono); }
.site-footer small { grid-column: 1/-1; max-width: 90ch; color: rgba(239,227,200,.68); font-size: 10px; line-height: 1.5; }

.motion-safe *, .motion-safe *::before, .motion-safe *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; height: 64px; }
  .site-header nav { display: none; }
  .header-apply { min-height: 36px; }
  .bookshop-hero { min-height: auto; grid-template-columns: 1fr; padding: 34px 22px 54px; }
  .hero-copy { padding: 34px 0 10px; }
  .hero-copy h1 { font-size: clamp(40px, 6.2vw, 46px); }
  .window-display { min-height: 680px; }

  .club-intro { grid-template-columns: 1fr 1fr; }
  .intro-specs > div { padding: 24px 18px; grid-template-columns: 1fr; gap: 12px; }

  .benefits-heading { grid-template-columns: .55fr 1.1fr; }
  .benefits-heading > p:last-child { grid-column: 2; }
  .benefit-row { grid-template-columns: .32fr .7fr 1.25fr; }
  .benefit-row > strong { grid-column: 2/-1; padding: 12px 0 0; border-top: 1px solid rgba(182,138,69,.55); border-left: 0; }

  .route-stage { top: 64px; height: calc(100svh - 64px); padding: 28px 22px; }
  .section-heading { grid-template-columns: 1fr 1fr; }
  .section-heading > p { grid-column: 1/-1; margin-bottom: 0; }
  .section-heading > span { align-self: end; }
  .book-route { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding-top: 2%; }
  .route-book { height: 100%; min-height: 0; }
  .travelling-card { left: 22px; top: 48%; width: 210px; }

  .catalog-heading { grid-template-columns: 1fr 1fr; }
  .catalog-heading > p { grid-column: 2; grid-row: 1; }
  .catalog-view { grid-column: 1/-1; }
  .catalog-grid { grid-template-columns: 1fr 1fr; }

  .cycle-stage { top: 64px; height: calc(100svh - 64px); grid-template-columns: .7fr 1.3fr; gap: 24px; padding: 28px 22px; }
  .cycle-stage h2 { font-size: clamp(32px, 4.6vw, 40px); }
  .page-window { height: 68vh; }

  .notebook-stage { top: 64px; height: calc(100svh - 64px); }
  .visit-panel { grid-template-columns: 1fr; }
  .visit-return { justify-self: start; }
  .application { grid-template-columns: 1fr; }
  .application-heading { max-width: 720px; }
  .connection-map { grid-template-columns: 1fr; }
  .connection-map ol { grid-template-columns: 1fr 1fr; }
  .connection-map li:nth-child(3) { border-left: 0; }
  .concept-notice { grid-column: 1; }
}

@media (max-width: 600px) {
  .site-header { padding: 0 14px; }
  .brand small { display: none; }
  .header-apply { min-height: 34px; padding: 0 11px; font-size: 11px; }
  .bookshop-hero { padding: 20px 12px 38px; }
  .hero-copy { padding: 22px 4px 12px; }
  .eyebrow { max-width: 28ch; margin-bottom: 16px; line-height: 1.5; }
  .hero-copy h1 { font-size: clamp(36px, 10vw, 40px); }
  .hero-description { margin-top: 24px; font-size: 15px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero-facts { margin-top: 28px; padding-top: 18px; }
  .hero-facts li { padding-right: 10px; }
  .hero-facts li + li { padding-left: 10px; }
  .hero-facts b { font-size: 14px; }
  .hero-facts span { font-size: 10px; }
  .window-display { min-height: 560px; border-width: 7px; box-shadow: 10px 12px 0 rgba(75,50,41,.2); }
  .window-lettering { font-size: 40px; }
  .shelf { height: 128px; border-bottom-width: 12px; }
  .shelf-top { top: 34%; }.shelf-bottom { bottom: 9%; }
  .featured-card { right: 8%; top: 25%; width: 62%; padding: 19px 16px; box-shadow: 8px 9px 0 rgba(75,50,41,.28); }
  .featured-card blockquote { font-size: 18px; }
  .featured-card b { font-size: 70px; }
  .window-hours { right: 3%; bottom: 2%; }

  .club-intro { padding: 72px 18px; grid-template-columns: 1fr; gap: 30px; }
  .intro-statement h2 { font-size: 29px; }
  .intro-copy > p { font-size: 14px; }
  .intro-specs { grid-template-columns: 1fr; margin-top: 8px; }
  .intro-specs > div { min-height: auto; padding: 20px 0; grid-template-columns: 64px 1fr; }
  .intro-specs > div + div { border-top: 1px solid rgba(239,227,200,.3); border-left: 0; }
  .intro-specs dd { font-size: 15px; }

  .member-benefits { padding: 72px 18px; background: repeating-linear-gradient(0deg, transparent 0 43px, rgba(117,128,119,.1) 43px 44px), var(--paper-light); }
  .benefits-heading { grid-template-columns: 1fr; gap: 18px; }
  .benefits-heading > p:last-child { grid-column: 1; }
  .benefits-heading h2 { font-size: 29px; }
  .benefit-ledger { margin-top: 44px; }
  .benefit-row { min-height: auto; padding: 24px 0; grid-template-columns: 64px 1fr; gap: 14px 12px; }
  .benefit-row h3 { font-size: 21px; }
  .benefit-row > p { grid-column: 2; font-size: 13px; }
  .benefit-row > strong { grid-column: 2; padding-top: 12px; font-size: 14px; }
  .benefits-action { align-items: stretch; flex-direction: column; }
  .benefits-action .button { width: 100%; }

  .reading-route { height: 2250px; }
  .route-stage { padding: 22px 12px; gap: 16px; }
  .section-heading { grid-template-columns: 1fr; gap: 10px; }
  .section-heading > p { margin-bottom: 0; }
  .section-heading h2 { font-size: 28px; }
  .section-heading > span { display: none; }
  .book-route { gap: 8px; }
  .route-book { padding: 18px 12px; box-shadow: inset 0 -8px rgba(0,0,0,.12), 4px 5px rgba(75,50,41,.14); }
  .route-book h3 { font-size: 17px; }
  .route-book p { font-size: 11px; }
  .travelling-card { left: 12px; top: 45%; width: 180px; padding: 13px; }
  .card-stamps span { width: 23px; }

  .catalog-room { padding: 70px 12px; }
  .catalog-heading { grid-template-columns: 1fr; gap: 20px; }
  .catalog-heading > p { grid-column: 1; grid-row: auto; }
  .catalog-view { width: 100%; }
  .catalog-view button { flex: 1; }
  .catalog-drawers { margin-top: 34px; border-width: 5px; border-bottom-width: 12px; }
  .catalog-drawers span { min-height: 52px; font-size: 8px; border-right-width: 3px; }
  .catalog-grid { grid-template-columns: 1fr; gap: 10px; }
  .catalog-card { min-height: 156px; }
  .catalog-room.is-list .catalog-grid { grid-template-columns: 1fr; }
  .catalog-room.is-list .catalog-card { min-height: 64px; }

  .thursday-cycle { height: 3200px; }
  .cycle-stage { padding: 22px 12px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 18px; }
  .cycle-stage > header { display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .cycle-stage > header > p { grid-column: 1/-1; margin-bottom: 12px; }
  .cycle-stage h2 { font-size: 28px; }
  .cycle-index { margin: 0; }
  .page-window { height: 58vh; }
  .cycle-page { padding: 26px 22px; }
  .cycle-page > p { margin-top: 22%; font-size: 13px; }
  .cycle-page > strong { font-size: 28px; }

  .reading-notebook { height: 1600px; }
  .notebook-stage { padding: 18px 12px; }
  .notebook { width: 94vw; height: 66vh; }
  .notebook-page { padding: 18px; }
  .notebook-copy { width: 88vw; padding: 30px 16px; }
  .notebook-copy h2 { font-size: 28px; }
  .notebook-copy blockquote { font-size: 17px; }

  .visit-panel { padding: 70px 18px; }
  .visit-title h2 { font-size: 32px; }
  .visit-details > div { grid-template-columns: 72px 1fr; gap: 10px; }
  .visit-details dd { font-size: 13px; }
  .application { padding: 70px 12px; gap: 30px; }
  .application-heading { padding: 0 6px; }
  .application-heading h2 { font-size: 29px; }
  .application-card { padding: 22px 16px; box-shadow: 8px 9px 0 rgba(75,50,41,.18); }
  .join-form { grid-template-columns: 1fr; gap: 18px; }
  .form-wide { grid-column: 1; }
  .form-action { align-items: stretch; flex-direction: column; }
  .form-action .button { width: 100%; }
  .connection-map { margin-top: 6px; gap: 22px; }
  .connection-map ol { grid-template-columns: 1fr; }
  .connection-map li { min-height: auto; padding: 18px 6px; }
  .connection-map li + li { border-left: 0; }
  .concept-notice { padding: 13px; }
  .site-footer { min-height: 340px; padding: 42px 18px; grid-template-columns: 1fr; }
  .site-footer > span { justify-self: start; }
  .site-footer strong { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important; transition-duration: .001ms !important;
  }
}