/* Marcellekes: flat colour blocks, big Bowlby type, photos in rounded cards.
   Sizes follow the Figma frames: desktop 1440 wide, mobile 390 wide.
   Every size is "design px × --px", so the page scales like the design. */
@font-face { font-family: "Bowlby One"; src: url("fonts/bowlby-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Serif Text"; src: url("fonts/dm-serif-text.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Text"; src: url("fonts/dm-serif-text-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --red: #e2382b;
  --cream: #f4f1ea;
  --pink: #f28db2;
  --blue: #3d8fd8;
  --ink: #1a1a1a;
  --display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --serif: "DM Serif Text", Georgia, "Times New Roman", serif;
  --px: calc(min(100vw, 1680px) / 1440);
  --gutter: max(16px, calc(40 * var(--px)));
  --radius: calc(24 * var(--px));
  color-scheme: light;
}
@media (max-width: 899px) {
  :root { --px: calc(min(100vw, 560px) / 390); --gutter: max(16px, calc(20 * var(--px))); --radius: calc(18 * var(--px)); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--red);
  font-family: var(--serif);
  font-size: 16px;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.display { font-family: var(--display); font-weight: 400; line-height: .92; text-transform: uppercase; margin: 0; text-wrap: balance; }
.label { font-family: var(--display); font-size: max(11px, calc(14 * var(--px))); line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.italic { font-style: italic; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); text-transform: uppercase;
  font-size: max(12px, calc(16 * var(--px)));
  padding: calc(18 * var(--px)) calc(32 * var(--px));
  border-radius: 999px; line-height: 1; white-space: nowrap;
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), background-color .2s, color .2s;
}
.btn:hover { transform: scale(1.05) rotate(-1.5deg); }
.btn:active { transform: scale(.97); }
.btn--cream { background: var(--cream); color: var(--red); }
.btn--red { background: var(--red); color: var(--cream); }
.btn--pink { background: var(--pink); color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream); }
.btn--block { width: 100%; }

/* Header */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 20; color: var(--cream); pointer-events: none; }
.nav a, .nav button { pointer-events: auto; }
.nav--red { color: var(--red); }
.nav__logo { position: absolute; left: var(--gutter); top: calc(28 * var(--px)); font-family: var(--display); font-size: calc(34 * var(--px)); line-height: 1.4; display: inline-block; }
.nav__logo.wiggle { animation: wiggle .6s ease; }
@keyframes wiggle { 20% { transform: rotate(-14deg) } 40% { transform: rotate(10deg) } 60% { transform: rotate(-6deg) } 80% { transform: rotate(3deg) } }
.nav__cart { position: absolute; right: var(--gutter); top: calc(36 * var(--px)); }
.nav__menu { position: absolute; right: var(--gutter); top: calc(64 * var(--px)); list-style: none; margin: 0; padding: 0; text-align: right; display: grid; gap: 1px; }
.nav--home .nav__menu { top: calc(430 * var(--px)); }
.nav__menu a, .nav__cart { font-family: var(--display); font-size: max(11px, calc(14 * var(--px))); line-height: 1.05; text-transform: uppercase; }
.nav__menu a:hover, .nav__cart:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav__burger { display: none; }

.overlay-menu { position: fixed; inset: 0; z-index: 60; background: var(--red); color: var(--cream); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: var(--gutter); }
.overlay-menu a { font-family: var(--display); font-size: 48px; line-height: 1; text-transform: uppercase; }
.overlay-menu__close { position: absolute; top: 18px; right: var(--gutter); font-family: var(--display); font-size: 24px; color: var(--cream); }

/* Ticker */
.ticker { background: var(--red); color: var(--cream); overflow: hidden; height: calc(72 * var(--px)); display: flex; align-items: center; }
.ticker__track { display: flex; flex: none; white-space: nowrap; animation: ticker 28s linear infinite; }
.ticker__track span { font-family: var(--display); font-size: calc(26 * var(--px)); text-transform: uppercase; padding-right: .6em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Footer */
.footer { background: var(--red); color: var(--cream); padding: calc(40 * var(--px)) var(--gutter) calc(20 * var(--px)); position: relative; overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; gap: 16px; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.footer__links a { font-family: var(--display); font-size: max(11px, calc(14 * var(--px))); text-transform: uppercase; }
.footer__links a:hover { text-decoration: underline; }
.footer__est { text-align: right; }
.footer__word { font-family: var(--display); font-size: calc(168 * var(--px)); line-height: 1; margin: calc(60 * var(--px)) 0 0; white-space: nowrap; text-align: center; }

/* ---------- HOME ---------- */
.hero { position: relative; height: calc(900 * var(--px)); overflow: hidden; background: var(--red); color: var(--cream); }
.hero__img { position: absolute; left: calc(-40 * var(--px)); top: calc(-64 * var(--px)); width: calc(1516 * var(--px)); height: calc(1306 * var(--px)); object-fit: cover; max-width: none; }
.hero__img--mobile { display: none; }
.hero__word { position: absolute; left: calc(26 * var(--px)); top: calc(96 * var(--px)); font-size: calc(172 * var(--px)); line-height: .9; white-space: nowrap; }
.hero__word span { display: inline-block; }
.hero__tag { position: absolute; left: var(--gutter); top: calc(266 * var(--px)); font-size: calc(40 * var(--px)); }
.hero__made { position: absolute; left: var(--gutter); bottom: calc(76 * var(--px)); }
.hero__date { position: absolute; right: var(--gutter); bottom: calc(32 * var(--px)); text-align: right; display: grid; justify-items: end; gap: calc(4 * var(--px)); }
.hero__date strong { font-family: var(--display); font-weight: 400; font-size: calc(88 * var(--px)); line-height: 1; }
.hero__cta { display: none; }

.product { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--px)); padding: var(--gutter); }
.product__rib { border-radius: var(--radius); overflow: hidden; height: calc(680 * var(--px)); }
.product__rib img { width: 100%; height: 100%; object-fit: cover; }
.product__card { position: relative; background: var(--blue); color: var(--cream); border-radius: var(--radius); height: calc(680 * var(--px)); padding: calc(48 * var(--px)); display: flex; flex-direction: column; justify-content: flex-end; }
.product__shot { position: absolute; left: 50%; top: calc(50 * var(--px)); width: calc(320 * var(--px)); height: calc(420 * var(--px)); transform: translateX(-50%); border-radius: calc(16 * var(--px)); overflow: hidden; }
.product__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .6s ease; }
.product__shot .alt { opacity: 0; transform: scale(1.06); }
.product__card:hover .product__shot .alt, .product__card:focus-within .product__shot .alt { opacity: 1; transform: scale(1); }
.product__title { font-size: calc(56 * var(--px)); }
.product__line { font-size: calc(26 * var(--px)); margin: calc(4 * var(--px)) 0 calc(16 * var(--px)); }
.product__card .btn { align-self: flex-start; }

