:root {
  --dim-type: #35271c;
}

/* ─────────────── Workshop (hero) ─────────────── */

.workshop {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  background:
    radial-gradient(120% 80% at 50% 110%, #33241a 0%, transparent 60%),
    radial-gradient(90% 70% at 15% 95%, #2c1f15 0%, transparent 55%),
    var(--umber);
  touch-action: pan-y;
}

.dust, .beam { position: absolute; pointer-events: none; }
.dust { inset: 0; width: 100%; height: 100%; z-index: 3; }

/* A fixed 1000×360 cone, placed and sized by transform only (no layout per frame). */
.beam {
  left: 0; top: 0;
  width: 1000px; height: 360px;
  transform-origin: 0 50%;
  transform: scale(0);
  will-change: transform, opacity;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(255, 231, 173, .55) 0%,
    rgba(255, 217, 138, .20) 35%,
    rgba(255, 217, 138, .07) 80%,
    rgba(255, 217, 138, 0) 100%);
  clip-path: polygon(0 48.5%, 100% 0, 100% 100%, 0 51.5%);
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(0deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mix-blend-mode: screen;
  transition: opacity .5s ease;
}
.beam.on { opacity: 1; }

.name {
  grid-row: 2;
  position: relative;
  justify-self: center;
  z-index: 1;
  --lx: -50%;
  --ly: 50%;
  --lr: 18vw;
}
.name-dim, .name-lit {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.1rem, 15.2vw, 17rem);
  line-height: .9;
  letter-spacing: -.012em;
  white-space: nowrap;
}
.name-dim {
  color: var(--dim-type);
  text-shadow:
    0 1px 0 rgba(255, 214, 160, .07),
    0 -1px 0 rgba(0, 0, 0, .55);
}
.name-lit {
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, #fff4d6 0%, #ffd98a 30%, #d69a4e 62%, #8f5a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-mask-image: radial-gradient(var(--lr) calc(var(--lr) * 1.1) at var(--lx) var(--ly), #000 0%, rgba(0,0,0,.75) 35%, transparent 100%);
          mask-image: radial-gradient(var(--lr) calc(var(--lr) * 1.1) at var(--lx) var(--ly), #000 0%, rgba(0,0,0,.75) 35%, transparent 100%);
}

.golem-wrap {
  position: absolute;
  left: clamp(8px, 4vw, 72px);
  bottom: -2vh;
  bottom: -2svh;
  height: min(46vh, 440px);
  height: min(46svh, 440px);
  aspect-ratio: 240 / 340;
  z-index: 4;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6));
}
.golem { width: 100%; height: 100%; display: block; transform-origin: 50% 100%; }
.golem.blink #eye { opacity: .15; transition-duration: .05s; }
.golem-wrap { -webkit-tap-highlight-color: transparent; }
.golem.wave { animation: wave 1.1s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes wave {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-5deg) translateY(-2%); }
  45% { transform: rotate(4deg); }
  70% { transform: rotate(-2deg); }
}
#eye { opacity: 0; transition: opacity .6s ease; }
#eye.on { opacity: 1; }


@media (max-width: 720px) {
  .workshop { grid-template-rows: 1fr auto 1.5fr; }
  .name .br { display: block; }
  .name-dim, .name-lit { font-size: 25.5vw; line-height: .86; }
  .golem-wrap { left: 50%; transform: translateX(-72%); height: 34vh; height: 34svh; bottom: -1svh; }
}

/* ─────────────── The bench: a bronze plate ─────────────── */

.bench {
  display: grid;
  justify-items: center;
  padding: clamp(96px, 16vh, 180px) 16px clamp(72px, 12vh, 140px);
  background:
    radial-gradient(55% 50% at 50% 42%, rgba(255, 217, 138, .10), transparent 70%),
    var(--umber);
  overflow: hidden;
}

.plate-stage {
  --w: min(380px, 80vw);
  position: relative;
  width: var(--w);
  aspect-ratio: 63 / 88;
  perspective: 1400px;
}
.plate-shadow {
  position: absolute;
  left: 8%; right: 8%;
  bottom: -13%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
  filter: blur(8px);
  will-change: transform, opacity;
}
.plate-float { position: absolute; inset: 0; will-change: transform; }

.plate {
  --sheen: 50%;
  --gx: 50%;
  --gy: 40%;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  font-size: var(--w);
  outline: none;
}
.plate.dragging { cursor: grabbing; }
.plate:focus-visible .front,
.plate:focus-visible .back { box-shadow: 0 0 0 3px var(--umber), 0 0 0 5px var(--lamp); }

