/* 印谱 — the seal bench at /seal/.
   A small room about the three chops this site was cut from. Page copy follows
   the system theme the way /plate/ does; the sheet the chops are stamped on
   stays fixed light 宣纸, because paper is paper in the dark too.

   Measured contrast (WCAG relative luminance, test/seal-room.test.js pins it):
     cinnabar #d2352c on paper #f3f2ea   4.36:1   朱文, the impression on the sheet
     paper #f3f2ea on cinnabar #d2352c   4.36:1   白文, the same pair inverted
     sheet ink #222a22 on paper          13.15:1  the readings under each chop
     sheet ink-soft #3c453c on paper     8.87:1   the glosses under each chop
   The chops are graphics, so the 3:1 non-text floor governs them; the readings
   beside them are text and clear AA with room to spare.

   Three controls, all CSS with a few lines of JS in seal-room.js:
     朱文 / 白文 is a radio pair read by :has(), no script involved;
     印泥 wear is a range whose value the script writes to --wear on .bench;
     pressing a chop toggles .is-stamped, which replays the press keyframes. */

.seal-page {
  color-scheme: light dark;
  min-width: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  scrollbar-color: var(--line-dark) var(--paper);
}

.seal-page main {
  width: var(--qb-content-width);
  max-width: 68rem;
  margin-inline: auto;
  padding-block: clamp(7rem, 11vw, 10rem) clamp(6rem, 10vw, 9rem);
}

.seal-page h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 620;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.seal-page h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 620;
  letter-spacing: -.01em;
}

.seal-page h3 b,
.seal-page p b[lang],
.seal-page li b[lang] {
  font-family: var(--font-cjk);
  font-weight: 600;
}

.seal-page h3 b { margin-right: .2em; }

.bench-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* — intro — */
.bench-intro {
  max-width: 44rem;
  padding-bottom: var(--space-7);
}

.bench-kicker {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: lowercase;
}

.bench-kicker b {
  color: var(--cinnabar-deep);
  font-family: var(--font-cjk);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.bench-intro h1 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 630;
  font-stretch: 92%;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.bench-lede {
  max-width: 38rem;
  margin: var(--space-5) 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
}

/* — the bench: controls above, sheet below — */
.bench {
  --sheet-paper: #f3f2ea;
  --sheet-ink: #222a22;
  --sheet-ink-soft: #3c453c;
  --seal-red: #d2352c;
  --wear: 0;
  --stone-h: clamp(176px, 24vw, 236px);
  padding-block: var(--space-6) var(--space-8);
  border-top: var(--line-thin) solid var(--line-dark);
}

.bench-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-5) var(--space-7);
  margin: 0 0 var(--space-6);
}

.control {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.control legend,
.control--paste > label {
  display: block;
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: lowercase;
}

.control legend b,
.control--paste > label b {
  margin-right: .3em;
  color: var(--ink);
  font-family: var(--font-cjk);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
}

.control--cut {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.control--cut legend { float: left; width: 100%; }

.control__choice {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
}

.control__choice input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--cinnabar);
}

.control__choice > span {
  display: grid;
  line-height: 1.3;
  font-size: .98rem;
}

.control__choice b {
  margin-right: .3em;
  font-family: var(--font-cjk);
  font-weight: 600;
  letter-spacing: .06em;
}

.control__choice small {
  color: var(--ink-mute);
  font-size: .8rem;
}

.control__dial {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
}

.control__dial input {
  width: clamp(140px, 18vw, 220px);
  margin: 0;
  accent-color: var(--cinnabar);
}

.control--hint {
  align-self: center;
  margin: 0;
  color: var(--ink-mute);
  font-size: .92rem;
}

.control__choice input:focus-visible,
.control__dial input:focus-visible,
.stone:focus-visible {
  outline: var(--line-strong) solid var(--cinnabar);
  outline-offset: 4px;
}

/* the 宣纸 sheet: fixed light paper, a mounted edge, three impressions */
.bench-sheet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-6) clamp(var(--space-6), 6vw, var(--space-8));
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
  background: var(--sheet-paper);
  border: var(--line-thin) solid var(--celadon-deep);
  border-radius: 3px;
  box-shadow: 0 24px 54px rgba(34, 42, 34, .18), 0 4px 10px rgba(34, 42, 34, .1);
  color: var(--sheet-ink);
}

.impression {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  width: clamp(200px, 26vw, 260px);
  margin: 0;
}

.impression figcaption { text-align: center; }
.impression figcaption p { margin: 0; }

.impression__reading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .6em;
  font-family: var(--font-cjk);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  color: var(--sheet-ink);
}

.impression__reading b { font-weight: inherit; }

.impression__gloss {
  margin-top: var(--space-1);
  max-width: 24ch;
  margin-inline: auto;
  color: var(--sheet-ink-soft);
  font-size: .92rem;
  line-height: 1.45;
}

.impression__role {
  margin-top: var(--space-2);
  color: var(--sheet-ink-soft);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: lowercase;
}

.impression__role b {
  margin-right: .25em;
  color: var(--sheet-ink);
  font-family: var(--font-cjk);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
}

/* — the stone: a button whose face is the mounted seal mask —
   .stone__field is the block a 白文 seal prints; it sits inside the paper
   margin that each cut keeps outside its border (inset / canvas from
   compose-seals.py), so the field ends where the stone's edge would. */
.stone {
  position: relative;
  display: block;
  height: var(--stone-h);
  aspect-ratio: var(--stone-ratio);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stone--lead { --stone-ratio: 1016 / 2216; --stone-inset-x: 3.35%; --stone-inset-y: 1.53%; }
.stone--name { --stone-ratio: 1 / 1; --stone-inset-x: 3.25%; --stone-inset-y: 3.25%; }
.stone--idle { --stone-ratio: 620 / 1900; --stone-inset-x: 5.48%; --stone-inset-y: 1.79%; }

.stone__print,
.stone__field,
.stone__mark,
.stone__wear,
.stone__bloom {
  position: absolute;
  display: block;
  pointer-events: none;
}

.stone__print { inset: 0; transform-origin: 50% 46%; }

.stone__field {
  inset: var(--stone-inset-y) var(--stone-inset-x);
  background: transparent;
}

.stone__mark {
  inset: 0;
  background-color: var(--seal-red);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.stone--lead .stone__mark {
  -webkit-mask-image: url("seal-lead.svg?v=77");
  mask-image: url("seal-lead.svg?v=77");
}

.stone--name .stone__mark {
  -webkit-mask-image: url("seal-name-qinbaichuan.svg?v=1");
  mask-image: url("seal-name-qinbaichuan.svg?v=1");
}

.stone--idle .stone__mark {
  -webkit-mask-image: url("seal-idle-yourongnaida.svg?v=1");
  mask-image: url("seal-idle-yourongnaida.svg?v=1");
}

/* 白文: the field takes the paste and the cut prints in paper. Same mask,
   same two colours, swapped. */
.bench:has(#cut-bai:checked) .stone__field { background: var(--seal-red); }
.bench:has(#cut-bai:checked) .stone__mark { background-color: var(--sheet-paper); }

/* 印泥不匀: two paper-coloured layers masked by the paste field, one fine
   and one coarse. Paper over paper is invisible, so the blotches only show
   where they land on cinnabar, which is exactly where paste failed to reach.
   --wear runs 0..1; the coarse layer holds back until the dial is a third in. */
.stone__wear {
  inset: 0;
  background: var(--sheet-paper);
  -webkit-mask-image: url("seal-paste.svg?v=1");
  mask-image: url("seal-paste.svg?v=1");
  -webkit-mask-size: 92px 92px;
  mask-size: 92px 92px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: calc(var(--wear) * .85);
}

.stone__wear--coarse {
  -webkit-mask-size: 214px 214px;
  mask-size: 214px 214px;
  -webkit-mask-position: 37px 61px;
  mask-position: 37px 61px;
  opacity: clamp(0, calc(var(--wear) * 1.3 - .4), 1);
}

/* the paste bloom: a soft red halo that spreads and fades under a press */
.stone__bloom {
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(210, 53, 44, .42), rgba(210, 53, 44, 0) 72%);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .stone:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: no-preference) {
  .stone { transition: transform 180ms var(--ease-out); }

  /* the sheet is stamped as it loads, one chop after another; a press
     travels down onto the paper, so it starts large and settles */
  .stone__print { animation: stone-press 560ms var(--ease-out) both; }
  .stone__bloom { animation: paste-bloom 760ms var(--ease-out) both; }
  .impression:nth-child(2) .stone__print,
  .impression:nth-child(2) .stone__bloom { animation-delay: 160ms; }
  .impression:nth-child(3) .stone__print,
  .impression:nth-child(3) .stone__bloom { animation-delay: 320ms; }

  /* a second press: the script swaps the class off and on, and a changed
     animation-name restarts the keyframes from the top */
  .stone.is-stamped .stone__print { animation: stone-repress 560ms var(--ease-out) both; animation-delay: 0s; }
  .stone.is-stamped .stone__bloom { animation: paste-rebloom 760ms var(--ease-out) both; animation-delay: 0s; }

  @keyframes stone-press {
    from { opacity: 0; transform: scale(1.22) rotate(-2.5deg); }
    55% { opacity: 1; transform: scale(.985) rotate(.3deg); }
    to { opacity: 1; transform: none; }
  }

  @keyframes stone-repress {
    from { opacity: 0; transform: scale(1.22) rotate(-2.5deg); }
    55% { opacity: 1; transform: scale(.985) rotate(.3deg); }
    to { opacity: 1; transform: none; }
  }

  @keyframes paste-bloom {
    from { opacity: 0; transform: scale(.5); }
    30% { opacity: .7; }
    to { opacity: 0; transform: scale(1.22); }
  }

  @keyframes paste-rebloom {
    from { opacity: 0; transform: scale(.5); }
    30% { opacity: .7; }
    to { opacity: 0; transform: scale(1.22); }
  }
}

/* — notes, method, outlines — */
.bench-notes,
.bench-method,
.bench-glyphs {
  padding-block: var(--space-7);
  border-top: var(--line-thin) solid var(--line-dark);
}

.bench-notes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.bench-notes article p,
.method-steps li,
.bench-glyphs__lede {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
}

.bench-notes article p:last-child { margin-bottom: 0; }

.method-steps {
  max-width: 44rem;
  margin: 0;
  padding-left: 1.4em;
}

.method-steps li { padding-left: .3em; }
.method-steps li::marker { color: var(--cinnabar-deep); font-family: var(--font-mono); font-size: .85rem; }
.method-steps strong { color: var(--ink); font-weight: 600; }

.bench-glyphs__lede { max-width: 44rem; margin-bottom: var(--space-6); }

.glyph-group + .glyph-group { margin-top: var(--space-6); }

.glyph-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.glyph-tile {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--paper-raised);
  border: var(--line-thin) solid var(--line);
  border-radius: 3px;
  text-align: center;
}

.glyph-tile svg {
  width: 72px;
  height: 72px;
  color: var(--ink);
}

.glyph-tile b {
  font-family: var(--font-cjk);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
}

.glyph-tile span {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1.35;
}

.bench-credit {
  max-width: 44rem;
  margin: var(--space-7) 0 0;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .03em;
  line-height: 1.6;
}

.bench-credit b { font-family: var(--font-cjk); font-weight: 600; }

@media (max-width: 760px) {
  .bench-notes__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .bench-controls { gap: var(--space-5); }
}

@media (max-width: 480px) {
  .bench { --stone-h: 168px; }
  .bench-sheet { gap: var(--space-6) var(--space-5); }
  .impression { width: min(100%, 220px); }
  .glyph-list { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .glyph-tile svg { width: 60px; height: 60px; }
}

/* the docked vinyl player covers the bottom-right corner at this width */
@media (max-width: 44rem) {
  .bench-credit { padding-right: max(0px, calc(5.33rem - var(--qb-page-gutter))); }
}

@media (prefers-color-scheme: dark) {
  .seal-page {
    --paper: #17201a;
    --paper-raised: #222a22;
    --paper-deep: #111712;
    --ink: #e8ede4;
    --ink-soft: #cdd7ce;
    --ink-mute: #b8c4ba;
    --line: #36433a;
    --line-dark: #536357;
    --cinnabar: #e25c50;
    --cinnabar-deep: #ee6a58;
    --celadon: #a9bfad;
    --celadon-deep: #a9bfad;
  }

  .bench-sheet {
    box-shadow: 0 24px 54px rgba(0, 0, 0, .36), 0 4px 10px rgba(0, 0, 0, .24);
  }
}