/* ============================================================================
   The Financial Sciences Company — assets/tfsc-site.css
   Site chrome v1 (2026-09-08): base, fonts, page ground, masthead, mobile menu,
   footer. A one-for-one rebuild of the live header and footer with Astra and
   WordPress removed underneath (Theo, 2026-09-08: "very similar styling to what
   we currently have ... rebuild it one for one ... take off the guardrails of
   Astra and WordPress").

   Every value below was measured from the live site on 2026-09-08 at 1360px and
   375px (computed styles + boxes), not eyeballed. Where the live site had a
   defect the rebuild fixes it and says so inline (the only one: the mobile
   footer, whose three columns rendered 72px wide on a phone).

   Load order on a page:  tfsc-site.css  ->  tfsc-article.css (article pages)
   ========================================================================== */

/* ------------------------------------------------------------- FONTS ---- */
/* Self-hosted variable fonts, the same files the live site serves. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/assets/fonts/playfair-display-var.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;
  src:url('/assets/fonts/playfair-display-var-italic.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/assets/fonts/manrope-var.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('/assets/fonts/jetbrainsmono-var.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/spectral-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/inter-500.woff2') format('woff2');}

/* ------------------------------------------------------------ TOKENS ---- */
:root{
  --ink:#0E1626; --brass:#B08D57; --bone:#FAF8F4; --paper:#F0EEE9; --steel:#6B7280;
  --white:#FFFFFF;
  --ground:#EFF2FF;                       /* live page ground (Astra global color 4) */
  --utility:#F8F5EF;                      /* live utility-bar tint */
  --brass-pale:#F0D7AD;                   /* live footer link colour */
  --line:rgba(14,22,38,.10);
  --f-display:'Playfair Display',Georgia,serif;
  --f-body:'Manrope',Arial,sans-serif;
  --f-mono:'JetBrains Mono',Consolas,monospace;
  --container:1240px; --gutter:20px;
  --head-h:174px;
}

/* -------------------------------------------------------------- BASE ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto;}
a{color:inherit;}
button{font:inherit;}
.tfsc-container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
.tfsc-skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--bone);
  padding:10px 16px; z-index:2000; font-size:14px;}
.tfsc-skip:focus{left:12px; top:12px; outline:2px solid var(--brass);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------------------------------------------------------- MASTHEAD ---- */
.tfsc-masthead{
  position:sticky; top:0; z-index:1004;
  background:var(--bone);
  border-bottom:1px solid rgba(14,22,38,.06);
  box-shadow:0 14px 34px rgba(15,31,56,.08);
}
/* utility strip: LOGIN | CONTACT */
.tfsc-utility{background:var(--utility); border-bottom:1px solid rgba(14,22,38,.10); height:39px;}
.tfsc-utility .tfsc-container{display:flex; justify-content:flex-end; align-items:center; height:38px;}
.tfsc-utility a{
  font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); text-decoration:none; line-height:1;
  padding:0 12px;
}
.tfsc-utility a + a{border-left:1px solid rgba(14,22,38,.18);}
.tfsc-utility a:last-child{padding-right:0;}
.tfsc-utility a:hover{color:var(--ink);}

