/* shell.css — the parts of the page that are not the page.
   The navigation, the reset, and the root type scale, in one file so the nav
   is one thing rather than fifteen copies that drift.

   The rail is a row of folder tabs: one shape with a flat top, a rounded
   top-left, and a shoulder that leans right so the next folder tucks under it.
   The shoulder is a skewed pseudo-element rather than a clip-path, because a
   clip-path cannot keep the rounded corner. Tabs must stay adjacent siblings
   for the tuck to work, which is why the dropdowns sit after the whole rank
   instead of inside the tab they belong to. */

/* shell.css — the parts of the page that are not the page.
   Extracted from the fifteen pages that each carried their own copy;
   only rules that were byte-identical in all fifteen live here, so
   nothing was harmonised into existence on the way in. Edit the nav
   here and every page follows.
   Loaded immediately before each page's own style block, which is
   where these rules already sat. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior:smooth; font-size:112.5%; overflow-x:clip; }

/* the folder geometry: how far the shoulder leans out, how hard it leans, and
   how far the next folder tucks under it. Declared here because the tabs are
   the only thing that reads them, and a phone gets a shorter shoulder further
   down this file. */
:root{ --shoulder:34px; --lean:22deg; --tuck:16px; }

/* The gradient the menu labels are painted with. It lived in index.html's
   :root, which meant the other fourteen pages resolved var() to nothing:
   background-image fell back to none, and the transparent fill on hover left
   the label invisible. It belongs here, with the nav that reads it.
   The display form is for headline-size type; the small form is the same five
   hues darkened until the weakest clears 4.6:1 at reading size. */
