:root{
    /* Color tokens */
    --gold:#f1c246; --gold-2:#e1b84f;
    --ink:#1a1a1a; --navy:#1c1c3b;
    --bg:#f8f9fa; --muted:#6c757d; --surface:#fff;
    --on-gold:#1a1a1a;  /* text on gold */

    /* Layout + type tokens */
    --container: 760px;
    --radius: 10px;
    --shadow: 0 4px 14px rgba(0,0,0,.06);
    --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3.5rem;

    /* Responsive type scale */
    --h1: clamp(2rem, 2vw + 1.6rem, 3rem);
    --h2: clamp(1.5rem, 1.2vw + 1.2rem, 2.25rem);
    --h3: clamp(1.125rem, .6vw + 1rem, 1.35rem);
    --lead: clamp(1rem, .5vw + .95rem, 1.125rem);
    /* Let native widgets match theme */
    color-scheme: light dark;
  }

  html{scroll-behavior:smooth}
  body{font-family:'Lora',serif;background:var(--bg);color:var(--ink)}
  h1,h2,h3,.display-4{font-family:'Montserrat',sans-serif}
  h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)}
  .lead{font-size:var(--lead);line-height:1.6}

  .content-narrow{max-width:var(--container);margin:0 auto}

  /* Hero: supports image or gradient fallback */
  .hero{
    position:relative;color:#fff;text-align:center;
    padding-block: clamp(4rem, 8vw, 8rem) clamp(2rem, 4vw, 4rem);
    background:
      linear-gradient(180deg, rgba(28,28,59,.82), rgba(28,28,59,.82)),
      url('https://images.unsplash.com/photo-1607083207630-1eacdf17a881') center/cover no-repeat;
  }
  .hero > .container{position:relative;z-index:1}

  /* Section rhythm: borders only between sections */
  .section{padding-block:var(--space-5)}
  .section + .section{border-top:1px solid rgba(241,194,70,.4)}

  .hook-text{
    font-size:var(--lead);line-height:1.6;color:var(--navy);
    margin: var(--space-3) auto var(--space-4);max-width:90%;padding-inline:1rem;text-align:center
  }

  /* Buttons */
  .btn-custom{
    background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:600
  }
  .btn-custom:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
  .btn-custom:focus-visible{outline:3px solid #ffd86b;outline-offset:2px}

  /* Viz cards */
  .viz-card{background:var(--surface);border:1px solid rgba(241,194,70,.5);border-radius:var(--radius);box-shadow:var(--shadow)}
  .viz-card header{padding:.85rem 1rem;border-bottom:1px solid rgba(0,0,0,.06);text-align:left}
  .viz-card h3{margin:0}
  .viz-card .caption{font-size:.9rem;color:var(--muted);margin:.25rem 0 0}
  .viz-card .frame{aspect-ratio:16/9}
  .viz-card .frame iframe{width:100%;height:100%;border:0;border-radius:0 0 var(--radius) var(--radius)}

  .section-title{margin-bottom:.5rem}
  .eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;color:#8a8f98}

  .badge-note{
    display:inline-block;font-size:.7rem;padding:.15rem .45rem;border-radius:999px;
    border:1px solid #e0e0e0;background:#f5f5f5;color:#555;vertical-align:baseline
  }

  /* Links and focus (global a11y) */
  a:focus-visible{outline:3px solid #99c1ff;outline-offset:2px;border-radius:4px}

  /* Motion & color scheme preferences */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  }

  /* DARK THEME */
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0f1115; --ink:#f2f4f8; --surface:#151821; --muted:#aab0bb;
      --gold:#f1c246; --gold-2:#d5a93e; --on-gold:#0a0b0f;
    }
    .section + .section{border-top:1px solid rgba(241,194,70,.25)}
    .viz-card{box-shadow:none;border-color:rgba(241,194,70,.35)}
    .viz-card header{border-bottom:1px solid rgba(255,255,255,.06)}
    .badge-note{border-color:#3a3f4a;background:#20232b;color:#cbd1db}
    a:focus-visible, .btn-custom:focus-visible{ outline-color:#5da0ff; }
    .hero{
      background:
        linear-gradient(180deg, rgba(15,17,21,.78), rgba(15,17,21,.78)),
        url('https://images.unsplash.com/photo-1607083207630-1eacdf17a881') center/cover no-repeat;
    }

    /* Make the Skills section (bg-light) dark-mode compliant */
    #skills.bg-light { background-color: var(--surface) !important; }
  }