/* ============================================================
   THE INVESTMENT CLUB — SHARED DESIGN SYSTEM
   Direction: Apple × Amazon. Apple's restraint — system type,
   huge whitespace, monochrome with one deliberate accent —
   fused with Amazon's structural honesty: navy/orange, dense
   trust signals, a functional multi-column footer.
   Loaded by every page; page-specific <style> blocks that
   remain inline hold only that page's unique components.
   ============================================================ */

:root{
  /* ---- palette ---- */
  --ink:              #1D1D1F;   /* primary text — Apple near-black */
  --ink-soft:         rgba(29,29,31,0.68);
  --ink-faint:        rgba(29,29,31,0.46);
  --white:            #FFFFFF;   /* page background */
  --fog:              #F5F5F7;   /* Apple's light-gray section wash */
  --fog-deep:         #E8E8ED;
  --line:             #D2D2D7;   /* hairline borders */
  --navy:             #131921;   /* Amazon's actual header navy */
  --navy-deep:        #0B0F16;
  --navy-line:        rgba(255,255,255,0.1);
  --orange:           #FF9900;   /* Amazon's actual "Buy Now" amber */
  --orange-deep:      #E68A00;
  --gold:             #FFD814;   /* Amazon's actual "Add to Cart" / Prime gold */
  --blue:             #0071E3;   /* Apple's actual button/link blue */
  --blue-deep:        #0058B0;
  --green:            #1D7A46;   /* gains */
  --red:              #C4331F;   /* losses */
  --cream-soft:       rgba(255,255,255,0.68);
  --cream-faint:      rgba(255,255,255,0.42);

  /* ---- type — system stack renders SF Pro on Apple devices ---- */
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ---- misc ---- */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
}

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

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--white);
  color:var(--ink);
  overflow-x:hidden;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--ink); color:#fff; }
.tabular{ font-variant-numeric:tabular-nums; }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--white); }
::-webkit-scrollbar-thumb{ background:var(--fog-deep); border:2px solid var(--white); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }

/* ============================================================
   TYPE SCALE / SECTION HEADERS
   ============================================================ */
section{ padding:6.5rem 2.5rem; position:relative; z-index:1; }
.section-tag{
  font-size:0.78rem; font-weight:600; letter-spacing:0.02em;
  color:var(--ink-faint); text-transform:uppercase; margin-bottom:1rem;
}
.section-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,4vw,3rem); color:var(--ink); line-height:1.1; margin-bottom:1.2rem;
  letter-spacing:-0.03em;
}
.section-sub{ font-size:1.1rem; color:var(--ink-soft); line-height:1.65; max-width:540px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; max-width:1200px; margin:0 auto; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; gap:2.5rem; } }

/* ============================================================
   LOGOMARK — simple flat monogram, used in nav / footer
   ============================================================ */
.logomark{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:var(--navy);
  color:#fff; font-weight:700; letter-spacing:-0.02em; flex-shrink:0;
}

/* ============================================================
   NAV — translucent, minimal, no pill chips
   ============================================================ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.9rem 2.5rem;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nav-logo{
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--ink); letter-spacing:-0.02em; text-decoration:none;
}
.nav-logo span:not(.logomark){ color:var(--ink-faint); font-weight:500; }
.nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-item{ position:relative; }
.nav-link{
  font-size:0.9rem; font-weight:400; color:var(--ink-soft); text-decoration:none;
  transition:color 0.2s;
  padding:0.4rem 0; display:flex; align-items:center; gap:0.35rem;
  position:relative; cursor:pointer; background:transparent; border:none;
}
.nav-link:hover,.nav-link.active{ color:var(--ink); }
.nav-link-bg{ display:none; }
.nav-chevron{ width:10px; height:10px; transition:transform 0.25s; flex-shrink:0; opacity:0.5; }
.nav-item:hover .nav-chevron,.nav-item:focus-within .nav-chevron{ transform:rotate(180deg); }
.nav-link:focus{ outline:none; }
.nav-dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px); min-width:200px;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(20px); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:0.5rem; opacity:0; visibility:hidden;
  transition:opacity 0.2s,transform 0.2s,visibility 0.2s; z-index:200; white-space:nowrap;
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-dropdown a{
  display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.85rem; border-radius:8px;
  text-decoration:none; color:var(--ink-soft); font-size:0.88rem; font-weight:400; transition:background 0.15s,color 0.15s;
}
.nav-dropdown a:hover{ background:var(--fog); color:var(--ink); }
.nav-dropdown a.active{ color:var(--ink); font-weight:600; }
.nav-dropdown-icon{ display:none; }
.nav-cta{
  background:var(--orange); color:#141414; font-size:0.85rem; font-weight:700; padding:0.5rem 1.15rem; border-radius:4px;
  text-decoration:none; transition:background 0.2s; white-space:nowrap;
}
.nav-cta:hover{ background:var(--orange-deep); }
@media (max-width:900px){
  nav{ padding:0.7rem 1.25rem; flex-wrap:wrap; row-gap:0.6rem; }
  .nav-links{ flex-wrap:wrap; gap:1rem; }
  .nav-cta{ display:none; }
  /* Below this width, dropdowns are opened by tap (see assets/nav.js), not
     hover — a floating popover centered under the trigger can run off
     either edge of a narrow screen, so instead it drops in as a plain
     full-width block under its own nav item. */
  .nav-item.open{ width:100%; }
  .nav-dropdown{
    position:static; transform:none; opacity:1; visibility:visible;
    display:none; width:100%; margin-top:0.6rem; box-shadow:none;
  }
  .nav-item.open .nav-dropdown{ display:block; }
}

