/* ============================================================
   DAVID MĂLĂIA - metal sculpture
   Design system: "the drawing sheet"

   Graphite ground, hairline rules, a fabrication title block,
   art-institution display type over workshop mono.
   ============================================================ */

:root {
  /* --- ground: lighter than black, darker than titanium --- */
  --bg:        #1f2124;
  --bg-2:      #262a2d;
  --bg-3:      #2e3236;
  --bg-sink:   #1a1c1f;

  --line:      #3c4247;
  --line-soft: #2f3438;

  --text:      #eae8e5;
  --muted:     #9ba0a4;
  --muted-2:   #8a9196;   /* AA contrast on the graphite ground */

  --accent:    #d17444;   /* steel at temperature */
  --accent-lo: #a0552f;

  /* the same colours as r,g,b triplets, so overlays and glows can
     take an alpha - every template redefines these */
  --bg-rgb:     31, 33, 36;
  --sink-rgb:   26, 28, 31;
  --shade-rgb:  18, 20, 22;     /* the fade behind text on photos */
  --text-rgb:   234, 232, 229;
  --accent-rgb: 209, 116, 68;
  --grain-rgb:  255, 255, 255;
  --lede:       #d3d1ce;

  /* the MIG torch (button + cursor), part by part - Atelier's steel greys */
  --torch-edge:        #5a6166;
  --torch-cable:       #212427;
  --torch-corrugation: #3f4549;
  --torch-body:        #2f3438;
  --torch-body-hl:     #6d757a;
  --torch-grip:        #1d2023;
  --torch-grip-hl:     #474d52;
  --torch-trigger:     #2b2f33;
  --torch-collar:      #9aa1a6;
  --torch-neck:        #3a4044;
  --torch-neck-hl:     #787f84;
  --torch-nozzle:      #454b50;
  --torch-nozzle-hl:   #858d92;
  --torch-rim:         #8a9196;
  --torch-wire:        #b9bdc0;
  --torch-tip:         #ffd9a0;

  --font-disp: "Syne", "Inter", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --maxw: 1560px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --header-h: 76px;
  --rail: 46px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* brushed-metal grain over the whole ground */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background:
    repeating-linear-gradient(97deg,
      rgba(var(--grain-rgb),.011) 0px,
      rgba(var(--grain-rgb),.011) 1px,
      transparent 1px,
      transparent 4px),
    radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb),.05), transparent 60%);
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--bg-sink); }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* ============================================================
   TYPE
   ============================================================ */

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.02; }

/* display type is wide and uppercase - never let one long word
   push past the gutter on a small phone */
h1, h2, h3,
.display,
.intro__title,
.work__title,
.row__title,
.card__title,
.cta h2 { overflow-wrap: break-word; }

.display {
  font-family: var(--font-disp);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .94;
}

/* mono label - the workshop voice */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.mono--accent { color: var(--accent); }

.lede {
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.6;
  color: var(--lede);
  font-weight: 300;
  max-width: 62ch;
}

.body-text {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 62ch;
}

.body-text + .body-text { margin-top: 17px; }

/* ============================================================
   LAYOUT
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.section { padding-block: clamp(62px, 10vh, 130px); }
.section--tight { padding-block: clamp(42px, 6vh, 80px); }

/* --- the sheet frame: hairlines running the full page height --- */
.frame {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: none;
}

.frame__wrap {
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.frame__inner {
  height: 100%;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  opacity: .75;
}

@media (min-width: 1200px) {
  .frame { display: block; left: var(--rail); }
}

/* --- left rail: rotated wordmark + scroll progress --- */
.rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail);
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
  border-right: 1px solid var(--line-soft);
  background: rgba(var(--bg-rgb),.6);
  backdrop-filter: blur(8px);
}

@media (min-width: 1200px) {
  .rail { display: flex; }
  body { padding-left: var(--rail); }
  .site-header { left: var(--rail); }
}

.rail__text {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.rail__track {
  width: 1px;
  flex: 1;
  margin-block: 20px;
  background: var(--line);
  position: relative;
}

.rail__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: var(--accent);
}

.rail__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(var(--bg-rgb),.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .45s var(--ease), background .45s var(--ease);
}

.site-header.scrolled {
  border-bottom-color: var(--line-soft);
  background: rgba(var(--bg-rgb),.92);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* brand pushes everything else right, so the template button
   sits directly in front of "Home" */
.brand { display: flex; align-items: baseline; gap: 11px; margin-right: auto; }

/* --- template switcher: the MIG torch as a button --- */
.theme-btn {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.theme-btn svg {
  display: block;
  transform: translate(1px, -1px) rotate(0deg);
  transform-origin: 20% 80%;
  transition: transform .35s var(--ease-out);
}

.theme-btn:hover svg { transform: translate(1px, -1px) rotate(-10deg); }

/* the wire tip lights up on hover, like the cursor over a link */
.theme-btn::after {
  content: "";
  position: absolute;
  left: 4px; bottom: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,241,214,.95), rgba(255,170,90,.45) 45%, transparent 72%);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s var(--ease), transform .25s var(--ease-out);
  pointer-events: none;
}

.theme-btn:hover::after { opacity: 1; transform: scale(1.3); }

.brand__mark {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
}

.brand__sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
}

@media (max-width: 480px) { .brand__sub { display: none; } }

/* The nav keeps one width in every template, so the torch button in
   front of it never moves when you cycle templates - even though
   Gallery sets it in a wider face. 266px is the natural width in
   IBM Plex Mono with 30px gaps; min-width lets it grow rather than
   overlap if a fallback font is ever wider still. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 266px;
}

.nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding-block: 7px;
  transition: color .3s var(--ease);
}

.nav a:hover { color: var(--text); }

/* --- hover: one line traces a box round the link ---
   bottom left->right, right side up, top right->left, left side down.
   Leaving erases it the same way round, a little faster. Segment
   times follow the edge lengths so the line keeps one speed.
   The box is absolutely positioned: it never moves the torch button.

   Every edge is a BORDER on a zero-thickness box, and it grows by
   width/height - never by transform. Borders are rounded to whole
   device pixels and untransformed boxes stay on the pixel grid, so
   all four edges come out exactly as thick as each other, on any
   screen scaling. (Scaled background strips at fractional positions
   were being smoothed differently, so some edges looked heavier.) */
.trace {
  position: absolute;
  inset: 0 -9px;
  pointer-events: none;
}

.trace i {
  position: absolute;
  transition: width var(--d) linear var(--w), height var(--d) linear var(--w);
}

/* zero-specificity base, so each edge's own border width below wins */
:where(.trace) i { border: 0 solid currentColor; }

/* horizontal edges: height 0, drawn by the top border, grow in width */
.trace__b,
.trace__t { height: 0; width: 0; border-top-width: 1.5px; }

/* vertical edges: width 0, drawn by the left border, grow in height */
.trace__r,
.trace__l { width: 0; height: 0; border-left-width: 1.5px; }

/* at rest each edge is pinned to the end it will be erased towards;
   on hover it is pinned to the end it is drawn from */
.trace__b { bottom: 0; right: 0; --d: .11s; --w: 0s;   }
.trace__r { right: 0;  top: 0;   --d: .06s; --w: .11s; }
.trace__t { top: 0;    left: 0;  --d: .11s; --w: .17s; }
.trace__l { left: 0;   bottom: 0; --d: .06s; --w: .28s; }

.nav a:is(:hover, :focus-visible) .trace__b { width: 100%;  right: auto;  left: 0;   --d: .22s; --w: 0s;   }
.nav a:is(:hover, :focus-visible) .trace__r { height: 100%; top: auto;    bottom: 0; --d: .12s; --w: .22s; }
.nav a:is(:hover, :focus-visible) .trace__t { width: 100%;  left: auto;   right: 0;  --d: .22s; --w: .34s; }
.nav a:is(:hover, :focus-visible) .trace__l { height: 100%; bottom: auto; top: 0;    --d: .12s; --w: .56s; }

/* the traced box is the keyboard focus ring for these links */
.nav a:focus-visible { outline: none; color: var(--text); }

.nav a[aria-current="page"] { color: var(--text); }

/* hamburger */
.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  border-radius: 2px;
  transition: border-color .3s var(--ease);
}

.burger:hover { border-color: var(--muted-2); }

.burger span {
  position: absolute;
  left: 11px;
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform .4s var(--ease-out), opacity .2s var(--ease);
}

.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }

body.menu-open .burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
}

/* overlay menu */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg-sink);
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: opacity .5s var(--ease-out), clip-path .6s var(--ease-out);
}

body.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
}

.menu-overlay nav { display: flex; flex-direction: column; }

.menu-overlay nav a {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(38px, 11vw, 76px);
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--muted-2);
  display: flex;
  align-items: baseline;
  gap: 16px;
  transition: color .3s var(--ease), transform .4s var(--ease-out);
}

.menu-overlay nav a em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--accent);
}

.menu-overlay nav a:hover { color: var(--text); transform: translateX(10px); }

.menu-overlay__foot {
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.menu-overlay__foot a:hover { color: var(--accent); }

/* ============================================================
   INTRO (home)
   ============================================================ */

.intro {
  min-height: clamp(560px, 92vh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 0;
  position: relative;
}

.intro__tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 26px;
}

.intro__tag i { flex: none; }

.intro__tag i {
  display: block;
  width: 54px; height: 1px;
  background: var(--accent);
}

.intro__title {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(54px, 12.5vw, 200px);
  line-height: .86;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.intro__title span { display: block; }

.outline,
.intro__title .outline {
  color: transparent;
  -webkit-text-fill-color: var(--bg);
  -webkit-text-stroke: 1.2px var(--muted-2);
}

.intro__title .outline { padding-left: .09em; }

.intro__statement {
  margin: clamp(26px, 4.5vh, 48px) 0 0;
  max-width: 54ch;
}

/* the title block - like the corner of a fabrication drawing */
.titleblock {
  margin-top: clamp(34px, 6vh, 70px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.titleblock div {
  padding: 18px 20px 20px 0;
  border-right: 1px solid var(--line-soft);
}

.titleblock div:last-child { border-right: 0; }

.titleblock dt,
.titleblock .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.titleblock .v {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.45;
}

@media (max-width: 860px) {
  .titleblock { grid-template-columns: repeat(2, 1fr); }
  .titleblock div:nth-child(2) { border-right: 0; }
  .titleblock div:nth-child(1),
  .titleblock div:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-block: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.scroll-cue i {
  display: block;
  width: 40px; height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: sweep 2.6s var(--ease) infinite;
}

@keyframes sweep {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   SECTION HEAD
   ============================================================ */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: clamp(24px, 4vh, 44px);
  border-bottom: 1px solid var(--line);
}

.section-head h1,
.section-head h2 {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(22px, 3.6vw, 52px);
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.section-head__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ============================================================
   INDEX LIST  (the signature component)
   ============================================================ */

.index {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: start;
}

@media (max-width: 1000px) {
  .index { grid-template-columns: 1fr; }
  .index__preview-col { display: none; }
}

.rows { border-top: 1px solid var(--line-soft); }

.row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, .85fr) 60px 26px;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.row.in { opacity: 1; transform: none; }

.row::before {
  content: "";
  position: absolute;
  left: -14px; right: -14px;
  top: 0; bottom: 0;
  background: var(--bg-2);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: -1;
}

.row:hover::before,
.row.is-active::before { opacity: 1; }

.row__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted-2);
  transition: color .3s var(--ease);
}

.row:hover .row__num { color: var(--accent); }

.row__title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 31px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1.05;
  transition: transform .4s var(--ease-out);
}

.row:hover .row__title { transform: translateX(8px); }

.row__meta,
.row__year {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.row__year { text-align: right; }

.row__arrow {
  font-size: 15px;
  color: var(--muted-2);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out), color .3s var(--ease);
  text-align: right;
}

.row:hover .row__arrow { opacity: 1; transform: none; color: var(--accent); }

.row__thumb { display: none; }

@media (max-width: 760px) {
  .row {
    grid-template-columns: 74px 1fr auto;
    grid-template-areas:
      "thumb title year"
      "thumb meta  arrow";
    gap: 6px 16px;
    align-items: center;
  }
  .row__num { display: none; }
  .row__thumb {
    display: block;
    grid-area: thumb;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--line-soft);
    overflow: hidden;
    position: relative;
  }
  .row__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .row__title { grid-area: title; }
  .row__meta  { grid-area: meta; }
  .row__year  { grid-area: year; }
  .row__arrow { grid-area: arrow; opacity: 1; transform: none; }
}

/* sticky preview */
.index__preview-col { position: sticky; top: calc(var(--header-h) + 34px); }

.preview {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--bg-2);
}

