/*
Theme Name: D_FALT
Theme URI: https://dfalt.art
Author: David Falter
Description: Portfolio theme for D_FALT — public art, wall reliefs, fabrication. Catalog-driven, work-first.
Version: 1.0.0
Text Domain: dfalt
*/

/* ============================================================
   DESIGN SYSTEM — every value lives here.
   Change a token, change it everywhere.
   ============================================================ */
:root {
  /* Color */
  --ash:        #EFF0EE;  /* base / paper */
  --gunmetal:   #16181D;  /* ink, borders, dark panels */
  --his-blood:  #F95014;  /* links + actions (everywhere) */
  --olive:      #878C57;  /* accent on dark backgrounds */
  --clay:       #807C72;  /* muted metadata */
  --white:      #FFFFFF;  /* ticket cards */
  --ink-soft:   #46443D;  /* body copy on light */
  --ink-faint:  #54544C;  /* small body on light */
  --perf:       #B8B7B0;  /* dashed perforation */
  --on-dark-mut:#9A968C;  /* muted text on gunmetal */

  /* Type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Weights */
  --w-head: 500;   /* headlines — medium */
  --w-bold: 700;   /* wordmark / emphasis */
  --w-body: 400;

  /* Layout */
  --gut: 24px;            /* page gutter (side padding inside bands) */
  --rule: 1px solid #16181d26; /* 2px solid var(--gunmetal); */
  --content: 1440px;      /* capped, centered content width inside full-width bands */
  --hair: 1px solid rgba(22,24,29,0.15);
  --hair-dark: 1px solid rgba(239,240,238,0.12);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: white ;/* var(--ash); */
  color: var(--gunmetal);
  font-family: var(--display);
  font-weight: var(--w-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--his-blood); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--his-blood);
  outline-offset: 2px;
}

/* .wrap spans full width so all bands/borders reach the screen edges.
   Content stays centered + capped because --gut auto-grows on wide
   screens: it's 24px until the viewport exceeds --content, then it
   becomes the leftover space / 2, holding content at --content wide. */
.wrap { max-width: 100%; margin: 0 auto; }

/* Override the fixed gutter with a centering gutter applied site-wide. */
:root { --gut: max(24px, calc((100vw - var(--content)) / 2)); }

/* ============================================================
   HEADER — four-field mono masthead + nav row
   ============================================================ */
.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px var(--gut);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  border-bottom: var(--rule);
}
.masthead .m-left { font-weight: 600; }
.masthead .m-mid { text-align: center; color: var(--clay); letter-spacing: 0.07em; }
.masthead .m-right { text-align: right; color: var(--clay); }

.navbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
  padding: 14px var(--gut);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: var(--rule);
  position: relative;
}
.navbar .wordmark {
  position: absolute;
  left: var(--gut);
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: 21px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--gunmetal);
}
.navbar a { color: var(--gunmetal); }
.navbar a:hover { text-decoration: none; color: var(--his-blood); }
.navbar .nav-cta {
  background: var(--his-blood);
  color: var(--white);
  padding: 4px 10px;
  font-weight: 600;
}
.navbar .nav-cta:hover { color: var(--white); }

/* ============================================================
   HERO — text left, image right. Both sit inside the centered
   content column so the hero's right edge lines up with the
   catalog grid and footer below (one clean vertical line).
   The gunmetal image fills its half of that column cleanly.
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-bottom: var(--rule);
  /* Center the hero to the content column; the --gut already
     equals the side margin used site-wide, so the hero's right
     edge aligns with every section below it. */
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.hero-text {
  /* gutter is now on .hero, so text only needs internal spacing */
  padding: 46px 40px 44px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gunmetal);
  border-left: 4px solid var(--his-blood);
  padding-left: 11px;
}
.hero-title {
  font-size: clamp(38px, 5vw, 56px);
  font-weight: var(--w-head);
  letter-spacing: -0.03em;
  line-height: 0.92;
  margin: 20px 0 0;
}
.hero-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 440px;
  margin-top: 20px;
}
.hero-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-img {
  align-self: stretch;
  min-height: 360px;
  position: relative;
  background: var(--gunmetal);
  background-size: cover;
  background-position: center;
}
.hero-img .tag {
  position: absolute; top: 13px; right: 15px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--gunmetal); background: var(--olive); padding: 3px 8px;
}
.hero-img .cap {
  position: absolute; bottom: 13px; left: 15px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--olive);
  /* scrim so caption stays legible on light photos */
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  mix-blend-mode: plus-lighter;
}

/* Buttons (mono) */
.btn {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; display: inline-block;
}
.btn-solid { background: var(--his-blood); color: var(--white); padding: 13px 20px; font-weight: 700; }
.btn-solid:hover { text-decoration: none; color: var(--white); opacity: 0.92; }
.btn-ghost { border: 2px solid var(--gunmetal); color: var(--gunmetal); padding: 11px 18px; font-weight: 500; }
.btn-ghost:hover { text-decoration: none; background: var(--gunmetal); color: var(--ash); }

/* ============================================================
   SECTION LABEL BAR (Catalog / Process)
   ============================================================ */
