/* ==========================================================================
   JOELLE MORIARTY — PORTFOLIO
   Palette   the six brand hexes, verbatim.
   Type      Solway (Headline 1) + Be Vietnam Pro (Headline 2/3, body).
   Material  the brand's paper goods: ruled paper, graph paper, and the
             ornamented index card. Case studies ARE index cards.

   Contrast notes: the periwinkle eyebrow uses white type, which sits below
   WCAG AA for small text — it is a decorative label, and the section heading
   beneath it carries the same words at full contrast. The orange button fills
   with a deepened orange so its white label clears 5.3:1. Full-strength
   #d24d19 appears everywhere it carries no small type.

   The four --*-ink tones are the case-study/section accents and must stay
   tellable apart at a glance: hues sit at roughly 18 (orange), 37 (gold),
   82 (green), 219 (blue). Gold and green were 44 and 56 and read as one
   color; green now leans true olive, gold leans amber. Each ink clears
   4.5:1 on white, on --cream, and on its own --*-pale tint.
   ========================================================================== */

:root{
  --white:#ffffff; --cream:#f5f0e9; --orange:#d24d19; --chartreuse:#b4ab2c;
  --periwinkle:#7d9dd2; --butter:#f3d58d; --charcoal:#31322f;

  --orange-ink:#b8420f; --green-ink:#4f6b1e; --blue-ink:#3f63a6; --gold-ink:#8f5e0d;

  --ink:#31322f; --ink-soft:#55574f; --ink-faint:#6a6c62; --rule:#e2dacb;

  --orange-pale:#fbe7de; --green-pale:#ebf1d6; --blue-pale:#eaf0fa; --gold-pale:#fceed0;

  --shadow:4px 4px 0 var(--charcoal);
  --shadow-lift:7px 7px 0 var(--charcoal);
  --max:1140px; --radius:10px;

  /* figure surface: same periwinkle rule as .paper-graph */
  --fig-grid:rgba(125,157,210,.22);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px;}
body{
  background:var(--white); color:var(--ink);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
::selection{background:var(--butter);color:var(--charcoal);}
:focus-visible{outline:3px solid var(--orange-ink);outline-offset:3px;border-radius:3px;}

h1{font-family:'Solway',Georgia,serif;font-weight:700;line-height:1.04;letter-spacing:-0.02em;}
h2{font-family:'Solway',Georgia,serif;font-weight:700;line-height:1.1;letter-spacing:-0.015em;}
h3,h4,h5{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;line-height:1.25;}

/* eyebrow — a label, not a button: no shadow, nothing interactive-looking */
.eyebrow{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--white);background:var(--periwinkle);
  padding:6px 13px;border-radius:5px;
}
.meta{font-size:11.5px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-faint);}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);}
.section{padding-block:clamp(64px,10vw,116px);}
.section--cream{background:var(--cream);border-block:1px solid var(--rule);}
.section--white{background:var(--white);border-block:1px solid var(--rule);}

.paper-graph{
  background-color:var(--white);
  background-image:
    repeating-linear-gradient(to right, transparent 0 25px, rgba(125,157,210,.22) 25px 26px),
    repeating-linear-gradient(to bottom, transparent 0 25px, rgba(125,157,210,.22) 25px 26px);
}
.paper-ruled{
  background-color:var(--white);
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, rgba(125,157,210,.30) 31px 32px);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Be Vietnam Pro',sans-serif;font-size:15.5px;font-weight:700;
  text-decoration:none;padding:14px 26px;border-radius:var(--radius);
  border:2px solid var(--charcoal);box-shadow:var(--shadow);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lift);}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--charcoal);}
.btn--primary{background:var(--chartreuse);color:var(--charcoal);}
.btn--secondary{background:var(--orange-ink);color:#fff;}
.btn--tertiary{background:var(--butter);color:var(--charcoal);}

/* ==========================================================================
   WORDMARK
   ========================================================================== */
.mark{position:relative;display:block;width:100%;}
.mark img{width:100%;height:auto;transform-origin:60% 70%;}
.mark:hover img,.mark:focus-visible img{animation:whisk 1.2s ease-in-out;}
@keyframes whisk{
  0%,100%{transform:rotate(0deg);}
  18%{transform:rotate(-2.4deg);}
  42%{transform:rotate(1.8deg);}
  68%{transform:rotate(-1deg);}
  86%{transform:rotate(.5deg);}
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(20px) scale(.97);}
  to{opacity:1;transform:none;}
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:2px solid var(--charcoal);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:88px;}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.brand img{height:68px;width:auto;transform-origin:62% 68%;}
.brand:hover img,.brand:focus-visible img{animation:whisk 1.2s ease-in-out;}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;}
.nav-links a{
  font-size:15px;font-weight:600;text-decoration:none;color:var(--charcoal);
  padding-block:4px;border-bottom:2.5px solid transparent;white-space:nowrap;
  transition:color .14s,border-color .14s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--green-ink);border-bottom-color:var(--chartreuse);}
