/* ============================================================
   Direction C (teal ground) - shared stylesheet
   Loaded by every page in this direction. Page-specific rules
   live in the page's own <style> block, not here.
   ============================================================ */

/* ============================================================
   DIRECTION C — "SIGNAL"
   Referent: the modernist annual report crossed with a data
   console. No serif anywhere. A visible 12-column grid, banded
   across a deep teal ground, with orange as the highlight and
   brown carrying the data bands,
   asymmetric placement, one electric accent, mono for data.
   Type: Archivo + Azeret Mono, both free. A licensed pairing
   (ABC Monument Grotesk + Mono, or Soehne + Soehne Mono) is
   a swap of the three font tokens below, if one is ever bought.
   ============================================================ */

/* ---------- type ----------
   Archivo and Azeret Mono, both free (SIL Open Font License), loaded from
   Google Fonts by every page that links this stylesheet. There are no local
   font files and no @font-face rules here.

   This replaced ABC Monument Grotesk Trial, which the stylesheet served from
   five local OTFs in fonts/. Trial files are licensed for evaluation only and
   could not have shipped. The header comment above claimed the prototypes
   were "rendering here with Archivo + Azeret Mono" while the tokens pointed
   at the trial family and Archivo was not even in the fallback chain, so what
   the file said and what it did had come apart.

   Archivo is the intended stand-in rather than a convenience: the design was
   drawn against it. It shares Monument Grotesk's skeleton and, unlike
   Monument, has a real 600. Monument's ladder is 400/500/700 only, which is
   why the mid-level headings here sit at 500 -- that was a workaround for a
   face this file no longer uses. The three rules concerned are .about-body
   p.pull, .prow h3 and .trow h3; 600 is available to them again.

   If a licensed face is bought later, add its @font-face rules and change the
   three tokens below. Nothing else in the system names a family. */

:root{
  --surface:     #06332e;   /* TEAL. the page ground */
  --surface-2:   #0c4640;   /* raised teal, row hover */
  --surface-3:   #12534c;
  --ink:         #ece3d3;   /* oat */
  --ink-mute:    #a9bfbb;   /* pale teal-grey */
  --accent:      #f59d5e;   /* ORANGE is the highlight here. Teal cannot be, it
                               is the ground. This is the whole inversion. */
  --accent-dim:  #b4501c;
  --display:     #f59d5e;   /* same orange. on this ground the two roles merge */
  --rule:        rgba(236,227,211,.17);
  --rule-strong: rgba(236,227,211,.36);
  --grid-line:   rgba(236,227,211,.07);   /* the column grid, quieter than a hairline */

  /* This ground is dark but NOT neutral: 20 points of chroma between its red and
     blue channels is what keeps it reading as brown. Going below about 12 points
     of chroma is what made the earlier #191411 read as black. If you take this
     darker, keep the channel spread, do not just lower all three values.

     Lighter alternatives, all passing at the current text values:
       deep chocolate  --surface: #382820;  --surface-2: #432f26;  --surface-3: #4e382d;
       dark chocolate  --surface: #412f25;  --surface-2: #4c382c;  --surface-3: #573f31; */

  --font-display: "Archivo", Helvetica, Arial, sans-serif;
  --font-text:    "Archivo", Helvetica, Arial, sans-serif;
  --font-mono:    "Azeret Mono", ui-monospace, monospace;

  --gut: 32px;
  --max: 1320px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--font-text); font-size:16px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ---------- the layout grid ----------
   Twelve columns inside every band. Content starts at column 4. The grid
   used to be drawn as faint vertical lines; see .band below. */
.wrap{
  max-width:var(--max); margin:0 auto; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px;
  position:relative; z-index:1;
}
/* The bands painted faint vertical column lines behind their content until
   2026-09-27, when they were removed at Emily's request. --grid-line is
   still declared in places but nothing paints with it. */
.band{
  position:relative; color:var(--ink);
  background-color:var(--surface);
}

