/* ---------- Hero: the dragon mirror hangs on the oak wall ---------- */
.hero {
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 3.5vw, 2.5rem));
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  overflow: clip;
}
.hero.wood::before {
  /* calmer wood behind the words */
  background:
    linear-gradient(180deg, rgba(14, 8, 5, 0.55), rgba(14, 8, 5, 0.38) 55%, rgba(14, 8, 5, 0.2)),
    radial-gradient(120% 90% at 50% 40%, rgba(20, 12, 7, 0) 30%, rgba(14, 8, 5, 0.72) 100%);
}
@media (min-width: 900px) {
  .hero.wood::before {
    background:
      linear-gradient(90deg, rgba(14, 8, 5, 0.7), rgba(14, 8, 5, 0.42) 55%, rgba(14, 8, 5, 0.15)),
      radial-gradient(120% 90% at 50% 40%, rgba(20, 12, 7, 0) 30%, rgba(14, 8, 5, 0.72) 100%);
  }
}
.hero__inner { display: grid; row-gap: clamp(2.5rem, 7vw, 3.5rem); }
.hero__copy { display: grid; gap: 1.1rem; justify-items: start; align-content: center; container-type: inline-size; }
/* Sized to its own column so "Drawn by hand." always holds one line (it is about 8.6em wide). */
.hero__title { font-size: var(--fs-display); font-size: clamp(2rem, 11.2cqi, 5.75rem); line-height: var(--lh-display); }
.hero__title .line { display: block; }
.hero__title .line > span { position: relative; display: inline-block; padding-bottom: 0.04em; }
.hero__title .line + .line > span { color: var(--brass-300); }
.hero__sub { font-size: var(--fs-lead); max-width: 33rem; color: var(--cream-soft); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; width: 100%; }
.hero__note { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); color: var(--muted-dark); }
.hero__note svg { width: 12px; height: 12px; color: var(--brass-300); }
@media (max-width: 559px) {
  .hero__ctas .btn { flex: 1 1 auto; }
}

/* The cut: each headline line is revealed left to right under a bright cutting edge. Only the hidden start
   state is filled backwards, so the finished headline is the plain element whatever happens to the classes. */
.hero__title .line > span::after {
  content: ''; position: absolute; inset: -0.08em 0 0.02em 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 0, transparent 70%, rgba(255, 210, 140, 0.28) 90%, rgba(255, 245, 220, 0.95) 98.5%, #fff 100%);
}
.motion-ok:not(.fonts-in) .hero__title .line > span { clip-path: inset(-0.3em 100% -0.3em 0); }
.motion-ok.fonts-in .hero__title .line > span { animation: gg-etch 1.1s cubic-bezier(0.6, 0.05, 0.3, 1) 0.1s backwards; }
.motion-ok.fonts-in .hero__title .line > span::after { animation: gg-cutter 1.1s cubic-bezier(0.6, 0.05, 0.3, 1) 0.1s backwards; }
.motion-ok.fonts-in .hero__title .line + .line > span,
.motion-ok.fonts-in .hero__title .line + .line > span::after { animation-delay: 0.75s; }
.motion-ok:not(.fonts-in) [data-hero] { opacity: 0; }
.motion-ok.fonts-in [data-hero] { animation: gg-rise 0.9s var(--ease-out) backwards; }
.motion-ok.fonts-in .hero__eyebrow { animation-delay: 0s; }
.motion-ok.fonts-in .hero__sub { animation-delay: 1.25s; }
.motion-ok.fonts-in .hero__ctas { animation-delay: 1.4s; }
.motion-ok.fonts-in .hero__note { animation-delay: 1.55s; }

/* Mirror, wire and nail. The wire and glass swing on the nail; the nail stays put. */
.hero__mirror { position: relative; justify-self: center; width: min(64vw, 280px); }
.hero__mirror::before {
  /* the warm lamp light the mirror catches */
  content: ''; position: absolute; inset: -15% -60% -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 186, 104, 0.26), rgba(255, 170, 90, 0.08) 55%, transparent);
}
.hang, .hang__swing { transform-origin: 50% 0; }
.hang__swing { position: relative; aspect-ratio: 640 / 1150; }
.hang__wire { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--brass-300); filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.6)); }
.hang__nail {
  position: absolute; left: 50%; top: -7px; z-index: 3; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c8 0, var(--brass-300) 25%, var(--brass-500) 60%, #5c3f12 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}
.mirror {
  position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 640 / 890;
  padding: 3.4%; border-radius: 50%;
  background: conic-gradient(from 200deg, #7d5a1c, #f2d98f, #b4842f, #fff0bd, #94691f, #e8c877, #7d5a1c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 30px 60px rgba(0, 0, 0, 0.65), 0 8px 18px rgba(0, 0, 0, 0.5);
}
.mirror__glass {
  position: relative; isolation: isolate; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(70, 45, 10, 0.75);
}
.mirror__glass img { width: 100%; height: 100%; object-fit: cover; }
.mirror__glass::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 38%), radial-gradient(closest-side, transparent 78%, rgba(0, 0, 0, 0.35));
}
.mirror__glint {
  position: absolute; inset: -10% auto -10% 0; z-index: 2; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-200%) skewX(-14deg);
}
.motion-ok .hang__swing { animation: gg-swing 2.8s linear 0.1s both; }
.motion-ok .mirror__glint { animation: gg-glint-mirror 8s var(--ease-in-out) 2.2s infinite both; }
.spark { position: absolute; width: 18px; height: 18px; color: var(--brass-300); filter: drop-shadow(0 0 6px rgba(255, 220, 140, 0.7)); }
.spark--1 { top: 34%; left: -14%; }
.spark--2 { top: 12%; right: -12%; width: 13px; height: 13px; }
.spark--3 { bottom: 6%; right: -16%; width: 22px; height: 22px; }
.motion-ok .spark { animation: gg-twinkle 3.8s ease-in-out infinite both; }
.motion-ok .spark--2 { animation-delay: 1.3s; }
.motion-ok .spark--3 { animation-delay: 2.4s; }

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); align-items: center; column-gap: clamp(1.5rem, 4vw, 4rem); }
  .hero__mirror { width: auto; height: min(76svh, 660px); aspect-ratio: 640 / 1150; margin-top: -2rem; }
  .spark--1 { left: -22%; }
}

