/* ============================================================
   QUOIN & VELLUM — Catalogue XLVIII, the Michaelmas Sale
   vellum #F3EDE2 · calf #402E24 · morocco #7D1F28
   marbled green #3E5C50 · gilt #C2A15C
   IM Fell English (display) · Petrona (body) · Anonymous Pro (numbers)
   ============================================================ */

:root {
  --vellum: #F3EDE2;
  --vellum-deep: #EAE2D2;
  --calf: #402E24;
  --calf-soft: #5C4636;
  --morocco: #7D1F28;
  --green: #3E5C50;
  --gilt: #C2A15C;
  --gilt-deep: #A5863F;
  --plaster: #F7F2E8;
  --fell: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --fell-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --body: 'Petrona', Georgia, serif;
  --mono: 'Anonymous Pro', 'Courier New', monospace;
  --ease-quill: cubic-bezier(.65, 0, .25, 1);
  --ease-out: cubic-bezier(.22, .8, .32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--vellum);
  color: var(--calf);
  font-family: var(--body);
  font-size: 1.03rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  /* faint paper fibre */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.22 0 0 0 0 0.16 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--morocco); color: var(--vellum); }

a { color: var(--morocco); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green); }

:focus-visible {
  outline: 2px solid var(--morocco);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 { font-weight: 400; }

sup { font-size: .68em; line-height: 0; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .8rem clamp(1rem, 4vw, 3rem) .7rem;
  background: color-mix(in srgb, var(--vellum) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--gilt) 55%, transparent);
}
.mast-name {
  font-family: var(--fell-sc);
  font-size: 1.22rem;
  letter-spacing: .04em;
  color: var(--calf);
  text-decoration: none;
  white-space: nowrap;
}
.mast-name .amp, .colo-name .amp { font-family: var(--fell); font-style: italic; color: var(--morocco); }
.mast-nav {
  display: flex;
  gap: clamp(.9rem, 2.4vw, 1.9rem);
  overflow-x: auto;
  scrollbar-width: none;
}
@media (max-width: 760px) {
  .mast-nav {
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
            mask-image: linear-gradient(to right, #000 80%, transparent);
    padding-right: 2.2rem;
  }
}
.mast-nav::-webkit-scrollbar { display: none; }
.mast-nav a {
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--calf-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: .2rem 0;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.mast-nav a:hover { color: var(--morocco); border-bottom-color: var(--gilt); }

/* ---------- hero: the front board ---------- */
.hero { padding: clamp(1rem, 3vw, 2.4rem) clamp(1rem, 4vw, 3rem) 0; }

.hero-board {
  position: relative;
  min-height: min(82vh, 860px);
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 24px 60px -28px rgba(64, 46, 36, .55),
    0 4px 14px -6px rgba(64, 46, 36, .35);
}
.marble-host {
  /* fallback "marble" if JS is off or canvas not yet painted */
  background:
    repeating-linear-gradient(100deg,
      #E7DCC7 0 14px, #D8CBB2 14px 16px, #E7DCC7 16px 30px,
      rgba(125,31,40,.20) 30px 34px, #E7DCC7 34px 44px,
      rgba(62,92,80,.20) 44px 49px),
    #E7DCC7;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* the board's physicality: raked light at the head, worn dark at the edges */
.hero-board::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 105% at 50% 38%, transparent 58%, rgba(40, 26, 16, .2) 100%);
  box-shadow:
    inset 0 0 64px rgba(40, 26, 16, .22),
    inset 0 2px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 6px rgba(40, 26, 16, .3);
}
#hero-stone { opacity: 0; transition: opacity .9s var(--ease-out); }
#hero-stone.is-in { opacity: 1; }
#hero-full { opacity: 0; }
#hero-full.is-wiping {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  animation: combwipe 1.6s var(--ease-quill) forwards;
}
#hero-full.is-set { opacity: 1; }
@keyframes combwipe {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}
.comb-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(64,46,36,.55), transparent);
  opacity: 0;
  pointer-events: none;
}
.comb-line.is-wiping {
  animation: combline 1.6s var(--ease-quill) forwards;
}
@keyframes combline {
  0%   { opacity: .9; transform: translateY(0); }
  92%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(min(82vh, 860px)); }
}

