/* ==========================================================================
   THE MERIDIAN HEIGHTS ALUMNI ASSOCIATION — DESIGN SYSTEM
   ========================================================================== */

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

:root{
  --navy:#0e1a2b;
  --navy-deep:#081120;
  --ink:#12131a;
  --parchment:#f3ead9;
  --cream:#faf5ea;
  --burgundy:#5c1a2b;
  --burgundy-bright:#7a2438;
  --gold:#b8923f;
  --gold-soft:#d9c495;
  --forest:#1f3d2c;
  --cobalt:#2f6fed;
  --charcoal:#2a2a28;
  --white:#fffdf8;

  --text-on-dark:#f4ecdd;
  --text-on-dark-dim:#b9c2cf;
  --text-on-parchment:#241b12;
  --text-on-parchment-dim:#5c5140;

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

  --container: 1240px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-1: 0 2px 10px rgba(8,17,32,.10);
  --shadow-2: 0 12px 40px rgba(8,17,32,.20);

  --ease: cubic-bezier(.22,.68,.32,1);
}

*,*::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; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--parchment);
  color:var(--text-on-parchment);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--serif);margin:0;font-weight:600;letter-spacing:-.01em;}
p{margin:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.surface-navy{background:var(--navy);color:var(--text-on-dark);}
.surface-ink{background:var(--ink);color:var(--text-on-dark);}
.surface-parchment{background:var(--parchment);color:var(--text-on-parchment);}
.surface-cream{background:var(--cream);color:var(--text-on-parchment);}
.surface-burgundy{background:var(--burgundy);color:var(--text-on-dark);}
.surface-forest{background:var(--forest);color:var(--text-on-dark);}
.surface-gold{background:var(--gold-soft);color:var(--text-on-parchment);}
.section{padding:88px 0;}
.section-sm{padding:56px 0;}
@media (max-width:900px){ .section{padding:56px 0;} .section-sm{padding:36px 0;} }

.eyebrow{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:12px; font-weight:500; opacity:.72;
}
.display-1{font-size:clamp(38px,7vw,88px); line-height:.98;}
.display-2{font-size:clamp(30px,4.4vw,56px); line-height:1.03;}
.display-3{font-size:clamp(24px,3vw,36px); line-height:1.1;}
.lede{font-size:clamp(16px,1.6vw,20px); line-height:1.55; max-width:60ch;}
.mono-label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.7;}

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:14px 26px; border-radius:999px; font-family:var(--sans); font-weight:600;
  font-size:14px; letter-spacing:.02em; border:1px solid transparent; transition:transform .18s var(--ease), background .18s, border-color .18s, color .18s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--gold); color:var(--navy-deep);}
.btn-primary:hover{background:var(--gold-soft);}
.btn-outline-dark{border-color:rgba(244,236,221,.4); color:var(--text-on-dark);}
.btn-outline-dark:hover{border-color:var(--text-on-dark); background:rgba(244,236,221,.08);}
.btn-outline-light{border-color:rgba(36,27,18,.3); color:var(--text-on-parchment);}
.btn-outline-light:hover{border-color:var(--text-on-parchment); background:rgba(36,27,18,.06);}
.btn-ghost{background:transparent; padding:8px 4px; font-weight:600; text-decoration:underline; text-underline-offset:4px;}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------------- NAV ---------------- */
.site-header{
  position:sticky; top:0; z-index:80; background:rgba(14,26,43,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(244,236,221,.12);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px;}
.brand{display:flex; flex-direction:column; color:var(--text-on-dark); line-height:1.1;}
.brand strong{font-family:var(--serif); font-size:17px; letter-spacing:.01em;}
.brand span{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; margin-top:2px;}
.nav-primary{display:flex; gap:28px; align-items:center;}
.nav-primary a{font-size:13.5px; font-weight:600; color:var(--text-on-dark-dim); letter-spacing:.02em; padding:6px 0; border-bottom:2px solid transparent;}
.nav-primary a:hover, .nav-primary a.active{color:var(--text-on-dark); border-color:var(--gold);}
.nav-secondary{display:flex; align-items:center; gap:14px;}
.nav-icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(244,236,221,.25);
  background:transparent; color:var(--text-on-dark); display:flex; align-items:center; justify-content:center;
}
.nav-icon-btn:hover{background:rgba(244,236,221,.1);}
.year-chip{
  font-family:var(--mono); font-size:11px; color:var(--gold-soft); border:1px solid rgba(184,146,63,.5);
  padding:5px 10px; border-radius:999px; letter-spacing:.06em;
}
.mobile-menu-btn{display:none; background:none; border:none; color:var(--text-on-dark);}
@media (max-width:980px){
  .nav-primary{display:none;}
  .mobile-menu-btn{display:flex;}
}

.mobile-drawer{
  position:fixed; inset:0; z-index:120; display:none;
}
.mobile-drawer.open{display:block;}
.mobile-drawer .backdrop{position:absolute; inset:0; background:rgba(8,17,32,.6);}
.mobile-drawer .panel{
  position:absolute; top:0; right:0; bottom:0; width:min(340px,86vw); background:var(--navy);
  padding:24px; overflow-y:auto; transform:translateX(100%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column; gap:4px;
}
.mobile-drawer.open .panel{transform:translateX(0);}
.mobile-drawer a{display:block; padding:14px 6px; color:var(--text-on-dark); font-weight:600; font-size:16px; border-bottom:1px solid rgba(244,236,221,.1);}
.mobile-drawer .close-drawer{align-self:flex-end; background:none; border:none; color:var(--text-on-dark); padding:8px;}

/* ---------------- FOOTER ---------------- */
.site-footer{background:var(--navy-deep); color:var(--text-on-dark); padding:72px 0 28px;}
.footer-statement{font-family:var(--serif); font-size:clamp(28px,5vw,52px); line-height:1.02; margin-bottom:8px;}
.footer-sub{font-family:var(--serif); font-style:italic; opacity:.75; margin-bottom:48px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(244,236,221,.12);}
.footer-grid h5{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; opacity:.55; margin-bottom:16px;}
.footer-grid a{display:block; padding:6px 0; color:var(--text-on-dark-dim); font-size:14px;}
.footer-grid a:hover{color:var(--gold-soft);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px;}
.footer-bottom .legal{display:flex; gap:18px; font-size:12.5px; opacity:.6;}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }

/* ---------------- GRID ---------------- */
.grid-12{display:grid; grid-template-columns:repeat(12,1fr); gap:24px;}
@media (max-width:1080px){ .grid-12{grid-template-columns:repeat(8,1fr);} .grid-12 > *{grid-column:span 8 !important;} }
@media (max-width:640px){ .grid-12{grid-template-columns:repeat(4,1fr);} .grid-12 > *{grid-column:span 4 !important;} }

/* ---------------- STATS ---------------- */
.stat-strip{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:rgba(244,236,221,.14);}
.stat-cell{background:var(--navy); padding:32px 20px; text-align:left;}
.stat-num{font-family:var(--serif); font-size:clamp(24px,3vw,38px); color:var(--gold-soft);}
.stat-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.65; margin-top:6px;}
@media (max-width:900px){ .stat-strip{grid-template-columns:repeat(2,1fr);} }

/* ---------------- YEAR TIMELINE (homepage) ---------------- */
.year-rail{display:flex; align-items:flex-end; gap:14px; overflow-x:auto; padding:24px 4px 8px; scrollbar-width:thin;}
.year-node{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:10px; background:none; border:none;
  color:var(--text-on-dark); padding:6px; opacity:.6; transition:opacity .2s;
}
.year-node:hover, .year-node:focus-visible, .year-node.active{opacity:1;}
.year-node .dot{width:14px; height:14px; border-radius:50%; background:var(--gold-soft); border:2px solid var(--gold);}
.year-node.active .dot{background:var(--cobalt); border-color:var(--cobalt); box-shadow:0 0 0 5px rgba(47,111,237,.25);}
.year-node .yr{font-family:var(--mono); font-size:13px;}

