:root {
  --ink: #10120f;
  --paper: #f4f1e8;
  --paper-deep: #e7e2d6;
  --moss: #23382f;
  --line: rgba(16, 18, 15, 0.24);
  --muted: #62655e;
  --max: 78rem;
  --reading: 48rem;
  --sans: "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
}
a { color: inherit; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--moss); outline-offset: 4px; }
.skip-link { position: absolute; z-index: 1000; top: 0.5rem; left: 0.5rem; padding: 0.7rem 0.9rem; background: var(--paper); color: var(--ink); font-weight: 700; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
img { max-width: 100%; }
.shell { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }

.preview-boundary {
  padding: 0.55rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.site-header {
  width: min(calc(100% - 2rem), var(--max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 6.25rem;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-decoration: none;
}
.brand img { display: block; width: 2.15rem; height: 2.15rem; }
.site-header nav ul,
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.7rem 1.35rem; margin: 0; padding: 0; list-style: none; }
.site-header nav a,
.site-footer nav a { font-size: 0.9rem; font-weight: 650; text-decoration: none; }
.site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

.eyebrow {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.hero { padding: clamp(5rem, 12vw, 10.5rem) 0 clamp(4.5rem, 9vw, 8rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.55fr); gap: clamp(3rem, 8vw, 8rem); align-items: end; }
.hero h1,
.page-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.4rem, 9vw, 8.7rem);
  font-weight: 620;
  letter-spacing: -0.06em;
  line-height: 0.9;
}
.hero-note { padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.hero-note p { margin: 0 0 1.5rem; font-size: clamp(1.08rem, 2vw, 1.38rem); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.button {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 0.78rem 1rem;
  font-weight: 700;
  text-decoration: none;
}
.button.primary { background: var(--ink); color: var(--paper); }

.statement { padding: clamp(3rem, 7vw, 6.5rem) 0; background: var(--moss); color: var(--paper); }
.statement-grid,
.section-head { display: grid; grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1.45fr); gap: clamp(2rem, 8vw, 8rem); }
.statement h2,
.section-head h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.15rem, 5vw, 4.8rem);
  font-weight: 580;
  letter-spacing: -0.045em;
  line-height: 1;
}
.statement p { max-width: 50rem; margin: 0; font-size: clamp(1.1rem, 2vw, 1.45rem); }

.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.property {
  min-height: 28rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.2);
}
.property:nth-child(2) { background: var(--paper-deep); }
.property-index { font: 700 0.72rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; }
.property h3 { max-width: 10ch; margin: 4rem 0 1rem; font-size: clamp(2.5rem, 5vw, 5.2rem); font-weight: 600; letter-spacing: -0.055em; line-height: 0.92; }
.property p { max-width: 32rem; font-size: 1.06rem; }
.property a { font-weight: 750; }

.capability { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.7fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.capability h2 { max-width: 18ch; margin: 0; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.05em; }
.capability-copy { padding-top: 0.5rem; border-top: 1px solid var(--ink); }
.capability-copy p { margin-top: 0; font-size: 1.08rem; }

.page-hero { padding: clamp(4rem, 10vw, 8rem) 0; border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 14ch; font-size: clamp(3rem, 7vw, 6.7rem); }
.lede { max-width: 48rem; margin: 2rem 0 0; color: #292b27; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.prose { width: min(calc(100% - 2rem), var(--reading)); margin-inline: auto; padding: clamp(3.5rem, 8vw, 7rem) 0; }
.prose h2 { margin: 2.8rem 0 0.8rem; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -0.035em; line-height: 1.05; }
.prose p { max-width: 68ch; }
.contact-address { margin: 1.5rem 0; font-size: clamp(1.7rem, 4vw, 3.3rem); font-weight: 620; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.note { margin: 2rem 0; padding: 1.25rem; border-left: 4px solid var(--moss); background: var(--paper-deep); }

.signup-section { background: var(--paper-deep); }
.signup-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 1.2fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.signup-grid h2 { max-width: 16ch; margin: 0 0 1rem; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -0.045em; }
.signup { position: relative; }
.signup label { display: block; margin-bottom: 0.55rem; font-weight: 700; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; }
.signup input[type="email"] { width: 100%; min-height: 3rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 0.75rem 0.85rem; font: inherit; }
.signup button { min-height: 3rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
.signup input:focus-visible,
.signup button:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }
.honeypot { position: absolute; left: -5000px; }
.signup-status,
.signup-consent { max-width: 52rem; margin: 0.8rem 0 0; font-size: 0.86rem; }
.signup-consent { color: var(--muted); }

.site-footer {
  width: min(calc(100% - 2rem), var(--max));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--line);
}
.site-footer p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.86rem; }

@media (max-width: 58rem) {
  .hero-grid,
  .statement-grid,
  .section-head,
  .capability { grid-template-columns: 1fr; }
  .hero-note { max-width: 32rem; }
  .site-header { align-items: flex-start; flex-direction: column; padding: 1.25rem 0; }
  .signup-grid { grid-template-columns: 1fr; }
}
@media (max-width: 42rem) {
  .property-grid { grid-template-columns: 1fr; }
  .property { min-height: 23rem; }
  .site-footer { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .hero h1,
  .page-hero h1 { letter-spacing: -0.045em; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Presentation zones (content/*.json): media, banner, insight media. Tokens from :root above. */
.zn-media { margin: 0; overflow: hidden; border: 1px solid var(--ink); background: var(--paper-deep); aspect-ratio: var(--zn-ratio, 4 / 3); }
.zn-media[data-tone="ink"] { background: var(--ink); }
.zn-media[data-slot="entry"] { --zn-ratio: 4 / 3; }
.zn-media[data-slot="banner"] { --zn-ratio: 12 / 5; }
.zn-media[data-slot="editorial"] { --zn-ratio: 3 / 2; }
.zn-media img { display: block; width: 100%; height: 100%; object-fit: var(--zn-fit, contain); object-position: var(--zn-focal, 50% 50%); }
.zn-media[data-fit="cover"] { --zn-fit: cover; }
.property > .zn-media { margin: 0 0 1.4rem; }
.cards > article > .zn-media { margin: 0 0 1.2rem; }
.zn-insight-media { margin: 2rem 0; }
.zn-banner { margin: 1.75rem auto 2.25rem; border: 1px solid var(--ink); overflow: hidden; }
.cards > article + article { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.zn-banner .zn-media { border: 0; border-bottom: 1px solid var(--ink); }
.zn-banner-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1.75rem; align-items: center; padding: 1.5rem 1.75rem; }
.zn-banner[data-variant="notice"] { background: var(--moss); color: var(--paper); }
.zn-banner[data-variant="notice"] .button { border-color: var(--paper); background: transparent; color: var(--paper); }
.zn-banner[data-variant="notice"] a:focus-visible { outline-color: var(--paper); }
.zn-kicker { grid-column: 1 / -1; margin: 0; font: 700 0.72rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.zn-banner-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; letter-spacing: -0.035em; }
.zn-banner-line { grid-column: 1; margin: 0; }
.zn-banner-cta { grid-column: 2; grid-row: 2 / 4; margin: 0; align-self: center; }
.zn-banner .button { white-space: nowrap; }
@media (max-width: 42rem) {
  .zn-banner-copy { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .zn-banner-cta { grid-column: 1; grid-row: auto; }
}
.zn-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The Selected work label measured 2.11:1 on the moss band; corrected. */
.statement .eyebrow { color: #cdd5cd; }

/* BRAND-REF-01 treatment: CC-3a / Oxidized Bronze. A charter and a ledger: warm paper, bronze rules, numbered rows, a deep-bronze foundation.
   The palette is retargeted through the existing tokens, so every route and content zone inherits it. Marks are provisional (stand-in outlines). */
:root{--moss:#4b3d24;--bronze:#76603a;--bronze-deep:#4b3d24;--bronze-tint:#e8dfcc;--on-bronze:#fff;--line:rgba(16,18,15,.3);--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
.site-header{border-bottom:3px solid var(--bronze);min-height:5.5rem}
.brand{gap:0}
.brand .mark-signature{display:block;width:auto;height:1.5rem;color:var(--ink)}
.site-header nav a{letter-spacing:.01em}
.site-header nav a:hover{color:var(--bronze)}
.eyebrow{color:var(--bronze);font-family:var(--mono);font-weight:700;letter-spacing:.14em}

/* charter hero */
.hero{padding:clamp(3.5rem,8vw,7rem) 0 clamp(4rem,8vw,7rem)}
.hero h1{max-width:11.5ch;font-weight:700;letter-spacing:-.058em}
.hero h1 .accent{color:var(--bronze)}
.hero-note{padding-top:1.6rem;border-top:3px solid var(--bronze)}
.hero-note .mark-seal-hero{display:block;width:6.5rem;height:auto;margin:0 0 1.5rem;color:var(--bronze)}
.button{border-radius:0;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.button:hover{background:var(--bronze-tint)}
.button.primary,.signup button{border-color:var(--bronze);background:var(--bronze);color:var(--on-bronze)}
.button.primary:hover,.signup button:hover{border-color:var(--bronze-deep);background:var(--bronze-deep)}

/* foundation band: ledger-ruled deep bronze */
.statement{background-color:var(--bronze-deep);background-image:repeating-linear-gradient(to bottom,transparent 0 3.2rem,rgba(232,223,204,.09) 3.2rem calc(3.2rem + 1px))}
.statement .eyebrow{color:var(--bronze-tint);letter-spacing:.09em}

/* the work as a ledger: numbered rows, not cards */
.property-grid{display:block;margin-top:0;border-top:3px solid var(--bronze);counter-reset:ledger}
.property{counter-increment:ledger;position:relative;min-height:0;display:grid;grid-template-columns:4.5rem minmax(0,1fr) 13.5rem;align-items:center;gap:1rem 2rem;padding:clamp(1.6rem,3.2vw,2.6rem) .75rem;border:0;border-bottom:1px solid var(--ink);background:none;transition:background-color .18s ease}
.property:nth-child(2){background:none}
.property::before{content:counter(ledger,decimal-leading-zero);align-self:start;padding-top:.45rem;color:var(--bronze);font:700 .82rem var(--mono);letter-spacing:.1em}
.property>div{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(1.5rem,4vw,3.5rem);align-items:baseline}
.property-index{grid-column:1/-1;margin-bottom:.4rem;color:var(--bronze)}
.property h3{max-width:none;margin:0;font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:.96;letter-spacing:-.05em}
.property>div>p{max-width:30rem;margin:0}
.property>p{margin:0;text-align:right}
.property>p a{display:inline-block;white-space:nowrap;font-size:.9rem}
.property a{text-decoration:none;font-weight:750}
.property a::after{content:"";position:absolute;inset:0}
.property:hover{background:var(--bronze-tint)}
.property:hover a{text-decoration:underline;text-decoration-thickness:2px}
.property:has(.zn-media){grid-template-columns:4.5rem minmax(7rem,11rem) minmax(0,1fr) 13.5rem}
.property>.zn-media{margin:0}

/* sections: numbered like a charter, rules in bronze */
.home{counter-reset:sec}
.home main>.statement .eyebrow::before,.home main>.section .eyebrow::before,.home .signup-section .eyebrow::before{counter-increment:sec;content:"\00a7\00a0" counter(sec) "  /  "}
.capability-copy{border-top:3px solid var(--bronze)}
.capability h2,.section-head h2{color:var(--bronze-deep)}
.section + .section{border-top:1px solid var(--line)}
.signup-section{background:var(--bronze-tint)}
.prose-actions{margin:1.5rem 0}
.signup input[type="email"]{border-radius:0}
.signup-consent{color:#4a4d46}
.page-hero{border-bottom:3px solid var(--bronze)}
.page-hero h1{font-weight:700;line-height:1.08}
a:focus-visible,.signup input:focus-visible,.signup button:focus-visible{outline-color:var(--bronze-deep)}

/* deep-bronze footer with the seal */
.site-footer,.site-footer.shell{width:auto;max-width:none;margin-inline:0;padding-inline:max(1rem,calc((100% - var(--max)) / 2));align-items:center;border-top:0;background:var(--bronze-deep);color:var(--paper)}
.site-footer .legal{display:flex;align-items:center;gap:1.1rem}
.site-footer .seal .mark-seal{display:block;width:auto;height:4.25rem;color:var(--paper)}
.site-footer a{color:var(--paper)}
.site-footer a:focus-visible{outline-color:var(--paper)}
.site-footer nav a{display:inline-flex;align-items:center;min-height:24px}
.site-footer p{color:var(--bronze-tint)}
.zn-banner[data-variant="notice"] .button{border-color:var(--paper);background:transparent;color:var(--paper)}
@media (max-width:58rem){.property{grid-template-columns:3rem minmax(0,1fr)}.property>p{grid-column:2;text-align:left}.property>div{grid-template-columns:1fr;row-gap:.6rem}.property:has(.zn-media){grid-template-columns:3rem minmax(0,1fr)}.property>.zn-media{grid-column:2}.hero-note .mark-seal-hero{width:5rem}}
@media (max-width:42rem){.property{padding-inline:0}.property h3{font-size:clamp(2.2rem,11vw,3rem)}}
