/* D1 v2: the drum is cast over the length of the page. Oxidised bronze on a deep verdigris ground. */
:root {
  --ground: #1C2927;
  --ground-2: #223230;
  --ink: #ECE6D8;
  --ink-soft: #B9C3BB;
  --bronze: #C9955A;
  --bronze-light: #E2B37A;
  --bronze-deep: #8E6435;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 60ch;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: rgba(201, 149, 90, 0.25); background: var(--ground); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (pointer: fine) { html { overscroll-behavior: none; } }
a, button { touch-action: manipulation; }
section[id] { scroll-margin-top: 1rem; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: var(--bronze); text-decoration-color: rgba(201, 149, 90, 0.45); text-underline-offset: 0.18em; }
a:hover { color: var(--bronze-light); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--bronze-light); outline-offset: 4px; border-radius: 2px; }

.skip {
  position: absolute; left: var(--gutter); top: -3rem;
  background: var(--bronze); color: var(--ground); padding: 0.5rem 0.9rem; z-index: 10;
  text-decoration: none; font-weight: 500;
}
.skip:focus { top: 0.75rem; }

/* header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.6rem var(--gutter);
  min-height: 64px;
  background: linear-gradient(to bottom, rgba(28, 41, 39, 0.92), rgba(28, 41, 39, 0));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--serif); font-weight: 400; font-size: 1.1rem;
  font-variation-settings: "opsz" 24;
  padding: 0.35rem 0; margin: -0.35rem 0;
}
.slot { position: relative; width: 24px; height: 24px; flex: none; display: inline-block; }
.slot .prog, .slot .mark { position: absolute; inset: 0; width: 24px; height: 24px; display: block; }
.slot .mark { opacity: 0; transform: scale(0.6); transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); line-height: 0; }
.slot .mark svg { width: 24px; height: 24px; transition: transform 0.7s var(--ease); }
.slot .prog { transition: opacity 0.3s; }
.landed .slot .mark { opacity: 1; transform: none; }
.landed .slot .prog { opacity: 0; }
.wordmark:hover .mark svg, .wordmark:focus-visible .mark svg { transform: rotate(-36deg); }
.wordmark:hover .prog { transform: rotate(-36deg); transition: transform 0.7s var(--ease); }

.nav { display: none; margin-left: auto; gap: 1.6rem; }
.nav a, .lang a {
  position: relative; color: var(--ink-soft); text-decoration: none; font-weight: 400; font-size: 0.95rem;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color 0.25s, transform 0.35s var(--ease);
}
.nav a::after, .lang a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.nav a:hover, .nav a:focus-visible, .lang a:hover, .lang a:focus-visible { color: var(--ink); transform: translateY(-2px); }
.nav a:hover::after, .nav a:focus-visible::after, .lang a:hover::after, .lang a:focus-visible::after { transform: scaleX(1); }
.lang { margin-left: auto; display: flex; align-items: center; gap: 0.1rem; font-size: 0.95rem; font-weight: 400; }
.nav + .lang { margin-left: 0; }
.lang a, .lang span[aria-current] { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 0.3rem; }
.lang span[aria-current] { color: var(--ink); display: inline-flex; align-items: center; position: relative; }
.lang span[aria-current]::after { content: ""; position: absolute; left: 0.3rem; right: 0.3rem; bottom: 8px; height: 1.5px; background: var(--bronze); }
.lang .sep { color: var(--bronze-deep); }
@media (min-width: 720px) { .nav { display: flex; } }

/* the stage: one canvas, fixed, made over the page */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity 0.25s; }
.landed .stage { opacity: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: auto; touch-action: pan-y; cursor: pointer; }
.fallback { position: absolute; width: min(96vw, 44vh); height: auto; left: 50%; top: 7vh; transform: translateX(-50%); }
@media (min-width: 720px) { .fallback { width: min(84vh, 46vw); left: 68vw; top: 50vh; transform: translate(-50%, -50%); } }

/* beats */
.beats { position: relative; z-index: 1; pointer-events: none; padding-top: 64px; overflow-x: clip; }
.under { overflow-x: clip; }
.beat { min-height: 100svh; }
.b-open { display: grid; align-content: end; min-height: calc(100svh - 64px); padding-bottom: clamp(2rem, 6vh, 4rem); }
.b-mould, .b-cooling { min-height: 150vh; }
.b-pour, .b-out, .b-patina { min-height: 170vh; }
.b-strike { min-height: 240vh; }
.copy {
  pointer-events: auto;
  position: sticky; top: 46svh;
  max-width: 36rem; margin: 0 var(--gutter); padding: 1rem 0 1.25rem;
}
.copy::before {
  /* the text sits on the drum with a soft ground under it (phone) */
  content: ""; position: absolute; inset: -3rem -100vw -1.5rem -100vw; z-index: -1;
  background: linear-gradient(to bottom, rgba(28, 41, 39, 0) 0, rgba(28, 41, 39, 0.9) 3rem, rgba(28, 41, 39, 0.93) 100%);
}
.hero { position: relative; top: auto; padding-top: 0; }
@media (min-width: 720px) {
  .copy { top: 16vh; max-width: 34rem; }
  .copy::before { inset: -4rem -7rem -4rem -100vw; background: radial-gradient(54% 52% at 46% 50%, rgba(28, 41, 39, 0.96) 0%, rgba(28, 41, 39, 0.9) 48%, rgba(28, 41, 39, 0.5) 82%, rgba(28, 41, 39, 0) 100%); }
  .hero { top: auto; }
}
@media (min-width: 1100px) { .copy { max-width: 38rem; } }

