/* ===================================================================
   Prepared for Black Students — Capstone Portfolio
   Design system: ink/paper/gold/forest/ember, Fraunces + Inter + Plex Mono
   Signature motif: "the thread" — relationships are infrastructure
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #14213D;
  --ink-70:     rgba(20,33,61,.72);
  --ink-45:     rgba(20,33,61,.48);
  --paper:      #FAF6EF;
  --paper-warm: #F1E9D8;
  --paper-deep: #EDE3CE;
  --gold:       #C9973D;
  --gold-soft:  #E4BE7C;
  --gold-dim:   rgba(201,151,61,.35);
  --forest:     #1F3D33;
  --forest-10:  rgba(31,61,51,.08);
  --ember:      #8C3A2E;
  --ember-10:   rgba(140,58,46,.09);
  --line:       rgba(20,33,61,.13);
  --line-soft:  rgba(20,33,61,.07);
  --shadow-1:   0 1px 2px rgba(20,33,61,.05), 0 6px 20px -8px rgba(20,33,61,.12);
  --shadow-2:   0 2px 6px rgba(20,33,61,.06), 0 20px 40px -16px rgba(20,33,61,.22);

  --display:    'Fraunces', Georgia, serif;
  --body:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:       'IBM Plex Mono', ui-monospace, monospace;

  --measure:    66ch;
  --rail-w:     236px;
  --radius:     4px;
}

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

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background-color:var(--paper);
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 0%, rgba(201,151,61,.07), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 12%, rgba(31,61,51,.06), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.078  0 0 0 0 0.129  0 0 0 0 0.239  0 0 0 0.02 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--forest); text-decoration-color:var(--gold-dim); text-underline-offset:3px; transition:color .15s ease; }
a:hover{ color:var(--ember); text-decoration-color:currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  font-weight:600;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-.012em;
}
h1{ font-size:clamp(2.3rem, 4.6vw, 3.7rem); font-weight:500; }
h2{
  font-size:clamp(1.55rem, 2.7vw, 2.05rem);
  position:relative;
  padding-bottom:.42em;
}
h2::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:44px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
}
h3{ font-size:1.28rem; }
h4{ font-size:1.05rem; font-family:var(--body); font-weight:700; text-transform:none; }

p{ margin:0 0 1.15em; max-width:var(--measure); }
.lede{ font-size:1.2rem; color:var(--ink-70); font-weight:400; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--forest);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:.9em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1.5px;
  background:linear-gradient(90deg, var(--gold), transparent);
  display:inline-block;
}

blockquote{
  position:relative;
  margin:2.2em 0;
  padding:.3em 0 .3em 1.7em;
  border-left:2px solid var(--gold);
  font-family:var(--display);
  font-style:italic;
  font-size:1.34rem;
  line-height:1.48;
  color:var(--ink);
  max-width:var(--measure);
}
blockquote::before{
  content:"\201C";
  position:absolute; left:-.08em; top:-.28em;
  font-family:var(--display);
  font-style:normal;
  font-size:3.6rem;
  color:var(--gold-soft);
  line-height:1;
  opacity:.8;
}
blockquote cite{
  display:block;
  margin-top:.7em;
  font-family:var(--mono);
  font-style:normal;
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-45);
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:var(--paper); padding:.8em 1.2em;
  z-index:200; font-family:var(--mono); font-size:.85rem;
}
.skip-link:focus{ left:1em; top:1em; }

/* ---------- Layout: persistent left sidebar ---------- */
.layout{
  display:flex;
  align-items:flex-start;
  min-height:100vh;
}

.sidebar{
  width:var(--rail-w);
  flex-shrink:0;
  background:var(--ink);
  color:rgba(250,247,241,.68);
  padding:2.4rem 1.6rem 2.6rem;
  position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:2.1rem;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(250,247,241,.16); border-radius:3px; }