/* ---------------- PATHWAYS ---------------- */
.pathway-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.pathway-chip{
  border:1px solid rgba(36,27,18,.16); border-radius:var(--radius-md); padding:18px 16px; background:var(--cream);
  display:flex; flex-direction:column; gap:6px; text-align:left; transition:transform .2s var(--ease), box-shadow .2s;
}
.pathway-chip:hover{transform:translateY(-3px); box-shadow:var(--shadow-1); border-color:var(--gold);}
.pathway-chip strong{font-family:var(--serif); font-size:16px;}
.pathway-chip span{font-family:var(--mono); font-size:11px; opacity:.6;}
@media (max-width:900px){ .pathway-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------------- CARDS ---------------- */
.card{background:var(--white); border:1px solid rgba(36,27,18,.1); border-radius:var(--radius-md); padding:22px; }
.event-row{
  display:grid; grid-template-columns:100px 1fr auto; gap:18px; align-items:center; padding:20px 0;
  border-bottom:1px solid rgba(244,236,221,.14);
}
.event-row:last-child{border-bottom:none;}
.event-date-block{font-family:var(--mono); text-align:center; background:rgba(244,236,221,.06); border-radius:var(--radius-sm); padding:10px 6px;}
.event-date-block .d{font-size:22px; display:block; color:var(--gold-soft);}
.event-date-block .m{font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.7;}
.event-title{font-family:var(--serif); font-size:19px;}
.event-meta{font-family:var(--mono); font-size:11.5px; opacity:.65; margin-top:4px; text-transform:uppercase; letter-spacing:.04em;}

.story-card{display:flex; flex-direction:column; gap:10px; padding:22px 0; border-bottom:1px solid rgba(36,27,18,.12);}
.story-card:last-child{border-bottom:none;}
.story-cat{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--burgundy);}
.story-title{font-family:var(--serif); font-size:22px;}
.story-meta{font-family:var(--mono); font-size:11px; opacity:.6;}

/* ---------------- CHAPTER CONSTELLATION ---------------- */
.chapter-constellation{position:relative; background:var(--ink); border-radius:var(--radius-lg); overflow:hidden;}
.chapter-node-btn{
  position:absolute; transform:translate(-50%,-50%); background:none; border:none; color:var(--text-on-dark);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.chapter-node-btn .hex{
  width:20px; height:20px; background:var(--gold-soft); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition:transform .2s var(--ease), background .2s;
}
.chapter-node-btn:hover .hex, .chapter-node-btn.active .hex{background:var(--cobalt); transform:scale(1.35);}
.chapter-node-btn .lbl{font-family:var(--mono); font-size:10.5px; white-space:nowrap;}

/* ---------------- NETWORK CANVAS ---------------- */
.network-shell{position:relative; background:var(--navy); border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(244,236,221,.1);}
.network-shell svg{width:100%; height:100%; display:block; touch-action:pan-y pinch-zoom;}
.network-node-year circle{fill:var(--burgundy-bright); stroke:var(--gold-soft); stroke-width:1.5;}
.network-node-alumnus circle{fill:var(--cobalt); stroke:rgba(244,236,221,.4); stroke-width:1;}
.network-node-chapter polygon{fill:var(--gold); stroke:rgba(244,236,221,.4);}
.network-node-industry rect{fill:var(--forest); stroke:var(--gold-soft);}
.network-edge{stroke:rgba(244,236,221,.18); stroke-width:1;}
.network-edge.emph{stroke:var(--gold); stroke-width:2;}
.network-label{fill:var(--text-on-dark); font-family:var(--mono); font-size:9.5px; pointer-events:none;}
.network-node{cursor:pointer;}
.network-node:focus-visible circle, .network-node:focus-visible polygon, .network-node:focus-visible rect{stroke:var(--cobalt); stroke-width:3;}
.network-controls{position:absolute; top:14px; left:14px; display:flex; gap:8px; flex-wrap:wrap; max-width:calc(100% - 28px);}
.network-controls button{
  background:rgba(8,17,32,.75); color:var(--text-on-dark); border:1px solid rgba(244,236,221,.25);
  border-radius:999px; padding:7px 13px; font-size:12px; font-family:var(--sans); font-weight:600;
}
.network-controls button.active{background:var(--gold); color:var(--navy-deep); border-color:var(--gold);}
.network-legend{position:absolute; bottom:14px; left:14px; display:flex; gap:14px; flex-wrap:wrap; background:rgba(8,17,32,.7); padding:8px 12px; border-radius:8px;}
.network-legend .item{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; color:var(--text-on-dark-dim);}
.network-zoom{position:absolute; bottom:14px; right:14px; display:flex; flex-direction:column; gap:6px;}
.network-zoom button{width:34px; height:34px; border-radius:8px; background:rgba(8,17,32,.75); color:var(--text-on-dark); border:1px solid rgba(244,236,221,.25); font-size:16px;}
.network-panel{
  background:var(--cream); border-radius:var(--radius-md); padding:22px; height:fit-content;
}
.network-panel h3{font-size:22px;}
.network-panel .kv{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed rgba(36,27,18,.15); font-size:13.5px;}
.network-panel .kv b{font-family:var(--mono); font-size:12px;}

/* ---------------- TIMELINE (our-story) ---------------- */
.timeline{position:relative; margin-left:14px; padding-left:34px; border-left:2px solid rgba(184,146,63,.4);}
.timeline-item{position:relative; padding-bottom:40px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:''; position:absolute; left:-41px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--gold); border:3px solid var(--navy-deep);}
.timeline-year{font-family:var(--mono); font-size:13px; color:var(--gold-soft);}
.timeline-title{font-family:var(--serif); font-size:22px; margin:4px 0 8px;}
.timeline-item button.tl-toggle{background:none; border:none; color:inherit; text-align:left; padding:0; cursor:pointer; width:100%;}
.timeline-detail{max-height:0; overflow:hidden; transition:max-height .3s var(--ease); font-size:14px; opacity:.85;}
.timeline-detail.open{max-height:200px;}

