/* PIU · Principles of Intelligent Urbanism — industrial editorial mockup
   Light theme (client-requested white background). Tokens per project
   CLAUDE.md. Two font weights (400/500). No gradients, no shadows,
   no radius above 2px. Entrance motion only. */

:root {
  --ink: #0A0A0A;
  --surface: #111111;
  --bone: #F4F2ED;
  --muted: #6E6E6E;
  --accent: #C8FF00;
  /* --rule flipped to ink-basis for the light theme; --rule-inverse keeps
     the original bone-basis value for the dark footer band */
  --rule: rgba(10,10,10,0.15);
  --rule-inverse: rgba(244,242,237,0.12);

  --font-display: 'Neue Haas Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --step-display: clamp(3.5rem, 9vw, 8rem);
  --step-h2: clamp(2rem, 4vw, 3.5rem);
  --step-body: 1rem;
  --step-micro: 0.75rem;

  --track-display: -0.03em;
  --track-micro: 0.14em;

  --lh-display: 0.95;
  --lh-body: 1.7;

  --space-section: clamp(6rem, 12vw, 10rem);
  --space-block: 2.5rem;
  --max-width: 1440px;
  --gutter: clamp(1.5rem, 5vw, 7.5rem);

  /* derived: hero scrim = --ink at 55% opacity (user-required dark overlay) */
  --scrim: rgba(10,10,10,0.55);
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../assets/fonts/inter-latin.woff2) format('woff2');
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--accent); }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip {
  position: absolute; left: -100vw; top: 0; z-index: 100;
  background: var(--accent); color: var(--ink);
  padding: calc(var(--space-block) / 2); font-size: var(--step-micro);
  letter-spacing: var(--track-micro); text-transform: uppercase;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-block);
}
@media (max-width: 767px) {
  /* spec: stack to single column below 768px; 12 fixed-gap tracks cannot fit */
  .grid { grid-template-columns: 1fr; }
}

section { padding-block: var(--space-section); }

/* ---- type ---- */
.index {
  font-size: var(--step-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.display {
  font-family: var(--font-display);
  font-size: var(--step-display);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--bone);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  font-weight: 500;
  color: var(--ink);
  max-width: 24ch;
}

h3 {
  font-family: var(--font-display);
  font-size: calc(var(--step-h2) * 0.6); /* spec: h2 scaled down 40% */
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  font-weight: 500;
  color: var(--ink);
}

p { max-width: 62ch; }
.support { color: var(--muted); }

.sec-head h2 { margin-top: calc(var(--space-block) / 2); }
.sec-head .support { margin-top: calc(var(--space-block) / 2); }
.sec-head { margin-bottom: var(--space-section); }

/* ---- top bar (sits over hero image scrims on every page) ---- */
.topbar { position: absolute; inset: 0 0 auto 0; z-index: 5; color: var(--bone); }
.topbar .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-block);
  flex-wrap: wrap;
  padding-block: var(--space-block);
}
.wordmark {
  font-size: var(--step-body);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.topnav {
  display: flex; flex-wrap: wrap;
  gap: calc(var(--space-block) / 2) var(--space-block);
  font-size: var(--step-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* ---- hero (home full height, subpages shorter) ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block: 0;
}
.hero--page { min-height: 70svh; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: var(--scrim); }
.hero-content { position: relative; z-index: 2; width: 100%; color: var(--bone); padding-block: var(--space-section); }
.hero--page .hero-content { padding-block: var(--space-block); }
.hero-content .index { color: var(--bone); }
.hero-content h1 { margin-top: var(--space-block); font-size: min(var(--step-display), 12vw); }
.hero-sub { margin-top: var(--space-block); }
.hero-meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-block);
  margin-top: var(--space-section);
}
.hero--page .hero-meta { margin-top: var(--space-block); }
.hero-meta .index { color: var(--bone); }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: calc(var(--space-block) / 2); }
.scroll-cue .vrule { width: 1px; height: var(--space-block); background: var(--bone); }

/* ---- capabilities (home section 02) ---- */
.cap { grid-column: span 4; border-top: 1px solid var(--rule); padding-top: var(--space-block); }
.cap img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: var(--space-block); }
.cap h3 { margin-top: var(--space-block); }
.cap p { margin-top: calc(var(--space-block) / 2); }
@media (max-width: 767px) {
  .cap { grid-column: 1 / -1; }
  .cap + .cap { margin-top: var(--space-block); }
}