.nav-cta{
  flex-shrink:0;font-size:14.5px;font-weight:700;
  text-decoration:none;color:var(--charcoal);background:var(--chartreuse);
  border:2px solid var(--charcoal);border-radius:8px;padding:9px 16px;box-shadow:3px 3px 0 var(--charcoal);
  transition:transform .15s ease,box-shadow .15s ease;
}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--charcoal);}
.nav-toggle{display:none;background:var(--white);border:2px solid var(--charcoal);border-radius:8px;width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--charcoal);}
.nav-toggle span{display:block;width:19px;height:2.4px;background:var(--charcoal);position:relative;transition:background .15s;}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:19px;height:2.4px;background:var(--charcoal);transition:transform .18s ease;}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:940px){
  .nav .wrap{height:74px;}
  .brand img{height:54px;}
  .nav-toggle{display:flex;}
  .nav-panel{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:2px solid var(--charcoal);display:none;padding:8px clamp(20px,5vw,40px) 22px;}
  .nav-panel.open{display:block;}
  .nav-links{flex-direction:column;align-items:stretch;gap:0;}
  .nav-links a{display:block;padding:14px 0;font-size:16.5px;border-bottom:1px solid var(--rule);}
  .nav-panel .nav-cta{display:inline-block;margin-top:18px;}
  .nav > .wrap > .nav-cta{display:none;}
}
@media (min-width:941px){
  .nav-panel{display:contents;}
  .nav-panel .nav-cta{display:none;}
}
@media (min-width:941px) and (max-width:1060px){
  .nav-links{gap:18px;}
  .nav-links a{font-size:14.5px;}
  .brand img{height:58px;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{background:var(--cream);padding-block:clamp(44px,6vw,76px) clamp(52px,7vw,88px);border-bottom:2px solid var(--charcoal);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(24px,5vw,56px);align-items:center;}
.hero-greet{font-family:'Solway',Georgia,serif;font-weight:700;font-size:clamp(24px,3.8vw,32px);color:var(--orange-ink);letter-spacing:-0.01em;}
.hero-role{margin-top:8px;font-size:clamp(16.5px,2.1vw,18.5px);color:var(--ink-soft);}
.hero h1{font-size:clamp(32px,5.6vw,56px);margin:22px 0 24px;text-wrap:balance;}

/* portrait: cut-out photo over a periwinkle halo, dissolving into the paper */
.portrait{position:relative;width:100%;max-width:430px;justify-self:end;animation:riseIn 1s cubic-bezier(.2,.85,.3,1) both;}
.portrait::before{
  content:'';position:absolute;top:3%;left:7%;width:86%;aspect-ratio:1;
  background:var(--periwinkle);border:2px solid var(--charcoal);border-radius:50%;
}
.portrait img{
  position:relative;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);
}
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .portrait{justify-self:center;max-width:min(320px,72vw);order:-1;}
}
.hl{position:relative;display:inline;background:linear-gradient(to top,var(--butter) 0 .34em,transparent .34em);padding-inline:.04em;}
.hero-lede{font-size:clamp(16.5px,2.1vw,19px);color:var(--ink-soft);max-width:58ch;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.head{max-width:740px;margin-bottom:clamp(36px,5vw,56px);}
.head h2{font-size:clamp(28px,4.6vw,46px);margin-top:20px;text-wrap:balance;}
.head p{color:var(--ink-soft);margin-top:18px;font-size:clamp(16px,2vw,17.5px);}

.sub{
  font-family:'Solway',Georgia,serif;font-weight:700;letter-spacing:-0.01em;
  font-size:clamp(20px,2.7vw,25px);margin-bottom:20px;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,64px);align-items:start;}
.prose p{color:var(--ink-soft);margin-bottom:18px;max-width:62ch;}
.prose strong{color:var(--ink);font-weight:700;}
.prose p:last-child{margin-bottom:0;}
.prose em{color:var(--ink);font-style:italic;}

.fuel{border:2px solid var(--charcoal);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);overflow:hidden;}
.fuel-row{padding:20px 22px;}
.fuel-row + .fuel-row{border-top:2px solid var(--charcoal);}
.fuel-row .meta{color:var(--tone);}
.fuel-row p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--ink-soft);}
.fuel-row strong{color:var(--ink);font-weight:700;}
.fuel-row--fuels{background:var(--green-pale);}
.fuel-row--drains{background:var(--orange-pale);}
@media (max-width:780px){.about-grid{grid-template-columns:1fr;}}

.offclock{margin-top:clamp(40px,5vw,56px);border:2px solid var(--charcoal);border-radius:var(--radius);background:var(--butter);box-shadow:var(--shadow);padding:24px clamp(20px,3vw,30px);}
.offclock p{margin-top:10px;color:var(--charcoal);max-width:70ch;}

/* off-the-clock panels — the playlist and the recipe shelf, built like the
   index cards above so they read as part of the same set */
.offclock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;}
.panel{background:var(--white);border:2px solid var(--charcoal);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;}
.panel-head{background:var(--tint);border-bottom:2px solid var(--charcoal);padding:12px 17px 11px;}
.panel-title{color:var(--tone);}
.panel-body{padding:17px;display:flex;flex-direction:column;gap:12px;flex:1;}
.panel-sub{font-size:14.5px;line-height:1.45;color:var(--ink-soft);}

.playlist-frame{width:100%;height:352px;border:0;border-radius:8px;display:block;}

.recipe{
  display:block;text-decoration:none;color:inherit;
  background:var(--tint);border:2px solid var(--charcoal);border-radius:8px;
  padding:14px 16px;box-shadow:3px 3px 0 rgba(49,50,47,.16);
  transition:transform .15s ease,box-shadow .15s ease;
}
.recipe:hover,.recipe:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(49,50,47,.16);}
.recipe .meta{color:var(--tone);font-size:11px;}
.recipe h4{margin-top:6px;font-size:16.5px;line-height:1.3;}
.recipe p{margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
.recipe-src{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--tone);}
@media (max-width:780px){.offclock-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   CASE STUDIES — the index cards
   ========================================================================== */
.catalog{display:flex;flex-direction:column;gap:18px;}
.cs{
  position:relative;background:var(--cream);
  border:2px solid var(--tone);border-radius:var(--radius);
  box-shadow:4px 4px 0 rgba(49,50,47,.16);
  transition:transform .18s ease,box-shadow .18s ease;
}
.cs::before{content:'';position:absolute;inset:6px;border:1px solid var(--tone);border-radius:6px;opacity:.55;pointer-events:none;}
.cs:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 rgba(49,50,47,.16);}
.cs[open]{transform:none;box-shadow:4px 4px 0 rgba(49,50,47,.16);}

.orn{position:absolute;width:26px;height:26px;color:var(--tone);pointer-events:none;opacity:.9;}
.orn--tl{top:5px;left:5px;}
.orn--tr{top:5px;right:5px;transform:scaleX(-1);}
.orn--bl{bottom:5px;left:5px;transform:scaleY(-1);}
.orn--br{bottom:5px;right:5px;transform:scale(-1,-1);}
@media (max-width:560px){.orn{width:20px;height:20px;}}
/* the corner ornaments read as clutter once a card is open */
.cs[open] .orn{display:none;}

.cs summary{list-style:none;cursor:pointer;padding:clamp(24px,3.4vw,30px) clamp(24px,3.4vw,34px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;}
.cs summary::-webkit-details-marker{display:none;}
.cs summary .meta{color:var(--tone);font-size:11px;}
.cs summary h3{font-size:clamp(19px,2.9vw,25px);max-width:46ch;letter-spacing:-0.01em;text-wrap:balance;}
.cs-teaser{font-size:clamp(15px,2vw,16px);color:var(--ink-soft);margin-top:12px;max-width:68ch;}
.cs-kicker{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);}
.cs-pull{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:2px solid var(--tone);background:var(--white);display:grid;place-items:center;color:var(--tone);font-size:22px;font-weight:600;line-height:0;transition:transform .22s ease,background .16s,color .16s;}
.cs[open] .cs-pull{transform:rotate(135deg);background:var(--tone);color:var(--cream);}
.cs summary:hover .cs-pull{transform:scale(1.07);}
.cs[open] summary:hover .cs-pull{transform:rotate(135deg) scale(1.07);}

.cs-body{padding:0 clamp(24px,3.4vw,34px) clamp(28px,3.4vw,36px);max-width:860px;}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--tone);border-radius:8px;overflow:hidden;}
.tri > div{padding:16px 18px;background:var(--tint);border-right:2px solid var(--tone);}
.tri > div:last-child{border-right:none;}
.tri .meta{color:var(--tone);font-size:10.5px;display:block;margin-bottom:7px;}
.tri p{font-size:14.5px;line-height:1.5;color:var(--ink);}
@media (max-width:700px){
  .tri{grid-template-columns:1fr;}
  .tri > div{border-right:none;border-bottom:2px solid var(--tone);}
  .tri > div:last-child{border-bottom:none;}
}

.cs-body h4{font-size:12px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--tone);margin:30px 0 12px;display:flex;align-items:center;gap:12px;}
.cs-body h4::after{content:'';flex:1;height:1px;background:var(--rule);}
.cs-body p{font-size:clamp(15.5px,2vw,16px);color:var(--ink-soft);}
.cs-body p + p{margin-top:13px;}
.cs-body strong{color:var(--ink);font-weight:700;}
.cs-quiet{font-size:15px;color:var(--ink-faint);}

.cs-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:13px;}
.cs-list > li{position:relative;padding-left:23px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);}
.cs-list > li::before{content:'';position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--tone);transform:rotate(45deg);border-radius:1px;}
.cs-sub{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:7px;}
.cs-sub li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.55;color:var(--ink-faint);}
.cs-sub li::before{content:'';position:absolute;left:0;top:.82em;width:11px;height:1.5px;background:var(--tone);opacity:.7;}
.cs-body p + .cs-list,.cs-body p + .cs-block{margin-top:15px;}

/* the pivot line of each story — the bet, or the real question */
.cs-key{
  margin:18px 0 4px;padding:16px 20px;
  background:var(--tint);border:1.5px solid var(--tone);border-left-width:6px;border-radius:8px;
}
.cs-key p{font-size:clamp(16px,2.1vw,17.5px);font-weight:600;color:var(--ink);line-height:1.5;}
.cs-key .meta{color:var(--tone);font-size:10.5px;display:block;margin-bottom:7px;}

.cs-pillars{display:flex;flex-direction:column;gap:13px;margin-top:14px;}
.cs-pillar{border-left:4px solid var(--tone);padding-left:16px;}
.cs-pillar h5{font-size:15.5px;}
.cs-pillar p{font-size:15px;margin-top:3px;}

/* ==========================================================================
   RESUMÉ
   ========================================================================== */
.resume-block + .resume-block{margin-top:clamp(48px,6vw,72px);}
.resume-download{margin-top:clamp(40px,5vw,56px);display:flex;justify-content:center;}
.exp-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:22px 0;}
.exp-row + .exp-row{border-top:1px solid var(--rule);}
.exp-when{font-size:12.5px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--tone);}
.exp-where{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;background:var(--tint);border:1.5px solid var(--tone);color:var(--tone);padding:2px 9px;border-radius:5px;}
.exp-row h3{font-size:clamp(17px,2.4vw,19.5px);}
.exp-row p{font-size:15.5px;color:var(--ink-soft);margin-top:9px;max-width:70ch;}
.exp-list{list-style:none;margin-top:11px;display:flex;flex-direction:column;gap:9px;max-width:70ch;}
.exp-list li{position:relative;padding-left:19px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);}
.exp-list li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--tone);transform:rotate(45deg);border-radius:1px;}
@media (max-width:780px){
  .exp-row{grid-template-columns:1fr;gap:10px;}
  .exp-where{margin-top:4px;}
}

.skills-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(36px,5vw,64px);align-items:start;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{font-size:13.5px;font-weight:600;background:var(--white);border:2px solid var(--tone);color:var(--tone);padding:7px 14px;border-radius:7px;box-shadow:2px 2px 0 var(--tone);}
.edu + .edu{margin-top:16px;}
.edu h4{font-size:17px;}
.edu p{font-size:14.5px;color:var(--ink-faint);margin-top:2px;}
.certs{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink-soft);}
.certs li{padding-left:22px;position:relative;}
.certs li::before{content:'';position:absolute;left:0;top:.52em;width:9px;height:9px;background:var(--chartreuse);transform:rotate(45deg);border-radius:1px;}
.side-block + .side-block{margin-top:34px;}
@media (max-width:820px){.skills-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.voices{columns:2;column-gap:20px;}
@media (max-width:820px){.voices{columns:1;}}
.theme{
  break-inside:avoid;margin-bottom:20px;background:var(--white);
  border:2px solid var(--charcoal);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.theme-head{background:var(--tint);border-bottom:2px solid var(--charcoal);padding:13px 22px 12px;}
.theme-head .meta{color:var(--tone);font-size:11px;}
.theme-body{padding:0 22px 20px;}
.theme blockquote{padding:19px 0;}
.theme blockquote + blockquote{border-top:1px solid var(--rule);}
.theme blockquote p{font-size:15.5px;line-height:1.6;font-style:italic;color:var(--ink);}
.theme cite{display:block;margin-top:12px;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-faint);}

/* ==========================================================================
   CONTACT + FOOTER
   ========================================================================== */
.contact{background:var(--periwinkle);border-top:2px solid var(--charcoal);color:var(--charcoal);}
.contact .eyebrow{background:var(--white);color:var(--charcoal);}
.contact-inner{max-width:680px;margin-inline:auto;text-align:center;}
.contact h2{font-size:clamp(29px,4.8vw,48px);text-wrap:balance;}
.contact-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px;}
.contact-details{margin-top:30px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:15px;font-weight:600;}
.contact-details a{color:var(--charcoal);text-underline-offset:4px;}

.foot{background:var(--cream);border-top:2px solid var(--charcoal);padding-block:clamp(46px,7vw,72px);}
.foot .mark{max-width:min(260px,60vw);margin-inline:auto;}

/* ==========================================================================
   CASE-STUDY FIGURES
   Drop-in blocks for .cs-body. They inherit --tone and --tint from the
   parent <details class="cs">, so each figure takes its case study's colour
   with no extra markup.
   ========================================================================== */

.fig{
  --fig-line:var(--charcoal);
  margin:24px 0 8px;
  border:2px solid var(--fig-line);
  border-radius:var(--radius);
  /* Figures sit on the cream index card, so plain white barely separates
     them from the prose. Graph paper reads as a different material. */
  background-color:var(--white);
  background-image:
    repeating-linear-gradient(to right, transparent 0 25px, var(--fig-grid) 25px 26px),
    repeating-linear-gradient(to bottom, transparent 0 25px, var(--fig-grid) 25px 26px);
  box-shadow:4px 4px 0 rgba(49,50,47,.16);
  overflow:hidden;
}
.fig-head{padding:13px 18px;background:var(--tint);border-bottom:2px solid var(--fig-line);}
.fig-head .meta{color:var(--tone);font-size:10.5px;display:block;}
.fig-name{font-family:'Solway',Georgia,serif;font-weight:700;font-size:16.5px;line-height:1.3;letter-spacing:-0.01em;margin-top:4px;}
.fig-body{padding:clamp(14px,2.4vw,20px);}
.fig-foot{padding:12px 18px;border-top:1px solid var(--rule);background:var(--cream);font-size:13px;line-height:1.55;color:var(--ink-faint);}
.fig-foot b{color:var(--ink-soft);font-weight:700;}
.fig-arrow{display:flex;justify-content:center;align-items:center;height:20px;}
.fig-arrow::after{content:'';width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--tone);opacity:.85;}
.fig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fig-hint{display:none;font-size:12px;color:var(--ink-faint);margin-bottom:8px;}
@media (max-width:660px){.fig-hint{display:block;}}

