/* ========================================
   NICHOLASWOO — GLOBAL STYLES (UPDATED)
   ======================================== */

/* Reset & Base */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #121417;
  --ink: #FFFFFF;
  --ink-2: #E6E9EB;
  --blue: #3F598C;
  --blue-2: #91C4D9;
  --blue-3: #C9EBF2;
  --card: #0F1215;
  --stroke: #1A2128;
  --muted: #B8C0C7;

  /* Typography */
  --font-headline: 'Satoshi', sans-serif;
  --font-serif: 'Satoshi', sans-serif;
  --font-body: 'Satoshi', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(3rem, 2rem + 5vw, 6rem);
  --text-4xl: clamp(4rem, 3rem + 5vw, 8rem);

  /* Spacing */
  --gutter: clamp(1.5rem, 3vw, 8.75rem);
  --section-gap: clamp(4rem, 8vw, 8rem);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92; /* a hair more breathing room */
  color: var(--ink);
}
.serif { font-family: var(--font-serif); font-weight: 400; font-style: normal; }

/* Container */
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* Grain texture */
.grain::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.01) 35px, rgba(255,255,255,.01) 70px),
    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.01) 35px, rgba(255,255,255,.01) 70px);
  mix-blend-mode: overlay; opacity:.06; pointer-events:none; z-index:1;
}

/* ========================================
   SIDEBAR — HORIZONTAL LABELS
   ======================================== */
.sidebar{
  position: fixed; 
  left: 0; 
  top: 0; 
  bottom: 0;
  width: 260px;
  background:var(--card);
  border-right:1px solid var(--stroke);
  display: flex; 
  flex-direction: column;
  padding: 24px;
  z-index: 100; 
  transition: transform 0.3s ease;
  overflow-y: auto;
}
@media (max-width: 1023px){ 
  .sidebar{ 
    transform: translateX(-100%);
  } 
}

.sidebar-nav{
  display: flex; 
  flex-direction: column; 
  gap: 0;
  margin-bottom: 2rem;
}

.sidebar-divider {
  margin: 2rem 0 1.5rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--stroke);
}

.sidebar-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.nav-link{
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  color: var(--muted); 
  text-decoration: none; 
  transition: all 0.3s ease;
  font-size: var(--text-sm);
  border-radius: 8px;
  margin-bottom: 4px;
}

.nav-link:hover, 
.nav-link:focus-visible{ 
  color: var(--blue-2);
  background: rgba(63, 89, 140, 0.1);
}

.nav-link.active {
  background: rgba(63, 89, 140, 0.15);
  color: var(--ink);
  font-weight: 500;
}

.nav-icon{ 
  font-family: var(--font-mono); 
  font-size: var(--text-sm); 
  font-weight: 500;
  min-width: 24px;
}

.nav-text{
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
  flex: 1;
  text-align: right;
}

.sidebar-social{ 
  margin-top: auto;
  display: flex; 
  flex-direction: column; 
  gap: 8px;
}

.social-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 16px;
  color: var(--muted); 
  text-decoration: none; 
  font-family: var(--font-mono);
  font-size: var(--text-xs); 
  transition: all 0.3s ease;
  border-radius: 6px;
}

.social-link:hover, 
.social-link:focus-visible{ 
  color: var(--blue-2);
  background: rgba(63, 89, 140, 0.08);
}

.theme-toggle{
  margin-top: 1rem;
  width: 100%;
  background:none; border:1px solid var(--stroke); color:var(--muted);
  padding: 8px; cursor:pointer; border-radius: 6px; transition:all .3s ease;
}
.theme-toggle:hover, 
.theme-toggle:focus-visible{ 
  border-color: var(--blue-2); 
  color: var(--blue-2); 
}

/* ========================================
   MOBILE HEADER
   ======================================== */
.mobile-header{
  display:none; position:fixed; top:0; left:0; right:0;
  background:var(--card); border-bottom:1px solid var(--stroke);
  padding:1rem var(--gutter); z-index:99;
}
@media (max-width: 1023px){
  .mobile-header{ display:flex; justify-content:space-between; align-items:center; }
  body{ padding-top:60px; }
}
.mobile-menu-toggle{ background:none; border:none; cursor:pointer; padding:0; display:flex; flex-direction:column; gap:4px; }
.mobile-menu-toggle span{ display:block; width:24px; height:2px; background:var(--ink-2); transition:transform .3s ease; }
.mobile-nav{ display:flex; gap:1.5rem; }
.mobile-nav a{
  color:var(--muted); text-decoration:none; font-size:var(--text-sm);
  text-transform:uppercase; letter-spacing:.05em; transition:color .3s ease;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible{ color:var(--blue-2); }

/* ========================================
   HERO
   ======================================== */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
@media (min-width: 1024px){ .hero{ margin-left: 260px; } }

.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.4; }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--bg) 0%, transparent 50%, var(--bg) 100%),
              linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
  opacity:.8;
}

 /* REMOVED: all vertical side labels on homepage */
.side-label{ display:none !important; }