.preview__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .55s var(--ease);
}

.preview__layer.is-on { opacity: 1; }

.preview__layer img { width: 100%; height: 100%; object-fit: cover; }

.preview__cap {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ============================================================
   PLACEHOLDER (no photo yet) - reads as intentional
   ============================================================ */

.ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(118deg,
      rgba(var(--grain-rgb),.018) 0px,
      rgba(var(--grain-rgb),.018) 2px,
      transparent 2px,
      transparent 7px),
    linear-gradient(152deg, var(--bg-3) 0%, var(--bg-2) 48%, var(--bg-sink) 100%);
}

.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(48% 42% at 50% 40%, rgba(var(--accent-rgb),.16), transparent 72%);
}

.ph span {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid var(--line);
  padding: 8px 14px;
  background: rgba(var(--sink-rgb),.62);
  text-align: center;
}

/* ============================================================
   GRID VIEW
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.3vw, 18px);
}

@media (max-width: 1080px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid { grid-template-columns: 1fr; } }

.card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  aspect-ratio: 3 / 4;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .4s var(--ease);
}

.card.in { opacity: 1; transform: none; }
.card:hover { border-color: var(--line); }

@media (min-width: 1081px) {
  .card--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
}

.card__media { position: absolute; inset: 0; overflow: hidden; }

.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}

.card:hover .card__media img,
.card:hover .ph { transform: scale(1.06); }

.ph { transition: transform 1.2s var(--ease-out); }

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--shade-rgb),.9) 0%, rgba(var(--shade-rgb),.3) 44%, transparent 74%);
  pointer-events: none;
}

.card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(15px, 1.8vw, 24px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.card__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 7px;
  display: block;
}

.card__title {
  display: block;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 25px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1.05;
}

.card__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
}

/* ============================================================
   CONTROLS: view toggle + filters
   ============================================================ */

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vh, 34px);
}

.filters { display: flex; gap: 6px; flex-wrap: wrap; }

.filters button,
.toggle button {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  background: transparent;
  border: 1px solid var(--line-soft);
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

.filters button:hover,
.toggle button:hover { color: var(--text); border-color: var(--line); }

.filters button.is-active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.12);
}

.toggle { display: flex; gap: 0; }

.toggle button { border-radius: 0; }
.toggle button:first-child { border-radius: 2px 0 0 2px; }
.toggle button:last-child  { border-radius: 0 2px 2px 0; border-left: 0; }

.toggle button.is-active {
  color: var(--text);
  background: var(--bg-3);
  border-color: var(--line);
}

/* ============================================================
   OPERATIONS (process)
   ============================================================ */

.ops { border-top: 1px solid var(--line); }

.op {
  display: grid;
  grid-template-columns: 110px minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 46px);
  padding: clamp(24px, 3.5vh, 42px) 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
  transition: background .4s var(--ease);
}

@media (max-width: 860px) {
  .op { grid-template-columns: 1fr; gap: 10px; }
}

.op__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--accent);
}

.op h3 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.op p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

/* ============================================================
   SPLIT (about strip)
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(26px, 5vw, 80px);
  align-items: center;
}

@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--bg-2);
}

.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split h2 {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 58px);
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* spec table */
.spec {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.spec li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
  color: var(--text);
}

.spec .k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-top: 4px;
}

.spec .pending { color: var(--muted-2); font-style: italic; }

@media (max-width: 520px) {
  .spec li { grid-template-columns: 1fr; gap: 3px; }
}

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding-block: 16px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.marquee__track {
  display: inline-flex;
  gap: 44px;
  animation: slide 44s linear infinite;
  will-change: transform;
}