/* ---------- the bands ----------
   Three grounds carry the page: the espresso base, a raised step for the
   data furniture, and one light band for the section about a person. */
.band-raised{
  background-color:#261a12;   /* BROWN. the data bands, against the teal base */
  --surface-2:   #32241a;
  --surface-3:   #3f2e22;
  --ink-mute:    #b6aba0;     /* a warm mute reads better on brown than a teal one */
  --grid-line:   rgba(236,227,211,.06);
}

.band-light{
  --surface:      #ece3d3;   /* oat, the same ground Direction A stands on */
  --surface-2:    #e2d7c3;
  --ink:          #251b14;
  --ink-mute:     #57463a;
  --accent:       #0b4f48;   /* teal returns as the accent on the light band */
  --display:      #963f13;   /* and orange goes deep enough to be text-safe on oat */
  --rule:         rgba(37,27,20,.18);
  --rule-strong:  rgba(37,27,20,.42);
  --grid-line:    rgba(37,27,20,.07);
  background-color:var(--surface); color:var(--ink);
}
/* the teal band needs dark column lines, not light ones */
.contact{ --rule:rgba(38,26,18,.20); --rule-strong:rgba(38,26,18,.42);
          --grid-line:rgba(38,26,18,.09); }

section, header, footer{ position:relative; }

/* utility spans */
.c-full{ grid-column:1 / -1; }
.c-main{ grid-column:4 / 12; }
.c-wide{ grid-column:3 / -1; }
.c-half{ grid-column:4 / 9; }

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--rule); background-color:var(--surface);
  position:sticky; top:0; z-index:30;
}
.topbar .wrap{ align-items:center; padding-top:14px; padding-bottom:14px; }
.brand{ grid-column:1 / 4; font-family:var(--font-display); font-weight:700;
  font-size:15px; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; }
.brand i{ color:var(--accent); font-style:normal; }
.topnav{ grid-column:4 / -1; display:flex; justify-content:flex-end; gap:28px; align-items:center; }
.topnav a{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em;
  text-decoration:none; color:var(--ink-mute); }
.topnav a:hover{ color:var(--accent); }
.topnav a.cta{ color:var(--ink); border:1px solid var(--rule-strong); padding:8px 14px; }
.topnav a.cta:hover{ background:var(--accent); border-color:var(--accent); color:#261a12; }

/* ---------- labels ---------- */
.mlabel{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
  color:var(--accent); text-transform:uppercase;
}
.mlabel.dim{ color:var(--ink-mute); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.01em; padding:15px 20px; text-decoration:none;
  background:var(--accent); color:#261a12; border:1px solid var(--accent);
  border-radius:0; font-weight:500; transition:.16s;
}
.btn:hover{ background:transparent; color:var(--accent); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule-strong); }
.btn-ghost:hover{ background:var(--ink); color:var(--surface); border-color:var(--ink); }

/* ---------- hero: content starts at column 4 ---------- */
.hero{ padding:112px 0 76px; }
.hero h1{
  grid-column:4 / -1;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(40px,7vw,104px); line-height:.94; letter-spacing:-.042em;
  margin:18px 0 0; max-width:15ch;
}
.hero h1 em{
  font-style:normal; color:var(--accent);
  border-bottom:4px solid var(--accent); padding-bottom:2px;
}
.hero .eyeb{ grid-column:4 / -1; }
.hero .deck{
  grid-column:4 / 10; font-size:18px; line-height:1.56; color:var(--ink-mute);
  margin:34px 0 0; max-width:56ch;
}
.hero-actions{ grid-column:4 / -1; display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.hero-meta{ grid-column:1 / 4; align-self:start; margin-top:26px; }
.hero-meta p{ font-family:var(--font-mono); font-size:11px; line-height:2;
  color:var(--ink-mute); margin:0; }

/* ---------- figures: full-bleed data row ---------- */
.figs{ padding:0; }
.figs .wrap{ padding-top:0; padding-bottom:0; }
.fig{
  grid-column:span 2; padding:30px 18px 30px 0; border-right:1px solid var(--rule);
}
.fig:last-child{ border-right:none; }
.fig .n{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3vw,40px);
  letter-spacing:-.04em; line-height:1; color:var(--display); display:block; }
