/* Portfolio. Tokens and base reset come from tokens.css. */

/* ---------- hero ---------- */
.hero { background:var(--band); }
.hero__in { max-width:var(--wrap); margin:0 auto; padding:clamp(1.6rem,4vw,2.9rem) var(--pad);
            display:flex; gap:clamp(1rem,3vw,2.1rem); align-items:center; flex-wrap:wrap; }
.hero__pt { flex:none; width:clamp(68px,10vw,128px); height:clamp(68px,10vw,128px);
            object-fit:cover; border-radius:50%; border:clamp(3px,.4vw,5px) solid var(--on-band); }
.hero__stack { flex:1 1 20rem; min-width:0; display:flex; flex-direction:column; gap:.85rem; }
.hero__name { font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800; letter-spacing:-.035em; line-height:.9;
              font-size:clamp(2rem,5.4vw,3.5rem); color:var(--on-band); }
.hero__claim { font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800; letter-spacing:-.035em; line-height:.94;
               font-size:clamp(1.62rem,3vw,1.875rem); color:var(--on-band); }
.hero__long { max-width:38rem; font-size:clamp(.94rem,1.5vw,1.03rem); line-height:1.45;
              color:var(--on-band); opacity:.86; text-wrap:pretty; }
/* flex:none with no flex-wrap meant four controls could neither shrink nor
   wrap, so the hero pushed the document to 519px and every page scrolled
   sideways at phone widths. Predates the section below it. */
.hero__acts { flex:0 1 auto; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; align-self:flex-start; }
.hero__cta { display:inline-flex; align-items:center; gap:.55rem; min-height:44px; padding:0 1.35rem;
             border:1.5px solid var(--on-band); border-radius:999px; color:var(--on-band);
             text-decoration:none; font-size:.875rem; font-weight:700; }
.hero__cta:hover { background:var(--on-band); color:var(--band); }
.hero__theme { width:44px; height:44px; border-radius:999px; border:1.5px solid var(--on-band);
               background:none; color:var(--on-band); cursor:pointer; display:grid; place-items:center; }
.hero__theme:hover { background:var(--on-band); color:var(--band); }

/* ---------- lens chips ---------- */
.lenses { max-width:var(--wrap); margin:0 auto; padding:1.5rem var(--pad) 1.15rem; }
.lenses ul { display:flex; flex-wrap:wrap; gap:.4rem; }
.lenses a { display:inline-block; padding:.45rem .85rem; border-radius:999px; border:1px solid var(--edge);
            font-size:.8rem; font-weight:500; color:var(--ink); text-decoration:none; }
.lenses a:hover { border-color:var(--accent); color:var(--accent); }
.lenses a[aria-current="page"] { background:var(--accent); border-color:var(--accent); color:var(--paper); font-weight:700; }

/* ---------- start here ---------- */
main { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) 2rem; }
/* Was a filled, rounded, 2px-bordered card. The page reads as an editorial
   document now, so this is a ruled section like any other: no fill, no box,
   one terracotta rule to mark where it starts. */
.start { margin-top:2rem; padding:1.4rem 0 0; border-top:3px solid var(--accent); }
/* The first shift on a lens page sits right under Start here, and .sh draws a
   rule in --ink, which is near-white in the dark theme. Two headed sections in
   a row do not need a divider between them. */
.start + .filterbar + .sh { border-top:0; }
.start__h { font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800; letter-spacing:-.025em; font-size:1.25rem; }
.start__p { margin-top:.25rem; font-size:.85rem; line-height:1.5; color:var(--strong); max-width:44rem; }
.start__grid { margin-top:1rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.7rem; }
.start__c a, .start__c > span { display:flex; flex-direction:column; gap:.4rem; padding:.6rem;
  background:none; border:1px solid var(--edge); border-radius:6px; text-decoration:none; color:var(--ink); height:100%; }
.start__c a:hover { border-color:var(--accent); }
.start__c .th { width:100%; height:auto; aspect-ratio:16/9; }
.start__tt { font-size:.83rem; font-weight:700; line-height:1.25; }
.start__me { font-size:.75rem; font-weight:700; color:var(--accent); }

