/* matsurika.bid — anti-design editorial herbarium
   Palette: aged ivory paper, bog-oak ink, sage moss, dusted blush, deep madder wax */

:root {
  --paper: #f4eedf;
  --paper-warm: #ebe2cc;
  --ink: #2a2520;
  --ink-soft: #6b5e4c;
  --moss: #7e8a6a;
  --vine-deep: #4f5a3f;
  --blush: #c79d8e;
  --petal: #e6c9bc;
  --wax: #7a3b30;
  --wax-light: #9a4a3d;
  --wax-dark: #5a2a20;
  --pencil: #8a8273;
  --rule-ink: #3a342c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(199,157,142,0.10), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(126,138,106,0.10), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(235,226,204,0.5), transparent 70%);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.78;
  font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Frontispiece ---------- */
.frontispiece {
  position: relative;
  padding: clamp(3rem, 9vh, 7rem) 6vw 4rem;
  min-height: 64vh;
}
.masthead-vine {
  position: absolute;
  inset: 0 4vw auto 0;
  height: 60%;
  pointer-events: none;
  overflow: visible;
}
.masthead-vine svg { width: 100%; height: 100%; overflow: visible; }
.masthead {
  font-family: 'Frank Ruhl Libre', 'EB Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 0.95;
  margin: 0 0 0 12%;
  color: var(--ink);
  letter-spacing: -0.01em;
  position: relative;
}
.tagline {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  color: var(--ink-soft);
  margin: 1.1rem 0 0 14%;
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
.frontispiece-note {
  max-width: 34ch;
  margin: 2.6rem 0 0 16%;
  font-size: 0.98rem;
  color: var(--ink-soft);
  font-style: italic;
}
.corner-stamp {
  position: absolute;
  right: 6vw;
  bottom: 1.5rem;
  width: 120px;
  height: 120px;
  opacity: 0.32;
  transform: rotate(-7deg);
}
.corner-stamp svg { width: 100%; height: 100%; }
.corner-stamp circle { stroke: var(--wax); }
.corner-stamp text {
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  fill: var(--wax);
  letter-spacing: 0.12em;
}
.corner-stamp .stamp-small { font-size: 11px; letter-spacing: 0.06em; }

/* ---------- Catalogue / editorial flow ---------- */
.catalogue { display: block; padding-bottom: 3rem; }

.lot {
  position: relative;
  display: block;
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.lot-i   { max-width: 38ch; margin-left: 18%; }
.lot-ii  { max-width: 56ch; margin-left: 38%; }
.lot-iii { max-width: 64ch; margin-left: 8%; }
.lot-iv  { max-width: 42ch; margin-left: 28%; }

@media (max-width: 820px) {
  .lot-i, .lot-ii, .lot-iii, .lot-iv {
    max-width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
}

.folio {
  position: absolute;
  top: -2.4rem;
  left: -3rem;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 4rem;
  color: var(--ink-soft);
  opacity: 0.5;
  user-select: none;
}
.folio-right { left: auto; right: -3rem; }

/* ---------- Pressed-specimen illustration ---------- */
.specimen {
  position: relative;
  width: 200px;
  height: 300px;
  float: right;
  margin: 0 -3.5rem 1.2rem 1.8rem;
}
.lot-ii .specimen, .lot-iv .specimen { float: left; margin: 0 1.8rem 1.2rem -3.5rem; }
.lot-iii .specimen { width: 300px; height: 260px; float: right; margin: 0 -4rem 1rem 2rem; }

@media (max-width: 820px) {
  .specimen, .lot-iii .specimen {
    float: none;
    margin: 0 auto 1.6rem;
  }
}

.press-paper {
  position: absolute;
  inset: 6% 4%;
  border-radius: 50% 48% 52% 50% / 50% 52% 48% 50%;
  background:
    radial-gradient(circle at 38% 32%, var(--petal), rgba(230,201,188,0.55) 55%, rgba(244,238,223,0.2) 80%);
  box-shadow: 0 1px 6px rgba(42,37,32,0.10), inset 0 0 24px rgba(122,59,48,0.07);
}
.press-wide { border-radius: 52% 50% 50% 48% / 48% 50% 50% 52%; }

.vine-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vine-path {
  stroke: var(--vine-deep);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}
.vine-path.draw { animation: draw 2.4s ease-out forwards; }
.specimen-branch { stroke-width: 0.8; opacity: 0.85; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.leaf-blob {
  fill: var(--moss);
  opacity: 0;
}
.leaf-blob.petal { fill: var(--petal); }
.leaf-blob.glyph-center-fill { fill: #c9a045; }
.leaf-blob.show { animation: fadeLeaf 0.9s ease-out forwards; }
@keyframes fadeLeaf { from { opacity: 0; } to { opacity: 0.78; } }
.masthead-path { stroke-width: 1.4; }
.masthead-branch { opacity: 0.8; }

.specimen-tag {
  position: absolute;
  bottom: 4%;
  right: -1.5rem;
  font-family: 'Caveat', cursive;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  transform: rotate(4deg);
  background: rgba(244,238,223,0.7);
  padding: 0 0.3rem;
}
.lot-ii .specimen-tag, .lot-iv .specimen-tag { right: auto; left: -1.5rem; transform: rotate(-3deg); }

/* ---------- Lot text ---------- */
.lot-meta {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.18em;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}
.sc { font-variant-caps: all-small-caps; letter-spacing: 0.18em; }

.lot-title {
  font-family: 'EB Garamond', serif;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 1rem;
  color: var(--ink);
}

.lot-desc {
  text-align: left;
  hyphens: none;
  max-width: 38ch;
  margin: 0 0 1.4rem;
}
.lot-desc em { font-style: italic; color: var(--ink-soft); }

.lot-bid {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.bid-figure {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  font-variant-caps: normal;
  color: var(--ink);
  text-shadow: 0.4px 0 0 var(--ink);
}

/* ---------- Bid slip (CTA) ---------- */
.bid-slip {
  position: absolute;
  top: 1rem;
  right: -22%;
  width: 220px;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.lot-ii .bid-slip, .lot-iv .bid-slip { right: auto; left: -22%; transform: translateX(-18px); }
.lot.active .bid-slip { opacity: 1; transform: translateX(0); pointer-events: auto; }

@media (max-width: 1100px) {
  .bid-slip { position: static; width: 100%; max-width: 240px; margin-top: 1.5rem; opacity: 1; transform: none; pointer-events: auto; }
  .lot-ii .bid-slip, .lot-iv .bid-slip { transform: none; }
}

.bid-slip-paper {
  position: relative;
  background: var(--paper);
  background-image: radial-gradient(circle at 70% 20%, rgba(126,138,106,0.07), transparent 60%);
  padding: 1.1rem 1.2rem 1.3rem 1.6rem;
  box-shadow: 0 2px 10px rgba(42,37,32,0.14);
  -webkit-mask-image: radial-gradient(circle 3.5px at 3.5px 50%, transparent 98%, black 100%);
  mask-image: radial-gradient(circle 3.5px at 3.5px 50%, transparent 98%, black 100%);
  -webkit-mask-size: 7px 14px;
  mask-size: 7px 14px;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.slip-line {
  font-family: 'Caveat', cursive;
  font-size: 1rem;
  color: var(--pencil);
  margin: 0 0 0.6rem;
  transform: rotate(-1.5deg);
}
.slip-label {
  display: block;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.slip-input {
  display: block;
  width: 100%;
  margin: 0.35rem 0 0.9rem;
  padding: 0.35rem 0.5rem;
  border: none;
  border-bottom: 1px solid var(--rule-ink);
  background: transparent;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  color: var(--ink);
}
.slip-input:focus { outline: none; border-bottom-color: var(--wax); }

.wax-seal {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--wax-light), var(--wax) 60%, var(--wax-dark));
  box-shadow: inset -2px -3px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: transform 0.3s ease;
  display: grid;
  place-items: center;
}
.wax-seal span {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--petal);
  text-shadow: -0.5px -0.5px 0 rgba(0,0,0,0.3), 0.5px 0.5px 0 rgba(255,220,200,0.2);
}
.wax-seal:hover { transform: rotate(8deg) scale(1.04); }
.wax-seal.pressed { transform: rotate(2deg) scale(0.96); }

/* ---------- Asymmetric rules ---------- */
.rule {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.rule-line { height: 1px; background: var(--moss); display: block; }
.rule-right { justify-content: flex-start; margin-left: 12%; }
.rule-right .rule-line { width: 46vw; }
.rule-left { justify-content: flex-end; margin-right: 10%; }
.rule-left .rule-line { width: 38vw; }
.jasmine-glyph { width: 26px; height: 26px; flex: none; }
.petal-glyph ellipse { fill: var(--petal); opacity: 0.85; }
.petal-glyph .glyph-center { fill: #c9a045; opacity: 0.9; }

/* ---------- Marginalia ---------- */
.marginalia {
  position: absolute;
  font-family: 'Caveat', cursive;
  font-size: 0.92rem;
  color: var(--pencil);
  opacity: 0;
  max-width: 14ch;
  line-height: 1.3;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.marginalia.visible { opacity: 0.72; }
@media (max-width: 1100px) { .marginalia { display: none; } }

/* ---------- Footer almanac ---------- */
.footer-almanac {
  position: relative;
  max-width: 52ch;
  margin: 4rem 0 3rem 16%;
  padding-top: 2rem;
  border-top: 1px solid var(--moss);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-soft);
}
@media (max-width: 820px) { .footer-almanac { margin-left: 5%; max-width: 90%; } }
.page-stamp {
  display: block;
  margin-top: 1.4rem;
  text-align: right;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.2em;
  font-size: 0.82rem;
  color: var(--wax);
  opacity: 0.55;
  transform: rotate(-2deg);
  transform-origin: right;
}