/* ============================================================
   University Grade Calculator — site stylesheet
   Palette: ink navy / paper / royal blue accent / degree gold
   Type: Bricolage Grotesque (display) + Instrument Sans (body)
         + IBM Plex Mono (results & numbers)
   ============================================================ */

:root{
  --ink:#0F1B2D;
  --ink-soft:#33415C;
  --muted:#5B6B85;
  --paper:#F5F6F9;
  --card:#FFFFFF;
  --line:#E2E7EF;
  --accent:#2148C0;
  --accent-dark:#173489;
  --accent-soft:#EAF0FF;
  --gold:#B9902B;
  --gold-soft:#FBF4E2;
  --first:#1E7A46;
  --two-one:#2148C0;
  --two-two:#B07C1F;
  --third:#A44A3F;
  --fail:#8E2F2A;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(15,27,45,.05),0 10px 30px -12px rgba(15,27,45,.14);
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--ink);color:#fff;
  border-bottom:3px solid var(--gold);
}
.nav-wrap{max-width:1140px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.06rem;letter-spacing:.2px;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{
  width:34px;height:34px;border-radius:8px;background:var(--gold);
  display:grid;place-items:center;color:var(--ink);font-family:var(--font-mono);
  font-weight:700;font-size:.9rem;flex:0 0 auto;
}
.nav-toggle{
  margin-left:auto;background:none;border:1px solid rgba(255,255,255,.35);
  color:#fff;border-radius:8px;padding:8px 12px;font-size:1rem;display:none;cursor:pointer;
}
nav.site-nav{margin-left:auto}
.nav-list{list-style:none;display:flex;gap:2px;margin:0;padding:0;align-items:center}
.nav-list > li{position:relative}
.nav-list a,.nav-list button.nav-drop-btn{
  display:block;color:#E7ECF5;padding:10px 13px;border-radius:8px;font-size:.95rem;
  background:none;border:none;cursor:pointer;font-family:var(--font-body);
}
.nav-list a:hover,.nav-list button.nav-drop-btn:hover{background:rgba(255,255,255,.10);text-decoration:none;color:#fff}
.nav-drop-btn::after{content:" ▾";font-size:.72em}
.dropdown{
  position:absolute;top:100%;left:0;min-width:270px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:8px;display:none;z-index:70;
}
.dropdown a{color:var(--ink);padding:9px 12px;border-radius:8px;font-size:.93rem}
.dropdown a:hover{background:var(--accent-soft);color:var(--accent-dark)}
li.open > .dropdown{display:block}
li.open > .nav-drop-btn{background:rgba(255,255,255,.12);color:#fff}

@media (max-width:920px){
  .nav-toggle{display:block}
  nav.site-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--ink);border-bottom:3px solid var(--gold);
    max-height:calc(100vh - 62px);overflow:auto;margin-left:0;
  }
  nav.site-nav.open{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:8px 14px 18px}
  .nav-list a,.nav-list button.nav-drop-btn{width:100%;text-align:left;padding:13px 12px;font-size:1rem}
  .dropdown{position:static;background:rgba(255,255,255,.06);border:none;box-shadow:none;border-radius:10px;margin:2px 0 6px}
  .dropdown a{color:#DCE4F2;padding:11px 18px}
  .dropdown a:hover{background:rgba(255,255,255,.10);color:#fff}
}

/* ---------- Page shells ---------- */
.page-hero{background:var(--ink);color:#fff;padding:44px 20px 54px;position:relative;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    linear-gradient(90deg,transparent 24.8%,rgba(255,255,255,.045) 25%,rgba(255,255,255,.045) 25.2%,transparent 25.4%),
    linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.045) 50%,rgba(255,255,255,.045) 50.2%,transparent 50.4%),
    linear-gradient(90deg,transparent 74.8%,rgba(255,255,255,.045) 75%,rgba(255,255,255,.045) 75.2%,transparent 75.4%);
}
.hero-inner{max-width:860px;margin:0 auto;position:relative}
.eyebrow{
  display:inline-block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(185,144,43,.55);
  padding:4px 10px;border-radius:999px;margin-bottom:14px;
}
h1{
  font-family:var(--font-display);font-weight:800;line-height:1.12;
  font-size:clamp(1.75rem,4.3vw,2.7rem);margin:0 0 14px;letter-spacing:-.01em;
}
.hero-inner p.lede{color:#C9D4E6;font-size:1.06rem;max-width:720px;margin:0}
.hero-inner p.lede a{color:#fff;text-decoration:underline;text-decoration-color:var(--gold)}

main{display:block}
.container{max-width:860px;margin:0 auto;padding:0 20px}
.section-pad{padding:34px 0 10px}

/* ---------- Calculator card ---------- */
.calc-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin:-34px auto 34px;position:relative;z-index:5;
  max-width:820px;overflow:hidden;
}
.calc-head{
  padding:16px 22px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;
  background:linear-gradient(180deg,#FBFCFE,#F4F6FA);
}
.calc-head .dot{width:10px;height:10px;border-radius:50%;background:var(--first);flex:0 0 auto}
.calc-head h2{margin:0;font-size:1.02rem;font-family:var(--font-display);font-weight:700}
.calc-body{padding:22px}
@media (max-width:640px){.calc-body{padding:16px 14px}}

.field-grid{display:grid;gap:10px}
.row-line{
  display:grid;grid-template-columns:minmax(90px,1.4fr) .9fr .9fr .9fr auto;
  gap:8px;align-items:end;
}
.row-line.cols-3{grid-template-columns:minmax(90px,1.6fr) 1fr 1fr auto}
.row-line.cols-2{grid-template-columns:minmax(90px,1.6fr) 1fr auto}
@media (max-width:640px){
  .row-line,.row-line.cols-3,.row-line.cols-2{
    grid-template-columns:1fr 1fr;padding:12px;border:1px solid var(--line);
    border-radius:var(--radius-sm);background:#FBFCFE;
  }
  .row-line .cell-name{grid-column:1/-1}
  .row-line .cell-remove{grid-column:1/-1;justify-self:end}
}
label.f-label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
input[type=number],input[type=text],input[type=email],select,textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-size:1rem;font-family:var(--font-body);background:#fff;color:var(--ink);
}
input[type=number]{font-family:var(--font-mono);font-size:.98rem}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(33,72,192,.14)}
input.invalid{border-color:var(--fail);box-shadow:0 0 0 3px rgba(142,47,42,.12)}
.err-msg{color:var(--fail);font-size:.85rem;margin:6px 0 0;font-weight:600}

.btn{
  display:inline-block;border:none;cursor:pointer;border-radius:var(--radius-sm);
  padding:12px 20px;font-size:1rem;font-weight:600;font-family:var(--font-body);
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:none;color:var(--accent);border:1.5px solid var(--accent)}
.btn-ghost:hover{background:var(--accent-soft)}
.btn-add{background:var(--accent-soft);color:var(--accent-dark);font-size:.93rem;padding:10px 14px}
.btn-add:hover{background:#DDE7FE}
.btn-remove{
  background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.15rem;
  padding:9px 10px;border-radius:8px;line-height:1;
}
.btn-remove:hover{color:var(--fail);background:#FBEDEC}
.calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

fieldset.calc-fs{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin:0 0 16px}
fieldset.calc-fs legend{font-family:var(--font-display);font-weight:700;font-size:.95rem;padding:0 8px}

/* ---------- Result panel + boundary ruler (signature) ---------- */
.result-panel{
  margin-top:20px;border-top:2px solid var(--ink);padding-top:18px;display:none;
}
.result-panel.show{display:block}
.result-big{
  font-family:var(--font-mono);font-weight:600;font-size:clamp(2rem,6vw,2.9rem);
  letter-spacing:-.02em;line-height:1;
}
.result-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:6px}
.result-class{
  display:inline-block;margin-top:10px;padding:6px 14px;border-radius:999px;color:#fff;
  font-weight:700;font-size:.95rem;
}
.rc-first{background:var(--first)} .rc-21{background:var(--two-one)}
.rc-22{background:var(--two-two)} .rc-third{background:var(--third)} .rc-fail{background:var(--fail)}
.rc-neutral{background:var(--ink-soft)}
.result-note{color:var(--ink-soft);font-size:.94rem;margin-top:12px}
.result-note strong{color:var(--ink)}

.ruler{margin-top:18px}
.ruler-track{display:flex;height:14px;border-radius:999px;overflow:hidden;position:relative}
.ruler-seg{height:100%}
.ruler-seg.fail{background:#D9C1BF;flex:40}
.ruler-seg.third{background:#DDB0A8;flex:10}
.ruler-seg.two2{background:#E5CD9C;flex:10}
.ruler-seg.two1{background:#AFC2F2;flex:10}
.ruler-seg.first{background:#9ED0B4;flex:30}
.ruler-marker{
  position:absolute;top:-5px;width:3px;height:24px;background:var(--ink);border-radius:2px;
  transform:translateX(-50%);
}
.ruler-marker::after{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink);
}
.ruler-scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-top:6px}
.ruler-wrap{position:relative;padding-top:10px}

/* stat mini-cards inside results */
.mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.mini-stat{background:#FBFCFE;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.mini-stat .v{font-family:var(--font-mono);font-size:1.15rem;font-weight:600}
.mini-stat .k{font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.mini-stat.win{border-color:var(--first);background:#F0F8F3}

/* ---------- Article prose ---------- */
article.prose{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px;margin-bottom:40px}
@media (max-width:640px){article.prose{padding:22px 18px}}
.prose h2{
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.25;
  margin:2em 0 .6em;letter-spacing:-.01em;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--font-display);font-weight:700;font-size:1.13rem;margin:1.6em 0 .45em}
.prose p{margin:0 0 1.05em;color:var(--ink-soft)}
.prose ul,.prose ol{padding-left:1.3em;color:var(--ink-soft);margin:0 0 1.1em}
.prose li{margin-bottom:.5em}
.prose strong{color:var(--ink)}
.prose .formula{
  font-family:var(--font-mono);font-size:.92rem;background:var(--ink);color:#EAF0FF;
  padding:14px 18px;border-radius:var(--radius-sm);overflow-x:auto;margin:0 0 1.1em;
}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:.95rem}
.prose th{
  text-align:left;background:var(--ink);color:#fff;padding:10px 12px;
  font-family:var(--font-display);font-weight:700;font-size:.88rem;
}
.prose td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.prose tr:nth-child(even) td{background:#FBFCFE}
.table-scroll{overflow-x:auto;margin:0 0 1.2em}
.callout{
  border-left:4px solid var(--gold);background:var(--gold-soft);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 18px;margin:0 0 1.1em;
  color:var(--ink-soft);font-size:.97rem;
}
figure.article-img{margin:1.4em 0}
figure.article-img .img-frame{
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#EEF1F6;
}
figure.article-img .img-ph{
  aspect-ratio:16/9;display:grid;place-items:center;color:var(--muted);
  font-family:var(--font-mono);font-size:.8rem;text-align:center;padding:16px;
}
figure.article-img figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}

/* FAQ accordions */
details.faq{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;background:#FBFCFE;overflow:hidden}
details.faq summary{
  cursor:pointer;padding:14px 18px;font-weight:600;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:1.15rem;flex:0 0 auto}
details.faq[open] summary::after{content:"–"}
details.faq .faq-a{padding:0 18px 15px;color:var(--ink-soft)}
details.faq .faq-a p{margin:0 0 .7em}

/* Related links */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:8px}
.related-card{
  display:block;background:#FBFCFE;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px 16px;color:var(--ink);
}
.related-card:hover{border-color:var(--accent);text-decoration:none;background:var(--accent-soft)}
.related-card .t{font-weight:700;font-family:var(--font-display);font-size:.98rem;margin-bottom:3px;color:var(--accent-dark)}
.related-card .d{font-size:.88rem;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#B9C6DB;margin-top:20px;border-top:3px solid var(--gold)}
.footer-grid{
  max-width:1140px;margin:0 auto;padding:44px 20px 26px;display:grid;gap:30px;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h4{color:#fff;font-family:var(--font-display);font-size:.95rem;margin:0 0 12px;letter-spacing:.03em}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:9px}
.footer-grid a{color:#B9C6DB;font-size:.9rem}
.footer-grid a:hover{color:#fff}
.footer-about{font-size:.9rem;line-height:1.6}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);text-align:center;
  padding:16px 20px;font-size:.82rem;color:#8FA0BC;
}
.footer-bottom a{color:#B9C6DB}

/* misc */
.disclaimer-strip{
  max-width:820px;margin:0 auto 40px;padding:0 20px;
}
.disclaimer-strip p{
  font-size:.85rem;color:var(--muted);border:1px dashed var(--line);
  border-radius:var(--radius-sm);padding:12px 16px;margin:0;background:#FBFCFE;
}
.updated{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);margin-bottom:1.4em}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;z-index:100;
}
.skip-link:focus{left:0}

/* Featured page image */
.featured-img{max-width:900px;margin:-26px auto 26px}
.featured-img .img-frame{box-shadow:0 18px 40px -18px rgba(15,27,45,.35)}
.featured-img img{display:block;width:100%;height:auto}
@media (max-width:700px){.featured-img{margin:-14px auto 18px}}

/* Embedded calculator tools */
.tool-embed{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin:-34px auto 34px;position:relative;z-index:5;
  max-width:860px;overflow:hidden;
}
main > .container:first-child + .tool-embed{margin-top:16px}
.tool-frame{display:block;width:100%;border:0;min-height:420px}
@media (max-width:900px){.tool-embed{margin-left:14px;margin-right:14px}}