.corner-meta{ position:absolute; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted); z-index:2; }
.corner-meta.top-left{ top:2rem; left:var(--gutter); }
.corner-meta.bottom-right{ bottom:2rem; right:var(--gutter); }

.hero-content{ position:relative; z-index:2; padding:0 var(--gutter); max-width:1280px; margin:0 auto; width:100%; }
.hero-stack{ max-width:800px; }

.hero-kicker{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.2em;
  color:var(--blue-2); margin-bottom:1rem; text-transform:uppercase;
}
.hero-headline{ font-size:var(--text-4xl); margin-bottom:2.25rem; line-height:0.9; }
.hero-deck{ font-family:var(--font-serif); font-size:var(--text-xl); color:var(--ink-2); margin-bottom:2.25rem; font-style:normal; }

/* HIDE HERO BUTTONS */
.hero-ctas{ display:none !important; }

/* Buttons (kept for site-wide use) */
.btn{
  display:inline-block; padding:1rem 2rem; font-family:var(--font-body);
  font-size:var(--text-sm); font-weight:500; text-decoration:none; text-transform:uppercase;
  letter-spacing:.05em; border:1.5px solid transparent; transition:all .3s ease; cursor:pointer;
  position:relative; overflow:hidden;
}
.btn-primary{ background:var(--blue); color:var(--ink); border-color:var(--blue); }
.btn-primary:hover, .btn-primary:focus-visible{
  background:transparent; color:var(--blue-2); border-color:var(--blue-2); box-shadow:0 0 20px rgba(145,196,217,.3);
}
.btn-secondary{ background:transparent; color:var(--blue-2); border-color:var(--blue-2); }
.btn-secondary:hover, .btn-secondary:focus-visible{ background:var(--blue); color:var(--ink); border-color:var(--blue); transform:scale(1.02); }

/* ========================================
   SECTIONS
   ======================================== */
.section{ padding:var(--section-gap) 0; position:relative; }
@media (min-width: 1024px){ .section{ margin-left: 260px; } }
.section-alt{ background:var(--card); }

/* Header aligned like reference ("View All" on right) */
.section-header{
  margin-bottom:2rem;
  display:flex; justify-content:space-between; align-items:center;
}
.section-title{ font-size:var(--text-3xl); }
.section-accent{ display:block; width:60px; height:2px; background:var(--blue-2); margin:1.25rem 0; }
.section-subtitle{ font-family:var(--font-serif); font-size:var(--text-lg); color:var(--muted); font-style:normal; }
.section-header .view-all{
  font-size:14px; text-decoration:none; color:var(--ink-2); opacity:.85; border-bottom:1px solid transparent;
}
.section-header .view-all:hover{ opacity:1; border-color:currentColor; }

/* ========================================
   CARDS — 4-UP GRID LIKE REFERENCE
   ======================================== */
.card-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:24px;
}
@media (max-width:1200px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .card-grid{ grid-template-columns: 1fr; } }

.card{
  position:relative; background:var(--card); border:1px solid var(--stroke);
  overflow:hidden; transition:all .4s ease; cursor:pointer; border-radius:16px; /* softer */
}
.card:hover{
  border-color:var(--blue-2); transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(145,196,217,.10);
}
.card-image{ position:relative; height:220px; overflow:hidden; background:var(--stroke); border-radius:12px; margin:12px 12px 0; }
.card-image img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .card-image img{ transform:scale(1.04); }

.card-meta{
  position:absolute; top:1rem; left:1rem;
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--blue-2);
}
.card-icon{ position:absolute; top:1rem; right:1rem; width:24px; height:24px; stroke:var(--blue-3); stroke-width:1.5; fill:none; }

.card-content{ padding:1rem 1.25rem 1.25rem; }
.card-title{ font-family:var(--font-headline); font-size:var(--text-xl); margin:.5rem 0 .25rem; text-transform:uppercase; }
.card-tags{ display:flex; gap:.5rem; margin:.75rem 0; flex-wrap:wrap; }
.tag{
  font-family:var(--font-mono); font-size:.625rem; padding:.25rem .5rem;
  background:var(--stroke); color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
}

.card-insight{
  font-family:var(--font-serif); font-size:var(--text-sm); color:var(--muted); font-style:normal;
  opacity:0; transform:translateY(10px); transition:all .4s ease;
}
.card:hover .card-insight{ opacity:1; transform:translateY(0); }

/* ========================================
   PULL QUOTE
   ======================================== */
.pull-quote{ padding:var(--section-gap) 0; position:relative; }
@media (min-width: 1024px){ .pull-quote{ margin-left: 260px; } }
.pull-quote blockquote{ position:relative; padding:3rem 0; border-top:1px solid var(--blue-3); border-bottom:1px solid var(--blue-3); }
.pull-quote p{
  font-family:var(--font-serif); font-size:var(--text-2xl); color:var(--ink);
  text-align:center; margin-bottom:1rem; font-style:normal; line-height:1.3;
}
.pull-quote cite{
  display:block; font-family:var(--font-mono); font-size:var(--text-sm); color:var(--muted);
  text-align:center; font-style:normal;
}

/* ========================================
   BLOG LIST
   ======================================== */