.edge, .face {
  position: absolute;
  inset: 0;
  border-radius: 5.5% / 4%;
}
.edge { background: linear-gradient(160deg, #7a4d22, #4a2e14); }
.edge:nth-child(1) { transform: translateZ(-2.4px); }
.edge:nth-child(2) { transform: translateZ(-1.2px); }
.edge:nth-child(3) { transform: translateZ(0); }
.edge:nth-child(4) { transform: translateZ(1.2px); }
.edge:nth-child(5) { transform: translateZ(2.4px); }

.face {
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: 10% 8.5% 7.5%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 240, 210, .06) 0 1px, rgba(40, 20, 5, .05) 1px 2px, transparent 2px 4px),
    linear-gradient(160deg, #deae6f 0%, #b88242 34%, #8e5d2d 68%, #ab773d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 196, .45),
    inset 0 0 0 6px rgba(60, 30, 10, .10),
    inset 0 -18px 40px rgba(60, 30, 10, .35);
}
.front { transform: translateZ(3px); }
.back {
  transform: rotateY(180deg) translateZ(3px);
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(90deg, rgba(255, 240, 210, .05) 0 1px, rgba(40, 20, 5, .05) 1px 2px, transparent 2px 4px),
    linear-gradient(200deg, #c9955a 0%, #9c6932 45%, #74491f 100%);
}

.engraved {
  color: #4a2c12;
  text-shadow:
    0 1px 0 rgba(255, 228, 180, .55),
    0 -1px 0 rgba(40, 20, 5, .40);
}

.rivet {
  position: absolute;
  width: 3.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6dcaa, #9a6632 55%, #4a2c12);
  box-shadow: 0 1px 1.5px rgba(40, 20, 5, .6);
}

.plate-name {
  margin: 0 0 5.5%;
  font-family: var(--display);
  font-weight: 400;
  font-size: .108em;
  line-height: 1;
  letter-spacing: -.005em;
}

.window {
  position: relative;
  aspect-ratio: 1.22;
  overflow: hidden;
  border-radius: 2.5%;
  background: radial-gradient(70% 90% at 78% 45%, #5b4631 0%, #2c2118 55%, #150f0a 100%);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, .85),
    inset 0 0 0 1px rgba(0, 0, 0, .6),
    0 1px 0 rgba(255, 228, 180, .6),
    0 -1px 0 rgba(40, 20, 5, .5);
}
.art-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(#2a1f16, #120c08);
  border-top: 1px solid rgba(255, 220, 170, .12);
}
.art-orb {
  position: absolute; right: 9%; top: 24%;
  width: 34%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, #ffe19a 35%, rgba(255, 196, 96, .5) 60%, transparent 72%);
  z-index: 2;
}
.art-ray {
  position: absolute; left: 25%; top: 24.5%;
  width: 52%; height: 22%;
  background: linear-gradient(90deg, rgba(255, 240, 200, .85), rgba(255, 220, 150, .3) 70%, transparent);
  clip-path: polygon(0 12%, 100% 20%, 100% 100%, 0 20%);
  z-index: 2;
}
.art-golem {
  position: absolute; left: 6%; bottom: 3%;
  height: 86%;
  z-index: 1;
}

.plate-line {
  margin: 7% 0 0;
  font-style: italic;
  font-size: .052em;
  line-height: 1.38;
}

.plate-foot {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  font-size: .031em;
  letter-spacing: .02em;
}

.emblem { width: 64%; overflow: visible; filter: drop-shadow(0 1px 0 rgba(255, 228, 180, .5)); }
.cog-teeth { fill: none; stroke: #4a2c12; stroke-width: 13; stroke-dasharray: 10.21 10.21; }
.cog-ring { fill: none; stroke: #4a2c12; stroke-width: 4; }
.cog-ring.thin { stroke-width: 2; }
.lens { fill: #3a2410; stroke: #4a2c12; stroke-width: 4; }
.lens-lit { fill: #ffd98a; }
.back-name {
  margin: 9% 0 0;
  font-family: var(--display);
  font-size: .072em;
}

/* light gliding over metal, driven by the plate's angle */
.sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: overlay;
  background:
    linear-gradient(105deg,
      transparent calc(var(--sheen) - 22%),
      rgba(255, 248, 228, .75) var(--sheen),
      transparent calc(var(--sheen) + 22%)),
    radial-gradient(55% 40% at var(--gx) var(--gy), rgba(255, 244, 220, .55), transparent 70%);
}

.plate-hint {
  margin: clamp(56px, 9vh, 88px) 0 0;
  font-style: italic;
  font-size: .95rem;
  color: #8a7660;
}

/* ─────────────── The press ─────────────── */

.press {
  --scene: min(540px, 48vw);
  display: grid;
  grid-template-columns: minmax(0, 25rem) var(--scene);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 14vh, 160px) 16px clamp(96px, 16vh, 180px);
  background:
    radial-gradient(45% 55% at 68% 60%, rgba(255, 150, 60, .07), transparent 70%),
    var(--umber);
  overflow: hidden;
}

.press-title {
  margin: 0 0 .4em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4.25rem);
  line-height: 1;
  color: #ead9bd;
}
.press-intro { margin: 0 0 2rem; color: #b9a78e; max-width: 34ch; }

.press-form label {
  display: block;
  margin-bottom: .5rem;
  font-size: .95rem;
  color: #cdbb9f;
}
.press-row { display: flex; gap: 10px; flex-wrap: wrap; }
.press-form input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: .7rem .9rem;
  font: 400 1.25rem var(--display);
  color: #f3e6cf;
  background: #120d09;
  border: 1px solid #5a4430;
  border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
.press-form input::placeholder { color: #6d5a47; }
.press-form input:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }

.press button {
  font: 600 .95rem var(--body);
  padding: .75rem 1.15rem;
  border-radius: 6px;
  border: 1px solid #e5b877;
  color: #2a1a0c;
  background: linear-gradient(#e8b672, #b07a3c);
  box-shadow: 0 1px 0 rgba(255, 240, 210, .5) inset, 0 6px 16px -6px rgba(0, 0, 0, .8);
  cursor: pointer;
}
.press button:active { transform: translateY(1px); }
.press button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
.press button.quiet, .press button.sound {
  background: none;
  border-color: #5a4430;
  color: #cdbb9f;
  box-shadow: none;
}
.press-error { min-height: 1.6em; margin: .5rem 0 0; color: #ffb27a; font-size: .95rem; }
.press-after { display: flex; gap: 10px; flex-wrap: wrap; margin-top: .5rem; }
.press-after[hidden] { display: none; }
.press button.sound {
  margin-top: 2.25rem;
  padding: .4rem .7rem;
  font-weight: 400;
  font-size: .85rem;
}

/* the shelf: plates you've struck before, as small bronze tags */
.shelf { margin-top: 2.25rem; }
.shelf[hidden] { display: none; }
.shelf-title {
  margin: 0 0 .7rem;
  font: italic 400 .95rem var(--body);
  color: #8a7660;
}
.shelf-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.press .tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 11.5rem;
  padding: .45rem .75rem .4rem 1.35rem;
  position: relative;
  border: 0;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 240, 210, .06) 0 1px, rgba(40, 20, 5, .05) 1px 2px, transparent 2px 4px),
    linear-gradient(160deg, #cf9f62 0%, #a8763c 45%, #83552a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 196, .35),
    0 1px 0 rgba(0, 0, 0, .5),
    0 6px 14px -8px rgba(0, 0, 0, .9);
  color: #4a2c12;
  text-shadow: 0 1px 0 rgba(255, 228, 180, .5);
  text-align: left;
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.press .tag::before {          /* the hole it hangs from */
  content: "";
  position: absolute;
  left: .55rem; top: 50%;
  width: .38rem; height: .38rem;
  margin-top: -.19rem;
  border-radius: 50%;
  background: #1c140e;
  box-shadow: 0 1px 0 rgba(255, 228, 180, .45), inset 0 1px 1px rgba(0, 0, 0, .8);
}
.press .tag:hover { transform: translateY(-2px) rotate(-1deg); }
.press .tag:active { transform: translateY(0); }
.tag-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 1.02rem/1.15 var(--display);
}
.tag-no { font: 400 .72rem/1.2 var(--body); letter-spacing: .02em; opacity: .85; }

/* the machine; everything is placed in fractions of the scene's width */
.press-scene {
  position: relative;
  width: var(--scene);
  aspect-ratio: 1 / 1.1;
  font-size: var(--scene);
}
.press-scene > * { position: absolute; }

.p-floor {
  left: -20%; right: -20%; top: 90.5%; height: 12%;
  background: radial-gradient(50% 60% at 38% 0%, rgba(255, 190, 110, .08), transparent 70%);
  border-top: 1px solid rgba(255, 220, 170, .08);
}
.p-col {
  top: 8%; bottom: 9.5%; width: 6%;
  background: linear-gradient(90deg, #17120e, #5a4a3e 35%, #2a211b 72%, #120d0a);
  border-radius: 3px;
  z-index: 1;
}
.p-col.left { left: 8%; }
.p-col.right { left: 62%; }

.p-beam {
  top: 4%; left: 3%; width: 70%; height: 9%;
  background: linear-gradient(#5a4a3e, #2c231d 70%, #1c1612);
  border-radius: 6px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 230, 190, .15);
  z-index: 3;
}
.p-beam span {
  position: absolute; top: 50%;
  width: .03em; height: .03em;
  margin-top: -.015em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6dcaa, #9a6632 55%, #4a2c12);
}
.p-beam span:first-child { left: 9%; }
.p-beam span:last-child { right: 9%; }

.p-ram-track { left: 16%; width: 44%; top: 0; height: 100%; z-index: 2; pointer-events: none; }
.p-ram {
  position: absolute;
  left: 0; right: 0;
  top: 20%; height: 13%;
  background: linear-gradient(#5b4b3f, #2c231d 80%);
  border-radius: 4px 4px 2px 2px;
  border-bottom: .012em solid #b07a3c;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .9);
}
.p-ram::before {             /* the threaded screw it rides on */
  content: "";
  position: absolute;
  left: 50%; bottom: 100%;
  width: 13%; height: 180%;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(0,0,0,.5), transparent 35%, transparent 60%, rgba(0,0,0,.6)),
    repeating-linear-gradient(170deg, #7a6656 0 3px, #2a211b 3px 7px);
}

.p-anvil {
  top: 66.5%; left: 13%; width: 50%; height: 12%;
  background: linear-gradient(#4a3c32, #211a15);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  box-shadow: inset 0 2px 0 rgba(255, 220, 170, .25);
  border-top: 2px solid #8a6a4c;
}
.p-base {
  top: 78.5%; left: 19%; width: 38%; height: 12%;
  background: linear-gradient(#2c231d, #16110d);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

.lever-mount {
  left: 65%; top: 45%;
  width: 0; height: 0;
  transform: rotate(-32deg);
  z-index: 4;
}
.lever-mount::before {       /* the hub */
  content: "";
  position: absolute;
  left: -.03em; top: -.03em;
  width: .06em; height: .06em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9955a, #5a3a1e 70%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .7);
  z-index: 1;
}
.lever {
  position: absolute;
  left: 0; top: -.045em;
  width: .3em; height: .09em;
  transform-origin: 0 50%;
  cursor: grab;
  touch-action: none;
}
.lever.pulling { cursor: grabbing; }
.lever::before {             /* the bar */
  content: "";
  position: absolute;
  left: 0; right: .03em; top: 50%;
  height: .018em;
  margin-top: -.009em;
  background: linear-gradient(#6b4524, #2c1a0c);
  border-radius: 99px;
}
.lever::after {              /* the knob */
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: .072em; height: .072em;
  margin-top: -.036em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe2a8, #c9853e 45%, #5a3417 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .7);
}

.p-flash {
  left: 38%; top: 66.5%;
  width: 90%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 236, 190, .9), rgba(255, 160, 60, .35) 35%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.sparks { inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }

/* the struck plate sits edge-on on the anvil, then rises */
.press-scene .struck-stage {
  --w: calc(var(--scene) * .4);
  left: 18%;
  top: calc(66.5% - var(--w) * 88 / 63 / 2);
  z-index: 4;
  transition: transform 1.3s cubic-bezier(.2, .9, .25, 1.15);
  pointer-events: none;
}
.press-scene .struck-stage.risen {
  transform: translateY(-36%) scale(1.3);
  pointer-events: auto;
}
.press.done .p-ram-track,
.press.done .p-beam,
.press.done .p-col,
.press.done .lever-mount { opacity: .3; transition: opacity 1.2s ease .3s; }

.struck-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.struck-brand { font-family: var(--display); font-size: .07em; }
.struck-no { font-size: .034em; }
.struck-rule {
  height: 2px;
  margin: 5% 0;
  background: #4a2c12;
  box-shadow: 0 1.5px 0 rgba(255, 228, 180, .5);
  flex: none;
}
.struck-name {
  margin: auto 0;
  font-family: var(--display);
  font-size: .13em;
  line-height: 1.02;
  text-align: center;
  overflow-wrap: anywhere;
}
.struck-stage .plate-line { margin-top: 0; font-size: .048em; }
.struck-stage .plate-foot { margin-top: 6%; }

/* fresh from the press: the engraving glows, then cools to bronze */
.front .struck-name,
.front .struck-inline { transition: color 2.8s ease, text-shadow 2.8s ease; }
.front.hot .struck-name,
.front.hot .struck-inline {
  color: #ffc070;
  text-shadow: 0 0 .12em #ff8a2a, 0 0 .5em rgba(255, 110, 20, .7);
  transition: none;
}

@media (max-width: 860px) {
  .press {
    --scene: min(460px, calc(100vw - 32px));
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .press-scene { justify-self: center; }
  .press-scene .struck-stage.risen { transform: translate(30%, -30%) scale(1.6); }
}

/* ─────────────── Colophon ─────────────── */

.colophon {
  padding: 0 16px 40px;
  text-align: center;
  font-size: .875rem;
  color: #7d6c5a;
}
.colophon p { margin: 0 auto; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  .beam, #eye { transition: none; }
}