.hero-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: clamp(44px, 5.5vw, 76px);
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 30%, rgba(255,255,255,.08) 46%, rgba(0,0,0,.22) 96%),
    var(--calf);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  box-shadow: 2px 0 8px rgba(30,20,14,.4);
}
.hs-band {
  width: 68%;
  height: 5px;
  border-top: 1px solid var(--gilt);
  border-bottom: 1px solid var(--gilt);
  opacity: .85;
}
.hs-text {
  writing-mode: vertical-rl;
  font-family: var(--fell-sc);
  font-size: clamp(.6rem, .95vw, .78rem);
  letter-spacing: .32em;
  color: var(--gilt);
  padding: 1.2rem 0;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
  white-space: nowrap;
}

.hero-label {
  position: relative;
  z-index: 2;
  width: min(560px, calc(100% - clamp(70px, 12vw, 140px)));
  margin-left: clamp(34px, 4.5vw, 60px);
  background: var(--plaster);
  border: 1px solid var(--gilt-deep);
  box-shadow:
    0 0 0 5px var(--plaster),
    0 0 0 6px var(--gilt-deep),
    0 18px 40px -18px rgba(40, 26, 16, .6);
  padding: clamp(1.6rem, 3.5vw, 3rem) clamp(1.2rem, 3.5vw, 3rem);
  text-align: center;
  transform: rotate(-.4deg);
  opacity: 0;
  translate: 0 14px;
  transition: opacity .8s var(--ease-out) .1s, translate .8s var(--ease-out) .1s;
}
.hero-label.is-in, .no-js .hero-label, .reduced .hero-label { opacity: 1; translate: 0 0; }

.hl-house {
  font-family: var(--fell-sc);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  letter-spacing: .05em;
  line-height: 1.1;
}
.hl-sub {
  font-family: var(--fell);
  font-style: italic;
  font-size: clamp(.92rem, 1.6vw, 1.05rem);
  color: var(--calf-soft);
  margin-top: .35rem;
}
.hl-rule {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--gilt-deep);
  margin: 1.05rem auto .95rem;
  max-width: 320px;
}
.hl-rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gilt-deep)); }
.hl-rule span:last-child { background: linear-gradient(90deg, var(--gilt-deep), transparent); }
.hl-cat {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--morocco);
}
.hl-title {
  font-family: var(--fell);
  font-size: clamp(2.5rem, 6.2vw, 4.3rem);
  line-height: 1.04;
  margin: .3rem 0 .2rem;
  font-weight: 400;
}
.hl-lots {
  font-family: var(--fell);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--green);
}
.hl-when {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--calf-soft);
}

.hero-turn {
  text-align: center;
  padding: 1.8rem 0 .6rem;
}
.hero-turn a {
  font-family: var(--fell);
  font-style: italic;
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid var(--gilt);
  padding-bottom: 2px;
}

/* ---------- title page ---------- */
.titlepage {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6.5rem) 1.4rem clamp(3.4rem, 7vw, 5.5rem);
  text-align: center;
}
.tp-line { margin: 0 auto; }
.tp-caps {
  font-family: var(--fell-sc);
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  letter-spacing: .08em;
}
.tp-being { font-family: var(--fell); font-size: 1.1rem; color: var(--calf-soft); margin-top: .5rem; }
.tp-big {
  font-family: var(--fell);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.15;
  margin-top: .5rem;
}
.tp-small { font-size: 1rem; margin-top: .9rem; line-height: 1.8; }
.tp-small strong { font-family: var(--fell-sc); font-weight: 400; font-size: 1.08em; letter-spacing: .04em; }
.tp-caps-sm {
  font-family: var(--fell-sc);
  font-size: .95rem;
  letter-spacing: .22em;
  color: var(--morocco);
  margin-top: 1.5rem;
}
.tp-house {
  font-family: var(--fell);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin-top: .25rem;
}
.tp-rule {
  width: 130px;
  height: 7px;
  margin: 1.8rem auto 1.5rem;
  border-top: 1px solid var(--gilt-deep);
  border-bottom: 1px solid var(--gilt-deep);
}
.tp-fine { font-size: .93rem; color: var(--calf-soft); line-height: 1.85; }
.tp-star { color: var(--morocco); }
.tp-footnote {
  font-family: var(--fell);
  font-style: italic;
  font-size: .88rem;
  color: var(--green);
  margin-top: 1.2rem;
}

