:root{
    --ink:#1B211D;
    --ink-soft:#242B26;
    --paper:#EDE6D6;
    --paper-soft:#E4DAC4;
    --ivory:#F5F0E4;
    --brass:#B8862E;
    --brass-bright:#D6A548;
    --signal:#5B7A64;
    --line: rgba(245,240,228,0.14);
    --line-dark: rgba(27,33,29,0.12);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;
  }

  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    margin:0;
    letter-spacing:-0.01em;
  }

  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--brass);
    display:flex;
    align-items:center;
    gap:0.6em;
  }
  .eyebrow::before{
    content:"";
    width:18px;
    height:1px;
    background:var(--brass);
    display:inline-block;
  }

  a{color:inherit;}

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(237,230,214,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-dark);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 32px;
    max-width:1120px;
    margin:0 auto;
  }
  .logo{
    font-family:'Fraunces',serif;
    font-size:1.15rem;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .logo span{color:var(--brass);}
  .nav-links{
    display:flex;
    gap:32px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.78rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  .nav-links a{text-decoration:none; opacity:0.75; transition:opacity .2s;}
  .nav-links a:hover{opacity:1;}
  .nav-links a:focus-visible, a:focus-visible{outline:2px solid var(--brass); outline-offset:3px; opacity:1;}
  @media (max-width:720px){ .nav-links{display:none;} }

  /* ---------- EQ DIVIDER (signature element) ---------- */
  .eq{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px;
    height:34px;
    padding:10px 0;
    overflow:hidden;
  }
  .eq span{
    width:4px;
    background:linear-gradient(180deg,var(--brass-bright),var(--signal));
    border-radius:2px;
    animation:bounce 1.6s ease-in-out infinite;
  }
  .eq.dark span{ background:linear-gradient(180deg,var(--brass-bright),#9FBCA8); }
  @keyframes bounce{
    0%,100%{ height:6px; }
    50%{ height:28px; }
  }
  @media (prefers-reduced-motion: reduce){
    .eq span{ animation:none; height:14px; }
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:76px 0 60px;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:56px;
    align-items:center;
  }
  @media (max-width:860px){
    .hero-grid{ grid-template-columns:1fr; }
  }
  .hero h1{
    font-size:clamp(2.4rem,4.6vw,3.6rem);
    line-height:1.08;
    margin:18px 0 22px;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--brass);
  }
  .hero p.lead{
    font-size:1.08rem;
    max-width:46ch;
    opacity:0.86;
    margin-bottom:30px;
  }
  .btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.82rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    text-decoration:none;
    padding:14px 22px;
    border-radius:2px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:transform .15s ease, background .2s ease;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn-primary{
    background:var(--ink);
    color:var(--ivory);
  }
  .btn-primary:hover{ background:var(--ink-soft); }
  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line-dark);
  }
  .btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }

  .photo-frame{
    position:relative;
    border:1px solid var(--line-dark);
    background:var(--ink);
    padding:10px;
  }
  .photo-frame img{
    display:block;
    width:100%;
    height:auto;
    filter:grayscale(0.08) contrast(1.02);
  }
  .photo-tag{
    position:absolute;
    bottom:22px; left:22px;
    background:var(--ink);
    color:var(--ivory);
    font-family:'IBM Plex Mono',monospace;
    font-size:0.68rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:7px 12px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .rec-dot{
    width:7px; height:7px; border-radius:50%;
    background:#C1503B;
    display:inline-block;
    animation:pulse 1.8s infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
  @media (prefers-reduced-motion: reduce){ .rec-dot{ animation:none; } }

  /* ---------- ABOUT ---------- */
  .about{
    padding:70px 0 80px;
    border-top:1px solid var(--line-dark);
  }
  .about-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:60px;
  }
  @media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:28px; } }
  .about h2{
    font-size:clamp(1.8rem,3vw,2.3rem);
    margin:14px 0 0;
  }
  .about-body p{
    margin:0 0 18px;
    font-size:1.02rem;
  }
  .pull{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:1.3rem;
    line-height:1.45;
    border-left:2px solid var(--brass);
    padding-left:22px;
    margin:26px 0;
    color:var(--ink);
  }

  /* ---------- LESSONS ---------- */
  .lessons{
    background:var(--ink);
    color:var(--ivory);
    padding:80px 0;
  }
  .lessons .eyebrow{ color:var(--brass-bright); }
  .lessons .eyebrow::before{ background:var(--brass-bright); }
  .lessons h2{
    color:var(--ivory);
    font-size:clamp(1.8rem,3vw,2.3rem);
    margin:14px 0 40px;
  }
  .channel-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  @media (max-width:860px){ .channel-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .channel-grid{ grid-template-columns:1fr; } }
  .channel{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:28px 26px;
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:background .2s ease;
    text-decoration:none;
  }
  .channel:hover{ background:var(--ink-soft); }
  .channel .ch-num{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    color:var(--brass-bright);
    letter-spacing:0.08em;
  }
  .channel .ch-name{
    font-family:'Fraunces',serif;
    font-size:1.25rem;
    margin-top:20px;
  }

  /* ---------- VIDEO ---------- */
  .video-section{
    padding:80px 0 90px;
  }
  .video-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:30px;
    flex-wrap:wrap;
  }
  .video-head h2{ font-size:clamp(1.8rem,3vw,2.3rem); margin-top:14px; }
  .video-frame{
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:var(--ink);
    border:1px solid var(--line-dark);
  }
  .video-frame iframe{
    position:absolute; top:0; left:0; width:100%; height:100%; border:0;
  }
  .yt-link{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.82rem;
    text-transform:uppercase;
    letter-spacing:0.04em;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    border-bottom:1px solid var(--brass);
    padding-bottom:2px;
    white-space:nowrap;
  }
  .yt-link:hover{ color:var(--brass); }

  /* ---------- BOOK ---------- */
  .book{
    padding:86px 0 96px;
    border-top:1px solid var(--line-dark);
    text-align:center;
  }
  .book-inner{
    max-width:640px;
    margin:0 auto;
  }
  .book .eyebrow{ justify-content:center; }
  .book h2{
    font-size:clamp(1.9rem,3.4vw,2.5rem);
    margin:16px 0 18px;
  }
  .book-lead{
    font-size:1.02rem;
    opacity:0.85;
    max-width:48ch;
    margin:0 auto 30px;
  }

  /* ---------- EMAIL SIGNUP ---------- */
  .signup{
    padding:86px 0 96px;
    border-top:1px solid var(--line-dark);
    text-align:center;
    background:var(--paper-soft);
  }
  .signup .eyebrow{ justify-content:center; }
  .signup h2{
    font-size:clamp(1.9rem,3.4vw,2.5rem);
    margin:16px 0 18px;
  }
  .signup-lead{
    font-size:1.02rem;
    opacity:0.85;
    max-width:48ch;
    margin:0 auto 30px;
  }
  .signup-form{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    max-width:520px;
    margin:0 auto;
  }
  .signup-form input{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.9rem;
    padding:14px 16px;
    border:1px solid var(--line-dark);
    background:var(--paper);
    color:var(--ink);
    border-radius:2px;
    flex:1 1 200px;
  }
  .signup-form input:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
  .signup-form button{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.82rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:14px 22px;
    border-radius:2px;
    border:none;
    background:var(--ink);
    color:var(--ivory);
    cursor:pointer;
    transition:transform .15s ease, background .2s ease;
  }
  .signup-form button:hover{ transform:translateY(-1px); background:var(--ink-soft); }
  .signup-note{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.76rem;
    opacity:0.6;
    margin-top:14px;
  }
  .signup-form .hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
  }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--line-dark);
    padding:50px 0 40px;
    background:var(--paper-soft);
  }
  .footer-grid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-logo{
    font-family:'Fraunces',serif;
    font-size:1.1rem;
  }
  .footer-links{
    display:flex;
    gap:24px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.76rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  .footer-links a{ text-decoration:none; opacity:0.75; }
  .footer-links a:hover{ opacity:1; color:var(--brass); }
  .footer-note{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    opacity:0.55;
    margin-top:22px;
  }

  :focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }