/* ==========================================================================
   UNBOUND - pages.css
   hero / home sections / product cards + swatches / shop / product detail
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden;
  background:var(--ink); color:var(--paper);
  padding-top:var(--nav-h);
}
.hero__glow{
  position:absolute; left:50%; top:46%; translate:-50% -50%;
  width:min(100vw,1200px); aspect-ratio:1; pointer-events:none;
  /* a radial gradient is already soft — the blur filter on a 1200px layer
     was costly to rasterise and added nothing visible */
  background:radial-gradient(circle at 50% 50%, rgba(255,61,16,.15), rgba(255,61,16,0) 60%);
}
@media (max-width:640px){
  .hero__kicker{ max-width:24ch; font-size:var(--fs-xs) }
  .hero__top{ gap:.7rem }
  .eyebrow{ flex-wrap:wrap; letter-spacing:.16em }
}

.hero__top{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:flex-start; justify-content:space-between;
  padding:clamp(1.6rem,4vw,3rem) 0 0; margin-bottom:auto;
}
.hero__kicker{
  max-width:27ch; font-size:var(--fs-sm); line-height:1.55; color:#c3c0b5;
  text-shadow:0 2px 18px rgba(11,11,11,.85);
}
.hero__type{ position:relative; z-index:2; padding-bottom:clamp(1rem,3vw,2rem) }
.hero__word{
  font-family:var(--display); text-transform:uppercase; line-height:.78;
  font-size:clamp(4rem,19.4vw,17rem); letter-spacing:-.025em;
  display:block; overflow:hidden; margin-left:-.02em;
}
.hero__word > span{ display:block; transform:translateY(102%) }
.hero.is-live .hero__word > span{
  transform:translateY(0); transition:transform 1.2s var(--ease-out) .15s;
}
.hero__sub{
  display:flex; flex-wrap:wrap; gap:1.2rem 2.5rem; align-items:flex-end;
  justify-content:space-between; padding-block:1.4rem;
  border-top:1px solid rgba(242,239,230,.22);
}
.hero__sub p{ font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:#b8b5aa }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem }


/* ==========================================================================
   SPLIT / MANIFESTO
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,6rem); align-items:start }
@media (max-width:900px){ .split{ grid-template-columns:1fr } }
.split__sticky{ position:sticky; top:calc(var(--nav-h) + clamp(1rem,4vw,3rem)) }
.split__media{ aspect-ratio:3/4; overflow:hidden; background:var(--card) }
.split__media img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
  transform:translate3d(0,var(--py,0px),0) scale(1.08);
}

.tenets{ display:grid; gap:0; border-top:1px solid var(--line) }
.tenet{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.3rem,2.5vw,2.2rem); border-bottom:1px solid var(--line);
  /* transform, not padding — padding reflows the whole list on every hover */
  transition:transform .45s var(--ease);
}
.tenet:hover{ transform:translateX(.8rem) }
.tenet__no{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.16em; color:var(--fg-mute); padding-top:.5rem }
.tenet__t{ font-family:var(--display); font-size:clamp(1.5rem,3.2vw,2.5rem); text-transform:uppercase; line-height:.95 }
.tenet__d{ margin-top:.6rem; color:var(--fg-mute); font-size:var(--fs-sm); max-width:46ch; line-height:1.6 }
.tenet:hover .tenet__t{ color:var(--flame) }

/* ==========================================================================
   PRODUCT CARD + COLOR SWATCHES
   ========================================================================== */
