/* ============================================================
   LECTURE NOTE — CSS CUSTOM PROPERTIES (Variables)
   ============================================================
   Custom properties (--name: value) are the foundation of
   maintainable CSS. They live on any element and cascade
   down to children. :root makes them globally available.
   Access with var(--name, fallback).
   WHY RELATIVE? All sizes below use rem/em/% so the whole
   layout scales with the user's browser font size setting —
   crucial for accessibility.
   ============================================================ */

:root {
  /* Color palette */
  --ink:        #0e0e0e;
  --paper:      #f5f0e8;
  --accent:     #c94a1f;
  --accent2:    #2563a8;
  --muted:      #7a7267;
  --surface:    #fffdf8;
  --border:     rgba(14,14,14,0.12);
  --highlight:  #fff3cd;
  --code-bg:    #1a1a2e;
  --code-text:  #e2d9c5;

  /* Typography scale — using rem (relative to root font size)
     rem = root em. If root is 16px, 1rem = 16px.
     This means the ENTIRE scale shifts if the user changes
     their browser's default font size. Accessibility win! */
  --text-xs:   0.75rem;   /* 12px at default */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-hero: clamp(2.5rem, 6vw, 5rem); /* responsive! */

  /* Spacing scale — multiples of 0.25rem for harmony */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --max-width: 72rem;
  --sidebar-w: 16rem;

  /* Effects */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 0.125rem 0.5rem rgba(0,0,0,0.08);
  --shadow-md: 0 0.25rem 1.5rem rgba(0,0,0,0.12);
  --shadow-lg: 0 0.75rem 3rem rgba(0,0,0,0.18);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ============================================================
   LECTURE NOTE — THE BOX MODEL & box-sizing
   ============================================================
   Every HTML element is a rectangular box with:
     content → padding → border → margin
   
   By default (content-box), width = content only.
   padding/border get ADDED on top → surprising behavior.
   
   border-box makes width INCLUDE padding+border.
   This is almost always what you want. Set it globally!
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box; /* The golden rule! */
  margin: 0;
  padding: 0;
}

/* ============================================================
   LECTURE NOTE — CSS RESET & BASE STYLES
   ============================================================
   Browsers apply their own "user agent stylesheet" with
   inconsistent defaults. A reset normalizes these so your
   styles behave predictably across Chrome, Firefox, Safari.
   ============================================================ */

html {
  font-size: 100%; /* Respect user's browser font size setting */
  scroll-behavior: smooth; /* Smooth anchor scrolling */
  -webkit-text-size-adjust: 100%; /* Prevent iOS font scaling */
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.7; /* unitless = relative to font-size — best practice */
  color: var(--ink);
  background-color: var(--paper);

  /* ============================================================
     LECTURE NOTE — OVERFLOW
     ============================================================
     overflow controls what happens when content is larger
     than its container.
       visible  — default, content spills out
       hidden   — clips the content
       scroll   — always shows scrollbar
       auto     — scrollbar only when needed (preferred)
     overflow-x / overflow-y control each axis separately.
     ============================================================ */
  overflow-x: hidden;
}

/* ============================================================
   LECTURE NOTE — TYPOGRAPHY: font properties deep dive
   ============================================================
   font-family: list of fonts (fallback chain)
   font-size:   best in rem for accessibility
   font-weight: 100–900 (or named: normal=400, bold=700)
   font-style:  normal | italic | oblique
   line-height: spacing between lines (unitless preferred)
   letter-spacing: tracking (em units scale with font-size)
   text-transform: uppercase | capitalize | lowercase
   text-decoration: underline | line-through | none
   font-variant: small-caps and more
   ============================================================ */

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
  letter-spacing: -0.02em; /* em = relative to element's font-size */
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin-bottom: var(--space-4); }

a {
  color: var(--accent2);
  text-decoration: underline;
  text-underline-offset: 0.2em; /* distance below text */
  transition: color 0.2s ease;
}

