/* ==========================================================================
   nerdsnco. — Design System
   A social think tank for research, learning & community-led knowledge.

   Palette pulled from the wordmark: blaze orange, ink-teal, paper cream.
   Display face: Fraunces (Black, ink-trap serif — matches the logo cuts)
   Body face:    Source Serif 4 (long-form reading, editorial warmth)
   UI face:      Space Grotesk (forms, nav, labels — digital-native contrast)
   ========================================================================== */

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

:root{
  /* -- brand tokens --------------------------------------------------- */
  --ink:        #0E2622;   /* near-black teal — dark glyphs in the logo   */
  --ink-soft:   #1B3934;
  --paper:      #FBF3DE;   /* cream — light glyphs / paper stock          */
  --paper-dim:  #F1E6C9;
  --blaze:      #FF4B05;   /* the poster-orange background of the mark   */
  --blaze-deep: #C93800;
  --mustard:    #E8A63D;   /* secondary accent — tags, highlights         */
  --brick:      #7A2A18;

  --line:       rgba(14,38,34,0.14);
  --line-inv:   rgba(251,243,222,0.18);

  /* -- type ------------------------------------------------------------ */
  --f-display: "Fraunces", ui-serif, Georgia, serif;
  --f-body:    "Source Serif 4", Georgia, serif;
  --f-ui:      "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* -- misc -------------------------------------------------------------*/
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(14,38,34,0.16);
  --ease: cubic-bezier(.22,.9,.32,1);
  --maxw: 1180px;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin:0; }
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
input, textarea, select, button{ font-family: var(--f-ui); }

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

