/* ======================================================================
   BRUTALIST ZEN — shared design system · v4
   Used by:
     index.html  (inline copy of these tokens)
     project-source.html  · project-cube.html  · project-capra.html
     project-gobi.html    · project-mokapot.html
     commission.html      (Build Your Instrument)

   Tokens copied from v4b. Project pages link to this file directly.
   ====================================================================== */

:root {
  /* Material & Shadow */
  --black:        #000000;
  --ink:          #0A0A0A;
  --ink-2:        #1A1A1A;
  --ink-3:        #2C2C2A;
  --bone:         #F9F9F9;
  --bone-2:       #EFEDEA;
  --bone-3:       #E2DED5;
  --terracotta:   #BD5532;
  --terracotta-d: #9A4429;
  --terracotta-l: #D67050;
  --whisper:      #888580;
  --whisper-d:    #6C6968;
  --whisper-on-dark: #898784;

  --rule-l:       rgba(0,0,0,0.12);
  --rule-l-soft:  rgba(0,0,0,0.06);
  --rule-d:       rgba(249,249,249,0.16);
  --rule-d-soft:  rgba(249,249,249,0.06);

  --serif:    'Noto Serif', 'Cormorant Garamond', Georgia, serif;
  --sans:     'Space Grotesk', system-ui, sans-serif;
  --mono:     'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --container: 1480px;
  --margin:    clamp(20px, 4.5vw, 64px);
  --gutter:    clamp(16px, 2vw, 28px);

  --d-fast:  0.25s;
  --d-med:   0.55s;
  --d-slow:  0.95s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bz:  cubic-bezier(0.7, 0, 0.3, 1);
}

/* ============================================================ RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ol, ul { list-style: none; }

.skip-link {
  position: absolute; top: -64px; inset-inline-start: 16px;
  z-index: 600; background: var(--ink); color: var(--bone);
  padding: 12px 20px; font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }

/* ============================================================ CHROME */
.mark {
  position: fixed;
  top: clamp(18px, 2.4vh, 28px);
  inset-inline-start: clamp(20px, 4vw, 56px);
  z-index: 60;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink);
}
.mark .nm {
  font-family: var(--sans); font-weight: 700;
  font-size: 14px; letter-spacing: -0.01em;
}
.mark .role {
  color: var(--whisper-d);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 400;
}
@media (max-width: 640px) { .mark .role { display: none; } }

.back {
  position: fixed; top: calc(clamp(18px, 2.4vh, 28px) + 36px);
  inset-inline-start: clamp(20px, 4vw, 56px);
  z-index: 60; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--whisper-d);
  transition: color 0.2s;
}
.back:hover { color: var(--terracotta); }

.sticky-cta {
  position: fixed; top: clamp(16px, 2.4vh, 28px);
  inset-inline-end: clamp(20px, 4vw, 56px);
  z-index: 60;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bone); background: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 18px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.sticky-cta:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--bone); }

/* dark variants — used when body has .is-dark via JS */
body.is-dark .mark { color: var(--bone); }
body.is-dark .mark .role { color: var(--whisper-on-dark); }
body.is-dark .back { color: var(--whisper-on-dark); }
body.is-dark .back:hover { color: var(--terracotta); }
body.is-dark .sticky-cta { background: var(--bone); color: var(--ink); border-color: var(--bone); }
body.is-dark .sticky-cta:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--bone); }

/* ============================================================ WRAP */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* ============================================================ HERO */
.proj-hero {
  position: relative;
  height: 92vh;
  min-height: 640px;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  display: grid;
  align-items: end;
}
.proj-hero img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(0.9);
  z-index: 1;
}
.proj-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.04) 38%, rgba(10,10,10,0.85) 100%);
  z-index: 2;
  pointer-events: none;
}
.proj-hero .grid-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--rule-d-soft) 1px, transparent 1px) repeat-y,
    linear-gradient(90deg, var(--rule-d-soft) 1px, transparent 1px) repeat-x;
  background-size: 96px 96px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.4;
}
.proj-hero .ribbon {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 4;
  background: var(--ink); color: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 9px var(--margin);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule-d);
}
.proj-hero .ribbon em { color: var(--terracotta); font-style: normal; font-weight: 500; }
.proj-hero .corner {
  position: absolute;
  z-index: 4;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--whisper-on-dark);
}
.proj-hero .corner.tl { top: 64px; inset-inline-start: var(--margin); }
.proj-hero .corner.tr { top: 64px; inset-inline-end: var(--margin); text-align: end; }
.proj-hero .corner em { color: var(--terracotta); font-style: normal; font-weight: 500; }