.sidebar .brand{
  display:flex; align-items:center; gap:.7em;
  text-decoration:none; color:#fff; line-height:1.15;
}
.sidebar .brand::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(201,151,61,.2);
  flex-shrink:0;
}
.sidebar .brand strong{ font-family:var(--display); font-size:1.02rem; font-weight:600; display:block; }
.sidebar .brand span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(250,247,241,.4); display:block; margin-top:.25em;
}

.sidebar nav.primary ul{ list-style:none; margin:1.5em 0 0; padding:0; display:flex; flex-direction:column; gap:.1em; }
.sidebar nav.primary a{
  display:flex; align-items:center; gap:.7em;
  padding:.5em .55em; border-radius:var(--radius);
  color:rgba(250,247,241,.62); text-decoration:none; font-size:.86rem;
  border-left:2px solid transparent;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.sidebar nav.primary a .num{
  font-family:var(--mono); font-size:.66rem; color:rgba(250,247,241,.35); width:1.3em; flex-shrink:0;
}
.sidebar nav.primary a:hover{ color:#fff; background:rgba(250,247,241,.07); }
.sidebar nav.primary a[aria-current="page"]{
  color:#fff; background:rgba(201,151,61,.14); border-left-color:var(--gold); font-weight:600;
}
.sidebar nav.primary a[aria-current="page"] .num{ color:var(--gold); }

.sidebar .thread{ border-top:1px solid rgba(250,247,241,.13); padding-top:1.6em; position:relative; }
.thread .progress{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(250,247,241,.4); margin:0 0 1.1em 1.6rem;
}
.thread-line{
  position:absolute; left:5px; top:calc(1.6em + 6px); bottom:6px;
  width:1.5px; background:linear-gradient(var(--gold), rgba(250,247,241,.18) 85%, transparent);
  opacity:.7;
}
.thread ol{ list-style:none; margin:0; padding:0; }
.thread li{ position:relative; padding:0 0 1.15em 1.6rem; }
.thread li::before{
  content:"";
  position:absolute; left:0; top:.32em;
  width:11px; height:11px; border-radius:50%;
  background:var(--ink);
  border:2px solid rgba(250,247,241,.28);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.thread li.current::before{
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,151,61,.25);
}
.thread a{
  font-family:var(--mono); font-size:.73rem; letter-spacing:.03em;
  color:rgba(250,247,241,.5); text-decoration:none; display:block;
  transition:color .15s ease;
}
.thread li.current a{ color:#fff; font-weight:600; }
.thread a:hover{ color:var(--gold-soft); }

.sidebar-backdrop{ display:none; }

.content-area{ flex:1; min-width:0; }

.mobile-bar{
  display:none;
  align-items:center; justify-content:space-between;
  padding:1em 1.4rem;
  border-bottom:1px solid var(--line-soft);
  background:rgba(250,246,239,.9);
  backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:110;
}
.mobile-bar .brand{
  display:flex; align-items:center; gap:.6em;
  text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:600; font-size:.95rem;
}
.mobile-bar .brand::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0;
}
.sidebar-toggle{
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:.5em .8em; font-family:var(--mono); font-size:.78rem; color:var(--ink);
  cursor:pointer; display:flex; align-items:center; gap:.5em;
}
.sidebar-toggle:hover{ border-color:var(--gold); background:var(--paper-warm); }
.sidebar-toggle .bars{ display:flex; flex-direction:column; gap:3px; }
.sidebar-toggle .bars span{ width:14px; height:1.5px; background:var(--ink); display:block; }

@media (max-width: 980px){
  .layout{ display:block; }
  .sidebar{
    position:fixed; top:0; left:0; z-index:150;
    width:min(300px, 84vw);
    transform:translateX(-100%);
    transition:transform .28s ease;
    box-shadow:var(--shadow-2);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-backdrop{
    display:block;
    position:fixed; inset:0; z-index:140;
    background:rgba(20,33,61,.4);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  .sidebar-backdrop.open{ opacity:1; pointer-events:auto; }
  .content-area{ width:100%; }
  .mobile-bar{ display:flex; }
}

.shell{
  max-width:900px; margin:0 auto;
  padding:0 2rem;
}
@media (max-width:600px){ .shell{ padding:0 1.4rem; } }

main{ padding:3.4rem 0 6.5rem; min-width:0; }

section.block{
  margin:0 0 4rem; scroll-margin-top:2rem;
  opacity:0; transform:translateY(14px);
  animation:rise .6s ease forwards;
}
section.block:last-child{ margin-bottom:0; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  section.block{ opacity:1; transform:none; animation:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:5.2rem 0 3.4rem;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:-30%; right:-8%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,151,61,.16), transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute; bottom:-40%; left:-6%;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(31,61,51,.10), transparent 70%);
  pointer-events:none;
}
.hero .shell{ display:block; position:relative; }
.hero h1{ max-width:17ch; }
.hero .proposition{
  margin-top:1.7rem;
  max-width:54ch;
}
.hero--compact{ padding:3.2rem 0 2.4rem; }
.hero--compact h1{ max-width:34ch; font-size:clamp(2rem,3.8vw,2.85rem); }

/* ---------- Cards / tables ---------- */
.card{
  background:linear-gradient(180deg, var(--paper-warm), var(--paper-deep));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6em 1.7em;
  box-shadow:var(--shadow-1);
  position:relative;
}
.card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--gold), var(--forest));
  border-radius:var(--radius) 0 0 var(--radius);
}
.card + .card{ margin-top:1em; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:700px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

table.evidence{
  width:100%; border-collapse:separate; border-spacing:0;
  margin:1.5em 0 2.2em;
  font-size:.95rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
table.evidence th{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--forest); text-align:left; padding:.75em 1em;
  background:var(--paper-warm);
  border-bottom:1px solid var(--gold-dim);
}
table.evidence td{
  padding:.95em 1em; border-bottom:1px solid var(--line-soft); vertical-align:top;
  background:var(--paper);
  transition:background .15s ease;
}
table.evidence tbody tr:nth-child(even) td{ background:rgba(241,233,216,.45); }
table.evidence tbody tr:hover td{ background:var(--forest-10); }
table.evidence td:first-child, table.evidence th:first-child{
  font-weight:600; width:26%;
}
table.evidence tr:last-child td{ border-bottom:none; }

.boundary{
  display:flex; gap:1.1em; align-items:flex-start;
  background:var(--ember-10);
  border:1px solid rgba(140,58,46,.22);
  border-left:3px solid var(--ember);
  border-radius:var(--radius);
  padding:1.25em 1.5em;
  margin:1.7em 0;
  box-shadow:var(--shadow-1);
}
.boundary .tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ember); white-space:nowrap; padding-top:.15em; flex-shrink:0;
  font-weight:600;
}
.boundary p{ margin:0; font-size:.95rem; color:var(--ink-70); }

