/* ═══════════════════════════════════════════════════════════════
   vinvertx, grindfiction showcase
   Palette sampled from the artwork itself. The rule that holds the
   page together: black is INK, never the ground. Every surface is
   oxblood, concrete, pine or deep ink; every edge is a black line;
   every shadow is a hard offset, never a blur.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:      #15151A;   /* warm near-black, in all ten pieces sampled */
  --ink-deep: #0C0C10;
  --oxblood:  #5C1D20;   /* her signature background red */
  --brick:    #8A2A24;
  --pine:     #184A3C;   /* the murky jade of SONA / ZYN */
  --concrete: #4E5355;   /* surfaces and borders only */
  --muted:    #8A9095;   /* secondary TEXT: concrete fails contrast on ink */
  --bone:     #CFC5B6;   /* warm paper, her sticker die-cut */
  --bone-hi:  #EDE6DA;
  --chrome:   #C2CED5;   /* metal highlight */
  --gold:     #D1A33A;   /* grills, slashes */

  --line: 3px;
  --drop: 7px;
  --strip-h: 50px;   /* the sticky bar, measured; anchor jumps offset by it */
  --pad: clamp(1.25rem, 5vw, 5rem);
  --rail: 1440px;

  --f: Archivo, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* The top bar is sticky, so an anchor that scrolls its target to y=0 tucks
     it underneath. Hold every jump back by the bar's height plus a little
     air, so the heading you asked for is the first thing you see. */
  scroll-padding-top:calc(var(--strip-h) + 1.25rem);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  display:block; max-width:100%;
  height:auto;            /* never let the width/height attributes stretch art */
}

a{ color:inherit; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--gold); color:var(--ink);
  padding:.75rem 1.25rem; font-weight:800; text-decoration:none;
}
.skip:focus{ left:0; }

/* ── headings ───────────────────────────────────────────────── */
h1,h2,h3{ margin:0; font-weight:900; line-height:.92; letter-spacing:-.02em; }
h1{ font-size:clamp(2.75rem, 7.2vw, 5.75rem); font-stretch:122%; line-height:.82; letter-spacing:-.04em; }
h2{ font-size:clamp(2.25rem, 5.5vw, 4rem); font-stretch:118%; letter-spacing:-.035em; }
h3{ font-size:1.1875rem; font-stretch:105%; font-weight:800; letter-spacing:-.01em; }

/* ── top strip: carries live state, not decoration ──────────── */
.strip{
  position:sticky; top:0; z-index:40;
  background:var(--ink-deep);
  border-bottom:var(--line) solid #000;
}
.strip__in{
  max-width:var(--rail); margin-inline:auto;
  padding:.6rem var(--pad);
  display:flex; align-items:center; gap:clamp(.75rem,2vw,2rem);
}
.strip__name{
  font-weight:900; font-stretch:112%; font-size:1.0625rem;
  letter-spacing:-.025em; text-decoration:none; color:var(--bone-hi);
}
.dot{ width:9px; height:9px; background:var(--gold); flex:none; }
.strip__nav{ margin-left:auto; display:flex; gap:clamp(.75rem,2vw,1.5rem); }
.strip__nav a{
  text-decoration:none; font-weight:700; font-stretch:92%; font-size:.9375rem;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.strip__nav a:hover{ border-bottom-color:var(--gold); color:var(--bone-hi); }


/* ── the wall ───────────────────────────────────────────────────
   Stickers pasted onto a surface. Columns are built in JS (shortest
   column first) so the surface is always covered; CSS owns how many
   columns there are and how a sticker looks.
   `box-sizing:content-box` + the matching width calc keeps the border
   off the image box, so nothing is ever stretched out of ratio.
   ──────────────────────────────────────────────────────────────── */
.wall{
  position:relative; isolation:isolate;
  background:var(--oxblood);
  border-bottom:var(--line) solid #000;
  overflow:hidden;
  min-height:min(90vh, 880px);
  display:grid; align-items:center;
  padding:clamp(3rem,7vw,6rem) var(--pad);
  --wall-cols:6;
  --sb:6px;          /* sticker border */
  --sg:13px;         /* gap between stickers */
}

.wall__paste{
  position:absolute; inset:-3% -2%; z-index:0;
  display:flex; align-items:flex-start; gap:0;
}
.wall__col{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:0;
}
.wall__col + .wall__col{ margin-left:calc(var(--sg) * -1); }
/* stickers overlap, the way paste-ups actually do: it closes the
   triangular gaps the rotations would otherwise leave open */
.wall__paste img{
  box-sizing:content-box;
  width:calc(100% - var(--sb) * 2);
  height:auto;
  margin-bottom:calc(var(--sg) * -1);
  border:var(--sb) solid var(--bone-hi);
  box-shadow:9px 9px 0 rgba(0,0,0,.5);
  transform:rotate(var(--rot,0deg)) scale(1.03);
}

/* flat oxblood wash + halftone, so the plate always reads */
.wall::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(44,12,14,.40);
}
.wall::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(#000 1px, transparent 1.3px);
  background-size:5px 5px; opacity:.14;
}

/* the plate */
.wall__plate{
  position:relative; z-index:2;
  max-width:37rem; width:100%;
  background:var(--ink);
  border:var(--line) solid #000;
  box-shadow:14px 14px 0 rgba(0,0,0,.6);
  padding:clamp(1.5rem,3.5vw,2.75rem);
}
.wall__plate h1{
  color:var(--bone-hi); margin-bottom:1rem;
  /* out of register, the way a cheap offset run lands: the red plate left
     and low, the cyan right and high. */
  text-shadow:-3px 2px 0 rgba(186,42,38,.66), 3px -2px 0 rgba(118,186,196,.5);
}
.wall__bio{
  margin:0 0 .9rem; font-size:clamp(1.0625rem,1.6vw,1.25rem);
  font-weight:700; font-stretch:98%; color:var(--gold);
}
.wall__sub{ margin:0 0 1.75rem; max-width:38ch; color:#CFC5B6; }
.wall__acts{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem; }

.btn{
  display:inline-block; padding:.8rem 1.35rem;
  font-weight:800; font-stretch:100%; font-size:1rem; text-decoration:none;
  color:var(--bone-hi); background:transparent;
  border:var(--line) solid var(--bone-hi);
  box-shadow:var(--drop) var(--drop) 0 rgba(0,0,0,.5);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translate(3px,3px); box-shadow:4px 4px 0 rgba(0,0,0,.5); }
.btn:active{ transform:translate(var(--drop),var(--drop)); box-shadow:0 0 0 rgba(0,0,0,.5); }
.btn--go{ background:var(--gold); border-color:#000; color:var(--ink); }

.cred{
  margin:0; display:flex; flex-wrap:wrap; gap:1.75rem;
  padding-top:1.5rem; border-top:2px solid #2A2A33;
}
.cred dt{
  font-size:.75rem; font-stretch:85%; font-weight:700;
  color:var(--muted); margin-bottom:.15rem;
}
.cred dd{
  margin:0; font-size:1.5rem; font-weight:900; font-stretch:110%;
  line-height:1; color:var(--bone-hi); letter-spacing:-.02em;
}
.cred dd span{ font-size:.8125rem; font-weight:600; font-stretch:88%; color:var(--muted); letter-spacing:0; }

/* column count by width: stickers must never read postage-stamp small */
@media (max-width:1500px){ .wall{ --wall-cols:6; } }
@media (max-width:1240px){ .wall{ --wall-cols:5; } }

/* ── the work ───────────────────────────────────────────────── */
.work{
  background:var(--ink);
  padding:clamp(3rem,7vw,6rem) var(--pad);
  max-width:var(--rail); margin-inline:auto;
}
.work__head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:1.5rem; margin-bottom:2.25rem;
}
.work__head h2{ color:var(--bone-hi); }

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  font:inherit; font-size:.9375rem; font-weight:700; font-stretch:92%;
  padding:.5rem 1rem; cursor:pointer;
  color:var(--bone); background:transparent;
  border:2px solid var(--concrete);
}
.chip:hover{ border-color:var(--bone); color:var(--bone-hi); }
.chip.is-on{ background:var(--bone-hi); border-color:var(--bone-hi); color:var(--ink); }

.grid{ column-count:4; column-gap:1.25rem; }
@media (max-width:1180px){ .grid{ column-count:3; } }
@media (max-width:800px){  .grid{ column-count:2; } }
@media (max-width:480px){  .grid{ column-count:1; } }