.proj-hero .body {
  position: relative;
  z-index: 3;
  padding: var(--margin);
  max-width: var(--container);
  margin-inline: auto;
  width: 100%;
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  padding-block-end: clamp(40px, 6vw, 96px);
}
@media (max-width: 900px) { .proj-hero .body { grid-template-columns: 1fr; gap: 28px; } }
.proj-hero .lbl {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: flex; align-items: center; gap: 14px;
  margin-block-end: clamp(20px, 2vw, 28px);
}
.proj-hero .lbl::before {
  content: ""; width: 32px; height: 1px; background: var(--terracotta);
}
.proj-hero h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(48px, 7.5vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--bone);
  max-width: 16ch;
}
.proj-hero h1 em {
  font-family: var(--serif);
  font-style: italic; font-weight: 300;
  color: var(--terracotta);
  text-transform: none;
}
.proj-hero .deck {
  font-family: var(--serif); font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.5;
  color: rgba(249,249,249,0.8);
  max-width: 38ch;
  align-self: end;
  border-inline-start: 1px solid var(--terracotta);
  padding-inline-start: 18px;
}

/* ============================================================ META BAR */
.meta-bar {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(28px, 3.5vw, 48px) var(--margin);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  border-block-end: 1px solid var(--ink);
  position: relative;
}
.meta-bar::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--rule-d-soft) 1px, transparent 1px) repeat-y,
    linear-gradient(90deg, var(--rule-d-soft) 1px, transparent 1px) repeat-x;
  background-size: 96px 96px;
  pointer-events: none;
  opacity: 0.35;
}
.meta-bar > div { position: relative; }
@media (max-width: 1000px) { .meta-bar { grid-template-columns: repeat(2, 1fr); } }
/* Keep 2-col at very narrow widths so the meta block stays compact —
   stacking 5 separate rows wastes ~250px of mobile screen for what is
   essentially just labels. */
@media (max-width: 480px)  { .meta-bar { grid-template-columns: repeat(2, 1fr); gap: 10px 14px; } }
@media (max-width: 480px)  { .meta-bar dt { font-size: 9px; } .meta-bar dd { font-size: 13px; } }
.meta-bar dt {
  font-family: var(--mono); font-weight: 500;
  font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--whisper-on-dark);
  margin-block-end: 6px;
}
.meta-bar dd {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--bone);
}
.meta-bar dd em { color: var(--terracotta); font-style: normal; font-weight: 600; }

/* ============================================================ INTRO */
.proj-intro {
  background: var(--bone);
  padding: clamp(72px, 10vw, 144px) var(--margin);
}
.proj-intro .inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 900px) { .proj-intro .inner { grid-template-columns: 1fr; gap: 28px; } }
.proj-intro .lede {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 18ch;
}
.proj-intro .lede em {
  color: var(--terracotta);
  font-style: italic;
}
.proj-intro .body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 60ch;
}
.proj-intro .body p { margin-block-end: 1em; }
.proj-intro .body em { color: var(--terracotta); font-style: italic; }
.proj-intro .body .tbd {
  color: var(--whisper);
  font-style: italic;
  border-inline-start: 1px solid var(--rule-l);
  padding-inline-start: 18px;
  font-size: 0.94em;
}

/* ============================================================ SECTION HEAD */
.sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: end;
  padding-block-end: clamp(20px, 3vw, 36px);
  margin-block-end: clamp(32px, 4vw, 56px);
  border-block-end: 1px solid var(--rule-l);
}
@media (max-width: 720px) { .sec-head { grid-template-columns: 1fr; gap: 12px; } }
.sec-head .num {
  font-family: var(--mono); font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.sec-head h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.sec-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--terracotta);
  text-transform: none;
}
.sec-head .meta {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--whisper-d);
  text-align: end;
}

