/* ═══ THE CASE DOSSIER — components I: folder-tab nav + the rubber stamp ═══ */

/* ── the folder tab the whole site sits in ── */
.tabnav{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#E4D4B2,var(--manila) 82%);
  border-bottom:1px solid var(--manila-shade);
  box-shadow:0 1px 0 rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.38);
}
.tabnav::before{ /* the protruding folder tab — where the brand lives */
  content:"";position:absolute;top:100%;left:min(4vw,52px);width:150px;height:9px;
  background:var(--manila);border:1px solid var(--manila-shade);border-top:0;
  clip-path:polygon(0 0,100% 0,100% 100%,58% 100%,46% 55%,0 55%);
}
/* ★ flex-wrap is not cosmetic here. Below 860px the nav collapses to the hamburger, so the
   exposed band is 860-1120px: brand + six nav items on one row with nowhere to go. That is the
   same band the T63 defects were measured in (Start / Sign in / Have a code? clipped off a
   768px screen) and the same fix — wrap rather than choose casualties. */
.tabnav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;min-height:64px}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--ink);padding-block:.4rem}
.brand b{font:700 1.06rem/1 var(--serif);letter-spacing:.02em}
.brand span{font:700 .58rem/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--stamp-ink)}
.tabnav nav{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:1.15rem}
.tabnav nav a{font:700 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:.5rem .1rem;border-bottom:2px solid transparent}
.tabnav nav a:hover{border-bottom-color:var(--stamp)}
.tabnav nav a.here{border-bottom-color:var(--ink)}
.tabnav nav a.cta{
  color:var(--bone);background:var(--stamp-btn);padding:.62rem 1rem;border:0;border-radius:3px;
  box-shadow:0 2px 0 var(--stamp-press),0 6px 14px rgba(0,0,0,.35);
}
.tabnav nav a.cta:hover{filter:brightness(1.07);border-bottom:0}
.filenav-toggle{display:none;background:none;border:0;color:var(--ink);font:700 .8rem var(--mono);
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:.5rem}
@media (max-width:860px){
  .filenav-toggle{display:block;margin-left:auto}
  .tabnav nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:#E4D4B2;border-bottom:1px solid var(--manila-shade);padding:.6rem 1.2rem 1rem}
  .tabnav nav.open{display:flex}
  .tabnav nav a{padding:.7rem .2rem;border-bottom:1px solid rgba(28,26,23,.12)}
  .tabnav nav a.cta{margin-top:.6rem;text-align:center}
}

/* ── the rubber stamp — a verdict, applied at an angle like a hand did it ── */
.stamp{
  display:inline-block;font:700 .68rem/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--stamp-ink);border:3px double var(--stamp);border-radius:4px;
  padding:.34rem .7rem .3rem;transform:rotate(-4deg);
  background:linear-gradient(rgba(179,64,46,.06),rgba(179,64,46,.06));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stamp.big{font-size:.84rem;padding:.5rem .95rem;border-width:4px}
.stamp.on-dark{color:#D98B7B;border-color:#B3402E}
@media (prefers-reduced-motion:no-preference){
  .stamp.thunk{opacity:0;transform:rotate(-4deg) scale(1.7)}
  .stamp.thunk.is-in{opacity:1;transform:rotate(-4deg) scale(1);
    transition:opacity .28s ease,transform .28s cubic-bezier(.2,1.4,.3,1)}
}