a:hover { color: var(--accent); }

code, pre {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.875em; /* em = relative to parent — scales with context */
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */

.site-header {
  /* ============================================================
     LECTURE NOTE — POSITION: sticky
     ============================================================
     position: sticky makes an element scroll normally UNTIL
     it hits the threshold (top: 0), then sticks there.
     It stays in the document flow (unlike fixed).
     Requires a defined height or overflow on ancestor to work!
     
     Other values:
       static   — default, no positioning
       relative — offset from normal position, stays in flow
       absolute — removed from flow, positioned vs nearest
                  positioned ancestor (non-static)
       fixed    — removed from flow, positioned vs viewport
       sticky   — hybrid of relative and fixed
     ============================================================ */
  position: sticky;
  top: 0;
  z-index: 100; /* stacking order above other elements */
  background-color: var(--ink);
  color: var(--paper);
  padding: var(--space-4) var(--space-8);

  /* ============================================================
     LECTURE NOTE — FLEXBOX
     ============================================================
     Flexbox is a 1-dimensional layout system (row OR column).
     
     Container properties:
       display: flex             — activates flexbox
       flex-direction: row|column — main axis direction
       justify-content           — alignment on main axis
       align-items               — alignment on cross axis
       flex-wrap                 — allow wrapping
       gap                       — space between items
     
     Child (item) properties:
       flex-grow    — how much to grow to fill space
       flex-shrink  — how much to shrink when space is short
       flex-basis   — starting size before grow/shrink
       flex: 1      — shorthand for grow:1 shrink:1 basis:0
       align-self   — override parent's align-items
       order        — visual reordering (doesn't affect DOM)
     ============================================================ */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.logo span {
  color: var(--accent);
  font-style: italic;
}

.nav {
  display: flex;
  gap: var(--space-6);
  list-style: none; /* removes bullet points */
}

.nav a {
  color: rgba(245,240,232,0.7);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease-out);
}

.nav a:hover { color: var(--paper); }

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
  /* ============================================================
     LECTURE NOTE — BACKGROUND PROPERTIES
     ============================================================
     background is a shorthand for many sub-properties:
       background-color    — solid fill
       background-image    — url(), gradients, etc.
       background-size     — cover | contain | px/% 
       background-position — center, top left, 50% 30%, etc.
       background-repeat   — repeat | no-repeat | repeat-x
       background-attachment — scroll | fixed (parallax!)
     
     Linear gradients: linear-gradient(direction, c1, c2...)
     Radial gradients: radial-gradient(shape, c1, c2...)
     Multiple backgrounds stack comma-separated (first = top)
     ============================================================ */
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(201,74,31,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(37,99,168,0.12) 0%, transparent 50%),
    linear-gradient(160deg, #0e0e0e 0%, #1a1a2e 100%);
  color: var(--paper);
  padding: var(--space-24) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   LECTURE NOTE — PSEUDO-ELEMENTS: ::before and ::after
   ============================================================
   ::before and ::after insert virtual elements as the
   FIRST and LAST child of the selected element.
   They require content: '' to render (even if empty).
   They're in the DOM for styling but not selectable as text.
   Used for: decorative shapes, overlays, icons, counters.
   ============================================================ */

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 70%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(245,240,232,0.015) 2px,
    rgba(245,240,232,0.015) 4px
  );
  pointer-events: none; /* doesn't block mouse interactions */
}

.hero-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor; /* currentColor = the element's color value */
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
}

.hero h1 {
  margin-bottom: var(--space-6);
  /* ============================================================
     LECTURE NOTE — clamp() function
     ============================================================
     clamp(min, preferred, max) clamps a value between bounds.
     The preferred value is usually viewport-relative (vw/vh).
       vw = 1% of viewport width
       vh = 1% of viewport height
       vmin = smaller of vw or vh
       vmax = larger of vw or vh
     This creates truly fluid typography that scales between
     a min and max without media queries!
     ============================================================ */
  font-size: clamp(2.5rem, 6vw, 5rem);
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(245,240,232,0.65);
  max-width: 38rem;
  margin: 0 auto var(--space-10);
  line-height: 1.8;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-8);
}

