/* ---------- Fonts (self-hosted) ---------- */
/* Space Grotesk, Inter and IBM Plex Mono, served from this origin rather than
   fonts.googleapis.com: one less render-blocking round trip, and no visitor IP
   handed to a third party. Licences sit next to the files in fonts/.
   Latin and Latin Extended only; other scripts fall back to the system stack. */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 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: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Ethicrawl.ai: shared styles ---------- */

:root {
  --paper: #F6F5F0;
  --paper-alt: #EEECE3;
  --ink: #16211F;
  --ink-soft: #52605C;
  --line: #DAD7CA;
  --accent: #1F6F5C;
  --accent-dark: #154A3F;
  --accent-tint: #E3EEE8;
  --brass: #8A6A3F;
  --radius: 10px;
  --max-width: 1160px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

a.text-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a.text-link:hover { color: var(--accent-dark); }

img, svg { display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 245, 240, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.wordmark img {
  height: 34px;
  width: auto;
  /* the artwork carries its own side padding; pull it back to the grid */
  margin-left: -6px;
}
.wordmark .tm {
  align-self: flex-start;
  margin-top: 4px;
  /* the artwork carries its own side padding; tuck the mark back against it */
  margin-left: -6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}
.nav-links a {
  font-size: 14.5px;
  text-decoration: none;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--accent-dark); }
.nav-links a.current { color: var(--ink); font-weight: 500; }
.nav-cta {
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 9px 18px;
  border-radius: 100px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--ink); color: var(--paper); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  display: inline-flex;
  align-items: center;
  /* A long eyebrow, such as a date plus several authors, breaks onto a
     second line rather than splitting into narrow side-by-side columns. */
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 80px;
}
.hero .wrap { max-width: 820px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.hero p.lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 20px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
  padding: 15px 24px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ---------- Credential strip ---------- */
.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
  padding: 20px 0;
}
.strip .wrap {
  display: flex;
  align-items: center;
  gap: 14px 28px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.strip .strip-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
}
.strip a { text-decoration: none; }
.strip a:hover { color: var(--accent-dark); }

/* ---------- Generic band ---------- */
.band { padding: 84px 0; border-top: 1px solid var(--line); }
.band-alt { background: var(--paper-alt); }

.section-head {
  max-width: 58ch;
  margin-bottom: 44px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.section-head p { color: var(--ink-soft); font-size: 16px; }

/* ---------- Pillars (4-up) ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pillar {
  background: var(--paper);
  padding: 30px 26px;
  border-right: 1px solid var(--line);
}
.pillar:last-child { border-right: none; }
.pillar svg { width: 26px; height: 26px; stroke: var(--accent); margin-bottom: 18px; }
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.pillar p { color: var(--ink-soft); font-size: 14.5px; }

/* ---------- Service cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 28px;
}
.band-alt .card { background: var(--paper); }
/* an odd last card fills the row rather than leaving a hole */
.card-grid .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; margin-bottom: 18px; }
.card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.card p { color: var(--ink-soft); font-size: 15px; margin-bottom: 14px; }
.card p:last-child { margin-bottom: 0; }
.card ul {
  list-style: none;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.card ul li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 6px;
}
.card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.card ul li:last-child { margin-bottom: 0; }

/* ---------- Track-record list ---------- */
.record-list { list-style: none; }
.record-list li {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.record-list li:last-child { border-bottom: 1px solid var(--line); }
.record-list .record-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.record-list .record-name small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-top: 6px;
}
.record-list .record-body { color: var(--ink-soft); font-size: 15.5px; }

/* ---------- Page header (sub-pages) ---------- */
.page-head { padding: 72px 0 56px; }
.page-head .wrap { max-width: 760px; }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.page-head p.lede {
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: 16px;
}
.page-head p.lede:last-child { margin-bottom: 0; }

/* The blog's mastheads are a tinted band, like .band-alt, so the lede reads as
   a standfirst rather than as the body's first paragraph. */
.page-head.head-alt {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
}

/* ---------- Content sections ---------- */
.section { padding: 28px 0; }
.section .wrap { max-width: 760px; }
.section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.section h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 24px 0 10px;
}
.section p { color: var(--ink-soft); margin-bottom: 14px; }
.section p:last-child { margin-bottom: 0; }
.section p code, .section li code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--accent-tint);
  color: var(--accent-dark);
  padding: 2px 6px;
  border-radius: 4px;
}

.code-block {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  padding: 22px 24px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 18px 0;
}
.code-block .muted { color: rgba(246, 245, 240, 0.5); }
.code-block .val { color: #6fbfa8; }

/* ---------- Check list ---------- */
.check-list { list-style: none; margin-top: 8px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-soft);
}
.check-list li:last-child { border-bottom: 1px solid var(--line); }
.check-mark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--accent-tint);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 2px;
}

/* Labelled variant: the label sits in a column of its own so every row lines up */
.check-list.labelled li {
  display: grid;
  grid-template-columns: 22px 200px 1fr;
  column-gap: 16px;
  align-items: start;
}
.check-list.labelled li strong {
  color: var(--ink);
  font-weight: 600;
}

/* Narrow screens: the label sits above its text rather than beside it */
@media (max-width: 700px) {
  .check-list.labelled li { grid-template-columns: 22px 1fr; row-gap: 4px; }
  .check-list.labelled li strong,
  .check-list.labelled li strong + span { grid-column: 2; }
}

/* ---------- Callout ---------- */
.callout {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.band-alt .callout { background: var(--paper); }
.callout strong { color: var(--ink); }

/* ---------- Blog ---------- */
/* The blog listing opts into the full nav width, so its entries line up with
   the wordmark on the left and the Get in touch button on the right. Narrower
   viewports are unaffected: .wrap is already fluid. */
.page-head .wrap.wrap-wide,
.section .wrap.wrap-wide { max-width: var(--max-width); }
.post-list { list-style: none; }
.post-list li {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
/* The tinted masthead already closes with a rule, so the first entry does without one. */
.post-list li:first-child { border-top: none; padding-top: 4px; }
.post-list li:last-child { border-bottom: 1px solid var(--line); }
.post-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 8px;
}
.post-meta-sep { opacity: 0.45; }
.post-list h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.post-list h3 a { text-decoration: none; }
.post-list h3 a:hover { color: var(--accent-dark); }
.post-list p { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 10px; }

/* ---------- Post body ---------- */
.post-body { color: var(--ink-soft); font-size: 16.5px; }
.post-body > * { margin-bottom: 18px; }
.post-body > *:last-child { margin-bottom: 0; }
.post-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 25px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 34px 0 14px;
}
.post-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin: 26px 0 10px;
}
.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.post-body a:hover { color: var(--accent-dark); }
.post-body b, .post-body strong { color: var(--ink); }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--accent-tint);
  color: var(--accent-dark);
  padding: 2px 6px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.post-body pre {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  padding: 22px 24px;
  border-radius: var(--radius);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.post-body pre code { background: none; color: inherit; padding: 0; }
.post-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--paper-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  font-size: 15.5px;
}
.post-body blockquote p { margin-bottom: 10px; }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body figure { margin: 26px 0; }
.post-body .table-wrap { overflow-x: auto; margin: 26px 0; }
/* benchmark post: headline figures */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0 14px;
}
.stat-card {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.stat-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.stat-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
}
.stat-val {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.stat-lab { font-size: 11.5px; color: var(--ink-soft); text-align: right; }
.post-body .stat-note { font-size: 13.5px; color: var(--ink-soft); }
.callout-accent {
  background: var(--accent-tint);
  border-color: var(--accent);
  border-left-width: 3px;
}
.post-benchmark h2 {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.post-body td.t-val strong { color: var(--accent-dark); }
.post-body tr.t-base td { color: var(--ink-soft); }
@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
}

.chart-fig { margin: 28px 0; }
.chart-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-fig .c-label { font-family: var(--font-body); font-size: 12.5px; fill: var(--ink); }
.chart-fig .c-value { font-family: var(--font-mono); font-size: 12.5px; fill: var(--ink-soft); }
.chart-fig .c-bar { fill: var(--accent); }
.chart-fig .c-axis { stroke: var(--line); stroke-width: 1; }
.chart-fig .c-ref { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 4 3; }
.chart-fig .c-ref-label { font-family: var(--font-body); font-size: 11.5px; fill: var(--ink-soft); }
.chart-fig figcaption {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 12px;
  padding-left: 194px;
}
@media (max-width: 640px) {
  .chart-fig figcaption { padding-left: 0; }
}

.photo-fig { margin: 28px 0; }
.photo-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.photo-fig figcaption {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 12px;
  text-align: center;
}
.photo-fig .photo-credit { font-size: 12px; }
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.post-body th, .post-body td {
  text-align: right;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.post-body th:first-child, .post-body td:first-child { text-align: left; white-space: normal; }
.post-body thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.post-body tbody td { color: var(--ink-soft); }
.post-body caption {
  caption-side: bottom;
  text-align: left;
  font-size: 13px;
  color: var(--ink-soft);
  padding-top: 12px;
}
.post-body img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-alt);
}
.post-origin {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.post-origin a { color: var(--accent-dark); }
.archive-note {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin-bottom: 32px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.archive-note p { margin-bottom: 10px; }
.archive-note p:last-child { margin-bottom: 0; }
.archive-note strong { color: var(--ink); }

/* ---------- Contact ---------- */
.contact { padding: 96px 0; border-top: 1px solid var(--line); }
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.contact-info h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.contact-info p {
  color: var(--ink-soft);
  font-size: 16px;
  margin-bottom: 18px;
  max-width: 42ch;
}
.contact-card {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px;
}
.contact-card .label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
a.contact-email {
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--accent-dark);
  text-decoration: none;
  word-break: break-all;
  border-bottom: 1px solid var(--accent);
}
a.contact-email:hover { color: var(--accent); }
.contact-card .note {
  color: var(--ink-soft);
  font-size: 15px;
  margin-top: 20px;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
}
.foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.trademark {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 100ch;
}
footer .foot-left {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
footer a.foot-link { text-decoration: none; color: var(--ink-soft); }
footer a.foot-link:hover { color: var(--accent-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar { border-bottom: 1px solid var(--line); }
  .pillar:nth-child(2n) { border-right: none; }
  .pillar:nth-child(n+3) { border-bottom: none; }
  .card-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .record-list li { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 760px) {
  .nav .wrap { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 12px 20px; }
  .nav-right { gap: 18px; width: 100%; justify-content: space-between; }
  .nav-links { gap: 18px; flex-wrap: wrap; }
  .band { padding: 60px 0; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .hero { padding: 56px 0 56px; }
  .page-head { padding: 48px 0 40px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--line); }
  .pillar:last-child { border-bottom: none; }
  .card { padding: 24px 22px; }
  .contact-card { padding: 24px 20px; }
  .code-block { padding: 18px; font-size: 13px; }
  .nav-cta { padding: 8px 14px; }
  .nav-links a { font-size: 14px; }
}