/* ============================================================ GALLERY */
.proj-gallery {
  background: var(--bone);
  padding: clamp(40px, 6vw, 96px) var(--margin) clamp(60px, 8vw, 120px);
}
.proj-gallery .inner { max-width: var(--container); margin-inline: auto; }
.proj-gallery .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
}
.proj-gallery figure {
  position: relative;
  overflow: hidden;
  background: var(--bone-2);
  border: 1px solid var(--rule-l);
}
.proj-gallery figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.proj-gallery figure:hover img { transform: scale(1.03); }
.proj-gallery .stamp {
  position: absolute; top: 14px; inset-inline-start: 14px;
  background: rgba(10,10,10,0.55);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  border: 1px solid var(--rule-d);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.proj-gallery .stamp em { color: var(--terracotta); font-style: normal; font-weight: 500; }
.proj-gallery .g-tall  { grid-column: span 5; aspect-ratio: 4/5.2; }
.proj-gallery .g-wide  { grid-column: span 7; aspect-ratio: 7/4.5; }
.proj-gallery .g-half  { grid-column: span 6; aspect-ratio: 6/4.2; }
.proj-gallery .g-third { grid-column: span 4; aspect-ratio: 4/4.5; }
.proj-gallery .g-full  { grid-column: span 12; aspect-ratio: 16/7; }
@media (max-width: 800px) {
  .proj-gallery .g-tall, .proj-gallery .g-wide,
  .proj-gallery .g-half, .proj-gallery .g-third,
  .proj-gallery .g-full { grid-column: span 12; aspect-ratio: 4/3; }
}

/* ============================================================ PROCESS NOTE — light editorial */
.proj-note {
  background: var(--bone-2);
  padding: clamp(60px, 8vw, 120px) var(--margin);
  border-block: 1px solid var(--rule-l);
}
.proj-note .inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 900px) { .proj-note .inner { grid-template-columns: 1fr; gap: 28px; } }
.proj-note .label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--terracotta);
  display: flex; align-items: center; gap: 14px;
}
.proj-note .label::before {
  content: ""; width: 32px; height: 1px; background: var(--terracotta);
}
.proj-note h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
  margin-block-start: clamp(16px, 2vw, 28px);
  max-width: 14ch;
}
.proj-note h3 em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--terracotta); text-transform: none; }
.proj-note .text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.75;
  color: var(--ink-3);
  max-width: 56ch;
}
.proj-note .text p { margin-block-end: 1em; }
.proj-note .text em { color: var(--terracotta); font-style: italic; }
.proj-note .text .tbd {
  color: var(--whisper);
  font-style: italic;
  border-inline-start: 1px solid var(--rule-l);
  padding-inline-start: 18px;
  font-size: 0.94em;
}

/* ============================================================ DARK PROCESS BLOCK — for variety */
.proj-process-d {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(60px, 8vw, 128px) var(--margin);
  position: relative;
}
.proj-process-d::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--rule-d-soft) 1px, transparent 1px) repeat-y,
    linear-gradient(90deg, var(--rule-d-soft) 1px, transparent 1px) repeat-x;
  background-size: 96px 96px;
  pointer-events: none; opacity: 0.4;
}
.proj-process-d .inner {
  max-width: var(--container);
  margin-inline: auto;
  position: relative;
}
.proj-process-d .stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
@media (max-width: 1100px) { .proj-process-d .stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .proj-process-d .stages { grid-template-columns: 1fr; } }
.proj-process-d .stage {
  padding: clamp(18px, 2vw, 28px) clamp(14px, 1.6vw, 22px);
  border-inline-end: 1px solid var(--rule-d);
  display: grid; gap: 12px;
  transition: background 0.3s linear;
}
.proj-process-d .stage:last-child { border-inline-end: 0; }
.proj-process-d .stage:hover { background: var(--ink-2); }
@media (max-width: 1100px) {
  .proj-process-d .stage:nth-child(2n) { border-inline-end: 0; }
  .proj-process-d .stage { border-block-end: 1px solid var(--rule-d); }
}
@media (max-width: 600px)  {
  .proj-process-d .stage { border-inline-end: 0 !important; border-block-end: 1px solid var(--rule-d); }
}
.proj-process-d .stage .num {
  font-family: var(--mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--terracotta);
}
.proj-process-d .stage h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.proj-process-d .stage p {
  font-family: var(--mono); font-weight: 300;
  font-size: 12px; line-height: 1.65;
  color: var(--whisper-on-dark);
  max-width: 28ch;
}

/* ============================================================ NEXT PROJECT */
.proj-next {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(48px, 6vw, 96px) var(--margin);
  position: relative;
}
.proj-next .inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
}
@media (max-width: 720px) { .proj-next .inner { grid-template-columns: 1fr; gap: 24px; } }
.proj-next .label {
  font-family: var(--mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--terracotta);
  margin-block-end: 14px;
  display: flex; align-items: center; gap: 14px;
}
.proj-next .label::before {
  content: ""; width: 32px; height: 1px; background: var(--terracotta);
}
.proj-next a.next-link {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex; align-items: baseline; gap: 18px;
  transition: color 0.25s, gap 0.25s var(--ease-out);
}
.proj-next a.next-link em {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  color: var(--terracotta);
  text-transform: none;
}
.proj-next a.next-link .arrow {
  font-family: var(--serif); font-size: 0.6em;
  color: var(--terracotta);
  transition: transform 0.25s var(--ease-out);
}
.proj-next a.next-link:hover { gap: 26px; }
.proj-next a.next-link:hover .arrow { transform: translateX(8px); }
.proj-next a.home {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--whisper-on-dark);
  border-block-end: 1px solid var(--terracotta);
  padding-block-end: 4px;
  align-self: end;
  transition: color 0.2s;
}
.proj-next a.home:hover { color: var(--bone); }

/* ============================================================ FOOT BAR (dark) */
.foot-bar {
  background: var(--black);
  color: var(--bone);
  padding: clamp(40px, 5vw, 72px) var(--margin) clamp(28px, 3vw, 40px);
  border-block-start: 1px solid var(--rule-d);
}
.foot-grid {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 56px);
}
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.foot-grid .nm {
  font-family: var(--sans); font-weight: 700;
  font-size: 22px; letter-spacing: -0.005em;
  margin-block-end: 14px;
}
.foot-grid p {
  font-family: var(--serif); font-weight: 300;
  font-size: 14px; line-height: 1.75;
  color: rgba(249,249,249,0.65);
  max-width: 36ch;
}
.foot-grid h4 {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(249,249,249,0.5); font-weight: 400;
  margin-block-end: 14px;
}
.foot-grid a {
  display: block;
  font-family: var(--serif); font-weight: 300;
  font-size: 14px; color: var(--bone);
  line-height: 1.85;
  transition: color 0.2s;
}
.foot-grid a:hover { color: var(--terracotta); }
.foot-bottom {
  max-width: var(--container);
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding-block-start: clamp(20px, 2vw, 28px);
  border-block-start: 1px solid var(--rule-d);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(249,249,249,0.5);
}
.foot-bottom em { color: var(--terracotta); font-style: normal; font-weight: 500; }

/* ============================================================ REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   GLOBAL — hide TBD placeholders site-wide
   These were author notes during the build and shouldn't render
   on production. Once a TBD is filled in, remove the class.
   ============================================================ */
.tbd { display: none !important; }

/* ============================================================
   MOBILE POLISH (project page template, used by all 5 cases)
   ============================================================ */

/* Safe-area-inset for the fixed-position chrome elements */
.mark { padding-top: max(0px, env(safe-area-inset-top)); }
.back { inset-inline-start: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left)); }
.sticky-cta { inset-inline-end: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right)); }

/* Sticky CTA — shrink + reposition on phones so it doesn't dwarf
   the hero. Also bump to ≥44×44 touch target. */