/* ---------- 1 · Dynamic Experience Matrix ---------- */
.mx{min-width:520px;display:grid;grid-template-columns:104px repeat(3,minmax(0,1fr));gap:5px;}
.mx-corner{display:flex;align-items:flex-end;}
.mx-corner span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);line-height:1.35;}
.mx-col{padding:0 4px 7px;text-align:center;}
.mx-col b{display:block;font-size:13px;font-weight:700;color:var(--ink);}
.mx-col i{display:block;font-style:normal;font-size:11px;color:var(--ink-faint);line-height:1.35;}
.mx-row{display:flex;flex-direction:column;justify-content:center;padding-right:9px;text-align:right;}
.mx-row b{font-size:13px;font-weight:700;color:var(--ink);}
.mx-row i{font-style:normal;font-size:11px;color:var(--ink-faint);line-height:1.35;}
.mx-cell{
  border:1.5px solid var(--tone);border-radius:6px;padding:11px 11px 12px;min-height:74px;
  background:color-mix(in srgb, var(--tone) calc(var(--w) * 1%), var(--white));
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;
}
.mx-cell u{text-decoration:none;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tone);opacity:.85;}
.mx-cell em{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--ink);font-weight:600;}
.mx-cell.is-peak{border-width:2.5px;box-shadow:0 0 0 3px var(--tint);}
.mx-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;padding-top:13px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-faint);align-items:center;}
.mx-ramp{display:flex;align-items:center;gap:7px;}
.mx-ramp span{width:15px;height:15px;border:1.5px solid var(--tone);border-radius:3px;background:color-mix(in srgb, var(--tone) calc(var(--w) * 1%), var(--white));}

/* ---------- 2 · Decision Engine (layered flow) ---------- */
.eng{display:flex;flex-direction:column;}
.eng-band{border:2px solid var(--tone);border-radius:8px;overflow:hidden;}
.eng-band > .eng-label{
  padding:7px 13px;background:var(--tone);color:var(--white);
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.eng-inner{padding:12px;display:grid;gap:10px;}
.eng-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.eng-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.eng-box{border:1.5px solid var(--rule);border-radius:6px;background:var(--cream);padding:11px 12px;}
.eng-box b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);}
.eng-box span{display:block;font-size:12px;line-height:1.5;color:var(--ink-faint);margin-top:4px;}
.eng-box.is-solid{background:var(--tint);border-color:var(--tone);}
.eng-out{
  border:2px solid var(--charcoal);border-radius:8px;background:var(--tone);
  padding:13px 16px;text-align:center;
}
.eng-out b{display:block;font-family:'Solway',Georgia,serif;font-size:15.5px;letter-spacing:-0.01em;color:var(--white);}
.eng-out span{display:block;font-size:12.5px;color:rgba(255,255,255,.84);margin-top:3px;}
.eng-loop{
  margin-top:12px;border:1.5px dashed var(--tone);border-radius:6px;
  padding:9px 13px;font-size:12.5px;color:var(--ink-soft);text-align:center;background:var(--white);
}
@media (max-width:600px){.eng-2,.eng-3{grid-template-columns:1fr;}}

/* ---------- 3 · Value Equation ---------- */
.eq{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr);gap:0 6px;align-items:stretch;}
.eq-op{display:flex;align-items:center;justify-content:center;font-family:'Solway',Georgia,serif;font-size:24px;color:var(--tone);line-height:1;}
.eq-term{border:1.5px solid var(--tone);border-radius:7px;background:var(--white);padding:13px;display:flex;flex-direction:column;}
.eq-term u{text-decoration:none;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tone);}
.eq-term b{font-size:14.5px;font-weight:700;margin-top:5px;line-height:1.3;}
.eq-term ul{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:5px;}
.eq-term li{position:relative;padding-left:14px;font-size:12px;line-height:1.45;color:var(--ink-faint);}
.eq-term li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--tone);opacity:.55;}
.eq-cost{background:var(--cream);}
.eq-result{
  margin-top:14px;border:2px solid var(--charcoal);border-radius:8px;background:var(--tone);
  padding:14px 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
}
.eq-result .eq-eq{font-family:'Solway',Georgia,serif;font-size:22px;color:rgba(255,255,255,.7);line-height:1;}
.eq-result b{font-family:'Solway',Georgia,serif;font-size:19px;letter-spacing:-0.01em;color:var(--white);}
.eq-result .eq-note{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.84);flex-basis:100%;}
.eq-bracket{
  grid-column:3 / span 3;margin-top:8px;height:9px;
  border:1.5px solid var(--tone);border-top:none;border-radius:0 0 6px 6px;opacity:.6;
}
.eq-bracket-lbl{grid-column:3 / span 3;text-align:center;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tone);margin-top:5px;}
@media (max-width:640px){
  .eq{grid-template-columns:1fr;gap:0;}
  .eq-op{height:30px;}
  .eq-bracket,.eq-bracket-lbl{grid-column:1;}
  .eq-bracket{display:none;}
}

