/* ============================================================
     STYLE 06 · BROKEN / BRUTALIST · Personal · Anti-grid
     Owned CSS only. System + monospace stacks. Zero deps.
     ============================================================ */
  :root{
    --ink:#0a0a0a;
    --paper:#f4f1ea;
    --paper-2:#e7e2d6;
    --acc:#ff3d00;          /* one harsh accent */
    --line:#0a0a0a;
    --mono: ui-monospace,'Cascadia Code','Consolas','SFMono-Regular',monospace;
    --sans: system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --hair:1px solid var(--line);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--mono);font-size:15px;line-height:1.45;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
    /* exposed baseline grid, faint */
    background-image:
      linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),rgba(10,10,10,.06) 100%);
    background-size:clamp(60px,8vw,120px) 100%;
  }
  a{color:inherit}
  ::selection{background:var(--acc);color:#fff}

  /* ---- LAB CHROME ---- */
  .lab-back,.lab-note{
    position:fixed;z-index:9999;font-family:var(--mono);font-size:11px;
    background:var(--ink);color:var(--paper);padding:7px 11px;
    text-decoration:none;letter-spacing:.04em;border:1px solid var(--ink);
  }
  .lab-back{left:14px;bottom:14px}
  .lab-back:hover{background:var(--acc);border-color:var(--acc)}
  .lab-note{right:14px;bottom:14px;background:var(--paper);color:var(--ink);border-color:var(--ink)}
  .lab-note b{color:var(--acc)}
  @media (max-width:520px){.lab-note{display:none}}

  .wrap{width:min(1180px,92vw);margin-inline:auto;position:relative}

  /* ================= FIXED SIDE MARGINALIA ================= */
  .spine{
    position:fixed;top:0;left:0;height:100%;width:34px;z-index:50;
    border-right:var(--hair);display:flex;align-items:center;justify-content:center;
    background:var(--paper);mix-blend-mode:multiply;
  }
  .spine span{
    writing-mode:vertical-rl;transform:rotate(180deg);
    font-size:11px;letter-spacing:.5em;text-transform:uppercase;
    color:var(--ink);opacity:.7;
  }
  @media (max-width:820px){.spine{display:none}}

  /* ================= NAV — deliberately off ================= */
  nav{
    position:relative;z-index:40;padding:18px clamp(20px,5vw,60px);
    display:flex;justify-content:space-between;align-items:flex-start;
    border-bottom:3px solid var(--ink);flex-wrap:wrap;gap:10px;
  }
  nav .brand{font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
  nav .brand i{color:var(--acc);font-style:normal}
  nav ul{list-style:none;display:flex;gap:clamp(12px,3vw,34px);margin:0;padding:0;flex-wrap:wrap;font-size:12px}
  nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.08em;position:relative;padding-bottom:2px}
  nav a::before{content:"[";color:var(--acc);opacity:0}
  nav a::after{content:"]";color:var(--acc);opacity:0}
  nav a:hover::before,nav a:hover::after{opacity:1}
  nav li:nth-child(2){transform:translateY(9px)}
  nav li:nth-child(4){transform:translateY(-4px)}

  /* ================= HERO — type as hero, overlap ================= */
  .hero{position:relative;padding:clamp(40px,9vw,120px) clamp(20px,5vw,60px) clamp(30px,6vw,80px)}
  .hero .tag{
    font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:var(--acc);
    border:var(--hair);border-color:var(--acc);display:inline-block;padding:5px 10px;
    transform:rotate(-1.5deg);
  }
  .giant{
    font-family:var(--sans);font-weight:800;line-height:.82;letter-spacing:-.03em;
    font-size:clamp(64px,20vw,260px);margin:.12em 0 0;text-transform:uppercase;
    position:relative;
  }
  .giant .l2{display:block;margin-left:clamp(20px,14vw,340px)}
  .giant .l2 em{
    font-style:normal;color:var(--paper);-webkit-text-stroke:2px var(--ink);
    background:var(--acc);padding:0 .06em;box-decoration-break:clone;
  }
  .giant .out{color:var(--paper);-webkit-text-stroke:2px var(--ink)}
  /* overlapping meta block punched over the type */
  .hero-meta{
    position:relative;z-index:5;max-width:340px;margin-top:clamp(-30px,-4vw,-10px);
    margin-left:auto;background:var(--ink);color:var(--paper);padding:16px 18px;
    border:3px solid var(--ink);transform:rotate(1.2deg);font-size:13px;
  }
  .hero-meta b{color:var(--acc)}
  .hero-meta .row{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(244,241,234,.3);padding:4px 0}
  .hero-meta .row:last-child{border-bottom:0}

  .scroll-cue{
    margin-top:24px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:10px;
  }
  .scroll-cue .bar{width:60px;height:2px;background:var(--ink);position:relative;overflow:hidden}
  .scroll-cue .bar::after{content:"";position:absolute;inset:0;background:var(--acc);
    animation:swipe 2.4s linear infinite}
  @keyframes swipe{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
  @media (prefers-reduced-motion:reduce){.scroll-cue .bar::after{animation:none}}

  /* ================= MARQUEE STRIP ================= */
  .strip{
    border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
    background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;
    padding:10px 0;font-size:clamp(14px,2.4vw,22px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  }
  .strip .track{display:inline-block;animation:scroll 26s linear infinite}
  .strip span{margin:0 22px}.strip .dot{color:var(--acc)}
  @keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.strip .track{animation:none}}

  /* ================= SECTION HEAD ================= */
  .shead{display:flex;align-items:baseline;gap:16px;padding:clamp(40px,7vw,90px) clamp(20px,5vw,60px) 0;flex-wrap:wrap}
  .shead .idx{font-size:13px;color:var(--acc);font-weight:700}
  .shead h2{font-family:var(--sans);font-weight:800;font-size:clamp(28px,5vw,60px);margin:0;letter-spacing:-.02em;text-transform:uppercase}
  .shead .fill{flex:1;height:1px;background:var(--ink);align-self:center;min-width:40px}

  /* ================= WORK — overlapping anti-grid ================= */
  .work{padding:clamp(24px,4vw,50px) clamp(20px,5vw,60px) clamp(40px,7vw,90px);display:grid;
    grid-template-columns:repeat(12,1fr);gap:0;row-gap:clamp(28px,5vw,64px)}
  .proj{border:3px solid var(--ink);background:var(--paper);position:relative;padding:0;transition:transform .15s ease}
  .proj:hover{transform:translate(-3px,-3px)}
  .proj .cap{display:flex;justify-content:space-between;font-size:12px;padding:8px 12px;border-bottom:var(--hair);text-transform:uppercase;letter-spacing:.05em}
  .proj .cap .no{color:var(--acc);font-weight:700}
  .proj h3{font-family:var(--sans);font-weight:800;font-size:clamp(22px,3vw,40px);margin:0;padding:14px 14px 4px;letter-spacing:-.02em;line-height:1}
  .proj p{margin:0;padding:6px 14px 14px;font-size:13px;max-width:46ch}
  .proj .art{height:clamp(150px,22vw,260px);border-top:var(--hair);position:relative;overflow:hidden;background:var(--paper-2)}
  .proj .foot{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-top:var(--hair);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
  .proj .foot .yr{color:var(--acc)}
  /* intentional overlap + span asymmetry */
  .p1{grid-column:1/8;z-index:3}
  .p2{grid-column:6/13;margin-top:clamp(-16px,-2vw,-40px);z-index:2;transform:rotate(-.6deg)}
  .p3{grid-column:2/9;z-index:4;margin-left:clamp(0px,4vw,60px)}
  .p4{grid-column:7/13;margin-top:clamp(-20px,-3vw,-60px);z-index:1;transform:rotate(.7deg)}
  @media (max-width:820px){
    .work{display:block}
    .proj{margin:0 0 26px;transform:none!important}
    .p2,.p4{margin-top:0}
    .p3{margin-left:0}
  }

  /* generated art per project (owned CSS/SVG) */
  .art svg{width:100%;height:100%;display:block}

  /* ================= ABOUT — split, overlap ================= */
  .about{position:relative;padding:clamp(40px,7vw,90px) clamp(20px,5vw,60px);border-top:3px solid var(--ink);
    background:var(--ink);color:var(--paper);overflow:hidden}
  .about .huge{
    font-family:var(--sans);font-weight:800;line-height:.9;letter-spacing:-.02em;
    font-size:clamp(30px,6vw,84px);max-width:16ch;text-transform:uppercase;position:relative;z-index:2;
  }
  .about .huge b{color:var(--acc)}
  .about .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,4vw,50px);margin-top:36px;position:relative;z-index:2}
  .about .cols h4{color:var(--acc);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 8px;border-bottom:1px solid rgba(244,241,234,.25);padding-bottom:6px}
  .about .cols p{margin:0;font-size:13px;color:var(--paper)}
  .about .cols ul{list-style:none;margin:0;padding:0;font-size:13px}
  .about .cols li{padding:4px 0;border-bottom:1px dashed rgba(244,241,234,.18)}
  .about .cols li::before{content:"→ ";color:var(--acc)}
  .about .ghost{
    position:absolute;right:-2vw;top:-4vw;font-family:var(--sans);font-weight:800;
    font-size:clamp(180px,34vw,460px);line-height:1;color:transparent;
    -webkit-text-stroke:2px rgba(255,61,0,.5);z-index:1;pointer-events:none;user-select:none;
  }

  /* ================= INDEX / CONTACT ================= */
  .idx-list{padding:clamp(24px,4vw,50px) clamp(20px,5vw,60px) 0}
  .idx-row{display:grid;grid-template-columns:60px 1fr auto;gap:16px;align-items:baseline;
    padding:14px 0;border-bottom:var(--hair);text-decoration:none;transition:padding-left .15s ease}
  .idx-row:hover{padding-left:18px;background:linear-gradient(90deg,rgba(255,61,0,.08),transparent)}
  .idx-row .n{color:var(--acc);font-size:12px}
  .idx-row .t{font-family:var(--sans);font-weight:700;font-size:clamp(16px,2.4vw,26px);text-transform:uppercase;letter-spacing:-.01em}
  .idx-row .m{font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
  .idx-row:hover .t{color:var(--acc)}

  .contact{padding:clamp(50px,9vw,120px) clamp(20px,5vw,60px);position:relative}
  .contact .big{
    font-family:var(--sans);font-weight:800;font-size:clamp(40px,11vw,150px);line-height:.85;
    letter-spacing:-.03em;text-transform:uppercase;text-decoration:none;display:block;
  }
  .contact .big:hover{color:var(--acc)}
  .contact .big .out{color:var(--paper);-webkit-text-stroke:2px var(--ink)}
  .contact .meta{display:flex;gap:clamp(16px,4vw,50px);flex-wrap:wrap;margin-top:26px;font-size:13px}
  .contact .meta a{text-decoration:none;border-bottom:2px solid var(--acc)}
  .contact .meta div span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:3px}

  footer{border-top:3px solid var(--ink);padding:18px clamp(20px,5vw,60px);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11px;
    text-transform:uppercase;letter-spacing:.08em}
  footer .c{color:var(--acc)}


/* inline style= -> class (CSP-clean) */
.dgbrut1{margin-left:0}
.dgbrut2{padding-left:0;padding-top:0}
.dgbrut3{color:var(--paper)}
.dgbrut4{background:var(--paper)}

.lab-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}