.card{
  width:100%; padding:0; margin:0 0 1.25rem; cursor:zoom-in;
  background:var(--ink-deep); border:var(--line) solid #000;
  box-shadow:var(--drop) var(--drop) 0 rgba(0,0,0,.6);
  break-inside:avoid; text-align:left; font:inherit; color:inherit;
  display:block; transition:transform .14s ease, box-shadow .14s ease;
}
.card:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--brick); }
.card img{ width:100%; height:auto; background:var(--concrete); }
.card figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:.75rem;
  padding:.6rem .75rem;
  font-size:.875rem; font-weight:700; font-stretch:95%; color:var(--bone-hi);
}
.card figcaption i{
  font-style:normal; font-size:.6875rem; font-stretch:82%; font-weight:700;
  color:var(--gold); white-space:nowrap;
}
.work__note{ margin:1rem 0 0; font-size:.875rem; color:var(--muted); }

/* ── rates ──────────────────────────────────────────────────── */
.rates{
  background:var(--concrete);
  border-block:var(--line) solid #000;
  padding:clamp(3rem,7vw,6rem) var(--pad);
}
.rates__in{ max-width:var(--rail); margin-inline:auto; }
.rates__in h2{ color:#fff; margin-bottom:.85rem; }
.rates__lede{ margin:0 0 2.5rem; max-width:56ch; color:#E8E4DC; }
.rates__state{
  margin:0 0 1.1rem; display:flex; align-items:center; gap:.55rem;
  font-size:.875rem; font-stretch:88%; font-weight:700;
  color:#E8E4DC;
}

.tiers{
  /* the cards drop a 7px hard shadow, so the gap has to clear that first
     before it reads as a break between the cards and the price list. */
  display:grid; gap:1.25rem; margin-bottom:clamp(2.5rem,6vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}
.tier{
  background:var(--ink); border:var(--line) solid #000;
  box-shadow:var(--drop) var(--drop) 0 rgba(0,0,0,.45);
  padding:1.5rem 1.35rem 1.35rem; display:flex; flex-direction:column;
}
.tier--wide{ background:var(--oxblood); }
.tier h3{ color:var(--bone-hi); }
.tier__price{
  margin:.4rem 0 1.1rem; font-size:3rem; font-weight:900; font-stretch:115%;
  line-height:1; letter-spacing:-.04em; color:var(--gold);
}
.tier__price span{
  display:block; font-size:.75rem; font-weight:700; font-stretch:85%;
  letter-spacing:0; color:var(--chrome); margin-bottom:.2rem;
}
.tier ul{ margin:0 0 1rem; padding:0; list-style:none; flex:1; }
.tier li{
  padding:.4rem 0 .4rem 1rem; position:relative;
  font-size:.9375rem; border-top:1px solid rgba(207,197,182,.16);
}
.tier li::before{ content:""; position:absolute; left:0; top:.95em; width:7px; height:2px; background:var(--gold); }
.tier li:first-child{ border-top:0; }
.tier__slots{
  margin:0; font-size:.75rem; font-stretch:85%; font-weight:700;
  color:var(--chrome);
}

.small{ margin:0 0 2.5rem; padding:0; list-style:none; display:grid; gap:0; }
.small{ --c1:13.5rem; --c2:4.5rem; }
.small li{
  display:grid; grid-template-columns:var(--c1) var(--c2) 1fr;
  gap:1rem; align-items:baseline;
  padding:.85rem 0; border-top:2px solid rgba(0,0,0,.3);
  color:#F2EFE9;
}
.small li:last-child{ border-bottom:2px solid rgba(0,0,0,.3); }
.small b{ font-weight:800; font-stretch:100%; }
.small span{ font-weight:900; font-stretch:112%; font-size:1.25rem; color:var(--gold); letter-spacing:-.02em; }
.small em{ font-style:normal; font-size:.875rem; color:#D5D2CB; }
@media (max-width:620px){
  .small li{ grid-template-columns:1fr auto; }
  .small span{ justify-self:end; }   /* flush right, so the prices still line up */
  .small em{ grid-column:1/-1; }
}

.rules{
  background:var(--gold); color:var(--ink);
  border:var(--line) solid #000;
  box-shadow:var(--drop) var(--drop) 0 rgba(0,0,0,.45);
  padding:1.5rem 1.5rem 1.35rem; max-width:34rem;
  transform:rotate(-1deg);
}
.rules h3{ margin-bottom:.6rem; }
.rules ul{ margin:0; padding:0; list-style:none; }
.rules li{ padding:.35rem 0; border-top:2px solid rgba(0,0,0,.22); font-weight:600; }
.rules li:first-child{ border-top:0; }

/* ── find me ────────────────────────────────────────────────── */
.find{
  background:var(--pine);
  padding:clamp(3rem,7vw,6rem) var(--pad);
  max-width:none;
}
.find h2{ color:var(--bone-hi); margin:0 auto 2rem; max-width:var(--rail); }
.places{
  margin:0 auto; padding:0; list-style:none; max-width:var(--rail);
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
.place a{
  display:block; padding:1.35rem 1.25rem; text-decoration:none;
  background:var(--ink); color:var(--bone-hi);
  border:var(--line) solid #000;
  box-shadow:var(--drop) var(--drop) 0 rgba(0,0,0,.45);
  transition:transform .12s ease, box-shadow .12s ease;
  height:100%;
}
.place a:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 rgba(0,0,0,.45); }
.place b{ display:block; font-size:1.375rem; font-weight:900; font-stretch:112%; letter-spacing:-.025em; }
.place span{ display:block; margin-top:.2rem; font-size:.875rem; color:var(--chrome); }
.place--go a{ background:var(--gold); color:var(--ink); }
.place--go span{ color:#4A3A12; }
.place--ig a{ background:var(--oxblood); }
.place--pr a{ background:var(--brick); }
.place--ko a{ background:var(--concrete); }

/* ── foot ───────────────────────────────────────────────────── */
.foot{
  background:var(--ink-deep); border-top:var(--line) solid #000;
  padding:clamp(2.5rem,5vw,4rem) var(--pad);
  text-align:center;
}
.foot > *{ max-width:var(--rail); margin-inline:auto; }
.foot p{ max-width:58ch; margin-inline:auto; color:var(--muted); font-size:.9375rem; }
.foot__c{ margin-top:1rem; font-size:.8125rem; }

/*/* ── lightbox ───────────────────────────────────────────────── */
.box{
  border:0; padding:0; max-width:100vw; max-height:100vh;
  width:100%; height:100%; color:var(--bone);
  background:rgba(10,10,13,.975);   /* also covers browsers without ::backdrop */
  overflow:hidden;
}
.box::backdrop{ background:rgba(8,8,11,.975); }
.box[open]{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; }
.box__fig{ margin:0; padding:1rem; display:grid; place-items:center; gap:.85rem; min-height:0; }
.box__fig img{
  max-width:100%; max-height:78vh; width:auto; height:auto; object-fit:contain;
  border:5px solid var(--bone-hi);
  box-shadow:12px 12px 0 rgba(0,0,0,.6);
}
.box__fig figcaption{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:baseline; justify-content:center;
  font-weight:700; font-stretch:98%; color:var(--bone-hi); text-align:center;
}
.box__fig figcaption a{ font-size:.875rem; font-weight:700; color:var(--gold); }
.box__arm, .box__x{
  font:inherit; cursor:pointer; background:transparent; color:var(--bone);
  border:2px solid transparent; line-height:1;
}
.box__arm{ font-size:3.5rem; padding:1rem .75rem; }
.box__arm:hover, .box__x:hover{ color:var(--gold); }
.box__x{
  position:absolute; top:.75rem; right:.75rem; z-index:3;
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; padding:0;        /* a real tap target */
  font-size:2rem;
  /* It floats over the artwork, so it carries its own backing rather than
     relying on whatever happens to be behind it. */
  background:rgba(10,10,13,.82);
  border-color:var(--concrete);
}
.box__x:hover{ background:var(--ink); color:var(--bone-hi); border-color:var(--bone); }
/* Below this the viewer is narrow enough that the artwork reaches up into the
   close button's corner: at 640px it came within 4px of it. Reserve the strip
   the button sits in, and give the image that height back from the bottom.
   Above it there is no contest, 327px of clearance at 1440. */
@media (max-width:900px){
  .box__fig{ padding-top:4rem; }
  .box__fig img{ max-height:64vh; }
}

@media (max-width:620px){
  .box[open]{ grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .box__arm{ font-size:2.5rem; }
  .box__arm--l{ grid-area:2/1; justify-self:start; }
  .box__arm--r{ grid-area:2/1; justify-self:end; }
  .box__fig{ grid-area:1/1; }
}

/* ── the one orchestrated moment: the wall gets pasted up ───── */
@media (prefers-reduced-motion: no-preference){
  .wall__paste img{
    opacity:0;
    /* paste in on load, then drift forever. The drift waits for the paste to
       finish, so the two never fight over transform. */
    animation:
      paste .45s cubic-bezier(.2,.9,.3,1) var(--d,0ms) forwards,
      drift var(--fd,8s) ease-in-out calc(var(--d,0ms) + 500ms + var(--fo,0s)) infinite;
  }
  @keyframes paste{
    from{ opacity:0; transform:rotate(var(--rot,0deg)) scale(1.05) translateY(-12px); }
    to{ opacity:1; }
  }
  /* a few pixels, no more: the stickers overlap by --sg, so nothing drifts
     far enough to open a gap. */
  @keyframes drift{
    0%,100%{ transform:rotate(var(--rot,0deg)) scale(1.03) translate(0,0); }
    33%    { transform:rotate(var(--rot,0deg)) scale(1.03) translate(1px,-4px); }
    66%    { transform:rotate(var(--rot,0deg)) scale(1.03) translate(-1px,2px); }
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHONES AND TABLETS
   Below 1000px the plate is as wide as the viewport, so pasting it
   over the wall hides the art entirely. The hero stacks instead: a
   real band of work on top, the plate as a solid slab underneath.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1000px){
  .wall{
    display:block; min-height:0; padding:0;
    align-items:stretch;
    --wall-cols:5; --sg:10px; --sb:5px;
  }
  .wall::before, .wall::after{ display:none; }

  .wall__paste{
    position:relative; inset:auto; z-index:0;
    height:clamp(240px, 34vh, 400px);
    overflow:hidden;
    padding:0 6px;
  }
  .wall__paste img{ box-shadow:6px 6px 0 rgba(0,0,0,.5); }
  .wall__paste::after{              /* wash + halftone over the band only */
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background-color:rgba(44,12,14,.26);
    background-image:radial-gradient(rgba(0,0,0,.30) 1px, transparent 1.3px);
    background-size:5px 5px;
  }

  .wall__plate{
    max-width:none; width:auto;
    border-inline:0; border-bottom:0; box-shadow:none;
    border-top:var(--line) solid #000;
    padding:clamp(1.75rem,7vw,2.5rem) var(--pad) clamp(2rem,8vw,3rem);
  }
  .wall__sub{ max-width:none; }
  .cred{ gap:1.25rem 2rem; }
}

@media (max-width:820px){ .wall{ --wall-cols:4; } }
@media (max-width:620px){ .wall{ --wall-cols:3; --sb:4px; } }
@media (max-width:400px){ .wall{ --wall-cols:2; } }

/* buttons go full width only once they would otherwise wrap awkwardly */
@media (max-width:520px){
  .wall__acts .btn{ flex:1 1 100%; text-align:center; }
}

/* tap targets: the strip links were 27px tall */
@media (max-width:1100px){
  .strip__in{ padding-block:0; }
  .strip__name{ display:flex; align-items:center; min-height:46px; }
  .strip__nav a{
    display:flex; align-items:center; min-height:46px;
    padding-inline:.35rem; padding-bottom:0; font-size:1rem;
    border-bottom:0; border-top:2px solid transparent;
  }
  .strip__nav a:hover{ border-top-color:var(--gold); border-bottom-color:transparent; }
}

/* two columns on a phone beats one: you can scan, then tap for detail */
@media (max-width:480px){
  .grid{ column-count:2; column-gap:.75rem; }
  .card{ margin-bottom:.75rem; box-shadow:4px 4px 0 rgba(0,0,0,.6); }
  .card figcaption{ padding:.45rem .5rem; font-size:.75rem; flex-wrap:wrap; gap:.15rem; }
  .card figcaption i{ font-size:.625rem; }
  .card:hover{ transform:none; box-shadow:4px 4px 0 rgba(0,0,0,.6); }
}
@media (max-width:330px){
  .grid{ column-count:1; }
}


/* gallery: tablets have room for three */
@media (min-width:620px) and (max-width:1180px){
  .grid{ column-count:3; }
}
@media (min-width:481px) and (max-width:619px){
  .grid{ column-count:2; }
}