/* hub.css — the shared shell for thiri.ai and demo.thiri.ai.
   Extracted from index.html so the two hub pages cannot drift apart the way
   the wordmark did, when one rule lived in twenty-five inline <style> blocks.
   Page-specific pieces (the MUTEK hero) stay on their own page. */
@import url("/css/brand.css");

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
  body{background:var(--thiri-bg);color:var(--thiri-ink);
       font-family:var(--thiri-font-body);font-size:1.0625rem;line-height:1.65;
       -webkit-font-smoothing:antialiased}
  .wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}
  a{color:inherit}
  .skip{position:absolute;left:-9999px}
  .skip:focus{left:1rem;top:1rem;z-index:100;background:var(--thiri-gold);color:#0d0d12;padding:.6rem 1rem;border-radius:4px}
  :focus-visible{outline:2px solid var(--thiri-gold);outline-offset:3px}

  /* nav: sticky, five anchors, pinned CTA, collapses under 52rem */
  .nav{position:sticky;top:0;z-index:50;background:rgba(13,13,18,.86);
       backdrop-filter:blur(14px);border-bottom:1px solid var(--thiri-border)}
  .nav-in{max-width:72rem;margin:0 auto;padding:0 1.5rem;height:4.25rem;
          display:flex;align-items:center;gap:2rem;position:relative}
  .brand{font-weight:600;letter-spacing:.24em;
         font-size:.8125rem;text-decoration:none;white-space:nowrap}
  .brand b{color:var(--thiri-gold)}
  .nav-links{display:flex;gap:1.9rem;margin-left:auto;align-items:center}
  .nav-links a{font-family:var(--thiri-font-ui);font-size:.875rem;color:var(--thiri-ink-dim);
               text-decoration:none;transition:color .15s}
  .nav-links a:hover{color:var(--thiri-ink)}
  .nav-cta{font-weight:500;border:1px solid var(--thiri-gold);color:var(--thiri-gold)!important;
           padding:.5rem .95rem;border-radius:999px;white-space:nowrap;
           transition:background .15s,color .15s}
  .nav-cta:hover{background:var(--thiri-gold);color:#0d0d12!important}
  .nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--thiri-border);
              border-radius:6px;padding:.45rem .6rem;cursor:pointer}
  .nav-toggle span{display:block;width:18px;height:1.5px;background:var(--thiri-ink);margin:3.5px 0}
  @media (max-width:52rem){
    .nav-toggle{display:block}
    .nav-links{position:absolute;top:4.25rem;left:0;right:0;flex-direction:column;
               align-items:stretch;gap:0;margin:0;background:var(--thiri-bg);
               border-bottom:1px solid var(--thiri-border);padding:.5rem 1.5rem 1.25rem;display:none}
    .nav-links[data-open="true"]{display:flex}
    .nav-links a{padding:.8rem 0;font-size:1rem}
    .nav-cta{margin-top:.7rem;text-align:center}
  }

  /* section chrome */
  .sec{padding:6.5rem 0;border-top:1px solid var(--thiri-border)}
  .label{font-family:var(--thiri-font-ui);font-size:.6875rem;letter-spacing:.2em;
         text-transform:uppercase;color:var(--thiri-gold);margin-bottom:1.15rem;
         display:flex;align-items:center;gap:.9rem}
  .label::after{content:"";flex:1;height:1px;
                background:linear-gradient(90deg,var(--thiri-border-lit),transparent)}
  h2{font-family:var(--thiri-font-display);font-weight:400;
     font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.01em;max-width:24ch}
  p.lede{color:var(--thiri-ink-dim);max-width:54ch;margin-top:1rem}

  /* cards */
  .grid{display:grid;gap:1.1rem;margin-top:2.75rem;
        grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr))}
  .card{border:1px solid var(--thiri-border);border-radius:12px;padding:1.6rem 1.5rem;
        background:var(--thiri-surface);display:flex;flex-direction:column;
        text-decoration:none;transition:border-color .16s,transform .16s}
  .card:hover{border-color:var(--thiri-gold-dim);transform:translateY(-2px)}
  .card .kind{font-family:var(--thiri-font-ui);font-size:.6875rem;letter-spacing:.14em;
              text-transform:uppercase;color:var(--thiri-ink-mute)}
  .card h3{font-family:var(--thiri-font-display);font-weight:400;font-size:1.4rem;
           margin:.7rem 0 .55rem;line-height:1.2}
  .card p{font-size:.9375rem;color:var(--thiri-ink-dim);line-height:1.6;flex:1}
  .card .go{font-family:var(--thiri-font-ui);font-size:.8125rem;color:var(--thiri-gold);margin-top:1.15rem}
  .cta-row{margin-top:2.5rem}
  /* buttons: shared vocabulary, so both hub pages get the same pill.
     These lived in index.html's inline <style>, which meant play.html's
     .btn-1 rendered as unstyled link text. */
  .btn{font-family:var(--thiri-font-ui);font-size:.9375rem;font-weight:500;text-decoration:none;
       display:inline-block;padding:.85rem 1.5rem;border-radius:999px;
       border:1px solid transparent;transition:.16s}
  .btn-1{background:var(--thiri-gold);color:#0d0d12}
  .btn-1:hover{background:var(--thiri-gold-light)}
  .btn-2{border-color:var(--thiri-border-lit);color:var(--thiri-ink)}
  .btn-2:hover{border-color:var(--thiri-gold);color:var(--thiri-gold)}
  .ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.5rem}
  /* one product per row: the deck's "one idea per screen", scrolled */
  .rows{margin-top:3.75rem;display:flex;flex-direction:column;gap:5.5rem}
  .row{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:center}
  .row:nth-child(even) .row-fig{order:-1}
  .row-fig{border:1px solid var(--thiri-border);border-radius:14px;overflow:hidden;
           background:var(--thiri-surface);line-height:0}
  .row-fig img{width:100%;height:auto;display:block}
  .row-fig.slot{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
                border-style:dashed;line-height:1.7;padding:2rem;text-align:center;
                font-family:var(--thiri-font-ui);font-size:.8125rem;color:var(--thiri-ink-mute)}
  .row h3{font-family:var(--thiri-font-display);font-weight:400;
          font-size:clamp(1.75rem,3vw,2.35rem);line-height:1.12;margin:.55rem 0 .9rem}
  .row .kind{font-family:var(--thiri-font-ui);font-size:.6875rem;letter-spacing:.16em;
             text-transform:uppercase;color:var(--thiri-gold)}
  .row p{color:var(--thiri-ink-dim);font-size:1rem;line-height:1.65;max-width:46ch}
  .row .go{display:inline-block;margin-top:1.4rem;font-family:var(--thiri-font-ui);
           font-size:.875rem;color:var(--thiri-gold);text-decoration:none;
           border-bottom:1px solid var(--thiri-gold-dim);padding-bottom:2px}
  .row .go:hover{color:var(--thiri-gold-light)}
  @media (max-width:52rem){
    .rows{gap:3.5rem}
    .row{grid-template-columns:1fr;gap:1.6rem}
    .row:nth-child(even) .row-fig{order:0}
  }
  /* evidence table folded in from the old Measurements block */
  .eq{width:100%;border-collapse:collapse;margin-top:2.25rem;font-family:var(--thiri-font-ui);
      font-size:.875rem}
  .eq th{text-align:left;font-weight:500;color:var(--thiri-ink-mute);font-size:.6875rem;
         letter-spacing:.14em;text-transform:uppercase;padding:0 1rem .8rem 0;
         border-bottom:1px solid var(--thiri-border)}
  .eq td{padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--thiri-border);
         color:var(--thiri-ink-dim);vertical-align:top}
  .eq td:first-child{color:var(--thiri-ink)}
  .eq .fig{color:var(--thiri-gold);white-space:nowrap}
  .eq caption{caption-side:bottom;text-align:left;padding-top:1rem;font-size:.8125rem;
              color:var(--thiri-ink-mute);line-height:1.6}
  @media (max-width:40rem){.eq,.eq tbody,.eq tr,.eq td{display:block;width:100%}
    .eq thead{display:none}.eq tr{padding:.5rem 0;border-bottom:1px solid var(--thiri-border)}
    .eq td{border:0;padding:.2rem 0}}
  /* two-up: community, about */
  .split{display:grid;gap:2.5rem;margin-top:2.75rem;grid-template-columns:1.05fr .95fr;align-items:start}
  @media (max-width:52rem){.split{grid-template-columns:1fr;gap:2rem}}
  .panel{border:1px solid var(--thiri-border);border-radius:12px;padding:1.75rem 1.6rem;
         background:var(--thiri-surface)}
  .ticks{list-style:none;margin-top:1.1rem}
  .ticks li{position:relative;padding-left:1.35rem;margin-bottom:.65rem;color:var(--thiri-ink-dim);
            font-size:.9375rem;line-height:1.6}
  .ticks li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
                    border-radius:50%;background:var(--thiri-gold-dim)}
  /* newsletter form, markup and script carried over unchanged */
  .f-row{margin-bottom:1rem}
  .f-row label{display:block;font-family:var(--thiri-font-ui);font-size:.75rem;
               letter-spacing:.1em;text-transform:uppercase;color:var(--thiri-ink-mute);
               margin-bottom:.45rem}
  .f-row input,.f-row select{width:100%;background:var(--thiri-bg);color:var(--thiri-ink);
    border:1px solid var(--thiri-border-lit);border-radius:8px;padding:.7rem .85rem;
    font-family:var(--thiri-font-ui);font-size:.9375rem}
  .f-row input:focus,.f-row select:focus{border-color:var(--thiri-gold);outline:none}
  #submitBtn{width:100%;background:var(--thiri-gold);color:#0d0d12;border:0;border-radius:999px;
    padding:.8rem 1rem;font-family:var(--thiri-font-ui);font-size:.9375rem;font-weight:500;cursor:pointer}
  #submitBtn:hover{background:var(--thiri-gold-light)}
  .f-note{margin-top:.9rem;font-family:var(--thiri-font-ui);font-size:.75rem;
          color:var(--thiri-ink-mute);line-height:1.6}
  .f-msg{margin-top:.8rem;font-family:var(--thiri-font-ui);font-size:.875rem;color:var(--thiri-gold)}
  /* about: video slot */
  .vslot{border:1px dashed var(--thiri-border-lit);border-radius:12px;aspect-ratio:16/9;
         display:flex;align-items:center;justify-content:center;text-align:center;
         color:var(--thiri-ink-mute);font-family:var(--thiri-font-ui);font-size:.8125rem;
         padding:1.5rem;line-height:1.7;background:var(--thiri-surface)}
  /* footer */
  footer{border-top:1px solid var(--thiri-border);padding:4.5rem 0 3rem;margin-top:1rem}
  .foot-grid{display:grid;gap:2.5rem;grid-template-columns:1.4fr 1fr 1fr 1fr}
  @media (max-width:62rem){.foot-grid{grid-template-columns:1fr 1fr}}
  @media (max-width:36rem){.foot-grid{grid-template-columns:1fr}}
  .foot-h{font-family:var(--thiri-font-ui);font-size:.6875rem;letter-spacing:.16em;
          text-transform:uppercase;color:var(--thiri-gold);margin-bottom:1rem}
  footer ul{list-style:none}
  footer li{margin-bottom:.55rem}
  footer a{font-family:var(--thiri-font-ui);font-size:.875rem;color:var(--thiri-ink-dim);
           text-decoration:none}
  footer a:hover{color:var(--thiri-gold)}
  .foot-btm{border-top:1px solid var(--thiri-border);margin-top:3rem;padding-top:1.5rem;
            display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
            font-family:var(--thiri-font-ui);font-size:.75rem;color:var(--thiri-ink-mute)}