/* HumanBuiltAI shared tokens
   One source for type, spacing and layout so every page draws from the same set.
   Type: 1.333 ratio from a 19px body. Phone sizes run on a gentler ratio so the
   title always stays the largest step. Values scale fluidly between 600px and 1440px. */

:root{
  /* Type scale: 8 sizes */
  --fs-title:     clamp(44px, 7.43vw, 107px);
  --fs-statement: clamp(38px, 5.56vw, 80px);
  --fs-heading:   clamp(32px, 4.17vw, 60px);
  --fs-subhead:   clamp(24px, 2.36vw, 34px);
  --fs-lead:      clamp(20px, 1.74vw, 25px);
  --fs-body:      clamp(17px, 1.32vw, 19px);
  --fs-small:     14px;
  --fs-label:     12px;

  /* Line height per step */
  --lh-title: 0.94;
  --lh-statement: 0.98;
  --lh-heading: 1.02;
  --lh-subhead: 1.1;
  --lh-lead: 1.4;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-label: 1.3;

  /* Tracking per step */
  --tr-title: -0.05em;
  --tr-statement: -0.04em;
  --tr-heading: -0.035em;
  --tr-subhead: -0.02em;
  --tr-label: 0.08em;

  /* Space below each headline step (space above is always at least 1.5x this) */
  --sb-title:     clamp(28px, 3.33vw, 48px);
  --sb-statement: clamp(24px, 2.78vw, 40px);
  --sb-heading:   clamp(20px, 2.22vw, 32px);
  --sb-subhead:   clamp(12px, 1.11vw, 16px);

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-section: clamp(80px, 11.1vw, 160px);
  --sp-section-lg: clamp(96px, 13.9vw, 200px);
  --page-top: clamp(112px, 11.1vw, 160px);

  /* Grid */
  --edge: clamp(20px, 5vw, 48px);
  --gutter: clamp(16px, 3.33vw, 48px);
  --max: 1440px;
  /* Start of column 4 of 12, measured from the page edge */
  --col4: calc((min(100vw, var(--max)) - 2 * var(--edge) - 11 * var(--gutter)) / 12 * 3 + 3 * var(--gutter));

  /* Measure */
  --measure: 68ch;
  --measure-lead: 34em;

  /* Details */
  --radius-s: 4px;
  --radius-l: 12px;
  --radius-pill: 999px;

  /* Header */
  --hdr-h: 72px;
}

/* One header on every page: same height, logo and nav centred on the same line */
.hb-hdr > div,
.hb-case-hdr,
.hb-head-in{
  height: var(--hdr-h) !important;
  min-height: var(--hdr-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  box-sizing: border-box;
}

.hb-head{border-bottom:0 !important}

/* Card meta rows: keep number and year on one line; on phones the tags drop below */
.hb-cmeta > span:first-child{white-space:nowrap}
@media (max-width:560px){
  .hb-cmeta{flex-wrap:wrap;row-gap:6px}
  .hb-cmeta > span:last-child{flex-basis:100%;text-align:left !important}
}

/* Two rule colours: the light rule and ink. The near-identical light greys fold into --rule (light theme only) */
:root{--rule-b:#D9D5CE;--rule-c:#D9D5CE;--rule-d:#D9D5CE;--rule-e:#D9D5CE;--rule-f:#D9D5CE;--rule-g:#D9D5CE}

/* Page transitions: a Selected Work card grows into its case study's opening section (supporting browsers only) */
@view-transition{navigation:auto}
section[data-screen-label="01 Hero"]{view-transition-name:cs-hero}
::view-transition-group(cs-hero){animation-duration:650ms;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(cs-hero),::view-transition-new(cs-hero){height:100%;object-fit:cover;animation-duration:450ms}
::view-transition-old(root),::view-transition-new(root){animation-duration:300ms}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Case study chapter rail: ticks in the right margin, labels on hover */
.cs-chapters{position:fixed;right:clamp(10px,1.4vw,20px);top:50%;transform:translateY(-50%);z-index:45;opacity:0;pointer-events:none;transition:opacity 300ms;mix-blend-mode:difference;color:#fff}
.cs-chapters.is-on{opacity:1;pointer-events:auto}
.cs-chapters ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end}
.cs-chapters a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:28px;height:18px;color:inherit;text-decoration:none}
.cs-chapters a::after{content:"";display:block;width:12px;height:1px;background:currentColor;opacity:.45;transition:width 250ms cubic-bezier(.2,.7,.2,1),opacity 250ms}
.cs-chapters a.is-current::after{width:24px;opacity:1}
.cs-chapters a:hover::after,.cs-chapters a:focus-visible::after{opacity:1}
.cs-chapters a:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.cs-chapters b{position:absolute;right:38px;top:50%;font-weight:400;font-family:'Geist Mono',monospace;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;line-height:1;white-space:nowrap;opacity:0;transform:translate(6px,-50%);transition:opacity 200ms,transform 250ms cubic-bezier(.2,.7,.2,1);pointer-events:none}
.cs-chapters b span{opacity:.5;margin-right:6px}
.cs-chapters:hover b,.cs-chapters:focus-within b{opacity:.7;transform:translate(0,-50%);pointer-events:auto}
.cs-chapters:hover a.is-current b,.cs-chapters:focus-within a.is-current b,.cs-chapters a:hover b{opacity:1}
@media (max-width:1023px),(hover:none){.cs-chapters{display:none}}
.cs-chapters:hover,.cs-chapters:focus-within{mix-blend-mode:normal;color:var(--ink)}
.cs-chapters:hover a::after,.cs-chapters:focus-within a::after{background:var(--ink);box-shadow:none}
.cs-chapters b{background:var(--paper);min-width:260px;text-align:right;box-sizing:border-box}
.cs-chapters:hover b,.cs-chapters:focus-within b{opacity:1;color:var(--ink-3)}
.cs-chapters:hover a.is-current b,.cs-chapters:focus-within a.is-current b,.cs-chapters a:hover b{color:var(--ink)}
.cs-chapters b{padding:4px 8px;margin-top:0}