/* ═══════════════════════════════════════════════════════════════
   BOOST LEARNING ACADEMY — shared stylesheet
   Every page links this. Page-specific rules stay inline in each
   page's second <style> block.

   In each HTML file, delete the first <style> block (the one marked
   SHARED LAYER) and replace it with:

       <link rel="stylesheet" href="assets/site.css">

   ═══════════════════════════════════════════════════════════════ */

:root{
    --ink:#151A1C;
    --ink-soft:#4E585C;
    --ink-faint:#7A848A;
    --paper:#FBFAF6;
    --paper-2:#F2F0E8;
    --pine:#123830;
    --pine-deep:#0B2620;
    --brass:#A9803C;
    --brass-light:#CBAA6D;
    --rule:rgba(21,26,28,.15);
    --rule-strong:rgba(21,26,28,.32);
    --rule-light:rgba(251,250,246,.20);
    --shell:1180px;
    --pad:56px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Literata",Georgia,serif;
    font-size:17px;
    font-weight:400;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    font-variant-numeric:oldstyle-num;
  }

  .shell{max-width:var(--shell); margin:0 auto; padding:0 var(--pad);}

  /* ── typographic scale ───────────────────────────── */
  h1,h2,h3,h4{font-family:"Literata",Georgia,serif; font-weight:500; letter-spacing:-.012em; margin:0;}
  h1{font-size:clamp(2.5rem,4.8vw,3.9rem); line-height:1.08;}
  h2{font-size:clamp(1.75rem,2.9vw,2.5rem); line-height:1.16;}
  h3{font-size:1.24rem; line-height:1.32; font-weight:600;}
  h4{font-size:1.02rem; line-height:1.4; font-weight:600;}
  p{margin:0 0 22px; max-width:66ch;}
  p:last-child{margin-bottom:0;}
  em{font-style:italic;}

  .standfirst{font-size:1.28rem; line-height:1.6; color:var(--ink-soft); font-weight:300; max-width:56ch;}

  .kicker{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
    color:var(--brass); margin:0 0 20px;
  }
  .kicker-light{color:var(--brass-light);}
  .hr-brass{border:0; border-top:2px solid var(--brass); width:44px; margin:0 0 28px;}

  .meta{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:.72rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
    color:var(--ink-faint);
  }

  /* ── buttons ─────────────────────────────────────── */
  .btn{
    display:inline-block;
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:.76rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
    padding:15px 28px; text-decoration:none; cursor:pointer; white-space:nowrap;
    background:var(--pine); color:var(--paper); border:1px solid var(--pine);
    transition:background .18s ease, color .18s ease, border-color .18s ease;
  }
  .btn:hover{background:var(--brass); border-color:var(--brass); color:var(--pine-deep);}
  .btn-brass{background:var(--brass); border-color:var(--brass); color:var(--pine-deep);}
  .btn-brass:hover{background:var(--paper); border-color:var(--paper); color:var(--pine);}
  .btn-line{background:transparent; color:var(--ink); border-color:var(--rule-strong);}
  .btn-line:hover{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .btn-line-light{background:transparent; color:var(--paper); border-color:var(--rule-light);}
  .btn-line-light:hover{background:var(--paper); border-color:var(--paper); color:var(--pine);}

  /* ── logo lockup ─────────────────────────────────── */
  .logo{display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--pine); line-height:1;}
  .logo-mark{width:42px; height:42px; flex:0 0 auto;}
  .logo-mark g{stroke:currentColor;}
  .logo-type{display:block;}
  .lt-1{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:1.42rem; font-weight:600; letter-spacing:.015em; text-transform:uppercase;
    display:block; line-height:1;
  }
  .lt-2{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:.605rem; font-weight:500; letter-spacing:.238em; text-transform:uppercase;
    display:block; margin-top:5px; line-height:1;
  }
  .lt-3{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:.63rem; font-weight:400; letter-spacing:.02em;
    display:block; margin-top:8px; line-height:1; color:var(--ink-faint);
  }
  .lt-3 em{font-style:normal; color:var(--brass);}
  .logo-light{color:var(--paper);}
  .logo-light .lt-3{color:rgba(251,250,246,.6);}
  .logo-light .lt-3 em{color:var(--brass-light);}

  /* ── the dock ────────────────────────────────────── */
  .dock-utility{
    background:var(--pine-deep); color:rgba(251,250,246,.68);
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:.71rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  }
  .dock-utility .shell{display:flex; justify-content:space-between; gap:24px; align-items:center; padding-top:10px; padding-bottom:10px;}
  .dock-utility a{color:rgba(251,250,246,.68); text-decoration:none;}
  .dock-utility a:hover{color:var(--brass-light);}
  .dock-utility nav a{margin-left:28px;}

  .dock{
    position:sticky; top:0; z-index:60;
    background:rgba(251,250,246,.95);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--rule);
  }
  .dock .shell{display:flex; align-items:center; justify-content:space-between; gap:32px; padding-top:20px; padding-bottom:20px;}

  .dock-nav{display:flex; align-items:center; gap:30px;}
  .dock-nav a{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:.78rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink); text-decoration:none; padding-bottom:4px;
    border-bottom:1.5px solid transparent;
  }
  .dock-nav a:hover{border-bottom-color:var(--brass);}
  .dock-nav a.is-current{border-bottom-color:var(--pine); color:var(--pine);}

  .dock-toggle{display:none; background:none; border:1px solid var(--rule-strong); padding:10px 14px; cursor:pointer;
    font-family:"IBM Plex Sans",sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);}
  .dock-drawer{display:none; border-top:1px solid var(--rule); background:var(--paper);}
  .dock-drawer.is-open{display:block;}
  .dock-drawer a{
    display:block; padding:15px 0; border-bottom:1px solid var(--rule);
    font-family:"IBM Plex Sans",sans-serif; font-size:.82rem; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none;
  }

  /* ── sections ────────────────────────────────────── */
  .band{padding:104px 0; border-bottom:1px solid var(--rule);}
  .band-tight{padding:76px 0;}
  .band-paper2{background:var(--paper-2);}
  .band-pine{background:var(--pine); color:var(--paper); border-bottom:0;}
  .band-pine h1,.band-pine h2,.band-pine h3,.band-pine h4{color:var(--paper);}
  .band-pine p{color:rgba(251,250,246,.76);}
  .band-pine .meta{color:rgba(251,250,246,.55);}

  .split{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:start;}
  .split-even{grid-template-columns:1fr 1fr;}

  /* ── interior page plate ─────────────────────────── */
  .plate{background:var(--pine); color:var(--paper); position:relative; overflow:hidden;}
  .plate::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(120% 90% at 84% 4%, rgba(27,80,68,.85), rgba(18,56,48,0) 60%);
    pointer-events:none;
  }
  .plate .shell{position:relative; z-index:1; padding-top:74px; padding-bottom:80px;}
  .plate h1{color:var(--paper); max-width:16ch; margin-bottom:26px;}
  .plate .standfirst{color:rgba(251,250,246,.8);}
  .crumb{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
    color:rgba(251,250,246,.55); margin:0 0 26px;
  }
  .crumb a{color:rgba(251,250,246,.55); text-decoration:none;}
  .crumb a:hover{color:var(--brass-light);}
  .crumb span{margin:0 10px; color:rgba(251,250,246,.32);}

  /* ── footer ──────────────────────────────────────── */
  .foot{background:var(--pine-deep); color:rgba(251,250,246,.72); padding:80px 0 32px;}
  .foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:56px;}
  .foot h4{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    color:var(--brass-light); margin:0 0 18px;
  }
  .foot a{color:rgba(251,250,246,.72); text-decoration:none; display:block; padding:6px 0; font-size:.94rem;}
  .foot a:hover{color:var(--brass-light);}
  .foot-about .logo{margin-bottom:24px;}
  .foot-about p{font-size:.94rem; color:rgba(251,250,246,.6); max-width:36ch;}
  .foot-plain{font-size:.94rem; padding:6px 0;}
  .colophon{
    margin-top:64px; padding-top:26px; border-top:1px solid var(--rule-light);
    display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap;
    font-family:"IBM Plex Sans",sans-serif;
    font-size:.71rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,250,246,.45);
  }
  .colophon a{display:inline; padding:0; font-size:.71rem; color:rgba(251,250,246,.45);}

  a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}
  .skip{position:absolute; left:-9999px;}
  .skip:focus{left:16px; top:16px; z-index:100; background:var(--pine); color:var(--paper); padding:12px 18px;}

  @media (max-width:1000px){
    :root{--pad:32px;}
    .dock-nav{display:none;}
    .dock-toggle{display:block;}
    .split,.split-even{grid-template-columns:1fr; gap:44px;}
    .foot-grid{grid-template-columns:1fr 1fr; gap:40px;}
    .band{padding:72px 0;}
    .plate .shell{padding-top:52px; padding-bottom:56px;}
  }
  @media (max-width:620px){
    :root{--pad:22px;}
    body{font-size:16px;}
    .dock-utility .shell{flex-direction:column; align-items:flex-start; gap:4px; font-size:.65rem;}
    .dock-utility nav a{margin-left:0; margin-right:20px;}
    .foot-grid{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important; animation:none !important;}
  }

