/* ============================================================================
   Ink — the work section's typographic system (2026-07-25)

   Scope: body.ink-work, set in header.php for exactly work / case-studies /
   casestudy / resume / patents. NOT .template-work, which is also on the
   palette tools and kaleidoscope, and NOT work.css, which A Book of Colors,
   privacy, support and kaleidoscope all load.

   This file is additive and loads last, so removing its <link> in header.php
   reverts the whole section. Nothing here edits work.css or casestudy.css.

   Three moves, borrowed from the portfolio page:
     1. Hanken Grotesk, the same three weights the portfolio already serves.
     2. Records at 14px / 1.1–1.35, prose at 17px / 1.5. The tight leading is
        what makes a page read as a record rather than an article.
     3. Coral is structural only: the page rule, the active subnav marker, the
        portfolio button. Nothing else.
   ============================================================================ */

@font-face{font-family:"Hanken Grotesk";src:url('../fonts/portfolio/hanken-grotesk-v12-latin-regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:"Hanken Grotesk";src:url('../fonts/portfolio/hanken-grotesk-v12-latin-600.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:"Hanken Grotesk";src:url('../fonts/portfolio/hanken-grotesk-v12-latin-700.woff2') format('woff2');font-weight:700;font-display:swap;}

body.ink-work{
  --ink-bg:#111110;
  --ink-cream:#F0EBE0;
  --ink-muted:#8A8A80;   /* 5.0:1 on the ground */
  --ink-dim:#838278;     /* 4.85:1. Was #4A4A44 at 2.4:1 — do not darken it back */
  --ink-rule:#26251f;
  --ink-coral:#E8503A;   /* white on it: 4.6:1 */
  --ink-font:"Hanken Grotesk",Helvetica,Arial,sans-serif;

  background:var(--ink-bg);
  color:var(--ink-cream);
  font-family:var(--ink-font);
}
/* work.css grounds the chrome in #171717; Ink's page is #111110, which left the
   nav and footer reading as lighter bands against it. */
body.ink-work .site-nav,
body.ink-work .site-footer,
body.ink-work .nav-overlay{ font-family:var(--ink-font); background:var(--ink-bg); }

/* ---- measure ----
   Overview, Resume, Patents, Philosophy and the case studies index keep the SITEWIDE
   container: work.css and casestudy.css already set 672px / 32px padding, which is the
   same column the fixed nav aligns to
   (`padding-left: max(32px, calc((100% - var(--container-w)) / 2 + 32px))`).
   An earlier version widened these to 960px and their content then started 144px left of
   the header's own left edge (Jason, 2026-07-26). Only the case study deep dives leave
   this column, because they run the portfolio's layout instead. */

/* ---- page header: label, subnav, title ----
   Overview / Resume / Patents / Philosophy keep work.css's hairline under the header and
   the space beneath it (Jason, 2026-07-26); only the colour is restated in Ink's token.
   The case studies index drops it, because its own coral rule sits a few lines below. */
/* Overview, Resume, Patents, Philosophy and the case studies index all share this, so
   content begins on the same line on every page in the section (Jason, 2026-07-26). */
body.ink-work .work-index-header,
body.ink-work .cs-index .cs-pagehead{
  border-bottom:1px solid var(--ink-rule); padding:48px 0 30px; margin-bottom:38px;
}

body.ink-work .work-index-title,
body.ink-work .cs-pagelabel{
  font-family:var(--ink-font);
  font-size:13px; font-weight:700; letter-spacing:.35em; text-transform:uppercase;
  color:var(--ink-muted); margin:0 0 18px;
}
body.ink-work .work-index-links a,
body.ink-work .cs-pagehead .work-index-links a{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-muted);
  text-decoration:none; padding-bottom:3px;
}
body.ink-work .work-index-links a:hover{ color:var(--ink-cream); }
/* the active marker is the one nav use of coral; it replaces the underline entirely */
body.ink-work .work-index-links a.is-active{
  color:var(--ink-cream); text-decoration:none;
  border-bottom:1px solid var(--ink-coral);
}

