/* ============================================================
   Fortunso Labs — studio landing ("dark brutalist").
   Brutalist structure (cream borders, hard offset shadows, mono
   terminal chrome) in a warm dark editorial palette with an amber
   accent. Drives index.html.
   ============================================================ */
  :root{
    /* dark editorial color world (from C) */
    --bg:        #14110d;   /* warm near-black ground */
    --panel:     #1a160f;   /* slightly lifted warm panel */
    --panel-2:   #1f1a12;   /* card fill */
    --ink:       #f3ece0;   /* cream */
    --ink-soft:  #b6ac9c;
    --ink-mute:  #847b6c;
    --accent:    #f0a020;   /* warm amber — replaces B's electric blue */
    --accent-hi: #ffba47;
    --dev:       #e24a33;   /* warm red for the "in development" pulse */
    --accent-ink:#14110d;   /* dark text on amber fills */
    /* brutalist chrome translated onto dark */
    --line:      #efe7d6;   /* bone/cream borders so they read on dark */
    --bw:1.5px;
  }

  *{box-sizing:border-box;}

  html{-webkit-text-size-adjust:100%;}

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"JetBrains Mono", ui-monospace, monospace;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
    /* engineer graph-paper grid (faint warm) */
    background-image:
      linear-gradient(rgba(243,236,224,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(243,236,224,.035) 1px, transparent 1px);
    background-size:30px 30px;
    background-position:-1px -1px;
  }

  /* faint SVG film grain (from C) */
  body::after{
    content:"";
    position:fixed; inset:0; z-index:9999; pointer-events:none;
    opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  ::selection{background:var(--accent);color:var(--accent-ink);}

  a{color:inherit;}

  .frame{
    position:relative;
    z-index:1;
    max-width:1180px;
    margin:0 auto;
    background:var(--panel);
    border-left:var(--bw) solid var(--line);
    border-right:var(--bw) solid var(--line);
    border-bottom:var(--bw) solid var(--line);
  }

  /* full-height first screen: status bar + hero + ticker fill the viewport */
  .screen{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:100svh;
  }

  /* ---------- STATUS BAR ---------- */
  .statusbar{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    border-bottom:var(--bw) solid var(--line);
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .statusbar .sb-cell{
    padding:.7rem 1.1rem;
    display:flex;
    align-items:center;
    gap:.6rem;
    white-space:nowrap;
  }
  .statusbar .sb-brand{
    font-weight:700;
    letter-spacing:.18em;
    border-right:var(--bw) solid var(--line);
    color:var(--ink);
  }
  .sb-dot{
    width:.6rem;height:.6rem;
    background:var(--accent);
    display:inline-block;
    box-shadow:0 0 0 1px var(--line), 0 0 14px 2px rgba(240,160,32,.55);
    animation:dotGlow 1.8s ease-in-out infinite;
  }
  @keyframes dotGlow{
    0%,100%{box-shadow:0 0 0 1px var(--line), 0 0 6px 1px rgba(240,160,32,.45);}
    50%{box-shadow:0 0 0 1px var(--line), 0 0 16px 4px rgba(240,160,32,.95);}
  }
  .statusbar .sb-meta{
    margin-left:auto;
    border-left:var(--bw) solid var(--line);
    color:var(--ink-mute);
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    display:grid;
    grid-template-columns:64px 1fr;
    border-bottom:var(--bw) solid var(--line);
    flex:1 1 auto;
  }
  /* soft amber glow/bleed behind the headline (from C) */
  .hero::before{
    content:"";
    position:absolute; z-index:0;
    left:2%; top:8%;
    width:min(720px,82%); height:62%;
    background:radial-gradient(50% 50% at 38% 42%, rgba(240,160,32,0.22), rgba(240,160,32,0.06) 45%, transparent 72%);
    filter:blur(10px);
    pointer-events:none;
  }
  .hero-rail{
    position:relative;
    z-index:1;
    border-right:var(--bw) solid var(--line);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    padding:1.2rem 0;
    background:
      repeating-linear-gradient(45deg, transparent 0 9px, rgba(243,236,224,.05) 9px 10px);
  }
  .hero-rail span{
    writing-mode:vertical-rl;
    font-size:.66rem;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--ink-mute);
  }
  .hero-body{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:clamp(1.6rem,4vw,3.4rem) clamp(1.3rem,4vw,3.4rem) clamp(2rem,4vw,3.4rem);
  }

  .eyebrow{
    display:inline-block;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--ink);
    border:var(--bw) solid var(--line);
    padding:.45rem .8rem;
    background:var(--bg);
    box-shadow:5px 5px 0 var(--accent);
  }

  h1{
    font-family:"Fraunces", Georgia, serif;
    font-weight:500;
    font-optical-sizing:auto;
    font-size:clamp(2.7rem, 9.4vw, 7.2rem);
    line-height:1.0;
    letter-spacing:-.025em;
    margin:1.9rem 0 0;
    max-width:14ch;
    color:var(--ink);
  }
  h1 em{
    font-style:italic;
    font-weight:500;
    color:var(--accent);
    position:relative;
    padding:0 .04em;
  }
  /* accent underline tick under the italic word */
  h1 em::after{
    content:"";
    position:absolute;
    left:.02em;right:.02em;
    bottom:.06em;
    height:.07em;
    background:var(--accent);
  }

  .subline{
    margin:1.6rem 0 0;
    font-family:"Fraunces", Georgia, serif;
    font-weight:600;
    font-size:clamp(1.15rem,2.6vw,1.7rem);
    line-height:1.2;
    color:var(--ink-soft);
    max-width:30ch;
  }

  .hero-actions{
    margin-top:2.2rem;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem 1.4rem;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    font-family:"JetBrains Mono",monospace;
    font-weight:700;
    font-size:.92rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--accent-ink);
    background:var(--accent);
    border:var(--bw) solid var(--line);
    padding:1rem 1.4rem;
    box-shadow:7px 7px 0 var(--line);
    transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
  }
  .btn .arr{transition:transform .12s ease;}
  .btn:hover{background:var(--accent-hi);transform:translate(4px,4px);box-shadow:3px 3px 0 var(--line);}
  .btn:hover .arr{transform:translateX(4px);}
  .btn:active{transform:translate(7px,7px);box-shadow:0 0 0 var(--line);}
  .btn:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}

  .hero-tag{
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--ink-mute);
  }
  .hero-tag b{color:var(--ink);font-weight:700;}

  /* ---------- TICKER ---------- */
  .ticker{
    border-bottom:var(--bw) solid var(--line);
    background:var(--accent);
    color:var(--accent-ink);
    overflow:hidden;
    white-space:nowrap;
  }
  .ticker .marquee{
    display:inline-flex;
    width:max-content;
    animation:scroll 30s linear infinite;
    will-change:transform;
  }
  .ticker .track{
    display:inline-flex;
    flex:0 0 auto;
    padding:.6rem 0;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .ticker .track span{padding:0 1.3rem;}
  .ticker .track .acc{color:var(--bg);opacity:.55;}
  /* two identical tracks; move the whole strip by exactly one copy (-50%) */
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion:reduce){
    .ticker .marquee{animation:none;}
  }

  /* ---------- SECTION SCAFFOLD ---------- */
  .sec-head{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1.1rem clamp(1.3rem,4vw,3.4rem);
    border-bottom:var(--bw) solid var(--line);
  }
  .sec-mark{
    font-weight:700;
    font-size:.8rem;
    letter-spacing:.1em;
    color:var(--accent-ink);
    background:var(--accent);
    border:var(--bw) solid var(--line);
    padding:.25rem .55rem;
  }
  .sec-title{
    font-family:"Fraunces",serif;
    font-weight:500;
    font-size:clamp(1.3rem,3.6vw,2.1rem);
    letter-spacing:-.01em;
    line-height:1;
    color:var(--ink);
  }
  .sec-line{
    margin-left:auto;
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-mute);
  }

  /* ---------- LAB CARDS ---------- */
  .cards{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .card{
    position:relative;
    padding:clamp(1.5rem,3vw,2.4rem) clamp(1.3rem,4vw,3rem) clamp(1.7rem,3vw,2.6rem);
    background:var(--panel-2);
    border-bottom:var(--bw) solid var(--line);
    display:flex;
    flex-direction:column;
    transition:background .2s ease;
  }
  .card:first-child{border-right:var(--bw) solid var(--line);}
  .card:hover{background:var(--panel);}

  .card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
  }
  .card-idx{
    font-size:.72rem;
    letter-spacing:.18em;
    color:var(--ink-mute);
  }
  .badge{
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:.32rem .55rem;
    border:1px solid var(--line);
    white-space:nowrap;
  }
  .badge.live{
    background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
    animation:pingAmber 1.8s ease-out infinite;
  }
  .badge.dev{
    background:var(--bg);color:var(--dev);border-color:var(--dev);
    animation:pingRed 1.8s ease-out infinite;
  }
  .badge.dev::before{content:"◴ ";}
  .badge.live::before{content:"● ";}
  @keyframes pingAmber{
    0%{box-shadow:0 0 0 0 rgba(240,160,32,.55);}
    70%,100%{box-shadow:0 0 0 8px rgba(240,160,32,0);}
  }
  @keyframes pingRed{
    0%{box-shadow:0 0 0 0 rgba(226,74,51,.6);}
    70%,100%{box-shadow:0 0 0 8px rgba(226,74,51,0);}
  }

  .card h3{
    font-family:"Fraunces",serif;
    font-weight:500;
    font-size:clamp(2rem,5vw,3.1rem);
    line-height:.95;
    letter-spacing:-.01em;
    margin:1.1rem 0 0;
    color:var(--ink);
  }
  .card p{
    margin:1rem 0 0;
    font-family:"Hanken Grotesk", system-ui, sans-serif;
    font-size:.98rem;
    line-height:1.6;
    color:var(--ink-soft);
    max-width:42ch;
  }
  .card-link{
    margin-top:auto;
    padding-top:1.6rem;
    align-self:flex-start;
  }
  .card-link a{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    text-decoration:none;
    font-weight:700;
    font-size:.84rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink);
    border-bottom:3px solid var(--accent);
    padding-bottom:.2rem;
    transition:gap .12s ease, color .12s ease;
  }
  .card-link a .arr{color:var(--accent);}
  .card-link a:hover{gap:.95rem;color:var(--accent);}

  /* ---------- STRAIGHT UP ---------- */
  .straight{border-bottom:var(--bw) solid var(--line);}
  .stmt{
    display:flex;
    gap:1.2rem;
    align-items:flex-start;
    padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1.3rem,4vw,3.4rem);
  }
  .stmt + .stmt{border-top:var(--bw) solid var(--line);}
  .stmt .caret{
    font-weight:700;
    color:var(--accent);
    font-size:1.4rem;
    line-height:1.1;
    flex:0 0 auto;
    user-select:none;
  }
  .stmt p{
    margin:0;
    font-family:"Fraunces",serif;
    font-weight:600;
    font-size:clamp(1.25rem,3.2vw,2rem);
    line-height:1.18;
    letter-spacing:-.005em;
    max-width:24ch;
    color:var(--ink);
  }
  .stmt p .hl{color:var(--accent);font-style:italic;}

  /* ---------- FOOTER ---------- */
  footer{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .foot-cell{
    padding:1.3rem clamp(1.3rem,4vw,3.4rem);
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:.7rem;
    color:var(--ink-soft);
  }
  .foot-hi{border-right:var(--bw) solid var(--line);}
  .foot-hi a{
    color:var(--accent);
    text-decoration:none;
    font-weight:700;
    border-bottom:2px solid var(--accent);
    padding-bottom:.1rem;
  }
  .foot-hi a:hover{background:var(--accent);color:var(--accent-ink);border-bottom-color:var(--line);}
  .foot-copy{margin-left:auto;color:var(--ink-mute);}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:760px){
    :root{--bw:1px;}
    .hero{grid-template-columns:1fr;}
    .hero-rail{
      flex-direction:row;
      border-right:none;
      border-bottom:var(--bw) solid var(--line);
      padding:.55rem 1rem;
    }
    .hero-rail span{writing-mode:horizontal-tb;letter-spacing:.24em;}
    .cards{grid-template-columns:1fr;}
    .card:first-child{border-right:none;}
    .statusbar{font-size:.62rem;}
    .statusbar .sb-cell{padding:.6rem .8rem;}
    .sec-line{display:none;}
    .foot-hi{border-right:none;border-bottom:var(--bw) solid var(--line);width:100%;}
    .foot-copy{margin-left:0;}
  }
  @media (max-width:420px){
    .statusbar .sb-meta{display:none;}
    .eyebrow{box-shadow:4px 4px 0 var(--accent);}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
    .sb-dot,.badge.live,.badge.dev{animation:none;}
  }