.marquee span {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 36px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--bg-3);
}

.marquee span em { font-style: normal; color: var(--accent-lo); }

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   CTA + FOOTER
   ============================================================ */

.cta { padding-block: clamp(66px, 11vh, 140px); }

.cta h2 {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(36px, 7vw, 108px);
  letter-spacing: -.035em;
  text-transform: uppercase;
  line-height: .94;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 14px 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}

.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-sink); }
.btn--ghost:hover { background: transparent; border-color: var(--text); color: var(--text); }

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 30px;
  position: relative;
  z-index: 1;
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.site-footer a:hover { color: var(--accent); }

.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ============================================================
   WORK DETAIL
   ============================================================ */

.work { padding-top: var(--header-h); padding-bottom: clamp(48px, 7vh, 90px); }

.work__stage {
  position: relative;
  min-height: clamp(360px, 62vh, 700px);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.work__stage .ph,
.work__stage .work__photo { position: absolute; inset: 0; }

.work__photo { width: 100%; height: 100%; object-fit: cover; }

.work__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--shade-rgb),.92) 0%, rgba(var(--shade-rgb),.35) 45%, transparent 78%);
  pointer-events: none;
}

.work__stage .wrap { position: relative; z-index: 2; padding-block: clamp(26px, 5vh, 56px); }

.back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 18px;
}

.back:hover { color: var(--accent); }

.work__title {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(36px, 7.5vw, 106px);
  letter-spacing: -.035em;
  text-transform: uppercase;
  line-height: .9;
  margin-top: 12px;
}

.work__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(26px, 5vw, 76px);
  padding-block: clamp(34px, 6vh, 70px);
  align-items: start;
}

@media (max-width: 900px) { .work__cols { grid-template-columns: 1fr; } }

.work__desc p { margin: 0; color: var(--lede); font-size: 16px; line-height: 1.72; }
.work__desc p + p { margin-top: 16px; }

.work__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.3vw, 18px);
}

@media (max-width: 760px) { .work__gallery { grid-template-columns: 1fr; } }

.shot {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--bg-2);
  margin: 0;
}

.shot--full { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

.shot img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

.work-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  margin-top: clamp(38px, 6vh, 74px);
}

.work-nav a {
  padding: 24px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s var(--ease);
}

.work-nav a:last-child { text-align: right; }
.work-nav a:hover { color: var(--accent); }

.work-nav b {
  display: block;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: -.02em;
  color: var(--text);
  margin-top: 7px;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(var(--sink-rgb),.96);
  display: grid;
  place-items: center;
  padding: 26px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }

.lightbox__close {
  position: absolute;
  top: 18px; right: 22px;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  width: 40px; height: 40px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
}

.lightbox__close:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   CONTACT
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 86px);
}

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.big-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .4s var(--ease-out);
}

.big-link:first-child { border-top: 1px solid var(--line); }
.big-link:hover { padding-left: 12px; }

.big-link .v {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 34px);
  letter-spacing: -.025em;
  color: var(--muted);
  transition: color .3s var(--ease);
  word-break: break-word;
}

.big-link:hover .v { color: var(--text); }

.big-link .k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: block;
  margin-bottom: 9px;
}

.big-link .go { font-family: var(--font-mono); font-size: 13px; color: var(--muted-2); }
.big-link:hover .go { color: var(--accent); }

/* ============================================================
   REVEAL / MOTION
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .card, .row { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .scroll-cue i::after { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   HOVER PHOTO SWAP
   Two photos stacked; the second one cross-fades in on hover.
   ============================================================ */

.card__media { position: absolute; inset: 0; overflow: hidden; }

.card__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out), opacity .55s var(--ease);
}

.card__img--b { opacity: 0; }

.card:hover .card__img--a { opacity: 0; }
.card:hover .card__img--b { opacity: 1; }
.card:hover .card__img { transform: scale(1.06); }

/* same trick inside the sticky preview panel */
.preview__layer .swap-b { opacity: 0; transition: opacity .55s var(--ease); }
.preview:hover .preview__layer.is-on .swap-b { opacity: 1; }

.preview__layer img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* a small hint that there is a second photo underneath */
.swap-hint {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(var(--sink-rgb),.7);
  border: 1px solid var(--line);
  padding: 5px 9px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out);
  pointer-events: none;
}

.card .swap-hint { top: 12px; bottom: auto; }

.preview:hover .swap-hint,
.card:hover .swap-hint { opacity: 1; transform: none; }

/* ============================================================
   360 PANORAMA (Insta360) -> opens the project video
   ============================================================ */

.pano-block { margin-top: clamp(30px, 5vh, 58px); }

.pano {
  display: block;
  position: relative;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(var(--accent-rgb),.10), transparent 70%),
    var(--bg-2);
  padding: clamp(22px, 3.5vw, 46px);
  overflow: hidden;
}

a.pano:hover { border-color: var(--line); }

/* the globe / tiny-planet shot */
.pano__stage {
  display: block;
  position: relative;
  margin-inline: auto;
  overflow: hidden;
  touch-action: pan-y;
}

.pano--planet .pano__stage {
  width: min(78%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb),.14),
    0 26px 70px -30px rgba(0,0,0,.8);
  cursor: grab;
}

.pano--planet .pano__img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: planet-spin 48s linear infinite;
}

.pano--planet.is-held .pano__img,
.pano--planet:hover .pano__img { animation-play-state: paused; }

@keyframes planet-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* the wide equirectangular strip */
.pano--pano .pano__stage {
  width: 100%;
  aspect-ratio: 21 / 9;
  cursor: grab;
}