/* copy reveal: a pour from the top, once per beat */
.copy > * { clip-path: inset(0 0 102% 0); transition: clip-path 0.9s var(--ease); }
.copy.in > * { clip-path: inset(-10% 0 -10% 0); }
.copy > :nth-child(2) { transition-delay: 0.08s; }
.copy > :nth-child(3) { transition-delay: 0.16s; }
.copy > :nth-child(4) { transition-delay: 0.24s; }
.copy > :nth-child(5) { transition-delay: 0.32s; }
.hero > * { clip-path: none; }
.hero > * { animation: text-in 1s ease-out 1.2s both; }
@keyframes text-in { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }

h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.3rem, 1.3rem + 4vw, 4.3rem);
  line-height: 1.04; letter-spacing: -0.012em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 1rem; text-wrap: balance; max-width: 15ch;
}
.lede { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); line-height: 1.55; max-width: 30rem; margin: 0 0 1.25rem; }
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.15; letter-spacing: -0.005em;
  font-variation-settings: "opsz" 60;
  margin: 0 0 0.6rem; text-wrap: balance; position: relative; padding-top: 0.9rem;
}
h2::before {
  /* the raised line that separates every round on the drum */
  content: ""; position: absolute; left: 0; top: 0; width: 3.5rem; height: 1.5px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease) 0.2s;
}
.copy.in h2::before { transform: scaleX(1); }
.craft {
  font-family: var(--serif); font-style: italic; font-weight: 300; font-variation-settings: "opsz" 30;
  color: var(--bronze-light); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.45;
  margin: 0 0 0.9rem; max-width: 32rem;
}
.copy p { max-width: var(--measure); }
.copy p.body { margin: 0 0 0.9rem; }

.fields { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.fields li {
  position: relative; padding-left: 1.5rem; margin: 0 0 0.35rem;
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.3;
  font-variation-settings: "opsz" 36;
}
.fields li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6em; height: 0.6em;
  border: 1.5px solid var(--bronze); border-radius: 50%;
  background: radial-gradient(circle, var(--bronze) 0 1.3px, transparent 1.8px);
}

/* controls */
.play { margin: 0.4rem 0 1.4rem; }
.caption { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 24; color: var(--bronze-light); margin: 0 0 0.6rem; font-size: 1.05rem; }
.controls { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.btn {
  font: inherit; font-weight: 400; font-size: 0.95rem; color: var(--ink);
  background: transparent; border: 1.5px solid var(--bronze); border-radius: 999px;
  min-height: 44px; padding: 0 1.1rem; cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover, .btn:focus-visible { background: var(--bronze); color: var(--ground); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-quiet { border-color: var(--bronze-deep); color: var(--ink-soft); }
.btn-quiet[aria-pressed="true"] { border-color: var(--bronze-light); color: var(--ink); box-shadow: 0 0 0 3px rgba(226, 179, 122, 0.18); }
.scroll-hint { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.scroll-dot { width: 10px; height: 10px; border: 1.5px solid var(--bronze); border-radius: 50%; animation: dot-drop 2.2s var(--ease) infinite; }
@keyframes dot-drop { 0% { transform: translateY(-3px); opacity: 0.4; } 50% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(-3px); opacity: 0.4; } }

.mail { font-weight: 400; word-break: break-word; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0.2rem 0 0.8rem; }
.privacy { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; max-width: 34rem; margin: 0; }
.status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.reduced-note { display: none; }

/* footer: the underside of the drum */
.under { position: relative; z-index: 1; min-height: 100svh; display: grid; align-content: end; padding-bottom: 2.5rem; pointer-events: none; }
.under .copy { position: relative; top: auto; max-width: 42rem; }
.under .copy::before { background: linear-gradient(to bottom, rgba(28, 41, 39, 0) 0, rgba(28, 41, 39, 0.9) 4rem, rgba(28, 41, 39, 0.95) 100%); }
.underside { display: block; width: min(100%, 24rem); height: auto; margin: 0 0 0.6rem; }
.under .caption { margin-bottom: 1.2rem; }
.under p { margin: 0 0 0.4rem; }
.legal { max-width: 40rem; }
.foot-lang a, .foot-lang span[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.foot-lang a { color: var(--ink-soft); }
.foot-lang span[aria-current] { color: var(--ink); }
.foot-lang .sep { padding: 0 0.5rem; color: var(--bronze-deep); }
.copyright { color: var(--ink-soft); font-size: 0.9rem; }

/* reduced motion: the finished drum, every beat in full */
@media (prefers-reduced-motion: reduce) {
  .copy > *, .hero > *, h2::before { clip-path: none !important; animation: none !important; transform: none !important; transition: none !important; }
  .scroll-dot { animation: none; }
  .slot .mark { opacity: 1; transform: none; }
  .slot .prog { opacity: 0; }
  .reduced-note { display: block; position: fixed; left: var(--gutter); bottom: 0.75rem; z-index: 2; margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
  .nav a, .lang a, .btn { transition: none; }
}
.reduce .copy > *, .reduce .hero > *, .reduce h2::before { clip-path: none !important; animation: none !important; transform: none !important; }