.pill{
  display:inline-block; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--gold-dim); border-radius:99px;
  background:rgba(201,151,61,.08);
  padding:.3em .85em; color:var(--forest); margin:0 .4em .4em 0;
  font-weight:500;
}

/* ---------- Timeline (journey) ---------- */
.timeline{ display:flex; flex-wrap:wrap; gap:0; margin:1.7em 0 2.3em; border-top:1px solid var(--line); }
.timeline .stop{ flex:1 1 150px; padding:1.2em 1.3em 0; position:relative; }
.timeline .stop::before{
  content:""; position:absolute; top:-2px; left:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  border-radius:2px;
}
.timeline .stop .when{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--forest); font-weight:600; }
.timeline .stop .what{ font-size:.92rem; color:var(--ink-70); margin-top:.4em; }

/* ---------- Proficiency meter ---------- */
.meter{ display:flex; align-items:center; gap:.55em; margin:.7em 0 1.5em; }
.meter .dot{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--gold-dim); transition:transform .15s ease; }
.meter .dot.filled{ background:var(--gold); border-color:var(--gold); box-shadow:0 2px 5px rgba(201,151,61,.35); }
.meter .dot.start{ border-color:var(--ink); border-width:2px; transform:scale(1.15); }
.meter .labels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.66rem; color:var(--ink-45); max-width:220px; margin-top:.2em; }
.growth-line{
  display:flex; align-items:center; gap:.9em; font-family:var(--mono); font-size:.85rem; color:var(--ink-70);
  margin-bottom:1em;
}
.growth-line .arrow{ color:var(--gold); }
.growth-line b{ color:var(--ink); font-size:1.08rem; }

