/* ============================================================================
   Shiftlab direction, shared system
   Build 1, 7 Oct 2026. Source study: bridge/design-studies/shiftlab-direction-
   2026-10-07/ (commit a584d16). Brief: DESIGN-HANDOFF.md.

   This file is the reusable layer: tokens, type, bands, buttons, header and
   footer. Page files add layout only, so counselling, workplace and topic
   pages can share a system without becoming the same template.
   ========================================================================= */

:root{
  /* Palette, from the handoff. Deeper rose carries small cream lettering. */
  --cocoa:#2B1411;
  --cream:#ECE5D7;
  --bronze:#C9822E;
  --rose:#9A4F43;
  --deep-rose:#5C2A24;
  --muted:#D8C2A2;
  --rule-dark:#785346;
  --rule-bronze:#764618;
  --ink-on-bronze:#6E4515;

  --body:'Manrope',Arial,sans-serif;
  --label-face:'Oswald',Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;

  /* Readability floor (claude-web #537, item 1). Uppercase Oswald at .11em
     tracking stops being readable below this, and the study fell to 8px on
     phones. Every .label inherits the floor; nothing overrides it downwards. */
  --label-size:12px;

  --gutter:clamp(22px,4.5vw,76px);
  --tap:44px;          /* minimum interactive height, every width */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{
  margin:0;background:var(--cocoa);color:var(--cream);
  font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure{margin:0}
a{color:inherit}
img{display:block;width:100%;height:auto}
a,button{-webkit-tap-highlight-color:transparent}

.wrap{max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}

.label{
  font:400 var(--label-size)/1.5 var(--label-face);
  letter-spacing:.13em;text-transform:uppercase;
}

.skip{position:fixed;left:-9999px;top:12px;z-index:10;padding:12px;background:var(--cream);color:var(--cocoa)}
.skip:focus{left:20px}
:focus-visible{outline:3px solid currentColor;outline-offset:7px}
::selection{color:var(--cream);background:var(--deep-rose)}

/* --- Header ------------------------------------------------------------- */
.site-header{min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:40px}
/* The wordmark is the link to home, so it carries the tap floor too; at
   line-height 1 it was measuring 27px. */
.wordmark{display:flex;align-items:baseline;gap:9px;text-decoration:none;font-family:var(--label-face);line-height:1;min-height:var(--tap)}
.wordmark span{font-size:12px;letter-spacing:.18em}
.wordmark strong{font-size:27px;letter-spacing:.13em;font-weight:400}
.site-header nav{display:flex;gap:44px}
/* Tap targets: the live site paid for the 44px floor in two earlier batches;
   the study's 27px phone links would have given it back (#537). */
.site-header nav a{
  display:inline-flex;align-items:center;min-height:var(--tap);
  font:400 14px/1.4 var(--label-face);text-transform:uppercase;letter-spacing:.1em;
  text-decoration:none;text-underline-offset:8px;
}
.site-header nav a:hover{text-decoration:underline;text-decoration-thickness:1px}
.est{color:var(--muted)}

/* --- Bands -------------------------------------------------------------- */
.band-cocoa{background:var(--cocoa);color:var(--cream)}
.band-bronze{background:var(--bronze);color:var(--cocoa)}
.band-cream{background:var(--cream);color:var(--cocoa)}
.band-rose{background:var(--deep-rose);color:var(--cream)}

.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.section-heading h2{font:400 clamp(26px,3vw,42px)/1.1 var(--body);letter-spacing:-.045em}

/* --- Buttons ------------------------------------------------------------
   Arrow-free rising fill, adapted from the Uiverse.io button by shah1345,
   supplied by Martin. Square corners, no embossed shadow. Two ellipses rise
   from below; the label colour change is delayed so the text never sits on a
   half-risen fill. Reduced motion snaps the fill rather than removing it. */
.wave{
  --base:transparent;--text:var(--cream);--edge:var(--cream);
  --fill:var(--cream);--hover-text:var(--cocoa);
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:57px;padding:17px 26px;
  border:1px solid var(--edge);border-radius:0;
  color:var(--text);background:var(--base);
  font:400 14px/1.4 var(--label-face);letter-spacing:.12em;
  text-decoration:none;cursor:pointer;
  transition:color .2s .14s,border-color .3s;
}
.wave>span{position:relative;z-index:1}
.wave::before,.wave::after{
  content:'';position:absolute;z-index:0;left:50%;top:100%;
  width:140%;height:180%;border-radius:50%;background:var(--fill);
  transform:translateX(-50%) scaleY(1) scaleX(1.25);
  transition:top .55s .04s cubic-bezier(.55,0,.1,1),transform .55s .04s cubic-bezier(.55,0,.1,1);
  pointer-events:none;
}
.wave::before{opacity:.28}
.wave::after{left:55%;top:180%;width:160%;height:190%;transform:translateX(-50%) scaleY(1) scaleX(1.45)}
.wave:is(:hover,:focus-visible){color:var(--hover-text);border-color:var(--fill)}
.wave:is(:hover,:focus-visible)::before{top:-35%;transform:translateX(-50%) scaleY(1.3) scaleX(.8)}
.wave:is(:hover,:focus-visible)::after{top:-45%;transform:translateX(-50%) scaleY(1.3) scaleX(.8)}
.wave--ink{--text:var(--cocoa);--edge:var(--cocoa);--fill:var(--cocoa);--hover-text:var(--cream)}
.wave--rose{--base:var(--deep-rose);--text:var(--cream);--edge:var(--deep-rose);--fill:var(--cocoa);--hover-text:var(--cream)}
.wave--light{--base:var(--cream);--text:var(--cocoa);--edge:var(--cream);--fill:var(--cocoa);--hover-text:var(--cream)}

/* --- Footer ------------------------------------------------------------- */
.site-footer{display:flex;justify-content:space-between;gap:30px;padding-top:28px;padding-bottom:28px;color:var(--muted)}
/* The 44px tap floor is not a header-only rule: a footer link is a target too,
   and these were measuring 17px. Found by measuring every visible link rather
   than only the ones a review had named. */
.site-footer a{display:inline-flex;align-items:center;min-height:var(--tap)}
.site-footer span{display:inline-flex;align-items:center}

@media(max-width:900px){
  .site-header{gap:20px}
  .site-header nav{gap:25px}
  .est{display:none}
  .wave{padding-inline:20px;font-size:12px}
}

@media(max-width:650px){
  :root{--label-size:11px}   /* phone floor, still above the 8px the study hit */
  .site-header{min-height:115px;align-items:flex-start;flex-direction:column;justify-content:center;gap:14px}
  .wordmark strong{font-size:25px}
  .site-header nav{width:100%;gap:0;justify-content:space-between;max-width:355px}
  .site-header nav a{font-size:12px}
  .section-heading{align-items:flex-start;flex-direction:column;gap:18px}
  .section-heading h2{font-size:33px}
  .wave{min-height:55px;font-size:12px;padding-inline:24px;letter-spacing:.1em;max-width:100%;text-align:center}
  .site-footer{flex-direction:column;gap:10px;padding-block:22px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}