.blog-list{ display:flex; flex-direction:column; gap:2rem; }
.blog-item{
  display:block; text-decoration:none; padding:2rem 0; border-bottom:1px solid var(--stroke);
  transition:all .3s ease; position:relative;
}
.blog-item::before{
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--blue-2); transition:width .4s ease;
}
.blog-item:hover::before{ width:100%; }
.blog-date{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted); margin-bottom:.5rem; }
.blog-title{ font-family:var(--font-headline); font-size:var(--text-2xl); color:var(--ink); margin-bottom:.5rem; text-transform:uppercase; }
.blog-deck{ font-family:var(--font-serif); font-size:var(--text-base); color:var(--muted); font-style:normal; }

/* ========================================
   FOOTER
   ======================================== */
.footer{ padding:var(--section-gap) 0 2rem; position:relative; }
@media (min-width: 1024px){ .footer{ margin-left: 260px; } }
.footer-content{ margin-bottom:4rem; }
.footer-headline{ font-family:var(--font-serif); font-size:var(--text-3xl); color:var(--ink); margin-bottom:1rem; font-style:normal; text-transform:none; }
.footer-deck{ font-size:var(--text-lg); color:var(--muted); margin-bottom:2rem; }
.footer-ctas{ display:flex; gap:2rem; flex-wrap:wrap; }
.contact-link{ color:var(--blue-2); text-decoration:none; font-family:var(--font-mono); font-size:var(--text-sm); position:relative; transition:color .3s ease; }
.contact-link::after{ content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--blue-2); transition:width .3s ease; }
.contact-link:hover::after{ width:100%; }
.footer-meta{
  display:flex; gap:2rem; font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--muted); padding-top:2rem; border-top:1px solid var(--stroke);
}

/* ========================================
   ANIMATIONS / ACCESSIBILITY
   ======================================== */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
[data-reveal].revealed{ opacity:1; transform:translateY(0); }
:focus-visible{ outline:1.5px solid var(--blue-2); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ========================================
   RESPONSIVE TWEAKS
   ======================================== */
@media (max-width:768px){
  .hero-headline{ font-size:var(--text-3xl); }
  .footer-ctas{ flex-direction:column; gap:1rem; }
  .footer-meta{ flex-direction:column; gap:.5rem; }
}
/* ===== TYPO SCALE TIGHTEN (OVERRIDES) ===== */
.hero-headline { font-size: clamp(2.4rem, 4.2vw, 5.2rem); line-height: 0.96; }
.section-title  { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; }
.card-title     { font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.15; }
.card-excerpt   { font-size: clamp(.85rem, 1vw, .95rem); }

/* ==== NAV CLEANUP & LAYOUT OVERRIDES (append at end) ==== */

/* If any UL/OL slipped into the sidebar, nuke bullets/markers */
.sidebar nav, .sidebar-nav, .sidebar-nav ul, .sidebar-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-nav li { list-style: none; }
.sidebar-nav li::marker { content: ''; }

/* Sidebar width & internal spacing (keeps brand colors) */
.sidebar {
  width: 260px;                 /* match reference width */
  padding: 1.25rem 0;           /* slightly tighter vertical rhythm */
}
@media (min-width:1200px){
  .hero, .section, .pull-quote, .footer { margin-left: 260px; } /* offset content */
}

/* Each link: vertically centered, no stray symbols, generous click target */
.nav-link{
  display: flex;
  align-items: center;          /* vertical centering */
  justify-content: flex-start;
  gap: .5rem;
  height: 44px;                 /* consistent hit area */
  padding: 0 18px;
  text-decoration: none;
  color: var(--muted);
  border-radius: 12px;
  transition: background .25s ease, color .25s ease;
}
.nav-link .nav-icon { display: none; }  /* hide any arrows/numbers if present */
.nav-link::before { content: none !important; } /* kill pseudo bullets */

.nav-link:hover, .nav-link:focus-visible{
  color: var(--ink-2);
  background: rgba(255,255,255,.04);
}

/* Active state (stronger, but still on-brand) */
.nav-link.active{
  background: #171b20;          /* subtle lift; same palette family */
  color: var(--ink);
  font-weight: 600;
}

/* Keep nav label style consistent with your brand */
.nav-text{
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Section label (Resources) */
.nav-section-label{
  margin: 18px 18px 6px 18px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .7;
  border-top: 1px solid var(--stroke);
  padding-top: 14px;
}

/* Mobile keeps your existing behavior; just ensure spacing looks right */
@media (max-width:1199px){
  .sidebar { width: 260px; }  /* drawer width */
  .nav-link { height: 48px; padding: 0 20px; }
}

/* Typography tightening to match the sharper single-font look */
h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 700;             /* give headers authority with Satoshi */
  letter-spacing: -0.01em;
  line-height: 1;
}
.hero-headline{
  letter-spacing: -0.015em;
  line-height: 0.96;
}
.hero-deck,
.section-subtitle,
.card-insight,
.blog-deck,
.footer-headline{
  font-family: var(--font-body);
  font-style: normal; /* explicit */
}

/* Optional: make section accent slightly stronger without color change */
.section-accent{ height: 3px; }