/* Thor Studios — Forge Gold. Graphite + brushed gold, Archivo (Expanded for display). */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  --graphite: #121114;
  --graphite-2: #1b191e;
  --gold: #f0cf7a;
  --gold-hi: #f7dc94;
  --gold-deep: #b8862b;
  --bronze: #7a5514;
  --parch: #f3ead6;
  --paper: #f7f2e7;
  --ink: #16130c;
  --khaki: #a89c82;
  --umber: #6f6448;
  --line-d: rgb(243 234 214 / 0.16);
  --line-l: rgb(22 19 12 / 0.18);

  --pad: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --header-h: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* size of one hammer unit; the exploded hammer is sized off the viewport height */
  --u: clamp(1.5px, min(0.42svh, 0.26vw), 3.6px);

  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --step-h2: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  --step-h3: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-color: var(--khaki) var(--graphite);
  background: var(--graphite);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--parch);
  background: var(--graphite);
  accent-color: var(--gold);
  caret-color: var(--gold);
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold); color: var(--graphite); }

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.on-paper :focus-visible { outline-color: var(--bronze); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--gold); color: var(--graphite); padding: 10px 16px; border-radius: 3px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.5em;
  background: var(--gold); color: var(--graphite);
  font: inherit; font-weight: 700; font-stretch: 112%; letter-spacing: 0.01em; line-height: 1.1;
  border: 0; border-radius: 3px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--gold-hi); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.7em 1.1em; font-size: 0.9rem; }
.site-header .btn { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.site-header .btn:hover { background: var(--gold); color: var(--graphite); }

.link {
  color: var(--parch); font-weight: 600; text-decoration: underline; text-decoration-color: var(--khaki);
  text-decoration-thickness: 1px; text-underline-offset: 0.35em;
  transition: text-decoration-color 0.2s, color 0.2s;
}
.link:hover { color: var(--gold); text-decoration-color: var(--gold); }
.on-paper .link { color: var(--bronze); text-decoration-color: var(--bronze); }
.on-paper .link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 32px;
  height: var(--header-h); padding-inline: var(--pad);
  background: var(--graphite); border-bottom: 1px solid var(--line-d);
}
.brand img { height: 30px; width: auto; }
.site-header nav { display: flex; gap: 28px; margin-left: auto; }
.site-header nav a {
  font-size: 0.95rem; font-weight: 500; color: var(--parch); text-decoration: none; padding: 6px 0;
  border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s;
}
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--gold); border-color: var(--gold); }

/* ---------- hero: the anatomy ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  gap: clamp(24px, 4vw, 72px);
  width: 100%; max-width: var(--max); margin-inline: auto;
  min-height: calc(100svh - var(--header-h));
  padding: clamp(32px, 6vh, 64px) var(--pad);
}
.hero h1 { font-size: clamp(2.2rem, 1rem + 2.7vw, 3.9rem); }
.lede { margin-top: 24px; max-width: 34ch; font-size: var(--step-1); line-height: 1.5; color: var(--khaki); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }

.anatomy {
  position: relative; margin: 0; justify-self: end;
  display: grid; row-gap: calc(12 * var(--u));
}
/* the hammer's axis, visible in the gaps between parts */
.anatomy::before {
  content: ""; position: absolute; top: calc(-6 * var(--u)); bottom: calc(-6 * var(--u));
  left: calc(49 * var(--u)); width: 0; border-left: 1px dashed rgb(168 156 130 / 0.4);
}

.row {
  --half: 49;
  position: relative; display: grid; align-items: center;
  grid-template-columns: calc(98 * var(--u)) minmax(28px, 1fr) minmax(0, 23ch);
  color: inherit; text-decoration: none;
}
.row-stem { --half: 10; }
.row-coin { --half: 13; }

.part { grid-column: 1; justify-self: center; transition: opacity 0.3s var(--ease); }
.part svg { display: block; height: auto; }
.row-head .part svg { width: calc(98 * var(--u)); }
.row-stem .part svg { width: calc(20 * var(--u)); }
.row-coin .part svg { width: calc(26 * var(--u)); }