/* ---------- The work ---------- */
.work { padding-block: calc(var(--chapter-y) + 1.5rem) var(--chapter-y); }
.work .section-head { margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.pieces { display: grid; gap: clamp(2.75rem, 7vw, 4rem); }
.piece figure { display: grid; gap: 1.1rem; }
.piece__glass {
  position: relative; isolation: isolate; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(232, 200, 119, 0.24), 0 26px 60px rgba(0, 0, 0, 0.55);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.piece__glass picture, .piece__glass img { width: 100%; height: 100%; }
.piece__glass img { object-fit: cover; transition: transform 1.2s var(--ease-out); }
.piece__glass::before {
  /* the reflection that follows the pointer on desktop */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(42% 42% at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.28), transparent 70%);
  transition: opacity var(--dur-hover) var(--ease-out);
}
.piece__glint {
  position: absolute; inset: -20% auto -20% 0; z-index: 2; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-200%) skewX(-14deg);
}
.motion-ok .piece.is-in .piece__glint { animation: gg-glint-piece 1.6s var(--ease-in-out) 0.35s both; }
/* Sold pieces: a rubber stamp over the photo. It lifts on hover (and keyboard focus) so the work can be seen;
   on a phone, tapping opens the clear photo in the lightbox. */
.piece__sold {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(closest-side, rgba(14, 8, 5, 0.5), rgba(14, 8, 5, 0.25));
  transition: opacity 0.45s var(--ease-out);
}
.piece__sold > span {
  padding: 0.3em 0.7em 0.15em; border: 4px solid var(--red-500); border-radius: 8px;
  background: var(--cream); color: var(--red-500);
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 5px rgba(179, 40, 45, 0.55), 0 10px 30px rgba(0, 0, 0, 0.45);
  font-family: var(--font-western); font-size: clamp(2.5rem, 1.6rem + 4vw, 4.25rem); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  transform: rotate(-12deg);
}
.motion-ok .piece__sold > span { opacity: 0; }
.motion-ok .piece.is-in .piece__sold > span { animation: gg-stamp 0.55s cubic-bezier(0.5, 0, 0.75, 0) 0.9s both; }
.piece__glass:focus-visible .piece__sold { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .piece__glass:hover .piece__sold { opacity: 0; } }
.piece__tag {
  display: inline-block; margin-left: 0.5rem; padding: 0.15em 0.55em 0.05em; border-radius: 4px; vertical-align: 0.1em;
  background: #9a1f24; color: var(--cream); font-family: var(--font-western); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.piece__zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(20, 12, 7, 0.72); color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(232, 200, 119, 0.55);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.piece__zoom svg { width: 22px; height: 22px; }
.piece__cap { display: grid; gap: 0.2rem; padding-inline: 0.25rem; }
.piece__no { font-family: var(--font-western); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-300); }
.piece__cap h3 { font-size: var(--fs-h3); }
.piece__cap p { color: var(--muted-dark); }
.work__more { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: flex; justify-content: center; }
@media (min-width: 700px) {
  .pieces { grid-template-columns: 1fr 1fr; column-gap: clamp(1.25rem, 3.5vw, 3.5rem); }
  .piece:nth-child(even) { margin-top: clamp(3rem, 9vw, 8rem); }
}
@media (hover: hover) and (pointer: fine) {
  .piece__glass:hover { box-shadow: 0 0 0 1px rgba(232, 200, 119, 0.55), 0 34px 80px rgba(0, 0, 0, 0.65); }
  .piece__glass:hover::before { opacity: 1; }
  .piece__glass:hover img { transform: scale(1.035); }
  .piece__glass:hover .piece__zoom { background: var(--brass-300); color: var(--ink-900); }
}