/* Page title. On resume/patents/overview this element is new (the old pages had
   only the "Work" label); on the case studies page it is the existing headline. */
body.ink-work .ink-title,
body.ink-work .cs-lead .cs-headline{
  font-family:var(--ink-font);
  font-size:clamp(34px,6vw,58px); font-weight:700; line-height:1; letter-spacing:-.03em;
  color:var(--ink-cream); text-wrap:balance;
  /* top stays 0 so this page starts on the same line as the other tabs; the space goes
     underneath, where the essay begins */
  margin:0 0 28px;
}
/* The rule under the title: 64px of coral, then the hairline. The only horizontal
   rule on the page that carries colour. */
body.ink-work .ink-rule{
  height:1px; margin:24px 0 26px; border:0;
  background:linear-gradient(90deg,var(--ink-coral) 0 64px,var(--ink-rule) 64px);
}

/* ---- one paragraph spec for the section (Jason, 2026-07-26) ----
   Patents' paragraph is the reference: 17 / 1.5, cream, 64ch, 16px apart. Overview,
   Resume, Philosophy and the index all use it, so a paragraph reads identically wherever
   it appears. Small meta lines (locations, headcounts, captions) are not paragraphs and
   keep their own sizes. */
body.ink-work .cs-lead .cs-prose p,
body.ink-work .work-about-body p,
body.ink-work.template-patents .work-body > p,
body.ink-work.template-philosophy .work-body p,
body.ink-work.template-resume .resume-intro > p:first-child,
body.ink-work.template-resume .work-body > h2 ~ p{
  font-size:17px; line-height:1.6; color:var(--ink-cream); max-width:64ch; margin:0 0 22px;
}
/* the role line's strong sat at 14px, which now clashes with 17px copy around it */
body.ink-work.template-resume .work-body > h2 + p strong{ font-size:inherit; }
body.ink-work .work-about-body p strong{ font-weight:700; color:var(--ink-cream); }
body.ink-work .cs-lead .cs-prose{ columns:1; margin-top:0; }
/* casestudy.css pads .cs-lead 16px from the top, which is why this page's first
   paragraph sat 16px lower than the other four tabs (Jason, 2026-07-26) */
body.ink-work .cs-index .cs-lead{ padding-top:0; }

/* ---- section caps ---- */
body.ink-work .cs-beat-label,
body.ink-work .work-about-heading{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-muted); margin:0 0 18px;
}
body.ink-work .cs-teams-cap{ color:var(--ink-muted) !important; }
/* both blocks get the same air above them, so the page keeps one rhythm rather than
   Teams sitting tighter than How I lead (Jason, 2026-07-26) */
body.ink-work .cs-leadlist,
body.ink-work .cs-teams{ margin-top:64px; }
/* casestudy.css rules off the top of the teams block; the rule is gone here (Jason,
   2026-07-26) and the space alone separates the two sections. */
body.ink-work .cs-teams{ margin-top:52px; border-top:none; padding-top:0; }
body.ink-work .cs-teams .cs-teams-cap{ margin:0 0 18px; }

/* ---- How I lead: numbered because the list is a set of five, not a sequence,
   so the numerals are identity, not order. Coral holds them. ---- */
body.ink-work .cs-leadlist ul{ counter-reset:lead; list-style:none; margin:0; padding:0; display:grid; gap:16px; }
body.ink-work .cs-leadlist li{
  counter-increment:lead;
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 20px; align-items:baseline;
  font-size:14px; line-height:1.35; color:var(--ink-cream);
}
/* casestudy.css draws a 6px coral dot here. Setting content alone leaves the
   numeral inside that 6px box, so every box property has to be undone too. */
body.ink-work .cs-leadlist li::before{
  content:counter(lead,upper-roman);
  width:auto; height:auto; background:none; border-radius:0; margin-top:0;
  font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--ink-coral);
}
body.ink-work .cs-leadlist li::marker{ content:none; }

/* ---- Teams I've led ---- */
body.ink-work .cs-teams table{ width:100%; border-collapse:collapse; }
body.ink-work .cs-teams td{
  font-size:14px; line-height:1.35; padding:12px 0; border-bottom:1px solid var(--ink-rule);
  vertical-align:baseline;
}
body.ink-work .cs-teams td.co{ font-weight:700; color:var(--ink-cream); width:20%; }
body.ink-work .cs-teams td.tm{ color:var(--ink-muted); width:60%; }
body.ink-work .cs-teams td.sz{ color:var(--ink-cream); text-align:right; font-variant-numeric:tabular-nums; }

/* ---- the portfolio link ----
   The button survives only on the case studies page, where it is the page's single next
   step. Everywhere else this is a link: those pages are records a recruiter reads, and a
   coral bar under every title outranked the content it sat above. */
body.ink-work .ink-link{
  display:inline-flex; align-items:baseline; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-cream); text-decoration:none;
  border-bottom:1px solid var(--ink-coral); padding-bottom:4px; transition:color .16s;
}
/* Every link in the section behaves the same way: cream on a coral underline, and the
   text itself turns coral on hover. The contact links and the resume download link used
   to do the reverse, a grey underline that turned coral (Jason, 2026-07-26). */
body.ink-work .work-social-link,
body.ink-work .resume-download a{
  color:var(--ink-cream); text-decoration:none;
  border-bottom:1px solid var(--ink-coral); padding-bottom:4px;
  transition:color .16s;
}
body.ink-work .ink-link:hover,
body.ink-work .work-social-link:hover,
body.ink-work .resume-download a:hover{ color:var(--ink-coral); border-bottom-color:var(--ink-coral); }
body.ink-work .ink-link:focus-visible,
body.ink-work .work-social-link:focus-visible,
body.ink-work .resume-download a:focus-visible{ outline:2px solid var(--ink-cream); outline-offset:3px; }
body.ink-work .ink-link-arw{ font-weight:400; font-size:14px; line-height:1; }
/* Up-and-to-the-right, drawn as the same → rotated 45°, so its stroke, head and weight match
   the plain right arrow exactly. Hanken has no ↗, so that character fell back to a system
   font and never matched. */
body.ink-work .ink-arw-ne{ display:inline-block; transform:rotate(-45deg); }

/* Resume: the intro block and the portfolio link share one wrapper, which is a single
   grid item spanning both columns. Inside it the two links are inline-blocks, so they sit
   on one line with the download label intact. */
body.ink-work.template-resume .work-body > .resume-intro{ grid-column:1 / -1; padding-bottom:34px; }
body.ink-work.template-resume .resume-intro .resume-download,
body.ink-work.template-resume .resume-intro .ink-cta{
  display:inline-block; margin:14px 0 0; vertical-align:baseline;
}
body.ink-work.template-resume .resume-intro .ink-cta{ padding-left:44px; }

/* ---- the portfolio button (case studies page only) ---- */
/* One value for the space under the portfolio link on every tab: 34px, whatever the next
   element is. Each of those elements had its own top margin, so they are zeroed here rather
   than left to add themselves on (Jason, 2026-07-26). */
body.ink-work .ink-cta{ margin:14px 0 34px; }
body.ink-work .ink-cta + .patents-list{ margin-top:18px; }  /* matches the resume gap */
body.ink-work .ink-cta + .work-about-section{ padding-top:0; }
/* the button's own 34px is the whole gap here, same as the links on the other tabs; the
   list's 64px would otherwise stack on top of it (Jason, 2026-07-26) */