.cards{ display:grid; gap:clamp(1.6rem,2.4vw,2.6rem) var(--gut) }
.cards--4{ grid-template-columns:repeat(4,1fr) }
.cards--3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1100px){ .cards--4{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:860px){
  .cards--4,.cards--3{ grid-template-columns:repeat(2,1fr) }
  .cards{ gap:1.6rem 1rem }
}

.card{ position:relative; display:flex; flex-direction:column; gap:.85rem }
/* Product mockups are shot on white. Matching the tile to that removes the
   visible white rectangle sitting inside a cream card. */
.card__media{
  position:relative; display:block; aspect-ratio:4/5; overflow:hidden;
  background:#fff; isolation:isolate;
}
.card__shot{
  position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease);
}
.card__shot.is-on{ opacity:1 }
.card__shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .5s;
}
.card:hover .card__shot.is-on img{ transform:scale(1.045) }
.card__badge{
  position:absolute; left:0; top:0; z-index:3;
  background:var(--flame); color:#fff; padding:.4rem .7rem;
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.card__badge--out{ background:var(--ink); color:var(--paper) }
.card__quick{
  position:absolute; inset:auto 0 0; z-index:3; display:flex; gap:1px;
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.card:hover .card__quick,.card:focus-within .card__quick{ transform:translateY(0) }
.card__quick button{
  flex:1; padding:.85rem .2rem; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.card__quick button:hover{ background:var(--flame); color:#fff }
.card__quick button:disabled{ opacity:.45; cursor:not-allowed }
@media (hover:none){ .card__quick{ transform:none } }

.card__info{ display:grid; gap:.3rem }
.card__row{ display:flex; justify-content:space-between; align-items:baseline; gap:.8rem }
.card__name{ font-size:var(--fs-sm); font-weight:650; line-height:1.3 }
.card__price{ font-family:var(--mono); font-size:var(--fs-xs); white-space:nowrap }
.card__price s{ color:var(--fg-mute); margin-right:.4rem }
.card__meta{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-mute);
}

/* swatches */
.swatches{ display:flex; flex-wrap:wrap; gap:.42rem; margin-top:.35rem }
.sw{
  --c:#ccc;
  position:relative; width:18px; height:18px; border-radius:50%; flex:none;
  display:grid; place-items:center; transition:transform .3s var(--ease);
}
.sw::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--c); background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(11,11,11,.22);
}
.sw::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid currentColor; opacity:0; transform:scale(.7);
  transition:opacity .3s, transform .35s var(--ease);
}
.sw:hover{ transform:scale(1.12) }
.sw.is-on::after,.sw[aria-checked="true"]::after{ opacity:1; transform:scale(1) }
.sw.is-out::before{ opacity:.4 }
.sw.is-out{ position:relative }
.sw.is-out::after{ opacity:1; transform:scale(1); border-style:dashed; opacity:.5 }
.swatches__more{
  font-family:var(--mono); font-size:var(--fs-micro); color:var(--fg-mute);
  align-self:center; letter-spacing:.06em;
}

/* rail (horizontal scroll product strip) */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,27vw);
  gap:var(--gut); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; scrollbar-width:thin;
}
.rail > *{ scroll-snap-align:start }
.rail::-webkit-scrollbar{ height:2px }
.rail::-webkit-scrollbar-thumb{ background:var(--line-strong) }
.rail::-webkit-scrollbar-track{ background:var(--line) }

/* ==========================================================================
   LOOKBOOK
   ========================================================================== */
.look{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut) }
.look__tile{ position:relative; overflow:hidden; background:var(--card) }
.look__tile img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
  transform:translate3d(0,var(--py,0px),0) scale(1.06);
  transition:transform 1.2s var(--ease);
}
.look__tile:hover img{ transform:translate3d(0,var(--py,0px),0) scale(1.12) }
.look__tile figcaption{
  position:absolute; left:0; bottom:0; padding:.7rem .9rem;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
}
.look__tile--1{ grid-column:span 7; aspect-ratio:4/3 }
.look__tile--2{ grid-column:span 5; aspect-ratio:3/4; align-self:end }
.look__tile--3{ grid-column:span 4; aspect-ratio:1 }
.look__tile--4{ grid-column:span 8; aspect-ratio:16/10 }
@media (max-width:860px){
  .look{ grid-template-columns:repeat(2,1fr) }
  .look__tile--1,.look__tile--4{ grid-column:span 2 }
  .look__tile--2,.look__tile--3{ grid-column:span 1; aspect-ratio:3/4 }
}