.lead {
  grid-column: 2; align-self: center; position: relative; height: 1px;
  margin-left: calc((var(--half) - 49) * var(--u));
  background: rgb(243 234 214 / 0.4); transform-origin: left center;
  transition: background-color 0.25s;
}
.lead::before {
  content: ""; position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.label { grid-column: 3; padding-left: 18px; }
.label strong {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: clamp(1.25rem, 1rem + 0.85vw, 1.75rem); font-weight: 800; font-stretch: 116%; line-height: 1.1; color: var(--parch);
  transition: color 0.2s;
}
.label strong svg { width: 0.7em; height: 0.7em; transition: transform 0.3s var(--ease); }
.label span { display: block; margin-top: 6px; font-size: 0.95rem; line-height: 1.45; color: var(--khaki); }

.row:hover .label strong, .row:focus-visible .label strong { color: var(--gold); }
.row:hover .label strong svg, .row:focus-visible .label strong svg { transform: translateX(4px); }
.row:hover .lead, .row:focus-visible .lead { background: var(--gold); }
.anatomy:has(.row:is(:hover, :focus-visible)) .row:not(:is(:hover, :focus-visible)) .part { opacity: 0.32; }

/* one authored moment: the hammer assembles once on load */
@media (prefers-reduced-motion: no-preference) {
  .row-head .part { animation: drop 1.1s var(--ease) 0.3s both; }
  .row-stem .part { animation: rise 1.1s var(--ease) 0.4s both; }
  .row-coin .part { animation: lift 1.1s var(--ease) 0.5s both; }
  .lead { animation: draw 0.7s var(--ease) 1.05s both; }
  .label { animation: fade 0.6s var(--ease) 1.25s both; }
  .anatomy::before { animation: fade 0.8s var(--ease) 0.8s both; }
}
@keyframes drop { from { opacity: 0; transform: translateY(calc(-34 * var(--u))); } }
@keyframes rise { from { opacity: 0; transform: translateY(calc(-16 * var(--u))); } }
@keyframes lift { from { opacity: 0; transform: translateY(calc(34 * var(--u))); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- light sections ---------- */
.on-paper { background: var(--paper); color: var(--ink); }
.section { padding: 96px 40px; padding: clamp(64px, 11vw, 128px) var(--pad); }
.section h1, .section h2 { font-size: var(--step-h2); }
.section-lede { margin-top: 16px; max-width: 46ch; font-size: var(--step-1); line-height: 1.5; color: var(--umber); }

.disc {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px);
  padding-block: clamp(36px, 6vw, 64px); border-top: 1px solid var(--line-l);
}
.disc:first-of-type { margin-top: clamp(40px, 6vw, 72px); }
.disc-head { display: flex; align-items: center; gap: 20px; }
.disc-head h2, .disc-head h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.disc-icon { flex: none; width: clamp(56px, 6vw, 84px); display: flex; justify-content: center; }
.disc-icon svg { width: 100%; height: auto; }
.disc-icon.is-stem svg { width: 26%; }
.disc-icon.is-coin svg { width: 46%; }
.disc-body p { max-width: 58ch; font-size: var(--step-1); line-height: 1.55; }
.dashes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin-top: 28px; max-width: 58ch; }
.dashes li { position: relative; padding-left: 26px; font-weight: 500; }
.dashes li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 14px; height: 4px; background: var(--gold-deep);
}

/* ---------- how we work: the handle's grip as a rail ---------- */
.how { background: var(--graphite); }
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); }
.how-intro p { margin-top: 16px; max-width: 32ch; font-size: var(--step-1); color: var(--khaki); line-height: 1.5; }
.steps { position: relative; padding-left: 56px; display: grid; gap: clamp(28px, 4vw, 44px); }
.steps::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: rgb(168 156 130 / 0.28); }
.steps li { position: relative; }
.steps li::before { content: ""; position: absolute; left: -56px; top: 0.5em; width: 28px; height: 6px; background: var(--gold); }
.steps h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.steps p { margin-top: 8px; max-width: 46ch; color: var(--khaki); font-size: var(--step-0); }

/* ---------- delivered work ---------- */
.work-note { margin-top: clamp(32px, 5vw, 56px); max-width: 58ch; color: var(--umber); }

/* ---------- contact ---------- */
.contact { background: var(--graphite); border-top: 1px solid var(--line-d); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact-copy p { margin-top: 16px; max-width: 36ch; font-size: var(--step-1); color: var(--khaki); line-height: 1.5; }
.contact-copy .aside { margin-top: 40px; font-size: var(--step-0); }
.contact-copy .aside a { color: var(--parch); }

form { display: grid; gap: 22px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend, .field > span:not(.error) { display: block; margin-bottom: 10px; font-size: 0.9rem; font-weight: 600; color: var(--khaki); padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 0.6em 1.1em; border: 1px solid var(--khaki); border-radius: 3px; font-weight: 600; font-size: 0.95rem;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.chip:hover span { border-color: var(--gold); }
.chip input:checked + span { background: var(--gold); color: var(--graphite); border-color: var(--gold); }
.chip:has(input:focus-visible) span { outline: 2px solid var(--gold); outline-offset: 3px; }

.field { display: block; }
input[type="text"], input[type="email"], textarea {
  width: 100%; padding: 14px 16px; font: inherit; color: var(--parch);
  background: var(--graphite-2); border: 1px solid var(--line-d); border-radius: 3px;
  transition: border-color 0.2s;
}
textarea { resize: vertical; min-height: 140px; }
input:hover, textarea:hover { border-color: var(--khaki); }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #ff9d8a; }
.field > .error { display: none; margin-top: 6px; font-size: 0.9rem; color: #ffb4a4; }
.field > [aria-invalid="true"] ~ .error { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.note { font-size: 0.9rem; color: var(--khaki); max-width: 44ch; }
.status { font-size: 0.95rem; color: var(--gold); min-height: 1.4em; }
.status button {
  font: inherit; color: var(--parch); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.3em; cursor: pointer;
}

/* ---------- footer ---------- */
.site-footer { background: var(--graphite); border-top: 1px solid var(--line-d); padding: 48px var(--pad); }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.foot img { height: 88px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot nav a { color: var(--parch); text-decoration: none; font-size: 0.95rem; }
.foot nav a:hover { color: var(--gold); }
.copy { width: 100%; font-size: 0.85rem; color: var(--khaki); }

/* ---------- inner pages ---------- */
.page-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  gap: clamp(24px, 5vw, 72px);
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: clamp(48px, 8vw, 104px) var(--pad);
}
.page-hero.solo { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { font-size: clamp(2.2rem, 1rem + 2.7vw, 3.9rem); }
.page-hero .lede { max-width: 46ch; }
.page-part { justify-self: end; }
.page-part svg { width: clamp(110px, 14vw, 200px); height: auto; }
.page-part.is-stem svg { width: clamp(40px, 7vw, 90px); }
.page-part.is-coin svg { width: clamp(72px, 7vw, 100px); }

.prose p { max-width: 62ch; font-size: var(--step-1); line-height: 1.55; }
.prose p + p { margin-top: 1em; }
.prose .after-list { margin-top: 28px; }
.prose .dashes { max-width: 62ch; }
.prose .tm-note { margin-top: 22px; font-size: 0.9rem; line-height: 1.5; color: var(--umber); }
/* inner pages: no stacked spacing above the first row, and text-only headings align with the first line */
.page-hero + .section { padding-top: clamp(24px, 4vw, 56px); }
.wrap > .disc:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.disc-head:not(:has(.disc-icon)) { align-self: start; }
.disc-more { display: inline-block; margin-top: 24px; font-size: var(--step-1); }
.dashes.facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dashes.facts strong { display: block; font-weight: 800; }
.dashes.facts span { display: block; margin-top: 2px; font-weight: 400; }

.qa { display: grid; gap: 28px; }
.qa dt { font-weight: 800; font-stretch: 112%; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.3; }
.qa dd { margin: 8px 0 0; max-width: 60ch; line-height: 1.6; }

.crosslinks { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 40px; font-weight: 600; }
.cta-band { background: var(--graphite); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cta-band h2 { font-size: var(--step-h2); max-width: 18ch; }
.cta-band p { margin-top: 12px; max-width: 40ch; font-size: var(--step-1); line-height: 1.5; color: var(--khaki); }

@media (max-width: 1100px) {
  .site-header { gap: 20px; }
  .site-header nav { gap: 20px; }
  .brand img { height: 26px; }
}

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  :root { --u: 1.55px; --header-h: 64px; }
  .site-header nav { display: none; }
  .site-header { justify-content: space-between; gap: 16px; }
  .brand img { height: 22px; }
  .site-header .btn { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 40px; padding-block: 36px 56px; }
  .anatomy { justify-self: start; }
  .row { grid-template-columns: calc(98 * var(--u)) minmax(16px, 1fr) minmax(0, 20ch); }
  .label { padding-left: 12px; }
  .label span { font-size: 0.875rem; }
  .disc, .how-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .dashes { grid-template-columns: minmax(0, 1fr); }
  .foot img { height: 72px; }
  .page-hero { grid-template-columns: minmax(0, 1fr); padding-block: 40px 48px; }
  .page-part { justify-self: start; order: -1; }
  .page-part svg { width: clamp(96px, 34vw, 160px); }
  .page-part.is-stem svg { width: 44px; }
  .page-part.is-coin svg { width: 88px; }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .lede, .cta-row { max-width: none; }
}

/* ---------- motion: the supporting cast for the hammer ----------
   Everything here is CSS, transform and colour only, and the page is complete without it. */

/* hovered part of the anatomy: the leader line's dot swells */
.lead::before { transition: transform 0.3s var(--ease); }

/* "More about" links: a line draws left to right under the text (it mirrors the leader line) */
.disc-more { position: relative; text-decoration: none; padding-bottom: 0.3em; }
.disc-more::before, .disc-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background: currentColor; }
.disc-more::before { height: 1px; opacity: 0.5; }
.disc-more::after { height: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 0.35s var(--ease); }
.disc-more:hover::after, .disc-more:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  .row:hover .lead::before, .row:focus-visible .lead::before { transform: scale(1.9); }

  /* inner pages: their hammer part arrives the way it does on the homepage, same timing */
  .page-part { animation: part-drop 1.1s var(--ease) 0.3s both; }
  .page-part.is-stem { animation-name: part-rise; }
  .page-part.is-coin { animation-name: part-lift; }

  /* presses land, selections strike */
  .btn:active { transform: translateY(1px) scale(0.98); transition-duration: 0.08s; }
  .chip:active span { transform: scale(0.97); }
  .chip input:checked + span { animation: chip-set 0.24s var(--ease); }

  /* How we work: the handle fills as you read down it, each step's dash strikes as it arrives */
  @supports (animation-timeline: view()) {
    .steps li { view-timeline-name: --step; }
    .steps::after {
      content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--khaki);
      transform-origin: top center;
      animation: rail-fill linear both; animation-timeline: view(); animation-range: cover 10% cover 52%;
    }
    .steps li::before {
      animation: dash-strike linear both; animation-timeline: --step; animation-range: cover 15% cover 35%;
    }
  }
}
@keyframes part-drop { from { opacity: 0; transform: translateY(-40px); } }
@keyframes part-rise { from { opacity: 0; transform: translateY(-20px); } }
@keyframes part-lift { from { opacity: 0; transform: translateY(40px); } }
@keyframes chip-set { from { transform: scale(0.94); } }
@keyframes rail-fill { from { transform: scaleY(0); } }
@keyframes dash-strike { from { transform: scaleX(0.25); background-color: rgb(168 156 130 / 0.5); } }