body.ink-work .ink-cta + .cs-leadlist{ margin-top:0; }
/* the case studies page runs the button, which sets its own rhythm */
body.ink-work.template-case-studies .ink-cta{ margin:16px 0 34px; }  /* reads even: the block sits tighter than type */
body.ink-work .ink-btn{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--ink-coral); color:#fff; text-decoration:none;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 24px; border-radius:4px; transition:background .16s;
}
body.ink-work .ink-btn:hover{ background:#d1442d; }
body.ink-work .ink-btn .ink-btn-arw{ font-weight:400; font-size:15px; line-height:1; }
body.ink-work .ink-btn:focus-visible{ outline:2px solid var(--ink-cream); outline-offset:3px; }

/* ---- Overview: contact grid ---- */
body.ink-work .work-social-grid{
  display:flex; gap:56px; flex-wrap:wrap; grid-template-columns:none; padding:0;
}
body.ink-work .work-social-label{
  font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:7px;
}
/* colour, underline and hover come from the shared link rule above; only the type is
   set here, or the grey underline would win on source order */
body.ink-work .work-social-link{ font-size:15px; font-weight:700; }
/* the portfolio entry in the contact grid is a call to action, not an address, so it takes
   the same caps treatment as the links on the other tabs (Jason, 2026-07-26) */
body.ink-work .ink-social-cta{ text-transform:uppercase; font-size:13px; letter-spacing:.12em; }
body.ink-work .work-about-section{ padding:0 0 40px; }
body.ink-work .work-social-grid + .work-about-section{ padding-top:46px; }

/* ---- Philosophy: prose, not a record ----
   Six principles, each a heading over real paragraphs. It keeps reading leading
   throughout and never enters the two-column grid below. */
body.ink-work.template-philosophy .work-body h2,
body.ink-work.template-philosophy .work-body h3{
  font-size:22px; font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--ink-cream);
  margin:26px 0 12px; padding-top:20px; border-top:1px solid var(--ink-rule); max-width:64ch;
}
/* the first principle sits right under the page rule; a second hairline there reads
   as a mistake */
body.ink-work.template-philosophy .work-body > :first-child{ margin-top:0; }
body.ink-work.template-philosophy .work-body > h2:first-child,
body.ink-work.template-philosophy .work-body > h3:first-child{ border-top:none; padding-top:0; }


/* ---- Resume ----
   The body is a flat run of blocks: h2 company, then the role paragraph, the
   description, and a headcount line. Placing h2 in column 1 and every following
   p in column 2 lets grid auto-placement pair each company with its own entry
   without touching the content or the template. Column gap is 0 and the gutter
   is padding on the h2, so the two border-tops meet as one continuous rule.

   Scoped to the resume page: philosophy and patents share the .work-body class
   and are prose, which this grid would shred. */
/* max-content, not a fraction: the column ends up exactly as wide as the longest company
   name plus the gutter below, so nothing wraps in it and every pixel it does not need goes
   to the entry text (Jason, 2026-07-26). */
body.ink-work.template-resume .work-body{
  display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:0;
}
/* The intro spans both columns. The download link does NOT: it takes column 1 so the
   portfolio link, which follows it, lands in column 2 of the same row (see the CTA rules
   above). It used to span 1 / -1, which pushed the portfolio link onto its own row. */
body.ink-work.template-resume .work-body > p:first-child{ grid-column:1 / -1; }
body.ink-work.template-resume .work-body > h2{
  grid-column:1; padding:27px 24px 22px 0; margin:0;
  border-top:1px solid var(--ink-rule);
  font-size:17px; font-weight:700; line-height:1.05; letter-spacing:-.015em; color:var(--ink-cream);
}
body.ink-work.template-resume .work-body > h2 ~ p{ grid-column:2; padding:0; }
body.ink-work.template-resume .work-body > h2 + p{ padding:22px 0 0; border-top:1px solid var(--ink-rule); }
body.ink-work.template-resume .work-body > h2 ~ p + p{ padding-top:7px; }
body.ink-work.template-resume .work-body > h2 ~ p:last-child{ padding-bottom:22px; }
/* The role line is "<strong>Title</strong> · years<br><small>City</small>". Keeping
   strong inline lets the title and the years read as one line; the br then puts the
   location on its own. Blocking the strong instead stranded the "·" and, with the br
   suppressed, ran the city straight into the year. */
body.ink-work.template-resume .work-body > h2 + p strong{
  font-size:14px; font-weight:700; color:var(--ink-cream);
}
body.ink-work.template-resume .work-body > h2 ~ p small{
  display:inline-block; margin-top:4px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
}
body.ink-work .resume-download a{
  display:inline-flex; align-items:center; gap:9px; margin:0;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-cream); text-decoration:none;
  border-bottom:1px solid var(--ink-coral); padding-bottom:4px;
}