/* ==========================================================================
   BIG STATEMENT / TICKER SECTIONS
   ========================================================================== */
.statement{
  background:var(--ink); color:var(--paper); overflow:hidden;
  padding-block:clamp(4rem,9vw,9rem);
}
.statement__q{
  font-family:var(--display); text-transform:uppercase; line-height:.9;
  font-size:clamp(2rem,6.2vw,5.4rem); max-width:22ch;
}
.statement__q em{ font-style:normal; color:var(--flame) }
.statement__by{
  margin-top:2rem; font-family:var(--mono); font-size:var(--fs-xs);
  letter-spacing:.2em; text-transform:uppercase; color:#8b8b80;
}

.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line) }
@media (max-width:860px){ .values{ grid-template-columns:1fr } }
.value{
  background:var(--bg); padding:clamp(1.6rem,3vw,2.6rem);
  display:grid; gap:.8rem; align-content:start; min-height:clamp(200px,22vw,290px);
  transition:background .4s var(--ease), color .4s var(--ease);
}
.value:hover{ background:var(--ink); color:var(--paper) }
.value:hover .value__d{ color:#b8b5aa }
.value__i{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.2em; opacity:.6 }
.value__t{ font-family:var(--display); font-size:var(--fs-xl); text-transform:uppercase; line-height:1 }
.value__d{ font-size:var(--fs-sm); color:var(--fg-mute); line-height:1.6; max-width:34ch }

/* newsletter block */
.signup{
  background:var(--flame); color:#fff; padding-block:clamp(3rem,7vw,7rem); overflow:hidden;
}
.signup__in{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center }
@media (max-width:900px){ .signup__in{ grid-template-columns:1fr } }
.signup__form{ display:flex; border-bottom:2px solid rgba(255,255,255,.6) }
.signup__form input{
  flex:1; min-width:0; background:none; border:0; outline:none; padding:.9rem 0; color:#fff;
  font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:.06em;
}
.signup__form input::placeholder{ color:rgba(255,255,255,.65); text-transform:uppercase; font-size:var(--fs-xs) }
.signup__form button{
  flex:none; padding:.9rem 0 .9rem 1.2rem; color:#fff;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.signup__ok{ margin-top:.9rem; font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; min-height:1em }

/* ==========================================================================
   SHOP
   ========================================================================== */
.shop-head{ padding-top:calc(var(--nav-h) + clamp(2rem,6vw,5rem)); padding-bottom:clamp(1.5rem,3vw,3rem) }
.shop-head__word{
  font-family:var(--display); text-transform:uppercase; line-height:.8;
  font-size:clamp(3rem,15vw,12rem); letter-spacing:-.02em; display:block; overflow:hidden;
}
.shop-head__word > span{ display:block }
.shop-bar{
  position:sticky; top:var(--nav-h); z-index:700;
  background:rgba(242,239,230,.97);   /* opaque enough that a blur adds nothing */
  border-block:1px solid var(--line);
}
.shop-bar__in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.8rem; flex-wrap:wrap;
}
.filters{ display:flex; gap:.4rem; flex-wrap:wrap }
.filter{
  padding:.5rem .95rem; border:1px solid var(--line);
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.filter:hover{ border-color:var(--ink) }
.filter.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.shop-bar__right{ display:flex; align-items:center; gap:1rem }

/* On a phone a wrapped chip list turns the sticky bar into a wall, so the
   chips become one swipeable row that bleeds to both screen edges. */
@media (max-width:860px){
  .shop-bar__in{ gap:.7rem }
  .filters{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    width:calc(100% + var(--gut) * 2);
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
  }
  .filters::-webkit-scrollbar{ display:none }
  .filter{ flex:none }
}
.sortsel{
  border:1px solid var(--line); background:none; padding:.5rem 2rem .5rem .8rem;
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  appearance:none;
  background-image:url("../img/caret.svg");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:9px;
}
.shop-count{ font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute) }

.skeleton{ background:var(--card); position:relative; overflow:hidden }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{ to{ transform:translateX(100%) } }
.skeleton--card{ aspect-ratio:4/5 }
.skeleton--line{ height:10px; margin-top:.7rem; aspect-ratio:auto }
.skeleton--line.w50{ width:50% }

.state{
  padding-block:clamp(3rem,8vw,7rem); display:grid; gap:1rem; justify-items:start;
  max-width:52ch;
}
.state code{
  font-family:var(--mono); font-size:var(--fs-xs); background:var(--card);
  padding:.15rem .4rem; word-break:break-all;
}

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.pdp{ padding-top:calc(var(--nav-h) + clamp(1rem,3vw,2.5rem)) }
.crumbs{
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-mute); padding-bottom:1.2rem;
}
.crumbs a:hover{ color:var(--ink) }
.pdp__in{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1.5rem,4vw,4.5rem); align-items:start }
@media (max-width:980px){ .pdp__in{ grid-template-columns:1fr } }

/* gallery */
.gal{ display:grid; gap:var(--gut) }
.gal__stage{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:#fff; isolation:isolate;
}
.gal__layer{
  position:absolute; inset:0; opacity:0;
  transition:opacity .55s var(--ease), transform 1s var(--ease);
}
.gal__layer.is-on{ opacity:1 }
.gal__layer img{ width:100%; height:100%; object-fit:cover }
.gal__stage.is-zoom .gal__layer.is-on img{ transform:scale(1.5); transition:transform .5s var(--ease) }
.gal__flash{
  position:absolute; inset:0; z-index:4; background:var(--paper);
  opacity:0; pointer-events:none;
}
.gal__flash.is-flash{ animation:flash .5s var(--ease) }
@keyframes flash{ 0%{opacity:.5} 100%{opacity:0} }
.gal__note{
  position:absolute; left:0; bottom:0; z-index:5;
  background:var(--ink); color:var(--paper); padding:.5rem .8rem;
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  transform:translateY(101%); transition:transform .4s var(--ease);
}
.gal__note.is-on{ transform:translateY(0) }
.gal__thumbs{ display:flex; gap:.5rem; flex-wrap:wrap }
.thumb{
  width:clamp(54px,6vw,74px); aspect-ratio:4/5; overflow:hidden; background:#fff;
  position:relative; transition:transform .3s var(--ease);
}
.thumb img{ width:100%; height:100%; object-fit:cover }
.thumb::after{
  content:""; position:absolute; inset:0; border:2px solid var(--ink);
  opacity:0; transition:opacity .3s;
}
.thumb.is-on::after{ opacity:1 }
.thumb:hover{ transform:translateY(-3px) }

/* info column */
.pdp__info{ position:sticky; top:calc(var(--nav-h) + clamp(1rem,3vw,2.5rem)); display:grid; gap:1.4rem }
@media (max-width:980px){ .pdp__info{ position:static } }
.pdp__title{ font-family:var(--display); font-size:clamp(2rem,4.6vw,3.6rem); text-transform:uppercase; line-height:.9 }
.pdp__price{ display:flex; align-items:baseline; gap:.8rem; font-family:var(--mono); font-size:var(--fs-lg) }
.pdp__price s{ color:var(--fg-mute); font-size:var(--fs-sm) }
.pdp__price em{
  font-style:normal; background:var(--flame); color:#fff; padding:.1rem .45rem;
  font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase;
}
.pdp__desc{ font-size:var(--fs-sm); line-height:1.7; color:var(--fg-mute); max-width:46ch }
.pdp__desc p + p{ margin-top:.8rem }
/* long Shopify descriptions get trimmed here; the full text is in Details */
.pdp__desc--clamp{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; position:relative;
}

.opt{ display:grid; gap:.7rem }
.opt__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
}
.opt__head b{ font-weight:700 }
.opt__head span{ color:var(--fg-mute) }
.sw--lg{ width:30px; height:30px }
.sw--lg::after{ inset:-5px }

