/* Cireli Mori store. Look: micro1.ai's manner in light mode (Allen 2026-11-15):
   Outfit typeface, floating pill menu, large centred headings, grain-textured panels, soft corners. */
:root {
  --bg: #f6f5f2;
  --text: #121212;
  --muted: #6f6e6a;
  --line: #e2e0da;
  --tile: #f2f2f0;            /* must match TILE in tools/align.py */
  --r: 10px;
  --head: "Outfit", system-ui, sans-serif;
  --body: "Outfit", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 96px; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; font-weight: 300; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; letter-spacing: -.025em; line-height: 1.12; }
b { font-weight: 500; }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* menu: a plain header that scrolls away with the page. A separate floating pill fades in slowly once you are
   well down the page. Two elements, so nothing jumps or bounces when one takes over from the other. */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px var(--gutter); }
.top .nav { grid-column: 1; grid-row: 1; display: flex; gap: 24px; font-size: 15px; font-weight: 400; }
.top .brand { grid-column: 2; grid-row: 1; font-size: 17px; letter-spacing: .06em; }
.top .bagbtn { grid-column: 3; grid-row: 1; justify-self: end; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; }
.brand img { height: 24px; width: auto; }
.nav a { color: #2c2c2a; white-space: nowrap; }
.nav a:hover { color: #8a8983; }
.bagbtn { font-size: 15px; font-weight: 400; white-space: nowrap; padding: 9px 16px; border-radius: 6px; background: var(--text); color: #fff; }
.pill { position: fixed; top: 14px; left: 50%; z-index: 31; display: flex; align-items: center; gap: 22px; padding: 6px 6px 6px 16px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .08); max-width: calc(100vw - 24px);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
body.scrolled .pill { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .6s ease, transform .6s ease, visibility 0s; }
.pill .brand { font-size: 15px; letter-spacing: .02em; }
.pill .brand img { height: 22px; }
.pill .nav { display: flex; gap: 20px; font-size: 14px; font-weight: 400; }
.pill .bagbtn { font-size: 14px; }
/* the six links need about 1,100px next to a centred logo. Below that the links fold into a Menu button, the logo stays centred. */
.menubtn { display: none; font-size: 15px; font-weight: 400; padding: 9px 0; justify-self: start; }
.menubtn:hover { opacity: .6; }
@media (max-width: 1099px) { .top .nav { display: none; } .top .menubtn { display: block; grid-column: 1; grid-row: 1; } }
@media (max-width: 759px) { .pill .nav { display: none; } .pill .menubtn { display: block; padding: 9px 4px; } .pill .brand span { display: none; } }
@media (max-width: 420px) { .top .brand span { display: none; } }
.menu { position: fixed; inset: 0; z-index: 50; background: var(--bg); padding: 20px var(--gutter) 40px; overflow: auto; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
body.menu-open { overflow: hidden; }
body.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-top button { font-size: 15px; padding: 9px 0; }
.menu nav { display: grid; margin-top: clamp(28px, 8vh, 72px); }
.menu nav a { font-family: var(--head); font-size: clamp(30px, 6vw, 46px); letter-spacing: -.02em; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu nav a:hover { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .pill { transition: none; } }
body > main, body > .section:first-of-type { padding-top: 96px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; background: var(--text); color: #fff; font-size: 15px; font-weight: 400; border-radius: 6px; }
.btn.ghost { background: none; color: var(--text); border: 1px solid #c9c7c0; }
.btn.ghost:hover { border-color: var(--text); }
.btn[disabled] { opacity: .3; cursor: not-allowed; }
.textlink { font-size: 14px; font-weight: 400; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.textlink::after { content: "  ›"; }

/* hero: full-bleed dark studio photo with film grain; title on the dark left side */
.hero { position: relative; background: #0d0d0d; color: #fff; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
.hero img { width: 100%; height: min(96vh, 64vw); min-height: 460px; object-fit: cover; object-position: center 22%; }
.hero-copy { position: absolute; z-index: 2; left: var(--gutter); right: 50%; bottom: clamp(30px, 7vh, 80px); display: grid; gap: 14px; justify-items: start; }
.hero .eyebrow { color: rgba(255, 255, 255, .75); }
.hero h1 { font-size: clamp(40px, 5.6vw, 84px); font-weight: 400; letter-spacing: -.02em; color: rgba(255, 255, 255, .94); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hero-btns .btn { background: rgba(255, 255, 255, .92); color: #000; }
.hero-btns .btn.ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .5); }
@media (max-width: 799px) { .hero img { height: 72vh; } .hero-copy { position: relative; left: 0; right: 0; bottom: 0; padding: 22px var(--gutter) 30px; } }

/* sections */
.section { padding: clamp(72px, 10vw, 140px) var(--gutter) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 4vw, 48px); }
.section-head h2 { font-size: clamp(28px, 3.4vw, 44px); }
.section-head.mid { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.section-head.mid h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 400; }
.section-head.mid p { color: var(--muted); max-width: 52ch; font-size: 18px; }

/* grain banner with an iridescent edge in the season's colours */
.statement { margin: clamp(72px, 10vw, 140px) var(--gutter) 0; padding: 12px; border-radius: var(--r); background: linear-gradient(100deg, #3a2a21, #7a5134 20%, #4a1c22 37%, #8a2230 43%, #4a1c22 48%, #1b2436 59%, #26418f 65%, #1b2436 70%, #24352b 86%, #b9b6ad); }
.statement .grain { position: relative; border-radius: 6px; background: #ebe9e3; padding: clamp(48px, 9vw, 120px) clamp(20px, 6vw, 80px); text-align: center; overflow: hidden; }
.statement .grain::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .5; mix-blend-mode: multiply; }
.statement p { position: relative; font-size: clamp(26px, 3.6vw, 48px); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; max-width: 22ch; margin: 0 auto; }

/* product grid: product alone on a light grey tile, name and price inside, every garment on the same lines */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; grid-auto-flow: dense; }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--tile); border-radius: var(--r); overflow: hidden; }
.card .shot { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tile); }
.card .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .meta { padding: 4px 18px 20px; }
.card h3 { font-size: 15px; font-weight: 400; letter-spacing: 0; }
.card .from { font-size: 14px; color: var(--muted); margin-top: 2px; }
.edit { grid-column: span 2; overflow: hidden; min-height: 320px; border-radius: var(--r); }
@media (min-width: 1000px) { .edit { grid-row: span 2; } }
.edit img { width: 100%; height: 100%; object-fit: cover; }

/* looks */
.lookrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 900px) { .lookrow { grid-template-columns: repeat(4, 1fr); } }
.lookcard { display: block; background: var(--tile); border-radius: var(--r); overflow: hidden; }
.lookcard img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.lookcard div { padding: 14px 18px 20px; }
.lookcard h3 { font-size: 17px; font-weight: 400; letter-spacing: 0; }
.lookcard p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.lookblock { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: clamp(40px, 7vw, 96px); scroll-margin-top: 96px; }
@media (min-width: 900px) { .lookblock { grid-template-columns: 1.05fr 1fr; align-items: start; } .lookblock:nth-child(odd) .lookphoto { order: 2; } }
.lookphoto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.lookside { padding: clamp(20px, 3vw, 48px); display: grid; gap: 12px; align-content: start; }
.lookside h2 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 400; }
.lookside p { color: var(--muted); max-width: 44ch; font-size: 18px; }
.lookpieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
@media (min-width: 900px) { .look-grid { grid-template-columns: 2fr 1fr 1fr; grid-auto-flow: dense; } }

/* home category tiles */
.cats { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 var(--gutter); margin-top: clamp(72px, 10vw, 140px); }
@media (min-width: 800px) { .cats { grid-template-columns: repeat(3, 1fr); } }
.cat { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #111; color: #fff; border-radius: var(--r); }
.cat img { width: 100%; height: 100%; object-fit: cover; }
.cat span { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 22px; font-weight: 400; text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.cat span::after { content: "  ›"; }

/* hardware */
.hardware { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 900px) { .hardware { grid-template-columns: repeat(4, 1fr); } }
.hardware figure { overflow: hidden; background: var(--tile); border-radius: var(--r); }
.hardware img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.hardware figcaption { padding: 12px 18px 16px; font-size: 14px; color: var(--muted); }

/* made-to-order block */
.fit { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto; padding-bottom: clamp(72px, 10vw, 140px); }
.fit h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 400; }
.fit p { color: var(--muted); max-width: 54ch; font-size: 18px; }

/* footer */
.foot { margin-top: clamp(72px, 10vw, 140px); padding: 36px var(--gutter); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.foot img { height: 30px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.fit + .foot, section.section:has(.fit) + .foot { margin-top: 0; }

/* collection pages */
.coll { padding: 110px var(--gutter) 0; }
.coll-head { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto clamp(28px, 4vw, 52px); }
.coll-head h1 { font-size: clamp(36px, 5vw, 68px); font-weight: 400; }
.coll-head p { color: var(--muted); max-width: 56ch; font-size: 18px; }
.crumbs { font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.chips a { padding: 8px 16px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; background: #fff; }
.chips a[aria-current] { background: var(--text); color: #fff; border-color: var(--text); }
.coll-foot { max-width: 720px; margin: 0 auto; text-align: center; padding: clamp(64px, 9vw, 120px) 0 0; display: grid; gap: 12px; }
.coll-foot h2 { font-size: 26px; font-weight: 400; }
.coll-foot p { color: var(--muted); }

/* product page */
.pdp { display: grid; grid-template-columns: 1fr; padding-top: 84px; }
@media (min-width: 960px) { .pdp { grid-template-columns: 1.3fr 1fr; align-items: start; padding: 84px var(--gutter) 0; gap: 8px; } }
.gallery { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 960px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery img:only-child { grid-column: span 2; } }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--tile); border-radius: var(--r); }
.buy { padding: 28px var(--gutter) 72px; display: grid; gap: 28px; }
@media (min-width: 960px) { .buy { position: sticky; top: 84px; max-height: calc(100vh - 84px); overflow: auto; padding: 24px clamp(24px, 4vw, 64px) 48px; } }
.buy h1 { font-size: clamp(30px, 3vw, 44px); font-weight: 400; margin-top: 10px; }
.buy .sub { color: var(--muted); margin-top: 6px; }
.pdp-price { font-size: 22px; font-weight: 400; margin-top: 12px; }
.ways { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.ways a[aria-current] { color: var(--text); border-bottom: 1px solid var(--text); }
.swatches { margin-top: 18px; display: grid; gap: 10px; }
.label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sw { display: flex; gap: 10px; }
.sw a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); outline: 1px solid transparent; outline-offset: 3px; }
.sw a[aria-current] { outline-color: var(--text); }
.sw span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.progress { display: flex; gap: 4px; }
.progress i { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.progress i.on { background: var(--text); }
.step { display: grid; gap: 16px; margin-top: 20px; }
.step h2 { font-size: 22px; font-weight: 500; }
.step .hint { color: var(--muted); font-size: 15px; margin-top: -8px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.opt { min-height: 46px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 15px; background: #fff; }
.opt:hover { border-color: var(--text); }
.opt[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }
.step .label { margin-bottom: -6px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input { height: 48px; padding: 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 16px; letter-spacing: 0; text-transform: none; }
.field input:focus { outline: 0; border-color: var(--text); }
.rowbtns { display: flex; gap: 8px; }
.rowbtns .btn { flex: 1; }
.rowbtns .btn.ghost { flex: 0 0 auto; }
.summary { border-top: 1px solid var(--line); }
.summary div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.summary span { color: var(--muted); }
.summary b { text-align: right; }
.summary .total { font-size: 18px; color: var(--text); }
.note { color: var(--muted); font-size: 14px; }
.about { display: grid; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line); color: #3b3b38; }
.about h2 { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin-top: 10px; }
.about ul { list-style: none; display: grid; gap: 6px; }
.about li { padding-left: 16px; position: relative; }
.about li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 1px; background: var(--text); }

/* product bar: slides up from the bottom once the title has scrolled away */
.pbar { position: fixed; left: 50%; bottom: 14px; transform: translate(-50%, 140%); z-index: 25; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 10px; width: min(560px, calc(100vw - 24px)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .1); transition: transform .35s ease; }
.pbar.on { transform: translate(-50%, 0); }
.pbar img { width: 42px; height: 54px; object-fit: cover; border-radius: 6px; }
.pbar div { flex: 1; display: grid; font-size: 14px; min-width: 0; }
.pbar span { color: var(--muted); }

/* get the look */
.look-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.look-main { grid-column: span 2; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.look-main.ghost { background: var(--tile); object-fit: contain; }
@media (min-width: 900px) { .look-grid { grid-template-columns: 2fr 1fr 1fr; align-items: start; } .look-main { grid-column: auto; } }
.look-item { display: block; background: var(--tile); border-radius: var(--r); overflow: hidden; padding-bottom: 20px; }
.look-item .shot { aspect-ratio: 3 / 4; }
.look-item .shot img { width: 100%; height: 100%; object-fit: cover; }
.look-item h3 { font-size: 15px; font-weight: 400; letter-spacing: 0; padding: 4px 18px 0; }
.look-item .from { font-size: 14px; color: var(--muted); padding: 2px 18px 0; }

/* bag */
.bag { max-width: 860px; margin: 0 auto; padding: 120px var(--gutter) 0; display: grid; gap: 28px; }
.bag h1 { font-size: clamp(34px, 4vw, 56px); font-weight: 400; }
.bag [data-bag] { display: grid; gap: 22px; }
.bag-list { border-top: 1px solid var(--line); }
.bag-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.bag-item img { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.bag-item div { display: grid; gap: 2px; font-size: 14px; }
.bag-item b { font-size: 17px; }
.bag-item span { color: var(--muted); }
.bag-item button { justify-self: start; margin-top: 8px; font-size: 13px; border-bottom: 1px solid currentColor; }
.bag-price { font-size: 17px; }

/* ---------- hover and focus (Allen 2026-11-15): a slight colour change only. No arrows, no underlines drawing in, no movement. ---------- */
a, button, .card, .look-item, .lookcard { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }

.btn:hover { background: #333331; }
.btn.ghost:hover { background: #e9e8e4; color: var(--text); border-color: #c9c7c0; }   /* ghost button: a little light grey */
.btn[disabled]:hover { background: var(--text); }
.hero-btns .btn:hover { background: #e4e3df; }
.hero-btns .btn.ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .5); }
.bagbtn:hover { background: #333331; }

.nav a:hover { color: #8a8983; }
.foot-nav a:hover, .crumbs a:hover, .ways a:hover, .textlink:hover { color: var(--text); opacity: .65; }
.chips a:hover { background: #e9e8e4; }
.chips a[aria-current]:hover { background: #333331; }
.sw a:hover { outline-color: #9a9892; }
.bag-item button:hover { opacity: .6; }
.opt:hover { background: #f1f0ec; }
.opt[aria-pressed="true"]:hover { background: #333331; }

/* tiles: the tile goes one shade darker, nothing else */
.card:hover, .look-item:hover, .lookcard:hover { background: #e9e8e4; }
.card:hover .shot, .look-item:hover .shot { background: #e9e8e4; }
.card .shot img, .look-item .shot img, .cat img, .lookcard img { transition: filter .2s ease; }
.card:hover .shot img, .look-item:hover .shot img { filter: brightness(.963); }   /* the photo's baked-in grey darkens with the tile */
.cat:hover img, .lookcard:hover img { filter: brightness(1.07); }

/* small text button: "+ Add exact measurements" */
.textbtn { justify-self: start; font-size: 14px; color: var(--muted); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.textbtn:hover { color: var(--text); }

/* Get the look can now hold four tiles (jacket/pants/set plus a coat and the scarf) */
@media (min-width: 900px) { .look-grid { grid-template-columns: 2fr 1fr 1fr; } .look-main { grid-row: span 2; } }

/* recommendations: five tiles on a loud product (4 loud + 1 calm), four on a calm one */
@media (min-width: 1000px) { [data-recs] .grid:has(> .card:nth-child(5)) { grid-template-columns: repeat(5, 1fr); } }

/* hero with the title in a band under the photo (used when the photo is full of people) */
.hero.band .hero-copy { position: relative; left: 0; right: 0; bottom: 0; padding: clamp(22px, 3vw, 40px) var(--gutter) clamp(26px, 3.4vw, 44px); }
.hero.band img { height: min(84vh, 56vw); object-position: center 30%; }
@media (min-width: 800px) { .hero.band .hero-copy { grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; } .hero.band .hero-copy .eyebrow, .hero.band .hero-copy h1 { grid-column: 1; } .hero.band .hero-btns { grid-column: 2; grid-row: 1 / span 2; margin: 0; } }
@media (min-width: 800px) { .cats.four { grid-template-columns: repeat(4, 1fr); } }

/* HOMEPAGE (2026-11-15, Allen: the dark photo at the very top "looks kind of crazy" on wide screens).
   The top is light: a line of copy and a row of people in the clothes. The three-man winter photo sits further
   down inside the gutters at its own shape, so it is never cropped at any width. */
.lead { padding: clamp(96px, 11vw, 150px) 0 0; }
.lead-copy { display: grid; gap: 22px; padding: 0 var(--gutter) clamp(26px, 3.4vw, 48px); }
.lead-copy .eyebrow { margin-bottom: 14px; }
.lead h1 { font-size: clamp(34px, 4.8vw, 68px); max-width: 17ch; }
.lead-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .lead-copy { grid-template-columns: 1fr auto; align-items: end; } }
/* a row of tall tiles: all in view on a wide screen, a sideways scroll below that */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 62vw; gap: 8px; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip > * { scroll-snap-align: start; }
@media (min-width: 640px) { .strip { grid-auto-columns: 36vw; } }
@media (min-width: 900px) { .strip { grid-auto-columns: 27vw; } }
@media (min-width: 1200px) { .strip.five { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } }
.person { display: block; }
.person img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: var(--r); background: var(--tile); transition: filter .2s ease; }
.person:hover img { filter: brightness(1.06); }
.person span { display: block; margin-top: 12px; font-size: 15px; font-weight: 400; }
.person em { display: block; font-style: normal; font-size: 14px; color: var(--muted); }
.cats.strip { grid-template-columns: none; }
@media (min-width: 1200px) { .cats.strip.five { grid-template-columns: repeat(5, 1fr); } }
.cats.strip .cat { aspect-ratio: 3 / 4; }
.cats.strip .cat span { font-size: 19px; padding: 0 10px; }
.hero h2 { font-size: clamp(34px, 4.6vw, 68px); font-weight: 400; letter-spacing: -.02em; color: rgba(255, 255, 255, .94); }
.hero.band.inset { margin: clamp(72px, 10vw, 140px) var(--gutter) 0; border-radius: var(--r); }
.hero.band.inset img { display: block; height: auto; min-height: 0; aspect-ratio: 2600 / 1470; object-position: center; }
@media (min-width: 1700px) { .hero.band.inset { max-width: 1588px; margin-left: auto; margin-right: auto; } }
.steps { display: grid; gap: 8px; padding-bottom: clamp(72px, 10vw, 140px); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps > div { background: var(--tile); border-radius: var(--r); padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 10px; align-content: start; }
.steps h3 { font-size: clamp(22px, 2vw, 28px); }
.steps p { color: var(--muted); }
section.section:has(.steps) + .foot { margin-top: 0; }

/* COLLECTION PAGES (2026-11-15): one card per design with a dot per colour, split into sub-sections.
   The chips under the title jump to a sub-section; the main menu stays at six links. */
.chips a span { color: var(--muted); margin-left: 4px; }
.group { scroll-margin-top: 84px; }
.group + .group { margin-top: clamp(56px, 7vw, 100px); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.group-head h2 { font-size: clamp(24px, 2.6vw, 36px); }
.group-head span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.dots { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); outline: 1px solid transparent; outline-offset: 2px; }
.dot:hover, .dot.on { outline-color: var(--text); }
.dots em { font-style: normal; font-size: 13px; color: var(--muted); }

/* HOMEPAGE HERO IS BACK (Allen 2026-11-15: without it "where did I just land?"). It sits under the plain light
   header, inside the gutters, at the photo's own shape so nothing is cropped; the title band is part of it. */
.hero.band.inset.first { margin-top: 84px; }
.hero.band.inset.first.wide img { aspect-ratio: auto; width: 100%; height: auto; }
.hero.band.inset.first h1 { font-size: clamp(30px, 3.6vw, 54px); max-width: 20ch; }
.hero.band.inset.first + .lead { padding-top: 8px; }
@media (max-width: 699px) { .hero.band.inset.first img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; } }

/* wide hero photo (hero-wide: the three men in the middle third, empty snow either side). On a wide screen the
   headline sits in the empty left third of the photo; below 1,000px it drops into the dark band under it.
   On a phone the photo is cropped to the men in the middle. */
.hero.band.inset.first.wide { max-width: none; margin-left: var(--gutter); margin-right: var(--gutter); }
@media (max-width: 699px) { .hero.band.inset.first.wide img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; } }
@media (min-width: 1000px) {
  .hero.band.inset.first.wide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 42%); pointer-events: none; }
  .hero.band.inset.first.wide .hero-copy { position: absolute; left: clamp(28px, 3.2vw, 56px); bottom: clamp(28px, 3.2vw, 56px); right: auto; width: 30%; padding: 0; grid-template-columns: 1fr; gap: 14px; }
  .hero.band.inset.first.wide .hero-btns { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .hero.band.inset.first.wide h1 { font-size: clamp(26px, 2.7vw, 48px); max-width: none; }
}
.hero.band.inset.first.wide .hero-btns .btn.ghost { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .6); }
.hero.band.inset.first.wide .hero-btns .btn.ghost:hover { background: rgba(255, 255, 255, .18); }
/* category tiles: a dark fade at the bottom so the label reads on a light photo too */
.cat::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); pointer-events: none; }
.cat span { z-index: 2; }

/* shipping time under the buy buttons, and the Monogram feature on the homepage (replaced the hardware row) */
.shipnote { font-size: 14px; color: var(--text); background: var(--tile); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin-top: -8px; }
.feature { display: grid; gap: 8px; }
.feature-copy { display: grid; gap: 14px; align-content: center; justify-items: start; background: var(--tile); border-radius: var(--r); padding: clamp(28px, 4vw, 64px); }
.feature-copy h2 { font-size: clamp(30px, 3.4vw, 52px); max-width: 14ch; }
.feature-copy p { color: var(--muted); font-size: 18px; }
.feature-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.feature img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: var(--r); transition: filter .2s ease; }
.feature a:hover img { filter: brightness(1.06); }
@media (min-width: 700px) { .feature { grid-template-columns: 1fr 1fr; } .feature-copy { grid-column: span 2; } }
@media (min-width: 1100px) { .feature { grid-template-columns: 1.2fr 1fr 1fr; } .feature-copy { grid-column: auto; } }

/* statement banner: the gradient border drifts slowly from side to side (Allen 2026-11-15: red and blue fainter, "move slightly") */
.statement { background-size: 180% 100%; animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .statement { animation: none; } }

/* LEGAL PAGES: read like a document. 16px text, tight spacing, the site's own headings, no hero. */
.legal { max-width: 780px; margin: 0 auto; padding: 110px var(--gutter) 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: #2b2b29; }
.legal h1 { font-size: clamp(32px, 4vw, 48px); margin-top: 10px; }
.legal-date { color: var(--muted); font-size: 14px; margin-top: 8px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 14px; color: var(--muted); margin: 14px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.legal-nav a[aria-current] { color: var(--text); }
.legal-nav a:hover { color: var(--text); }
.legal h2 { font-size: 22px; letter-spacing: -.01em; margin: 26px 0 8px; }
.legal p { margin-top: 10px; }
.legal p a { color: inherit; }
.legal strong { font-weight: 500; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; flex-basis: 100%; }
.foot-legal a:hover { color: var(--text); }
.note a { color: inherit; }

/* PRODUCT PAGE ON PHONES AND TABLETS (Allen 2026-11-15: too much scrolling before Place in bag, photos sat edge
   to edge). Below 960px the photos are one row you swipe, with the next photo peeking in, inside the page
   margins. The title, price and size buttons follow straight after. */
@media (max-width: 959px) {
  .pdp { padding-top: 72px; }
  .gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter); scroll-padding-left: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery img { flex: 0 0 86%; width: 86%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .gallery img:only-child { flex-basis: 100%; width: 100%; }
  .gdots { display: flex; justify-content: center; gap: 6px; padding: 12px 0 0; }
  .gdots i { width: 6px; height: 6px; border-radius: 50%; background: #cfcdc6; transition: background .2s ease; }
  .gdots i.on { background: var(--text); }
  .buy { padding: 16px var(--gutter) 64px; gap: 20px; }
  .buy .crumbs { display: none; }
  .buy h1 { font-size: 28px; margin-top: 0; }
  .pdp-price { margin-top: 8px; }
  .ways { margin-top: 8px; }
}
@media (min-width: 600px) and (max-width: 959px) { .gallery img { flex-basis: 46%; width: 46%; } }
@media (min-width: 960px) { .gdots { display: none; } }