/* ---- Patents ----
   Deliberately unnumbered: the patent number is the record's identity, and an
   invented i–vi would imply a ranking that does not exist. */
body.ink-work .patents-list{ list-style:none; margin:34px 0 0; padding:0; display:block; }
/* work.css makes each li a `18px 1fr` grid for its bullet. With the bullet gone the
   row would land in the 18px column and wrap one word per line, so the li goes back
   to being a plain block and the span inside it carries the two-column layout. */
body.ink-work .patents-list li{ display:block; margin:0; padding:0; }
body.ink-work .patents-list li::before{ content:none; display:none; }
body.ink-work .patents-list li span{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 40px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--ink-rule);
}
body.ink-work .patents-list li:first-child span{ border-top:1px solid var(--ink-rule); }
body.ink-work .patents-list a{
  font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--ink-cream); text-decoration:none;
}
body.ink-work .patents-list a:hover{ color:var(--ink-coral); }
body.ink-work .patents-list small{
  font-size:12px; letter-spacing:.1em; color:var(--ink-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---- Case study chrome: the portfolio's layout, measured off portfolio.css ----
   The identity block is fixed at top:34px / left:40px and the content column is
   offset by the same 300px gutter, so a study scrolls exactly the way the portfolio
   does: chrome stays, content moves under it. Past 1500px the gutter grows instead
   of stranding empty space on the right, matching the portfolio's own rule. */
body.ink-work.template-casestudy{ --ink-flow-ml:300px; }
body.ink-work.template-casestudy .cs-page{ padding-top:0; }
/* padding matches .pf-panel's 44px inset, so a study's text occupies the same column
   as the portfolio's panel content rather than running the full width of the flow */
body.ink-work.template-casestudy .cs-wrap{
  margin:0 40px 0 var(--ink-flow-ml); max-width:1120px; min-width:0; padding:0 44px;
}
@media (min-width:1500px){
  body.ink-work.template-casestudy{ --ink-flow-ml:calc(100vw - 1160px); }
}
body.ink-work.template-casestudy .cs-pagehead--pf{
  position:fixed; top:34px; left:40px; z-index:5; width:212px;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:0;
}
/* type copied from .pf-id so both pages set the name identically */
body.ink-work .ink-id strong{
  display:block; font-size:26px; font-weight:700; line-height:1.1; letter-spacing:-.01em;
  color:var(--ink-cream);
}
/* cream, not muted: .pf-id sets the name and the title in the same colour, so the two
   pages' identity blocks read identically */
body.ink-work .ink-id span{
  display:block; margin-top:7px; font-size:13px; letter-spacing:.04em; color:var(--ink-cream);
}
/* a link under the identity, not a pill: it lives in the portfolio's nav slot, where
   that page sets plain type rather than controls */
body.ink-work .ink-back{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-cream); text-decoration:none; transition:color .16s;
}
body.ink-work .ink-back:hover{ color:var(--ink-coral); }
body.ink-work .ink-back:focus-visible{ outline:2px solid var(--ink-cream); outline-offset:3px; }
body.ink-work .ink-back-arw{ color:var(--ink-coral); font-weight:400; font-size:14px; line-height:1; }

/* copied from .pf-foot: one fixed line in the gutter instead of the site footer */
body.ink-work.template-casestudy .ink-foot{
  position:fixed; left:40px; bottom:8px; z-index:5; margin:0;
  font-size:11px; letter-spacing:.05em; color:var(--ink-cream);
}

/* The App Store call to action belongs in the left gutter, in the same column as the identity
   block, rather than floating over the flow on the right (Jason, 2026-07-26). casestudy.css
   pins it to `left: calc(50% + 360px)`, sized for the old 672px column, and falls back to
   `right:24px` under 1240px; both are cancelled here.
   Bottom clears the fixed copyright line by 100px MEASURED ON THE RENDERED SHAPE, which is not
   the same as the layout box: casestudy.css rotates the button 6deg about its left-bottom
   corner, so the right-hand corner hangs 183px * sin(6deg) = 19px below it. 8px (.ink-foot
   bottom) + 18px (its line box) + 100px + 19px (the overhang) = 145px. Left matches
   .ink-id / .ink-foot exactly.
   Desktop only: under 901px the gutter collapses and the chrome goes static, so the button
   keeps casestudy.css's corner placement. */
@media (min-width:901px){
  body.ink-work.template-casestudy .cs-app-cta{
    left:40px; right:auto; bottom:145px;
  }
}

/* Under 900px the portfolio drops its fixed chrome; a study does the same and lets the
   identity sit at the top of the flow, since fixed chrome would cover the content. The
   copyright line cannot simply be hidden the way the portfolio hides its own, because
   here it is the only footer the page has, so it returns to the end of the flow. */
@media (max-width:900px){
  body.ink-work.template-casestudy .cs-wrap{ margin:0; padding:0 22px; }
  body.ink-work.template-casestudy .cs-pagehead--pf{
    position:static; width:auto; padding:28px 0 0; gap:12px;
  }
  body.ink-work.template-casestudy .ink-foot{
    position:static; padding:26px 22px 30px; text-align:center;
  }
}

/* The way out at the foot of a study: a link rather than a second pill, so it closes
   the page quietly instead of competing with the one at the top. */
body.ink-work .ink-back-foot{
  margin:64px 0 0; padding:26px 0 0; border-top:1px solid var(--ink-rule);
}
/* The link is the last thing in the flow on a study, so the page ended flush against it.
   100px of air below it (Jason, 2026-07-26). Desktop only: under 901px the copyright line
   rejoins the flow underneath and carries its own 30px, so the gap is not needed there. */
@media (min-width:901px){
  body.ink-work.template-casestudy .ink-back-foot{ padding-bottom:100px; }
}
body.ink-work .ink-back-foot a{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-cream); text-decoration:none; transition:color .16s;
}
body.ink-work .ink-back-foot a:hover{ color:var(--ink-coral); }
body.ink-work .ink-back-foot a:focus-visible{ outline:2px solid var(--ink-cream); outline-offset:3px; }