/* ---------- 4 · Five-layer spine ---------- */
.spine{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
.spine-step{border:1.5px solid var(--tone);border-radius:7px;background:var(--white);padding:12px 11px 13px;display:flex;flex-direction:column;gap:6px;position:relative;}
.spine-step::after{
  content:'';position:absolute;right:-7px;top:50%;z-index:2;
  width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:7px solid var(--tone);transform:translateY(-50%);
}
.spine-step:last-child::after{display:none;}
.spine-n{width:21px;height:21px;border-radius:50%;background:var(--tone);color:var(--white);display:grid;place-items:center;font-size:11px;font-weight:800;}
.spine-step b{font-size:14px;font-weight:700;}
.spine-step .spine-d{font-size:12px;line-height:1.45;color:var(--ink-faint);}
@media (max-width:700px){
  .spine{grid-template-columns:1fr;}
  .spine-step{flex-direction:row;align-items:flex-start;gap:11px;flex-wrap:wrap;}
  .spine-step .spine-n{flex-shrink:0;margin-top:2px;}
  .spine-step b{flex:1 1 auto;}
  .spine-step .spine-d{flex-basis:100%;padding-left:32px;}
  .spine-step::after{right:auto;left:10px;top:auto;bottom:-7px;transform:none;
    border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--tone);border-bottom:none;}
}

/* ---------- 5 · Collision taxonomy ---------- */
.col-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.col-card{border:1.5px solid var(--rule);border-radius:7px;background:var(--cream);padding:13px;display:flex;flex-direction:column;gap:7px;}
.col-card.is-live{background:var(--white);border:1.5px solid var(--tone);}
.col-tag{display:flex;align-items:center;gap:7px;}
.col-dot{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--ink-faint);flex-shrink:0;}
.col-card.is-live .col-dot{background:var(--tone);}
.col-tag u{text-decoration:none;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
.col-card.is-live .col-tag u{color:var(--tone);}
.col-card b{font-size:14px;font-weight:700;line-height:1.3;}
.col-card p{font-size:12px;line-height:1.5;color:var(--ink-faint);}
.col-res{margin-top:auto;padding-top:9px;border-top:1px solid var(--rule);font-size:12px;line-height:1.45;color:var(--ink-soft);}
.col-res u{display:block;text-decoration:none;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px;}
.col-card.col-rule{background:var(--tone);border:2px solid var(--charcoal);}
.col-card.col-rule .col-dot{background:var(--white);}
.col-card.col-rule .col-tag u{color:rgba(255,255,255,.78);}
.col-card.col-rule b{color:var(--white);}
.col-card.col-rule p{color:rgba(255,255,255,.86);}
@media (max-width:760px){.col-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.col-grid{grid-template-columns:1fr;}}

/* ---------- 6 · Store Mode versions ---------- */
.ver{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;}
.ver-card{border:1.5px solid var(--rule);border-radius:7px;background:var(--cream);overflow:hidden;display:flex;flex-direction:column;}
.ver-card.is-now{border:1.5px solid var(--tone);background:var(--white);}
.ver-screen{padding:14px 14px 0;display:flex;justify-content:center;}
.phone{
  width:100%;max-width:126px;aspect-ratio:9/15;border:2px solid var(--charcoal);border-radius:11px;
  background:var(--white);padding:6px 5px;display:flex;flex-direction:column;gap:4px;overflow:hidden;
}
.ph-bar{height:7px;border-radius:2px;background:var(--rule);}
.ph-bar.is-tone{background:var(--tone);opacity:.85;}
.ph-fill{flex:1;border-radius:3px;background:var(--tone);opacity:.9;display:grid;place-items:center;}
.ph-fill u{text-decoration:none;font-size:7.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--white);}
.ph-tiles{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.ph-tiles i{display:block;height:19px;border-radius:3px;background:var(--tint);border:1px solid var(--tone);}
.ph-strip{height:18px;border-radius:3px;background:var(--tint);border:1.5px solid var(--tone);border-left-width:5px;}
.ph-body{display:flex;flex-direction:column;gap:4px;}
.ph-body i{display:block;height:11px;border-radius:2px;background:var(--rule);}
.ph-fold{border-top:1.5px dashed var(--ink-faint);opacity:.55;margin:1px 0;}
.ver-txt{padding:13px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.ver-txt u{text-decoration:none;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
.ver-card.is-now .ver-txt u{color:var(--tone);}
.ver-txt b{font-size:14.5px;font-weight:700;line-height:1.3;}
.ver-txt p{font-size:12px;line-height:1.5;color:var(--ink-faint);}
.ver-out{margin-top:auto;padding-top:9px;border-top:1px solid var(--rule);font-size:12px;line-height:1.45;color:var(--ink-soft);font-weight:600;}
/* Side-by-side: .ver-screen is a shrink-to-fit flex item here, so .phone needs
   a definite width or the empty mockups collapse to a sliver. */
@media (max-width:700px){.ver{grid-template-columns:1fr;}.ver-card{flex-direction:row;}.ver-screen{padding:14px 0 14px 14px;align-items:flex-start;flex:0 0 auto;}.phone{width:96px;max-width:none;}}
@media (max-width:420px){.ver-card{flex-direction:column;}.ver-screen{padding:14px 14px 0;justify-content:center;}.phone{width:100%;max-width:126px;}}

/* ---------- 7 · Vision + phases ---------- */
.vis-banner{
  border:2px solid var(--charcoal);border-radius:8px;background:var(--tone);
  padding:15px 17px;margin-bottom:14px;
}
.vis-banner u{text-decoration:none;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78);}
.vis-banner b{display:block;font-family:'Solway',Georgia,serif;font-size:clamp(16px,2.4vw,19px);letter-spacing:-0.01em;margin-top:5px;line-height:1.3;color:var(--white);}
.phase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.phase-card{border:1.5px solid var(--tone);border-radius:7px;background:var(--white);padding:13px;display:flex;flex-direction:column;gap:7px;position:relative;}
.phase-when{
  align-self:flex-start;border:1.5px solid var(--tone);border-radius:4px;
  padding:2px 8px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tone);background:var(--tint);
}
.phase-card b{font-size:14.5px;font-weight:700;line-height:1.3;}
.phase-card p{font-size:12px;line-height:1.5;color:var(--ink-faint);}
.phase-bar{
  margin-top:12px;height:10px;border:1.5px solid var(--tone);border-radius:5px;overflow:hidden;
  background:linear-gradient(to right, color-mix(in srgb,var(--tone) 18%,var(--white)), var(--tone));
}
.phase-ends{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);}
.dep{margin-top:14px;border:1.5px dashed var(--tone);border-radius:7px;padding:12px 14px;}
.dep u{text-decoration:none;display:block;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tone);margin-bottom:7px;}
.dep-list{display:flex;flex-wrap:wrap;gap:7px;}
.dep-list span{border:1.5px solid var(--rule);border-radius:20px;background:var(--cream);padding:5px 12px;font-size:12px;color:var(--ink-soft);}
@media (max-width:700px){.phase{grid-template-columns:1fr;}}