/* ---------- marbled dividers ---------- */
.divider {
  height: clamp(64px, 9vw, 96px);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--gilt-deep);
  border-bottom: 1px solid var(--gilt-deep);
}
.divider canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- catalogue ---------- */
.catalogue {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(3.6rem, 7vw, 6rem) clamp(1rem, 3.5vw, 2rem) clamp(3.4rem, 6vw, 5rem);
}
.cat-head { text-align: center; max-width: 680px; margin: 0 auto 2.6rem; }
.cat-head h2, .rooms h2, .calendar h2 {
  font-family: var(--fell);
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  line-height: 1.1;
}
.cat-standfirst, .rooms-standfirst, .cal-standfirst {
  margin-top: .9rem;
  color: var(--calf-soft);
  font-size: .98rem;
}

/* the shelf */
.shelf-wrap { margin: 0 auto 3.2rem; width: fit-content; max-width: 100%; }
.shelf {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 0 .6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }
.shelf-board {
  height: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.18)),
    var(--calf);
  border-radius: 2px;
  box-shadow: 0 8px 18px -8px rgba(64,46,36,.55);
}
.spine {
  display: block;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
  transition: translate .3s var(--ease-out);
}
/* the books are shelved one by one as you arrive */
.shelf.will-reveal .spine { opacity: 0; }
.shelf.is-in .spine {
  animation: shelvein .55s var(--ease-out) both;
  animation-delay: calc(var(--i) * 48ms);
}
@keyframes shelvein {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .shelf.will-reveal .spine { opacity: 1; }
  .shelf.is-in .spine { animation: none; }
}
.spine:hover, .spine:focus-visible { translate: 0 -7px; }
.spine svg { display: block; }
.spine .rakelight { transform: translateX(-130%); }
.spine:hover .rakelight, .spine:focus-visible .rakelight {
  transform: translateX(130%);
  transition: transform 1.05s var(--ease-quill);
}
.spine .gilt-text { transition: fill .4s var(--ease-out); }
.spine:hover .gilt-text, .spine:focus-visible .gilt-text { fill: #EBD6A0; }

/* lot entries */
.lots { max-width: 880px; margin: 0 auto; }
.lot {
  border-top: 1px solid color-mix(in srgb, var(--gilt-deep) 55%, transparent);
}
.lot:last-child { border-bottom: 1px solid color-mix(in srgb, var(--gilt-deep) 55%, transparent); }

.lot summary {
  list-style: none;
  display: grid;
  grid-template-columns: 5.4rem 1fr auto;
  gap: 1.1rem 1.4rem;
  padding: 1.35rem .4rem 1.3rem;
  cursor: pointer;
  align-items: start;
  transition: background .3s var(--ease-out);
}
.lot summary::-webkit-details-marker { display: none; }
.lot summary:hover { background: color-mix(in srgb, var(--vellum-deep) 65%, transparent); }

.lot-no {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--morocco);
  padding-top: .1rem;
  white-space: nowrap;
}
.lot-eyebrow {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .3rem;
}
.lot-title {
  display: block;
  font-family: var(--fell);
  font-size: clamp(1.12rem, 2.1vw, 1.32rem);
  line-height: 1.35;
}
.lot-title strong { font-weight: 400; font-family: var(--fell-sc); font-size: .94em; letter-spacing: .02em; }
.lot-imprint {
  display: block;
  font-size: .9rem;
  color: var(--calf-soft);
  margin-top: .3rem;
}
.lot-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  padding-top: .3rem;
}
.lot-est {
  font-family: var(--mono);
  font-size: .92rem;
  color: var(--calf);
  text-align: right;
  white-space: nowrap;
}
.est-label {
  display: block;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--calf-soft);
}
.lot-openword {
  font-family: var(--fell);
  font-style: italic;
  font-size: .9rem;
  color: var(--morocco);
}
.lot-openword::before { content: 'open the boards \2192'; }
.lot[open] .lot-openword::before { content: 'close \2715'; }