/* ---- Case study deep dives ----
   The pages behind the portfolio. Same system: a real title, prose at reading
   leading, structure at record density, coral on the numbers and nowhere else.
   casestudy.css still owns their layout; this only re-sets the type and colour. */
/* the Ink header drops work.css's bottom border, so the study head has to carry its
   own space or the eyebrow collides with the subnav */
body.ink-work.template-casestudy .cs-head{ margin-top:34px; }
body.ink-work.template-casestudy .cs-title{
  font-size:clamp(30px,4.4vw,46px); font-weight:700; line-height:1.02; letter-spacing:-.03em;
  margin:16px 0 0;
}
body.ink-work.template-casestudy .cs-eyebrow{ letter-spacing:.16em; color:var(--ink-muted); }
body.ink-work.template-casestudy .cs-thesis{
  font-size:20px; line-height:1.35; opacity:1; color:var(--ink-cream); max-width:56ch; margin-top:18px;
}
/* the meta strip is the densest record on the page */
body.ink-work.template-casestudy .cs-meta{
  border-color:var(--ink-rule); padding:20px 0; margin-top:34px;
}
body.ink-work.template-casestudy .cs-meta dt{
  font-size:11px; letter-spacing:.16em; color:var(--ink-muted); margin-bottom:6px;
}
body.ink-work.template-casestudy .cs-meta dd{ font-size:14px; line-height:1.2; color:var(--ink-cream); }
/* contribution keeps its rule, but coral is spent on metrics, so the rule goes quiet */
body.ink-work.template-casestudy .cs-contrib{
  border-left-color:var(--ink-rule); color:var(--ink-cream); font-style:normal;
  font-size:15px; line-height:1.45;
}
body.ink-work.template-casestudy .cs-beat-head h3{
  font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1;
}
body.ink-work.template-casestudy .cs-beat-label{ color:var(--ink-muted); }
/* the one capped thing on the page, matching the portfolio's own prose cap of 76ch:
   a character count, so it holds its measure while the column around it scales */
