/* Design system refinement (Figma "MJ / Visual system", boards 08–10, Oct 2026).
   Loaded last on every page. Keeps the existing template and identity; only makes
   everyday roles consistent and readable. Items the spec marks as optional user
   decisions (grain, pinning, portrait tilt, sibling dimming, hover-zoom owner) are
   intentionally NOT changed here. */

/* ---- 01 / One ink, one paper ---- */
:root{
  /* One interface font. Swap this single value to try a new family site-wide. */
  --font:Arial,Helvetica,sans-serif;
  --font-hand:Caveat,'Bradley Hand',cursive;
  --ink:#190615;            /* primary ink: text, hero, dark regions */
  --paper:#EEF4F9;          /* main paper: global page surface */
  --surface-raised:#FFFFFF; /* header, raised modules */
  --muted:#6A5866;          /* secondary text, light surfaces only */
  --line:#C8D3DF;           /* separator, not a control boundary */
  --inverse:#EEF4F9;        /* light blue on ink */
  --inverse-muted:#EEF4F9;  /* light blue on ink, captions too */
  --radius-media:16px;
  --radius-pill:999px;
  --radius-control:6px;
}

/* Focus: 2px ink outline + 5px offset on light; light blue on dark grounds. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:5px
}
.home.type-home a:focus-visible,.home.type-home button:focus-visible{outline-color:var(--inverse)}

/* Skip link: guarantee readable contrast when focused (audit flagged possible burgundy-on-burgundy). */
.skip,.skip:focus,.skip:focus-visible{background:var(--ink)!important;color:var(--inverse)!important}
.skip:focus-visible{outline-color:var(--inverse)}

/* ---- Captions · metadata · footer: minimum 12, preferred 14 ---- */

/* ---- 02 / Colour: separators use the solid separator token, not alpha ink ---- */

/* ---- 03 / Typography roles (keep the expressive hero and families; make everyday roles consistent) ---- */
body{font-family:var(--font)}
/* Body: 16px / 1.6 in shared reading wrappers, at a resolved reading width */
.case-page .sticky-story-copy p,.home-intro-line,.profile-grid p:not(.profile-lead),.case-page .lee-introduction~p{font-size:16px;line-height:1.6}
.profile-grid p:not(.profile-lead){max-width:62ch}
/* Navigation: 14px / 20px (header already follows this; mobile drawer matches) */
@media(max-width:760px){body>header.portfolio-header>nav>a,body>header.portfolio-header>nav .nav-drop>a{font-size:14px!important;line-height:20px!important;padding:12px 6px!important}}
/* Reading H2: 32 -> 30 tablet -> 27 phone */
.case-page .sticky-story-copy h2{font-size:32px!important;line-height:1.12;letter-spacing:-.03em}
@media(max-width:1100px){.case-page .sticky-story-copy h2{font-size:30px!important}}
@media(max-width:760px){.case-page .sticky-story-copy h2{font-size:27px!important}}
/* Captions & metadata: minimum 12px, values 14px, labels 12px uppercase */
.case-page figcaption,.se-main figcaption{font-size:14px!important;line-height:1.5}
.case-page .credentials dd,.se-facts dd{font-size:14px;line-height:1.5}
.case-page .lbl,.case-page .credentials dt,.se-facts dt{font-size:12px!important;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
.home-stories-label h2,.home-explore-label,.ticker-heading p{font-size:12px!important;font-weight:700;letter-spacing:.08em;line-height:1.4}

/* ---- 06 + 09 / Motion: standardize shared rules, keep role-specific timings ---- */
:root{
  --ease-out-strong:cubic-bezier(.23,1,.32,1);
  --dur-press:180ms;--dur-row:200ms;--dur-zoom:250ms;--dur-pill:250ms;--dur-reveal:450ms;
}
/* Press: 180ms, scale 1 -> .98, on every button and pill */
button,.home-explore a,.profile-contact a{transition-property:transform,background-color,color,border-color,opacity;transition-duration:var(--dur-press),var(--dur-pill),var(--dur-pill),var(--dur-pill),var(--dur-pill);transition-timing-function:var(--ease-out-strong),ease,ease,ease,ease}
button:active,.home-explore a:active,.profile-contact a:active{transform:scale(.98)}
/* Image zoom: ONE transform owner at 1.03 (was 1.03 on the row and 1.035 on the media) */
@media(hover:hover){
  .home-story-image:hover>img,.home-story-image:hover .story-playbook-art,.home-story-image:hover>.story-video{transform:scale(1.03)}
  .home-story-image>img,.home-story-image .story-playbook-art,.home-story-image>.story-video{transition:transform var(--dur-zoom) var(--ease-out-strong)}
}
/* Reduced motion: no transforms on press/zoom/reveal */
@media(prefers-reduced-motion:reduce){
  button:active,.home-explore a:active,.profile-contact a:active{transform:none}
  .home-story-image:hover>img,.home-story-image:hover>.story-video{transform:none!important}
}

/* =====================================================================
   Pass 2 (1 Nov 2026): page clean-up on one grid and one rhythm
   ===================================================================== */
:root{
  --section-y:clamp(56px,7vw,96px);   /* vertical gap inside every section */
  --hdr-pad:24px;                     /* header sits this far outside the content edge */
}
@media(max-width:760px){:root{--hdr-pad:12px}}

/* ---- Header: its text lines up with the page's content edge ---- */
body>header.portfolio-header{
  width:calc(var(--site-w) + 2*var(--hdr-pad))!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:max(2px,calc(var(--hdr-pad) - 10px))!important;padding-right:max(2px,calc(var(--hdr-pad) - 10px))!important
}
/* Navigation: hover/focus = ink pill (existing); current page = quiet paper pill + underline */
body>header.portfolio-header>nav a[aria-current="page"],body>header.portfolio-header>nav .nav-drop>a[aria-current="page"]{
  background:var(--paper);border-radius:var(--radius-control);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px
}
body>header.portfolio-header>nav a[aria-current="page"]:is(:hover,:focus-visible){background:var(--ink)}

/* ---- Homepage: one vertical rhythm ---- */
section.home-stories{padding-top:var(--section-y)!important;padding-bottom:var(--section-y)!important}
section.home-capabilities{padding-top:var(--section-y)!important;padding-bottom:var(--section-y)!important}
.brand-ticker{padding-top:32px!important;padding-bottom:32px!important}
nav.home-explore{margin-top:var(--section-y)!important}
/* Practice band on the same 12 columns as Selected Work (label 1–2, content 3–12) */
@media(min-width:1101px){
  section.home-capabilities{grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--gutter)!important}
  section.home-capabilities>.capability-context{grid-column:1/3!important}
  section.home-capabilities>.capability-body{grid-column:3/13!important}
}

/* ---- Buttons and pills: one shape, one size, one hover ---- */
.home-explore a,.profile-contact a,.home-capabilities .capability-about,.lab-gallery-controls button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;
  padding:12px 22px!important;border-radius:var(--radius-pill)!important;
  font-size:16px!important;line-height:1.2;letter-spacing:-.01em;box-shadow:none!important;
  border:1px solid var(--ink)
}
/* Primary (filled): contact */
.profile-contact a{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.profile-contact a:hover,.profile-contact a:focus-visible{background:transparent!important;color:var(--ink)!important}
/* Secondary (outline): navigation pills, lab arrows */
.home-explore a,.lab-gallery-controls button{background:transparent!important;color:var(--ink)!important;border-color:var(--ink)!important}
.home-explore a:hover,.home-explore a:focus-visible,.lab-gallery-controls button:hover,.lab-gallery-controls button:focus-visible{background:var(--ink)!important;color:var(--paper)!important}
.home-explore a span{color:var(--muted)}
/* Secondary on dark ground: light blue edge */
.home-capabilities .capability-about{background:transparent;border-color:var(--inverse)!important;color:var(--inverse)!important}
.home-capabilities .capability-about:hover,.home-capabilities .capability-about:focus-visible{background:var(--inverse)!important;color:var(--ink)!important}
/* Lab arrows: round 44px controls */
.lab-gallery-controls button{width:44px;height:44px;padding:0!important;margin-left:8px}

/* ---- Project pages (Case Studies + Strategy): one shared wrapper ---- */
/* Title */
.case-page .case-title h1,.se-masthead h1{font-weight:600!important;line-height:.99!important;letter-spacing:-.06em!important}
/* Intro */
.case-page .lee-introduction,.case-page .case-title p,.se-masthead p{font-size:clamp(18px,1.7vw,24px)!important;line-height:1.35!important;letter-spacing:-.025em!important;max-width:34em}
/* Facts block */
.case-page .credentials,.se-facts{padding-top:24px!important;padding-bottom:24px!important}
/* Section rhythm */
.case-page .sticky-story-section,.se-main>section{padding-top:var(--section-y)!important;padding-bottom:calc(var(--section-y)/2)!important;margin-top:0!important}
/* Reading width */
.se-main section p{max-width:62ch}

/* ---- Lab: plain vertical list on phones (no pinned sideways scroll) ---- */
@media(max-width:760px){
  [data-page="lab"] .lab-scroll-section{height:auto!important}
  [data-page="lab"] .lab-scroll-pin{position:static!important}
  [data-page="lab"] .lab-horizontal-gallery,[data-page="lab"] .painting-grid{flex-direction:column!important;overflow:visible!important;gap:32px!important;padding-bottom:0!important}
  [data-page="lab"] .lab-horizontal-gallery>*,[data-page="lab"] .painting-grid>article{flex:0 0 auto!important;width:100%!important}
  [data-page="lab"] .lab-scroll-pin .lab-gallery-card .slot-art,[data-page="lab"] .lab-scroll-pin .lab-gallery-card .portfolio-image,
  [data-page="lab"] .lab-scroll-pin .painting-grid .portfolio-image{height:auto!important;min-height:0!important;aspect-ratio:4/3}
  [data-page="lab"] .lab-gallery-controls button{display:none}
  [data-page="lab"] .painting-grid .painting-overlay{opacity:1}
}