.soft { position: relative; background: var(--red); height: calc(900 * var(--px)); overflow: hidden; }
.soft__word, .soft__outline { position: absolute; left: 50%; top: calc(60 * var(--px)); transform: translateX(-50%); font-size: calc(330 * var(--px)); line-height: .86; white-space: nowrap; text-align: center; color: transparent; }
.soft__outline { -webkit-text-stroke: max(1.5px, calc(4 * var(--px))) var(--cream); z-index: 3; pointer-events: none; }
.soft__photo { position: absolute; left: calc(440 * var(--px)); top: calc(100 * var(--px)); width: calc(560 * var(--px)); height: calc(700 * var(--px)); border-radius: var(--radius); overflow: hidden; z-index: 2; }
.soft__photo img { width: 100%; height: 100%; object-fit: cover; }
.soft__quote { position: absolute; right: var(--gutter); top: calc(700 * var(--px)); width: calc(340 * var(--px)); color: var(--pink); font-size: calc(30 * var(--px)); line-height: 1.25; z-index: 4; margin: 0; }

.men { padding: calc(60 * var(--px)) 0 calc(80 * var(--px)); }
.men__head { padding: 0 var(--gutter); }
.men__title { font-size: calc(96 * var(--px)); }
.men__sub { font-size: calc(28 * var(--px)); margin: calc(8 * var(--px)) 0 0; }
.men__row { display: flex; gap: calc(24 * var(--px)); overflow-x: auto; scroll-snap-type: x mandatory; padding: calc(40 * var(--px)) var(--gutter) 8px; scrollbar-width: none; cursor: grab; }
.men__row::-webkit-scrollbar { display: none; }
.man { flex: none; width: calc(400 * var(--px)); scroll-snap-align: start; margin: 0; }
.man__img { border-radius: var(--radius); overflow: hidden; height: calc(500 * var(--px)); }
.man__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; pointer-events: none; }
.man:hover .man__img img { transform: scale(1.04); }
.man h3 { font-family: var(--display); font-weight: 400; font-size: calc(28 * var(--px)); margin: calc(20 * var(--px)) 0 0; line-height: 1.2; }
.man p { font-style: italic; font-size: calc(20 * var(--px)); margin: calc(2 * var(--px)) 0 0; }