.pano--pano .pano__img {
  height: 100%;
  width: auto;
  max-width: none;
  will-change: transform;
}

.pano__stage.is-held { cursor: grabbing; }

/* the "360" mark and the play affordance */
.pano__badge {
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  left: clamp(14px, 2vw, 22px);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 6px 10px;
}

.pano__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.pano__play i {
  width: clamp(54px, 6vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-rgb),.5);
  background: rgba(var(--sink-rgb),.55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.88);
  transition: opacity .4s var(--ease), transform .4s var(--ease-out),
              background .3s var(--ease), border-color .3s var(--ease);
}

.pano__play i::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 13px solid var(--text);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

a.pano:hover .pano__play i {
  opacity: 1;
  transform: none;
  background: rgba(var(--accent-rgb),.85);
  border-color: var(--accent);
}

.pano__cap {
  margin-top: clamp(16px, 2.4vw, 26px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.pano__cap b {
  font-weight: 400;
  color: var(--muted);
}

a.pano:hover .pano__cap b { color: var(--accent); }

/* placeholder while the 360 shot has not arrived yet */
.pano--empty .pano__stage {
  cursor: default;
  animation: none;
}

.pano--empty .pano__stage .ph { border-radius: inherit; }

/* ============================================================
   MIG TORCH CURSOR + WELD ON CLICK
   Only on real pointers, and switchable off from the footer.
   ============================================================ */

.torch-toggle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: none;
}

.torch-toggle:hover { color: var(--accent); }

body.torch-on .torch-toggle b { color: var(--accent); }

/* hide the system cursor only while the torch is actually live */
body.torch-on,
body.torch-on * { cursor: none; }

.torch {
  position: fixed;
  top: 0; left: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease);
  will-change: transform;
}

body.torch-on .torch.is-live { opacity: 1; }

.torch__svg {
  position: absolute;
  left: -6px;
  top: -52px;
  transform-origin: 6px 52px;
  transition: transform .18s var(--ease-out);
}

/* the arc light at the nozzle tip */
.torch__arc {
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,241,214,.95), rgba(255,170,90,.5) 42%, transparent 70%);
  opacity: 0;
  transform: scale(.3);
  transition: opacity .2s var(--ease), transform .2s var(--ease-out);
}

/* lit up over anything clickable */
body.torch-on.torch-hot .torch__arc { opacity: .75; transform: scale(1); }
body.torch-on.torch-hot .torch__svg { transform: rotate(-7deg); }

/* full arc flash while the trigger is held */
body.torch-on.torch-fire .torch__arc { opacity: 1; transform: scale(1.5); }
body.torch-on.torch-fire .torch__svg { transform: rotate(-12deg) translate(1px, 1px); }

/* --- the weld bead laid down on click --- */

.weld {
  position: absolute;
  z-index: 90;
  pointer-events: none;
  width: 0; height: 0;
}

.weld__flash {
  position: absolute;
  left: 0; top: 0;
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,230,.75), rgba(255,170,80,.28) 38%, transparent 68%);
  animation: weld-flash .55s var(--ease-out) forwards;
}

@keyframes weld-flash {
  0%   { opacity: 1;   transform: scale(.25); }
  30%  { opacity: .85; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.35); }
}

.weld__spark {
  position: absolute;
  left: 0; top: 0;
  width: var(--size, 3px);
  height: var(--size, 3px);
  margin: calc(var(--size, 3px) / -2) 0 0 calc(var(--size, 3px) / -2);
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 7px 2px rgba(255,186,104,.85);
  animation: weld-spark var(--dur, .7s) cubic-bezier(.12, .7, .35, 1) forwards;
}

/* out fast, a little hop, then it falls and burns out */
@keyframes weld-spark {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  55% {
    opacity: 1;
    transform: translate(calc(var(--dx) * .68), calc(var(--dy) * .42 - 13px)) scale(.85);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(.15);
  }
}

/* the white-hot core right at the wire, the instant the arc strikes */
.weld__core {
  position: absolute;
  left: 0; top: 0;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #fffdf6;
  box-shadow: 0 0 26px 10px rgba(255,214,140,.95);
  animation: weld-core .4s var(--ease-out) forwards;
}

@keyframes weld-core {
  0%   { opacity: 1; transform: scale(.3); }
  35%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(.5); }
}

