/* PureView — site stylesheet
   Light-led: white and warm off-white grounds, near-black ink, brand bronze #8A6234 for
   accents and headings (5.4:1 on white). Dark sections (.on-dark) switch to copper #CF945F
   (7.4:1 on near-black). All text tokens meet WCAG AA on the ground they are used on. */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("/static/fonts/jost-latin-200-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("/static/fonts/jost-latin-ext-200-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/static/fonts/jost-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/static/fonts/jost-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/static/fonts/public-sans-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/static/fonts/public-sans-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/public-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/public-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --ground: #FFFFFF;
  --raise: #F6F3EE;     /* warm off-white sections */
  --line: #E7E1D8;
  --line-2: #CFC7BB;
  --ink: #161513;
  --ink-2: #3B3834;
  --heading: #111110;
  --muted: #5E5953;     /* 6.9:1 on white, 6.3:1 on raise */
  --faint: #6A645D;     /* 5.8:1 on white, 5.3:1 on raise */
  --bronze: #8A6234;    /* brand bronze — 5.4:1 on white, 4.9:1 on raise */
  --bronze-hi: #6E4C26;
  --accent-ink: #FFFFFF; /* text on a solid bronze button — 5.4:1 */
  --control: #948B80;   /* 3.4:1 — control boundaries */
  --placeholder: linear-gradient(160deg, #EFEAE3 0%, #E4DDD3 100%);

  --display: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4.4vw, 64px);
  --section: clamp(72px, 9vw, 112px);
  --maxw: 1440px;
}

/* Dark accent sections: hero, Jansen feature, enquiry band, footer. */
.on-dark {
  color-scheme: dark;
  --ground: #0F0E0D;
  --raise: #191816;
  --line: #2A2825;
  --line-2: #3A3733;
  --ink: #F2EFEA;
  --ink-2: #D3CDC5;
  --heading: #FFFFFF;
  --muted: #A79F95;
  --faint: #9C948A;
  --bronze: #CF945F;    /* copper — 7.4:1 on #0F0E0D */
  --bronze-hi: #E2B184;
  --accent-ink: #0F0E0D;
  --control: #706A62;
  --placeholder: linear-gradient(160deg, #24221F 0%, #191816 100%);
  color: var(--ink);
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bronze); text-decoration: none; }
a:hover { color: var(--bronze-hi); }
::selection { background: var(--bronze); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 1px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--bronze); color: var(--accent-ink); padding: 10px 16px;
  font-family: var(--display); font-weight: 500; letter-spacing: .06em;
}
.skip-link:focus { top: 12px; color: var(--accent-ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bronze); margin: 0;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--display); color: var(--heading); text-wrap: balance; }
h2 { color: var(--bronze); }
h1 { font-weight: 300; font-size: clamp(2.55rem, 5.4vw, 4.35rem); line-height: 1.04; letter-spacing: -.012em; }
h2 { font-weight: 300; font-size: clamp(1.85rem, 3.1vw, 2.65rem); line-height: 1.13; letter-spacing: -.008em; }
h3 { font-weight: 300; font-size: 1.32rem; line-height: 1.3; letter-spacing: .01em; }
h4 { font-weight: 300; font-size: 1.12rem; line-height: 1.35; }

p { margin: 0; }
.lede { font-size: clamp(1.06rem, 1.3vw, 1.2rem); color: var(--ink-2); max-width: 36em; }
.prose { color: var(--ink-2); max-width: 38em; }
.prose p + p { margin-top: 1.05em; }
.muted { color: var(--muted); }
.small { font-size: .9rem; line-height: 1.6; }
.figure { font-family: var(--mono); font-size: .78rem; color: var(--bronze); letter-spacing: .02em; }

/* ---------- buttons ---------- */

.btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 28px;
  font-family: var(--display); font-weight: 400; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  border: 1px solid var(--control); color: var(--ink);
  transition: border-color .18s, color .18s, background .18s;
}
.btn:hover { border-color: var(--bronze); color: var(--heading); }
.btn--solid { background: var(--bronze); border-color: var(--bronze); color: var(--accent-ink); font-weight: 500; }
.btn--solid:hover { background: var(--bronze-hi); border-color: var(--bronze-hi); color: var(--accent-ink); }

/* ---------- header ---------- */