/* ---------- Framework diagram ---------- */
.domains{ display:flex; flex-direction:column; gap:.7em; margin:1.7em 0; }
.domain{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.domain-head{ margin:0; }
.domain-toggle{
  all:unset;
  box-sizing:border-box;
  display:flex; align-items:center; gap:1.1em;
  width:100%; cursor:pointer;
  padding:1.05em 1.3em;
  font-family:var(--display); font-size:1.1rem; font-weight:600; color:var(--ink);
  transition:background .15s ease;
}
.domain-toggle:hover{ background:var(--paper-warm); }
.domain-toggle:focus-visible{ outline:2px solid var(--forest); outline-offset:-2px; }
.domain[data-open="true"] .domain-toggle{ background:var(--paper-warm); }
.domain-num{
  font-family:var(--mono); font-size:.85rem; font-weight:600; color:var(--gold);
  flex-shrink:0; width:1.4em;
}
.domain-title{ flex:1; }
.domain-icon{
  flex-shrink:0; width:10px; height:10px;
  border-right:2px solid var(--ink-45); border-bottom:2px solid var(--ink-45);
  transform:rotate(45deg);
  transition:transform .25s ease;
}
.domain[data-open="true"] .domain-icon{ transform:rotate(-135deg); border-color:var(--gold); }
.domain-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.domain-body p{
  margin:0; padding:0 1.3em 1.25em calc(1.4em + 1.1em + 1.3em);
  font-size:.95rem; color:var(--ink-70); max-width:56ch;
  border-top:1px solid var(--line-soft);
  padding-top:1em;
}
.loop-note{
  margin-top:.5em; text-align:center; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--forest);
  border:1px dashed var(--gold-dim); border-radius:var(--radius); padding:.8em;
  background:rgba(201,151,61,.05);
}

.functions{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.7em 0; }
@media (max-width:700px){ .functions{ grid-template-columns:1fr; } }
.functions .fn{
  border-left:2px solid var(--forest); padding:.3em 0 .3em 1.1em;
  transition:border-color .2s ease;
}
.functions .fn:hover{ border-color:var(--gold); }
.functions .fn h4{ margin-bottom:.25em; }
.functions .fn p{ font-size:.92rem; color:var(--ink-70); margin:0; }

.theory-steps{ display:flex; flex-direction:column; gap:0; margin:1.9em 0; }
.theory-steps .step{
  display:flex; gap:1.2em; align-items:flex-start;
  padding:1.1em 0; border-bottom:1px dashed var(--line);
}
.theory-steps .step:last-child{ border-bottom:none; }
.theory-steps .step .label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); width:9rem; flex-shrink:0; padding-top:.2em; font-weight:600;
}
.theory-steps .step p{ margin:0; }

/* ---------- Footer ---------- */
footer.site-footer{
  position:relative;
  border-top:1px solid var(--line);
  padding:3rem 1.5rem 3.4rem;
  background:linear-gradient(180deg, var(--paper-warm), var(--paper-deep));
}
footer.site-footer::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
footer.site-footer .shell{ max-width:900px; }
footer.site-footer p{ font-size:.86rem; color:var(--ink-45); max-width:60ch; }
footer.site-footer .foot-links{ display:flex; gap:1.5em; flex-wrap:wrap; margin-top:1.1em; font-size:.85rem; align-items:center; }

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.small{ font-size:.88rem; color:var(--ink-70); }
.section-divider{ border:none; border-top:1px solid var(--line); margin:2.7em 0; }
ul.plain, ol.plain{ padding-left:1.2em; }
ul.plain li, ol.plain li{ margin-bottom:.55em; }