/* ---------------- PRINCIPLES ---------------- */
.principle-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(36,27,18,.1);}
.principle-cell{background:var(--cream); padding:32px 26px;}
.principle-cell h3{font-size:20px; margin-bottom:10px;}
.principle-stat{font-family:var(--mono); font-size:12px; color:var(--burgundy); margin-top:14px;}
@media (max-width:900px){ .principle-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .principle-grid{grid-template-columns:1fr;} }

/* ---------------- FORMS ---------------- */
.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.form-field label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.7;}
.form-field input, .form-field select, .form-field textarea{
  padding:12px 14px; border-radius:8px; border:1px solid rgba(36,27,18,.22); font-family:var(--sans); font-size:14.5px;
  background:var(--white); color:var(--text-on-parchment);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:2px solid var(--cobalt); outline-offset:1px;}
.form-field.error input, .form-field.error select, .form-field.error textarea{border-color:var(--burgundy-bright);}
.form-error{color:var(--burgundy-bright); font-size:12.5px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:640px){ .form-row{grid-template-columns:1fr;} }
.radio-pill-group{display:flex; gap:10px; flex-wrap:wrap;}
.radio-pill{border:1px solid rgba(36,27,18,.22); border-radius:999px; padding:9px 16px; font-size:13.5px; cursor:pointer;}
.radio-pill input{display:none;}
.radio-pill.checked{background:var(--navy); color:var(--text-on-dark); border-color:var(--navy);}

/* ---------------- FILTER BAR ---------------- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.filter-bar select, .filter-bar input[type=search]{
  padding:10px 14px; border-radius:999px; border:1px solid rgba(36,27,18,.2); background:var(--white); font-size:13.5px; font-family:var(--sans);
}
.filter-pill{border:1px solid rgba(36,27,18,.2); border-radius:999px; padding:8px 14px; font-size:12.5px; background:var(--white);}
.filter-pill.active{background:var(--navy); color:var(--text-on-dark); border-color:var(--navy);}

/* ---------------- PROGRESS / IMPACT METERS ---------------- */
.progress-track{width:100%; height:10px; border-radius:999px; background:rgba(36,27,18,.12); overflow:hidden;}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--burgundy),var(--gold)); border-radius:999px; transition:width 1s var(--ease);}
.ring{--pct:0; width:120px; height:120px; border-radius:50%;
  background:conic-gradient(var(--gold) calc(var(--pct)*1%), rgba(36,27,18,.12) 0);
  display:flex; align-items:center; justify-content:center;}
.ring-inner{width:88px; height:88px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; flex-direction:column;}
.ring-inner b{font-family:var(--serif); font-size:20px;}
.ring-inner span{font-family:var(--mono); font-size:9px; text-transform:uppercase; opacity:.6;}

/* ---------------- TOASTS ---------------- */
#toast-stack{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center; width:100%; max-width:420px; padding:0 16px;}
.toast{background:var(--navy-deep); color:var(--text-on-dark); padding:13px 18px; border-radius:10px; font-size:13.5px; box-shadow:var(--shadow-2); display:flex; align-items:center; gap:10px; width:100%; animation:toast-in .25s var(--ease);}
@keyframes toast-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------------- MODAL ---------------- */
.modal-overlay{position:fixed; inset:0; background:rgba(8,17,32,.62); z-index:200; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--cream); border-radius:var(--radius-lg); max-width:560px; width:100%; max-height:86vh; overflow-y:auto; padding:32px; position:relative;}
.modal-close{position:absolute; top:16px; right:16px; background:none; border:none; font-size:22px; color:var(--text-on-parchment); width:36px; height:36px; border-radius:50%;}
.modal-close:hover{background:rgba(36,27,18,.08);}

