/* Chairborn shared layer, Oct 2026.
   Loaded after each page's own styles. One place for type, colour roles,
   buttons, the menu, accessibility and the shared components. */

/* ---------- colour roles: secondary text passes 4.5:1 ---------- */
:root{--mute:#948D82;--mono:'Jost',system-ui,-apple-system,sans-serif;}
body.light{--mute:#625A4E;}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:.75rem;z-index:100;background:#C79A51;color:#16110A;
  padding:.7rem 1rem;font-weight:500;text-decoration:none;}
.skip:focus{left:1rem;}

/* ---------- menu: two levels of weight, readable size ---------- */
.nav{gap:1.6rem;}
.nav a{font-size:.95rem;letter-spacing:0;text-transform:none;font-weight:400;}
.nav a.pri{color:var(--text);font-weight:500;}
.nav a.sec{color:var(--soft);}
.nav a.cta{font-weight:500;letter-spacing:0;text-transform:none;font-size:.95rem;padding:.6rem 1.05rem;background:var(--gold);border:1px solid var(--gold);color:#16110A;}
.nav a.cta:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:#16110A;}
body.light .nav a.cta{background:#C79A51;border-color:#C79A51;color:#16110A;}
body.light .nav a.cta:hover{background:#B3873F;border-color:#B3873F;color:#16110A;}
.nav .sep{width:1px;height:1.1rem;background:var(--line-2);}
.mobilenav a{font-size:1.05rem;}
.mobilenav a.sec{color:var(--soft);}

/* sub-menu: sentence case, readable */
.subnav .pagename{font-size:.85rem;letter-spacing:.04em;}
.subnav .links{font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--soft);}

/* ---------- labels, notes, small text: nothing under 14px ---------- */
.label{font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;}
.note,.after,.fork-alt,.proof-note{font-size:.98rem;line-height:1.6;letter-spacing:0;}
.row .k,.seat .kind,.card .cat,.coseat .k,.person .role,.f-head .role,.seat dt,.coseat .num i,.fork .who{
  font-size:.88rem;letter-spacing:.02em;font-weight:500;}
.row .v,.coseat .days{font-size:.95rem;letter-spacing:0;}
.compare tbody th{font-size:.95rem;}
.card .more{font-size:.95rem;font-weight:500;}
footer{font-size:.9rem;}
.factline,.byline,.crumb{font-size:.92rem;}
.tbd{font-family:var(--sans);}

/* ---------- links with arrows: arrow always visible, underline animates ---------- */
.go{font-family:var(--sans);font-size:1.02rem;font-weight:500;letter-spacing:.005em;padding-bottom:.25rem;}
.go::after{content:" \2192" !important;position:static !important;display:inline !important;
  height:auto !important;width:auto !important;background:none !important;transform:none !important;}

/* ---------- one button system ---------- */
.btn-p,.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:3rem;
  padding:.8rem 1.35rem;font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:0;text-transform:none;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s,border-color .25s,color .25s;}
.btn-p{background:#C79A51;border-color:#C79A51;color:#16110A;}
.btn-p:hover{background:#D9AE66;border-color:#D9AE66;color:#16110A;}
.btn-s{background:transparent;color:var(--text);border-color:var(--line-2);}
.btn-s:hover{border-color:var(--gold);color:var(--text);}
.hero.figure .btn-s,.hero.wrap .btn-s{color:#F4F1EB;border-color:rgba(244,241,235,.45);}
.hero.figure .btn-s:hover,.hero.wrap .btn-s:hover{border-color:#F0D79B;}
.btn-p::after,.btn-s::after{content:"\2192";}
.actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-top:1.8rem;}
.actions-row .hint{font-size:.95rem;color:var(--mute);}
.hero.figure .actions-row .hint,.hero.wrap .actions-row .hint{color:rgba(244,241,235,.75);}

/* ---------- forms: real tap targets ---------- */
input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:#C79A51;flex:none;}
footer a{display:inline-block;padding:.35rem 0;}

/* ---------- shared component: big-number steps ---------- */
.bigsteps{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:2rem 1.6rem;}
@media(min-width:40rem){.bigsteps{grid-template-columns:repeat(2,1fr);}}
@media(min-width:62rem){.bigsteps{grid-template-columns:repeat(5,1fr);}}
.bigsteps li{position:relative;padding-top:.4rem;border-top:1px solid var(--line-2);}
.bigsteps .n{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(4rem,7vw,6rem);line-height:.9;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--gold);margin:.6rem 0 1rem;transition:color .5s ease;}
.bigsteps li:hover .n{color:color-mix(in srgb,var(--gold) 30%,transparent);}
.bigsteps h3,.bigsteps h4,.bigsteps h5{font-family:var(--serif);font-weight:500;font-size:1.2rem;margin:0 0 .45rem;color:var(--text);}
.bigsteps p{margin:0;color:var(--soft);font-size:1rem;line-height:1.55;max-width:28ch;}
@media(max-width:39.99rem){.bigsteps{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem;}
  .bigsteps .n{font-size:3.4rem;margin:.4rem 0 .6rem;}
  .bigsteps li:last-child{grid-column:1 / -1;}}

/* ---------- definition of a seat ---------- */
.define{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.2rem;margin:1.4rem 0 0;max-width:52ch;color:var(--soft);font-size:1.04rem;line-height:1.6;}
.define b{color:var(--text);font-weight:500;}

/* ---------- 90-day table becomes stacked cards on phones ---------- */
@media(max-width:40rem){
  .steps90{border:0;overflow:visible;}
  .steps90 table{min-width:0;}
  .steps90 table,.steps90 tbody,.steps90 tr,.steps90 th,.steps90 td{display:block;width:auto;}
  .steps90 thead{display:none;}
  .steps90 tr{border:1px solid var(--line);margin:0 0 .8rem;padding:.9rem 1rem;background:var(--bg-2);}
  .steps90 th,.steps90 td{border:0 !important;padding:.25rem 0 !important;}
  .steps90 th{font-weight:600;color:var(--text);font-family:var(--sans);font-size:1rem;}
  .steps90 td.mine{background:none !important;color:var(--text);}
  .steps90 td.mine::before{content:"What you can show: ";color:var(--gold);font-weight:500;}
}

/* ---------- author box and next step under articles ---------- */
.nextstep{border-top:1px solid var(--line);margin-top:3rem;padding-top:2rem;display:grid;gap:2rem;}
.author{display:flex;gap:1rem;align-items:flex-start;margin:3rem 0 1.6rem;padding-top:1.6rem;border-top:1px solid var(--line);}
.author img{width:72px;height:90px;object-fit:cover;border:1px solid var(--line);flex:none;}
.author b{display:block;font-weight:500;color:var(--text);}
.author span{display:block;color:var(--soft);font-size:.98rem;line-height:1.55;}
.nextcta{background:var(--bg-2);border:1px solid var(--line);padding:1.4rem 1.5rem;}
.nextcta h2{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:0 0 .5rem;}
.nextcta p{margin:0 0 1rem;color:var(--soft);}
.related h2{font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--gold);margin:0 0 .6rem;}
.related a{display:block;padding:.6rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);}
.related a:hover{color:var(--gold);}

@media (prefers-reduced-motion:reduce){.bigsteps .n{transition:none;}}

/* older buttons on the Review, Circle and The Next Chair pages follow the same system */
.btn{font-family:var(--sans) !important;font-size:1rem !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;
  min-height:3rem;padding:.8rem 1.35rem !important;background:#C79A51 !important;border:1px solid #C79A51 !important;color:#16110A !important;}
.btn:hover{background:#D9AE66 !important;border-color:#D9AE66 !important;}
.btn.ghost{background:transparent !important;color:var(--text) !important;border-color:var(--line-2) !important;}
.gsr-hero .btn.ghost,.endcta .btn.ghost{color:#F4F1EB !important;border-color:rgba(244,241,235,.45) !important;}
.btn[disabled]{opacity:.55;cursor:default;}

/* the sticky sub-menu docks exactly under the header (header height is set by the 140px logo) */
.subnav{top:calc(140px * 241 / 440 + 1px) !important;z-index:35 !important;}

/* small text floor (14px) on older components */
.compare thead th{font-size:.86rem !important;}
.person .facts li{font-size:.95rem;color:var(--soft);}
.filters button,.filters a,.chips button,.chips a,.filter button{font-size:.9rem !important;letter-spacing:.02em !important;}
.switch button{font-size:.9rem !important;}
.week .day .name{font-size:.85rem !important;}
.week .slot{font-size:.85rem !important;}
.weeknote{font-size:.98rem !important;}
.gsr-hero .note,.symptoms span,.game dt,.layers small,.steps3 .meta,.paths a,.two small,.sv-progress,.sv-field label,.sv-count,
.sv-legend,.sv-qhead span,.sv-vlabel,.sv-vwhere,.sv-gamelbl,.sv-findings span,.findings li span,.fields label,.restart,.legend,.where,.side-h,.bar span,.navrow .count,.fitline b{
  font-size:max(.875rem,1em) !important;}
.gsr-hero .note{font-size:.95rem !important;}
.goals span,.goals button{font-size:.9rem !important;letter-spacing:.02em !important;}
.game .quote{font-size:1rem !important;}

/* menu: dark "Join the Circle" button next to the gold "Talk to us" */
.nav{gap:1.35rem;}
.nav a.cta2{font-weight:500;font-size:.95rem;letter-spacing:0;text-transform:none;padding:.6rem 1.05rem;
  background:#16110A;border:1px solid #16110A;color:#F4F1EB;margin-left:.2rem;}
.nav a.cta2::after{display:none;}
.nav a.cta2:hover{background:#2B2216;border-color:#2B2216;color:#F4F1EB;}
body:not(.light) .nav a.cta2{background:#1B1712;border-color:#4A3D28;}
body:not(.light) .nav a.cta2:hover{border-color:#C79A51;}
.nav a.cta{margin-left:-.6rem;}
.mobilenav a.cta2{color:var(--text);font-weight:500;}
@media(min-width:62rem) and (max-width:72rem){.nav{gap:1rem;}.nav a{font-size:.9rem;}.nav a.cta,.nav a.cta2{padding:.55rem .8rem;}}

/* Perspectives: the goal filter lives in the sub-menu, like every other page */
.pfilter .links button{font:inherit;font-size:.9rem !important;letter-spacing:0 !important;text-transform:none;background:none;border:0;
  border-bottom:1px solid transparent;padding:.3rem 0;color:var(--soft);cursor:pointer;white-space:nowrap;}
.pfilter .links button:hover{color:var(--text);}
.pfilter .links button[aria-pressed="true"]{color:var(--gold);border-bottom-color:var(--gold);}

/* one hero height on every page (same viewport, same height) */
.hero.figure,.hero.hfig,.photo-hero{min-height:clamp(34rem,74vh,44rem) !important;box-sizing:border-box;}
.photo-hero{display:flex !important;align-items:center;}
.photo-hero > .wrap{width:100%;}
.gsr-hero.photo-hero .wrap,.nc-hero.photo-hero .wrap{min-height:0 !important;}
.gsr-hero.photo-hero,.nc-hero.photo-hero,.p-hero.photo-hero{padding:clamp(3.5rem,9vh,5rem) 0 !important;}
@media(max-width:44rem){.hero.figure,.hero.hfig,.photo-hero{min-height:36rem !important;}}
.gsr-hero.photo-hero .wrap,.nc-hero.photo-hero .wrap{padding-top:0 !important;padding-bottom:0 !important;}
.gsr-hero.photo-hero h1{max-width:20ch;}
.hero.figure{padding-top:clamp(4rem,12vh,7rem) !important;}
.gsr-hero.photo-hero{padding:clamp(2.5rem,6vh,3.5rem) 0 !important;}
.nc-hero.photo-hero,.p-hero.photo-hero{border:0 !important;}
.row .v span{font-size:.85rem;}

/* three main seats side by side */
@media(min-width:62rem){.seats.three,.coseats.three{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media(min-width:52rem) and (max-width:61.99rem){.seats.three > :last-child,.coseats.three > :last-child{grid-column:1 / -1;}}
/* v17: For companies, four steps with outputs, and the call list */
@media(min-width:62rem){.bigsteps.four{grid-template-columns:repeat(4,1fr);}}
@media(max-width:39.99rem){.bigsteps.four{grid-template-columns:1fr;}}
.bigsteps.four p{max-width:34ch;}
.bigsteps .out{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line);color:var(--text);font-size:.95rem;}
.bigsteps .out b{display:block;font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.25rem;}
.calls{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:0 2.4rem;}
@media(min-width:48rem){.calls{grid-template-columns:repeat(2,1fr);}}
.calls li{padding:.95rem 0 .95rem 1.6rem;border-top:1px solid var(--line);position:relative;color:var(--text);font-size:1.05rem;line-height:1.5;}
.calls li::before{content:"";position:absolute;left:0;top:1.7rem;width:.9rem;height:1px;background:var(--gold);}
.bigsteps.four li{display:flex;flex-direction:column;}
.bigsteps.four li > p:not(.out){margin-bottom:.9rem;}
.bigsteps.four .out{margin-top:auto;}
/* v20: Why a fractional leader */
.whyf{display:grid;gap:1.6rem 2.4rem;margin-top:1.8rem;}
@media(min-width:48rem){.whyf{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:62rem){.whyf{grid-template-columns:repeat(3,minmax(0,1fr));}}
.whyf > div{border-top:1px solid var(--line-2);padding-top:1rem;}
.whyf h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin:0 0 .4rem;color:var(--text);}
.whyf p{margin:0;color:var(--soft);line-height:1.55;}