/* endpaper spread */
.endpaper {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  margin: 0 .2rem 1.6rem;
  box-shadow: 0 14px 34px -18px rgba(64,46,36,.5), 0 0 0 1px color-mix(in srgb, var(--gilt-deep) 40%, transparent);
}
.endpaper canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lot[open] .endpaper .leaf { animation: leafin .7s var(--ease-out) both; }
@keyframes leafin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.leaf {
  position: relative;
  z-index: 1;
  margin: clamp(1.4rem, 4vw, 2.6rem);
  background: var(--plaster);
  border: 1px solid color-mix(in srgb, var(--gilt-deep) 60%, transparent);
  box-shadow: 0 8px 26px -12px rgba(40,26,16,.45);
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3.2vw, 2.2rem);
}
.collation {
  font-family: var(--mono);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--green);
  border-bottom: 1px solid color-mix(in srgb, var(--gilt-deep) 45%, transparent);
  padding-bottom: .9rem;
  margin-bottom: .95rem;
}
.lot-note { font-size: 1rem; }
.leaf-seed {
  margin-top: 1.2rem;
  padding-top: .7rem;
  border-top: 1px solid color-mix(in srgb, var(--gilt-deep) 40%, transparent);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gilt-deep);
  text-align: right;
}
.leaf-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 1.2rem;
}
.leaf-col h4 {
  font-family: var(--body);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--morocco);
  margin-bottom: .45rem;
}
.prov-sub { color: var(--calf-soft); letter-spacing: .1em; text-transform: none; font-style: italic; font-weight: 400; }
.leaf-col p { font-size: .93rem; }
.prov { list-style: none; counter-reset: prov; }
.prov li {
  counter-increment: prov;
  font-size: .93rem;
  padding: .28rem 0 .28rem 1.7rem;
  position: relative;
}
.prov li::before {
  content: counter(prov);
  position: absolute;
  left: 0;
  top: .42rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--gilt-deep);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: .62rem;
  display: grid;
  place-items: center;
  color: var(--gilt-deep);
}
.prov li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: .55rem;
  top: 1.65rem;
  bottom: -.35rem;
  width: 1px;
  background: color-mix(in srgb, var(--gilt-deep) 50%, transparent);
}

/* ---------- rooms: etiquette + paddle ---------- */
.rooms {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.86 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--calf);
  color: var(--vellum);
  padding: clamp(3.6rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem);
}
.rooms h2 { color: var(--vellum); }
.rooms-standfirst { color: color-mix(in srgb, var(--vellum) 78%, transparent); margin-bottom: 2.2rem; }
.rooms-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.steps { list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.05rem 0 1.05rem 3.4rem;
  border-top: 1px solid color-mix(in srgb, var(--gilt) 35%, transparent);
}
.steps li::before {
  content: counter(step, upper-roman);
  position: absolute;
  left: 0;
  top: 1.2rem;
  font-family: var(--fell);
  font-size: 1.25rem;
  color: var(--gilt);
  width: 2.6rem;
}
.steps h3 {
  font-family: var(--fell);
  font-size: 1.3rem;
  margin-bottom: .25rem;
  color: var(--vellum);
}
.steps p { font-size: .95rem; color: color-mix(in srgb, var(--vellum) 85%, transparent); }
.steps a { color: var(--gilt); }