/* ---------------- COMMAND MENU ---------------- */
.command-overlay{position:fixed; inset:0; background:rgba(8,17,32,.55); z-index:250; display:none; align-items:flex-start; justify-content:center; padding:12vh 16px;}
.command-overlay.open{display:flex;}
.command-box{background:var(--cream); width:100%; max-width:600px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2);}
.command-input{width:100%; border:none; padding:20px 22px; font-size:17px; font-family:var(--sans); background:transparent; border-bottom:1px solid rgba(36,27,18,.12);}
.command-input:focus{outline:none;}
.command-list{max-height:50vh; overflow-y:auto; padding:8px;}
.command-item{display:flex; justify-content:space-between; padding:12px 14px; border-radius:8px; font-size:14px; cursor:pointer;}
.command-item:hover, .command-item.sel{background:rgba(184,146,63,.16);}
.command-item small{font-family:var(--mono); opacity:.55; font-size:11px;}

/* ---------------- BOTTOM SHEET (mobile network detail) ---------------- */
.bottom-sheet{position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--cream); border-radius:20px 20px 0 0; padding:20px; max-height:70vh; overflow-y:auto; transform:translateY(100%); transition:transform .28s var(--ease); box-shadow:0 -8px 30px rgba(0,0,0,.25); display:none;}
.bottom-sheet.open{display:block; transform:translateY(0);}
.bottom-sheet .handle{width:40px; height:4px; background:rgba(36,27,18,.25); border-radius:99px; margin:0 auto 14px;}

/* ---------------- UTILS ---------------- */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.text-center{text-align:center;}
.hidden{display:none !important;}
.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;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--gold); color:var(--navy-deep); padding:12px 18px; z-index:400; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px;}

.two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:40px;}
@media (max-width:900px){ .two-col{grid-template-columns:1fr;} }

.tag{display:inline-block; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; padding:4px 10px; border-radius:999px; border:1px solid currentColor; opacity:.75;}

.breadcrumb{font-family:var(--mono); font-size:11.5px; opacity:.6; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px;}
.breadcrumb a:hover{text-decoration:underline;}

.empty-state{text-align:center; padding:60px 20px;}
.empty-state h3{font-size:26px; margin-bottom:10px;}

.loading-state{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:14px; color:var(--text-on-dark-dim);}
.loading-dots{display:flex; gap:6px;}
.loading-dots span{width:8px; height:8px; border-radius:50%; background:var(--gold); animation:loading-pulse 1.1s infinite ease-in-out;}
.loading-dots span:nth-child(2){animation-delay:.15s;} .loading-dots span:nth-child(3){animation-delay:.3s;}
@keyframes loading-pulse{0%,80%,100%{transform:scale(.6); opacity:.4;} 40%{transform:scale(1); opacity:1;}}

table.compare-table{width:100%; border-collapse:collapse;}
table.compare-table th, table.compare-table td{padding:12px 14px; border-bottom:1px solid rgba(36,27,18,.12); font-size:14px; text-align:left;}
table.compare-table th{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.65;}

.calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.calendar-cell{aspect-ratio:1/1; border-radius:8px; background:rgba(244,236,221,.05); display:flex; flex-direction:column; padding:6px; font-family:var(--mono); font-size:11px; position:relative; border:1px solid transparent;}
.calendar-cell.has-event{border-color:var(--gold); cursor:pointer;}
.calendar-cell.has-event:hover, .calendar-cell.selected{background:rgba(184,146,63,.18);}
.calendar-cell .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); position:absolute; bottom:6px; left:6px;}
.calendar-dow{font-family:var(--mono); font-size:10px; text-align:center; opacity:.55; text-transform:uppercase;}

.saved-btn{background:none; border:1px solid rgba(36,27,18,.25); border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:600;}
.saved-btn.saved{background:var(--burgundy); color:var(--white); border-color:var(--burgundy);}

.reading-progress{position:fixed; top:0; left:0; height:3px; background:var(--gold); z-index:90; width:0%;}