/* ==========================================================================
   Northlink Strategy
   Design system — "working paper": ink on paper, hairline rules, numbered
   sections, figures with captions. No drop shadows, no floating cards.
   Edit this one file and every page updates.
   ========================================================================== */

/* ----------------------------------------------------------------- Fonts
   Newsreader  → display and narrative prose (the voice)
   Archivo     → apparatus: nav, labels, data, forms (the machinery)
   Self-hosted: faster than Google Fonts, and no visitor data leaves the site.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;
  src:url("fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
}

:root{
  /* Paper and ink. The neutral is biased green so it sits with the accent
     instead of fighting it — a pure grey would read as unconsidered. */
  --paper:#f2f3ef;
  --paper-2:#fbfbf8;
  --ink:#11201b;
  --ink-2:#465650;
  --ink-3:#556660;
  --rule:#d3d9d2;
  --rule-2:#b9c2ba;
  --rule-hair:#e2e6e0;

  /* One accent, used sparingly: section numerals, figure marks, links. */
  --accent:#0b5344;
  --accent-2:#0e6b57;
  --accent-wash:#e4ede9;

  /* Inverted surfaces (contact, colophon) */
  --dark:#11201b;
  --dark-2:#1a2e28;
  --dark-rule:#2e443c;
  --dark-ink:#e4ebe6;
  --dark-ink-2:#a2b5ad;
  --dark-accent:#7fc9b0;

  --serif:"Newsreader",Georgia,"Times New Roman",Times,serif;
  --sans:"Archivo",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gutter:26px;
  --measure:1200px;
  --rhythm:clamp(58px,7vw,96px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);
  font-size:18px;line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.inverted :focus-visible,footer :focus-visible{outline-color:var(--dark-accent)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-family:var(--sans);font-size:13px;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

.container{width:min(var(--measure),calc(100% - (var(--gutter) * 2)));margin-inline:auto}

/* =========================================================== Typography */

h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;color:var(--ink)}

h1{
  font-size:clamp(42px,6.2vw,82px);
  line-height:1.02;letter-spacing:-.021em;
  font-weight:450;text-wrap:balance;
}
h2{
  font-size:clamp(30px,3.9vw,46px);
  line-height:1.08;letter-spacing:-.016em;
  font-weight:450;text-wrap:balance;max-width:20ch;
}
h3{font-size:24px;line-height:1.22;letter-spacing:-.012em;font-weight:500}
h4{font-size:19px;line-height:1.3;font-weight:500}

/* Narrative prose keeps the serif; functional text switches to the sans. */
.prose{font-size:19px;line-height:1.62;color:var(--ink-2);max-width:60ch}
.prose strong{color:var(--ink);font-weight:600}
.lede{
  font-size:clamp(20px,2.1vw,25px);line-height:1.46;color:var(--ink-2);
  max-width:46ch;margin:0;font-weight:350;
}
.sans{font-family:var(--sans)}

/* The apparatus: labels, numerals, metadata — always Archivo, always tracked. */
.label{
  font-family:var(--sans);font-size:11px;font-weight:650;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  display:block;
}
.label.quiet{color:var(--ink-3)}
.numeral{
  font-family:var(--sans);font-size:11px;font-weight:650;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* ================================================================= Rules
   Hairlines carry the structure. Two weights: hair (within a group) and
   rule (between groups). Nothing on this site casts a shadow. */
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.rule-hair{border:0;border-top:1px solid var(--rule-hair);margin:0}

/* ============================================================== Masthead */
.masthead{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:62px;
}
.wordmark{
  display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink);
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.wordmark .rule-mark{
  width:22px;height:1px;background:var(--accent);
  display:inline-block;transform:translateY(-4px);flex-shrink:0;
}
.nav{display:flex;align-items:center;gap:2px}
.nav a{
  font-family:var(--sans);font-size:12px;font-weight:550;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  padding:8px 11px;transition:color .15s ease;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent);font-weight:700}
.nav .cta{
  margin-left:10px;color:var(--paper);background:var(--ink);
  padding:9px 16px;font-weight:650;
}
.nav .cta:hover{background:var(--accent);color:var(--paper)}

.nav-toggle{
  display:none;width:40px;height:40px;padding:0;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule-2);cursor:pointer;color:var(--ink);
}
.nav-toggle svg{width:18px;height:18px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

/* ================================================================ Layout
   The journal grid: a narrow margin column for numerals and marginalia,
   a wide column for content. Collapses to one column on narrow screens. */
section{padding:var(--rhythm) 0}
.band{border-top:1px solid var(--rule)}
.band-paper2{background:var(--paper-2)}

.spread{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:0 clamp(24px,4vw,56px);
  align-items:start;
}
.margin-col{position:sticky;top:86px}
.margin-col .marginalia{
  font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-3);
  margin-top:14px;max-width:22ch;
}
.section-title{margin-bottom:26px}
.section-title .label{margin-bottom:16px}
.section-intro{
  font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink-2);
  max-width:62ch;margin:18px 0 0;
}

/* ================================================================== Hero */
.hero{padding:clamp(52px,7vw,92px) 0 0}
.hero h1{max-width:15ch}
.hero .lede{margin-top:clamp(26px,3vw,38px)}
.hero-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:end}
.abstract{border-top:2px solid var(--ink);padding-top:18px}
.abstract dt{
  font-family:var(--sans);font-size:10.5px;font-weight:650;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px;
}
.abstract dd{
  margin:0 0 20px;font-family:var(--sans);font-size:14.5px;line-height:1.55;color:var(--ink-2);
}
.abstract dd:last-child{margin-bottom:0}
.abstract dd b{color:var(--ink);font-weight:650;display:block;margin-bottom:3px}
.hero-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:34px}

/* Colophon strip — the journal's masthead data, set as a rule-bounded row */
.colophon{
  margin-top:clamp(44px,5vw,68px);
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.colophon div{padding:20px 26px 22px 0}
.colophon div + div{border-left:1px solid var(--rule-hair);padding-left:26px}
.colophon dt{
  font-family:var(--sans);font-size:10.5px;font-weight:650;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.colophon dd{margin:0;font-size:17px;line-height:1.4;color:var(--ink)}

/* ================================================================ Links */
.link-arrow{
  font-family:var(--sans);font-size:13px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  display:inline-flex;align-items:center;gap:9px;
  border-bottom:1px solid var(--ink);padding-bottom:4px;
  transition:color .16s ease,border-color .16s ease;
}
.link-arrow:hover{color:var(--accent);border-color:var(--accent)}
.link-arrow .arr{transition:transform .16s ease}
.link-arrow:hover .arr{transform:translateX(4px)}
.link-arrow.quiet{border-bottom-color:var(--rule-2);color:var(--ink-2)}
.link-arrow.quiet:hover{color:var(--accent);border-color:var(--accent)}

/* ============================================================= Entries
   Rule-separated list items replacing cards. Each entry carries a numeral
   in its own column — the number is real (order of a process, index of a
   service), never decoration. */
.entries{border-top:1px solid var(--rule)}
.entry{
  display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:0 20px;padding:26px 0;border-bottom:1px solid var(--rule-hair);
}
.entry:last-child{border-bottom:0}
.entry > .numeral{padding-top:6px}
.entry h3{margin:0 0 7px;font-size:22px}
.entry p{
  margin:0;font-family:var(--sans);font-size:15.5px;line-height:1.58;
  color:var(--ink-2);max-width:62ch;
}

/* Two-up practice entries on the homepage */
.practices{border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.practice{
  display:block;text-decoration:none;padding:36px 40px 38px 0;
  transition:background-color .2s ease;
}
.practice + .practice{border-left:1px solid var(--rule);padding-left:40px}
.practice:hover{background:var(--paper-2)}
.practice .label{margin-bottom:18px}
.practice h3{font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-.018em;margin:0 0 14px}
.practice > p{
  font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--ink-2);
  margin:0 0 22px;max-width:40ch;
}
.practice ul{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--rule-hair)}
.practice li{
  font-family:var(--sans);font-size:14px;color:var(--ink-2);
  padding:9px 0;border-bottom:1px solid var(--rule-hair);
}
.practice .link-arrow{pointer-events:none}

/* ================================================================ Steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.step{padding:24px 24px 4px 0}
.step + .step{border-left:1px solid var(--rule-hair);padding-left:24px}
.step .numeral{color:var(--accent)}
.step h3{margin:12px 0 8px;font-size:21px}
.step p{margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.56;color:var(--ink-2)}

/* ================================================================ Figure
   Case studies are presented as figures: numbered, ruled, captioned. */
.figure{margin:0;border-top:2px solid var(--ink);padding-top:22px}
.figure-head{
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  margin-bottom:20px;
}
.figure-head .fignum{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;
}
.figure-head .figsubject{
  font-family:var(--sans);font-size:11px;font-weight:550;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.figure-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4.5vw,60px)}
.figure-body h3{font-size:clamp(26px,3.2vw,36px);line-height:1.12;letter-spacing:-.016em;margin:0 0 16px}
.figure-body .prose{font-size:17.5px}

/* Data table — the stats, set as a proper table with rules and lined-up digits */
.data{width:100%;border-collapse:collapse;font-family:var(--sans)}
.data th{
  text-align:left;font-size:10.5px;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding:0 0 10px;
  border-bottom:1px solid var(--ink);
}
.data td{
  padding:14px 0;border-bottom:1px solid var(--rule-hair);vertical-align:baseline;
}
.data tr:last-child td{border-bottom:0}
.data .val{
  font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:20px;width:1%;
  font-weight:450;
}
.data .desc{font-size:14px;line-height:1.5;color:var(--ink-2)}

/* Pull quote — the single finding worth reading if you read nothing else */
.pullquote{
  margin:clamp(30px,4vw,44px) 0 0;padding:0 0 0 clamp(22px,3vw,34px);
  border-left:2px solid var(--accent);
}
.pullquote p{
  margin:0;font-family:var(--serif);font-style:italic;font-weight:350;
  font-size:clamp(22px,2.6vw,30px);line-height:1.32;letter-spacing:-.012em;
  color:var(--ink);max-width:30ch;
}
.pullquote cite{
  display:block;margin-top:16px;font-family:var(--sans);font-style:normal;
  font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}

.figure-notes{
  border-top:1px solid var(--rule);margin-top:clamp(30px,4vw,42px);padding-top:26px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,40px);
}
.figure-notes h4{
  font-family:var(--sans);font-size:10.5px;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px;
}
.figure-notes p{margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.56;color:var(--ink-2)}

/* Caption / provenance — italic, small, always attached to its figure */
.caption{
  margin:20px 0 0;font-family:var(--serif);font-style:italic;
  font-size:15px;line-height:1.5;color:var(--ink-3);max-width:76ch;
}
.caption::before{content:"† ";font-style:normal;color:var(--accent)}

/* ================================================================ Table
   Engagement formats: a genuine comparison table on desktop. */
.formats{width:100%;border-collapse:collapse;font-family:var(--sans);border-top:2px solid var(--ink)}
.formats th{text-align:left;vertical-align:top;padding:24px 24px 24px 0;border-bottom:1px solid var(--rule)}
.formats td{vertical-align:top;padding:24px 24px 24px 0;border-bottom:1px solid var(--rule)}
.formats tr:last-child th,.formats tr:last-child td{border-bottom:0}
.formats .fmt-name{width:26%}
.formats .fmt-name h3{font-family:var(--serif);font-size:23px;margin:0 0 6px;font-weight:500}
.formats .fmt-name .dur{
  font-size:12px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}
.formats .fmt-what{width:32%;font-size:15px;line-height:1.58;color:var(--ink-2)}
.formats .fmt-inc ul{margin:0;padding:0;list-style:none;columns:2;column-gap:26px}
.formats .fmt-inc li{
  font-size:14px;line-height:1.5;color:var(--ink-2);padding-left:16px;
  position:relative;margin-bottom:8px;break-inside:avoid;
}
.formats .fmt-inc li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--accent);
}
.formats tr.featured .fmt-name h3{color:var(--accent)}

/* ================================================================== FAQ */
.qa{border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{
  cursor:pointer;list-style:none;padding:22px 48px 22px 0;position:relative;
  font-family:var(--serif);font-size:21px;line-height:1.32;font-weight:450;
  letter-spacing:-.011em;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:6px;top:31px;width:13px;height:1px;background:var(--accent);
}
.qa summary::before{
  content:"";position:absolute;right:12px;top:25px;width:1px;height:13px;background:var(--accent);
  transition:opacity .18s ease;
}
.qa details[open] summary::before{opacity:0}
.qa summary:hover{color:var(--accent)}
.qa .answer{
  padding:0 0 26px;font-family:var(--sans);font-size:15.5px;line-height:1.62;
  color:var(--ink-2);max-width:66ch;
}
.qa .answer p{margin:0 0 13px}
.qa .answer p:last-child{margin-bottom:0}

/* ============================================================ Note block */
.note{
  margin-top:30px;padding:22px 0 0;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:76ch;
}
.note strong{color:var(--ink);font-weight:650}

/* ============================================================== Skills */
.skills{
  display:flex;flex-wrap:wrap;align-items:baseline;
  margin:28px 0 0;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:13.5px;line-height:1.9;color:var(--ink-2);
  min-width:0;
}
.skills span{white-space:nowrap;display:inline-flex;align-items:baseline}
.skills span + span::before{
  content:"·";margin:0 11px;color:var(--rule-2);
}

/* ============================================================== Emblem
   Stands in for the founder photograph. Deliberately typographic — it is a
   nameplate, not a fake portrait. */
.emblem{
  border:1px solid var(--rule);background:var(--paper-2);
  padding:32px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:340px;
}
.emblem .em-mark{font-family:var(--serif);font-size:60px;line-height:1;letter-spacing:-.04em;color:var(--accent)}
.emblem .em-rule{height:1px;background:var(--rule);margin:24px 0}
.emblem .em-name{font-family:var(--serif);font-size:26px;line-height:1.15;letter-spacing:-.018em}
.emblem .em-meta{
  font-family:var(--sans);font-size:10.5px;font-weight:650;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-top:12px;
}

/* ============================================================== Inverted */
.inverted{background:var(--dark);color:var(--dark-ink)}
.inverted h1,.inverted h2,.inverted h3,.inverted h4{color:var(--paper)}
.inverted .label{color:var(--dark-accent)}
.inverted .label.quiet,.inverted .numeral{color:var(--dark-ink-2)}
.inverted .section-intro,.inverted .prose{color:var(--dark-ink-2)}
.inverted .rule,.inverted .band{border-color:var(--dark-rule)}
.inverted .steps{border-top-color:var(--dark-rule)}
.inverted .step + .step{border-left-color:var(--dark-rule)}
.inverted .step p{color:var(--dark-ink-2)}
.inverted .step .numeral{color:var(--dark-accent)}
.inverted a{color:var(--paper)}

.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(34px,5vw,70px);align-items:start}
.contact-meta{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--dark-rule);
  font-family:var(--sans);font-size:14.5px;display:grid;gap:9px;color:var(--dark-ink-2);
}
.contact-meta a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.promise{
  margin-top:28px;padding:20px 0 0;border-top:1px solid var(--dark-rule);
  font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--dark-ink-2);max-width:46ch;
}
.promise strong{
  display:block;color:var(--dark-accent);font-size:10.5px;font-weight:650;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:9px;
}

/* ================================================================= Forms
   Underline fields, not boxes — closer to a printed form than a web app. */
form{font-family:var(--sans)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.field{display:flex;flex-direction:column;gap:5px;padding-bottom:22px}
.field.full{grid-column:1/-1}
label{
  font-size:10.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark-ink-2);
}
label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--dark-ink-2);opacity:.7}
input,textarea,select{
  width:100%;font:inherit;font-family:var(--sans);font-size:16px;color:var(--paper);
  background:transparent;border:0;border-bottom:1px solid var(--dark-rule);
  padding:9px 0;border-radius:0;
  transition:border-color .16s ease;
}
input::placeholder,textarea::placeholder{color:var(--dark-ink-2);opacity:.55}
input:hover,textarea:hover,select:hover{border-bottom-color:var(--dark-ink-2)}
input:focus,textarea:focus,select:focus{
  outline:none;border-bottom-color:var(--dark-accent);border-bottom-width:2px;padding-bottom:8px;
}
textarea{min-height:104px;resize:vertical;line-height:1.55}
select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237fc9b0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:11px;padding-right:26px;
}
select option{background:var(--dark);color:var(--paper)}
.submit{
  margin-top:10px;width:100%;cursor:pointer;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);border:1px solid var(--paper);
  padding:16px 22px;transition:background-color .18s ease,color .18s ease;
}
.submit:hover{background:var(--dark-accent);border-color:var(--dark-accent);color:var(--dark)}
.submit:disabled{opacity:.6;cursor:default}
.form-note{
  font-family:var(--sans);font-size:12px;color:var(--dark-ink-2);
  margin:14px 0 0;text-align:center;
}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Buttons on paper */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;padding:15px 26px;border:1px solid var(--ink);color:var(--ink);
  background:transparent;transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}

/* ============================================================== Colophon */
footer{
  background:var(--dark);color:var(--dark-ink-2);
  padding:52px 0 34px;font-family:var(--sans);font-size:13.5px;
}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:38px;padding-bottom:34px}
.foot-grid .wordmark{color:var(--paper)}
.foot-grid .wordmark .rule-mark{background:var(--dark-accent)}
.foot-grid p{margin:16px 0 0;max-width:40ch;color:var(--dark-ink-2);line-height:1.6}
.foot-grid h4{
  font-family:var(--sans);font-size:10.5px;font-weight:650;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dark-accent);margin:0 0 14px;
}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-grid a{color:var(--dark-ink-2);text-decoration:none}
.foot-grid a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.foot-rule{
  border-top:1px solid var(--dark-rule);padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.03em;color:var(--dark-ink-2);
}


/* ========================================================== Responsive */
@media (max-width:1040px){
  .spread{grid-template-columns:110px minmax(0,1fr)}
  .formats .fmt-inc ul{columns:1}
}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:34px;align-items:start}
  .spread{grid-template-columns:1fr;gap:0}
  .margin-col{position:static;margin-bottom:18px}
  .margin-col .marginalia{max-width:60ch;margin-top:10px}
  .figure-body{grid-template-columns:1fr;gap:30px}
  .figure-notes{grid-template-columns:1fr;gap:24px}
  .practices{grid-template-columns:1fr}
  .practice{padding:32px 0}
  .practice + .practice{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(odd){border-left:0;padding-left:0}
  .step:nth-child(n+3){border-top:1px solid var(--rule-hair);padding-top:24px}
  .contact-grid{grid-template-columns:1fr}
  .colophon{grid-template-columns:1fr}
  .colophon div{padding:16px 0}
  .colophon div + div{border-left:0;border-top:1px solid var(--rule-hair);padding-left:0}
  .foot-grid{grid-template-columns:1fr 1fr}

  /* Formats table becomes stacked blocks */
  .formats,.formats tbody,.formats tr,.formats th,.formats td{display:block;width:auto}
  .formats tr{border-bottom:1px solid var(--rule);padding:26px 0}
  .formats tr:last-child{border-bottom:0}
  .formats th,.formats td{border-bottom:0;padding:0 0 16px}
  .formats .fmt-name,.formats .fmt-what{width:auto}
}

@media (max-width:720px){
  :root{--gutter:20px}
  body{font-size:17px}
  .nav-toggle{display:inline-flex}
  .masthead-row{position:relative}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-2);border-bottom:1px solid var(--rule);
    padding:8px var(--gutter) 18px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;font-size:14px;border-bottom:1px solid var(--rule-hair)}
  .nav .cta{margin:14px 0 0;text-align:center;justify-content:center;border-bottom:0;padding:14px 18px}
  .steps{grid-template-columns:1fr}
  .step{border-left:0!important;padding-left:0!important;border-top:1px solid var(--rule-hair);padding-top:22px}
  .step:first-child{border-top:0}
  .fields{grid-template-columns:1fr;gap:0}
  .field.full{grid-column:auto}
  .entry{grid-template-columns:38px minmax(0,1fr);gap:0 14px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-rule{flex-direction:column;gap:8px}
  .data .val{font-size:22px}
}

/* ================================================================ Print */
@media print{
  .masthead,.nav-toggle,form,.skip-link,.hero-actions,.promise{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .inverted,footer{background:#fff!important;color:#000!important}
  .inverted h2,.inverted h3,footer .wordmark{color:#000!important}
  .inverted p,.inverted .section-intro,.foot-grid p{color:#333!important}
  section{padding:20px 0!important}
  .figure,.entry,.qa details{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}