/* paddle form */
.paddle { position: sticky; top: 5rem; }
.paddle-form {
  background: var(--plaster);
  color: var(--calf);
  border: 1px solid var(--gilt-deep);
  box-shadow: 0 0 0 5px var(--plaster), 0 0 0 6px var(--gilt-deep), 0 22px 44px -20px rgba(0,0,0,.55);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.paddle-form h2 { font-size: clamp(1.6rem, 3vw, 2rem); color: var(--calf); }
.paddle-sub {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--morocco);
  margin: .4rem 0 1.4rem;
}
.field { margin-bottom: 1.05rem; border: 0; }
.field label, .field legend {
  display: block;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  margin-bottom: .35rem;
}
.field .opt { font-weight: 400; color: var(--calf-soft); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"] {
  width: 100%;
  font-family: var(--body);
  font-size: .98rem;
  color: var(--calf);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--calf-soft);
  padding: .35rem 0;
  border-radius: 0;
}
.field input:focus {
  outline: none;
  border-bottom: 2px solid var(--morocco);
  margin-bottom: -1px;
}
.field input::placeholder { color: color-mix(in srgb, var(--calf-soft) 62%, transparent); }
.radio {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-right: 1.1rem;
  font-weight: 400;
  font-size: .93rem;
}
.radio input { accent-color: var(--morocco); }
.paddle-btn {
  display: block;
  width: 100%;
  margin-top: 1.4rem;
  font-family: var(--fell-sc);
  font-size: 1.12rem;
  letter-spacing: .1em;
  color: var(--vellum);
  background: var(--morocco);
  border: 1px solid var(--morocco);
  padding: .8rem 1rem;
  cursor: pointer;
  transition: background .3s var(--ease-out), letter-spacing .3s var(--ease-out);
}
.paddle-btn:hover { background: #641820; letter-spacing: .16em; }
.paddle-done {
  margin-top: 1rem;
  font-family: var(--fell);
  font-style: italic;
  color: var(--green);
  font-size: .95rem;
}
.paddle-alt { margin-top: .9rem; font-size: .85rem; color: var(--calf-soft); }

/* ---------- calendar: sale bills ---------- */
.calendar {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(3.6rem, 7vw, 6rem) clamp(1rem, 3.5vw, 2rem);
  text-align: center;
}
.cal-standfirst { max-width: 560px; margin-left: auto; margin-right: auto; }
.bills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.9rem, 2vw, 1.5rem);
  margin-top: 2.6rem;
  align-items: stretch;
}
.bill {
  background: var(--plaster);
  border: 1px solid color-mix(in srgb, var(--calf-soft) 55%, transparent);
  padding: 1.7rem 1.1rem 1.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  box-shadow: 0 10px 24px -16px rgba(64,46,36,.45);
}
.bill-ord {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--calf-soft);
}
.bill-name { font-family: var(--fell); font-size: 1.42rem; line-height: 1.15; }
.bill-date { font-family: var(--fell); font-style: italic; font-size: .95rem; color: var(--calf-soft); }
.bill-rule {
  border: 0;
  width: 60px;
  height: 5px;
  margin: .5rem auto;
  border-top: 1px solid var(--gilt-deep);
  border-bottom: 1px solid var(--gilt-deep);
}
.bill-desc { font-size: .9rem; flex: 1; }
.bill-state {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: .5rem;
}
.bill.is-past { opacity: .62; }
.bill.is-present {
  border: 1px solid var(--morocco);
  box-shadow: 0 0 0 4px var(--plaster), 0 0 0 5px var(--morocco), 0 14px 30px -14px rgba(64,46,36,.5);
}
.bill.is-present .bill-state { color: var(--morocco); }

/* ---------- colophon ---------- */
.colophon {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.86 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--calf);
  color: color-mix(in srgb, var(--vellum) 88%, transparent);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem) 1.8rem;
}
.colo-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .7fr 1.2fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
}
.colo-name { font-family: var(--fell-sc); font-size: 1.55rem; color: var(--vellum); }
.colo-line { margin-top: .6rem; font-size: .93rem; }
.colophon h4 {
  font-family: var(--body);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: .55rem;
}
.colophon p { font-size: .93rem; }
.colo-find p + p { margin-top: .5rem; }
.colophon a { color: var(--gilt); }
.credit {
  max-width: 1080px;
  margin: 2.6rem auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent);
  font-size: .78rem;
  color: color-mix(in srgb, var(--vellum) 55%, transparent);
}
.credit a { color: color-mix(in srgb, var(--vellum) 70%, transparent); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .rooms-grid { grid-template-columns: 1fr; }
  .paddle { position: static; max-width: 560px; }
  .bills { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .masthead { padding-inline: 1rem; }
  .mast-name { font-size: 1.05rem; }
  .hero { padding-inline: .7rem; }
  .hero-board { min-height: 78vh; }
  .hero-spine { width: 30px; justify-content: space-between; padding: 2.2rem 0; }
  .hs-text { display: none; }
  .hero-label {
    width: calc(100% - 56px);
    margin-left: 38px;
    padding: 1.5rem 1.1rem;
  }
  .lot summary {
    grid-template-columns: 1fr;
    gap: .4rem;
    padding: 1.15rem .2rem;
  }
  .lot-no { padding-top: 0; }
  .lot-side { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; padding-top: .4rem; }
  .lot-est { text-align: left; }
  .est-label { display: inline; margin-right: .5rem; }
  .leaf-cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .leaf { margin: 1rem; }
  .shelf { justify-content: flex-start; }
  .bills { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
  .colo-grid { grid-template-columns: 1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-label { opacity: 1; translate: 0 0; }
  #hero-stone { display: none; }
  .comb-line { display: none; }
  .spine:hover, .spine:focus-visible { translate: 0 0; }
  .spine .rakelight { display: none; }
}