:root{
  --trust-grad:linear-gradient(100deg,#8f7cd6 0%,#348fd4 26%,#b471bf 50%,#369a75 74%,#9877de 100%);
  --trust-grad-small:linear-gradient(100deg,#6f57ca 0%,#246fa8 26%,#994ba6 50%,#2a775b 74%,#7a4fd4 100%);
}
@media (prefers-color-scheme: dark){
  :root{
    --trust-grad:linear-gradient(100deg,#b39dff 0%,#cdbcff 26%,#a9c0ff 50%,#d6b8ff 74%,#c3aef5 100%);
    --trust-grad-small:linear-gradient(100deg,#b39dff 0%,#cdbcff 26%,#a9c0ff 50%,#d6b8ff 74%,#c3aef5 100%);
  }
}
/* pages that switch theme by attribute rather than by media query */
html[data-theme="dark"]{
  --trust-grad:linear-gradient(100deg,#b39dff 0%,#cdbcff 26%,#a9c0ff 50%,#d6b8ff 74%,#c3aef5 100%);
  --trust-grad-small:linear-gradient(100deg,#b39dff 0%,#cdbcff 26%,#a9c0ff 50%,#d6b8ff 74%,#c3aef5 100%);
}
/* ============================================================
     NAVIGATION — file tabs, the same drawer idiom as the work index.
     The tab you are on is joined to the page underneath it; a case study
     keeps its parent section lit, so you are never without a "you are here".
     ============================================================ */
  .nav{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
/* without JS the menus cannot be positioned, so they open in flow under the
   rail when the tab they belong to takes focus */
/* Without JS the menus cannot be positioned, so they fall into flow under the
   rail when the tab that owns them takes focus. Gated on focus rather than
   opened outright: two pages were missing the js class, and an unconditional
   fallback rendered both drawers permanently, inside a sticky bar, on top of
   the page. A missing script line should degrade, not disfigure. */
html:not(.js) .tab-menu{ position:static; }
html:not(.js) .tab[data-menu]:focus + .tab-menu,
html:not(.js) .tab-menu:focus-within{ display:block; }

/* ============================================================
     THE FOLDER TAB
     One shape, two ranks. A flat top, a rounded top-left, and a
     shoulder that leans right so the next folder can tuck under it.
     The shoulder is a skewed pseudo-element rather than a clip-path,
     because a clip-path cannot keep the rounded corner.
     ============================================================ */
  .tab{
    position:relative; z-index:1;
    display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
    min-height:44px;
    margin:0 0 -1px 0;
    padding:11px calc(var(--shoulder) - 8px) 12px 18px;
    background:var(--fill,var(--panel));
    border:1px solid var(--rule); border-right:none; border-bottom:none;
    border-radius:11px 0 0 0;
    font-family:inherit; font-size:0.8rem; color:var(--graphite);
    text-decoration:none; text-transform:lowercase; white-space:nowrap;
    cursor:pointer;
    transition:transform .22s var(--ease), background .18s var(--ease), color .18s var(--ease);
  }

/* the shoulder is a positioned pseudo-element, so without a negative z-index
     it would paint over the label. -1 puts it above the tab's own background
     and below its text, which is exactly where a folder edge belongs. */
  .tab::after{                       /* the shoulder */
    content:""; position:absolute; z-index:-1; top:-1px; bottom:0;
    right:calc(-1 * (var(--shoulder) - 22px)); width:var(--shoulder);
    background:inherit;
    border:1px solid var(--rule); border-left:none; border-bottom:none;
    border-radius:0 11px 0 0;
    transform:skewX(var(--lean)); transform-origin:bottom left;
  }

.tab + .tab{ margin-left:calc(-1 * var(--tuck)); }

.tab .num{ font-family:var(--mono); font-size:0.62rem; color:var(--slate); }

/* the label underlines on hover, the way the folder in the reference does */
  .tab .lbl{ position:relative; }

.tab .lbl::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .22s var(--ease); }

.tab:hover .lbl::after, .tab:focus-visible .lbl::after{ transform:scaleX(1); }

/* lift on hover: the folder comes up out of the drawer a little */
  .tab:hover, .tab:focus-visible{ color:var(--ink); transform:translateY(-6px); }

.tab:focus-visible{ outline:2px solid var(--lila-vivid); outline-offset:2px; }

/* the open folder: paper-coloured, on top of its neighbours, and joined to
     the sheet below by a shadow that paints over the sheet's top border */
  .rank .tab[aria-current="page"], .rank .tab[aria-selected="true"], .tab[aria-current="page"], .tab[aria-selected="true"]{
    --fill:var(--paper); color:var(--ink); font-weight:600;
    z-index:40; box-shadow:0 2px 0 0 var(--paper);
  }

.tab[aria-current="page"]:hover, .tab[aria-selected="true"]:hover,
  .tab[aria-current="page"]:focus-visible, .tab[aria-selected="true"]:focus-visible{ transform:none; }

.tab[aria-current="page"] .lbl::after, .tab[aria-selected="true"] .lbl::after{
    background:var(--lila-vivid); transform:scaleX(1); }

/* a case study lives inside work, so work stays marked while you read it.
   It does not get the open-folder treatment, because the page underneath is
   the case study and not the work index; it gets the ink and the accent bar,
   which is what the flat nav did before the tabs replaced it. */
  .tab[data-section="current"]{ color:var(--ink); }
  .tab[data-section="current"] .lbl::after{ transform:scaleX(1); background:var(--lila-vivid); }

/* folders further back sit a step deeper in the drawer */
  .rank .tab{ --fill:color-mix(in srgb, var(--panel2) calc(100% - var(--step,0) * 14%), var(--mist)); }

.rank .tab:hover{ --fill:var(--panel2); }

@media (prefers-reduced-motion: reduce){
    .tab, .tab .lbl::after, .sheet-body{ transition:none !important; }
    .tab:hover, .tab:focus-visible{ transform:none; }
  }

/* ---------- rank one: the sections of the site ---------- */
  .nav{ position:sticky; top:0; z-index:60; padding-top:14px;
    background:linear-gradient(var(--bg) 62%, transparent); }

.nav .wrap{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }

.nav .brand{ padding-bottom:14px; flex:0 0 auto; }

.rank{ display:flex; align-items:flex-end; min-width:0; }

.nav .nav-cta{ margin:0 0 10px 18px; padding:9px 16px; min-height:44px; display:inline-flex; align-items:center;
    font-size:0.8rem; text-transform:lowercase; text-decoration:none;
    color:var(--lila-deep); border:1px solid var(--lila-mid); border-radius:999px; white-space:nowrap; }

.nav .nav-cta:hover{ background:var(--lila-soft); }

/* phones: the rail scrolls as one row. Nothing hides behind a hamburger,
     and the edge that still has folders behind it fades, so the row reads
     as scrollable rather than cut off. */
  @media(max-width:860px){
    .nav .wrap{ align-items:center; gap:10px; padding-top:8px; padding-bottom:8px; }
    .nav .brand{ padding-bottom:0; font-size:0.95rem; }
    .rank{ flex:1 1 auto; min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
      scrollbar-width:none; padding:8px 0 0; }
    .rank::-webkit-scrollbar{ display:none; }
    .nav .nav-cta{ margin:0; padding:9px 14px; flex:0 0 auto; }
    /* a shorter shoulder, so the folder still reads as a folder without
       eating the width a phone does not have */
    .rank{ --shoulder:24px; --lean:16deg; --tuck:11px; }
    .rank .tab{ padding-left:15px; font-size:0.78rem; }
  }

@media(max-width:520px){
    .nav .nav-cta{ display:none; }   /* contact stays reachable from the page itself */
  }

/* ---------- what is filed inside a folder ---------- */
  .rank{ position:relative; }

.tab-menu{ position:absolute; top:100%; z-index:70; min-width:268px; max-width:320px;
    margin-top:1px; padding:8px;
    background:var(--paper); border:1px solid var(--rule); border-radius:0 12px 12px 12px;
    box-shadow:0 14px 30px -18px rgba(22,22,29,0.35); }

.tab-menu[hidden]{ display:none; }

/* a row is a name, what it is, and whether it can be read right now. The
     prototype laid these out in a line because its rows were a number and a
     name; here they stack. */
  .tab-menu a{ display:block;
    padding:10px 12px; min-height:44px; border-radius:8px;
    font-size:0.82rem; text-transform:lowercase; text-decoration:none; color:var(--graphite);
    transition:background .16s var(--ease), color .16s var(--ease); }
  .tab-menu .nm-t{ display:block; font-size:0.86rem; font-weight:600; letter-spacing:-0.01em;
    color:var(--ink); }
  /* what each discipline actually is, and which two can be read right now.
     This used to live in the drawer on the home page; when the drawer went,
     the descriptors and the two honest live badges came here. */
  /* Fira Code is monospaced, so a whole sentence set in it puts every letter on the same
     fixed advance: measured 0.60em per character against the title's 0.506em. Under a
     proportional title that reads as extreme letter spacing. Mono stays on the badges
     and micro-labels, where a fixed advance is the point. */
  .tab-menu .nm-d{ display:block; font-size:0.72rem; line-height:1.4;
    color:var(--slate); margin-top:2px; text-transform:none; }
  .tab-menu .nm-live{ display:inline-block; margin-top:6px; padding:2px 7px;
    font-family:var(--mono); font-size:0.56rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--lila-deep); background:var(--lila-soft); border-radius:999px; }

.tab-menu a:hover{ background:var(--panel2); color:var(--ink); }

.tab-menu a:focus-visible{ outline:2px solid var(--lila-vivid); outline-offset:-2px; }

.tab-menu .mn{ font-family:var(--mono); font-size:0.62rem; color:var(--slate); }

/* on a phone the rail already scrolls; a hovering panel has nowhere to go */
  /* On a narrow screen a hover means nothing, so the drawer is opened by tapping
   the folder and shows full width under the rail. Hiding it outright was the
   prototype's shortcut, and on the real site it took three of the four
   disciplines off the phone entirely. */
  /* The drawer treatment is about room, not about width as such: (hover:none) in
     shell.js already routes every touch device here whatever its size. The menu is
     322px wide, so an anchored dropdown fits comfortably down to about 640px, and
     at 860 a laptop window was getting the phone drawer for nothing. */
  @media(max-width:640px){
    .tab-menu{ position:fixed; left:0; right:0; top:auto; min-width:0; max-width:none;
      margin-top:0; padding:10px 16px 16px; border-radius:0;
      border-left:none; border-right:none;
      box-shadow:0 18px 30px -20px rgba(22,22,29,0.45); }
  }

/* ---------- the word trust, taught to the menus ----------
     A label in a menu behaves exactly like the accent word: split into
     letters that rise under the cursor, one continuous gradient carried
     across the whole word. At rest the letters keep the row's own colour;
     the colour arrives with the cursor, letter by letter, and stays on the
     item that was chosen. The rise is in em because trust rises 10px on a
     59px letter: the proportion is the behaviour, not the pixel count. */
  .tw{ white-space:nowrap; }

.tltr{ display:inline-block;
    transform:translateY(calc(var(--f,0) * -0.17em)) scale(calc(1 + var(--f,0) * 0.035));
    transition:transform .22s var(--ease); }

.tg{ -webkit-background-clip:text; background-clip:text;
    background-image:var(--trust-grad-small); background-repeat:no-repeat;
    -webkit-text-fill-color:currentColor;
    transition:transform .22s var(--ease), -webkit-text-fill-color .22s var(--ease); }

.tg[data-near],
  .tab-menu a[aria-current="true"] .tg,
  .ix[aria-selected="true"] .tg{ -webkit-text-fill-color:transparent; }

/* chosenness is never colour alone: the chosen link bolds the way the
     rail's selection does, and the state lives in aria-current, which is
     also what a screen reader announces */
  .tab-menu a[aria-current="true"]{ color:var(--ink); font-weight:700; }

@supports not ((-webkit-background-clip:text) or (background-clip:text)){
    .tg{ background:none; }
    .tg[data-near], .tab-menu a[aria-current="true"] .tg,
    .ix[aria-selected="true"] .tg{ color:var(--lila-vivid); }
  }

/* forced colors strips background-image, and transparent fill over a
     stripped background is invisible text; hand the letters back to the
     system palette wholesale */
  @media (forced-colors: active){
    .tg, .ltr.acc{ background:none; -webkit-text-fill-color:currentColor; }
  }


/* the rank scrolls on a narrow screen; whichever side still has folders behind
   it fades, so the row reads as scrollable. shell.js sets data-edge; without
   these rules it was writing an attribute nothing consumed. */
.rank{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.rank::-webkit-scrollbar{ display:none; }
.rank[data-edge="start"]{ mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 100%); }
.rank[data-edge="end"]{ mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%); }
.rank[data-edge="both"]{ mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); }

/* ---- read next: the op-ed each discipline page hands you on the way out.
   Shared here because four pages use it and their CSS is otherwise inline. ---- */
.next-read{ max-width:1180px; margin:0 auto; padding:0 40px 76px; }
.next-read a{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 34px;
  align-items:center; border:1px solid var(--rule); border-top:2px solid var(--lila);
  border-radius:16px; background:var(--panel2); padding:28px 32px; text-decoration:none;
  transition:border-color .2s var(--ease), background .2s var(--ease); }
.next-read a:hover{ border-color:var(--lila-vivid); background:var(--lila-soft); }
.next-read .nr-k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lila-vivid); display:block; margin-bottom:10px; }
.next-read .nr-q{ font-size:clamp(1.15rem,2.1vw,1.5rem); font-weight:800; letter-spacing:-0.022em;
  line-height:1.2; color:var(--ink); display:block; margin-bottom:9px; }
.next-read .nr-d{ font-size:.9rem; color:var(--slate); display:block; max-width:64ch; line-height:1.55; }
.next-read .nr-go{ font-family:var(--mono); font-size:.7rem; color:var(--ink);
  border:1px solid var(--rule); border-radius:999px; padding:10px 18px; white-space:nowrap; }
.next-read a:hover .nr-go{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
@media (max-width:760px){
  .next-read{ padding:0 22px 56px; }
  .next-read a{ grid-template-columns:1fr; padding:22px; align-items:start; }
  .next-read .nr-go{ justify-self:start; }
}