.cause { background: var(--red); color: var(--cream); padding: calc(152 * var(--px)) var(--gutter) var(--gutter); }
.cause__row { display: grid; grid-template-columns: calc(720 * var(--px)) 1fr; align-items: start; }
.cause__num { font-family: var(--display); font-size: calc(360 * var(--px)); line-height: .9; }
.cause__text { font-size: calc(40 * var(--px)); line-height: 1.2; font-style: italic; max-width: calc(432 * var(--px)); margin: calc(28 * var(--px)) 0 calc(96 * var(--px)); }
.waitlist { position: relative; margin-top: calc(160 * var(--px)); border-radius: var(--radius); overflow: hidden; height: calc(728 * var(--px)); padding: calc(120 * var(--px)) calc(40 * var(--px)) 0; background: var(--blue); }
.waitlist__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.waitlist > *:not(.waitlist__img) { position: relative; }
.waitlist__title { font-size: calc(80 * var(--px)); }
.waitlist__form { display: flex; gap: calc(16 * var(--px)); margin-top: calc(138 * var(--px)); flex-wrap: wrap; }
.waitlist__form input { width: calc(460 * var(--px)); min-width: 0; height: calc(64 * var(--px)); border-radius: 999px; border: 0; background: var(--cream); color: var(--ink); padding: 0 calc(32 * var(--px)); font: italic max(15px, calc(20 * var(--px))) var(--serif); }
.waitlist__form input::placeholder { color: #9a9a9a; }
.waitlist__note { font-style: italic; font-size: max(13px, calc(20 * var(--px))); margin: calc(26 * var(--px)) 0 0; }
.waitlist__done { font-family: var(--display); font-size: calc(28 * var(--px)); margin: calc(138 * var(--px)) 0 0; text-transform: uppercase; }

/* ---------- ABOUT ---------- */
.ahero { position: relative; background: var(--red); color: var(--cream); height: calc(820 * var(--px)); }
.ahero__title { position: absolute; left: var(--gutter); top: calc(200 * var(--px)); font-size: calc(94 * var(--px)); }
.ahero__sub { position: absolute; left: var(--gutter); top: calc(700 * var(--px)); font-style: italic; font-size: calc(24 * var(--px)); margin: 0; }
.ahero__img { position: absolute; right: 0; top: 0; width: calc(540 * var(--px)); height: 100%; object-fit: cover; }

.section { padding: calc(80 * var(--px)) var(--gutter); position: relative; }
.name { display: grid; grid-template-columns: calc(770 * var(--px)) 1fr; gap: 0; }
.name__big { font-size: calc(56 * var(--px)); line-height: 1.15; margin: calc(18 * var(--px)) 0 0; }
.name__big em { font-style: normal; color: var(--ink); }
.name__small { font-style: italic; color: var(--ink); font-size: calc(26 * var(--px)); line-height: 1.35; max-width: calc(640 * var(--px)); margin: calc(120 * var(--px)) 0 0; }
.name__img { justify-self: end; width: calc(380 * var(--px)); height: calc(540 * var(--px)); border-radius: var(--radius); object-fit: cover; }

.why { background: var(--pink); padding-bottom: calc(120 * var(--px)); }
.why__title { font-size: calc(110 * var(--px)); margin-top: calc(18 * var(--px)); }
.why__title .c { color: var(--cream); }
.why__cols { display: grid; grid-template-columns: calc(620 * var(--px)) calc(600 * var(--px)); gap: calc(100 * var(--px)); margin-top: calc(100 * var(--px)); }
.why__cols p { font-size: calc(26 * var(--px)); line-height: 1.38; margin: 0; }
.why__cols p:first-child { color: var(--cream); }
.why__cols p:last-child { font-style: italic; }

.what { background: var(--blue); color: var(--cream); padding-bottom: calc(110 * var(--px)); }
.what__row { display: grid; grid-template-columns: calc(680 * var(--px)) 1fr; align-items: center; }
.what__num { font-family: var(--display); font-size: calc(300 * var(--px)); line-height: .9; }
.what__text { font-style: italic; font-size: calc(32 * var(--px)); line-height: 1.3; margin: 0; max-width: calc(640 * var(--px)); }

.kind { position: relative; color: var(--cream); height: calc(900 * var(--px)); overflow: hidden; }
.kind__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.kind > *:not(.kind__img) { position: relative; }
.kind__body { font-size: calc(38 * var(--px)); line-height: 1.3; max-width: calc(776 * var(--px)); margin: calc(100 * var(--px)) 0 0; }
.kind__body span { transition: opacity .3s; }

.cta { background: var(--pink); color: var(--cream); padding: calc(100 * var(--px)) var(--gutter) calc(75 * var(--px)); }
.cta__title { font-size: calc(120 * var(--px)); }
.cta__btns { display: flex; gap: calc(28 * var(--px)); margin-top: calc(64 * var(--px)); flex-wrap: wrap; }

/* ---------- SHOP ---------- */
.shop { display: grid; grid-template-columns: calc(640 * var(--px)) calc(312 * var(--px)) 1fr; gap: calc(16 * var(--px)); padding: calc(160 * var(--px)) var(--gutter) 0; }
.gallery { display: contents; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.gallery .g1 { grid-column: 1; grid-row: 1 / span 2; height: calc(840 * var(--px)); }
.gallery .g2 { grid-column: 2; grid-row: 1; height: calc(412 * var(--px)); }
.gallery .g3 { grid-column: 2; grid-row: 2; height: calc(412 * var(--px)); }
.dots { display: none; }
.info { grid-column: 3; grid-row: 1 / span 2; padding-left: calc(24 * var(--px)); padding-top: calc(10 * var(--px)); }
.info__title { font-size: calc(50 * var(--px)); margin-top: calc(12 * var(--px)); }
.info__price { font-family: var(--display); font-size: calc(40 * var(--px)); margin: calc(56 * var(--px)) 0 0; }
.info__desc { font-style: italic; font-size: calc(22 * var(--px)); line-height: 1.3; margin: calc(4 * var(--px)) 0 0; }
.sizes { border: 0; padding: 0; margin: calc(40 * var(--px)) 0 0; }
.sizes legend { padding: 0; }
.sizes__row { display: flex; gap: calc(12 * var(--px)); margin-top: calc(8 * var(--px)); }
.sizes input { position: absolute; opacity: 0; pointer-events: none; }
.sizes label { width: max(40px, calc(56 * var(--px))); height: max(40px, calc(56 * var(--px))); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--red); display: grid; place-items: center; font-family: var(--display); font-size: max(12px, calc(16 * var(--px))); cursor: pointer; transition: background .2s, color .2s; }
.sizes input:checked + label { background: var(--red); color: var(--cream); }
.sizes input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.info__guide { display: inline-block; font-style: italic; font-size: max(13px, calc(16 * var(--px))); margin-top: calc(14 * var(--px)); text-decoration: underline; text-underline-offset: 3px; }
.info__add { margin-top: calc(30 * var(--px)); }
.note { background: var(--pink); border-radius: calc(16 * var(--px)); padding: calc(18 * var(--px)) calc(20 * var(--px)); font-style: italic; font-size: max(14px, calc(18 * var(--px))); line-height: 1.3; margin: calc(24 * var(--px)) 0 0; }
.acc { margin-top: calc(34 * var(--px)); }
.acc details { border-top: 2px solid var(--red); padding: calc(18 * var(--px)) 0; }
.acc summary { list-style: none; display: flex; justify-content: space-between; cursor: pointer; font-family: var(--display); font-size: max(12px, calc(14 * var(--px))); text-transform: uppercase; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.4em; line-height: .8; transition: transform .25s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc p { margin: calc(10 * var(--px)) 0 0; color: var(--ink); font-style: italic; font-size: max(14px, calc(16 * var(--px))); }
.worn { padding: calc(60 * var(--px)) var(--gutter) calc(80 * var(--px)); }
.worn__title { font-size: calc(72 * var(--px)); }
.worn__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--px)); margin-top: calc(24 * var(--px)); }
.worn__row img { width: 100%; height: calc(440 * var(--px)); object-fit: cover; border-radius: var(--radius); }

/* ---------- CART DRAWER ---------- */
.cart { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
.cart.is-open { visibility: visible; }
.cart__shade { position: absolute; inset: 0; background: rgba(26,26,26,.55); opacity: 0; transition: opacity .35s; }
.cart.is-open .cart__shade { opacity: 1; }
.cart__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(480px, 100vw); background: var(--cream); color: var(--red); padding: calc(40px + env(safe-area-inset-top, 0px)) 40px calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.cart.is-open .cart__panel { transform: none; }
.cart__head { display: flex; justify-content: space-between; align-items: center; }
.cart__head h2 { font-size: 32px; }
.cart__close { font-family: var(--display); font-size: 22px; color: var(--red); }
.cart__item { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; margin-top: 30px; padding-bottom: 30px; border-bottom: 2px solid var(--red); }
.cart__item img { width: 110px; height: 140px; object-fit: cover; border-radius: 12px; }
.cart__item h3 { font-family: var(--display); font-weight: 400; font-size: 18px; margin: 4px 0 0; }
.cart__item .size { font-style: italic; color: var(--ink); margin: 4px 0 0; }
.qty { display: flex; align-items: center; gap: 14px; margin-top: 40px; font-family: var(--display); }
.qty button { font-family: var(--display); color: var(--red); font-size: 18px; width: 24px; }
.cart__price { font-family: var(--display); font-size: 18px; }
.cart__empty { font-style: italic; color: var(--ink); margin-top: 30px; }
.cart__foot { margin-top: auto; }
.cart__sub { display: flex; justify-content: space-between; font-family: var(--display); font-size: 16px; }
.cart__ship { font-style: italic; color: var(--ink); font-size: 14px; margin: 6px 0 24px; }
.cart__msg { font-style: italic; color: var(--ink); font-size: 14px; margin: 12px 0 0; text-align: center; }

/* ---------- MOBILE ---------- */
@media (max-width: 899px) {
  .nav__logo { left: var(--gutter); top: calc(18 * var(--px)); font-size: calc(26 * var(--px)); }
  .nav__menu, .nav__cart { display: none; }
  .nav__burger { display: flex; gap: 10px; align-items: center; position: absolute; right: var(--gutter); top: calc(22 * var(--px)); font-family: var(--display); font-size: 13px; color: inherit; }
  .nav__burger svg { width: 22px; height: 16px; }

  .ticker { height: calc(48 * var(--px)); }
  .ticker__track span { font-size: calc(16 * var(--px)); }

  .footer { padding: calc(28 * var(--px)) var(--gutter) calc(16 * var(--px)); }
  .footer__links a, .footer__est { font-size: 12px; }
  .footer__word { font-size: calc(43 * var(--px)); margin-top: calc(36 * var(--px)); text-align: left; }

  .hero { height: calc(760 * var(--px)); }
  .hero__img { display: none; }
  .hero__img--mobile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .hero__word { left: var(--gutter); right: var(--gutter); top: calc(143 * var(--px)); font-size: calc(43 * var(--px)); text-align: center; }
  .hero__tag { left: 0; right: 0; top: calc(192 * var(--px)); text-align: center; font-size: calc(10 * var(--px)); }
  .hero__tag br { display: none; }
  .hero__made, .hero__date { display: none; }
  .hero__cta { display: flex; position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(72 * var(--px)); background: rgba(226,56,43,.74); color: var(--cream); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: calc(20 * var(--px)); }

  .product { grid-template-columns: 1fr; gap: calc(14 * var(--px)); padding: 0 var(--gutter) calc(48 * var(--px)); margin-top: var(--gutter); }
  .product__card { order: -1; height: calc(370 * var(--px)); padding: calc(20 * var(--px)); }
  .product__shot { top: calc(20 * var(--px)); width: calc(200 * var(--px)); height: calc(220 * var(--px)); border-radius: calc(12 * var(--px)); }
  .product__title { font-size: calc(28 * var(--px)); }
  .product__line { font-size: calc(18 * var(--px)); margin: 0; }
  .product__card .btn { position: absolute; right: calc(10 * var(--px)); bottom: calc(13 * var(--px)); padding: calc(11 * var(--px)) calc(15 * var(--px)); font-size: calc(14 * var(--px)); }
  .product__rib { height: calc(191 * var(--px)); }

  .soft { height: auto; padding: calc(30 * var(--px)) 0 calc(56 * var(--px)); }
  .soft__word { display: none; }
  .soft__outline { position: relative; left: auto; top: auto; transform: none; display: block; font-size: calc(114 * var(--px)); -webkit-text-stroke: 2px var(--cream); }
  .soft__photo { position: relative; left: auto; top: auto; width: calc(280 * var(--px)); height: calc(340 * var(--px)); margin: calc(-100 * var(--px)) auto 0; }
  .soft__quote { position: relative; right: auto; top: auto; width: auto; padding: calc(24 * var(--px)) var(--gutter) 0; font-size: calc(20 * var(--px)); }

  .men { padding: calc(30 * var(--px)) 0 calc(40 * var(--px)); }
  .men__title { font-size: calc(52 * var(--px)); }
  .men__sub { font-size: calc(18 * var(--px)); margin-top: 0; }
  .men__row { gap: calc(12 * var(--px)); padding-top: calc(20 * var(--px)); }
  .man { width: calc(260 * var(--px)); }
  .man__img { height: calc(320 * var(--px)); }
  .man h3 { font-size: calc(18 * var(--px)); margin-top: calc(14 * var(--px)); }
  .man p { font-size: calc(15 * var(--px)); }

  .cause { padding: calc(20 * var(--px)) var(--gutter) calc(24 * var(--px)); }
  .cause__row { grid-template-columns: 1fr; }
  .cause__num { font-size: calc(170 * var(--px)); }
  .cause__text { font-size: calc(24 * var(--px)); max-width: none; margin: calc(30 * var(--px)) 0 calc(40 * var(--px)); }
  .cause .btn { width: 100%; }
  .waitlist { margin-top: calc(40 * var(--px)); height: auto; padding: calc(400 * var(--px)) calc(20 * var(--px)) calc(24 * var(--px)); }
  .waitlist__img { height: calc(560 * var(--px)); object-position: 30% 0; }
  .waitlist::before { content: ""; position: absolute; left: 0; right: 0; top: calc(265 * var(--px)); height: calc(300 * var(--px)); background: linear-gradient(to bottom, rgba(61,143,216,0), var(--blue) 70%); z-index: 1; }
  .waitlist > *:not(.waitlist__img) { z-index: 2; }
  .waitlist__title { font-size: calc(38 * var(--px)); }
  .waitlist__form { flex-direction: column; gap: calc(12 * var(--px)); margin-top: calc(34 * var(--px)); }
  .waitlist__form input { width: 100%; height: calc(56 * var(--px)); padding: 0 calc(24 * var(--px)); }
  .waitlist__form .btn { width: 100%; }
  .waitlist__note { font-size: 15px; margin-top: calc(18 * var(--px)); }
  .waitlist__done { font-size: calc(22 * var(--px)); margin-top: calc(34 * var(--px)); }

  .ahero { height: auto; padding-bottom: calc(40 * var(--px)); }
  .ahero__img { position: relative; width: 100%; height: calc(460 * var(--px)); }
  .ahero__title { position: relative; left: auto; top: auto; padding: calc(30 * var(--px)) var(--gutter) 0; font-size: calc(47 * var(--px)); }
  .ahero__sub { position: relative; left: auto; top: auto; padding: calc(100 * var(--px)) var(--gutter) 0; font-size: calc(18 * var(--px)); }

  .section { padding: calc(48 * var(--px)) var(--gutter); }
  .name { grid-template-columns: 1fr; }
  .name__big { font-size: calc(31 * var(--px)); }
  .name__small { font-size: calc(18 * var(--px)); margin-top: calc(28 * var(--px)); }
  .name__img { justify-self: stretch; width: 100%; height: calc(440 * var(--px)); margin-top: calc(36 * var(--px)); }
  .why { padding-bottom: calc(56 * var(--px)); }
  .why__title { font-size: calc(48 * var(--px)); }
  .why__cols { grid-template-columns: 1fr; gap: calc(20 * var(--px)); margin-top: calc(28 * var(--px)); }
  .why__cols p { font-size: calc(18 * var(--px)); }
  .what { padding-bottom: calc(56 * var(--px)); }
  .what__row { grid-template-columns: 1fr; }
  .what__num { font-size: calc(170 * var(--px)); }
  .what__text { font-size: calc(24 * var(--px)); margin-top: calc(10 * var(--px)); }
  .kind { height: auto; background: #577fb1; padding-bottom: calc(544 * var(--px)); }
  .kind__img { top: auto; bottom: 0; height: calc(520 * var(--px)); object-position: 50% 0; }
  .kind__body { font-size: calc(24 * var(--px)); margin-top: calc(14 * var(--px)); }
  .cta { padding: calc(56 * var(--px)) var(--gutter) calc(44 * var(--px)); }
  .cta__title { font-size: calc(54 * var(--px)); }
  .cta__btns { flex-direction: column; gap: calc(12 * var(--px)); margin-top: calc(36 * var(--px)); }
  .cta__btns .btn { width: 100%; padding: calc(22 * var(--px)); }

  .shop { display: block; padding: calc(74 * var(--px)) 0 0; }
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: calc(12 * var(--px)); padding: 0 var(--gutter); scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery img { flex: none; width: calc(100vw - 2 * var(--gutter)); height: calc(460 * var(--px)); scroll-snap-align: center; border-radius: var(--radius); }
  .gallery .g1, .gallery .g2, .gallery .g3 { height: calc(460 * var(--px)); }
  .dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); transition: background .2s; }
  .dots span.on { background: var(--red); }
  .info { padding: calc(28 * var(--px)) var(--gutter) 0; }
  .info__title { font-size: calc(40 * var(--px)); }
  .info__price { font-size: calc(30 * var(--px)); margin-top: calc(18 * var(--px)); }
  .info__desc { font-size: calc(18 * var(--px)); }
  .sizes__row { gap: calc(12 * var(--px)); }
  .sizes label { width: calc(56 * var(--px)); height: calc(56 * var(--px)); }
  .worn { padding: calc(56 * var(--px)) 0 calc(40 * var(--px)); }
  .worn__title { font-size: calc(40 * var(--px)); padding: 0 var(--gutter); }
  .worn__row { display: flex; overflow-x: auto; gap: calc(12 * var(--px)); padding: 0 var(--gutter); scrollbar-width: none; }
  .worn__row::-webkit-scrollbar { display: none; }
  .worn__row img { flex: none; width: calc(260 * var(--px)); height: calc(320 * var(--px)); }

  .cart__panel { padding-left: 20px; padding-right: 20px; }
  .cart__item { grid-template-columns: 96px 1fr auto; gap: 14px; }
  .cart__item img { width: 96px; height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Figma exports: transparent shirt sits on the blue card, wide photos keep the man in frame */
.product__shot img:first-child { object-fit: contain; }
.kind__img { object-position: 80% 50%; }
@media (max-width: 899px) {
  .kind__img { object-position: 82% 0; }
  .waitlist__img { object-position: 82% 0; }
}

/* fixes after first test */
.cause__num, .what__num { margin: 0; }
@media (max-width: 899px) {
  .soft { display: flex; flex-direction: column; }
  .soft__outline { order: -1; }
}
@media (max-width: 899px) { .soft__quote { padding-top: calc(56 * var(--px)); } }

/* round 2: product card fits its box, quote is product info */
.product__card { container-type: inline-size; }
.product__title { font-size: min(calc(56 * var(--px)), 9.2cqi); }
.product__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(12 * var(--px)) calc(20 * var(--px)); margin-top: calc(6 * var(--px)); }
.product__line { margin: 0; font-size: min(calc(26 * var(--px)), 4.6cqi); }
.product__card .btn { align-self: auto; }
.product__shot img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.product__card:hover .product__shot img { transform: translateY(-8px) rotate(-1.5deg); }
.soft__quote { top: calc(560 * var(--px)); width: calc(330 * var(--px)); font-size: calc(26 * var(--px)); line-height: 1.3; }
@media (max-width: 899px) {
  .product__card .btn { position: static; padding: calc(12 * var(--px)) calc(18 * var(--px)); font-size: calc(13 * var(--px)); }
  .product__title { font-size: min(calc(28 * var(--px)), 9.2cqi); }
  .product__line { font-size: min(calc(17 * var(--px)), 5.2cqi); }
  .soft__quote { top: auto; width: auto; font-size: calc(19 * var(--px)); }
}
.men__row { scroll-snap-type: none !important; }
@media (min-width: 900px) { .soft__quote { top: calc(680 * var(--px)); } }

/* round 4: hero as in Figma, wordmark slides left to right behind grandpa and grandson */
@media (min-width: 900px) {
  .hero__img, .hero__cutout { left: calc(-32 * var(--px)); top: calc(-6 * var(--px)); width: calc(1472 * var(--px)); height: calc(986 * var(--px)); object-fit: cover; }
  .hero__word { left: 0; right: 0; top: calc(96 * var(--px)); overflow: hidden; }
  .hero__word .hero__track { display: flex; width: max-content; animation: ticker-right 26s linear infinite; }
  .hero__word .hero__track span { display: block; }
  .hero__tag { top: calc(266 * var(--px)); font-size: calc(20 * var(--px)); }
  .hero__made { top: calc(749 * var(--px)); bottom: auto; }
}
@keyframes ticker-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 899px) {
  .hero__cutout { display: none; }
  .hero__word .hero__track span + span { display: none; }
}
@media (max-width: 899px) { .hero__cta { box-shadow: inset 0 0 0 1px var(--cream); } }
/* desktop hero pre-order, as sketched in Figma, right edge on the 40px margin */
@media (min-width: 900px) {
  .hero__cta { display: flex; position: absolute; right: var(--gutter); top: calc(575 * var(--px)); width: calc(350 * var(--px)); height: calc(65 * var(--px)); padding: 0; background: var(--pink); color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream); font-size: max(12px, calc(14 * var(--px))); z-index: 5; }
}
/* round 5: Figma update, wordmark and tagline lower, Antwerp label above the date */
@media (min-width: 900px) {
  .hero__word { top: calc(166 * var(--px)); }
  .hero__tag { top: calc(389 * var(--px)); }
  .hero__made { left: auto; right: var(--gutter); top: calc(659 * var(--px)); text-align: right; }
  .hero__cta { top: calc(363 * var(--px)); width: calc(368 * var(--px)); font-size: calc(20 * var(--px)); }
  .nav--home .nav__menu { top: calc(452 * var(--px)); }
}
@media (max-width: 899px) {
  .hero__cta { background: var(--pink); }
}
/* round 6: hamburger menu on desktop too, same as mobile */
.nav__menu, .nav__cart { display: none !important; }
@media (min-width: 900px) {
  .nav__burger { display: flex; gap: 12px; align-items: center; position: absolute; right: var(--gutter); top: calc(36 * var(--px)); font-family: var(--display); font-size: max(13px, calc(16 * var(--px))); color: inherit; }
  .nav__burger svg { width: calc(26 * var(--px)); height: calc(19 * var(--px)); min-width: 20px; min-height: 14px; }
  .nav__burger:hover svg { transform: rotate(-6deg); transition: transform .2s; }
  .overlay-menu { padding: calc(60 * var(--px)) var(--gutter); gap: calc(10 * var(--px)); }
  .overlay-menu a { font-size: calc(110 * var(--px)); line-height: .95; transition: color .2s; }
  .overlay-menu a:hover { color: var(--pink); }
  .overlay-menu__close { top: calc(36 * var(--px)); font-size: calc(28 * var(--px)); }
}
/* round 7: sticky header, turns into a red bar once you scroll */
.nav { position: fixed; top: 0; left: 0; right: 0; height: max(64px, calc(110 * var(--px))); padding-top: env(safe-area-inset-top, 0px); transition: background-color .3s, color .3s, height .3s; z-index: 40; }
.nav.is-stuck { background: var(--red); color: var(--cream); height: max(60px, calc(96 * var(--px))); pointer-events: auto; }
.nav.is-stuck .nav__logo { top: calc(20 * var(--px)); }
.nav.is-stuck .nav__burger { top: calc(30 * var(--px)); }
@media (max-width: 899px) {
  .nav { height: 72px; }
  .nav.is-stuck { height: 64px; }
  .nav.is-stuck .nav__logo { top: 12px; }
  .nav.is-stuck .nav__burger { top: 20px; }
}
.hero__cta { transition: transform .25s ease, background-color .25s ease; } .hero__cta:hover { transform: scale(1.05); background: var(--blue); }
/* round 8: desktop shows the sections written out in the top bar; sticky bar appears instantly */
.nav { transition: none; }
@media (min-width: 900px) {
  .nav__burger { display: none !important; }
  .nav .nav__cart { display: block !important; top: calc(36 * var(--px)); }
  .nav .nav__menu { display: flex !important; flex-direction: row; gap: calc(32 * var(--px)); top: calc(36 * var(--px)) !important; right: calc(var(--gutter) + 120 * var(--px)); text-align: left; }
  .nav.is-stuck .nav__cart, .nav.is-stuck .nav__menu { top: calc(36 * var(--px)) !important; }
  .nav.is-stuck { height: max(60px, calc(96 * var(--px))); }
  .nav.is-stuck .nav__logo { top: calc(24 * var(--px)); }
}
@media (min-width: 900px) { .nav .nav__cart, .nav .nav__menu a { line-height: 1.05; display: block; } .nav .nav__menu li { line-height: 1.05; } .nav .nav__cart { top: calc(41 * var(--px)); } .nav.is-stuck .nav__cart { top: calc(41 * var(--px)) !important; } }
@media (min-width: 900px) { .nav .nav__cart, .nav.is-stuck .nav__cart { top: calc(36 * var(--px)) !important; } }
.ticker__track { animation-duration: 95s; }
.euro { display: inline-block; height: .72em; width: auto; margin-right: .04em; vertical-align: baseline; transform: translateY(.02em); overflow: visible; } .cause__num, .what__num { display: flex; align-items: baseline; }
.euro { height: .8em; margin-right: 0; }
/* "Push me" sticker in the hero */
.sticker { position: absolute; z-index: 6; left: calc(250 * var(--px)); top: calc(560 * var(--px)); width: calc(118 * var(--px)); height: calc(118 * var(--px)); min-width: 76px; min-height: 76px; border-radius: 50%; background: var(--pink); color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream); display: grid; place-items: center; transform: rotate(-12deg); transition: transform .25s ease, background-color .25s ease; cursor: pointer; }
.sticker span { font-family: var(--display); text-transform: uppercase; font-size: max(13px, calc(19 * var(--px))); line-height: .95; text-align: center; }
.sticker:hover { transform: rotate(-12deg) scale(1.08); background: var(--blue); }
.sticker.squish { animation: squish .45s ease; }
@keyframes squish { 0% { transform: rotate(-12deg) scale(1) } 35% { transform: rotate(-4deg) scale(.86) } 70% { transform: rotate(-16deg) scale(1.08) } 100% { transform: rotate(-12deg) scale(1) } }
@media (max-width: 899px) { .sticker { left: auto; right: var(--gutter); top: calc(470 * var(--px)); width: 84px; height: 84px; } .sticker span { font-size: 14px; } }