.sizes{ display:flex; flex-wrap:wrap; gap:.4rem }
.size{
  min-width:52px; padding:.7rem .6rem; border:1px solid var(--line);
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; position:relative;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.size:hover:not(:disabled){ border-color:var(--ink) }
.size.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.size:disabled{
  color:var(--fg-mute); cursor:not-allowed; opacity:.55;
  background-image:linear-gradient(to top right,transparent 47%,var(--line-strong) 47%,var(--line-strong) 53%,transparent 53%);
}
.pdp__actions{ display:grid; gap:.6rem }
.pdp__stock{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; display:flex; align-items:center; gap:.5rem; color:var(--fg-mute);
}
.pdp__stock i{ width:6px; height:6px; border-radius:50%; background:var(--acid); flex:none }
.pdp__stock.is-low i{ background:var(--flame) }
.pdp__stock.is-out i{ background:var(--fg-mute) }

.acc{ border-top:1px solid var(--line) }
.acc__item{ border-bottom:1px solid var(--line) }
.acc__btn{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.05rem 0; text-align:left;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.acc__btn i{ font-style:normal; transition:transform .4s var(--ease); font-size:1.1rem; line-height:1 }
.acc__item.is-open .acc__btn i{ transform:rotate(45deg) }
.acc__panel{ overflow:hidden; height:0; transition:height .45s var(--ease) }
.acc__inner{ padding-bottom:1.1rem; font-size:var(--fs-sm); line-height:1.7; color:var(--fg-mute) }
.acc__inner ul{ display:grid; gap:.35rem }
.acc__inner li{ padding-left:1rem; position:relative }
.acc__inner li::before{ content:"/"; position:absolute; left:0; color:var(--flame) }

.pdp__marq{ margin-top:clamp(3rem,7vw,6rem) }

/* ==========================================================================
   MANIFESTO PAGE
   ========================================================================== */
.mani-hero{
  background:var(--ink); color:var(--paper);
  padding:calc(var(--nav-h) + clamp(4rem,12vw,10rem)) 0 clamp(3rem,8vw,7rem);
  position:relative; overflow:hidden;
}
.mani-hero__w{
  font-family:var(--display); text-transform:uppercase; line-height:.8;
  font-size:clamp(3rem,16vw,13rem); letter-spacing:-.02em; display:block; overflow:hidden;
}
.mani-hero__w > span{ display:block }
.mani-q{
  font-family:var(--display); text-transform:uppercase; line-height:.92;
  font-size:clamp(1.6rem,4.4vw,3.6rem); max-width:26ch;
}
.timeline{ border-top:1px solid var(--line) }
.tl{
  display:grid; grid-template-columns:150px 1fr; gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.4rem,3vw,2.4rem); border-bottom:1px solid var(--line);
}
@media (max-width:700px){ .tl{ grid-template-columns:1fr; gap:.5rem } }
.tl__y{ font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.16em; color:var(--flame) }
.tl__t{ font-family:var(--display); font-size:var(--fs-xl); text-transform:uppercase; line-height:1 }
.tl__d{ margin-top:.5rem; color:var(--fg-mute); font-size:var(--fs-sm); line-height:1.65; max-width:60ch }

.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem) }
@media (max-width:900px){ .faq-grid{ grid-template-columns:1fr } }

/* size tables */
.tbl{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:var(--fs-xs) }
.tbl caption{
  text-align:left; padding-bottom:.8rem; letter-spacing:.16em; text-transform:uppercase;
}
.tbl th,.tbl td{
  text-align:left; padding:.75rem .5rem; border-bottom:1px solid var(--line);
  letter-spacing:.06em;
}
.tbl th{
  font-weight:700; text-transform:uppercase; font-size:var(--fs-micro);
  letter-spacing:.16em; color:var(--fg-mute); border-bottom-color:var(--line-strong);
}
.tbl tbody tr{ transition:background .25s var(--ease) }
.tbl tbody tr:hover{ background:rgba(11,11,11,.05) }
.tbl td:first-child{ font-weight:700 }