/* ============================================================
   BUTTONS — plain rectangular buttons, not pills. Blue is
   Apple's real button blue (#0071E3), used here the way a
   student who looked at Apple's site would actually copy it:
   a solid color and a modest border-radius, not a full pill.
   ============================================================ */
.btn-primary{
  background:var(--blue); color:#fff; padding:0.7rem 1.5rem; border-radius:6px;
  text-decoration:none; font-weight:600; font-size:1rem; transition:background 0.15s;
  display:inline-flex; align-items:center; gap:0.5rem; border:1px solid var(--blue);
}
.btn-primary:hover{ background:var(--blue-deep); }
.btn-arrow{ transition:transform 0.2s; }
.btn-primary:hover .btn-arrow{ transform:translateX(3px); }
.btn-secondary{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:0.7rem 1.5rem; border-radius:6px; text-decoration:none; font-size:1rem; font-weight:600; transition:all 0.15s;
  display:inline-flex; align-items:center; gap:0.4rem;
}
.btn-secondary:hover{ border-color:var(--blue); color:var(--blue); }

/* ============================================================
   BREADCRUMB (Amazon signature — thin functional wayfinding
   strip directly under the nav)
   ============================================================ */
.crumb-bar{ background:var(--fog); border-bottom:1px solid var(--line); padding:0.6rem 2.5rem; margin-top:64px; }
.crumb-bar-inner{ max-width:1200px; margin:0 auto; font-size:0.82rem; color:var(--ink-faint); }
.crumb-bar-inner a{ text-decoration:none; color:var(--ink-faint); transition:color 0.15s; }
.crumb-bar-inner a:hover{ color:var(--ink); text-decoration:underline; }
.crumb-bar-inner .sep{ margin:0 0.45rem; color:var(--line); }
.crumb-bar-inner .current{ color:var(--ink); font-weight:600; }

/* ============================================================
   SPEC ROW (Apple tech-spec convention — label/value pairs
   separated by hairlines, no icons)
   ============================================================ */
.spec-row{ display:grid; grid-template-columns:220px 1fr; gap:1.2rem; padding:1.5rem 0; border-top:1px solid var(--line); }
.spec-row:last-child{ border-bottom:1px solid var(--line); }
.spec-row h4{ font-size:1.02rem; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.spec-row p{ font-size:0.92rem; color:var(--ink-soft); line-height:1.6; max-width:480px; }
@media (max-width:640px){ .spec-row{ grid-template-columns:1fr; gap:0.4rem; } }

/* ============================================================
   LISTING TILE (Amazon product-tile convention — plain block,
   small category tag bottom-left, no icon square)
   ============================================================ */
.listing-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:3rem auto 0; max-width:1200px; }
@media (min-width:640px){ .listing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .listing-grid{ grid-template-columns:repeat(3,1fr); } }
.listing-tile{ background:#fff; padding:1.8rem 1.6rem; display:flex; flex-direction:column; gap:0.8rem; transition:background 0.15s; }
.listing-tile:hover{ background:var(--fog); }
.listing-tile h3{ font-family:var(--font-display); font-size:1.02rem; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.listing-tile p{ font-size:0.88rem; color:var(--ink-soft); line-height:1.6; flex:1; }
.listing-tag{ align-self:flex-start; font-size:0.68rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-faint); padding-top:0.6rem; border-top:1px solid var(--line); width:100%; }

/* ============================================================
   CARDS — flat, Apple product-grid style
   ============================================================ */
.card{
  background:var(--fog); border:1px solid transparent; border-radius:var(--radius-l);
  padding:2.1rem 1.8rem; transition:background 0.2s,transform 0.2s;
}
.card:hover{ background:var(--fog-deep); transform:translateY(-2px); }
.card-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:1.2rem; background:#fff; border:1px solid var(--line); }
.card h3{ font-family:var(--font-display); font-size:1.08rem; font-weight:600; color:var(--ink); margin-bottom:0.55rem; letter-spacing:-0.01em; }
.card p{ font-size:0.92rem; color:var(--ink-soft); line-height:1.6; }

/* ============================================================
   BADGES / TAGS — monochrome default, orange only for "special"
   ============================================================ */
.badge-red,.badge-warm{
  font-size:0.72rem; padding:0.32rem 0.75rem; border-radius:4px;
  font-weight:600; letter-spacing:0.01em;
}
.badge-red{ background:var(--fog-deep); color:var(--ink-soft); }
.badge-warm{ background:var(--orange); color:#fff; }

/* ============================================================
   FORMS
   ============================================================ */
.form-field{ display:flex; flex-direction:column; gap:0.4rem; }
.form-field label{
  font-size:0.78rem; font-weight:500; color:var(--ink-faint);
}
.form-field input,.form-field select,input[type="text"],input[type="number"],input[type="password"]{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-s);
  color:var(--ink); font-family:var(--font-body); font-size:0.92rem; padding:0.65rem 0.9rem;
  outline:none; transition:border-color 0.2s,box-shadow 0.2s; width:100%;
}
.form-field input:focus,.form-field select:focus{ border-color:var(--ink); box-shadow:0 0 0 3px var(--fog-deep); }
.form-field select option{ background:#fff; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; margin-bottom:0.85rem; }
.form-full{ grid-column:1/-1; }
.add-btn{
  background:var(--blue); color:#fff; border:1px solid var(--blue); border-radius:6px;
  padding:0.6rem 1.5rem; font-size:0.88rem; font-weight:600; cursor:pointer; transition:background 0.2s;
}
.add-btn:hover{ background:var(--blue-deep); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:200; display:none; align-items:center; justify-content:center; padding:1.5rem; backdrop-filter:blur(4px); }
.modal-overlay.show{ display:flex; }
.modal{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); padding:2.2rem;
  width:100%; max-width:380px; position:relative; box-shadow:0 30px 70px rgba(0,0,0,0.25);
  max-height:calc(100vh - 3rem); overflow-y:auto;
}
.modal-title{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--ink); margin-bottom:0.4rem; letter-spacing:-0.01em; }
.modal-sub{ font-size:0.9rem; color:var(--ink-soft); margin-bottom:1.5rem; line-height:1.6; }
.modal input{
  width:100%; background:var(--fog); border:1px solid var(--line); border-radius:var(--radius-s);
  color:var(--ink); font-family:var(--font-body); font-size:0.9rem; padding:0.75rem 1rem;
  outline:none; margin-bottom:0.8rem; transition:border-color 0.2s;
}
.modal input:focus{ border-color:var(--ink); background:#fff; }
.modal input::placeholder{ color:var(--ink-faint); }
.modal-btn{
  width:100%; background:var(--orange); color:#141414; border:1px solid var(--orange); border-radius:4px;
  padding:0.85rem; font-size:0.94rem; font-weight:700; cursor:pointer; transition:background 0.2s;
}
.modal-btn:hover{ background:var(--orange-deep); }
.modal-btn:disabled{ background:var(--fog-deep); border-color:var(--line); color:var(--ink-faint); cursor:not-allowed; }
.modal-err{ font-size:0.8rem; color:var(--red); margin-top:0.5rem; text-align:center; min-height:1rem; }
.disclaimer-check-row{ display:flex; align-items:center; gap:0.6rem; font-size:0.85rem; color:var(--ink-soft); cursor:pointer; }
.disclaimer-check-row input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--orange); cursor:pointer; flex-shrink:0; }
.disclaimer-check-row a{ color:var(--blue); font-weight:600; text-decoration:none; }
.disclaimer-check-row a:hover{ text-decoration:underline; }
.modal-close{ position:absolute; top:1rem; right:1.1rem; background:transparent; border:none; color:var(--ink-faint); font-size:1.2rem; cursor:pointer; }
.modal-close:hover{ color:var(--ink); }

/* ============================================================
   GENERIC TABLE LOOK
   ============================================================ */