/* ---- image galleries (home works + portfolio pages) ---- */
.works-grid { row-gap: var(--space-section); }
.work { margin: 0; }
.w-5 { grid-column: span 5; }
.w-6 { grid-column: span 6; }
.w-7 { grid-column: span 7; }
.w-12 { grid-column: 1 / -1; }
.work figcaption { margin-top: calc(var(--space-block) / 2); }
@media (max-width: 767px) {
  .w-5, .w-6, .w-7 { grid-column: 1 / -1; }
}

.quote {
  grid-column: 1 / -1;
  background: var(--accent);
  color: var(--ink);
  padding: var(--space-block);
  font-family: var(--font-display);
  font-size: var(--step-h2);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  font-weight: 500;
}
.quote .index { display: block; margin-top: var(--space-block); color: var(--ink); }

.worklist { margin-top: var(--space-section); }
.worklist-col { grid-column: span 6; }
.worklist-col .index { display: block; padding-bottom: calc(var(--space-block) / 2); }
.worklist ul { list-style: none; }
.worklist li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-block);
  border-top: 1px solid var(--rule);
  padding-block: calc(var(--space-block) / 2);
}
.worklist li .index { padding: 0; }
@media (max-width: 767px) {
  .worklist-col { grid-column: 1 / -1; }
  .worklist-col + .worklist-col { margin-top: var(--space-block); }
}

/* ---- portfolio project blocks ---- */
.project { border-top: 1px solid var(--rule); padding-top: var(--space-block); margin-top: var(--space-section); }
.project:first-of-type { margin-top: 0; }
.proj-head { display: flex; align-items: baseline; gap: var(--space-block); margin-bottom: var(--space-block); flex-wrap: wrap; }
.proj-head .support { max-width: 62ch; }
.proj-grid { row-gap: var(--space-block); }

/* ---- axioms (about) ---- */
.axioms { row-gap: 0; }
.axiom {
  grid-column: span 6;
  display: flex; align-items: baseline; gap: var(--space-block);
  border-top: 1px solid var(--rule);
  padding-block: calc(var(--space-block) / 2);
}
.axiom .index { min-width: 3ch; }
.axiom span:last-child { font-weight: 500; }
@media (max-width: 767px) { .axiom { grid-column: 1 / -1; } }

/* ---- stats / press / team rows ---- */
.stats { row-gap: var(--space-block); }
.stat { grid-column: span 4; border-top: 1px solid var(--rule); padding-top: var(--space-block); }
.stat-num {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  font-weight: 500;
  color: var(--ink);
}
.stat .index { display: block; margin-top: calc(var(--space-block) / 2); }
@media (max-width: 767px) { .stat { grid-column: 1 / -1; } }

.rows { list-style: none; }
.rows li {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-block);
  border-top: 1px solid var(--rule);
  padding-block: calc(var(--space-block) / 2);
}
.rows .r-name { grid-column: span 4; font-weight: 500; }
.rows .r-what { grid-column: span 8; color: var(--muted); max-width: 62ch; }
@media (max-width: 767px) {
  .rows li { grid-template-columns: 1fr; }
  .rows .r-name, .rows .r-what { grid-column: 1 / -1; }
}

/* ---- contact meta columns (light) ---- */
.meta-grid { row-gap: var(--space-block); }
.meta-col { grid-column: span 4; border-top: 1px solid var(--rule); padding-top: var(--space-block); }
.meta-col .index { display: block; margin-bottom: calc(var(--space-block) / 2); }
@media (max-width: 767px) { .meta-col { grid-column: 1 / -1; } }

/* ---- shared dark footer band ---- */
.site-footer {
  background: var(--ink);
  color: var(--bone);
  padding-block: var(--space-section);
}
.site-footer h2 { color: var(--bone); }
.site-footer .grid { row-gap: var(--space-block); margin-top: var(--space-section); }
.site-footer .fcol { grid-column: span 3; border-top: 1px solid var(--rule-inverse); padding-top: var(--space-block); }
.site-footer .fcol .index { display: block; color: var(--bone); margin-bottom: calc(var(--space-block) / 2); }
.site-footer .fcol p { font-size: var(--step-body); }
@media (max-width: 767px) {
  .site-footer .fcol { grid-column: 1 / -1; }
}
.site-footer .legal {
  margin-top: var(--space-section);
  border-top: 1px solid var(--rule-inverse);
  padding-top: var(--space-block);
}
.site-footer .legal p { max-width: none; color: var(--bone); font-size: var(--step-micro); letter-spacing: var(--track-micro); text-transform: uppercase; }

/* ---- entrance motion (only motion on the site) ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}