/* ---------- How it works: a flash sheet pinned to the oak ---------- */
.process { padding-block: var(--chapter-y); }
.sheet { max-width: 72rem; margin-inline: auto; padding: clamp(3.25rem, 7vw, 5rem) clamp(1.5rem, 5.5vw, 4.5rem) clamp(2.75rem, 5vw, 4rem); rotate: -0.5deg; }
.steps { display: grid; gap: 2.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.step { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; row-gap: 0.55rem; padding-top: 1.5rem; border-top: 2px dashed rgba(25, 11, 4, 0.28); }
.step > h3, .step > p { grid-column: 1 / -1; }
.step__art { width: 60px; height: 60px; color: var(--ink-900); overflow: visible; }
.step__art path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.step__no { font-family: var(--font-slab); font-size: 2.75rem; line-height: 1; color: var(--red-500); justify-self: end; }
.step h3 { color: var(--ink-900); font-size: var(--fs-h3); margin-top: 0.35rem; }
.step p { color: var(--ink-700); }
.step a { color: var(--ink-900); font-weight: 700; background-size: 100% 1.5px; }
.motion-ok .step__art path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease-in-out) 0.35s; }
.motion-ok .step__art path:nth-child(2) { transition-delay: 1.1s; }
.motion-ok .step__art path:nth-child(3) { transition-delay: 1.6s; }
.motion-ok .step.is-in .step__art path { stroke-dashoffset: 0; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.75rem, 3vw, 3rem); }
}

/* ---------- What can be engraved ---------- */
.engrave { padding-block: var(--chapter-y); }
.engrave__inner { display: grid; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 1024px) {
  .engrave__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 4rem; }
}

/* ---------- Commission ---------- */
.commission { padding-block: calc(var(--chapter-y) + 0.5rem) calc(var(--chapter-y) + 1rem); overflow: clip; }
.commission__seal {
  position: absolute; z-index: -1; top: 50%; right: -24%; width: min(120vw, 780px); height: auto; translate: 0 -50%;
  opacity: 0.11; pointer-events: none; border-radius: 50%;
}
.card {
  max-width: 46rem; margin-inline: auto; display: grid; gap: 1.1rem; justify-items: start;
  padding: clamp(3.25rem, 7vw, 5rem) clamp(1.5rem, 6vw, 4.5rem) clamp(2.75rem, 6vw, 4.25rem);
  rotate: 0.6deg;
}
.card .eyebrow { color: var(--red-500); }
.card h2 { color: var(--ink-900); font-size: var(--fs-h2); max-width: 13ch; }
.card__text { color: var(--ink-700); font-size: var(--fs-lead); max-width: 32rem; }
.card .btn { margin-top: 0.75rem; }
@media (max-width: 559px) { .card .btn { width: 100%; } }

/* ---------- Footer ---------- */
.footer {
  position: relative; isolation: isolate;
  background: var(--stage-950) url('../assets/img/wood-dark-726.webp') 0 0 / 726px auto;
  border-top: 1px solid rgba(232, 200, 119, 0.22);
  padding-block: 3.25rem calc(2.5rem + env(safe-area-inset-bottom));
}
.footer::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(14, 8, 5, 0.72); }
.footer__inner { display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.footer__brand img { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(25, 11, 4, 0.7), 0 10px 30px rgba(0, 0, 0, 0.5); }
.footer__name { font-family: var(--font-western); font-size: 1.375rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream); }
.footer__tag { color: var(--muted-dark); }
.footer__ig {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0 1.3rem;
  border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(232, 200, 119, 0.6); color: var(--cream); font-weight: 700;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.footer__ig svg { width: 22px; height: 22px; }
.footer__legal { font-size: var(--fs-small); color: var(--muted-dark); }
@media (hover: hover) and (pointer: fine) { .footer__ig:hover { background: var(--brass-300); color: var(--ink-900); } }
@media (min-width: 900px) {
  .footer__inner { grid-template-columns: auto 1fr auto; justify-items: start; text-align: left; column-gap: 1.75rem; }
  .footer__ig { justify-self: end; }
  .footer__legal { grid-column: 1 / -1; justify-self: stretch; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); }
}

/* ---------- Keyframes ---------- */
@keyframes gg-etch { from { clip-path: inset(-0.3em 100% -0.3em 0); } to { clip-path: inset(-0.3em 0 -0.3em 0); } }
@keyframes gg-cutter {
  0% { opacity: 1; transform: translateX(-100%); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes gg-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes gg-swing {
  0% { transform: rotate(8deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  21% { transform: rotate(-5.5deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  41% { transform: rotate(3.2deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  60% { transform: rotate(-1.7deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  78% { transform: rotate(0.7deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { transform: rotate(0); }
}
@keyframes gg-glint-mirror {
  0% { transform: translateX(-200%) skewX(-14deg); }
  20%, 100% { transform: translateX(420%) skewX(-14deg); }
}
@keyframes gg-glint-piece { from { transform: translateX(-200%) skewX(-14deg); } to { transform: translateX(420%) skewX(-14deg); } }
@keyframes gg-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.45) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}