table{ border-collapse:collapse; width:100%; }
th{
  font-size:0.72rem; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--ink-faint); text-align:left; padding:0.7rem 0.9rem;
  border-bottom:1px solid var(--line);
}
td{ padding:0.85rem 0.9rem; font-size:0.9rem; border-bottom:1px solid var(--line); }
tr:hover td{ background:var(--fog); }

/* ============================================================
   SPEC LINE (Amazon rating-line convention — plain inline text
   under a title, not a boxed stat grid)
   ============================================================ */
.spec-line{ font-size:0.92rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; }
.spec-line .dot{ color:var(--line); }
.spec-line strong{ color:var(--ink); font-weight:700; }

/* ============================================================
   STATS ROW (generic)
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--fog); }
.stat{ padding:2.8rem 2rem; border-right:1px solid var(--line); text-align:center; }
.stat:last-child{ border-right:none; }
.stat-number{ font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:var(--ink); display:block; line-height:1; letter-spacing:-0.02em; }
.stat-label{ font-size:0.8rem; color:var(--ink-faint); font-weight:500; margin-top:0.5rem; display:block; }

/* ============================================================
   ANIMATION
   ============================================================ */
.animate-fade{ opacity:0; transform:translateY(14px); animation:fadeUp 0.7s cubic-bezier(0.2,0.8,0.2,1) forwards; }
.delay-1{ animation-delay:0.05s; }
.delay-2{ animation-delay:0.2s; }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   PAGE HEADER BAND (used on interior pages: Leaders, Calendar, etc.)
   ============================================================ */
.page-header{
  background:var(--fog); padding:9.5rem 2.5rem 4.5rem; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-header-grid{ display:none; }
.page-header-inner{ position:relative; z-index:1; max-width:760px; }
.page-header h1{
  font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,4.6vw,3.4rem);
  color:var(--ink); line-height:1.08; margin-bottom:1rem; letter-spacing:-0.03em;
}
.page-header p{ font-size:1.1rem; color:var(--ink-soft); line-height:1.6; max-width:560px; }

/* ============================================================
   STICKY FOOTER (Amazon-style dense navy footer)
   ============================================================ */
.site-footer{ position:relative; height:440px; width:100%; clip-path:polygon(0% 0,100% 0%,100% 100%,0 100%); margin-top:4rem; }
.site-footer-inner{ position:fixed; bottom:0; height:440px; width:100%; }
.site-footer-content{
  position:sticky; top:calc(100vh - 440px); height:100%; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem;
  padding:2.8rem 3rem; background:var(--navy);
}
.footer-top{ display:flex; gap:3rem; flex-wrap:wrap; }
.footer-brand{ max-width:230px; min-width:170px; }
.footer-brand-logo{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff; text-decoration:none; display:flex; align-items:center; gap:0.6rem; margin-bottom:0.95rem; letter-spacing:-0.02em; }
.footer-brand-logo span:not(.logomark){ color:var(--cream-faint); font-weight:400; }
.footer-brand-logo .logomark{ background:#fff; color:var(--navy); }
.footer-brand-desc{ font-size:0.85rem; color:var(--cream-faint); line-height:1.65; margin-bottom:1.1rem; }
.footer-socials{ display:flex; gap:0.5rem; }
.footer-social-btn{
  width:32px; height:32px; border:1px solid var(--navy-line); background:rgba(255,255,255,0.04);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:0.75rem; font-weight:700; transition:all 0.2s; color:var(--cream-soft);
}
.footer-social-btn:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }
.footer-groups{ display:flex; gap:3rem; flex:1; flex-wrap:wrap; }
.footer-group-label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:#fff; font-weight:600; margin-bottom:1rem; }
.footer-group ul{ list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-group ul a{ font-size:0.86rem; color:var(--cream-faint); text-decoration:none; transition:color 0.2s; display:inline-flex; align-items:center; gap:0.35rem; }
.footer-group ul a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--navy-line); padding-top:1.1rem; flex-wrap:wrap; gap:0.6rem; }
.footer-bottom p{ font-size:0.78rem; color:var(--cream-faint); }
.footer-bottom-links{ display:flex; gap:1.3rem; }
.footer-bottom-links a{ font-size:0.78rem; color:var(--cream-faint); text-decoration:none; transition:color 0.2s; }
.footer-bottom-links a:hover{ color:#fff; }

@media (max-width:768px){
  .site-footer{ height:auto; clip-path:none; }
  .site-footer-inner{ position:static; height:auto; }
  .site-footer-content{ position:static; height:auto; overflow:visible; padding:2.4rem 1.5rem; }
  .footer-top{ flex-direction:column; gap:2rem; }
  .footer-groups{ flex-direction:column; gap:1.8rem; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:0.8rem; }
}