﻿/* Stay Wide — shared homepage and product styles. Art blocks are labelled placeholders. */
:root { --ink:#161616; --muted:#62625c; --line:#d9d9d3; --paper:#f2f2ed; --blue:#263fc6; --pad:clamp(20px,4.5vw,80px); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:82px; }
body { margin:0; background:white; color:var(--ink); font:16px/1.5 Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
body:has(dialog[open]) { overflow:hidden; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1; }
h2 { font-size:clamp(30px,3.6vw,52px); letter-spacing:-.06em; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
button { color:inherit; cursor:pointer; }
a,button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:not-allowed; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
::selection { color:white; background:var(--blue); }
.section-pad { padding-inline:var(--pad); }
.section-space { padding-block:48px; }
.micro { font:700 11px/1.5 'Courier New',monospace; text-transform:uppercase; letter-spacing:.04em; }
.kicker { margin-bottom:12px; }
.quiet { color:var(--muted); font-size:14px; line-height:1.6; }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-180%); z-index:20; background:white; padding:12px 20px; border:2px solid; }
.skip-link:focus { transform:none; }
.announcement { display:flex; justify-content:space-between; gap:12px; padding:5px var(--pad); background:var(--ink); color:white; font:10px/1.5 'Courier New',monospace; text-transform:uppercase; }
.site-header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:1px var(--pad); background:rgba(255,255,255,.98); border-bottom:1px solid var(--line); }
.wordmark { display:inline-flex; align-items:center; min-height:44px; font-size:clamp(24px,2.3vw,34px); font-weight:900; letter-spacing:-.085em; white-space:nowrap; }
.wordmark>span { align-self:flex-start; font-size:12px; margin:9px 0 0 4px; }
.brand-logo { display:block; width:96px; height:auto; }
.site-footer .brand-logo { width:108px; }
nav { display:flex; align-items:center; gap:24px; }
nav a,.text-button { display:inline-flex; align-items:center; min-height:44px; min-width:44px; font-size:13px; font-weight:700; }
nav a:hover,.inline-link:hover { text-decoration:underline; text-underline-offset:5px; }
.text-button { border:0; padding:0; background:none; gap:7px; }
.cart-count { display:grid; place-items:center; width:22px; height:22px; border:1px solid; font:11px 'Courier New',monospace; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:48px; padding:13px 18px; border:1px solid var(--ink); border-radius:0; font-size:13px; line-height:1.5; font-weight:700; }
.button span { font-size:20px; line-height:1; }
.button-dark { background:var(--ink); color:white; }
.button-dark:hover { background:var(--blue); border-color:var(--blue); }
.button-dark:disabled { background:#555; border-color:#555; }
.inline-link { display:inline-flex; align-items:center; min-height:44px; font-size:13px; font-weight:700; white-space:nowrap; }
.opening { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; padding-block:26px 24px; }
.opening h1 { font-size:clamp(50px,8vw,116px); font-weight:900; letter-spacing:-.085em; line-height:.9; }
.opening h1>span { color:var(--blue); }
.opening .kicker { margin-bottom:14px; }
.opening-line { font-size:14px; margin-top:14px; }
.opening .button { min-height:44px; padding-block:10px; }
.shop { padding-bottom:48px; }
.collection-heading { border-top:1px solid var(--ink); padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.collection-heading h2 { font-size:20px; letter-spacing:-.035em; }
.preview-note { font-size:12px; color:var(--muted); margin:8px 0 18px; }
.product-grid { --mobile-columns:2; display:grid; grid-template-columns:repeat(var(--mobile-columns),minmax(0,1fr)); gap:24px 16px; }
.product-card { display:block; min-width:0; }
/* A centred final piece keeps an odd mobile drop balanced at the same card size. */
@media (max-width:699px) {
  .collection-grid>.product-card:last-child:nth-child(odd) { grid-column:1 / -1; width:calc((100% - 16px) / 2); justify-self:center; }
}
.product-image { position:relative; display:block; aspect-ratio:4/5; background:var(--paper); overflow:hidden; }
.product-index { position:absolute; z-index:2; top:12px; left:12px; font-size:10px; }
.image-layer { position:absolute; inset:0; display:grid; place-items:center; }
.image-secondary { opacity:0; background:var(--paper); pointer-events:none; }
.product-card:focus-visible .image-secondary[data-ready] { opacity:1; }
.placeholder-tag { position:absolute; bottom:12px; left:12px; right:34px; color:var(--muted); font:10px/1.4 'Courier New',monospace; }
.product-arrow { position:absolute; bottom:8px; right:12px; font-size:23px; }
.product-caption { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-top:12px; font-size:14px; line-height:1.4; }
.product-price { font:13px/1.5 'Courier New',monospace; white-space:nowrap; }
.product-card:hover strong { text-decoration:underline; text-underline-offset:4px; }
/* Optional emphasis; no product is featured by default. Preserve document order. */
.product-card[data-featured="true"] .product-caption::after { content:'Featured'; flex-basis:100%; font:11px/1.5 'Courier New',monospace; color:var(--blue); }
.product-card[data-featured="true"] .product-image { box-shadow:inset 0 -3px var(--blue); }
/* Replace these neutral silhouettes with real photography. Tones are illustrative, not product colour claims. */
.tone-01 { background:#eeeee9; --garment:#343632; --mark:#dcdcd4; }
.tone-02 { background:#eceeea; --garment:#a7aca3; --mark:#292f26; }
.tone-03 { background:#efeee9; --garment:#ddd8c9; --mark:#55564b; }
.tone-04 { background:#e9ebee; --garment:#4b535d; --mark:#e3e6e9; }
.garment { position:relative; display:grid; place-items:center; width:82%; height:68%; background:var(--garment); }
.garment-hoodie { clip-path:polygon(34% 16%,36% 4%,44% 0,57% 0,65% 5%,67% 16%,79% 20%,100% 72%,82% 81%,73% 54%,74% 100%,26% 100%,27% 54%,18% 81%,0 72%,21% 20%); }
.garment-hoodie::after { content:''; position:absolute; width:28%; height:15%; bottom:12%; border:1px solid var(--mark); opacity:.35; border-radius:35% 35% 0 0; }
.garment-tee { clip-path:polygon(33% 6%,41% 10%,59% 10%,67% 6%,100% 27%,86% 49%,73% 40%,73% 96%,27% 96%,27% 40%,14% 49%,0 27%); }
.garment-mark { color:var(--mark); font:700 clamp(16px,2.7vw,40px)/1 'Courier New',monospace; opacity:.6; }
.garment-back .garment-mark { font-size:clamp(12px,2vw,26px); }
.garment-back::after { display:none; }
.field-hint { font-size:12px; color:var(--muted); line-height:1.5; }
.consent { padding:0; border:0; margin:20px 0; }
.consent legend { font-size:13px; font-weight:700; margin-bottom:8px; }
.consent label { display:flex; gap:10px; align-items:flex-start; padding:8px 0; min-height:44px; font-size:13px; cursor:pointer; }
.consent input { width:19px; height:19px; flex-shrink:0; margin:0; accent-color:var(--blue); }
.form-status { font-size:13px; margin-top:12px; }
.form-status:empty { margin:0; }
.site-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; padding-block:25px; border-top:1px solid var(--line); }
.site-footer>.micro { color:var(--muted); font-size:10px; }
.breadcrumb { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:8px; }
.breadcrumb a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
.product-layout { display:grid; gap:24px; }
.gallery-frame { position:relative; aspect-ratio:4/5; }
.gallery-frame[data-gallery] { touch-action:pan-y pinch-zoom; }
.gallery-arrow { position:absolute; z-index:2; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; border:1px solid #16161655; background:#fffffff2; color:var(--ink); font:22px/1 Arial,sans-serif; }
.gallery-previous { left:8px; }
.gallery-next { right:8px; }
.gallery-arrow[aria-disabled="true"] { color:#777; background:#ffffffb3; cursor:default; }
.gallery-arrow:not([aria-disabled="true"]):hover { border-color:var(--ink); background:white; }
.gallery-meta { display:flex; justify-content:space-between; align-items:center; min-height:44px; gap:16px; font:12px/1.5 'Courier New',monospace; }
#gallery-view { text-transform:uppercase; }
.gallery-panel { display:grid; place-items:center; position:absolute; inset:0; }
.gallery-panel .garment { max-width:400px; }
.gallery-panel .garment-mark { font-size:38px; }
.gallery-panel .garment-back .garment-mark { font-size:24px; }
.purchase-panel { min-width:0; }
.purchase-panel>.kicker { margin-bottom:10px; }
.product-title-row { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.product-title-row h1 { font-size:clamp(32px,4vw,60px); letter-spacing:-.065em; }
.detail-price { font:20px/1.5 'Courier New',monospace; white-space:nowrap; }
.product-meta { font-size:13px; margin:14px 0 20px; }
.product-meta>span { margin-left:14px; color:var(--muted); }
.size-picker { padding:0; margin:0 0 16px; border:0; }
.size-picker legend { padding:0; margin-bottom:10px; font-size:13px; font-weight:700; }
#selected-size { color:var(--blue); margin-left:8px; }
.size-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:8px; }
.size-option { position:relative; cursor:pointer; }
.size-option input { position:absolute; opacity:0; width:1px; height:1px; }
.size-option>span { display:grid; place-items:center; min-height:48px; border:1px solid #92938e; background:white; font-size:14px; }
.size-option input:checked+span { color:white; background:var(--ink); border-color:var(--ink); }
.size-option input:focus-visible+span { outline:3px solid var(--blue); outline-offset:3px; }
.size-option input:disabled+span { color:#777; background:#eee; border-color:#ccc; text-decoration:line-through; cursor:not-allowed; }
.size-picker .field-hint { margin-top:10px; }
.add-to-cart { width:100%; min-height:52px; }
.purchase-note { font-size:12px; color:var(--muted); margin-top:10px; }
.description-placeholder { font-size:14px; margin-block:24px; color:var(--muted); max-width:520px; }
.product-details { border-top:1px solid var(--line); }
.product-details details { border-bottom:1px solid var(--line); }
.product-details summary { cursor:pointer; padding:16px 2px; min-height:50px; font-size:13px; font-weight:700; }
.product-details details>p { padding:0 2px 18px; font-size:13px; color:var(--muted); }
.recommendations { margin-top:24px; border-top:1px solid var(--line); }
.recommendations h2 { font-size:clamp(28px,3.5vw,48px); }
.section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; }
dialog { width:min(520px,calc(100% - 32px)); max-height:85dvh; padding:26px; border:0; color:var(--ink); }
dialog::backdrop { background:rgba(0,0,0,.5); }
.dialog-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.dialog-header button { flex-shrink:0; width:44px; height:44px; background:white; border:1px solid var(--line); font-size:28px; }
dialog h2 { font-size:36px; margin-bottom:18px; }
dialog p { font-size:14px; margin-bottom:24px; }
dialog>.button { width:100%; }
@media (hover:hover) and (pointer:fine) {
  .product-image:hover .image-secondary[data-ready] { opacity:1; }
}
@media (prefers-reduced-motion:no-preference) {
  .image-secondary { transition:opacity .16s ease; }
  .gallery-panel.is-entering { animation:gallery-reveal .14s ease-out; }
}
@keyframes gallery-reveal { from { opacity:.92; } to { opacity:1; } }
@media (min-width:700px) {
  .site-header .brand-logo { width:104px; }
  .section-space { padding-block:64px; }
  .opening { padding-block:30px; }
  .product-grid { gap:28px; }

  .product-caption { font-size:16px; }
  .product-layout { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; gap:36px; }
  .gallery-frame { height:auto; aspect-ratio:4/5; }
  .gallery-panel .garment { height:67%; }
  .purchase-panel { position:sticky; top:82px; }
  .recommendation-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .recommendation-grid .product-image { aspect-ratio:1.1; }
}
@media (min-width:1100px) {

  .collection-grid .product-image { aspect-ratio:4/5; }
  .shop { padding-bottom:64px; }
  .product-layout { gap:7%; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  .gallery-panel .garment { max-width:85%; }
}
/* Let shorter tablet/laptop screens scroll the purchase panel naturally. */
@media (min-width:700px) and (max-height:800px) {
  .purchase-panel { position:static; }
}
@media (max-width:359px) {
  :root { --pad:16px; }
  .announcement { font-size:9px; }
  .wordmark { font-size:23px; }
  nav { gap:14px; }
  .product-grid { column-gap:12px; }
  .product-caption { font-size:13px; }
}
@media (min-width:1800px) {
  body { max-width:1800px; margin-inline:auto; border-inline:1px solid var(--line); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
}

/* Launch foundation: retain the existing visual system and keep commerce direct. */
.campaign-media { padding-bottom:24px; }
.campaign-placeholder { min-height:130px; padding:20px; background:var(--paper); display:flex; flex-direction:column; justify-content:space-between; gap:24px; color:var(--muted); font-size:13px; }
.campaign-media img,.campaign-media video { display:block; width:100%; height:clamp(130px,22vw,320px); object-fit:cover; }
.product-state { font:700 13px/1.5 'Courier New',monospace; margin-top:10px; }
.product-state span { font-weight:400; color:var(--muted); }
.dispatch { font-size:13px; margin-top:5px; overflow-wrap:anywhere; }
.product-card .dispatch { font-size:12px; color:var(--muted); }
#purchase-form { margin-top:18px; }
.fit-note { font-size:13px; margin-bottom:12px; }
.fit-note a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; }
.image-layer img,.gallery-panel img { width:100%; height:100%; object-fit:contain; }
.gallery-panel { overflow:hidden; }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 20px; }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
.info-page { max-width:900px; margin-inline:auto; }
.info-page h1 { font-size:clamp(44px,7vw,80px); letter-spacing:-.065em; }
.info-page section { padding-block:24px; border-bottom:1px solid var(--line); scroll-margin-top:80px; }
.info-page section h2 { font-size:23px; letter-spacing:-.035em; margin-bottom:14px; }
.info-page section p { font-size:14px; margin-top:10px; overflow-wrap:anywhere; }
.cart-subtotal { display:flex; justify-content:space-between; padding-block:16px; border-top:1px solid var(--line); }
#checkout { margin-bottom:12px; }
.cart-line { display:grid; grid-template-columns:72px minmax(0,1fr); gap:16px; padding-block:16px; }
.cart-thumbnail { aspect-ratio:4/5; background:var(--paper); }
.cart-thumbnail img { width:100%; height:100%; object-fit:contain; }
.cart-line h3 { font-size:16px; }
.cart-line p { margin:8px 0; overflow-wrap:anywhere; }
.cart-line input,.cart-line button { min-height:44px; }
.cart-line input { width:60px; }
/* Restrained non-modal preferences; all choices have equal visual weight. */
.cookie-panel { position:fixed; z-index:10; inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); max-width:620px; margin-left:auto; padding:16px; max-height:70dvh; overflow-y:auto; background:white; border:1px solid var(--ink); box-shadow:0 4px 24px #0002; }
.cookie-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cookie-heading h2 { font-size:20px; letter-spacing:-.03em; }
.cookie-heading button { width:44px; min-height:44px; flex-shrink:0; background:white; border:1px solid var(--line); font-size:24px; }
.cookie-panel p { font-size:13px; margin:8px 0 12px; }
.cookie-panel a { text-decoration:underline; text-underline-offset:3px; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:8px; }
.cookie-panel .button { background:white; justify-content:center; padding:10px; gap:0; }
.cookie-actions .button { flex:1 1 auto; }
#cookie-options { border-top:1px solid var(--line); margin-block:12px; }
#cookie-options label { display:flex; align-items:flex-start; gap:12px; font-size:13px; padding:10px 2px; min-height:48px; cursor:pointer; }
#cookie-options input { width:22px; height:22px; margin:0; flex-shrink:0; accent-color:var(--blue); }
#cookie-options>.button { width:100%; margin-block:8px 16px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#cart-dialog { padding-bottom:max(26px,env(safe-area-inset-bottom)); overscroll-behavior:contain; }
@media (max-width:699px) {
  .site-header { gap:8px; }
  nav { gap:8px; }
  .wordmark { font-size:24px; }
  .gallery-frame { max-width:380px; margin-inline:auto; }
}
@media (min-width:700px) {
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .collection-grid:has(>.product-card:nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .recommendation-grid:has(>.product-card:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .collection-grid .product-image,.recommendation-grid .product-image { aspect-ratio:4/5; }
  .campaign-placeholder { min-height:180px; }
  .purchase-panel { position:static; }
}