/* only offer the torch where there is a real pointer */
@media (hover: hover) and (pointer: fine) {
  .torch-toggle { display: inline-flex; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .pano--planet .pano__img { animation: none; }
  .weld, .torch { display: none; }
}

/* ============================================================
   TEMPLATES
   01 Atelier   - the default above: graphite drawing sheet
   02 Forge     - warm black, molten orange, heavy condensed type
   03 Gallery   - light white cube, serif, museum labels
   04 Blueprint - drafting blue, grid paper, construction lines
   Switched by the torch button in the header (html[data-theme]).
   ============================================================ */

/* --- each part of the torch drawing takes its template's colour --- */

.torch-art .t-edge        { stroke: var(--torch-edge); }
.torch-art .t-cable       { stroke: var(--torch-cable); }
.torch-art .t-corrugation { stroke: var(--torch-corrugation); }
.torch-art .t-body        { stroke: var(--torch-body); }
.torch-art .t-body-hl     { stroke: var(--torch-body-hl); }
.torch-art .t-grip        { stroke: var(--torch-grip); }
.torch-art .t-grip-hl     { stroke: var(--torch-grip-hl); }
.torch-art .t-trigger     { stroke: var(--torch-trigger); }
.torch-art .t-collar      { stroke: var(--torch-collar); }
.torch-art .t-neck        { stroke: var(--torch-neck); }
.torch-art .t-neck-hl     { stroke: var(--torch-neck-hl); }
.torch-art .t-nozzle      { stroke: var(--torch-nozzle); }
.torch-art .t-nozzle-hl   { stroke: var(--torch-nozzle-hl); }
.torch-art .t-rim         { stroke: var(--torch-rim); }
.torch-art .t-wire        { stroke: var(--torch-wire); }
.torch-art .t-tip         { fill:   var(--torch-tip); }

/* ============================================================
   02 FORGE
   ============================================================ */

/* a torch just pulled out of the fire: dark warm body, orange
   trigger, neck and nozzle glowing, white-hot wire */
html[data-theme="forge"] {
  --torch-edge:        #7a4f30;
  --torch-cable:       #1a120d;
  --torch-corrugation: #3d2a1d;
  --torch-body:        #2e2018;
  --torch-body-hl:     #9a6a45;
  --torch-grip:        #150e0a;
  --torch-grip-hl:     #45301f;
  --torch-trigger:     #ff7a1a;
  --torch-collar:      #d9a86c;
  --torch-neck:        #a8420f;
  --torch-neck-hl:     #ffa14d;
  --torch-nozzle:      #c24a12;
  --torch-nozzle-hl:   #ffc27a;
  --torch-rim:         #ffd08a;
  --torch-wire:        #ffe2b0;
  --torch-tip:         #fff6e0;
}

html[data-theme="forge"] {
  --bg:        #16110e;
  --bg-2:      #1f1813;
  --bg-3:      #2a2019;
  --bg-sink:   #110d0a;
  --line:      #3f3026;
  --line-soft: #2c221b;
  --text:      #f4ebe1;
  --muted:     #bba897;
  --muted-2:   #a08c7b;
  --accent:    #ff7a1a;
  --accent-lo: #c2410c;

  --bg-rgb:     22, 17, 14;
  --sink-rgb:   17, 13, 10;
  --shade-rgb:  14, 10, 8;
  --text-rgb:   244, 235, 225;
  --accent-rgb: 255, 122, 26;
  --grain-rgb:  255, 214, 170;
  --lede:       #e6d8ca;

  --font-disp: "Big Shoulders Display", "Inter", sans-serif;
}

/* heat rising from the bottom of the screen instead of brushed grain */
html[data-theme="forge"] body::before {
  opacity: 1;
  background:
    radial-gradient(90% 55% at 50% 115%, rgba(255,110,20,.17), transparent 70%),
    radial-gradient(60% 40% at 85% -10%, rgba(255,150,60,.06), transparent 70%);
}

/* no drawing sheet in a foundry */
html[data-theme="forge"] .frame { display: none; }

html[data-theme="forge"] :is(.display, .brand__mark, .menu-overlay nav a, .intro__title,
  .section-head h1, .section-head h2, .row__title, .card__title, .op h3, .split h2,
  .marquee span, .cta h2, .work__title, .work-nav b, .big-link .v) {
  font-weight: 900;
  letter-spacing: .005em;
}

html[data-theme="forge"] .brand__mark { font-size: 25px; letter-spacing: .05em; }

/* the name reads like metal coming out of the furnace */
html[data-theme="forge"] .intro__title {
  font-size: clamp(76px, 17vw, 270px);
  line-height: .8;
}

html[data-theme="forge"] .intro__title span:first-child {
  background: linear-gradient(180deg, #fff7e8 0%, #ffd08a 34%, #ff8a2a 68%, #b8430f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(255,122,26,.3));
}

html[data-theme="forge"] .outline,
html[data-theme="forge"] .intro__title .outline {
  -webkit-text-stroke: 1.5px var(--accent);
  -webkit-text-fill-color: var(--bg);
}

/* the breves on the two Ă rise well above the caps in this face -
   drop the second line far enough that they clear DAVID */
html[data-theme="forge"] .intro__title .outline { margin-top: .27em; }

html[data-theme="forge"] .titleblock { border-top: 2px solid var(--accent); }

html[data-theme="forge"] .section-head { border-bottom: 3px solid var(--accent); }
html[data-theme="forge"] .section-head h1,
html[data-theme="forge"] .section-head h2 { font-size: clamp(32px, 4.8vw, 72px); }

html[data-theme="forge"] .row__title { font-size: clamp(25px, 2.9vw, 44px); }
html[data-theme="forge"] .row::before {
  background: linear-gradient(90deg, rgba(255,122,26,.12), transparent 75%);
}
html[data-theme="forge"] .row:hover .row__title {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255,122,26,.4);
}

html[data-theme="forge"] .card { border-color: transparent; }
html[data-theme="forge"] .card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 46px -14px rgba(255,122,26,.6);
}
html[data-theme="forge"] .card__title { font-size: clamp(23px, 2.2vw, 34px); }

html[data-theme="forge"] .split h2 { font-size: clamp(40px, 5.6vw, 80px); line-height: .9; }
html[data-theme="forge"] .op h3    { font-size: clamp(27px, 2.9vw, 40px); }
html[data-theme="forge"] .cta h2,
html[data-theme="forge"] .work__title { font-size: clamp(50px, 10.5vw, 160px); line-height: .84; }