.section-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px var(--gut);
  border-top: var(--rule); border-bottom: var(--rule);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.section-bar.no-top { border-top: none; }
.section-bar .sb-title { font-weight: 600; }
.section-bar .sb-meta { color: var(--clay); }

/* ============================================================
   CATALOG — floating tickets, tall portrait images
   ============================================================ */
.catalog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 34px var(--gut) 38px;
}
.ticket {
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(22,24,29,0.08), 0 1px 3px rgba(22,24,29,0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.ticket:hover {
  box-shadow: 0 8px 24px rgba(22,24,29,0.14), 0 2px 6px rgba(22,24,29,0.08);
  transform: translateY(-3px);
}
.ticket a { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.ticket-img {
  height: 280px; position: relative;
  background: #4a4a44; background-size: cover; background-position: center;
}
.ticket-id {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--white);
}
.ticket-award {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.05em; font-weight: 600;
  color: var(--gunmetal); background: var(--olive); padding: 2px 6px;
  mix-blend-mode: plus-lighter;
}
.ticket-body { padding: 16px 17px 12px; }
.ticket-name { font-size: 18px; font-weight: var(--w-head); }
.ticket-spec {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--clay); margin-top: 5px;
}
.ticket-desc { font-size: 11px; color: var(--ink-faint); margin-top: 9px; line-height: 1.55; }
.ticket-foot {
  margin-top: auto; border-top: 1px dashed var(--perf); padding: 16px 17px;
}
.ticket-foot .scan-label {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 8px;
}
.ticket-code img, .ticket-code svg { width: 100%; height: 30px; }
.ticket-codeid {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.15em;
  color: var(--clay); margin-top: 4px;
}

/* ============================================================
   PROCESS — work-forward, dry labels
   ============================================================ */
.process-intro {
  display: grid; grid-template-columns: 300px 1fr;
  padding: 30px var(--gut) 14px; align-items: start; gap: 16px;
}
.process-intro .pi-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--clay); line-height: 1.8;
}
.process-intro .pi-text { font-size: 17px; line-height: 1.5; max-width: 600px; }
.process-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px;
  padding: 18px var(--gut) 36px;
}
.process-cell {
  height: 200px; position: relative; background: #3f4a44;
  background-size: cover; background-position: center;
}
.process-cell .pc-label {
  position: absolute; bottom: 10px; left: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--olive);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* ============================================================
   FOOTER PANEL — Commissions + footer as ONE gunmetal block
   ============================================================ */
.footer-panel { background: var(--gunmetal); color: var(--ash); margin-top: 34px; }
/* Footer content centers to the same column as the rest of the page.
   Dark background stays full-width; only the inner rows get the gutter. */
.footer-panel .commissions,
.footer-panel .footer-main,
.footer-panel .footer-legal { padding-left: var(--gut); padding-right: var(--gut); }

.commissions {
  display: grid; grid-template-columns: repeat(12, 1fr);
  border-bottom: var(--hair-dark);
}
.commissions .c-index { grid-column: 1 / 4; padding: 30px 20px; border-right: var(--hair-dark); }
.commissions .c-index .c-num { color: var(--olive); }
.commissions .c-index .c-list {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--clay); line-height: 1.9;
}
.commissions .c-index .c-list .lead { color: var(--olive); }
.commissions .c-index .c-list .row { margin-top: 14px; }
.commissions .c-statement { grid-column: 4 / 9; padding: 30px 22px; border-right: var(--hair-dark); }
.commissions .c-statement .cs-main { font-size: 18px; font-weight: var(--w-body); line-height: 1.45; color: var(--ash); }
.commissions .c-statement .cs-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--on-dark-mut); margin-top: 16px; line-height: 1.7;
}
.commissions .c-enquiries {
  grid-column: 9 / 13; padding: 30px 22px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
}
.commissions .c-enquiries .ce-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--clay);
}
.commissions .c-enquiries .ce-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--his-blood);
  border-bottom: 1px solid var(--his-blood); width: fit-content; padding-bottom: 4px;
}
.commissions .c-enquiries .ce-link:hover { text-decoration: none; opacity: 0.9; }

.footer-main {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: 24px var(--gut); border-bottom: var(--hair-dark); gap: 16px;
}
.footer-main .fm-wordmark {
  font-family: var(--display); font-weight: var(--w-bold); font-size: 19px; color: var(--ash);
}
.footer-main .fm-social {
  text-align: center; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.footer-main .fm-social a { color: var(--his-blood); }
.footer-main .fm-social .dot { color: var(--clay); }
.footer-main .fm-email {
  text-align: right; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--his-blood);
}

.footer-legal {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: 13px var(--gut); gap: 16px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--clay);
}
.footer-legal .fl-mid { text-align: center; color: var(--olive); }
.footer-legal .fl-right { text-align: right; }

/* ============================================================
   SINGLE PROJECT
   ============================================================ */
