/* shared case-study layout; each case page sets its own --paper / --accent inline */
html{
    color-scheme:light;scroll-behavior:smooth;
    background:var(--paper);
    background-image:
      repeating-linear-gradient(180deg,transparent 0 7px,var(--paper) 7px 16px),
      linear-gradient(90deg,rgba(10,41,36,.07) 1px,transparent 1px);
    background-size:auto,190px 100%;
  }
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  *{box-sizing:border-box}
  body{
    margin:0;background:transparent;color:var(--ink);
    font-family:var(--display);font-variation-settings:'wdth' 100;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--accent);color:var(--paper)}

  .live-pill{
    background:var(--accent);color:#fff;font-family:var(--mono);font-size:.74rem;
    letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;border-radius:999px;margin-top:1.6em;
    display:inline-flex;align-items:center;gap:.55em;
    transition:background .18s ease-out,transform .18s var(--ease-snap);
  }
  .live-pill:hover{background:var(--accent-deep);transform:translateY(-1px)}
  .live-pill svg,.visit svg{width:.7em;height:.7em}

  .wrap{max-width:calc(var(--col) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
  .prose p,.prose h2{max-width:66ch}

  /* case hero */
  .case-hero{padding-top:calc(var(--nav-h) + clamp(64px,7vw,100px));padding-bottom:clamp(36px,4.5vw,60px);
    display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,480px);column-gap:clamp(36px,5vw,96px);align-items:center}
  .case-hero-copy{min-width:0}
  .case-hero .hero-shot{margin:0;max-width:none;justify-self:end;width:100%}
  .case-hero .hero-shot .frame img{max-height:440px;object-fit:cover;object-position:top} /* tall phone captures get cropped, not stretched */
  @media (max-width:1024px){.case-hero{grid-template-columns:1fr}.case-hero .hero-shot{max-width:560px;justify-self:start;margin-top:40px}}
  .kicker{
    font-family:var(--hand);font-style:italic;font-weight:500;
    color:var(--accent);font-size:1.05rem;margin:0 0 1em;
  }
  h1{
    font-variation-settings:'wdth' 100;font-weight:700;
    font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1.04;letter-spacing:-.032em;
    margin:0 0 .4em;text-wrap:balance;max-width:20ch;
  }
  h1 em{font-style:normal;color:var(--accent)}
  .dek{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.6;max-width:56ch;margin:0 0 1.8em}
  .case-meta{
    display:flex;flex-wrap:wrap;gap:.4em 2.2em;margin:0 0 0;
    font-size:.85rem;font-weight:600;letter-spacing:.06em;color:rgba(10,41,36,.72);
  }
  .case-meta b{color:rgba(10,41,36,.62);font-family:var(--mono);font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:.66rem;display:block;margin-bottom:.35em}

  /* numbers strip */
  .numbers{
    margin:clamp(36px,5vw,64px) 0;
    border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  }
  .numbers div{padding:20px 18px 18px;border-right:1.5px solid rgba(10,41,36,.14)}
  .numbers div:last-child{border-right:0}
  .numbers b{
    display:block;font-variation-settings:'wdth' 100;font-weight:800;
    font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  }
  .numbers span{font-size:.82rem;color:rgba(10,41,36,.72);line-height:1.35;display:block;margin-top:.3em}
  .numbers i{font-style:normal;color:var(--accent)}

  /* sections */
  section{padding:clamp(28px,3.6vw,52px) 0}
  h2{
    font-variation-settings:'wdth' 100;font-weight:700;
    font-size:clamp(1.55rem,2.6vw,2.3rem);line-height:1.08;letter-spacing:-.028em;
    margin:0 0 .7em;text-wrap:balance;
  }
  h2 em{font-style:normal;color:inherit}
  p{font-size:clamp(1.02rem,1.22vw,1.16rem);line-height:1.72;margin:0 0 1.15em}
  p b{font-weight:700}
  .aside-note{
    font-family:var(--hand);font-style:italic;color:rgba(10,41,36,.66);
    font-size:.98rem;margin:-.4em 0 1.4em;
  }

  /* her evidence-tag callouts */
  .tagbox{
    margin:1.8em 0 2em;padding:20px 24px 18px;
    border:2px solid var(--ink);border-radius:10px;position:relative;
    background:var(--paper);max-width:60ch;
  }
  .tagbox .tag{
    position:absolute;top:-11px;left:18px;
    background:var(--ink);color:var(--paper);
    font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
    padding:4px 10px;border-radius:4px;
  }
  .tagbox.accent{border-color:var(--accent)}
  .tagbox.accent .tag{background:var(--accent);color:#fff}
  .tagbox p{margin:0;font-size:clamp(1.05rem,1.3vw,1.22rem);font-weight:600;line-height:1.55}

  .persona-flip{
    font-family:var(--hand);font-weight:600;font-size:clamp(1.15rem,1.6vw,1.4rem);
    color:var(--accent);line-height:1.5;margin:1.4em 0;max-width:34ch;
    transform:rotate(-.6deg);
  }

  /* shot + frame */
  .frame{
    border:2px solid rgba(10,41,36,.16);border-radius:12px;overflow:hidden;
    background:#fff;box-shadow:0 22px 44px -26px rgba(10,41,36,.38);
  }
  .frame-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1.5px solid rgba(10,41,36,.12);background:var(--paper)}
  .frame-bar b{width:9px;height:9px;border-radius:50%;background:rgba(10,41,36,.16)}
  .frame-bar span{margin-left:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:rgba(10,41,36,.55)}
  .frame img{display:block;width:100%;height:auto}
  .case-shot{max-width:420px;margin:2em 0;position:relative}
  .case-shot .buddy{position:absolute;width:112px;top:0;right:18px;transform:translateY(-62%) rotate(-2deg);z-index:1;pointer-events:none}
  .case-shot .frame{position:relative;z-index:2}

  /* funnel table */
  .leak-list{list-style:none;margin:1.4em 0 1.8em;padding:0;max-width:60ch}
  .leak-list li{
    display:grid;grid-template-columns:96px 1fr;gap:18px;
    padding:13px 0;border-top:1.5px solid rgba(10,41,36,.13);
    font-size:1.02rem;line-height:1.5;
  }
  .leak-list li:last-child{border-bottom:1.5px solid rgba(10,41,36,.13)}
  .leak-list .n{
    font-variation-settings:'wdth' 100;font-weight:800;color:var(--accent);
    font-size:1.35rem;font-variant-numeric:tabular-nums;
  }
  .leak-list .n small{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.12em;color:rgba(10,41,36,.6);text-transform:uppercase}

  .visit{
    display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.95rem;
    border-bottom:2.5px solid var(--accent);padding-bottom:3px;
  }
  .visit svg{color:var(--accent);transition:transform .22s var(--ease-snap)}
  .visit:hover svg{transform:translate(3px,-3px)}

  /* end */
  .case-end{
    margin:clamp(40px,6vw,72px) 0 0;padding:clamp(40px,5vw,64px) 0 clamp(40px,5vw,64px);
    border-top:2px solid var(--ink);
  }
  .case-end .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
  .end-cta{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;max-width:46ch}
  .end-cta .visit{margin-top:.9em}
  .end-cat{text-align:center}
  .end-cat img{width:150px;height:auto;display:block;margin:0 auto}
  .end-cat figcaption{font-family:var(--hand);font-style:italic;font-size:.92rem;color:rgba(10,41,36,.7);margin-top:8px;max-width:22ch}

  .reveal{opacity:1}
  @media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}


  /* editorial two-column sections: text left, annotation rail right */
  section.prose{display:grid;grid-template-columns:minmax(0,62ch) minmax(0,1fr);column-gap:clamp(36px,5vw,100px);align-items:start;padding:clamp(28px,3.6vw,52px) var(--gut)} /* .wrap's horizontal padding would otherwise zero the vertical rhythm */
  section.prose h2{grid-column:1/-1}
  .sec-body{grid-column:1;min-width:0}
  .sec-rail{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:34px;min-width:0;max-width:460px}
  .sec-rail .tagbox{margin:0;max-width:none;transform:rotate(.4deg)}
  .sec-rail .tagbox.accent{transform:rotate(-.5deg)}
  .sec-rail .case-shot{margin:0;max-width:420px}
  .sec-rail .tagbox + .case-shot{margin-top:64px}
  section.prose + section.prose{border-top:1.5px solid rgba(10,41,36,.10)}
  @media (max-width:1099px){
    section.prose{display:block}
    .sec-rail{display:flex;flex-direction:column;gap:28px;margin-top:1.6em;max-width:none}
    .sec-rail .tagbox{transform:none;max-width:60ch}
    .sec-rail .tagbox.accent{transform:none}
  }
  @media (max-width:840px){
    .case-hero{padding-top:calc(var(--nav-h) + 76px)}
    .live-pill{padding:10px 14px;font-size:.68rem;letter-spacing:.1em}
    .numbers div{border-right:0;border-top:1.5px solid rgba(10,41,36,.14)}
    .numbers div:first-child{border-top:0}
    .case-end .wrap{grid-template-columns:1fr}
    .leak-list li{grid-template-columns:76px 1fr}
  }

  /* sentence-case metadata: role / timeline / stack, insight and decision chips, list notes */
  .case-meta b{text-transform:none;letter-spacing:0;font-family:var(--display);font-size:.82rem;color:rgba(10,41,36,.62)}
  .tagbox .tag,.tagbox > b:first-child,.tag-label{text-transform:none;letter-spacing:.02em;font-family:var(--display);font-weight:700;font-size:.72rem}
  .leak-list .n small{text-transform:none;letter-spacing:0;font-family:var(--display)}

  /* fieldwork photos: the proof that the pins were walked, not scraped */
  .field-strip{margin:clamp(20px,2.6vw,36px) 0 0}
  .field-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .field-row img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;border:1.5px solid rgba(10,41,36,.18);display:block}
  .field-strip figcaption{margin:.9em 0 0;font-size:.95rem;line-height:1.5;color:rgba(10,41,36,.78);max-width:66ch}
  @media (max-width:640px){.field-row{grid-template-columns:repeat(2,1fr)}}

  /* a real photograph from the fieldwork, framed like the sticky notes: paper mount, coral edge */
  .field-photo{margin:0;max-width:420px;background:var(--paper);padding:10px 10px 12px;border:1.5px solid rgba(10,41,36,.35);border-radius:6px;box-shadow:4px 4px 0 var(--accent)}
  .field-photo img{display:block;width:100%;height:auto;border-radius:3px}
  .field-photo figcaption{margin:.8em 2px 0;font-family:var(--hand);font-style:italic;font-size:.98rem;line-height:1.45;color:rgba(10,41,36,.82)}