.fig .l{ font-family:var(--font-mono); font-size:11px; line-height:1.5;
  color:var(--ink-mute); display:block; margin-top:12px; }

/* ---------- sector strip ---------- */
.strip{ border-bottom:1px solid var(--rule); border-top:1px solid var(--rule); }
.strip .wrap{ padding-top:16px; padding-bottom:16px; }
.strip .inner{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-family:var(--font-mono); font-size:11px; color:var(--ink-mute);
  border:1px solid var(--rule); padding:5px 10px; }
.tag.k{ color:var(--accent); border-color:var(--accent-dim); }

/* ---------- section scaffolding ---------- */
section{ padding:88px 0; }
.sechead{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid;
  margin-bottom:52px; }
.sechead .idx{ grid-column:1 / 4; }
.sechead h2{
  grid-column:4 / -1; font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px,3.4vw,44px); letter-spacing:-.034em; line-height:1.02; margin:0;
  max-width:20ch;
}

/* ---------- about ---------- */
.portrait{ grid-column:1 / 4; margin:0; align-self:start; }
.band-light .portrait img{ filter:grayscale(1) contrast(1.06) sepia(.10); opacity:1; }
.portrait img{
  width:100%; filter:grayscale(1) contrast(1.12) brightness(.90);
  opacity:.95; border:1px solid var(--rule); background:var(--surface-2);
}
.portrait figcaption{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-mute);
  padding-top:10px; }
.about-body{ grid-column:4 / 11; }
.about-body p{ margin:0 0 1.15em; color:var(--ink-mute); max-width:62ch; }
.about-body p.pull{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:clamp(20px,2.4vw,30px); line-height:1.16; letter-spacing:-.028em;
  max-width:22ch; margin:32px 0; padding:22px 0;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
}

/* ---------- practice: four boxes, two up ----------
   Each box spans six of the twelve columns, so the pair still sits on the grid
   the rest of the page is drawn on. The fill is --surface-2, a 1.29:1 step off
   the ground, and the hairline does the work of defining the edge. */
#practice .wrap{ row-gap:24px; }
.prow{
  grid-column:span 6;
  display:flex; flex-direction:column; gap:12px;
  padding:28px 28px 30px;
  border:1px solid var(--rule);
  background:var(--surface-2);
}
.prow .pn{ font-family:var(--font-mono); font-size:11px; color:var(--accent); }
.prow h3{ font-family:var(--font-display); font-weight:700;
  font-size:23px; letter-spacing:-.022em; line-height:1.22; margin:0; }
.prow p{ margin:0; color:var(--ink-mute); font-size:15px; }
/* a numbered sequence inside a tile, on the tile's own text scale */
.prow .psteps{ margin:0; padding-left:1.4em; color:var(--ink-mute); font-size:15px; }
.prow .psteps li{ margin:0 0 6px; padding-left:4px; }
.prow .psteps li:last-child{ margin-bottom:0; }
.prow .psteps li::marker{ font-family:var(--font-mono); font-size:12px; color:var(--accent); }

/* ---------- practice boxes: cream ----------
   The four boxes carry the same cream as the engagement tiles, with brown text.

   The numeral is a deep orange, NOT teal. The engagement tiles below use teal
   for their duration line, and both sections now sit on the same cream, so the
   numeral colour is what keeps them reading as two different components rather
   than one repeated card. The page's accent orange #f59d5e does not survive a
   light ground, hence the deeper #963f13 at 5.47:1. */
#practice .prow, .cream-tiles .prow{
  --surface-2:   #ece3d3;
  --ink:         #251b14;
  --ink-mute:    #57463a;
  --accent:      #963f13;
  --rule:        rgba(37,27,20,.18);
  --rule-strong: rgba(37,27,20,.42);
  color:var(--ink);
}

