/* =========================================================
       Design Tokens
    ========================================================== */
    :root{
      --brand-ink:#111416;
      --brand-cream:#fff9e6;
      --brand-red:#d73b3e;
      --brand-blue:#0b4f6c;
      --brand-yellow:#ffdd3c;

      --paper:#fcf6dd;
      --paper-2:#f6eed0;
      --panel:#ffffff;

      --font-serif:"EB Garamond", Georgia, serif;
      --font-comic:"Bangers", system-ui, sans-serif;
      --font-stamp:"Special Elite","EB Garamond", Georgia, serif;
      --font-sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

      --fs-xxl:clamp(2.6rem,5vw,4.5rem);
      --fs-xl: clamp(1.8rem,3.2vw,3rem);
      --fs-lg: 1.25rem;
      --fs-md: 1rem;
      --fs-sm: .9rem;

      --container:1120px;
      --gutter:1rem;
      --radius:12px;
      --radius-panel:8px;
      --shadow-panel:0 6px 0 var(--brand-ink);
      --dot-size:2px;

      --tw-speed:3.2s;
      --tw-delay:.15s;
      --tw-caret:650ms;
    }

    /* =========================================================
       Base
    ========================================================== */
    *,*::before,*::after{ box-sizing:border-box }
    html,body{ height:100% }
    body{
      margin:0;
      color:var(--brand-ink);
      background:var(--paper);
      font-family:var(--font-serif);
      line-height:1.5;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    body::before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none; opacity:.12;
      background:
        radial-gradient(var(--brand-ink) 1px, transparent 1px) 0 0/var(--dot-size) var(--dot-size),
        radial-gradient(#0002 1px, transparent 1px) var(--dot-size) var(--dot-size)/var(--dot-size) var(--dot-size),
        linear-gradient(0deg, var(--paper-2), var(--paper));
    }
    .wrap{ max-width:var(--container); margin:0 auto; padding:2.5rem var(--gutter) 4rem }

    /* Skip link */
    .skip{
      position:absolute; left:-9999px; top:auto;
    }
    .skip:focus{
      left:1rem; top:1rem;
      background:#fff; border:2px solid #000; padding:.4rem .6rem; z-index:9999;
    }

    /* =========================================================
       Header
    ========================================================== */
    header{
      display:flex; align-items:center; justify-content:space-between;
      gap:1rem; margin-bottom:1.5rem;
    }
    .logo{
      font-family:var(--font-comic);
      font-size:1.6rem;
      letter-spacing:.5px;
      color:var(--brand-red);
      text-shadow:0 1px 0 #0002;
      user-select:none;
    }
    nav a{
      font-family:var(--font-sans);
      text-decoration:none; color:var(--brand-ink);
      padding:.4rem .7rem; border-radius:6px;
      transition:background .15s,color .15s;
    }
    nav a:hover{ background:#0000000b; color:var(--brand-blue) }
    nav a:focus-visible{ outline:3px solid var(--brand-blue); outline-offset:1px }

    /* =========================================================
       Hero
    ========================================================== */
    .hero{
      position:relative;
      padding:clamp(1.1rem,3vw,1.6rem);
      margin:1rem 0 2rem;
      background:var(--panel);
      border:2px solid var(--brand-ink);
      border-radius:14px;
      box-shadow:var(--shadow-panel);
    }
    .kicker{
      font-family:var(--font-sans);
      font-size:var(--fs-sm);
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#444;
      margin-bottom:.6rem;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:300px 1fr;
      gap:clamp(1rem,3vw,1.5rem);
      align-items:center;
    }
    @media (max-width:860px){
      .hero-grid{ grid-template-columns:1fr }
    }

    .portrait-rect{
      margin:0; position:relative; overflow:hidden;
      aspect-ratio:3/5; max-width:80%;
    }
    .portrait-rect img{
      width:100%; height:100%; object-fit:cover; display:block; background:transparent;
      transform:translateZ(0); transition:transform .25s ease;
    }
    .portrait-rect:hover img{ transform:scale(1.03) }

    .hero-copy{ min-width:0 }

    .hero-title{
      margin:0 0 .6rem 0;
      font-family:var(--font-stamp);
      font-size:clamp(2rem,5.2vw,4rem);
      line-height:1.05;
      letter-spacing:.5px; word-spacing:2px;
      position:relative; white-space:nowrap; overflow:hidden; width:0;
      animation:typingPX var(--tw-speed) steps(var(--tw-steps), end) var(--tw-delay) 1 both;
    }
    .hero-title::after{
      content:"";
      position:absolute; top:8%; bottom:8%; right:0; width:3px; background:var(--brand-ink);
      animation:caretBlink var(--tw-caret) steps(1, end) infinite;
    }
    @keyframes typingPX{ to{ width:var(--tw-target-px, 0px) } }
    @keyframes caretBlink{ 50%{ opacity:0 } }

    /* Mobile / reduced motion */
    @media (max-width:480px){
      .hero-title{ white-space:normal; width:auto; animation:none }
      .hero-title::after{ content:none }
    }
    @media (prefers-reduced-motion: reduce){
      .hero-title{ animation:none; width:auto }
      .hero-title::after{ content:none }
    }

    .tagline{ font-size:var(--fs-lg); margin-top:.2rem; color:#2b2b2b }
    .hero .meta{ margin-top:.55rem; font-family:var(--font-sans); font-size:var(--fs-sm); color:#5a5a5a }

    /* =========================================================
       Panels
    ========================================================== */
    .panels{
      display:grid; gap:1rem;
      grid-template-columns:repeat(4,minmax(0,1fr));
    }
    @media (max-width:900px){
      .panels{ grid-template-columns:repeat(2,1fr) }
    }
    @media (max-width:520px){
      .panels{ grid-template-columns:1fr }
    }

    .panel{
      display:block; position:relative; isolation:isolate;
      min-height:128px; padding:.9rem; text-decoration:none; color:inherit;
      background:var(--panel); border:3px solid var(--brand-ink); border-radius:var(--radius-panel);
      box-shadow:var(--shadow-panel);
      transition:transform .06s ease, box-shadow .06s ease;
    }
    .panel:hover{ transform:translateY(-2px); box-shadow:0 8px 0 var(--brand-ink) }
    .panel:focus-visible{ outline:3px solid var(--brand-blue); outline-offset:2px }
    .panel h3{
      margin:0 0 .4rem;
      font-family:var(--font-comic); font-size:1.25rem; line-height:1.1; letter-spacing:.3px;
    }
    .panel p{
      margin:0;
      font-family:var(--font-sans); font-size:var(--fs-sm); color:#333;
    }

    .burst{
      position:absolute; top:-10px; right:-10px;
      display:grid; place-items:center;
      width:54px; height:54px;
      background:var(--brand-yellow);
      border:3px solid var(--brand-ink); border-radius:50%;
      transform:rotate(-8deg);
      box-shadow:var(--shadow-panel);
      font-family:var(--font-comic);
    }

    /* =========================================================
       Footer
    ========================================================== */
    footer{
      margin-top:2.5rem;
      display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap;
      font-family:var(--font-sans); font-size:var(--fs-sm); color:#555;
    }