/* ===========================================================
   MYP PHYSICS 4&5 — "LAB NOTEBOOK" DESIGN SYSTEM
   Ink navy on graph-paper white, teal + amber accents,
   Space Grotesk (display) / Literata (body) / IBM Plex Mono (data)
   =========================================================== */

:root{
  --ink:        #16233D;
  --ink-soft:   #45566F;
  --paper:      #EFF3F1;
  --paper-card: #FFFFFF;
  --grid-line:  #CBD8D2;
  --teal:       #0E7C7B;
  --teal-dark:  #0A5C5B;
  --amber:      #E8A33D;
  --amber-soft: #FBEBD2;
  --red-tab:    #C2554A;
  --radius:     14px;
  --shadow:     0 2px 0 rgba(22,35,61,0.06), 0 8px 24px rgba(22,35,61,0.06);
  --max-w:      880px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/32px 100%,
    var(--paper);
  background-attachment: local;
  color:var(--ink);
  font-family: 'Literata', Georgia, serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

@media (max-width:600px){
  body{ background-size: 100% 28px, 28px 100%; }
}

h1,h2,h3,h4,.display{
  font-family:'Space Grotesk', 'Segoe UI', sans-serif;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:1.15;
}

.mono, code, .tag, .kicker, .progress-tag{
  font-family:'IBM Plex Mono', 'Courier New', monospace;
}

a{ color:var(--teal-dark); text-decoration-thickness:1px; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

img,svg{ max-width:100%; }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(239,243,241,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1.5px solid var(--ink);
}
.topbar-inner{
  max-width:1080px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:baseline; gap:8px; text-decoration:none;
}
.brand-mark{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--ink);
}
.brand-sub{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--teal-dark);
  letter-spacing:0.06em;
}
.progress-tag{
  font-size:0.72rem; background:var(--ink); color:var(--paper);
  padding:5px 10px; border-radius:20px; white-space:nowrap;
}
.menu-toggle{
  display:none; background:none; border:1.5px solid var(--ink); border-radius:8px;
  width:38px; height:34px; cursor:pointer; color:var(--ink);
}
nav.unit-nav{
  max-width:1080px; margin:0 auto; padding:0 20px 12px;
  display:flex; gap:6px; flex-wrap:wrap;
}
nav.unit-nav a{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem;
  color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--grid-line); border-radius:20px;
  padding:4px 10px; background:var(--paper-card);
}
nav.unit-nav a.current, nav.unit-nav a:hover{
  color:var(--paper); background:var(--teal); border-color:var(--teal);
}

@media (max-width:760px){
  .menu-toggle{ display:block; }
  nav.unit-nav{ display:none; flex-direction:column; }
  nav.unit-nav.open{ display:flex; }
  nav.unit-nav a{ width:100%; text-align:left; }
}

/* ---------- Hero ---------- */
.hero{
  max-width:1080px; margin:0 auto; padding:56px 20px 20px;
}
.kicker{
  display:inline-block; font-size:0.72rem; letter-spacing:0.08em;
  color:var(--teal-dark); background:var(--amber-soft);
  border:1px solid var(--amber); padding:4px 10px; border-radius:20px;
  margin-bottom:16px;
}
.hero h1{ font-size:clamp(2rem,5vw,3.1rem); margin:0 0 14px; max-width:14ch; }
.hero p.lede{ max-width:60ch; color:var(--ink-soft); font-size:1.08rem; }

/* ---------- Unit grid (home) ---------- */
.grid{
  max-width:1080px; margin:0 auto; padding:20px 20px 80px;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.card{
  position:relative;
  background:var(--paper-card);
  border:1.5px solid var(--ink);
  border-radius:var(--radius);
  padding:20px 18px 18px;
  box-shadow:var(--shadow);
  text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .15s ease;
}
.card:hover{ transform:translateY(-3px); }
.card .num{
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem;
  color:var(--paper); background:var(--ink);
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.card .icon{ width:34px; height:34px; color:var(--teal); }
.card h3{ font-size:1.15rem; margin:2px 0 0; }
.card .concept{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.05em;
  color:var(--red-tab); text-transform:uppercase;
}
.card p{ font-size:0.92rem; color:var(--ink-soft); margin:0; flex-grow:1; }
.card .go{ font-size:0.82rem; font-weight:600; color:var(--teal-dark); }

/* ---------- Unit page ---------- */
.page{ max-width:var(--max-w); margin:0 auto; padding:36px 20px 100px; }
.page .concept-tag{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.06em;
  color:var(--red-tab); text-transform:uppercase;
}
.page h1{ font-size:clamp(1.7rem,4.5vw,2.5rem); margin:8px 0 20px; }
.intro-box{
  background:var(--paper-card); border-left:4px solid var(--teal);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 20px; margin:0 0 30px; box-shadow:var(--shadow);
}
.section{ margin:38px 0; }
.section h2{
  font-size:1.35rem; display:flex; align-items:center; gap:10px;
  border-bottom:2px solid var(--ink); padding-bottom:8px;
}
.section h2 .idx{
  font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--teal-dark);
}
.callout{
  background:var(--amber-soft); border:1px solid var(--amber);
  border-radius:var(--radius); padding:14px 18px; margin:16px 0; font-size:0.96rem;
}
.callout strong{ color:var(--teal-dark); }
.formula{
  font-family:'IBM Plex Mono',monospace; background:var(--ink); color:var(--paper);
  padding:14px 18px; border-radius:10px; margin:14px 0; font-size:1rem;
  overflow-x:auto; white-space:nowrap;
}
table.vocab{ width:100%; border-collapse:collapse; margin:14px 0; font-size:0.94rem; }
table.vocab th, table.vocab td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--grid-line); vertical-align:top; }
table.vocab th{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--teal-dark); text-transform:uppercase; }
table.vocab td.term{ font-weight:600; white-space:nowrap; }

details.qcheck{
  background:var(--paper-card); border:1.5px dashed var(--ink);
  border-radius:var(--radius); padding:12px 16px; margin:12px 0;
}
details.qcheck summary{ cursor:pointer; font-weight:600; }
details.qcheck .answer{ margin-top:10px; padding-top:10px; border-top:1px dotted var(--grid-line); color:var(--ink-soft); }

.pagenav{
  display:flex; justify-content:space-between; gap:12px; margin-top:48px;
  border-top:1.5px solid var(--ink); padding-top:20px;
}
.pagenav a{
  text-decoration:none; color:var(--ink); font-family:'Space Grotesk',sans-serif;
  font-size:0.92rem; display:flex; flex-direction:column; max-width:45%;
}
.pagenav .lbl{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--ink-soft); }
.pagenav a:last-child{ text-align:right; margin-left:auto; }

footer{
  border-top:1.5px solid var(--ink); padding:26px 20px 60px;
  text-align:center; font-family:'IBM Plex Mono',monospace; font-size:0.75rem;
  color:var(--ink-soft);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card{ transition:none; }
}