/* ══════════════════════════════════════════════════════════════
   PORTAL COMPONENTS
   Added for login.html, resources.html, portal.html, quiz.html
   and admin.html. Harmless on the public pages.
   ══════════════════════════════════════════════════════════════ */

/* forms */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:22px;}
.field label{font-family:"IBM Plex Sans",sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint);}
.field label .req{color:var(--brass); margin-left:4px;}
.field input,.field select,.field textarea{
  font-family:"Literata",Georgia,serif; font-size:1rem; color:var(--ink);
  padding:14px 15px; background:#fff; border:1px solid var(--rule); border-radius:0; width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint); opacity:.7;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(169,128,60,.16);
}
.field textarea{resize:vertical; min-height:120px; line-height:1.6;}
.field input[type="file"]{padding:11px 12px; font-family:"IBM Plex Sans",sans-serif; font-size:.88rem;}
.hint{font-size:.85rem; color:var(--ink-faint); line-height:1.5;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:0 26px;}

/* small button */
.btn-sm{padding:10px 18px; font-size:.68rem;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* flash messages */
.flash{padding:18px 22px; border-left:3px solid var(--brass); background:var(--paper-2); margin-bottom:24px; font-size:.96rem;}
.flash-bad{border-left-color:#9C3B2E; background:#F7EDEA;}
.flash-good{border-left-color:var(--pine);}
.flash[hidden]{display:none;}

/* cards */
.card{border:1px solid var(--rule); background:var(--paper-2); padding:30px 28px;}
.card h3{margin-bottom:16px;}
.card-pine{background:var(--pine); border-color:var(--pine); color:var(--paper);}
.card-pine h3{color:var(--paper);}
.card-pine p{color:rgba(251,250,246,.78);}
.card-pine a{color:var(--brass-light);}

/* tables */
.tbl{width:100%; border-collapse:collapse;}
.tbl th{
  font-family:"IBM Plex Sans",sans-serif; text-align:left;
  font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); padding:0 18px 12px 0; border-bottom:2px solid var(--pine);
}
.tbl td{padding:16px 18px 16px 0; border-bottom:1px solid var(--rule); font-size:.97rem; vertical-align:top;}
.tbl th:last-child,.tbl td:last-child{padding-right:0;}

/* status pills */
.pill{
  display:inline-block; font-family:"IBM Plex Sans",sans-serif;
  font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 10px; border:1px solid var(--rule-strong); color:var(--ink-faint); white-space:nowrap;
}
.pill-set{border-color:var(--brass); color:var(--brass);}
.pill-done{border-color:var(--pine); color:var(--pine);}
.pill-late{border-color:#9C3B2E; color:#9C3B2E;}

@media (max-width:1000px){
  .row2{grid-template-columns:1fr; gap:0;}
  .tbl{display:block; overflow-x:auto; white-space:nowrap;}
  .tbl td,.tbl th{white-space:normal; min-width:120px;}
}