/* ---------- filter bar ---------- */
.filterbar { position:sticky; top:0; z-index:9; margin-top:1.2rem; display:flex; gap:1rem;
  align-items:center; justify-content:space-between; padding:.7rem 1rem; border-radius:9px;
  background:var(--tint); border:1px solid var(--accent-edge); font-size:.85rem; }
.filterbar b { color:var(--accent); }
.filterbar button { border:1px solid var(--accent); background:none; color:var(--accent);
  border-radius:999px; padding:.35rem .9rem; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; min-height:44px; }

/* ---------- shifts ---------- */
.sh { padding:1.9rem 0 1.6rem; border-top:2px solid var(--ink); }
.sh--origin { border-top:1px solid var(--edge); }
.sh__head { display:flex; gap:clamp(.75rem,2vw,1.6rem); align-items:flex-start; }
.sh__num { flex:none; width:auto; min-width:clamp(2.6rem,6vw,4.6rem); padding-right:clamp(.4rem,1vw,.9rem);
           white-space:nowrap; font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800;
           font-size:clamp(1.15rem,2.7vw,1.75rem); line-height:1.05; letter-spacing:-.02em; color:var(--accent); }
.sh__num--o { color:var(--quiet); }
.sh__body { flex:1; min-width:0; }
.sh__yrs { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.sh__arrow { margin-top:.55rem; font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800; letter-spacing:-.028em;
             line-height:1.16; font-size:clamp(1.25rem,2.6vw,1.8rem); max-width:46rem; text-wrap:pretty; }
.sh__a { color:var(--quiet); }
.sh__x { margin:0 .7rem; color:var(--accent); display:inline-block; }
.sh__b { color:var(--ink); }
.sh__ind { margin-top:.8rem; max-width:44rem; font-size:.9rem; line-height:1.55; color:var(--strong); text-wrap:pretty; }
.sh__mine { margin-top:.55rem; max-width:44rem; font-size:.9rem; line-height:1.55; text-wrap:pretty; }
.sh__mine strong { color:var(--accent); }
/* One comfortable column rather than two, capped at a 50rem measure, with a
   rule down the side so the eye reads it as a single block to take or skip
   rather than as two competing panels. */
.blanks, .sh__filled { display:grid; grid-template-columns:1fr; gap:1rem;
                       margin-top:1.1rem; max-width:50rem;
                       border-left:4px solid var(--accent); padding-left:clamp(.9rem,2vw,1.4rem); }
.blank { padding:.7rem .85rem .75rem; border:2px dashed var(--edge); border-radius:9px; background:var(--sunk); }
.blank__l, .sh__lab { display:flex; align-items:center; gap:.5rem; font-size:.68rem; font-weight:700;
                      letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.blank__tag { padding:.12rem .45rem; border-radius:999px; background:var(--rule); color:var(--muted); font-size:.6rem; letter-spacing:.06em; }
.blank__t { margin-top:.45rem; font-size:.78rem; line-height:1.5; color:var(--quiet); font-style:italic; text-wrap:pretty; }
.sh__filled p + p { margin-top:.4rem; font-size:.88rem; line-height:1.55; color:var(--strong); }

/* ---------- rows ---------- */
.rows { margin-top:1.1rem; }
.sh .rows { margin-left:clamp(0px,4vw,5.5rem); }
.row { border-top:1px solid var(--rule); }
.row__hit { width:100%; display:grid; gap:clamp(.6rem,1.6vw,1rem); align-items:center; text-align:left;
  grid-template-columns:5.1rem 7rem minmax(0,1fr) 11rem 1.9rem;
  padding:.5rem .6rem; margin:0; border:0; border-radius:7px; background:none; color:inherit;
  font:inherit; text-decoration:none; cursor:pointer; min-height:52px; }
.row__hit:hover, .row__hit[aria-expanded="true"] { background:var(--sunk); box-shadow:inset 3px 0 0 var(--accent); }
.row__yr { font-size:.72rem; font-weight:700; color:var(--muted); }
.row__tt { font-size:.97rem; font-weight:700; line-height:1.25; letter-spacing:-.008em; }
.row__me { text-align:right; font-size:.875rem; font-weight:700; color:var(--accent); line-height:1.3; }
.row__aff { display:grid; place-items:center; width:26px; height:26px; border-radius:999px;
            border:1.5px solid var(--accent); color:var(--accent); opacity:0; transition:opacity .15s; }
.row__hit:hover .row__aff, .row__hit:focus-visible .row__aff, .row__hit[aria-expanded="true"] .row__aff { opacity:1; }
.row__hit[aria-expanded="true"] .row__aff svg path { d:path("M5 12h14"); }
.row__d { background:var(--sunk); box-shadow:inset 3px 0 0 var(--accent); border-radius:0 0 7px 7px; }
.row__dinner { padding:.9rem 1.1rem 1.1rem clamp(1rem,7vw,10.5rem); }
.row__role { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.row__body { margin-top:.4rem; max-width:42rem; font-size:.92rem; line-height:1.6; text-wrap:pretty; }
/* Visible at rest, unlike the + affordance beside it, so the scan down the
   collapsed list shows which rows open onto something. */
.row__has { margin-left:.5rem; padding:.08rem .38rem; border:1px solid var(--rule); border-radius:4px;
            font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
            color:var(--muted); vertical-align:.14em; white-space:nowrap; }
.row__has--own { border-color:var(--accent); color:var(--accent); }
.row__lab { margin-top:.8rem; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.row__links { margin-top:.8rem; display:flex; flex-wrap:wrap; gap:1rem; }
.row__links a { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:700; min-height:44px; }

/* ---------- thumbnails + the seven primitives ---------- */
.th { position:relative; display:block; width:7rem; height:3.95rem; border-radius:5px;
      overflow:hidden; background:var(--band); flex:none; }
.th img { width:100%; height:100%; object-fit:cover; opacity:1; transition:opacity .25s; }
.th--ph { display:grid; place-items:center; background:var(--tint); }
.th__i { font-size:.72rem; font-weight:700; letter-spacing:.05em; color:var(--accent); }
.ov { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:var(--on-band);
      stroke-width:6; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s; }
.ov circle { fill:var(--on-band); stroke:none; }
.ov .blk rect, .ov .stbox, .ov .fillbox { fill:none; stroke:var(--on-band); }
.ov .filllevel { fill:var(--on-band-a); stroke:none; }
.ov .fitline, .ov .cln { stroke:var(--on-band-a); }

.d { stroke-dasharray:100; stroke-dashoffset:100; }
.p { opacity:0; transform-box:fill-box; transform-origin:center; }
.fitline { opacity:0; transform-origin:120px 69px; }
.blk { opacity:0; }
.st { opacity:0; } .stbox { opacity:0; fill:none; }
.fillbox { opacity:0; } .filllevel { opacity:0; }
.rgh { opacity:0; } .cln { stroke-dasharray:100; stroke-dashoffset:100; opacity:0; }
.sp { opacity:0; transform-box:fill-box; transform-origin:left center; } .hub { opacity:0; }

.s2{animation-delay:.07s}.s3{animation-delay:.14s}.s4{animation-delay:.21s}.s5{animation-delay:.28s}.s6{animation-delay:.35s}
.p2{animation-delay:.035s}.p3{animation-delay:.07s}.p4{animation-delay:.105s}.p5{animation-delay:.14s}
.p6{animation-delay:.175s}.p7{animation-delay:.21s}.p8{animation-delay:.245s}.p9{animation-delay:.28s}.p10{animation-delay:.315s}
.b-m{animation-delay:.06s}.b-r{animation-delay:.12s}
.st2{animation-delay:.14s}.st3{animation-delay:.28s}.st4{animation-delay:.42s}
.sp2{animation-delay:.09s}.sp3{animation-delay:.18s}

/* ---------- candidates, credentials ---------- */
.cands, .creds, .comps { padding:1.9rem 0 1.4rem; border-top:2px solid var(--ink); }
.cands__note { margin-top:.35rem; font-size:.85rem; color:var(--quiet); max-width:42rem; }
.cand { margin-top:.9rem; padding:1rem 1.1rem; border:2px dashed var(--accent-edge); border-radius:12px; background:var(--tint); }
.cand__l { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.cand__t { margin-top:.2rem; font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.cand__n { margin-top:.4rem; max-width:42rem; font-size:.85rem; line-height:1.5; color:var(--strong); }
.cand .rows { margin-top:.5rem; margin-left:0; }
.creds__grid { margin-top:1rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.4rem; }
.cred__h { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.cred ul { margin-top:.5rem; display:flex; flex-direction:column; gap:.45rem; }
.cred li { font-size:.85rem; line-height:1.4; font-weight:700; }
.cred li span { display:block; font-weight:400; color:var(--muted); font-size:.8rem; }
.cred__award { margin-top:.45rem; font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.cred__org { font-size:.8rem; font-weight:700; color:var(--accent); }
.cred__note { margin-top:.4rem; font-size:.82rem; line-height:1.5; color:var(--strong); }

/* ---------- competencies ---------- */
.comps__top { display:flex; gap:2rem; align-items:flex-start; flex-wrap:wrap; }
.comps__lede { margin-top:.5rem; max-width:40rem; font-size:.9rem; line-height:1.55; color:var(--strong); text-wrap:pretty; }
.comps__sub { margin-top:.4rem; max-width:40rem; font-size:.82rem; line-height:1.5; color:var(--quiet); }
.legend { display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-top:1rem; padding:.75rem 1rem;
          border:1px solid var(--rule); border-radius:10px; background:var(--sunk); }
.legend li { display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--strong); }
.mk { display:inline-flex; gap:.15rem; flex:none; }
.mk i, .legend i { font-style:normal; font-size:.75rem; font-weight:700; letter-spacing:.03em; line-height:1; padding:.2rem .26rem; border-radius:3px; }
/* The origin mark reads as one of the set. It was gray on gray, which made the
   one section that is not a shift look like a disabled version of the others
   rather than a peer. Only the thread mark stays apart, and that is deliberate:
   it is outlined because it runs through all of them. */
.mk--shift, .legend .mk--shift,
.mk--origin, .legend .mk--origin { background:var(--tint); color:var(--accent); }
.mk--thread, .legend .mk--thread { background:none; border:1px solid var(--accent-edge); color:var(--accent); padding:.13rem .2rem; }
.comps__cols { margin-top:1.2rem; columns:2; column-gap:2.2rem; }
@media (max-width:52rem) { .comps__cols { columns:1; } }
.cg { break-inside:avoid; margin-bottom:1.3rem; }
.cg__h { display:flex; align-items:baseline; gap:.55rem; margin-bottom:.5rem; font-size:.68rem;
         font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.cg__n { font-size:.65rem; color:var(--quiet); }
.chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.85rem; }
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .55rem .28rem .65rem;
        border-radius:999px; background:none; border:1px solid var(--edge); color:var(--muted);
        font-size:.78rem; line-height:1.2; }
.chip--dim { border-style:dashed; border-color:var(--edge); background:none; color:var(--quiet); padding:.28rem .65rem; }
/* The visible pill is .chip; the hit target is .chip__b inside it, which
   used to be sized to its own text (about 15px tall) - under the 24px WCAG
   target size floor across all 120 competency filters. The padding/negative-
   margin pair grows the hit box to the pill's own edge without moving any
   text or widening the pill itself. */
.chip__b { display:inline-flex; align-items:center; border:0; background:none;
  padding:.4rem 0; margin:-.4rem 0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.chip:has(.chip__b):hover { border-color:var(--accent); }
.chip:has(.chip__b[aria-pressed="true"]) { border-color:var(--accent); color:var(--accent); background:var(--tint); }

/* ---------- contact ---------- */
/* This was a filled slab with solid cream inputs, the last thing left from the
   design before this one. Everything else on the page is hollow: a rule, a thin
   border, ink on paper. The form is now built from the same parts, so it reads
   as the end of the document rather than as a widget dropped onto it. */
/* .cf sits outside <main>, which is what carries the horizontal padding, so
   it has to bring its own or it runs to the screen edge on a phone. */
.cf { max-width:var(--wrap); margin:2.4rem auto 3rem; padding:1.6rem var(--pad) 0;
      border-top:3px solid var(--accent); display:grid; gap:clamp(1.2rem,3vw,2.5rem);
      grid-template-columns:minmax(0,.8fr) minmax(0,1fr); }
.cf__h { font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800; font-size:clamp(1.5rem,3.4vw,2.125rem); letter-spacing:-.03em; line-height:1; color:var(--strong); }
.cf__p { margin-top:.7rem; font-size:.95rem; line-height:1.5; color:var(--ink); text-wrap:pretty; }
.social { display:flex; gap:.6rem; margin-top:1rem; }
.social a { display:grid; place-items:center; width:44px; height:44px; border-radius:999px;
            border:1px solid var(--edge); color:var(--ink); }
.social a:hover { border-color:var(--accent); color:var(--accent); }
.cf__form { display:flex; flex-direction:column; gap:.7rem; }
.cf__pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.7rem; }
.cf__form label { display:block; font-size:.66rem; font-weight:700; letter-spacing:.11em;
                  text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }
.cf__form input, .cf__form textarea { width:100%; min-height:44px; padding:.55rem .7rem;
  border:1px solid var(--edge); border-radius:7px; background:var(--sunk); color:var(--ink);
  font:inherit; font-size:.92rem; }
.cf__form input:focus-visible, .cf__form textarea:focus-visible {
  outline:none; border-color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); }
.cf__form textarea { min-height:6rem; resize:vertical; }
.cf__gotcha { position:absolute; left:-9999px; }
.cf__send { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:.2rem; }
.cf__send button { min-height:44px; padding:0 1.6rem; border:1px solid var(--accent); border-radius:999px;
  background:none; color:var(--accent); font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }
.cf__send button:hover { background:var(--accent); color:var(--paper); }
/* Not opacity: that faded --accent-on-paper down to ~2.8:1, under the AA
   floor the token pairs are otherwise held to. --quiet is proven at 7:1
   against --paper by tools-contrast.mjs, so "disabled" reads as a color
   change instead of a fade. */
.cf__send button[disabled] { border-color:var(--quiet); color:var(--quiet); cursor:not-allowed; }
.cf__send button[disabled]:hover { background:none; color:var(--quiet); }
.cf__no { font-size:.75rem; color:var(--quiet); }
.cf__status { font-size:.82rem; color:var(--accent); }
/* A failure must not look like the thank-you: a rule and weight set it apart
   without leaning on hue, and --strong is proven at 7:1 in both themes. */
.cf__status--err { padding-left:.7rem; border-left:3px solid var(--accent); font-weight:700; color:var(--strong); }
.foot { max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) 2.5rem; font-size:.78rem; color:var(--quiet); }

/* ---------- narrow ---------- */
@media (max-width:60rem) { .cf { grid-template-columns:1fr; } }
@media (max-width:46rem) {
  .hero__in { gap:.9rem; }
  .hero__stack { flex-basis:100%; order:3; }
  .hero__acts { order:2; margin-left:auto; }
  .sh .rows { margin-left:0; }
  /* The year and the outcome each get a row. They used to share one cell, so
     any outcome longer than a few words ran underneath the year. */
  .row__hit { grid-template-columns:5.5rem minmax(0,1fr); grid-template-areas:"th tt" "th yr" "th me"; row-gap:.1rem; padding:.55rem .4rem; }
  /* The width is the track, not a number repeated from the line above: .th
     carries a fixed 7rem for the desktop grid and would otherwise overhang
     this narrower column and sit on top of the title. */
  .row__hit .th { grid-area:th; width:100%; height:auto; aspect-ratio:16/9; }
  .row__tt { grid-area:tt; font-size:.9rem; }
  .row__yr { grid-area:yr; color:var(--muted); }
  .row__me { grid-area:me; text-align:left; justify-self:start; font-size:.75rem; line-height:1.3; }
  .row__aff { display:none; }
  .row__dinner { padding:.8rem .7rem 1rem; }
  .sh__arrow { display:flex; flex-direction:column; gap:.2rem; }
  .sh__x { margin:0; }
  .sh__x::before { content:"\2193"; }
  .sh__x { font-size:0; }
  .sh__x::before { font-size:1.35rem; }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
                           transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ov { opacity:0 !important; }
}

/* ---------- the one reveal ---------- */
/* Transform only. The "to" half used to start at opacity .22, and a contrast
   check run before the reveal fired measured it there: 1.47:1 light, 2.01:1
   dark. Moving text keeps its token color, which tools-contrast.mjs proves. */
.js .sh__arrow .sh__x { transform:translateX(-.4rem); }
.js .sh__arrow .sh__b { display:inline-block; transform:translateY(.18em); }
.js .sh__arrow.is-revealed .sh__x { transform:none; transition:transform .24s ease-out; }
.js .sh__arrow.is-revealed .sh__b { transform:none; transition:transform .38s ease-out .08s; }
@media (prefers-reduced-motion: reduce) {
  .js .sh__arrow .sh__x, .js .sh__arrow .sh__b { transform:none; }
}
/* Read by screen readers, not drawn. */
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
      clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.foot__sub { margin-top:.4rem; font-size:.78rem; color:var(--muted); }

/* Vector icons are square artwork in a 16:9 box: contain them, do not crop. */
/* A single-colour glyph is drawn through a mask rather than shown as an image,
   so it takes --ink and follows the theme. An <img> cannot be recolored by
   CSS, and a cream glyph baked into the file only worked while the dark box
   was behind it. --ic is set per icon in the markup. */
.th--icon { background:none; border-radius:0; padding:.28rem .4rem; }
.th--icon i { display:block; width:100%; height:100%; background:var(--ink);
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; }
.start__c .th--icon { padding:.5rem; }

/* Brand marks keep their own colors, so they stay images rather than masks.
   They needed a cream plate while they were drawn for a white page. The files
   now carry no background of their own and read on either ground, so the plate
   is gone too and they sit on the page like the glyphs. */
.th--art { background:none; border-radius:0; }
.th--art img { object-fit:contain; padding:.28rem .4rem; }
.start__c .th--art img { padding:.5rem; }

/* ---------- engagements ----------
   The page has one job: let a buyer pick an engagement and see why the other
   five are wrong for them. So the comparison table carries the reasons NOT to
   buy as a first-class column, in the same weight as the fee, and every offer
   renders the same blocks in the same order so a skipped block is visible. */
.hero--sv .hero__in { align-items:flex-start; }
.sv-h__back a { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
                color:var(--on-band); opacity:.8; text-decoration:none; }
.sv-h__back a:hover { color:var(--on-band); opacity:1; text-decoration:underline; }
/* The primary action on the portfolio. Filled rather than outlined because it is
   the one thing on that page a buyer is looking for and an outline puts it at
   the same weight as the sample links beside it. */
.hero__cta--hi { background:var(--on-band); color:var(--band); }
.hero__cta--hi:hover { background:none; color:var(--on-band); }

.sv-sec { padding:2rem 0 .6rem; border-top:1px solid var(--rule); }
.sv-sec--top { border-top:0; padding-top:2.2rem; }
.sv-sec--rate { border-top:3px solid var(--accent); }
.sv-sec__p { margin-top:.6rem; max-width:50rem; font-size:.92rem; line-height:1.6; color:var(--strong); text-wrap:pretty; }
/* Stated before the table rather than after it, because a reader who meets
   $120,000 with no range in mind reads it as the price rather than the ceiling. */

/* ---------- the decision table ---------- */
.sv-t { width:100%; margin-top:1.1rem; border-collapse:collapse; font-size:.85rem; }
.sv-t__cap { text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.1em;
             text-transform:uppercase; color:var(--muted); padding-bottom:.5rem; }
.sv-t thead th { text-align:left; vertical-align:bottom; padding:.5rem .7rem; border-bottom:2px solid var(--ink);
                 font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.sv-t td, .sv-t tbody th { text-align:left; vertical-align:top; padding:.8rem .7rem;
                           border-top:1px solid var(--rule); line-height:1.45; text-wrap:pretty; }
.sv-t tbody tr:nth-child(odd) { background:var(--sunk); }
/* Fixed columns rather than content-driven ones. Left to itself the browser gave
   the fee column just enough room to break "$32,000 to $38,000" across two lines,
   which is the one column a reader compares straight down. */
.sv-t { table-layout:fixed; }
.sv-t thead th:nth-child(1) { width:10.5rem; }
.sv-t thead th:nth-child(2) { width:9.5rem; }
.sv-t thead th:nth-child(3) { width:8.5rem; }
.sv-t thead th:nth-child(4) { width:13rem; }
.sv-t thead th:nth-child(5) { width:12rem; }
.sv-t__nm { font-size:.95rem; font-weight:700; line-height:1.25; }
.sv-t__nm a { text-decoration:none; }
.sv-t__nm a:hover { text-decoration:underline; }
.sv-t__fee { font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800;
             font-size:1rem; letter-spacing:-.02em; color:var(--accent); }
/* The column heading carries the meaning, so these two are not distinguished by
   color alone. The weight difference is a second signal for a fast scan, not
   the only one. */
.sv-t__yes { color:var(--ink); font-weight:500; }
.sv-t__no { color:var(--muted); }

/* ---------- offers ---------- */
.sv-o { border-top:1px solid var(--rule); padding:1.7rem 0 1.5rem; scroll-margin-top:1rem;
        display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:clamp(1rem,3vw,2.4rem); }
.sv-os > .sv-o:first-child { border-top:0; }
.sv-o__lab { font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.sv-o__nm { margin-top:.3rem; font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800;
            letter-spacing:-.025em; line-height:1.05; font-size:clamp(1.2rem,2.2vw,1.45rem); color:var(--strong); }
.sv-o__price { margin-top:.6rem; font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800;
               font-size:1.15rem; letter-spacing:-.02em; color:var(--accent); }
.sv-o__term { display:block; font-family:var(--sans); font-weight:700; font-size:.72rem;
              letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:.25rem; }
/* The buyer's own question, in their words. It is the fastest way to tell
   somebody they are in the wrong section. */
.sv-o__q { font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800; letter-spacing:-.02em;
           line-height:1.2; font-size:clamp(1.05rem,2vw,1.25rem); color:var(--ink); max-width:38rem; text-wrap:pretty; }
.sv-o__sum { margin-top:.7rem; max-width:44rem; font-size:.92rem; line-height:1.6; color:var(--strong); text-wrap:pretty; }
.sv-o__cols { margin-top:1.2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.4rem; }
.sv-o__h { font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.sv-o__h + .sv-o__ok, .sv-o__l + .sv-o__h { margin-top:.9rem; }
.sv-o__l { margin-top:.5rem; display:grid; gap:.4rem; }
.sv-o__l li { position:relative; padding-left:1.1rem; font-size:.88rem; line-height:1.5; color:var(--ink); text-wrap:pretty; }
.sv-o__l li::before { content:""; position:absolute; left:0; top:.62em; width:.5rem; height:2px; background:var(--accent); }
.sv-o__l--you li::before { background:var(--muted); }
.sv-o__ok { margin-top:.5rem; padding:.7rem .85rem; border:1px solid var(--accent-edge); border-radius:var(--r);
            background:var(--tint); font-size:.86rem; line-height:1.5; color:var(--ink); text-wrap:pretty; }

/* ---------- how I work ---------- */
.sv-w { margin-top:1.2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.3rem; }
.sv-w__t { font-size:.9rem; font-weight:700; color:var(--strong); }
.sv-w__d { margin:.3rem 0 0; font-size:.87rem; line-height:1.55; color:var(--muted); text-wrap:pretty; }

/* ---------- close ---------- */
/* Inside main, not after it: a section between main and footer is content in no
   landmark at all, which axe flags and a screen reader user has to hunt for. The
   wrap and gutter come from main, so this only draws the rule. */
.sv-cta { margin:2.4rem 0 1rem; padding-top:1.6rem; border-top:3px solid var(--accent); }
.sv-cta .cf__p { max-width:42rem; }
.sv-cta__act { margin-top:1.1rem; }
.sv-cta__btn { display:inline-flex; align-items:center; min-height:44px; padding:0 1.6rem;
               border:1px solid var(--accent); border-radius:999px; color:var(--accent);
               text-decoration:none; font-size:.9rem; font-weight:700; }
.sv-cta__btn:hover { background:var(--accent); color:var(--paper); }

/* ---------- narrow ----------
   Six columns of prose do not survive a phone, and a horizontally scrolled
   comparison hides the column the reader came for. Each row becomes a block
   with its column names printed as labels. The roles in the markup are what
   keep the table a table for a screen reader once display changes. */
@media (max-width:64rem) {
  .sv-o { grid-template-columns:1fr; gap:.9rem; }
  .sv-t { table-layout:auto; }
  .sv-t, .sv-t caption, .sv-t thead, .sv-t tbody, .sv-t tr, .sv-t th, .sv-t td { display:block; }
  .sv-t thead { position:absolute; left:-9999px; }
  .sv-t tbody tr { margin-top:.9rem; padding:1rem 1.1rem; border:1px solid var(--edge); border-radius:var(--r); }
  .sv-t tbody tr:nth-child(odd) { background:var(--sunk); }
  .sv-t td, .sv-t tbody th { border-top:0; padding:.6rem 0 0; }
  .sv-t tbody th { padding:0; }
  .sv-t__nm { font-size:1.05rem; }
  .sv-t td::before { display:block; content:attr(data-l); margin-bottom:.1rem;
    font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
}

/* ---------- draft root ----------
   Skeleton of the replacement front page, at /draft/root/. Everything here is
   built to look unfinished on purpose: a draft that reads as a finished page is
   how placeholder copy gets approved. It uses the engagement page's section
   furniture, because the two have to end up looking like one site. */
/* An aside rather than a bare paragraph: it sits outside every other landmark,
   and content in no landmark at all is content a screen reader user has to hunt
   for. It is tangential to the page it labels, which is what complementary
   means. */
.rt-flag { padding:.7rem var(--pad); background:var(--band); color:var(--on-band);
           font-size:.78rem; font-weight:700; letter-spacing:.02em; }
/* A placeholder says which decision it is waiting on. The dashed rule is the
   same one .blank uses for an unfilled slot on the portfolio, so an unfinished
   thing looks unfinished the same way in both places. */
.ph { background:var(--tint); color:var(--ink); border:1px dashed var(--accent-edge); border-radius:5px;
      padding:.1rem .4rem; font-size:.92em; font-style:italic; text-wrap:pretty; }
/* Display type is set tight, around .94 line-height, which is right for three
   words and wrong for a placeholder holding a whole instruction: the highlight
   boxes overlapped and ate the line above. Any heading actually carrying one
   gets its leading back, and only that heading. */
.hero__claim:has(.ph), .hero__name:has(.ph), .h2:has(.ph), .cf__h:has(.ph), .sv-o__q:has(.ph) { line-height:1.5; }
.ph-soon { display:inline-block; margin-top:.4rem; font-size:.72rem; font-weight:700;
           letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rt-p { margin-top:1.1rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.3rem; }
.rt-p__i { padding-left:1rem; border-left:4px solid var(--accent); }
.rt-p__k { font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.rt-p__t { margin-top:.3rem; font-size:.95rem; font-weight:700; line-height:1.3; color:var(--strong); text-wrap:pretty; }
.rt-p__n { margin-top:.4rem; font-size:.86rem; line-height:1.5; color:var(--ink); text-wrap:pretty; }
.rt-who { margin-top:1rem; max-width:50rem; }