/* ---------- LIGHT TILE VARIANT ----------
   The engagement cards invert against the brown band: a cream tile carrying
   brown text and a teal duration. It is a token override on the tile, so the
   heading, the body, the duration, the hairline and the hover state all follow
   from six declarations.

   The one value that cannot carry over is teal. This direction's accent is the
   bright #4cbfae, which measures 1.76:1 on a cream tile. The tile has to use
   the deep #0b4f48 at 7.41:1, the same teal the light band uses. */
#work .trow, .cream-tiles .trow{
  --surface-2:   #ece3d3;          /* cream tile */
  --surface-3:   #e2d7c3;          /* hover */
  --ink:         #251b14;          /* brown, the title */
  --ink-mute:    #57463a;          /* mid brown, the description */
  --accent:      #0b4f48;          /* deep teal, the duration */
  --rule:        rgba(37,27,20,.18);
  --rule-strong: rgba(37,27,20,.42);
  color:var(--ink);
}

/* ---------- engagements: four cards, left to right ----------
   Three columns each, so four sit across the twelve-column grid. The term is
   pushed to the foot of every card by flex, which keeps that line aligned
   across all four no matter how long the description runs. */
.tbl{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; row-gap:24px; }
.trow{
  grid-column:span 3; position:relative;
  display:flex; flex-direction:column; gap:12px;
  padding:26px 22px 88px;   /* the foot reserves room for the pinned term */
  border:1px solid var(--rule);
  background:var(--surface-2);
  transition:background .16s, border-color .16s;
}
.trow:hover{ background:var(--surface-3); border-color:var(--rule-strong); }
.trow h3{ font-family:var(--font-display); font-weight:700;
  font-size:20px; letter-spacing:-.024em; line-height:1.24; margin:0; }
/* A short rule under each tile headline, the same device as the underline
   under the hero's emphasis. Enlarged and marked 2026-09-26, when the
   headlines did not stand out from the body copy. The colour is in the
   palette file as --tile-mark. */
.prow h3::after, .trow h3::after{
  content:""; display:block; width:32px; height:3px; margin-top:12px;
  background:var(--tile-mark);
}
.trow p{ margin:0; color:var(--ink-mute); font-size:14.5px; }
/* The term sits in a fixed slot at the card's foot, not in the flow.
   One card's term is a single line where the other three are two. Flowing it
   puts its rule 17.6px out of line with the rest; bottom-pinning it aligns the
   text but moves the rule instead. A fixed-height slot aligns the rule across
   all four and lets the text hang from it, which is the line that has to match.
   48px is two lines of 11px/1.6 plus the 12px above them. */
.trow .term{
  position:absolute; left:22px; right:22px; bottom:24px; height:48px;
  font-family:var(--font-mono); font-size:11px; color:var(--accent);
  line-height:1.6; padding-top:12px;
  border-top:1px solid var(--rule);
}