.site-header { border-bottom: 1px solid var(--line); position: relative; z-index: 20; background: var(--ground); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 92px; }
.brand { display: block; flex: none; }
.brand img { width: 196px; height: auto; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nav a {
  font-family: var(--display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); padding: 8px 0; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--bronze); }
.nav a[aria-current="page"], .nav a.is-section { color: var(--heading); border-bottom-color: var(--bronze); }
.nav .nav-cta { border: 1px solid var(--control); padding: 10px 20px; color: var(--ink); }
.nav .nav-cta:hover { border-color: var(--bronze); }
.nav .nav-cta[aria-current="page"] { border-color: var(--bronze); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--control); color: var(--ink);
  font-family: var(--display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 11px 16px; min-height: 44px; cursor: pointer;
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--bronze); }
  .nav .nav-cta { margin-top: 18px; text-align: center; padding: 14px 20px; }
  .brand img { width: 168px; }
  .site-header .wrap { min-height: 76px; }
}

/* ---------- media + credits ---------- */

.media { margin: 0; position: relative; }
.media > picture { background: var(--raise); }
.media picture, .media img { width: 100%; }
.media picture { display: block; }
.media img { height: 100%; object-fit: cover; }
.media.is-missing {
  background: var(--placeholder);
  display: flex; align-items: center; justify-content: center;
}
.media.is-missing::before {
  content: attr(data-missing); font-family: var(--mono); font-size: .7rem;
  letter-spacing: .1em; color: var(--faint); padding: 24px; text-align: center;
}
.credit {
  font-family: var(--mono); font-size: .69rem; line-height: 1.5; letter-spacing: .02em;
  color: var(--faint); padding-top: 10px;
}
.credit--overlay {
  position: absolute; right: 0; bottom: 0; max-width: min(100%, 860px);
  padding: 14px var(--gutter) 16px 40px; text-align: right;
  color: rgba(236,239,241,.86);
  background: linear-gradient(90deg, rgba(12,15,18,0) 0%, rgba(12,15,18,.72) 34%);
}

.media--panel {
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), #2E2B27 calc(50% - .5px), #2E2B27 calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(160deg, #22201D 0%, #121110 100%);
  color: #CF945F; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.media--panel svg { width: 78%; max-width: 520px; height: auto; }
.panel-label {
  position: absolute; left: 22px; bottom: 18px; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: #A79F95;
}
.hero .media--panel svg { width: min(46%, 520px); margin-left: auto; margin-right: 8%; }
@media (max-width: 720px) { .hero .media--panel svg { width: 70%; margin: 0 auto; } }

/* ---------- hero ---------- */