html[data-theme="forge"] .marquee span { color: #3d281b; font-size: clamp(30px, 4.2vw, 60px); }
html[data-theme="forge"] .marquee span em { color: var(--accent); }

html[data-theme="forge"] .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-sink);
  font-weight: 500;
}
html[data-theme="forge"] .btn:hover { background: #ffa04d; border-color: #ffa04d; }
html[data-theme="forge"] .btn--ghost { background: transparent; border-color: var(--line); color: var(--text); }
html[data-theme="forge"] .btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

html[data-theme="forge"] .ph::after {
  background: radial-gradient(50% 45% at 50% 62%, rgba(255,122,26,.24), transparent 72%);
}

/* ============================================================
   03 GALLERY
   ============================================================ */

/* an ink drawing on paper: black line, paper-white parts,
   a rust trigger and wire tip */
html[data-theme="gallery"] {
  --torch-edge:        #16171a;
  --torch-cable:       #2b2d31;
  --torch-corrugation: #6b6f73;
  --torch-body:        #faf9f6;
  --torch-body-hl:     #dcd8cf;
  --torch-grip:        #2b2d31;
  --torch-grip-hl:     #64686c;
  --torch-trigger:     #b4441c;
  --torch-collar:      #16171a;
  --torch-neck:        #f3f1ec;
  --torch-neck-hl:     #ffffff;
  --torch-nozzle:      #e9e6df;
  --torch-nozzle-hl:   #ffffff;
  --torch-rim:         #16171a;
  --torch-wire:        #4f5256;
  --torch-tip:         #b4441c;
}

html[data-theme="gallery"] {
  --bg:        #f3f1ec;
  --bg-2:      #e9e6df;
  --bg-3:      #dcd8cf;
  --bg-sink:   #faf9f6;
  --line:      #cdc8bd;
  --line-soft: #e0dcd3;
  --text:      #16171a;
  --muted:     #4f5256;
  --muted-2:   #64686c;
  --accent:    #b4441c;
  --accent-lo: #8a3414;

  --bg-rgb:     243, 241, 236;
  --sink-rgb:   250, 249, 246;
  --shade-rgb:  246, 244, 240;
  --text-rgb:   22, 23, 26;
  --accent-rgb: 180, 68, 28;
  --grain-rgb:  0, 0, 0;
  --lede:       #2b2d31;

  --font-disp: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* a white cube: no grain, no frame, no rail */
html[data-theme="gallery"] body::before,
html[data-theme="gallery"] .frame,
html[data-theme="gallery"] .rail { display: none; }

@media (min-width: 1200px) {
  html[data-theme="gallery"] body { padding-left: 0; }
  html[data-theme="gallery"] .site-header { left: 0; }
}

/* Instrument Serif only has one weight - never fake a bold.
   !important because a few page titles carry an inline uppercase. */
html[data-theme="gallery"] :is(.display, .brand__mark, .menu-overlay nav a, .intro__title,
  .section-head h1, .section-head h2, .row__title, .card__title, .op h3, .split h2,
  .marquee span, .cta h2, .work__title, .work-nav b, .big-link .v) {
  font-weight: 400;
  text-transform: none !important;
  letter-spacing: -.012em;
}

html[data-theme="gallery"] .brand__mark { font-size: 24px; }

html[data-theme="gallery"] .intro__title {
  font-size: clamp(66px, 13.5vw, 230px);
  line-height: .9;
  letter-spacing: -.025em;
}

/* the outlined word becomes an italic */
html[data-theme="gallery"] .outline,
html[data-theme="gallery"] .intro__title .outline {
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: var(--muted);
  font-style: italic;
}

html[data-theme="gallery"] .section-head h1,
html[data-theme="gallery"] .section-head h2 { font-size: clamp(36px, 4.6vw, 68px); }

html[data-theme="gallery"] .row__title { font-size: clamp(25px, 2.7vw, 42px); }
html[data-theme="gallery"] .row::before { display: none; }
html[data-theme="gallery"] .row:hover .row__title { font-style: italic; }

html[data-theme="gallery"] .card { border: 0; background: var(--bg-2); }
html[data-theme="gallery"] .card::after {
  background: linear-gradient(to top,
    rgba(var(--shade-rgb), .97) 0%, rgba(var(--shade-rgb), .72) 22%, transparent 46%);
}
html[data-theme="gallery"] .card__title { font-size: clamp(23px, 2.1vw, 32px); }
html[data-theme="gallery"] .card__num   { color: var(--muted-2); }

html[data-theme="gallery"] .split h2 { font-size: clamp(38px, 5vw, 72px); }
html[data-theme="gallery"] .op h3    { font-size: clamp(24px, 2.5vw, 36px); }
html[data-theme="gallery"] .op__num  { color: var(--muted-2); }

html[data-theme="gallery"] .marquee span {
  font-style: italic;
  color: var(--bg-3);
  font-size: clamp(30px, 3.8vw, 56px);
}
html[data-theme="gallery"] .marquee span em { color: var(--line); font-style: normal; }

/* buttons become quiet underlined links */
html[data-theme="gallery"] .btn {
  border: 0;
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  padding: 0 0 6px;
  background: none;
  color: var(--text);
}
html[data-theme="gallery"] .btn:hover,
html[data-theme="gallery"] .btn--ghost:hover {
  background: none;
  color: var(--accent);
  border-color: var(--accent);
}

html[data-theme="gallery"] .ph::after {
  background: radial-gradient(50% 45% at 50% 40%, rgba(var(--accent-rgb), .06), transparent 72%);
}
html[data-theme="gallery"] .ph span { background: rgba(var(--sink-rgb), .85); }

html[data-theme="gallery"] .pano--planet .pano__stage {
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px -34px rgba(0,0,0,.35);
}

/* sparks must stay visible on white paper */
html[data-theme="gallery"] .weld__spark {
  background: #f28a2e !important;
  box-shadow: 0 0 6px 1px rgba(214,96,20,.55);
}
html[data-theme="gallery"] .weld__flash {
  background: radial-gradient(circle, rgba(255,180,100,.6), rgba(240,130,40,.2) 40%, transparent 68%);
}
html[data-theme="gallery"] .weld__core {
  background: #ffb866;
  box-shadow: 0 0 22px 8px rgba(245,140,50,.55);
}
html[data-theme="gallery"] .torch__arc {
  background: radial-gradient(circle, rgba(255,170,80,.95), rgba(230,110,30,.4) 45%, transparent 72%);
}

/* ============================================================
   04 BLUEPRINT
   ============================================================ */

/* the torch as a technical drawing: a white line on blue,
   blue-toned parts, the wire tip marked in amber */
html[data-theme="blueprint"] {
  --torch-edge:        #eef5ff;
  --torch-cable:       #123a66;
  --torch-corrugation: #5a89bd;
  --torch-body:        #164475;
  --torch-body-hl:     #5a89bd;
  --torch-grip:        #0e3055;
  --torch-grip-hl:     #5a89bd;
  --torch-trigger:     #1c5087;
  --torch-collar:      #eef5ff;
  --torch-neck:        #123a66;
  --torch-neck-hl:     #9dbde0;
  --torch-nozzle:      #164475;
  --torch-nozzle-hl:   #9dbde0;
  --torch-rim:         #eef5ff;
  --torch-wire:        #eef5ff;
  --torch-tip:         #ffd166;
}

html[data-theme="blueprint"] {
  --bg:        #123a66;
  --bg-2:      #164475;
  --bg-3:      #1c5087;
  --bg-sink:   #0e3055;
  --line:      #5a89bd;
  --line-soft: #2f5d90;
  --text:      #eef5ff;
  --muted:     #bcd3ec;
  --muted-2:   #9dbde0;
  --accent:    #ffd166;
  --accent-lo: #e0a93a;

  --bg-rgb:     18, 58, 102;
  --sink-rgb:   14, 48, 85;
  --shade-rgb:  12, 44, 80;
  --text-rgb:   238, 245, 255;
  --accent-rgb: 255, 209, 102;
  --grain-rgb:  255, 255, 255;
  --lede:       #dce9f8;

  --font-disp: "Chakra Petch", "Inter", sans-serif;
}

/* drafting paper: fine 24px squares, a heavier line every 120px */
html[data-theme="blueprint"] body::before {
  opacity: 1;
  background:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 24px 24px;
}

html[data-theme="blueprint"] :is(.display, .brand__mark, .menu-overlay nav a, .intro__title,
  .section-head h1, .section-head h2, .row__title, .card__title, .op h3, .split h2,
  .marquee span, .cta h2, .work__title, .work-nav b, .big-link .v) {
  font-weight: 700;
  letter-spacing: .01em;
}

html[data-theme="blueprint"] .intro__title { letter-spacing: 0; }

html[data-theme="blueprint"] .outline,
html[data-theme="blueprint"] .intro__title .outline { -webkit-text-stroke: 1.4px var(--text); }

/* keep the breves on the two Ă clear of DAVID */
html[data-theme="blueprint"] .intro__title .outline { margin-top: .13em; }

/* construction lines instead of solid rules - one side at a time,
   so no hidden border suddenly appears */
html[data-theme="blueprint"] .frame__inner { border-left-style: dashed; border-right-style: dashed; border-color: var(--line); opacity: .55; }
html[data-theme="blueprint"] :is(.rows, .ops, .spec, .titleblock) { border-top-style: dashed; }
html[data-theme="blueprint"] :is(.row, .op, .spec li, .section-head, .big-link) { border-bottom-style: dashed; }
html[data-theme="blueprint"] .big-link:first-child { border-top-style: dashed; }
html[data-theme="blueprint"] .titleblock div { border-right-style: dashed; }
html[data-theme="blueprint"] .marquee { border-block-style: dashed; }
html[data-theme="blueprint"] .card { border-style: dashed; border-color: var(--line); }

html[data-theme="blueprint"] .row::before { background: rgba(255,255,255,.05); }

/* registration marks in the corners of every picture frame */
html[data-theme="blueprint"] :is(.card, .preview, .split__media, .shot)::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 3;
  pointer-events: none;
  opacity: .85;
  background:
    linear-gradient(var(--accent), var(--accent)) left top     / 14px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left top     / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top    / 14px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top    / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom  / 14px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom  / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 1px 14px no-repeat;
}

/* placeholders are hatched like a section cut */
html[data-theme="blueprint"] .ph {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px),
    var(--bg-2);
}
html[data-theme="blueprint"] .ph::after { background: none; }
html[data-theme="blueprint"] .ph span {
  border-style: dashed;
  color: var(--text);
  background: rgba(var(--sink-rgb), .82);
}

html[data-theme="blueprint"] .marquee span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.3);
}
html[data-theme="blueprint"] .marquee span em { -webkit-text-stroke: 0; color: var(--accent); }

html[data-theme="blueprint"] .btn { border-radius: 0; border-color: var(--text); }
html[data-theme="blueprint"] .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-sink); }
html[data-theme="blueprint"] .btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }