/* ---------------------------------------------------------------------------
   Lanefolio — the only stylesheet.
   Tokens are the brand page (lanefolio_brand_page.pdf, Brand Basics v1.4):
   Ink #12151A · Brass #8F7A3E · Paper #F6F7F9 · Rule #DFE3E9.
   Brass is the only accent and is never used for text — it is a fill and a
   rule. Ledger blue #2F4D8A is interface-only and does not appear here.

   Type: Archivo Bold, all caps, tracked — wordmark and small labels only.
   Instrument Sans — every heading and all running text.
   IBM Plex Mono — every figure, tabular numerals on.

   Fonts are self-hosted in fonts/. There is no third-party request in this
   file and there must never be one: the privacy notice states it as fact.
   --------------------------------------------------------------------------- */

/* --------------------------------------------------------------- fonts */

@font-face{font-family:"Archivo";src:url("fonts/Archivo-400_700-latin.woff2") format("woff2");font-weight:400 700;font-stretch:100%;font-style:normal;font-display:swap;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:"Instrument Sans";src:url("fonts/InstrumentSans-400_600-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;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:"Instrument Sans";src:url("fonts/InstrumentSans-400_600-latin-ext.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------- tokens */

:root{
  --ink:#12151A;
  --brass:#8F7A3E;
  --paper:#F6F7F9;
  --white:#FFFFFF;
  --rule:#DFE3E9;
  --rule-soft:#E9ECF0;
  --border-input:#CBD2DA;

  --muted:#5C636D;
  --faint:#656C76;

  --on-ink:#F6F7F9;
  --on-ink-muted:#AEB6C0;
  --on-ink-faint:#8A929C;
  --on-ink-dim:#7F8892;
  --ink-rule:rgba(246,247,249,.12);
  --ink-rule-2:rgba(246,247,249,.16);
  --ink-border:rgba(246,247,249,.28);
  --brass-tint:rgba(143,122,62,.10);

  --f-brand:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"Instrument Sans","Segoe UI",Helvetica,Arial,sans-serif;

  --page:1088px;
  --measure:34rem;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --sect:clamp(4rem,8vw,7rem);
  --radius:3px;
}

/* --------------------------------------------------------------- base */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  font-weight:400;
  line-height:1.62;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
::selection{background:rgba(143,122,62,.22);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

a{color:var(--ink);text-decoration-line:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
a.plain,a.plain:hover{text-decoration:none}
strong{font-weight:600}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--brass);color:var(--ink);padding:.5rem 1rem;border-radius:var(--radius)}

/* Any figure the reader might compare: rupees, litres, per cents, phone. */
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* --------------------------------------------------------------- layout */

.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--pad)}
.sect{padding-block:var(--sect)}
.sect--ruled{border-top:1px solid var(--rule)}
.sect--white{background:var(--white)}
.sect--ink{background:var(--ink);color:var(--on-ink)}

h1,h2,h3{font-family:var(--f-body);font-weight:600;letter-spacing:-.026em;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,1.4rem + 2.2vw,3rem);letter-spacing:-.028em;line-height:1.05}
.h1--hero{font-size:clamp(2.375rem,1.2rem + 4.4vw,4.5rem);letter-spacing:-.03em;line-height:1.02;max-width:20ch}
h2{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.625rem);line-height:1.1}
h3{font-size:1.0625rem;letter-spacing:-.012em}
p{margin:0}

/* Archivo, all caps, tracked. Wordmark and small labels only. */
.eyebrow{font-family:var(--f-brand);font-weight:700;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 1.25rem}
.eyebrow--brass{color:#C9D0D8}
.label{font-family:var(--f-brand);font-weight:700;font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

.lede{font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);line-height:1.5;color:var(--muted);max-width:var(--measure)}
.lede--sm{font-size:1.0625rem;line-height:1.55}
.body{font-size:.9375rem;line-height:1.62;color:var(--muted)}
.stack>*+*{margin-top:1rem}

.grid{display:grid}
.grid-2{grid-template-columns:1fr 1fr;column-gap:clamp(1.75rem,4vw,3.5rem);row-gap:clamp(1.75rem,3vw,2.5rem)}
.grid--loose{row-gap:clamp(2rem,3.5vw,2.75rem)}
.grid--top{margin-top:clamp(2.5rem,5vw,4rem)}

/* --------------------------------------------------------------- rows */

/* The capability and failure lists are set as an index, the way a
   specification's contents page is set: a number, a name, and what it holds.
   Ruled rows across the measure, not cards in a grid. */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;column-gap:clamp(1.5rem,4vw,3.5rem);row-gap:.5rem;padding:1.75rem 0;border-bottom:1px solid var(--rule)}
.row-head{display:flex;flex-direction:column;gap:.5rem}
.row h3{margin:0}
.row p{font-size:.9375rem;line-height:1.62;color:var(--muted);max-width:38rem;margin:0}
.row--prob{grid-template-columns:17rem 1fr}
.row--reg{grid-template-columns:16rem 1fr;padding:1.25rem 0}
.row--reg .row-head{flex-direction:row;align-items:baseline;gap:1rem}

/* --------------------------------------------------------------- split */

.split{display:grid;grid-template-columns:1fr 1.1fr;column-gap:clamp(2rem,5vw,4.5rem);row-gap:2rem;align-items:start}
.split--lead{grid-template-columns:1fr .82fr}
.h2--lead{font-size:clamp(1.875rem,1.2rem + 2.2vw,3rem);letter-spacing:-.028em;line-height:1.06;margin-bottom:1.5rem;max-width:22ch}
.pairs{display:flex;flex-direction:column}
.pair{border-top:1px solid var(--rule);padding:1.125rem 0}
.pair:last-child{border-bottom:1px solid var(--rule)}
.pair h3{margin:0 0 .375rem;font-size:.9375rem}
.pair p{font-size:.875rem;line-height:1.6;color:var(--muted);margin:0}

/* The three arguments. Brass carries the rule; the figure sits beside the
   prose rather than under it, so it has room to be read. */
.claim2{border-top:2px solid var(--brass);padding-top:1.5rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.claim2 .n{display:block;font-size:.8125rem;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--faint);margin-bottom:.875rem}
.claim2 h3{font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem);letter-spacing:-.02em;line-height:1.18;margin:0 0 1rem;max-width:22ch}
.claim2 p{font-size:.9375rem;line-height:1.62;color:var(--muted);margin:0;max-width:34rem}
.claim2 p+p{margin-top:1rem}
.tf--pairs td:last-child{text-align:left;color:var(--muted)}
.tf--pairs td:first-child{color:var(--ink);white-space:nowrap}

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

.steps{display:grid;grid-template-columns:repeat(4,1fr);column-gap:clamp(1.5rem,3vw,2.5rem);row-gap:2.25rem}
.step{position:relative}
.step h3{margin:0 0 .5rem}
.step p{font-size:.9375rem;line-height:1.6;color:var(--muted);margin:0}

/* A dashed carriageway with a marker travelling its length — "how we work"
   read as a route rather than a numbered grid. */
.route{position:relative;margin-top:clamp(2.5rem,5vw,4rem)}
.route-track{position:relative;height:0;border-top:2px dashed var(--border-input);margin-bottom:2.75rem}
.route-runner{position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 4px var(--paper);animation:route-run 9s linear infinite}
.route-dot{display:block;width:7px;height:7px;background:var(--brass);margin-bottom:.875rem}
@keyframes route-run{0%{left:0%}100%{left:calc(100% - 7px)}}

/* The AWS callout: facts, not a badge — no logo is drawn, and brass stays
   off the rule (it is reserved for fills and hairlines, never a border
   accent around a box). */
.infra{border-top:1px solid var(--rule);padding-top:clamp(2.5rem,5vw,3.5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.infra h3{margin:0 0 .625rem}
.infra p{font-size:.9375rem;line-height:1.62;color:var(--muted);margin:0;max-width:34rem}
.infra-facts{display:flex;flex-direction:column}
.infra-fact{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-top:1px solid var(--rule);font-size:.8125rem}
.infra-fact:last-child{border-bottom:1px solid var(--rule)}
.infra-fact span:first-child{color:var(--faint)}
.infra-fact span:last-child{color:var(--ink);text-align:right}

/* --------------------------------------------------------------- figures */

/* Set like an annexure in a report: a label, hairline rows, a footnote.
   No box, no fill, no caption chip. */
.tf{margin-top:1.75rem}
.tf .label{display:block;margin-bottom:.625rem}
.tf table{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.tf th{font-weight:600;font-size:.75rem;color:var(--faint);padding:0 0 .5rem;text-align:right}
.tf th:first-child{text-align:left}
.tf th+th,.tf td+td{padding-left:1rem}
.tf td{text-align:right;padding:.5rem 0;border-top:1px solid #E4E7EC;color:var(--ink)}
.tf td:first-child{text-align:left;color:var(--muted)}
.tf tr.head td{border-top:0;padding-top:0;border-bottom:1px solid var(--ink);font-weight:600;color:var(--ink)}
.tf td.sub{padding-left:1.25rem}
.tf tr.total td{border-top:1px solid var(--ink);font-weight:600;color:var(--ink)}
.tf .note{font-size:.75rem;line-height:1.5;color:var(--faint);margin:.75rem 0 0}

/* --------------------------------------------------------------- bands */

/* Two full-bleed ink bands between sections. The first is a road read from
   above: three lanes of marking with loads travelling on them. The second is
   a quay: containers drifting along a waterline. Both are pure geometry and
   pure CSS, so they cost no request and no script. */
.band{position:relative;overflow:hidden;background:var(--ink);height:clamp(200px,25vw,272px)}
.band--ruled{border-top:1px solid var(--ink-rule)}
.band-stage{position:absolute;inset:0}
.band-lane{position:absolute;left:0;right:0;height:0}
.band-dash{position:absolute;left:0;right:0;top:0;height:2px;background-repeat:repeat-x;animation:dash 20s linear infinite}
.band-track{position:absolute;left:0;bottom:3px;width:200%;height:0;animation:track 44s linear infinite}
.band-load{position:absolute;bottom:0;display:flex}
.band-load i{width:4px;background:var(--brass)}
.band-load b{background:rgba(246,247,249,.12)}
.band-quay{position:absolute;left:0;right:0;bottom:24%;height:1px;background:rgba(246,247,249,.18)}
.band-boxes{position:absolute;bottom:calc(24% + 1px);left:0;width:max-content;display:flex;align-items:flex-end;gap:11px;animation:track 64s linear infinite}
.band-boxes--far{gap:26px;opacity:.4;animation-duration:108s}
.band-boxes span{flex:none;background:rgba(246,247,249,.09)}
.band-boxes span.brass{background:rgba(143,122,62,.42)}
.band-veil{position:absolute;inset:0;background:linear-gradient(to right,#12151A 0%,rgba(18,21,26,.95) 36%,rgba(18,21,26,0) 80%)}
.band-cap{position:relative;height:100%;display:flex;align-items:center}
.band-cap .label{color:#C9D0D8;display:block;margin-bottom:.625rem}
.band-cap p{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);line-height:1.4;color:var(--on-ink);margin:0;max-width:26rem;font-weight:600;letter-spacing:-.018em}
@keyframes dash{from{background-position:0 0}to{background-position:-112px 0}}
@keyframes track{from{transform:translateX(0)}to{transform:translateX(-50%)}}

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

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-body);font-size:.9375rem;font-weight:600;line-height:1;
  padding:.875rem 1.5rem;border:1px solid transparent;border-radius:var(--radius);
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease;
}
/* Brass is a fill, never text. The label on it is ink. */
/* Lightened from the brand brass so an ink label clears AA (5.2:1). The mark
   and the rules keep #8F7A3E; only the button fill moves. */
.btn--primary{background:#9C8547;color:var(--ink)}
.btn--primary:hover{background:#AB9251;color:var(--ink)}
.btn--primary:active{background:#8F7A3E}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--border-input)}
.btn--outline:hover{border-color:var(--ink)}
.sect--ink .btn--outline,.hero .btn--outline{color:var(--on-ink);border-color:var(--ink-border)}
.sect--ink .btn--outline:hover,.hero .btn--outline:hover{border-color:var(--on-ink)}
.btn--block{width:100%;justify-content:center}
.btn-row{display:flex;flex-wrap:wrap;gap:.875rem;align-items:center}

/* --------------------------------------------------------------- on ink */

.on-ink{color:var(--on-ink)}
.on-ink a{color:var(--on-ink);text-decoration-color:#A8925A}
.on-ink a:hover{color:#fff}
.on-ink .lede{color:var(--on-ink-muted)}
.on-ink .label{color:var(--on-ink-faint)}

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

.contact-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem;padding-block:1.125rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.contact-line .label{min-width:5rem}
.contact-line .tel{font-family:var(--f-mono);font-size:1.25rem;font-variant-numeric:tabular-nums}
.sect--ink .contact-line{border-bottom:0;border-top-color:var(--ink-rule-2)}
.contact-block{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,4vw,3rem);padding-top:1.75rem;border-top:1px solid var(--ink-rule-2)}
.contact-block .tel{font-family:var(--f-mono);font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* --------------------------------------------------------------- forms */

.form{max-width:30rem}
.field{margin-bottom:1.125rem}
.field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem}
.input{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid var(--border-input);
  border-radius:var(--radius);padding:.75rem;
}
.input.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.input:focus-visible{border-color:var(--brass)}
textarea.input{resize:vertical;min-height:5rem;line-height:1.6}
.hint{font-size:.8125rem;color:var(--faint);margin:.5rem 0 0}
.form .btn+.hint{margin-top:.875rem}
.hp{position:absolute;left:-9999px}

/* --------------------------------------------------------------- prose */

.prose{max-width:var(--measure)}
.prose .opening{font-size:1.0625rem;line-height:1.6;color:var(--ink);margin:0 0 2rem}
.prose h2{font-size:1.1875rem;letter-spacing:-.014em;line-height:1.3;margin:0 0 .75rem}
.prose p{font-size:.9375rem;line-height:1.65;color:var(--muted);margin:0 0 1.75rem}
.prose p+h2{margin-top:0}
.prose p.tight{margin-bottom:.75rem}
.prose ul{font-size:.9375rem;line-height:1.65;color:var(--muted);margin:0 0 1.75rem;padding-left:1.25rem}
.prose li{margin-bottom:.5rem}
.prose li:last-child{margin-bottom:0}
.prose strong{color:var(--ink)}
.updated{font-family:var(--f-mono);font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--faint);margin:0 0 2.5rem}

.code-404{font-family:var(--f-mono);font-size:clamp(3rem,2rem + 6vw,6rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:0 0 1.5rem}

/* --------------------------------------------------------------- masthead */

.mast{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--ink-rule)}
.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:64px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand-text{display:flex;flex-direction:column;gap:1px}
.wordmark{font-family:var(--f-brand);font-weight:700;font-size:1rem;letter-spacing:.06em;color:var(--on-ink);line-height:1}
.by{font-size:.6875rem;letter-spacing:.01em;color:var(--on-ink-faint);line-height:1}
.mast-nav{display:flex;align-items:center;gap:1.75rem}
.mast-nav a{font-size:.875rem;color:var(--on-ink-muted);text-decoration:none}
.mast-nav a:hover{color:var(--on-ink)}
.mast-nav .pill{color:var(--on-ink);border:1px solid var(--ink-border);padding:.4rem .9rem;border-radius:var(--radius);white-space:nowrap}
.mast-nav .pill:hover{border-color:var(--on-ink)}

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

.hero{position:relative;background:var(--ink);height:100svh}
.hero-pane{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1400px;perspective-origin:50% 42%;display:grid;place-items:center}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(143,122,62,.20) 1px,transparent 1px),linear-gradient(to bottom,rgba(143,122,62,.20) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 88% 68% at 50% 46%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 88% 68% at 50% 46%,#000 0%,transparent 72%);
}
.hero-mark{position:absolute;right:-3%;top:54%;translate:0 -50%;width:min(34vw,400px)}
.hero-plane{position:relative;width:100%;max-width:var(--page);padding:3.5rem var(--pad) 1.5rem;transform-origin:50% 0%}
.hero .lede{color:var(--on-ink-muted);margin:0 0 2.5rem;max-width:var(--measure)}
.hero h1{color:var(--on-ink);margin:0 0 1.75rem}
.hero .eyebrow{margin-bottom:1.5rem}
.cue{position:absolute;bottom:2rem;left:50%;translate:-50% 0;margin:0;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-faint)}
.progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--brass);transform-origin:0 50%;transform:scaleX(0);z-index:60}

/* Scroll-driven depth. No JavaScript: the timeline is the scroll position.
   Gated behind @supports so that a browser without it gets a still hero
   rather than an element parked on its end keyframe. */
@keyframes recede{
  0%{transform:translateZ(0) rotateX(0deg);opacity:1;filter:blur(0)}
  55%{opacity:.42}
  100%{transform:translateZ(-460px) rotateX(-11deg);opacity:0;filter:blur(4px)}
}
@keyframes gridback{
  0%{transform:translateZ(-560px) scale(1.5);opacity:1}
  100%{transform:translateZ(-1180px) scale(1.92);opacity:0}
}
@keyframes markback{
  0%{transform:translateZ(-260px) scale(1.22) rotateX(0deg);opacity:.5}
  100%{transform:translateZ(-820px) scale(1.75) rotateX(-6deg);opacity:0}
}
@keyframes cueout{0%{opacity:.6;transform:translateY(0)}28%,100%{opacity:0;transform:translateY(16px)}}
@keyframes progress{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes rise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}

@supports (animation-timeline:view()){
  .hero{height:190svh;view-timeline-name:--hero;view-timeline-axis:block}
  .hero-plane{animation:recede linear both;animation-timeline:--hero;animation-range:entry 100% exit 0%}
  .hero-grid{animation:gridback linear both;animation-timeline:--hero;animation-range:entry 100% exit 0%}
  .hero-mark{animation:markback linear both;animation-timeline:--hero;animation-range:entry 100% exit 0%}
  .cue{animation:cueout linear both;animation-timeline:--hero;animation-range:entry 100% exit 0%}
  .progress{animation:progress linear both;animation-timeline:scroll(root)}
  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 5% entry 90%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:100svh}
  .hero-plane,.hero-grid,.hero-mark,.cue,.rise,.band-dash,.band-track,.band-boxes{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}

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

.foot{background:var(--ink);color:var(--on-ink-muted);border-top:1px solid var(--ink-rule);padding-block:clamp(2.5rem,5vw,4rem)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4rem);row-gap:2.5rem;align-items:start}
.foot-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.foot-brand .wordmark{font-size:1.0625rem}
.foot p{font-size:.875rem;line-height:1.7;color:var(--on-ink-faint);max-width:26rem}
.foot a{color:var(--on-ink-muted)}
.foot .copy{font-family:var(--f-mono);font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--on-ink-dim);margin-top:1.5rem}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.foot-nav .label{color:var(--on-ink-dim);display:block;margin-bottom:.875rem}
.foot-col{display:flex;flex-direction:column;gap:.625rem}
.foot-col a{font-size:.875rem;text-decoration:none}
.foot-col a:hover{text-decoration:underline;text-decoration-color:#A8925A}

/* --------------------------------------------------------------- narrow */

@media (max-width:70rem){
  .row--prob{grid-template-columns:15rem 1fr}
  .row--reg{grid-template-columns:13rem 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:52rem){
  .grid-2,.foot-grid,.split,.split--lead{grid-template-columns:1fr}
  .row--prob,.row--reg,.steps{grid-template-columns:1fr}
  .row--reg .row-head{flex-direction:column;gap:.5rem}
  .mast-nav a:not(.pill){display:none}
  .hero-mark{width:min(58vw,320px);right:-14%;opacity:.7}
}
@media (max-width:26rem){
  .foot-nav{grid-template-columns:1fr;gap:1.75rem}
}

/* --------------------------------------------------------------- print */

@media print{
  .mast,.progress,.cue,.btn,.foot-nav,.band,.route-runner{display:none}
  body{background:#fff;color:#000}
  .hero,.sect--ink{background:#fff;color:#000;height:auto}
  .hero-pane{position:static;height:auto;perspective:none}
  .hero-grid,.hero-mark{display:none}
  .hero h1,.on-ink,.on-ink a{color:#000}
}