.project-head {
  display: grid; grid-template-columns: 300px 1fr;
  padding: 42px var(--gut) 34px; align-items: start; gap: 42px;
}
.project-facts {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 2;
}
.project-facts .pf-num { font-size: 34px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; color: var(--his-blood); }
.project-facts dl { display: grid; grid-template-columns: auto 1fr; margin: 22px 0 0; gap: 0 12px; }
.project-facts dt { color: var(--clay); }
.project-facts dd { margin: 0; text-align: right; }
.project-facts .pf-award { margin-top: 18px; font-weight: 600; color: var(--gunmetal); }
.project-intro .pi-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--olive);
}
.project-intro .pi-title {
  font-size: clamp(44px, 6vw, 66px); font-weight: var(--w-head);
  letter-spacing: -0.03em; line-height: 0.92; margin: 6px 0 0;
}
.project-intro .pi-lede { font-size: 17px; line-height: 1.5; color: var(--ink-soft); max-width: 560px; margin-top: 18px; }
.project-hero { height: 380px; margin: 0 var(--gut); background: var(--gunmetal); background-size: cover; background-position: center; }

.block-row {
  display: grid; grid-template-columns: 300px 1fr;
  padding: 36px var(--gut); gap: 42px; border-bottom: var(--hair);
}
.block-row .br-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--clay);
}
.block-row .br-text { font-size: 16px; line-height: 1.6; max-width: 600px; }
.block-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 24px var(--gut); }
.block-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 24px var(--gut); }
.block-grid-3 .g-cell, .block-grid-2 .g-cell { height: 200px; background: #4f544b; background-size: cover; background-position: center; }
.block-quote { display: grid; grid-template-columns: 300px 1fr; padding: 34px var(--gut); border-bottom: var(--rule); align-items: center; gap: 16px; }
.block-quote .bq-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }
.block-quote .bq-text { font-size: 24px; font-weight: var(--w-head); line-height: 1.35; max-width: 620px; }
.block-quote .bq-attr { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clay); font-weight: 400; margin-top: 12px; }

.project-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); }
.project-nav .pn-prev { padding: 20px var(--gut); border-right: var(--hair); }
.project-nav .pn-next { padding: 20px var(--gut); text-align: right; }
.project-nav .pn-kicker { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }
.project-nav .pn-title { font-size: 19px; font-weight: var(--w-head); margin-top: 4px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-head { display: grid; grid-template-columns: 300px 1fr; padding: 44px var(--gut) 38px; align-items: start; gap: 16px; }
.about-head .ah-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }
.about-head .ah-title { font-size: clamp(34px, 4.5vw, 46px); font-weight: var(--w-head); letter-spacing: -0.025em; line-height: 1.02; max-width: 760px; }
.about-head .ah-lede { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 600px; margin-top: 24px; }
.about-portrait { height: 340px; margin: 0 var(--gut); background: var(--gunmetal); background-size: cover; background-position: center; }
.capabilities { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: var(--rule); }
.capabilities .cap { padding: 22px 18px; border-right: var(--hair); }
.capabilities .cap:last-child { border-right: none; }
.capabilities .cap-num { font-family: var(--mono); font-size: 24px; font-weight: 600; }
.capabilities .cap-name { font-size: 14px; font-weight: var(--w-head); margin-top: 8px; }
.capabilities .cap-tools { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clay); margin-top: 6px; line-height: 1.7; }
.recognition { display: grid; grid-template-columns: 300px 1fr; padding: 34px var(--gut); border-bottom: var(--rule); align-items: start; gap: 16px; }
.recognition .rec-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }
.recognition .rec-award { font-size: 20px; font-weight: var(--w-head); }
.recognition .rec-clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--ink-soft); }

/* ============================================================
   ARCHIVE / WORK INDEX  (reuses .catalog)
   ============================================================ */
.archive-head { padding: 44px var(--gut) 24px; }
.archive-head h1 { font-size: clamp(40px,5vw,60px); font-weight: var(--w-head); letter-spacing: -0.03em; margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding: 40px 0; }
  .hero-img { min-height: 260px; order: 2; }
  .catalog { grid-template-columns: 1fr 1fr; }
  .commissions { grid-template-columns: 1fr; }
  .commissions .c-index, .commissions .c-statement, .commissions .c-enquiries { grid-column: auto; border-right: none; border-bottom: var(--hair-dark); }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-intro, .project-head, .block-row, .block-quote, .about-head, .recognition { grid-template-columns: 1fr; }
  .capabilities { grid-template-columns: 1fr 1fr; }
  .masthead .m-mid { display: none; }
}
@media (max-width: 600px) {
  .catalog { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .capabilities { grid-template-columns: 1fr; }
  .footer-main, .footer-legal, .masthead { grid-template-columns: 1fr; text-align: left; gap: 10px; }
  .footer-main .fm-social, .footer-main .fm-email, .footer-legal .fl-mid, .footer-legal .fl-right { text-align: left; }
  .navbar { gap: 14px; padding-top: 56px; }
  .navbar .wordmark { top: 16px; }
  .project-nav { grid-template-columns: 1fr; }
  .project-nav .pn-prev { border-right: none; border-bottom: var(--hair); }
  .project-nav .pn-next { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}