.hero { position: relative; height: clamp(540px, 82vh, 780px); overflow: hidden; background: var(--raise); }
.hero .media { position: absolute; inset: 0; height: 100%; }
.hero .media picture { height: 100%; }
.hero .media img { object-position: 50% 72%; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,15,18,.9) 0%, rgba(12,15,18,.62) 44%, rgba(12,15,18,.12) 100%);
}
.hero__body {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(64px, 11vh, 108px);
}
.hero__inner { max-width: 720px; display: flex; flex-direction: column; gap: 24px; }
.hero__inner .lede { color: var(--ink-2); }
.hero h1 { color: #FFFFFF; }
.hero .credit--overlay { z-index: 3; }

.hero--system { height: clamp(460px, 66vh, 620px); }
.hero--system::after {
  background: linear-gradient(180deg, rgba(12,15,18,.5) 0%, rgba(12,15,18,.12) 38%, rgba(12,15,18,.93) 100%);
}
.hero--system h1 { font-size: clamp(3rem, 7vw, 5rem); line-height: 1; letter-spacing: .01em; }

.crumbs { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.crumbs a { color: var(--bronze); }
.crumbs a:hover { color: var(--bronze-hi); }
.crumbs span[aria-hidden] { color: var(--faint); padding: 0 .55em; }

@media (max-width: 720px) {
  .hero::after { background: linear-gradient(180deg, rgba(12,15,18,.35) 0%, rgba(12,15,18,.55) 40%, rgba(12,15,18,.94) 100%); }
  .credit--overlay { top: 0; bottom: auto; left: 0; right: 0; max-width: none; text-align: left; padding: 10px var(--gutter) 28px; color: rgba(236,239,241,.9); background: linear-gradient(180deg, rgba(12,15,18,.78) 0%, rgba(12,15,18,0) 100%); }
  .hero { height: auto; min-height: 0; overflow: visible; }
  .hero .media { position: relative; height: 62vh; min-height: 340px; }
  .hero::after { inset: 0 0 auto 0; height: 62vh; min-height: 340px; }
  .hero__body { position: relative; bottom: auto; margin-top: -150px; }
  .hero--system .media, .hero--system::after { height: 54vh; }
}

/* ---------- sections ---------- */

.section { padding-top: var(--section); padding-bottom: var(--section); }
.section + .section { border-top: 1px solid var(--line); }
.section--raise { background: var(--raise); border-top: 1px solid var(--line); }
.section--dark { background: var(--ground); }
.section--dark + .section, .section + .section--dark { border-top: 0; }
.section--tight { padding-top: calc(var(--section) * .72); padding-bottom: calc(var(--section) * .72); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  margin-bottom: clamp(36px, 4vw, 52px);
}
.section-head__main { display: flex; flex-direction: column; gap: 18px; max-width: 680px; }
.section-head__aside { max-width: 360px; color: var(--muted); font-size: .96rem; line-height: 1.7; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(40px, 6vw, 92px); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- system cards ---------- */

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.card { display: flex; flex-direction: column; color: inherit; }
.card .media picture { aspect-ratio: 4 / 5; overflow: hidden; }
.card .media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
a.card:hover .media img { transform: scale(1.025); }
.card__body { border-top: 1px solid var(--bronze); padding: 22px 2px 0; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.card__body h3 { font-size: 1.4rem; }
.card__body p { color: var(--muted); font-size: .96rem; line-height: 1.6; }
.card .credit { padding-top: 10px; }
a.card:hover h3 { color: var(--bronze-hi); }

.card--project .media picture { aspect-ratio: 4 / 3; }
.card--project .card__body { border-top-color: var(--line-2); }

/* ---------- decisions (track / glazing) ---------- */

.decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
@media (max-width: 880px) { .decisions { grid-template-columns: minmax(0, 1fr); } }
.decision { border-top: 1px solid var(--line-2); padding-top: 24px; }
.decision__label { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.decision__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.decision__pair h4 { font-size: 1.18rem; margin-bottom: 7px; }
.decision__pair p { color: var(--muted); font-size: .93rem; line-height: 1.6; }
@media (max-width: 520px) { .decision__pair { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.source-note { font-family: var(--mono); font-size: .7rem; color: var(--faint); margin-top: 26px; line-height: 1.6; }

/* ---------- steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); counter-increment: step; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: .72rem; color: var(--bronze); padding-top: 5px; }
.steps h4 { font-family: var(--body); font-weight: 400; font-size: 1.02rem; color: var(--ink); margin-bottom: 4px; }
.steps p { color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* ---------- fit (specify when / look elsewhere) ---------- */

.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 880px) { .fit { grid-template-columns: minmax(0, 1fr); } }
.fit__col { border: 1px solid var(--line); border-top: 2px solid var(--bronze); padding: clamp(26px, 3vw, 38px); }
.fit__col--else { border-top-color: var(--line-2); }
.fit__col h3 { margin-bottom: 20px; }
.fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fit li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--ink-2); font-size: 1rem; line-height: 1.62; }
.fit li::before { content: "—"; color: var(--bronze); }
.fit__col--else li::before { color: var(--faint); }

/* ---------- spec table ---------- */

.spec-wrap { overflow-x: auto; border: 1px solid var(--line); }
.spec { width: 100%; border-collapse: collapse; min-width: 560px; }
.spec caption { text-align: left; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 16px 22px; border-top: 1px solid var(--line); }
.spec thead th { border-top: 0; background: var(--raise); font-family: var(--mono); font-weight: 400; font-size: .69rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.spec tbody th { font-weight: 400; color: var(--ink); width: 30%; font-size: .98rem; }
.spec td { color: var(--ink-2); font-size: .96rem; }
.spec td.v { font-family: var(--mono); font-size: .84rem; color: var(--bronze); width: 32%; }
.spec td.n { color: var(--muted); font-size: .9rem; }

/* ---------- options list ---------- */

.options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
@media (max-width: 1100px) { .options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .options { grid-template-columns: minmax(0, 1fr); } }
.option { border-top: 1px solid var(--line-2); padding: 20px 2px 26px; }
.option h4 { margin-bottom: 7px; }
.option p { color: var(--muted); font-size: .93rem; line-height: 1.6; }

/* ---------- gallery ---------- */

.gallery { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; }
.gallery__side { display: grid; gap: 22px; align-content: start; }
.gallery .media picture { overflow: hidden; aspect-ratio: 3 / 2; }
@media (max-width: 880px) { .gallery { grid-template-columns: minmax(0, 1fr); } .gallery__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gallery__side { grid-template-columns: minmax(0, 1fr); } }

/* ---------- feature (jansen) ---------- */

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 84px); align-items: center; }
@media (max-width: 880px) { .feature { grid-template-columns: minmax(0, 1fr); } }
.feature__mark {
  aspect-ratio: 5 / 4; border: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), #3A3631 calc(50% - .5px), #3A3631 calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), #3A3631 calc(50% - .5px), #3A3631 calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(160deg, #2A2724 0%, #1A1816 100%);
  display: flex; align-items: flex-end; padding: 26px;
}
.feature__mark span { font-family: var(--display); font-weight: 200; font-size: clamp(2.2rem, 4.4vw, 3.4rem); color: #FFFFFF; line-height: 1; letter-spacing: .02em; }
.figures { display: flex; flex-wrap: wrap; gap: 26px 44px; padding-top: 24px; border-top: 1px solid var(--line); margin-top: 6px; }
.figures div { min-width: 110px; }
.figures .figure { display: block; margin-bottom: 6px; font-size: .82rem; }
.figures span:not(.figure) { font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* ---------- band (specify) ---------- */

.band { background: var(--raise); }
.band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 56px; flex-wrap: wrap; padding-top: clamp(64px, 7vw, 92px); padding-bottom: clamp(64px, 7vw, 92px); }
.band__main { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.band__side { display: flex; flex-direction: column; gap: 22px; min-width: min(100%, 300px); }
.downloads { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.downloads__label { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.downloads a { font-size: 1rem; display: inline-flex; gap: 8px; align-items: baseline; }
.downloads a small { color: var(--faint); font-size: .84rem; }

/* ---------- note ---------- */

.note {
  font-size: .95rem; line-height: 1.7; color: var(--muted);
  border-left: 1px solid var(--bronze); padding-left: 20px; max-width: 420px;
}

/* ---------- contact ---------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-lines { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.contact-line { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.contact-line .k { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.contact-line .v { font-family: var(--display); font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.55rem); color: var(--heading); }
.contact-line .v a { color: var(--heading); border-bottom: 1px solid var(--bronze); }
.contact-line .v a:hover { color: var(--bronze-hi); }
@media (max-width: 520px) { .contact-line { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--ink-2); line-height: 1.6; }
.checklist li::before { content: "—"; color: var(--bronze); }

/* ---------- credits page ---------- */

.credits-table td, .credits-table th { font-size: .92rem; }
.credits-table td.file { font-family: var(--mono); font-size: .76rem; color: var(--muted); word-break: break-all; }

/* ---------- legal ---------- */

.legal { max-width: 46em; color: var(--ink-2); }
.legal h2 { font-size: 1.5rem; margin: 2.2em 0 .7em; }
.legal p, .legal li { line-height: 1.75; }
.legal p + p { margin-top: .9em; }
.legal ul { padding-left: 1.2em; }

/* ---------- footer ---------- */

.site-footer { background: var(--ground); padding-top: 64px; padding-bottom: 46px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-brand img { width: 184px; }
.footer-brand p { color: var(--muted); font-size: .92rem; margin-top: 18px; max-width: 280px; line-height: 1.65; }
.footer-col h2 { font-family: var(--mono); font-weight: 400; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--muted); font-size: .93rem; }
.footer-col a:hover { color: var(--heading); }
.footer-col .accent { color: var(--bronze); }
.footer-base {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--faint);
}
.footer-base nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-base a { color: var(--faint); }
.footer-base a:hover { color: var(--heading); }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: flex; align-items: center; }

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

@media print {
  body { background: #fff; color: #000; }
  .on-dark { background: #fff !important; color: #000; }
  .site-header, .site-footer, .band, .nav-toggle { display: none; }
  h1, h2, h3, h4 { color: #000; }
}