.pill {
  background: rgba(245,240,232,0.08);
  border: 1px solid rgba(245,240,232,0.15);
  color: rgba(245,240,232,0.8);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px; /* large value = fully rounded */
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  /* ============================================================
     LECTURE NOTE — TRANSITIONS
     ============================================================
     transition: property duration timing-function delay
     
     Timing functions:
       ease        — slow-fast-slow (default)
       linear      — constant speed
       ease-in     — slow start
       ease-out    — slow end
       ease-in-out — slow both ends
       cubic-bezier(x1,y1,x2,y2) — custom curve
       steps(n)    — staircase animation
     
     transition: all 0.3s ease  — animates every property
     But prefer listing specific properties for performance!
     ============================================================ */
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pill:hover {
  background: rgba(245,240,232,0.15);
  border-color: rgba(245,240,232,0.35);
  transform: translateY(-2px); /* relative unit: px fine for tiny nudges */
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.layout {
  /* ============================================================
     LECTURE NOTE — CSS GRID
     ============================================================
     Grid is a 2-dimensional layout system (rows AND columns).
     
     Container properties:
       display: grid
       grid-template-columns — define column widths
       grid-template-rows    — define row heights
       grid-template-areas   — named area layout
       gap / column-gap / row-gap
       justify-items / align-items — align cells within areas
       justify-content / align-content — align grid within container
     
     fr unit = fractional unit, distributes remaining space
       1fr 1fr       — two equal columns
       1fr 2fr       — second column is twice as wide
       repeat(3,1fr) — three equal columns
     
     minmax(min, max) — flexible range
       minmax(0, 1fr) — common for flexible columns
     
     Child properties:
       grid-column: start / end  — span across columns
       grid-row: start / end     — span across rows
       grid-area: named-area     — place in named area
     ============================================================ */
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 0;
  min-height: 80vh;
}

/* ============================================================
   SIDEBAR / TABLE OF CONTENTS
   ============================================================ */

.sidebar {
  position: sticky;
  top: 3.5rem; /* height of header */
  height: calc(100vh - 3.5rem); /* calc() mixes units! */
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: var(--space-8) var(--space-4);
  background: var(--surface);

  /* ============================================================
     LECTURE NOTE — SCROLLBAR STYLING
     ============================================================
     ::-webkit-scrollbar targets the scrollbar in WebKit browsers.
     Use scrollbar-width/color for Firefox (standard approach).
     ============================================================ */
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

.sidebar::-webkit-scrollbar { width: 0.25rem; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 999px; }

.toc-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
}

.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.toc-list a {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.toc-list a:hover {
  color: var(--ink);
  background: rgba(14,14,14,0.04);
  border-left-color: var(--accent);
}

.toc-list .toc-sub a {
  padding-left: var(--space-6);
  font-size: var(--text-xs);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {
  padding: var(--space-12) var(--space-8);
  max-width: 54rem;
}

/* ============================================================
   SECTION STYLES
   ============================================================ */

.css-section {
  margin-bottom: var(--space-16);
  /* ============================================================
     LECTURE NOTE — scroll-margin-top
     ============================================================
     When using anchor links (href="#section-id"), the browser
     scrolls so the element is at the very top. If you have a
     sticky header, the element hides under it!
     scroll-margin-top adds offset space above the element
     during programmatic scrolling only. Perfect fix!
     ============================================================ */
  scroll-margin-top: 5rem;
}

.section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--ink);
}

.section-number {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 600;
}

.lecture-note {
  background: var(--highlight);
  border-left: 4px solid var(--accent);
  padding: var(--space-4) var(--space-6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.lecture-note strong {
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   CODE BLOCKS
   ============================================================ */

.code-block {
  background: var(--code-bg);
  color: var(--code-text);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  line-height: 1.8;
  position: relative;
  box-shadow: var(--shadow-lg);
}

.code-block .comment { color: #6a9955; }
.code-block .property { color: #9cdcfe; }
.code-block .value { color: #ce9178; }
.code-block .selector { color: #d7ba7d; }
.code-block .unit { color: #b5cea8; }
.code-block .function { color: #dcdcaa; }

/* ============================================================
   DEMO BOXES
   ============================================================ */

.demo-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  background: var(--surface);
  position: relative;
}

.demo-area::before {
  content: 'LIVE DEMO';
  position: absolute;
  top: -0.65rem;
  left: var(--space-4);
  background: var(--accent2);
  color: white;
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
}

/* ============================================================
   SECTION 1: THE BOX MODEL
   ============================================================ */

.box-model-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: #0e0e0e;
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
}

.bm-margin {
  background: rgba(201,74,31,0.2);
  border: 2px dashed #c94a1f;
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bm-border {
  background: rgba(37,99,168,0.2);
  border: 8px solid #2563a8;
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bm-padding {
  background: rgba(100,180,80,0.2);
  border: 2px dashed #5aa63c;
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-content {
  background: #f5f0e8;
  color: #0e0e0e;
  padding: var(--space-4) var(--space-6);
  border-radius: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}

.bm-label {
  position: absolute;
  font-size: 0.6rem;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bm-margin .bm-label { color: #c94a1f; top: 0.25rem; left: 0.4rem; }
.bm-border .bm-label { color: #2563a8; top: -1.2rem; left: 0.2rem; }
.bm-padding .bm-label { color: #5aa63c; top: 0.25rem; left: 0.4rem; }

/* ============================================================
   SECTION 2: RELATIVE UNITS DEMO
   ============================================================ */

.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.unit-card {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}

.unit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.unit-card .unit-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xl);
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--space-2);
  display: block;
}

.unit-card p {
  font-size: var(--text-xs);
  color: rgba(245,240,232,0.65);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   SECTION 3: FLEXBOX DEMO
   ============================================================ */

.flex-demo-row {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  flex-wrap: wrap;
}

.flex-item {
  background: var(--accent2);
  color: white;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
}

.flex-grow-1 { flex: 1; background: var(--accent); }
.flex-grow-2 { flex: 2; background: #5aa63c; }
.flex-item-fixed { flex: 0 0 5rem; background: var(--muted); }

.demo-label {
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  color: var(--muted);
  margin-bottom: var(--space-2);
  display: block;
}

/* ============================================================
   SECTION 4: GRID DEMO
   ============================================================ */

.grid-demo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.g-item {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.g-span-2 { grid-column: span 2; background: var(--accent); }
.g-span-3 { grid-column: span 3; background: var(--accent2); }
.g-row-2  { grid-row: span 2; background: #5aa63c; display: flex; align-items: center; }

/* ============================================================
   SECTION 5: POSITIONING DEMO
   ============================================================ */

.position-demo {
  position: relative;
  height: 12rem;
  background: rgba(14,14,14,0.04);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-4) 0;
}

.pos-static {
  background: var(--muted);
  color: white;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  display: inline-block;
  margin: var(--space-3);
  border-radius: var(--radius-sm);
}

.pos-relative {
  position: relative;
  top: 1rem;
  left: 2rem;
  background: var(--accent2);
  color: white;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  display: inline-block;
  border-radius: var(--radius-sm);
}

.pos-absolute {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--accent);
  color: white;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  border-radius: var(--radius-sm);
}

/* ============================================================
   SECTION 6: SELECTORS DEMO
   ============================================================ */

/* ============================================================
   LECTURE NOTE — CSS SELECTORS (comprehensive)
   ============================================================
   Universal:    *            — all elements
   Type:         div, p, h1  — by tag name
   Class:        .class       — by class attribute
   ID:           #id          — by id (unique per page!)
   Descendant:   A B          — B inside A (any depth)
   Child:        A > B        — B directly in A
   Adjacent:     A + B        — B immediately after A
   Sibling:      A ~ B        — all B after A in same parent
   
   Attribute selectors:
     [attr]       — has attribute
     [attr="val"] — exact value
     [attr^="v"]  — starts with
     [attr$="v"]  — ends with
     [attr*="v"]  — contains
   
   Pseudo-classes (state/position):
     :hover, :focus, :active, :visited
     :first-child, :last-child, :nth-child(n)
     :not(selector), :is(a, b), :where(a, b)
     :checked, :disabled, :empty
   
   Pseudo-elements (virtual elements):
     ::before, ::after, ::first-line, ::first-letter
     ::placeholder, ::selection, ::marker
   
   Specificity (weight system):
     inline style > #id > .class/:pseudo > tag
     !important overrides everything (use sparingly!)
   ============================================================ */

.selector-table {
  width: 100%;
  border-collapse: collapse; /* removes spacing between cells */
  font-size: var(--text-sm);
  margin: var(--space-6) 0;
}

.selector-table th {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.selector-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.selector-table tr:hover td { background: rgba(14,14,14,0.03); }

.selector-table code {
  background: rgba(14,14,14,0.07);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  color: var(--accent);
}

/* ============================================================
   SECTION 7: ANIMATIONS & TRANSFORMS
   ============================================================ */

/* ============================================================
   LECTURE NOTE — CSS TRANSFORMS
   ============================================================
   transform applies 2D and 3D transformations.
   They do NOT affect layout — the element stays in its
   original position in the flow. Only visual change!
   
   2D functions:
     translate(x, y)      — move
     scale(x, y)          — resize
     rotate(deg)          — spin
     skew(x-deg, y-deg)   — distort
   
   3D functions:
     translateZ(z) / translate3d(x,y,z)
     rotateX/Y/Z(deg)
     perspective(px)  — set on parent for 3D context
   
   Multiple transforms: transform: rotate(45deg) scale(1.2);
   Applied right-to-left in the chain!
   
   transform-origin: default is "50% 50%" (center)
   Change to rotate around a different anchor point.
   ============================================================ */

/* ============================================================
   LECTURE NOTE — CSS ANIMATIONS with @keyframes
   ============================================================
   @keyframes defines the animation sequence.
   Name it, then reference in animation property.
   
   animation shorthand:
     name duration timing-function delay
     iteration-count direction fill-mode
   
   iteration-count: 1, 2, infinite
   direction: normal | reverse | alternate | alternate-reverse
   fill-mode:
     none      — returns to pre-animation state
     forwards  — holds last keyframe state
     backwards — applies first keyframe during delay
     both      — combines forwards + backwards
   animation-play-state: paused | running (JS controllable!)
   ============================================================ */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1rem); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-3rem);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.anim-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.anim-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  background: var(--ink);
  border-radius: var(--radius-md);
}

.anim-card p {
  font-size: var(--text-xs);
  color: rgba(245,240,232,0.5);
  text-align: center;
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
}

.anim-box {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
}

.demo-float {
  background: var(--accent);
  animation: float 2s ease-in-out infinite;
}

.demo-spin {
  background: var(--accent2);
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

.demo-pulse {
  background: #5aa63c;
  border-radius: 50%;
  position: relative;
}

.demo-pulse::after {
  content: '';
  position: absolute;
  inset: 0; /* shorthand for top/right/bottom/left: 0 */
  border-radius: 50%;
  border: 2px solid #5aa63c;
  animation: pulse-ring 1.5s ease-out infinite;
}

.demo-gradient {
  background: linear-gradient(270deg, var(--accent), var(--accent2), #5aa63c);
  background-size: 300% 300%;
  animation: gradient-shift 3s ease infinite;
  border-radius: var(--radius-sm);
}

.demo-slide {
  background: #9b59b6;
  animation: slide-in-left 0.6s var(--ease-out) both;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-delay: 0s;
}

/* ============================================================
   SECTION 8: FILTERS & EFFECTS
   ============================================================ */

/* ============================================================
   LECTURE NOTE — FILTER & backdrop-filter
   ============================================================
   filter applies visual effects to an element and its children.
   backdrop-filter applies to the area BEHIND the element
   (like frosted glass — requires some transparency on bg).
   
   Common filter functions:
     blur(px)                — gaussian blur
     brightness(%)          — 0=black, 100=normal, 200=bright
     contrast(%)            — 0=gray, 100=normal, 200=high
     grayscale(%)           — 0=color, 100=black-and-white
     hue-rotate(deg)        — shift hue wheel
     invert(%)              — color inversion
     opacity(%)             — transparency (prefer opacity prop)
     saturate(%)            — color intensity
     sepia(%)               — vintage effect
     drop-shadow(...)       — like box-shadow but follows shape
   
   Multiple filters: filter: blur(2px) brightness(120%);
   ============================================================ */

.filter-demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.filter-box {
  height: 6rem;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  color: white;
  font-weight: 600;
  text-align: center;
  transition: filter 0.3s ease;
  cursor: default;
  padding: var(--space-2);
}

.f-normal { filter: none; }
.f-blur:hover { filter: blur(3px); }
.f-bright:hover { filter: brightness(150%); }
.f-grey:hover { filter: grayscale(100%); }
.f-hue:hover { filter: hue-rotate(180deg); }
.f-invert:hover { filter: invert(100%); }
.f-sepia:hover { filter: sepia(100%); }

/* ============================================================
   SECTION 9: CUSTOM PROPERTIES (Advanced)
   ============================================================ */

.theme-switcher {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-6) 0;
}

/* ============================================================
   LECTURE NOTE — CSS VARIABLES as component theming
   ============================================================
   You can scope custom properties to any element.
   Child elements inherit the property.
   This allows "component-level theming":
     .card { --card-accent: red; }
     .card .button { background: var(--card-accent); }
   
   You can also change variables with JS:
     el.style.setProperty('--color', 'blue');
   ============================================================ */

.theme-card {
  --t-bg: var(--ink);
  --t-fg: var(--paper);
  --t-accent: var(--accent);
  
  background: var(--t-bg);
  color: var(--t-fg);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  flex: 1;
  min-width: 10rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.theme-card:hover {
  border-color: var(--t-accent);
  transform: scale(1.02);
}

.theme-card h4 { color: var(--t-accent); font-size: var(--text-base); margin-bottom: var(--space-2); }
.theme-card p { font-size: var(--text-xs); opacity: 0.65; margin: 0; }

.theme-card.ocean { --t-bg: #0a1628; --t-fg: #b0e0ff; --t-accent: #4db8ff; }
.theme-card.forest { --t-bg: #0d1f0d; --t-fg: #b8e6b8; --t-accent: #5acc5a; }
.theme-card.sunset { --t-bg: #1f0d05; --t-fg: #ffe0c0; --t-accent: #ff7a30; }
.theme-card.lavender { --t-bg: #130d1f; --t-fg: #e0c0ff; --t-accent: #b070ff; }

/* ============================================================
   SECTION 10: RESPONSIVE DESIGN
   ============================================================ */

/* ============================================================
   LECTURE NOTE — MEDIA QUERIES
   ============================================================
   Media queries apply styles conditionally based on:
     width, height, orientation, resolution, color-scheme, etc.
   
   Syntax:
     @media (condition) { ... }
     @media screen and (min-width: 768px) { ... }
     @media (prefers-color-scheme: dark) { ... }
     @media (prefers-reduced-motion: reduce) { ... }
   
   Mobile-first vs Desktop-first:
     min-width — mobile-first (start small, grow up)
     max-width — desktop-first (start big, cut down)
     Mobile-first is recommended: simpler CSS, better perf.
   
   Common breakpoints (not fixed rules — use your design!):
     480px  — phones
     768px  — tablets
     1024px — small laptops
     1280px — desktops
   
   Logical operators:
     and    — both conditions must be true
     ,      — OR (comma-separated)
     not    — negate the condition
   ============================================================ */

.responsive-demo {
  margin: var(--space-6) 0;
}

.rwd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.rwd-box {
  background: var(--accent2);
  color: white;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}

.rwd-box:nth-child(2) { background: var(--accent); }
.rwd-box:nth-child(3) { background: #5aa63c; }
.rwd-box:nth-child(4) { background: #9b59b6; }

@media (max-width: 48rem) { /* 768px ÷ 16 = 48rem */
  .layout {
    grid-template-columns: 1fr; /* stack on mobile */
  }
  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .rwd-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .main-content {
    padding: var(--space-8) var(--space-4);
  }
}

@media (max-width: 30rem) { /* 480px */
  .nav { display: none; }
  .rwd-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION 11: PSEUDO-CLASSES & STATES DEMO
   ============================================================ */

.states-demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  align-items: flex-start;
}

.state-btn {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid var(--ink);
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);

  /* ============================================================
     LECTURE NOTE — outline vs border
     ============================================================
     outline does NOT affect layout (no box model space).
     border DOES take space.
     For focus rings, use outline — it's accessible and
     doesn't cause layout shifts.
     outline-offset: distance outside the element.
     ============================================================ */
  outline: none;
}

.state-btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14,14,14,0.2);
}

.state-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.state-btn:focus-visible {
  /* focus-visible only shows when using keyboard navigation */
  outline: 3px solid var(--accent2);
  outline-offset: 3px;
}

.state-btn.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.state-btn.btn-accent:hover {
  background: #a83a12;
  border-color: #a83a12;
}

.state-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* nth-child demo */
.nth-demo {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
}

.nth-item {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(14,14,14,0.06);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ============================================================
   LECTURE NOTE — :nth-child() selectors
   ============================================================
   :nth-child(n)    — by position (1-indexed!)
   :nth-child(2n)   — every even (same as :nth-child(even))
   :nth-child(2n+1) — every odd  (same as :nth-child(odd))
   :nth-child(3n)   — every 3rd
   :nth-child(3n+1) — 1st, 4th, 7th, 10th...
   :nth-last-child  — counts from the end
   :nth-of-type     — counts only same-type siblings
   ============================================================ */

.nth-item:nth-child(2n)   { background: var(--accent); color: white; }
.nth-item:nth-child(3n+1) { background: var(--accent2); color: white; }

/* ============================================================
   SECTION 12: CSS SHAPES & CLIP-PATH
   ============================================================ */

/* ============================================================
   LECTURE NOTE — clip-path
   ============================================================
   clip-path clips the visible area of an element to a shape.
   Everything outside is invisible (but still in the DOM).
   
   Values:
     circle(r at cx cy)               — circle
     ellipse(rx ry at cx cy)          — ellipse
     inset(top right bottom left)     — rectangle with optional round()
     polygon(x1 y1, x2 y2, ...)       — any polygon
     path('SVG path data')            — complex shapes
   
   clip-path is animatable! Great for reveals and transitions.
   ============================================================ */

.clip-demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  margin: var(--space-6) 0;
}

.clip-shape {
  width: 6rem;
  height: 6rem;
  background: linear-gradient(135deg, var(--accent), #ff8c5a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  color: white;
  font-weight: 600;
  text-align: center;
  transition: clip-path 0.4s var(--ease-out);
}

.clip-circle { clip-path: circle(45% at 50% 50%); }
.clip-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.clip-hex { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.clip-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.clip-arrow { clip-path: polygon(0% 30%, 60% 30%, 60% 0%, 100% 50%, 60% 100%, 60% 70%, 0% 70%); }

.clip-shape:hover { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
.clip-circle { background: linear-gradient(135deg, var(--accent2), #6baed6); }
.clip-triangle { background: linear-gradient(135deg, #5aa63c, #a8e063); }
.clip-hex { background: linear-gradient(135deg, #9b59b6, #c39bd3); }
.clip-star { background: linear-gradient(135deg, #f39c12, #f7dc6f); }
.clip-arrow { background: linear-gradient(135deg, var(--accent), #ff8c5a); }

/* ============================================================
   SECTION 13: CSS VARIABLES ADVANCED + calc()
   ============================================================ */

/* ============================================================
   LECTURE NOTE — calc() and math functions
   ============================================================
   calc() performs math operations with mixed units:
     calc(100% - 2rem)   — subtract rem from percentage
     calc(50vw + 100px)  — mix viewport and pixel units
   
   Operators: + − * /  (spaces required around + and −!)
   
   Other math functions:
     min(a, b)    — picks the smaller value
     max(a, b)    — picks the larger value
     clamp(min, preferred, max) — constrained flexible value
     round()      — round to nearest
     mod()        — remainder (like %)
   
   Use cases:
     calc(100vh - 4rem)       — full height minus header
     calc(1rem + 1vw)         — fluid spacing
     min(100%, 40rem)         — responsive max-width
     clamp(1rem, 2vw, 2rem)   — fluid sizing
   ============================================================ */

.calc-demo {
  margin: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calc-bar {
  height: 2.5rem;
  background: var(--ink);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 600;
}

.calc-bar-1 { width: calc(100% - 4rem); background: var(--accent); }
.calc-bar-2 { width: min(100%, 30rem); background: var(--accent2); }
.calc-bar-3 { width: clamp(8rem, 50%, 22rem); background: #5aa63c; }
.calc-bar-4 { width: max(10rem, 25%); background: #9b59b6; }

/* ============================================================
   SECTION 14: TYPOGRAPHY DEEP DIVE
   ============================================================ */

.typo-demo {
  background: var(--surface);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin: var(--space-6) 0;
}

.typo-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.typo-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.typo-label {
  font-size: var(--text-xs);
  font-family: 'IBM Plex Mono', monospace;
  color: var(--muted);
  min-width: 9rem;
  flex-shrink: 0;
}

.typo-value {
  font-size: var(--text-lg);
  margin: 0;
}

.fw-100 { font-weight: 100; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }
.ls-tight { letter-spacing: -0.05em; }
.ls-wide  { letter-spacing: 0.15em; text-transform: uppercase; font-size: var(--text-base); }
.lh-tight { line-height: 1; font-size: var(--text-base); }
.lh-loose { line-height: 2.5; font-size: var(--text-base); }
.text-italic { font-style: italic; font-family: 'Playfair Display', serif; }
.text-gradient {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  margin-top: var(--space-16);
}

.footer-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

.footer-title span { color: var(--accent); font-style: italic; }

.footer-sub {
  color: rgba(245,240,232,0.5);
  font-size: var(--text-sm);
  margin: 0;
}

/* ============================================================
   LECTURE NOTE — ACCESSIBILITY & :prefers-reduced-motion
   ============================================================
   Some users have vestibular disorders or motion sensitivity.
   The prefers-reduced-motion media query detects their OS
   setting to reduce animations. Always respect this!
   ============================================================ */

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

/* ============================================================
   LECTURE NOTE — :focus-visible & accessibility
   ============================================================
   :focus        — shows outline on ANY focus (click or keyboard)
   :focus-visible — shows outline only for KEYBOARD navigation
   This allows removing distracting focus rings for mouse
   users while keeping them for keyboard users.
   NEVER use outline: none without a :focus-visible alternative!
   ============================================================ */

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

/* ============================================================
   SCROLL ANIMATIONS via Intersection Observer CSS trick
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }