/* DNA / COUTURE — shared design system for dnaclothing.com
 * Tokens and base chrome extracted from the approved landing-page style.
 * Landing page (index.html) keeps its own inline CSS so it stays byte-identical
 * to the approved version. category.html + product.html load this file.
 */

:root{
  --bg:#F2EFE8;
  --ink:#0A0A0A;
  --ink-60:rgba(10,10,10,.6);
  --ink-40:rgba(10,10,10,.4);
  --ink-10:rgba(10,10,10,.1);
  --accent:#FF2D2D;
  --rule:#0A0A0A;
  --display:"Space Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --serif:"Fraunces", Georgia, serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--display);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img,svg,video{display:block;max-width:100%}

/* ---- MARQUEE ---- */
.marquee{background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 0;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--ink)}
.marquee__track{display:inline-flex;gap:48px;animation:slide 40s linear infinite;padding-left:48px}
.marquee__track span{display:inline-flex;align-items:center;gap:14px}
.marquee__track .dot{width:4px;height:4px;background:var(--accent);border-radius:50%;display:inline-block}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---- NAV ---- */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 28px;border-bottom:1px solid var(--ink);position:sticky;top:0;background:var(--bg);z-index:30}
.nav__left,.nav__right{display:flex;gap:22px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav__right{justify-content:flex-end}
.nav__left a,.nav__right a{position:relative;padding:4px 0}
.nav__left a:hover,.nav__right a:hover{color:var(--accent)}
.nav__logo{display:flex;flex-direction:column;align-items:center;line-height:.9;text-align:center}
.nav__logo .mark{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.02em}
.nav__logo .loc{font-family:var(--mono);font-size:9px;letter-spacing:.22em;margin-top:4px;opacity:.6}
.nav__cta{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);padding:8px 14px;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;transition:background .2s,color .2s}
.nav__cta:hover{background:var(--ink);color:var(--bg)}
.nav__cta .dot{width:6px;height:6px;background:var(--accent);border-radius:50%}

/* ---- SECTION CHROME ---- */
.section{padding:60px 28px;border-bottom:1px solid var(--ink);position:relative}
.section__head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:40px;padding-bottom:36px;margin-bottom:48px;border-bottom:1px solid var(--ink)}
.section__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.section__kicker .dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
.section__title{font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,96px);line-height:.9;letter-spacing:-.03em;margin:0;text-transform:uppercase;text-align:center}
.section__title em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.015em}
.section__meta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;text-align:right;color:var(--ink-60);line-height:1.6}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;transition:all .2s ease}
.btn--solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--solid:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--line{color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--bg)}
.btn--ghost{color:var(--ink-60);border-color:var(--ink-10)}
.btn--ghost:hover{color:var(--ink);border-color:var(--ink)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* ---- PRODUCT TILE (category grid + cross-sell) ---- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.card{position:relative;background:var(--bg);aspect-ratio:3/4;overflow:hidden;display:block}
.card__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__img{transform:scale(1.04)}
.card__empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,rgba(10,10,10,.04) 0 2px,transparent 2px 10px),linear-gradient(180deg,#e3dccf,#c8bdaa);color:var(--ink-60);font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.card__badge{position:absolute;top:14px;left:14px;padding:4px 8px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.card__badge--muted{background:var(--ink-10);color:var(--ink-60)}
.card__idx{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink);mix-blend-mode:multiply}
.card__label{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);mix-blend-mode:multiply}
.card__label .price{color:var(--accent);font-weight:500}

/* ---- CATEGORY HEADER ---- */
.cathead{padding:60px 28px 40px;border-bottom:1px solid var(--ink)}
.cathead__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px;color:var(--ink-60)}
.cathead__kicker .dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
.cathead__kicker a:hover{color:var(--accent)}
.cathead__title{font-family:var(--display);font-weight:700;font-size:clamp(56px,9vw,140px);line-height:.85;letter-spacing:-.035em;margin:24px 0 0;text-transform:uppercase}
.cathead__title em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.cathead__title .acc{color:var(--accent)}
.cathead__meta{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:40px;padding-top:24px;border-top:1px solid var(--ink-10);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);flex-wrap:wrap}
.cathead__meta strong{color:var(--ink);font-weight:500}

/* ---- COLLECTIONS INDEX ---- */
.collections{padding:0 28px 60px;border-bottom:1px solid var(--ink)}
.collections__summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink);margin:0 0 32px}
.collections__summary div{background:var(--bg);padding:22px 20px}
.collections__summary strong{display:block;font-family:var(--display);font-weight:700;font-size:clamp(28px,4vw,52px);letter-spacing:-.03em}
.collections__summary span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60)}
.collections__intro{max-width:62ch;margin:0 0 36px;font-size:16px;line-height:1.6;color:var(--ink-60)}
.collections__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink)}
.collection-card{background:var(--bg);padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.collection-card::before{content:"";position:absolute;inset:auto -20% -30% 40%;height:180px;background:radial-gradient(circle,rgba(255,45,45,.12),transparent 65%);pointer-events:none}
.collection-card:hover{background:var(--ink);color:var(--bg)}
.collection-card:hover .collection-card__count,.collection-card:hover .collection-card__meta{color:rgba(242,239,232,.72)}
.collection-card:hover .collection-card__cta{color:var(--accent)}
.collection-card__eyebrow,.collection-card__meta,.collection-card__cta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.collection-card__eyebrow{color:var(--ink-60);display:flex;align-items:center;gap:10px}
.collection-card__eyebrow .dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
.collection-card__name{margin:18px 0 10px;font-family:var(--display);font-size:clamp(28px,4vw,46px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
.collection-card__name em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.collection-card__count{font-family:var(--display);font-size:18px;font-weight:500}
.collection-card__meta{color:var(--ink-60);display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.collection-card__cta{margin-top:24px;color:var(--ink)}

/* ---- SIBLING CATEGORY STRIP ---- */
.sibstrip{display:flex;gap:1px;background:var(--ink);border-bottom:1px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.sibstrip::-webkit-scrollbar{display:none}
.sibstrip a{flex:0 0 auto;background:var(--bg);padding:14px 20px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;display:flex;gap:10px;align-items:center;white-space:nowrap;transition:background .18s,color .18s}
.sibstrip a:hover{background:var(--ink);color:var(--bg)}
.sibstrip a:hover .num{color:var(--accent)}
.sibstrip a.active{background:var(--ink);color:var(--bg)}
.sibstrip a.active .num{color:var(--accent)}
.sibstrip .num{font-size:9px;opacity:.5}

/* ---- PAGINATION ---- */
.pager{display:flex;justify-content:space-between;align-items:center;padding:40px 28px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;gap:20px;flex-wrap:wrap}
.pager__stat{color:var(--ink-60)}
.pager__nav{display:flex;gap:10px}
.pager__nav a,.pager__nav span{padding:10px 14px;border:1px solid var(--ink);color:var(--ink)}
.pager__nav a:hover{background:var(--ink);color:var(--bg)}
.pager__nav .disabled{opacity:.25;pointer-events:none}
.pager__nav .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---- EMPTY / ERROR STATES ---- */
.state{padding:120px 28px;text-align:center;border-bottom:1px solid var(--ink)}
.state__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);display:inline-flex;gap:10px;align-items:center}
.state__kicker .dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
.state__title{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,64px);letter-spacing:-.03em;text-transform:uppercase;margin:20px 0 12px}
.state__title em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.state__body{font-family:var(--display);font-size:16px;line-height:1.55;max-width:52ch;margin:0 auto 28px;color:var(--ink-60)}

/* ---- PDP LAYOUT ---- */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-bottom:1px solid var(--ink);min-height:min(82vh,820px)}
.pdp__media{position:relative;overflow:hidden;background:var(--ink);border-right:1px solid var(--ink)}
.pdp__photo{position:absolute;inset:0;background-size:cover;background-position:center;filter:contrast(1.03) saturate(.95)}
.pdp__stamp{position:absolute;top:20px;left:20px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,239,232,.7);display:flex;gap:10px;align-items:center}
.pdp__stamp .sq{width:8px;height:8px;background:var(--accent)}
.pdp__empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(242,239,232,.4);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;background:repeating-linear-gradient(45deg,rgba(242,239,232,.03) 0 2px,transparent 2px 12px)}
.pdp__body{padding:60px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.pdp__crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60)}
.pdp__crumbs a:hover{color:var(--accent)}
.pdp__code{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);margin-top:16px}
.pdp__title{font-family:var(--display);font-weight:700;font-size:clamp(36px,5vw,72px);line-height:.92;letter-spacing:-.025em;margin:16px 0 20px;text-transform:uppercase}
.pdp__title em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.pdp__desc{font-family:var(--display);font-size:16px;line-height:1.55;color:var(--ink-60);max-width:48ch;margin:0 0 32px;text-wrap:pretty}
.pdp__spec{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:0 0 32px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.pdp__spec div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ink-10)}
.pdp__spec span:last-child{opacity:.6}
.pdp__spec span.price{color:var(--accent);opacity:1;font-weight:500}
.pdp__colors{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.pdp__colors span{padding:6px 12px;border:1px solid var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.pdp__ctas{display:flex;gap:10px;flex-wrap:wrap}
.pdp__note{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);margin-top:24px}

/* ---- FOOTER ---- */
footer{background:var(--ink);color:var(--bg);padding:80px 28px 28px}
.foot__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid rgba(242,239,232,.2)}
.foot__top h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin:0 0 16px;font-weight:500}
.foot__top ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-family:var(--display);font-size:15px}
.foot__top ul a:hover{color:var(--accent)}
.foot__wordmark{font-family:var(--display);font-weight:700;font-size:clamp(80px,18vw,260px);line-height:.8;letter-spacing:-.04em;text-transform:uppercase;margin-top:60px;color:transparent;-webkit-text-stroke:1px rgba(242,239,232,.5);text-align:center}
.foot__wordmark .acc{color:var(--accent);-webkit-text-stroke:0}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}

/* ---- REVEAL ---- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---- MOBILE ---- */
@media (max-width:900px){
  .nav{grid-template-columns:auto 1fr auto;padding:14px 16px}
  .nav__left,.nav__right{display:none}
  .nav__cta{display:inline-flex}
  .section{padding:40px 16px}
  .cathead{padding:40px 16px 28px}
  .cathead__title{font-size:clamp(40px,12vw,72px)}
  .collections{padding:0 16px 40px}
  .collections__summary{grid-template-columns:1fr}
  .collections__grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr}
  .pdp__media{aspect-ratio:4/5;border-right:0;border-bottom:1px solid var(--ink)}
  .pdp__body{padding:40px 16px}
  .pdp__spec{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr;gap:40px}
  .pager{padding:24px 16px;flex-direction:column;align-items:flex-start}
}