:root{
    --ink:#141414; --muted:#6b6b6b; --line:#e8e8e8; --bg:#ffffff; --soft:#f5f5f5; --red:#e0243d;
    --net:20,20,20; --net-a:.16;
    --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
    --sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root{ --ink:#ececec; --muted:#9a9aa0; --line:#26262a; --bg:#111113; --soft:#18181b; --net:255,255,255; --net-a:.22; }
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
  a{color:inherit}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative}

  /* ---------- HERO ---------- */
  .hero{position:relative;overflow:hidden;isolation:isolate}
  #net{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
  .hero::after{content:"";position:absolute;inset:auto 0 0 0;height:160px;background:linear-gradient(to bottom,transparent,var(--bg));z-index:-1;pointer-events:none}
  nav{display:flex;justify-content:space-between;align-items:center;padding:24px 0}
  .mark{font:400 24px/1 var(--serif);text-decoration:none;letter-spacing:.01em;white-space:nowrap}
  .mark .short{display:none;font-style:italic}
  nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;font:500 13px/1 var(--sans);color:var(--muted)}
  nav a{text-decoration:none} nav a:hover{color:var(--ink)}
  .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;padding:64px 0 96px}
  h1{font:400 clamp(64px,10vw,120px)/.9 var(--serif);letter-spacing:-.02em;margin:0 0 30px}
  h1 em{font-style:italic}
  /* the dot on the i is a node in the network */
  .i{position:relative;display:inline-block}
  .tittle{position:absolute;left:50%;top:.035em;width:.15em;height:.15em;margin-left:-.075em;border-radius:50%;background:var(--red);box-shadow:0 0 .1em var(--red);animation:glow 3.2s ease-in-out infinite}
  @keyframes glow{50%{box-shadow:0 0 .32em var(--red)}}
  .bl{display:inline-block;width:0;height:0;vertical-align:baseline}
  .roles{font:500 13px/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0;min-height:1.9em}
  .roles .static{color:var(--muted)} .roles .static span{white-space:nowrap} .roles .static b{color:var(--red);font-weight:500;margin:0 .2em}
  .caret{display:inline-block;width:2px;height:1.15em;background:var(--red);vertical-align:-3px;margin-left:4px;box-shadow:0 0 8px var(--red);animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .frame{position:relative;border-radius:6px;box-shadow:0 24px 60px -28px rgba(0,0,0,.35)}
  .frame::after{content:"";position:absolute;top:-14px;right:28px;width:16px;height:64px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}

  /* black & white until hovered (or tapped on a phone) */
  .bw{filter:grayscale(1) contrast(1.05);transition:filter .5s ease}
  .bw:hover,.bw.color{filter:none}
  .frame img{display:block;width:100%;height:auto;border-radius:6px}

  /* ---------- TABS ---------- */
  .panel{padding:64px 0 24px;scroll-margin-top:16px}
  .tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--soft);margin-bottom:34px}
  .tabs button{appearance:none;border:0;background:transparent;color:var(--muted);font:500 13.5px/1 var(--sans);padding:10px 18px;border-radius:999px;cursor:pointer}
  .tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
  .tabs button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
  [role=tabpanel][hidden]{display:none}
  .lede{color:var(--muted);margin:-14px 0 22px;font-size:15px}
  .list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
  .list li{border-bottom:1px solid var(--line)}
  .row{display:grid;grid-template-columns:44px 260px 1fr auto;gap:22px;align-items:baseline;padding:22px 0;text-decoration:none}
  .idx{font:400 22px/1 var(--serif);font-style:italic;color:var(--red)}
  .t{font:400 28px/1.15 var(--serif)}
  .d{color:var(--muted)}
  .go{font:500 13px/1 var(--sans);color:var(--muted);white-space:nowrap;transition:transform .15s,color .15s}
  a.row:hover .t{color:var(--red)} a.row:hover .go{transform:translateX(4px);color:var(--red)}
  .pill{font:500 11.5px/1 var(--sans);border:1px solid var(--line);border-radius:999px;padding:6px 9px;color:var(--muted);white-space:nowrap}
  .pill.live{border-color:var(--red);color:var(--red)}
  .soon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0}
  .soon-big{font:400 44px/1.1 var(--serif);margin:0 0 10px} .soon-big em{font-style:italic}
  .soon-sub{margin:0;color:var(--muted);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
  .cv{display:grid;grid-template-columns:200px 1fr;gap:0 22px}
  .cv dt{font:500 11.5px/1 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:24px 0;border-bottom:1px solid var(--line)}
  .cv dd{margin:0;padding:20px 0;border-bottom:1px solid var(--line)}
  .cv dd b{font:400 24px/1.2 var(--serif);display:block}
  .cv dd span{color:var(--muted);font-size:15px}
  .cv .first{border-top:1px solid var(--line)}

  /* ---------- SECTIONS ---------- */
  section{padding:56px 0;scroll-margin-top:16px}
  h2{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
  h2::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:2px;box-shadow:0 0 8px var(--red)}
  .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .strip img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:6px;cursor:zoom-in}
  .sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
  .all{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:500 13px/1 var(--sans);color:var(--muted);transition:color .15s}
  .all:hover{color:var(--red)}

  /* gallery */
  .gal{position:fixed;inset:0;z-index:50;background:rgba(10,10,12,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;grid-template-rows:auto 1fr auto;color:#eee;opacity:0;transition:opacity .25s}
  .gal[hidden]{display:none} .gal.on{opacity:1}
  .gal-top{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#9a9aa0}
  .gal-x,.gal-nav{appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;width:44px;height:44px;border-radius:50%;font:400 22px/1 var(--sans);cursor:pointer;transition:border-color .15s,background .15s}
  .gal-x:focus,.gal-nav:focus{outline:none} .gal-x:focus-visible,.gal-nav:focus-visible{border-color:var(--red)}
  .gal-x:hover,.gal-nav:hover{border-color:var(--red);background:rgba(224,36,61,.15)}
  .gal-stage{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;justify-items:center;min-height:0;padding:0 12px}
  .gal-stage img{max-width:100%;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);border-radius:6px;box-shadow:0 30px 80px -30px #000}
  .gal-thumbs{display:flex;gap:8px;justify-content:flex-start;padding:16px 16px 22px;overflow-x:auto}
  .gal-thumbs button:first-child{margin-left:auto} .gal-thumbs button:last-child{margin-right:auto}
  .gal-thumbs button{flex:none;appearance:none;border:0;padding:0;background:none;cursor:pointer;border-radius:4px;opacity:.45;outline:2px solid transparent;outline-offset:2px;transition:opacity .15s}
  .gal-thumbs button[aria-current="true"]{opacity:1;outline-color:var(--red)}
  .gal-thumbs img{display:block;width:44px;height:55px;object-fit:cover;border-radius:4px}

  /* contact */
  .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
  .contact-grid p.big{font:400 40px/1.1 var(--serif);margin:0}
  .contact-grid p.big em{font-style:italic}
  form{display:grid;gap:18px}
  label{display:grid;gap:6px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  input,textarea,select{font:400 16.5px/1.5 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;outline:none;transition:border-color .2s}
  input:focus,textarea:focus,select:focus{border-color:var(--red)}
  textarea{min-height:120px;resize:vertical}
  select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e0243d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center}
  select option{color:#141414;background:#fff}
  .send{justify-self:start;appearance:none;border:0;background:var(--ink);color:var(--bg);font:500 14px/1 var(--sans);padding:14px 22px;border-radius:999px;cursor:pointer;transition:background .2s}
  .send:hover{background:var(--red)}
  .hp{position:absolute;left:-9999px}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .note-box{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:36px 40px}
  .note-big{font:400 30px/1.2 var(--serif);margin:0} .note-big em{font-style:italic}
  .note-form{display:flex;gap:10px;align-items:center}
  .note-box>*{min-width:0}
  .note-form input{flex:1;min-width:0;width:100%}
  .note-form .send{white-space:nowrap}
  .thanks{font:400 26px/1.3 var(--serif);margin:0} .thanks em{font-style:italic}
  footer{border-top:1px solid var(--line);padding:26px 0 44px;color:var(--muted);font:400 13px/1.6 var(--sans);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr;gap:36px;padding:20px 0 64px}
    nav{padding:18px 0}
    .mark{font-size:21px}
    nav ul{gap:4px}
    nav a{display:inline-block;padding:14px 6px}
    .all{padding:14px 0;margin:-14px 0}
    .tabs button{padding:14px 18px}
    .note-box{grid-template-columns:1fr;gap:22px;padding:28px 22px}
    .note-big{font-size:26px}
    .frame{max-width:360px;order:-1}
    .row{grid-template-columns:36px 1fr auto;gap:6px 14px}
    .row .d{grid-column:2/-1;grid-row:2}
    .cv{grid-template-columns:1fr}
    .cv dt{border-bottom:0;padding:22px 0 0}
    .strip{grid-template-columns:repeat(2,1fr);gap:8px}
    .soon-big{font-size:36px}
    .gal-stage{grid-template-columns:1fr;padding:0 10px}
    .gal-nav{display:none}
    .contact-grid{grid-template-columns:1fr;gap:28px}
    section{padding:44px 0}
  }
  @media (max-width:560px){
    .note-form{flex-direction:column;align-items:stretch}
  }
  @media (max-width:400px){
    .mark .full{display:none} .mark .short{display:inline}
  }
  @media (prefers-reduced-motion: reduce){
    .caret,.tittle{animation:none}
    .bw,.gal{transition:none}
  }

  /* ---------- NAV (desktop vs phone) ---------- */
  nav li.m{display:none}
  @media (max-width:700px){ nav li.d{display:none} nav li.m{display:list-item} }

  /* ---------- TABS scroll on small screens ---------- */
  .tabs{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none}

  /* ---------- VIDEOS ---------- */
  .vids{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px;border-top:1px solid var(--line);padding-top:26px}
  .vid{display:grid;gap:10px;align-content:start;text-decoration:none}
  .thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--soft)}
  .thumb img{display:block;width:100%;height:100%;object-fit:cover}
  .vid:hover .bw{filter:none}
  .play{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.55);transition:background .2s}
  .play::after{content:"";position:absolute;left:16px;top:13px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
  .vid:hover .play{background:var(--red)}
  .vt{font:400 22px/1.2 var(--serif)} .vid:hover .vt{color:var(--red)}
  .vm{font:500 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

  /* ---------- FOOTER link ---------- */
  footer a{text-decoration:none;color:var(--ink)} footer a:hover{color:var(--red)}

  /* ---------- CONTACT PAGE ---------- */
  .page-head{padding:40px 0 84px}
  .kicker{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 24px}
  .kicker::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:10px;vertical-align:2px;box-shadow:0 0 8px var(--red)}
  .page-title{font:400 clamp(46px,7.4vw,92px)/1 var(--serif);letter-spacing:-.015em;margin:0;max-width:13em}
  .page-title em{font-style:italic}
  .aside{color:var(--muted);font-size:16px;margin:0;max-width:22em}
  .aside b{display:block;color:var(--ink);font:400 26px/1.25 var(--serif);margin-bottom:10px}

  @media (max-width:980px){ .vids{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .vids{grid-template-columns:1fr} .page-head{padding:20px 0 56px} }
  nav a[aria-current]{color:var(--ink)}
  @media (max-width:700px){ .tabs button{padding:14px 11px} }
  @media (max-width:360px){ .tabs button{padding:14px 8px;font-size:13px} }
  @media (max-width:340px){ .tabs button{padding:14px 6px} }

  /* ---------- VIDEO SERIES ROWS ---------- */
  .series{border-top:1px solid var(--line);padding:22px 0 30px}
  .series-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
  .series-head h3{font:400 28px/1.1 var(--serif);margin:0}
  .series-head .n{font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .arrows{margin-left:auto;display:flex;gap:6px}
  .arrows[hidden]{display:none}
  .arr{appearance:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:400 20px/1 var(--sans);cursor:pointer;transition:border-color .15s,color .15s}
  .arr:hover:not(:disabled){border-color:var(--red);color:var(--red)}
  .arr:disabled{opacity:.35;cursor:default}
  .row-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*20px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .row-scroll::-webkit-scrollbar{display:none}
  .row-scroll .vid{scroll-snap-align:start}
  .row-scroll .vt{font-size:20px}
  @media (max-width:980px){ .row-scroll{grid-auto-columns:calc((100% - 2*16px)/3);gap:16px} }
  @media (max-width:700px){ .row-scroll{grid-auto-columns:72%;gap:14px} .arrows{display:none} .series-head h3{font-size:24px} }
  .aside.social{margin-top:22px;font-size:14px;max-width:24em}

  /* gentle reveal (only added by script, so content never hides without it) */
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  /* keyboard focus is always visible */
  a:focus-visible,button:focus-visible,.vid:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}