@import url("../fonts/gf.css");

/* ==========================================================================
   Zach Pennington — faithful clone
   Every value traces to a measurement of source.png (941x1672).
   Geometry is percentage-mapped (1 source px = 0.10627vw). Type is anchored
   to true CSS-pixel scale (body 17px @1920), container absorbs extra width.
   ========================================================================== */

:root{
  /* surfaces (sampled) */
  --bg:#0c0c0e;
  --nav-bg:#0a0a0b;
  --card:#101112;
  --line:#1e1e1f;
  --line-strong:#242423;
  --line-dim:#1a1a1b;

  /* ink (sampled) */
  --cream:#d9d1c7;
  --cream-2:#bcb5aa;
  --muted:#8c8880;
  --dim:#6b675f;
  --red:#7c1a15;

  /* type */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-h1:clamp(39px,6.88vw,132px);  /* Playfair has a taller cap/em than Cormorant: measured render cap 59 vs source 52 src px -> x0.881 */
  --fs-featured:clamp(30px,3.65vw,70px);
  --fs-cat:clamp(18px,1.95vw,37px);   /* MEASURED: cap was 15.2 vs source 13 src px (+17%) */
  --fs-sectitle:clamp(16px,1.51vw,29px);
  --fs-logo:clamp(15px,1.125vw,21.6px);
  --fs-wordmark:clamp(17px,1.286vw,24.7px);
  --fs-nav:clamp(12px,.9375vw,18px);
  --fs-body:clamp(14px,.885vw,17px);
  --fs-eyebrow:clamp(11px,.833vw,16px);
  --fs-label:clamp(11px,.885vw,17px);
  --fs-trust:clamp(13px,1.042vw,20px);
  --fs-meta:clamp(12px,.911vw,17.5px);

  /* geometry */
  --gutter:3.4vw;                 /* 65px @1920 -> container 93.2% (source 93%) */
  --nav-h:clamp(56px,4.9vw,94px); /* source 46px */
  --ease:cubic-bezier(.4,.16,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ul{margin:0}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--card);color:var(--cream);padding:12px 18px;border:1px solid var(--line-strong)}
.skip:focus{left:var(--gutter)}

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

/* shared bits ------------------------------------------------------------ */
.eyebrow{
  font-size:var(--fs-eyebrow);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  line-height:1;
}
.arrow{width:3.6vw;max-width:34px;height:auto;flex:none;color:currentColor}
.dot{color:var(--dim);margin:0 1.68em}  /* source shows wide gaps around the bullet separators */

/* the tonal placeholder panels — BACKDROPS §0a two-stop ramps.
   angle = source luma plane fit, stops = meanRGB -/+ (amp/2)*hue-axis,
   amp = min(1.5*src_std, no-clip). Computed by crops/gradients.py. */
.ph{background-repeat:no-repeat;background-size:cover;display:block}
.ph--hero    {background-image:linear-gradient(350deg,rgb(43,42,38) 0%,rgb(85,78,67) 100%);
              background-color:transparent;
              /* BONDED SCENE / no hard cutoff (FAITHFUL §3 + BACKDROPS §0a's sanctioned
                 "edge mask/feather ONLY where the source shows the image fading").
                 MEASURED: the source painting holds ~50-100 luma to y450 then falls
                 480:26.8 -> 540:16.3 -> 580:13.4, i.e. it dissolves BELOW the page black
                 (18.6) and the category tiles float on the continuing dark field — there is
                 no seam in the source. Fade zone y450->580 = 130 src px = 24.3% of the
                 536px hero box, so the mask holds solid to 75.6% then eases out. Smooth
                 multi-stop falloff (FAITHFUL forbids a hard `transparent 45%` stop); the
                 panel fades to reveal the page's UNIFORM --bg #0c0c0e beneath. */
              -webkit-mask-image:linear-gradient(180deg,#000 0 75.6%,rgba(0,0,0,.55) 88%,rgba(0,0,0,.18) 96%,transparent 100%);
              mask-image:linear-gradient(180deg,#000 0 75.6%,rgba(0,0,0,.55) 88%,rgba(0,0,0,.18) 96%,transparent 100%)}
.ph--cat1    {background-image:linear-gradient(326deg,rgb(20,19,19) 0%,rgb(49,46,44) 100%)}
.ph--cat2    {background-image:linear-gradient(334deg,rgb(27,25,23) 0%,rgb(72,59,49) 100%)}
.ph--cat3    {background-image:linear-gradient(326deg,rgb(20,19,19) 0%,rgb(49,44,39) 100%)}
.ph--cat4    {background-image:linear-gradient(334deg,rgb(19,19,19) 0%,rgb(47,43,40) 100%)}
.ph--prod1   {background-image:linear-gradient(266deg,rgb(64,58,51) 0%,rgb(120,108,93) 100%)}
.ph--prod2   {background-image:linear-gradient(3deg,rgb(49,42,36) 0%,rgb(91,75,61) 100%)}
.ph--prod3   {background-image:linear-gradient(306deg,rgb(51,45,39) 0%,rgb(85,73,59) 100%)}
.ph--prod4   {background-image:linear-gradient(338deg,rgb(45,37,32) 0%,rgb(101,82,66) 100%)}
.ph--featured{background-image:linear-gradient(266deg,rgb(14,15,16) 0%,rgb(43,39,37) 100%)}

/* NAV -------------------------------------------------------------------- */
.nav{background:var(--nav-bg);position:relative;z-index:20}
.nav__inner{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  padding-left:var(--gutter);
  padding-right:2.1vw;   /* source: CART ink ends x919 = 97.7% */
}
.logo{
  font-family:var(--serif);
  font-size:var(--fs-logo);
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cream);
  line-height:1;
  transition:color .3s var(--ease);
}
.logo:hover{color:#fff}

.nav__links{margin-left:auto;display:flex;gap:2.97vw}
.nav__links a{
  font-size:var(--fs-nav);
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
  line-height:1;
  transition:color .3s var(--ease);
}
.nav__links a:hover{color:var(--cream)}

.nav__utils{margin-left:3.93vw;display:flex;align-items:center;gap:2.87vw}
.nav__search{
  display:flex;align-items:center;gap:.74vw;
  font-size:var(--fs-nav);letter-spacing:.075em;text-transform:uppercase;
  color:var(--muted);font-weight:400;line-height:1;
  transition:color .3s var(--ease);
}
.nav__search .ico{width:1.1em;height:1.1em;flex:none}
.nav__search:hover,.nav__cart:hover{color:var(--cream)}
.nav__cart{
  font-size:var(--fs-nav);letter-spacing:.075em;text-transform:uppercase;
  color:var(--muted);font-weight:400;line-height:1;
  transition:color .3s var(--ease);
}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-right:-8px}
.nav__burger span{display:block;width:22px;height:1px;background:var(--cream);transition:transform .3s var(--ease),opacity .3s var(--ease)}

/* search panel */
.search{border-top:1px solid var(--line-dim);padding:1.6vw var(--gutter) 1.9vw}
.search__form{display:flex;align-items:center;gap:1.2vw;max-width:640px}
.search input{
  flex:1;background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  color:var(--cream);padding:.7em 0;font-size:var(--fs-body);font-weight:300;
  transition:border-color .3s var(--ease);
}
.search input::placeholder{color:var(--dim)}
.search input:focus{outline:0;border-bottom-color:var(--muted)}
.search__go{
  display:flex;align-items:center;gap:.8vw;color:var(--muted);
  font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease);
}
.search__go:hover{color:var(--cream)}
.search__note{margin-top:.7em;font-size:var(--fs-meta);color:var(--dim)}

/* HERO ------------------------------------------------------------------- */
/* source: media x0-456 (48.46%) FULL-BLEED left, y46-582 (h 536);
   text starts x565 = 60.04% -> body pad-left = 11.58vw */
.hero{display:grid;grid-template-columns:48.46% 1fr;align-items:center}
.hero__media{aspect-ratio:456/536;width:100%}
.hero__body{padding-left:11.58vw;padding-right:var(--gutter);padding-top:3.85vw}
/* padding-top offsets the centred block down: source text centre sits 18 src px below hero centre */

.hero__title{
  font-family:var(--serif);
  font-size:var(--fs-h1);
  font-weight:500;
  line-height:.957;            /* MEASURED: source headline line pitch 66 src px (was .9 -> 62) */
  letter-spacing:-.012em;      /* MEASURED: Playfair ran 4.5% wide vs source ink (268 vs 256 src px) */
  color:var(--cream);
  margin-top:1.57vw;           /* MEASURED src ink gap eyebrow->H1 = 22 src px (was 2.1vw -> 27) */
}
.rule-red{
  display:block;
  width:4.36vw;max-width:84px; /* source 41px */
  height:3px;
  background:var(--red);
  margin:3.30vw 0 0;           /* MEASURED src ink gap: Queen glyph-bottom y318 -> rule y339 = 21 src px = 43px @1920 */
}
.specs{margin-top:1.81vw}      /* src ink gap rule->specs = 26px */
.specs__row{
  display:grid;
  grid-template-columns:9.03vw 1fr; /* source label col offset 85px */
  align-items:baseline;
  padding-block:.66vw;         /* -> row pitch 21px source */
}
.specs dt{
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;line-height:1;
}
.specs dd{font-size:var(--fs-meta);letter-spacing:.13em;color:var(--cream-2);font-weight:400;line-height:1}

.btn{
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:2vw;
  min-width:21.5vw;                 /* source 202px */
  height:3.72vw;min-height:44px;    /* source 35px */
  padding-inline:1.91vw;            /* source 18px */
  margin-top:2.76vw;                /* src ink gap specs->btn = 26px */
  border:1px solid var(--line-strong);
  color:var(--cream-2);
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .35s var(--ease),color .35s var(--ease),background-color .35s var(--ease);
}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover{border-color:var(--muted);color:var(--cream);background:rgba(255,255,255,.02)}
.btn:hover .arrow{transform:translateX(5px)}

/* CATEGORY TILES --------------------------------------------------------- */
/* source: y583-811, 4 cols, gaps ~2px, tile 217x228 */
.cats{padding-inline:var(--gutter)}
.cats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.21vw}
.cat{position:relative;display:block;aspect-ratio:217/228;overflow:hidden}
.cat__media{position:absolute;inset:0;transition:transform .8s var(--ease)}
.cat:hover .cat__media{transform:scale(1.03)}
.cat__label{position:absolute;left:2.02vw;bottom:2.55vw;display:block}
.cat__name{
  display:inline-block;
  font-family:var(--serif);
  font-size:var(--fs-cat);
  font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--cream);line-height:1;
  /* Was transform:scaleX(.70) on Cormorant — a letterform DISTORTION (squashes every glyph
     and reads cheap). Removed with the face swap to Playfair Display, whose natural width at
     the measured cap is far closer to the source's condensed serif. Width is matched by the
     real face + tracking, never by scaling glyphs. */
}
.cat__sub{
  display:block;margin-top:.95vw;
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;line-height:1;
}
.cat__arrow{position:absolute;right:1.91vw;bottom:2.9vw;color:var(--muted);transition:transform .35s var(--ease),color .35s var(--ease)}
.cat:hover .cat__arrow{transform:translateX(5px);color:var(--cream)}

/* NEW RELEASES ----------------------------------------------------------- */
.releases{padding:5.40vw var(--gutter) 0}  /* concept-normalized: src gap 4.26vw was poster density */
.sec-head{display:flex;align-items:center;gap:2.1vw}
.sec-title{
  font-family:var(--serif);
  font-size:var(--fs-sectitle);
  font-weight:500;letter-spacing:.255em;text-transform:uppercase;
  color:var(--cream);line-height:1;white-space:nowrap;
}
.sec-rule{flex:1;height:1px;background:var(--line-strong)}
.sec-link{
  display:flex;align-items:center;gap:1.1vw;flex:none;
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
  transition:color .3s var(--ease);
}
.sec-link .arrow{transition:transform .35s var(--ease)}
.sec-link:hover{color:var(--cream)}
.sec-link:hover .arrow{transform:translateX(5px)}

.cards{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.01vw;                  /* source 9.5px */
  margin-top:2.3vw;
}
.card{position:relative}
.card__media{aspect-ratio:212/193;width:100%;transition:opacity .5s var(--ease)}
.card:hover .card__media{opacity:.86}
.card__fav{
  position:absolute;top:1.49vw;right:1.17vw;
  width:3.4vw;height:3.4vw;max-width:32px;max-height:32px;min-width:24px;min-height:24px;
  display:grid;place-items:center;color:var(--cream);
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.card__fav svg{width:100%;height:auto}
.card__fav:hover{transform:scale(1.1)}
.card__fav[aria-pressed="true"] svg path{fill:var(--red);stroke:var(--red)}
.card__title{
  margin-top:1.6vw;
  font-family:var(--sans);
  font-size:var(--fs-meta);
  font-weight:400;letter-spacing:.23em;text-transform:uppercase;
  color:var(--cream);line-height:1.45;
}
.card__title a{transition:color .3s var(--ease)}
.card__title a:hover{color:#fff}
.card__meta{margin-top:.9vw;font-size:var(--fs-meta);letter-spacing:.07em;color:var(--muted);font-weight:400;line-height:1.45}
.card__price{margin-top:1.5vw;font-size:var(--fs-meta);letter-spacing:.14em;color:var(--cream-2);font-weight:300;line-height:1.2}

.dots{display:flex;justify-content:center;gap:.92vw;margin-top:2.0vw}
.dot-btn{width:2.13vw;max-width:41px;height:2px;background:var(--line-strong);transition:background-color .3s var(--ease)}  /* src dash 20 src px */
.dot-btn:hover{background:var(--muted)}
.dot-btn.is-active{background:var(--cream-2)}

/* FEATURED --------------------------------------------------------------- */
/* source: card x31-905 y1187-1402, 1px border, fill #101112; media = right 48.05% */
.featured{padding:4.90vw var(--gutter) 0}   /* concept-normalized from src 3.82vw */
.featured__card{
  display:grid;grid-template-columns:51.95% 48.05%;
  align-items:center;
  border:1px solid var(--line);
  background:var(--card);
  overflow:hidden;
}
.featured__body{padding:5.6vw 2vw 3.4vw 6.34vw}  /* concept-normalized bottom air */
.featured__title{
  font-family:var(--serif);
  font-size:var(--fs-featured);
  font-weight:500;line-height:1;color:var(--cream);
  margin-top:1.6vw;
}
.featured__meta{margin-top:1.6vw;font-size:var(--fs-meta);letter-spacing:.07em;color:var(--muted);font-weight:400}
.featured__price{margin-top:1.06vw;font-size:var(--fs-meta);color:var(--cream-2);font-weight:400}
.featured__link{margin-top:3.4vw;display:inline-flex}
.featured__media{aspect-ratio:419/213;width:100%;align-self:stretch;height:100%}

/* TRUST ------------------------------------------------------------------ */
/* source: y1403-1491, 3 equal cols, dividers at 34.2% / 66.2% */
.trust{padding:2.86vw var(--gutter) 2.83vw}  /* concept-normalized from src 21/20 poster px */
.trust__grid{display:grid;grid-template-columns:34.2% 32% 33.8%}  /* src dividers x330,x610 */
.trust__item{
  display:flex;align-items:flex-start;justify-content:center;
  gap:2.55vw;                 /* src icon->text 23 src px */
  padding-inline:1.5vw;
}
.trust__item+.trust__item{border-left:1px solid var(--line)}
.trust__ico{width:clamp(30px,2.66vw,51px);height:auto;flex:none;color:var(--muted)}
.trust__text h3{
  font-size:var(--fs-trust);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-2);font-weight:400;line-height:1;
}
.trust__text p{margin-top:1.23vw;font-size:var(--fs-meta);letter-spacing:.05em;color:var(--muted);font-weight:400;line-height:1.8;max-width:15vw}  /* lh 1.8 = src line pitch 15 src px */  /* 288px: within [278.6,296.6] so all 3 items wrap exactly like source */

/* FOOTER ----------------------------------------------------------------- */
/* source: full-width top border y1492; bottom-bar border y1632 */
.foot{border-top:1px solid #202021}
.foot__grid{
  display:grid;
  grid-template-columns:249fr 130fr 143fr 162fr 177fr;
  gap:0;
  padding:2.75vw 4.04vw 0;   /* concept-normalized; band was 0.970 = tighter than source */
}
.foot__wordmark{
  font-family:var(--serif);
  font-size:var(--fs-wordmark);
  font-weight:500;letter-spacing:.068em;text-transform:uppercase;
  color:var(--cream);line-height:1;
}
.foot__blurb{margin-top:1.18vw;font-size:var(--fs-meta);letter-spacing:.102em;color:var(--muted);font-weight:400;line-height:1.75}  /* src blurb = 156 src px */
.social{display:flex;gap:1.6vw;margin-top:2.24vw}
.social a{display:block;color:var(--muted);transition:color .3s var(--ease)}
.social svg{width:clamp(16px,1.3vw,25px);height:auto;display:block}  /* src ~12.2 src px */
.social a:hover{color:var(--cream)}

.foot__head{
  margin-top:-.21vw;   /* Jost ink sits lower in its box than the Cormorant wordmark; source has them level */
  font-size:var(--fs-label);letter-spacing:.23em;text-transform:uppercase;
  color:var(--muted);font-weight:400;line-height:1;
}
.foot__col ul{margin-top:1.135vw;display:flex;flex-direction:column;gap:.68vw}  /* src link ink pitch 20 src px */
.foot__col a{font-size:var(--fs-meta);color:var(--dim);font-weight:400;transition:color .3s var(--ease)}
.foot__col a:hover{color:var(--cream)}
.foot__join .foot__blurb{margin-top:1.18vw;max-width:16vw}  /* force src wrap after 'early' */

.join{display:flex;align-items:center;margin-top:1.9vw;border:1px solid var(--line-strong);transition:border-color .3s var(--ease)}
.join:focus-within{border-color:var(--muted)}
.join input{
  flex:1;min-width:0;background:transparent;border:0;color:var(--cream);
  padding:.85em 1em;font-size:var(--fs-meta);font-weight:300;
}
.join input::placeholder{color:var(--dim)}
.join input:focus{outline:0}
.join button{padding:.6em 1em;color:var(--muted);display:flex;align-items:center;transition:color .3s var(--ease)}
.join button:hover{color:var(--cream)}
.join button .arrow{transition:transform .35s var(--ease)}
.join button:hover .arrow{transform:translateX(4px)}
.join__note{margin-top:.6em;font-size:var(--fs-meta);color:var(--dim)}
.join__note[data-state="err"]{color:#b4564e}

.foot__bar{
  margin:1.28vw 4.04vw 0;
  border-top:1px solid var(--line-dim);
  padding:1.95vw 0 2.45vw;   /* concept-normalized foot bar */
  display:flex;align-items:center;justify-content:space-between;gap:1.5vw;
}
.foot__bar p{font-size:var(--fs-meta);color:var(--dim);font-weight:400}
.foot__legal{display:flex;gap:2.66vw}
.foot__legal a{transition:color .3s var(--ease)}
.foot__legal a:hover{color:var(--cream)}

/* RESPONSIVE ------------------------------------------------------------- */
@media (max-width:1200px){
  :root{--gutter:4.5vw}
  /* the desktop vw max-widths exist only to reproduce the source's line breaks at 1920 */
  .trust__text p{max-width:none}
  .foot__join .foot__blurb{max-width:none}
  .nav__links{gap:2.4vw}
  .nav__utils{margin-left:2.6vw;gap:2.4vw}
  .hero{grid-template-columns:1fr}
  .hero__media{aspect-ratio:16/11}
  .hero__body{padding:6vw var(--gutter) 7vw}
  .btn{min-width:min(300px,70vw);height:auto;padding-block:1.1em;margin-top:5vw}
  .specs{margin-top:6vw}
  .specs__row{grid-template-columns:34% 1fr;padding-block:.6em}
  .rule-red{width:64px;margin-top:4vw}
  .hero__title{margin-top:3vw}
  .cats__grid{grid-template-columns:repeat(2,1fr);gap:1vw}
  .cat{aspect-ratio:1/1}
  .cat__label{left:3.4vw;bottom:3.8vw}
  .cat__sub{margin-top:1.6vw}
  .cat__arrow{right:3.4vw;bottom:4.2vw}
  .cards{grid-template-columns:repeat(2,1fr);gap:2.2vw;margin-top:3vw}
  .card__fav{top:2.4vw;right:2.4vw}
  .card__title{margin-top:2.4vw}
  .releases{padding-top:8vw}
  .featured{padding-top:8vw}
  .featured__card{grid-template-columns:1fr}
  .featured__body{padding:7vw var(--gutter) 6vw;order:2}
  .featured__media{aspect-ratio:16/9;order:1}
  .featured__link{margin-top:6vw}
  .trust{padding:8vw var(--gutter)}
  .trust__grid{grid-template-columns:1fr;gap:0}
  .trust__item{justify-content:flex-start;padding:5vw 0;gap:4vw}
  .trust__item+.trust__item{border-left:0;border-top:1px solid var(--line)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:7vw 4vw;padding-top:8vw}
  .foot__brand{grid-column:1/-1}
  .foot__join{grid-column:1/-1}
  .social{margin-top:5vw;gap:4vw}
  .foot__col ul{margin-top:4vw;gap:2.6vw}
  .foot__bar{margin-top:8vw;padding:5vw 0 6vw;flex-direction:column;align-items:flex-start;gap:2vw}
  .foot__legal{gap:6vw}
  .dots{margin-top:5vw;gap:2vw}
  .dot-btn{max-width:22px}
}

@media (max-width:760px){
  :root{--gutter:6vw}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto;
    margin:0;
    flex-direction:column;gap:0;
    background:var(--nav-bg);
    border-top:1px solid var(--line-dim);
    padding:2vw 0 4vw;
    transform:translateY(-8px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
    z-index:30;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .nav__links a{padding:4.5vw var(--gutter);font-size:15px;border-bottom:1px solid var(--line-dim)}
  .nav__utils{margin-left:auto;gap:5vw}
  .logo{font-size:13px;letter-spacing:.14em;white-space:nowrap}
  .nav__cart{white-space:nowrap}
  .nav__search span{display:none}
  .nav__search .ico{width:20px;height:20px}
  .nav__burger{display:flex}
  .nav__burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav__burger.is-open span:nth-child(2){opacity:0}
  .nav__burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .search__form{flex-direction:column;align-items:stretch;gap:3vw}
  .search__go{justify-content:center;padding:3vw 0;border:1px solid var(--line-strong)}
  .hero__media{aspect-ratio:4/3}
  .hero__title{line-height:.95}
  .cats__grid{grid-template-columns:1fr;gap:2.4vw}
  .cat{aspect-ratio:3/2}
  .cards{grid-template-columns:1fr;gap:7vw}
  .card__media{aspect-ratio:4/3}
  .card__fav{top:3.4vw;right:3.4vw}
  .sec-head{gap:4vw}
  .sec-rule{display:none}
  .sec-link{margin-left:auto}
  .foot__grid{grid-template-columns:1fr;gap:9vw}
  .trust__text p{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}  letter-spacing:-.015em;