body.ink-work.template-casestudy .cs-body .cs-section p{
  font-size:17px; line-height:1.5; max-width:76ch; color:var(--ink-cream);
}
/* casestudy.css breaks standalone media out of the column with calc(100% + 200px) and a
   -100px pull, sized for the old 672px text column. In this wider column that puts every
   image 100px past the text on both sides, so the breakout is cancelled and media aligns
   to the column. The caption's centring existed only to undo that pull, so it goes too. */
/* Media fills the fluid column, exactly as .pf-content does inside a panel: the column
   itself is what scales with the viewport, so nothing here is given a width of its own.
   This supersedes the earlier fixed 64ch cap, which did not scale. */
body.ink-work.template-casestudy .cs-img-wrap,
body.ink-work.template-casestudy .cs-media,
body.ink-work.template-casestudy .cs-pillar-fig,
body.ink-work.template-casestudy figure{
  width:100%; max-width:100%; margin-left:0; margin-right:0;
}
body.ink-work.template-casestudy .cs-img-wrap img,
body.ink-work.template-casestudy .cs-media img,
body.ink-work.template-casestudy .cs-media video{ max-width:100%; height:auto; }
/* captions centered under their media (Jason, 2026-07-31 — supersedes the earlier
   left-align call; sizing/margin overrides of casestudy.css kept) */
body.ink-work.template-casestudy .cs-img-caption,
body.ink-work.template-casestudy .cs-media figcaption,
body.ink-work.template-casestudy .cs-pillar-fig figcaption{
  max-width:100%; margin-inline:0; text-align:center; font-size:13px; line-height:1.3;
  color:var(--ink-muted);
}

body.ink-work.template-casestudy .cs-pillar-num,
body.ink-work.template-casestudy .cs-metric-val{ color:var(--ink-coral); }
body.ink-work.template-casestudy .cs-pillar-body h4{ font-size:15px; font-weight:700; }
body.ink-work.template-casestudy .cs-pillar-body p,
body.ink-work.template-casestudy .cs-metric-lbl{ font-size:14px; line-height:1.35; color:var(--ink-muted); }
body.ink-work.template-casestudy .cs-metric-detail{ color:var(--ink-dim); }
body.ink-work.template-casestudy .cs-quote p{ font-style:normal; font-size:20px; line-height:1.3; }
body.ink-work.template-casestudy .cs-quote cite{ color:var(--ink-muted); }
/* the list of other studies at the foot: an index, not a gallery */
body.ink-work .cs-studies-cap{ color:var(--ink-muted) !important; }
body.ink-work .cs-study{ border-top-color:var(--ink-rule); }
body.ink-work .cs-study:hover{ background:#191815; }
body.ink-work .cs-study-num{ color:var(--ink-coral); }
body.ink-work .cs-study-text h3{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
body.ink-work .cs-study-meta{ color:var(--ink-muted); letter-spacing:.1em; }
body.ink-work .cs-study-desc{ font-size:14px; line-height:1.35; color:var(--ink-muted); }

/* ---- narrow ---- */
@media (max-width:820px){
  body.ink-work.template-resume .work-body{ display:block; }
  /* the two links stack here, so the 44px that separates them side by side would read as
     an indent on the second one (Jason, 2026-07-26) */
  body.ink-work.template-resume .resume-intro .ink-cta{ display:block; padding-left:0; margin-top:16px; }
  body.ink-work.template-resume .work-body > h2{ padding:22px 0 8px; }
  body.ink-work.template-resume .work-body > h2 + p{ padding-top:0; border-top:none; }
  body.ink-work.template-resume .work-body > h2 ~ p:last-child{ padding-bottom:0; }
  body.ink-work .cs-leadlist li{ grid-template-columns:26px minmax(0,1fr); }
  body.ink-work .work-social-grid{ gap:26px 40px; }
  body.ink-work .patents-list li span{ grid-template-columns:1fr; gap:5px; }
}

/* Arrows like ↗ and ↓ are in the emoji set, so iOS renders them as blue glyphs.
   Each one also carries U+FE0E in the markup; this is the belt-and-braces for any that
   slip through (Jason, 2026-07-26). */
body.ink-work, body.ink-work *{ font-variant-emoji:text; }