:root {
  --umber: #1c140e;
  --umber-2: #2a1e15;
  --frame: #6e5842;
  --bronze: #b07a3c;
  --lamp: #ffd98a;
  --silver: #d8dad3;
  --ink: #20160f;
  --dim-type: #35271c;

  --display: "Goudy Bookletter 1911", "Goudy Old Style", Georgia, serif;
  --body: "Spectral", Georgia, serif;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .07 0 0 0 0 .04 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--umber);
  color: var(--silver);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--noise);
  opacity: .22;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 50;
}

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

.workshop {
  position: relative;
  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; }

.beam {
  left: 0; top: 0;
  width: 0; height: 0;
  transform-origin: 0 50%;
  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: -2svh;
  height: min(46svh, 440px);
  aspect-ratio: 240 / 340;
  z-index: 4;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6));
}
.golem use { filter: brightness(.5) saturate(.85); }
.golem { width: 100%; height: 100%; display: block; }
#eye { transition: opacity .6s ease; filter: drop-shadow(0 0 6px #ffd98a) drop-shadow(0 0 18px #ffb84a); }
#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: 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;
}
.art-golem use { filter: brightness(.7); }

.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; filter: drop-shadow(0 0 4px #ffc867); }
.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;
}

/* ─────────────── 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; }
}