/* ==========================================================================
   MOTION / PRINT
   ========================================================================== */
.reveal{transition:opacity .6s ease,transform .6s ease;}
.reveal:not(.in){opacity:0;transform:translateY(18px);}

@media print{
  .nav,.nav-toggle,.hero-actions,.contact-actions,.cs-pull,.orn,.playlist-frame{display:none!important;}
  body{font-size:10.5pt;line-height:1.5;background:#fff;}
  .section{padding-block:20pt;}
  .cs .cs-body{display:block!important;}
  .cs,.theme,.fuel,.offclock,.btn,.fig{box-shadow:none!important;}
  .cs,.fig{break-inside:avoid;page-break-inside:avoid;}
  .hero,.paper-graph,.paper-ruled,.section--cream,.contact,.foot{background:#fff!important;}
  .voices{columns:2;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#6a6c62;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important;animation:none!important;}
  .reveal:not(.in){opacity:1;transform:none;}
}
/* ==========================================================================
   PASSWORD GATE
   Locked by default in the markup (<html class="gate-locked">) and unlocked by
   the script at the end of the file. A cover, not a lock — the page content is
   still in the HTML source for anyone who looks.
   ========================================================================== */

#gate{display:none;}
html.gate-locked{overflow:hidden;}
html.gate-locked body > *:not(#gate){display:none!important;}
html.gate-locked #gate{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:999;
  padding:24px;background:var(--cream);
}

/* same index card as the case studies, shrunk to a single question */
.gate-card{
  width:100%;max-width:380px;padding:34px 30px 30px;
  background:var(--white);
  border:2px solid var(--charcoal);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.gate-title{font-size:27px;margin-bottom:7px;}
.gate-note{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px;}
.gate-label{
  display:block;margin-bottom:7px;
  font-size:11.5px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--ink-faint);
}
/* 16px keeps iOS Safari from zooming the page on focus */
.gate-input{
  width:100%;padding:11px 13px;
  font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--cream);
  border:2px solid var(--charcoal);border-radius:6px;
}
.gate-error{margin-top:9px;font-size:13.5px;font-weight:500;color:var(--orange-ink);}
.gate-button{
  width:100%;margin-top:18px;padding:12px 16px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;
  color:var(--white);background:var(--orange-ink);
  border:2px solid var(--charcoal);border-radius:6px;
  box-shadow:3px 3px 0 var(--charcoal);
  transition:transform .12s ease,box-shadow .12s ease;
}
.gate-button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--charcoal);}
.gate-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--charcoal);}

/* the reduced-motion block above already switches this off */
@keyframes gate-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-7px);}  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}  80%{transform:translateX(3px);}
}
#gate.shake .gate-card{animation:gate-shake .4s ease;}

/* ==========================================================================
   SKILLS
   The résumé's skill list became named capabilities with a line of
   explanation each, so the old chip row was replaced by cards. Same border,
   shadow and tone treatment as the index cards above.
   ========================================================================== */
.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.skill{
  border:2px solid var(--tone);border-radius:var(--radius);background:var(--white);
  box-shadow:3px 3px 0 var(--tone);
  padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;
}
.skill-ic{width:30px;height:30px;color:var(--tone);}
.skill h4{font-size:16.5px;line-height:1.3;}
.skill p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
@media (max-width:900px){.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.skill-grid{grid-template-columns:1fr;}}

/* education and certifications now sit under the skills, not beside them */
.resume-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,56px);align-items:start;}
@media (max-width:640px){.resume-side{grid-template-columns:1fr;}}

/* each accordion is a preview now, so it ends in a link to the full page */
.cs-more{margin-top:26px;}

/* ==========================================================================
   CASE-STUDY PAGES
   The long-form write-ups at /work/*. They reuse .cs-body and the figure
   blocks wholesale; --tone and --tint come off the wrapping <article>, the
   same way they came off <details class="cs"> on the homepage.
   ========================================================================== */