/* primary strip */
.tfsc-primary{background:var(--white); height:134px;}
.tfsc-primary-inner{
  max-width:1360px; margin:0 auto; padding:0 24px; height:134px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.tfsc-logo{display:inline-flex; align-items:center; flex:none; line-height:0;}
.tfsc-logo img{height:96px; width:auto; display:block;}

/* primary nav */
.tfsc-nav{display:flex; align-items:center; margin-left:auto;}
.tfsc-nav ul{list-style:none; margin:0; padding:0; display:flex; align-items:center;}
.tfsc-nav > ul > li{position:relative;}
.tfsc-nav > ul > li > a{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:18px; font-weight:600; color:var(--ink);
  text-decoration:none; padding:28px 18px; line-height:1;
  transition:color .15s ease;
}
.tfsc-nav > ul > li > a:hover,
.tfsc-nav > ul > li:focus-within > a{color:var(--brass);}
.tfsc-caret{width:10px; height:10px; flex:none; transition:transform .15s ease;}
.tfsc-nav > ul > li:hover > a .tfsc-caret,
.tfsc-nav > ul > li:focus-within > a .tfsc-caret{transform:rotate(180deg);}

/* dropdown panel */
.tfsc-nav .tfsc-sub{
  position:absolute; left:0; top:100%; min-width:280px;
  background:var(--white); border:1px solid rgba(15,31,56,.08); border-radius:14px;
  box-shadow:0 4px 10px -2px rgba(0,0,0,.10); padding:10px;
  display:none; flex-direction:column;
}
.tfsc-nav > ul > li:hover > .tfsc-sub,
.tfsc-nav > ul > li:focus-within > .tfsc-sub,
.tfsc-nav > ul > li.is-open > .tfsc-sub{display:flex;}
.tfsc-nav .tfsc-sub li{margin:0;}
.tfsc-nav .tfsc-sub a{
  display:block; font-family:var(--f-body); font-size:16px; font-weight:600; color:var(--ink);
  text-decoration:none; padding:12px 16px; border-radius:8px; white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.tfsc-nav .tfsc-sub a:hover{background:var(--utility); color:var(--ink); transform:translateX(2px);}

/* MEET WITH US */
.tfsc-cta{
  display:inline-block; flex:none; margin-left:20px;
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; line-height:1; color:var(--bone); background:var(--ink);
  border:1px solid var(--ink); border-radius:0; padding:12px 22px; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tfsc-cta:hover,.tfsc-cta:focus-visible{background:var(--brass); color:var(--ink); border-color:var(--brass);}

/* hamburger (hidden on desktop) */
.tfsc-burger{
  display:none; flex:none; align-items:center; justify-content:center;
  width:46px; height:42px; padding:0; cursor:pointer;
  background:transparent; color:var(--ink);
  border:1px solid rgba(14,22,38,.15); border-radius:2px;
}
.tfsc-burger svg{width:20px; height:20px; display:block;}
.tfsc-burger .tfsc-ico-x{display:none;}
.tfsc-burger[aria-expanded="true"] .tfsc-ico-x{display:block;}
.tfsc-burger[aria-expanded="true"] .tfsc-ico-bars{display:none;}

/* ------------------------------------------------- MOBILE MASTHEAD ------ */
@media (max-width:920px){
  :root{--head-h:58px;}
  .tfsc-utility{display:none;}
  .tfsc-primary{height:58px;}
  .tfsc-primary-inner{height:58px; padding:0 24px;}
  .tfsc-logo img{height:40px;}
  .tfsc-cta{display:none;}
  .tfsc-burger{display:inline-flex;}

  /* the menu drops in below the masthead, full width, white */
  .tfsc-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    margin:0; background:var(--white); padding:0 0 18px;
    box-shadow:0 14px 34px rgba(15,31,56,.08); max-height:calc(100vh - 58px); overflow-y:auto;
  }
  .tfsc-nav.is-open{display:block;}
  .tfsc-nav ul{display:block;}
  .tfsc-nav > ul > li{position:static;}
  .tfsc-nav > ul > li > a{
    display:flex; justify-content:space-between; width:100%;
    font-size:13px; font-weight:600; padding:4px 10px; height:38px; line-height:30px;
    border-bottom:1px solid #DDDDDD; color:var(--ink);
  }
  .tfsc-nav > ul > li > a:hover{color:var(--ink);}
  .tfsc-nav > ul > li > a .tfsc-caret{display:none;}
  /* sub-menu toggle: the chevron sits at right:20px, 54px tall, like the live one */
  .tfsc-subtoggle{
    position:absolute; right:20px; top:0; height:54px; width:60px; padding:0 16px;
    background:transparent; border:0; color:#393A56; cursor:pointer; display:block;
  }
  .tfsc-subtoggle svg{width:26px; height:16px; display:block; transition:transform .15s ease;}
  .tfsc-subtoggle[aria-expanded="true"] svg{transform:rotate(180deg);}
  .tfsc-nav > ul > li{position:relative;}
  .tfsc-nav .tfsc-sub{
    position:static; display:none; min-width:0; border:0; border-radius:0; box-shadow:none;
    background:var(--white); padding:10px 0 10px 10px;
  }
  .tfsc-nav > ul > li.is-open > .tfsc-sub{display:block;}
  .tfsc-nav > ul > li:hover > .tfsc-sub{display:none;}       /* no hover-open on touch */
  .tfsc-nav > ul > li.is-open:hover > .tfsc-sub{display:block;}
  .tfsc-nav .tfsc-sub a{
    font-size:13px; font-weight:600; padding:4px 10px; height:38px; line-height:30px;
    border-bottom:1px solid #DDDDDD; border-radius:0; white-space:normal;
  }
  .tfsc-nav .tfsc-sub a:hover{background:transparent; transform:none;}

  /* drawer utility block: MEET WITH US pill + LOGIN / CONTACT pills */
  .tfsc-drawer-utility{padding:24px 0 0;}
  .tfsc-drawer-meet{
    display:block; text-align:center; background:var(--brass); color:var(--ink);
    font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; text-decoration:none; padding:12px 18px; border-radius:999px;
    line-height:22px;
  }
  .tfsc-drawer-links{display:flex; gap:10px; margin-top:10px;}
  .tfsc-drawer-links a{
    flex:1; text-align:center; background:var(--white); color:var(--ink);
    font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; text-decoration:none; padding:10px 16px; border-radius:999px;
    border:1px solid rgba(15,31,56,.14); line-height:20px;
  }
}
@media (min-width:921px){
  .tfsc-subtoggle,.tfsc-drawer-utility{display:none;}
}

/* -------------------------------------------------------- PAGE CARD ----- */
/* The white content card on the lavender ground (Astra "separate container"). */
.tfsc-main{padding:0;}
.tfsc-card{
  background:var(--white); max-width:var(--container); margin:0 auto;
  padding:86px 28px; border-bottom:1px solid rgba(14,22,38,.06);
}
@media (max-width:1200px){ .tfsc-card{padding:53px 38px;} }
@media (max-width:768px){  .tfsc-card{padding:24px 34px;} }
@media (max-width:544px){  .tfsc-card{padding:24px 16px; margin:0 9px;} }
/* Astra centred the card inside a 1240 container with 20px gutters */
.tfsc-main > .tfsc-container{padding:0 var(--gutter);}

/* ------------------------------------------------------------ FOOTER ---- */
.tfsc-footer{background:var(--ink); color:var(--bone); font-family:var(--f-body); font-size:15px; line-height:24px;}
.tfsc-footer a{text-decoration:none;}
.tfsc-footer-main{padding:80px 0 90px;}
.tfsc-footer-cols{display:flex; gap:50px;}
.tfsc-footer-col{flex:1 1 0; min-width:0;}
.tfsc-footer-k{
  display:block; font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(250,248,244,.55); margin:0 0 22px; line-height:1;
}
.tfsc-footer-col ul{list-style:none; margin:0; padding:0;}
.tfsc-footer-col li{margin:0 0 10px;}
.tfsc-footer-col li a{color:var(--white); font-size:15px; line-height:24px;}
.tfsc-footer-col li a:hover{color:var(--brass-pale);}
.tfsc-footer-col p{margin:0 0 26px; color:rgba(250,248,244,.78);}
.tfsc-footer-col p:last-child{margin-bottom:0;}
.tfsc-footer-col .tfsc-footer-contact a{color:var(--brass-pale);}
.tfsc-footer-col .tfsc-footer-contact a:hover{color:var(--white);}

.tfsc-footer-brand{margin-top:0; color:rgba(250,248,244,.78);}
.tfsc-footer-brand strong{display:block; font-weight:700; color:rgba(250,248,244,.78); margin:0 0 26px;}
.tfsc-footer-brand p{margin:0;}
.tfsc-footer-disclosure{
  max-width:1040px; margin:22px auto 0; padding:18px 0 0; text-align:center;
  border-top:1px solid rgba(250,248,244,.10);
  font-family:var(--f-mono); font-size:10.5px; line-height:1.75; color:rgba(250,248,244,.52);
}
.tfsc-footer-disclosure a{color:var(--brass-pale); text-decoration:underline;}
.tfsc-footer-bottom{border-top:1px solid rgba(250,248,244,.10); padding:20px 0; text-align:center; color:rgba(250,248,244,.78);}
.tfsc-footer-bottom p{margin:0;}

/* Mobile footer. DELIBERATE DEVIATION from live: the live footer keeps its three
   columns side by side at 72px each on a phone (measured 2026-09-08). Stacking
   them is the obviously intended behaviour. */
@media (max-width:920px){
  .tfsc-footer-main{padding:56px 0 64px;}
  .tfsc-footer-cols{flex-direction:column; gap:36px;}
  .tfsc-footer-disclosure{text-align:left;}
}

/* --------------------------------------------------- reduced motion ----- */
@media (prefers-reduced-motion:reduce){
  .tfsc-nav > ul > li > a,.tfsc-caret,.tfsc-nav .tfsc-sub a,.tfsc-cta,.tfsc-subtoggle svg{transition:none !important;}
  .tfsc-nav .tfsc-sub a:hover{transform:none;}
}