/* ---------- contact ---------- */
.contact{ background-color:var(--accent); color:#261a12; border-bottom:none; padding:92px 0; }
.contact h2{
  grid-column:4 / 11; font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px,5.2vw,68px); line-height:.96; letter-spacing:-.04em; margin:14px 0 0;
}
.contact .mlabel{ grid-column:4 / -1; color:rgba(30,20,14,.82); }
.contact .idx{ grid-column:1 / 4; color:rgba(30,20,14,.82); }
.contact-actions{ grid-column:4 / -1; display:flex; gap:12px; flex-wrap:wrap; margin-top:40px; }
.contact .btn{ background:#261a12; color:var(--accent); border-color:#261a12; }
.contact .btn:hover{ background:transparent; color:#261a12; border-color:#261a12; }
.contact .btn-ghost{ background:transparent; color:#261a12; border-color:rgba(30,20,14,.60); }
.contact .btn-ghost:hover{ background:#261a12; color:var(--accent); }

footer{ padding:24px 0; }
footer .wrap span{ font-family:var(--font-mono); font-size:11px; color:var(--ink-mute); }
footer .wrap span:first-child{ grid-column:1 / 7; }
footer .wrap span:last-child{ grid-column:10 / -1; text-align:right; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero h1, .hero .eyeb, .hero .deck, .hero-actions,
  .c-main, .c-half, .about-body, .sechead h2, .contact h2, .contact .mlabel,
  .contact-actions{ grid-column:1 / -1 !important; }
  .hero-meta, .sechead .idx, .contact .idx{ grid-column:1 / -1; margin-top:0; }
  .portrait{ grid-column:1 / -1; max-width:240px; margin-bottom:28px; }
  .sechead{ margin-bottom:34px; row-gap:10px; }
  .fig{ grid-column:span 4; border-right:none; border-bottom:1px solid var(--rule); }
  .prow{ grid-column:span 6; }   /* practice boxes stay two up */
  .trow{ grid-column:span 6; }   /* engagement cards drop from four to two */
  footer .wrap span:first-child, footer .wrap span:last-child{
    grid-column:1 / -1; text-align:left; }
}
@media (max-width:620px){
  :root{ --gut:18px; }
  section{ padding:56px 0; }
  .hero{ padding:40px 0 48px; }
  .brand{ grid-column:1 / -1; }
  .topnav{ grid-column:1 / -1; justify-content:flex-start; margin-top:12px; }
  .hero-meta{ margin-bottom:22px; }
  .fig{ grid-column:span 6; }
  .prow, .trow{ grid-column:1 / -1; }
  .topnav{ gap:16px; flex-wrap:wrap; }
}


/* ---------- index rows ----------
   Moved here from resources-c-teal.html and resources-c-deepsea.html, which
   carried identical copies apart from two palette values. Both pages now
   inherit it, and the landing page can use it for the proof callouts without
   a third copy appearing.

   Cream tiles, the same surface the practice boxes and engagement tiles use,
   because these are the same kind of thing: an item you can act on.

   Two accents keep the columns apart. Status is the deep orange the practice
   numerals use; venue is the deep accent the engagement durations use. Neither
   the page's bright accent nor its bright orange survives a cream ground.
   c-deepsea.css overrides both for the deep sea palette. */
.llist{ grid-column:1 / -1; display:flex; flex-direction:column; gap:16px; }

.lrow{
  --surface-2:   #ece3d3;
  --surface-3:   #e2d7c3;
  --ink:         #251b14;
  --ink-mute:    #57463a;
  --status:      #963f13;
  --venue:       #0b4f48;
  --rule:        rgba(37,27,20,.18);
  --rule-strong: rgba(37,27,20,.42);

  display:grid; grid-template-columns:132px 1fr 116px 24px;
  gap:24px; align-items:start;
  padding:24px 26px;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--rule);
  text-decoration:none;
  transition:background .16s, border-color .16s;
}
a.lrow:hover{ background:var(--surface-3); border-color:var(--rule-strong); }

.lrow-status{
  font-family:var(--font-mono); font-size:11px; color:var(--status);
  text-transform:uppercase; letter-spacing:.02em; line-height:1.5;
}
.lrow-title{
  font-family:var(--font-display); font-weight:600; font-size:17px;
  letter-spacing:-.022em; line-height:1.25; margin:0 0 6px;
}
.lrow-sub{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-mute); }
.lrow-venue{
  font-family:var(--font-mono); font-size:11px; color:var(--venue);
  text-transform:uppercase; letter-spacing:.02em; line-height:1.5;
}
.lrow-arrow{
  font-family:var(--font-mono); font-size:15px; color:var(--venue);
  text-align:right; line-height:1.2;
}

/* Rows with nothing to link to yet are not links. A cream tile that looks
   clickable and goes nowhere is worse than one that plainly says it is not
   ready. */
.lrow.is-pending{ opacity:.82; }
.lrow.is-pending .lrow-arrow{ visibility:hidden; }

@media (max-width:1080px){
  .lrow{ grid-template-columns:120px 1fr; gap:10px 20px; }
  .lrow-venue{ grid-column:2; }
  .lrow-arrow{ display:none; }
}
@media (max-width:620px){
  .lrow{ grid-template-columns:1fr; padding:22px; }
  .lrow-venue{ grid-column:1; }
}



/* =========================================================================
   COPY v5.1 COMPONENTS
   Added 2026-09-26 for home-deepsea.html and roadmap-deepsea.html, which
   carry website copy v5.1 on the deep sea design. Every selector below is a
   class no earlier page uses, so the reference pages and the two earlier
   chosen pages render exactly as they did. Palette values for the deep sea
   pages are in c-deepsea.css, under the matching heading.

   The cream tiles are no longer tied to ids. #practice .prow and #work .trow
   also answer to .cream-tiles, so a second page can use them without taking
   an id that means something else on the landing page.
   ========================================================================= */

/* ---------- the landing register, as classes ----------
   The solid header button, the filled sector key and the footer ending were
   written inline in direction-c-deepsea.html. Both new pages need them, so
   they live here as opt-in classes rather than as a third inline copy. The
   earlier page keeps its own inline versions and is unaffected. */
.topnav a.cta.solid{ background:var(--accent); border-color:var(--accent); color:#261a12; }
.topnav a.cta.solid:hover{ background:transparent; border-color:var(--accent); color:var(--accent); }
.topnav a[aria-current="page"]{ color:var(--ink); }

.tag.k.fill{
  background:var(--accent-dim); border-color:var(--accent-dim); color:#fff;
  text-transform:uppercase; letter-spacing:.08em;
}

footer.ending{ padding:64px 0 28px; border-top:2px solid var(--accent); }
footer.ending .wrap .foot-mark{
  grid-column:1 / 8; align-self:end;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,4.6vw,58px); line-height:.98; letter-spacing:-.035em;
  color:var(--ink);
}
footer.ending .wrap .foot-mark i{ font-style:normal; color:var(--accent); }
footer.ending .wrap .foot-meta{
  grid-column:9 / -1; align-self:end; margin:0;
  font-family:var(--font-mono); font-size:11px; line-height:1.9;
  color:var(--ink-mute); text-align:right;
}
footer.ending .wrap .foot-copy{ grid-column:1 / 8; margin-top:44px; text-align:left; }   /* the last span since the draft label went, so it must not take the right-aligned last-child rule */
footer.ending .wrap .foot-note{ grid-column:9 / -1; margin-top:44px; text-align:right; }

/* ---------- section furniture ----------
   A lead sits under the heading on the content column. A closing line sits
   under the section's component. A section call to action is a mono text
   link, not a button: the only buttons on the page are in the header and the
   close, and a third orange block mid-page would compete with both. */
.lead{
  grid-column:4 / 11; margin:-24px 0 40px; font-size:18px; line-height:1.5;
  color:var(--ink-mute); max-width:58ch;
}
.after{
  grid-column:4 / 11; margin:36px 0 0; font-size:15.5px; line-height:1.55;
  color:var(--ink-mute); max-width:60ch;
}
.seccta{
  grid-column:4 / -1; justify-self:start; margin-top:36px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.01em;
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:4px;
}
.seccta::after{ content:" \2192"; }
.seccta:hover{ color:var(--ink); }

/* a link inside a tile, pinned to the tile's foot */
.plink{
  margin-top:auto; padding-top:6px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--accent); text-decoration:none;
}
.plink::after{ content:" \2192"; }
.plink:hover{ text-decoration:underline; }

/* ---------- proof rows ----------
   The index row carries the four proof callouts. The status column holds
   the numeral; only the row with somewhere to go shows a venue and arrow. */
.lrow.proof .lrow-sub{ font-size:15px; line-height:1.58; max-width:70ch; }
.lrow.proof .lrow-title{ font-size:19px; margin-bottom:10px; }

/* ---------- the quote ---------- */
.quote{
  grid-column:4 / 11; margin:56px 0 0; padding:26px 0;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
}
.quote blockquote{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(22px,2.6vw,32px); line-height:1.15; letter-spacing:-.028em;
  max-width:28ch;
}
.quote figcaption{
  margin-top:14px; font-family:var(--font-mono); font-size:11px; color:var(--ink-mute);
}
.quote.pending blockquote{ color:var(--ink-mute); }

/* ---------- a paragraph on the close ---------- */
.contact p.close{
  grid-column:4 / 10; margin:26px 0 0; font-size:18px; line-height:1.5; max-width:52ch;
}

/* ---------- ruled list ---------- */
.deflist{ grid-column:4 / 11; margin:0; padding:0; list-style:none; }
.deflist li{
  padding:16px 0; border-bottom:1px solid var(--rule);
  color:var(--ink-mute); font-size:16.5px; line-height:1.5; max-width:66ch;
}
.deflist li:first-child{ border-top:1px solid var(--rule); }
.deflist li b{ color:var(--ink); font-weight:600; }

/* ---------- sequence rows ----------
   Label in the rail (columns 1-3), title from column 4, body from column 8.
   One component for the four weeks and for the three questions, because
   both are a short title answered by a paragraph. */
.srows{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; }
.srow{
  grid-column:1 / -1; display:grid; grid-template-columns:subgrid;
  padding:26px 0; border-top:1px solid var(--rule); align-items:start;
}
.srow:last-child{ border-bottom:1px solid var(--rule); }
.srow .sn{
  grid-column:1 / 4; padding-top:5px;
  font-family:var(--font-mono); font-size:11px; color:var(--accent);
  text-transform:uppercase; letter-spacing:.02em;
}
.srow h3{
  grid-column:4 / 8; margin:0; font-family:var(--font-display); font-weight:600;
  font-size:20px; letter-spacing:-.022em; line-height:1.22;
}
.srow p{ grid-column:8 / -1; margin:0; color:var(--ink-mute); font-size:15px; line-height:1.58; }

/* ---------- price ---------- */
.priced{
  grid-column:4 / 11; padding:28px 0;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
}
.priced .mlabel{ display:block; margin-bottom:14px; }
.priced p{
  margin:0; color:var(--ink); max-width:46ch;
  font-size:clamp(19px,1.9vw,24px); line-height:1.4; letter-spacing:-.012em;
}

/* ---------- the six-item nav ----------
   Adding Proof and Systems Roadmap takes the nav to about 690px. It holds
   one row down to 1000px; below that, columns 4-12 cannot carry it, and at
   768 it ran into the wordmark and wrapped "Book a call" to three lines. So
   below 1000 it takes its own row under the wordmark, which is what the
   stylesheet already does at 620 for the shorter nav. */
.topnav.long a{ white-space:nowrap; }
@media (max-width:1000px){
  .topnav.long{ grid-column:1 / -1; justify-content:flex-start; flex-wrap:wrap;
    gap:10px 22px; margin-top:12px; }
}

/* ---------- three engagement tiles, starting on column 4 ---------- */
.tiles-3 .trow:first-child{ grid-column:4 / span 3; }

@media (max-width:1080px){
  footer.ending .wrap .foot-mark{ grid-column:1 / -1; }
  footer.ending .wrap .foot-meta{ grid-column:1 / -1; text-align:left; margin-top:18px; }
  footer.ending .wrap .foot-copy,
  footer.ending .wrap .foot-note{ grid-column:1 / -1; text-align:left; margin-top:20px; }
  .lead, .after, .seccta, .quote, .deflist, .priced,
  .contact p.close{ grid-column:1 / -1; }
  .lead{ margin-top:-18px; }
  .srow{ row-gap:10px; }
  .srow .sn, .srow h3, .srow p{ grid-column:1 / -1; }
  .tiles-3 .trow, .tiles-3 .trow:first-child{ grid-column:1 / -1; }
}