:focus-visible{
  outline: 3px solid var(--blaze);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 .4em;
}
h1{ font-size: clamp(2.6rem, 6vw, 5rem); }
h2{ font-size: clamp(1.9rem, 4vw, 3rem); }
h3{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
p{ margin: 0 0 1em; }
.lede{ font-size: 1.2rem; opacity:.85; }

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

section{ padding: 96px 0; }
@media (max-width: 720px){ section{ padding: 64px 0; } }

.section-inv{ background: var(--ink); color: var(--paper); }
.section-blaze{ background: var(--blaze); color: var(--paper); }

/* eyebrow / letter tags — reuses the A–E workstream labels from the
   actual strategic plan as a structural device, not decoration */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--f-ui); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.78rem; margin-bottom: 14px;
}
.eyebrow .tag-letter{
  display:inline-grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  background: var(--ink); color: var(--paper);
  font-size:.72rem;
}
.section-inv .eyebrow .tag-letter,
.section-blaze .eyebrow .tag-letter{ background: var(--paper); color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--f-ui); font-weight:600; font-size:.95rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .18s var(--ease), background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--blaze); }
.btn-blaze{ background: var(--blaze); color: var(--paper); }
.btn-blaze:hover{ background: var(--ink); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
.section-inv .btn-ghost{ color: var(--paper); border-color: var(--paper); }
.section-inv .btn-ghost:hover{ background: var(--paper); color: var(--ink); }
.btn-sm{ padding: 9px 18px; font-size:.85rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* the arrow mark — lifted straight from the logo's "n" glyph, reused
   everywhere as the site's directional / interactive cue */
.arrow-mark{ width: 14px; height:14px; flex-shrink:0; }
.arrow-mark path{ fill: currentColor; }
.bounce{ animation: bounce 1.6s ease-in-out infinite; }
@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* ---------------------------------------------------------------------- */
/* Nav                                                                     */
/* ---------------------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px; max-width: var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--f-display); font-weight:900; font-size:1.4rem; }
.brand .mark{ width:30px; height:30px; }
.nav-links{ display:flex; align-items:center; gap:28px; font-family: var(--f-ui); font-weight:500; font-size:.95rem; }
.nav-links a{ position:relative; padding: 6px 0; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background: var(--blaze); transition: width .2s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:none; }
.nav-toggle svg{ width:26px; height:26px; }

@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper); flex-direction:column; align-items:flex-start;
    gap:0; padding: 8px 24px 20px; border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ width:100%; padding: 12px 0; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero{
  background: var(--blaze); color: var(--paper);
  padding: 72px 0 60px;
  position: relative; overflow:hidden;
}
.hero .container{ display:grid; grid-template-columns: 1.3fr .7fr; gap:40px; align-items:end; }
.hero h1{ margin-bottom: .25em; }
.hero .hero-marks{ display:flex; gap:18px; justify-self:end; }
.hero .hero-marks svg{ width:70px; height:auto; }
.scroll-cue{ display:flex; align-items:center; gap:10px; margin-top:36px; font-family: var(--f-ui); font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; }
@media (max-width: 880px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero .hero-marks{ justify-self:start; margin-top:20px; }
}

/* ---------------------------------------------------------------------- */
/* Cards / grids                                                           */
/* ---------------------------------------------------------------------- */
.grid{ display:grid; gap: 24px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 920px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.section-inv .card{ background: var(--ink-soft); border-color: var(--line-inv); color: var(--paper); }

.card-workstream{ position:relative; padding-top:44px; }
.card-workstream .tag-letter{
  position:absolute; top: -16px; left: 24px;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background: var(--blaze); color:var(--paper); font-family:var(--f-ui); font-weight:700;
  box-shadow: 0 6px 14px rgba(255,75,5,.35);
}

.badge{
  display:inline-block; font-family: var(--f-ui); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em;
  background: var(--mustard); color: var(--ink); padding: 5px 12px; border-radius:999px;
}
.badge-outline{ background:transparent; border:1px solid currentColor; }

/* article / research cards */
.article-card{ display:flex; flex-direction:column; gap:12px; }
.article-card .meta{ font-family:var(--f-ui); font-size:.8rem; opacity:.65; display:flex; gap:10px; flex-wrap:wrap; }
.article-card h3{ margin:0; }
.article-card .excerpt{ opacity:.85; }
.read-more{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-ui); font-weight:600; font-size:.9rem; margin-top:auto; }
.read-more .arrow-mark{ transform: rotate(-90deg); transition: transform .2s var(--ease); }
.article-card:hover .read-more .arrow-mark{ transform: rotate(-90deg) translateX(4px); }

/* ---------------------------------------------------------------------- */
/* Workflow stepper (genuinely sequential — publication / event workflow) */
/* ---------------------------------------------------------------------- */
.stepper{ display:flex; flex-direction:column; }
.step{
  display:grid; grid-template-columns: 64px 1fr; gap:20px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.step:last-child{ border-bottom: 1px solid var(--line); }
.step-index{ font-family: var(--f-display); font-weight:900; font-size:1.8rem; color: var(--blaze); }
.step h4{ font-family: var(--f-ui); font-weight:700; margin:0 0 6px; font-size:1.05rem; }
.step p{ margin:0; opacity:.8; }

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */
.field{ margin-bottom: 20px; }
.field label{ display:block; font-family:var(--f-ui); font-weight:600; font-size:.85rem; margin-bottom:8px; }
.field .hint{ font-size:.78rem; opacity:.6; margin-top:6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="url"], input[type="number"], textarea, select{
  width:100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  transition: border-color .18s;
}
textarea{ resize: vertical; min-height: 140px; }
input:focus, textarea:focus, select:focus{ border-color: var(--blaze); outline:none; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:620px){ .field-row{ grid-template-columns:1fr; } }
.file-drop{
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 28px; text-align:center; font-family:var(--f-ui); font-size:.9rem; opacity:.75;
}
.form-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); }
.form-msg{ font-family: var(--f-ui); font-size:.88rem; padding: 12px 16px; border-radius: var(--radius-sm); margin-top:14px; display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ background: #E6F4EA; color:#1E5C34; }
.form-msg.err{ background: #FBE7E3; color:#8C2A0F; }

/* ---------------------------------------------------------------------- */
/* Pricing / membership                                                    */
/* ---------------------------------------------------------------------- */
.price-card{ text-align:left; display:flex; flex-direction:column; }
.price-card .price{ font-family: var(--f-display); font-weight:900; font-size:2.6rem; margin: 10px 0; }
.price-card .price span{ font-family: var(--f-ui); font-size:.9rem; font-weight:500; opacity:.65; }
.price-card ul{ margin: 20px 0; display:flex; flex-direction:column; gap:10px; }
.price-card li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; }
.price-card.featured{ border-color: var(--blaze); border-width:2px; }

/* ---------------------------------------------------------------------- */
/* Profile / dashboard                                                     */
/* ---------------------------------------------------------------------- */
.profile-head{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.avatar{
  width:88px; height:88px; border-radius:50%; background: var(--blaze); color:var(--paper);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:900; font-size:2rem;
  flex-shrink:0;
}
.stat-row{ display:flex; gap:32px; margin-top:8px; flex-wrap:wrap; }
.stat{ font-family:var(--f-ui); }
.stat b{ display:block; font-family:var(--f-display); font-size:1.6rem; font-weight:900; }
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin: 32px 0 24px; }
.tab-btn{ background:none; border:none; padding: 10px 18px; font-family:var(--f-ui); font-weight:600; opacity:.55; border-bottom:2px solid transparent; }
.tab-btn.active{ opacity:1; border-color: var(--blaze); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.status-pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-ui); font-size:.75rem; font-weight:600; padding:4px 12px; border-radius:999px; }
.status-pill.pending{ background:#FDEBD3; color:#8A5A0A; }
.status-pill.published{ background:#E1F0E4; color:#1E5C34; }
.status-pill.draft{ background:#EAEAEA; color:#555; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer{ background: var(--ink); color: var(--paper); padding: 64px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-grid h5{ font-family:var(--f-ui); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; opacity:.7; }
.footer-grid ul{ display:flex; flex-direction:column; gap:10px; font-size:.95rem; }
.footer-grid ul a:hover{ color: var(--blaze); }
.footer-bottom{ display:flex; justify-content:space-between; margin-top:56px; padding-top:24px; border-top:1px solid var(--line-inv); font-family:var(--f-ui); font-size:.8rem; opacity:.6; flex-wrap:wrap; gap:10px; }
@media (max-width:780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll (subtle, single orchestrated pattern)                  */
/* ---------------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* utility */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; align-items:center; }
.gap-8{ gap:8px; } .gap-16{ gap:16px; }
.muted{ opacity:.7; }
.divider{ border:none; border-top:1px solid var(--line); margin: 48px 0; }
.narrow{ max-width: 720px; }