/* the header keeps its tint fill — the page body below it is plain white */
.cse-head{background:var(--tint);border-bottom:2px solid var(--charcoal);padding-block:clamp(34px,5vw,60px);}
/* block, so the eyebrow below it starts a new line rather than sitting alongside */
.cse-back{
  display:block;width:fit-content;font-size:13.5px;font-weight:700;letter-spacing:.03em;
  text-decoration:none;color:var(--tone);border-bottom:2px solid transparent;
}
.cse-back:hover,.cse-back:focus-visible{border-bottom-color:var(--tone);}
.cse-head .eyebrow{margin-top:22px;}
.cse-head h1{font-size:clamp(27px,4.6vw,44px);margin-top:18px;text-wrap:balance;}
.cse-kicker{display:block;margin-top:20px;padding-top:16px;border-top:1px solid var(--tone);color:var(--tone);}

/* .cs-body carries the card's own padding; inside a .wrap it needs none */
.cse-body{padding:0;max-width:820px;}
.cse-body .sub{
  margin-top:clamp(44px,6vw,68px);padding-top:clamp(20px,3vw,28px);
  border-top:2px solid var(--tone);color:var(--ink);
}
.cse-body > .sub:first-child{margin-top:0;padding-top:0;border-top:none;}
.cse-lede{font-size:clamp(17px,2.3vw,19.5px);line-height:1.55;color:var(--ink);font-weight:500;}
.cse-body .cse-lede + p{margin-top:15px;}
.cse-foot{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:clamp(48px,6vw,72px);padding-top:clamp(30px,4vw,44px);border-top:2px solid var(--rule);
}

/* ==========================================================================
   SECTION-HEADER MARKS  ·  "Wayfinding"
   The same six marks repeat on all four write-ups, so they live here once
   instead of being inlined into every page. Drawn on the same 24x24 grid at
   the same 1.5 stroke as the skill icons on the homepage.

   They are painted as masks rather than inline <svg> for one reason: the fill
   is background-color, so it reads --tone straight off the wrapping
   <article class="cse"> and each case study's headers come out in its own
   colour with no per-page markup. Behind @supports, so a browser without
   mask support gets the heading and no mark, never a solid block.
   ========================================================================== */
.cse-body .sub{display:flex;align-items:center;gap:13px;}

@supports (mask-image:url("")) or (-webkit-mask-image:url("")){
  .cse-body .sub[class*="sub--"]::before{
    content:'';flex:0 0 26px;width:26px;height:26px;
    background-color:var(--tone);
    -webkit-mask:var(--sub-ic) center/contain no-repeat;
            mask:var(--sub-ic) center/contain no-repeat;
  }
}

.sub--situation{--sub-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s6.8-5.9 6.8-11.1a6.8 6.8 0 1 0-13.6 0c0 5.2 6.8 11.1 6.8 11.1Z'/%3E%3Ccircle cx='12' cy='9.9' r='2.5'/%3E%3C/svg%3E");}
.sub--built{--sub-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='12.9' width='7.9' height='7.5' rx='1.2'/%3E%3Crect x='12.9' y='12.9' width='7.9' height='7.5' rx='1.2'/%3E%3Crect x='8.05' y='3.6' width='7.9' height='7.5' rx='1.2'/%3E%3C/svg%3E");}
.sub--operated{--sub-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 20.8v-4.3c0-2.1 1.7-3.8 3.8-3.8h4.4c2.1 0 3.8-1.7 3.8-3.8V5.8'/%3E%3Cpath d='M14.1 8.1 16.6 5.6 19.1 8.1'/%3E%3C/svg%3E");}
.sub--happened{--sub-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 20.9V3.5'/%3E%3Cpath d='M6.2 4.7h11.4l-2.7 3.6 2.7 3.6H6.2'/%3E%3C/svg%3E");}
.sub--owned{--sub-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 12 4.6 8.2M12 12l7.4-3.8M12 12v8.6'/%3E%3C/svg%3E");}
.sub--differently{--sub-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12a8.4 8.4 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.6 4.4v5.2h-5.2'/%3E%3C/svg%3E");}

/* ==========================================================================
   LINE BREAKING
   Two different jobs, so two different properties.

   Display type balances: short headings and card titles get their lines
   evened out, which is what stops "The Digital Experience Value / Equation"
   from dropping one word onto a line of its own at narrow widths.

   Running text uses `pretty` instead. It leaves the rag alone and only tidies
   the final line, so paragraphs keep their natural measure without the last
   line collapsing to a single word.

   Both are progressive enhancement — a browser without them wraps exactly as
   it does today.
   ========================================================================== */
.fig-name,.cs-pillar h5,.cs-key p,.mx-cell em,.skill h4,.recipe h4,
.eng-box b,.eng-out b,.col-card b,.phase-card b,.ver-txt b,.spine-step b,
.eq-term b,.vis-banner b{
  text-wrap:balance;
}

.cse-lede,.cs-body p,.cs-list > li,.cs-sub li,.fig-foot,
.exp-list li,.prose p,.cs-teaser,.offclock p,.skill p,.panel-sub,
.theme blockquote p,.recipe p,.fuel-row p,.exp-row p,.edu p,.hero-lede{
  text-wrap:pretty;
}