@media (max-width: 720px) {
  .sticky-cta {
    font-size: 10px;
    padding: 11px 14px;
    letter-spacing: 0.16em;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .back { font-size: 9px; padding: 4px 0; }
  .mark .nm { font-size: 13px; letter-spacing: 0.16em; }
}

/* HERO on phone — corners and ribbon get cramped on tiny widths.
   Keep the headline strong, drop decorative meta down a level. */
@media (max-width: 720px) {
  .proj-hero {
    height: auto;
    min-height: 88vh;
  }
  .proj-hero .ribbon {
    font-size: 9px;
    padding: 8px 14px;
    gap: 6px 12px;
    letter-spacing: 0.02em;
  }
  .proj-hero .corner.tl,
  .proj-hero .corner.tr {
    font-size: 9px;
    top: 48px;
  }
  .proj-hero h1 {
    font-size: clamp(40px, 12vw, 72px);
    line-height: 0.98;
  }
  .proj-hero .deck {
    font-size: 16px;
  }
  .proj-hero .body {
    padding-block-end: clamp(32px, 8vw, 64px);
  }
}

/* On very small phones, hide the corner stamps entirely — they're
   decorative, and the hero is busy enough already. */
@media (max-width: 480px) {
  .proj-hero .corner.tl,
  .proj-hero .corner.tr { display: none; }
  .proj-hero .ribbon span:nth-child(3) { display: none; } /* drop status */
}

/* Process stages on mobile — switch from 1-col stack to compact 2-up
   grid (like home page lifecycle). 5th stage spans full width so the
   orphan row reads intentional. Total weight ~⅓ of the desktop look. */
@media (max-width: 720px) {
  .proj-process-d .stages,
  .proj-process .stages {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0;
  }
  .proj-process-d .stage,
  .proj-process .stage {
    padding: 14px 12px !important;
    gap: 4px !important;
    border-inline-end: 1px solid var(--rule-d) !important;
    border-block-end: 1px solid var(--rule-d) !important;
  }
  .proj-process-d .stage:nth-child(2n),
  .proj-process .stage:nth-child(2n) { border-inline-end: 0 !important; }
  .proj-process-d .stage:last-child,
  .proj-process .stage:last-child {
    grid-column: 1 / -1;
    border-inline-end: 0 !important;
    border-block-end: 0 !important;
  }
  .proj-process-d .stage .num,
  .proj-process .stage .num { font-size: 9px !important; }
  .proj-process-d .stage h3,
  .proj-process .stage h3 {
    font-size: 14px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }
  .proj-process-d .stage p,
  .proj-process .stage p {
    font-size: 11px !important;
    line-height: 1.45 !important;
    max-width: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* sec-head inside process — also tighten */
  .proj-process-d .sec-head h2,
  .proj-process .sec-head h2 { font-size: 22px !important; }
}

/* Gallery — single column on phone is the right call (2-col 4:5
   plates feel cramped). */
@media (max-width: 720px) {
  .proj-gallery .grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .proj-gallery .g-wide,
  .proj-gallery .g-tall {
    grid-column: 1 / -1 !important;
  }
}

/* Note + Next-project blocks on phone — denser spacing. */
@media (max-width: 720px) {
  .proj-note .inner,
  .proj-next .inner {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .proj-next .next-link { font-size: clamp(28px, 9vw, 40px); }
}

/* Footer grid — collapse to 2-up then 1-up on small screens. */
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 540px) {
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .foot-bottom { font-size: 9px; gap: 8px; }
}

/* ============================================================
   SITE NAV — bottom-center, persistent (used on all pages)
   Originally lived only in home; promoted to shared CSS so
   every page (project, instrument, commission, privacy…)
   carries the same floating bottom nav.
   ============================================================ */
.site-nav {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 510;
  display: flex; gap: 2px;
  background: var(--bone);
  border: 1px solid var(--ink);
  padding: 5px;
  font-family: var(--mono);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  overflow: visible;
}
.site-nav a {
  position: relative;
  padding: 10px 18px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
  transition: background 0.25s, color 0.25s;
}
.site-nav a:hover { background: var(--bone-2); }
.site-nav a.is-current { background: var(--ink); color: var(--bone); }
.site-nav a.is-current:hover { background: var(--ink-2); color: var(--bone); }
.site-nav a.cta {
  background: var(--terracotta);
  color: var(--bone);
  margin-inline-start: 4px;
}
.site-nav a.cta:hover { background: var(--terracotta-d); }
@media (max-width: 720px) {
  .site-nav { font-size: 9px; padding: 4px; }
  .site-nav a { padding: 8px 10px; font-size: 9px; letter-spacing: 0.12em; }
}
/* Honour iPhone safe-area so the bar doesn't sit under the home indicator */
@supports (padding: max(0px)) {
  .site-nav {
    bottom: max(18px, env(safe-area-inset-bottom));
  }
}

/* ============================================================
   SITE MARK — visual N-shaped PNG logo, fixed top-left.
   Pulled out of home page into shared CSS so every page can use it.
   Body class .has-dark-mark forces the light variant for dark backgrounds.
   ============================================================ */
.site-mark {
  position: fixed;
  top: clamp(16px, 2.2vh, 26px);
  inset-inline-start: clamp(18px, 3.2vw, 44px);
  z-index: 70;
  width: clamp(38px, 3.6vw, 52px);
  height: clamp(38px, 3.6vw, 52px);
  display: grid; place-items: center;
  cursor: pointer;
}
.site-mark img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.site-mark .lm-dark { opacity: 0; }
body.has-dark-mark .site-mark .lm-light { opacity: 0; }
body.has-dark-mark .site-mark .lm-dark  { opacity: 1; }
.site-mark:hover img { transform: scale(1.05); }