/* Palette sampled from the logo artwork (Enigma-Logo-White-Brown.jpg):
   espresso ground #0f0503, warm mid #2a160b, inner glow #4e2e19,
   ivory emblem #fcf9f2, tan subtitle #c0aa95. */
:root {
  --bg: #130a06;
  --bg-2: #21130c;
  --panel: #2b1a12;
  --panel-2: #3a2419;
  --line: rgba(244, 232, 216, 0.13);
  --text: #f4ece1;
  --muted: #bda491;
  --bronze: #b07a4a;
  --bronze-2: #cf9a63;
  --ice: #f0e2d0;
  --silver: #f2ebe0;
  --gold: #d9a441;
  --accent: var(--bronze);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --deva: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--ice); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0 0 0.4em; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
h3 { font-size: 1.1rem; }
/* The second line under each English one. It keeps the class name `.hi` in
   every language - all the size and colour rules below hang off it - but the
   Devanagari face is applied ONLY when that line is actually Hindi, which
   <html data-alt="hi"> says. Latin, Cyrillic and CJK inherit the body stack,
   where Inter covers Cyrillic and the system fonts cover CJK. */
.hi { font-weight: 500; }
[data-alt="hi"] .hi { font-family: var(--deva); }
[lang^="zh"], [lang^="ja"], [lang^="ko"] { font-family: 'Noto Sans SC', 'Noto Sans JP', 'Microsoft YaHei', 'Yu Gothic', 'Malgun Gothic', 'PingFang SC', 'Hiragino Sans', sans-serif; }
/* Arabic runs right to left. Setting it from the `lang` the templates already
   emit means no template needed a `dir` attribute added by hand, and `isolate`
   keeps the Arabic phrase from dragging the English around it out of order. */
[lang^="ar"] { direction: rtl; unicode-bidi: isolate; font-family: 'Segoe UI', 'Noto Naskh Arabic', 'Traditional Arabic', 'Geeza Pro', sans-serif; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: min(1200px, 100% - 2rem); margin-inline: auto; }
.section { padding: 2.5rem 0 1rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; margin-bottom: 1.2rem; }
.section-head h2 { margin: 0; }
.section-head h2 .hi { color: var(--muted); font-size: 0.75em; font-weight: 500; }
.section-head p { margin: 0; }
.flash { margin: 1rem auto; padding: 0.75rem 1rem; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.flash.ok { border-color: #2f9e6a; } .flash.err { border-color: #d24a4a; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(19, 10, 6, 0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
/* The header gets a wider container than the page body. Everything else is
   capped at 1200px, but the header must fit the brand, seven shelves, the
   audience links and the search box on one row - at 1200px the audience links
   pushed the nav hard against the logo, and widening the VIEWPORT did not help
   because the cap is on the container, not the screen. */
.site-header .wrap { width: min(1460px, 100% - 2rem); }
.header-row { display: flex; align-items: center; gap: 1.75rem; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 0.6rem; }
/* The emblem's four spikes reach past its glowing circle AND past the flat
   edges of its plate, so neither border-radius:50% nor a radial fade can hide
   the plate without lopping the tips off. Present the plate as a deliberate
   panel instead: softly rounded, with a hairline edge so it reads as designed
   rather than as a pasted rectangle. Nothing is clipped. */
.logo-img { border-radius: 12px; }
.brand img { width: 44px; height: 44px; border-radius: 9px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--serif); font-size: 1.45rem; font-weight: 900; font-style: italic; color: var(--silver); letter-spacing: 0.01em; }
/* The italic "g" of Enigma hangs well below its line box, and at
   line-height:1.05 its tail was resting on the word beneath. The gap clears
   the descender rather than loosening the whole lockup. */
.brand-sub { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); white-space: nowrap; margin-top: 0.3rem; }
.site-nav { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.15rem; }
.nav-cats a { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.45rem; border-radius: 999px; font-weight: 500; font-size: 0.74rem; white-space: nowrap; color: var(--silver); border: 1px solid transparent; }
.nav-cats a:hover, .nav-cats a.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: #fff; }
.nav-ico { font-size: 0.85rem; }
.nav-aud { padding-left: 0.8rem; border-left: 1px solid var(--line); }
.nav-aud a { padding: 0.35rem 0.5rem; font-size: 0.78rem; color: var(--muted); border-radius: 8px; }
.nav-aud a:hover, .nav-aud a.is-active { color: #fff; background: var(--panel); }
.nav-search { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.nav-search input { background: transparent; border: 0; color: var(--text); padding: 0.4rem 0.75rem; width: 110px; font: inherit; font-size: 0.82rem; }
.nav-search input:focus { outline: none; }
.nav-search button { background: transparent; border: 0; color: var(--ice); padding: 0 0.6rem; cursor: pointer; font-size: 1rem; }
.nav-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 40px; cursor: pointer; padding: 8px; flex-direction: column; justify-content: space-between; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; background: var(--silver); border-radius: 2px; }

/* ---------- magazine cover ---------- */
.cover { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(1200px 700px at 30% 40%, #4e2e19 0%, var(--bg-2) 45%, var(--bg) 80%); }
.cover-glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(420px 420px at 22% 48%, rgba(252,249,242,0.26), transparent 70%),
  radial-gradient(900px 300px at 80% 100%, rgba(176,122,74,0.28), transparent 70%); }
/* align-items:start, not center: the text column is tall, so centring the
   emblem against it left the logo sitting visibly low on the cover. It now
   hangs from the top, nudged down just enough to line up with the masthead
   rather than the small issue line above it. */
.cover-grid { position: relative; display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.3fr; gap: 2rem; align-items: start; padding: 3rem 0 2.5rem; }
.cover-art { margin-top: 1.4rem; }
.cover-art img { width: min(100%, 520px); height: auto; aspect-ratio: 1; margin-inline: auto;
  border-radius: 20px; border: 1px solid rgba(244, 232, 216, 0.18); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55); }
.cover-issue { margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice); }
.cover-issue .hi { text-transform: none; letter-spacing: 0; }
/* The gradient is painted through background-clip:text, so the glyphs are only
   visible where the element's background box reaches. Playfair's italic "g"
   carries a deep descender that fell outside a 0.9 line box and was cut off
   mid-loop. padding-bottom extends the painted box past the descender; the
   negative margin takes the same space back so the layout below is unchanged. */
/* "Enigma" keeps its full size; "Style" rides smaller and lower beside it.
   Both offsets are in em so the lockup holds its proportions at every
   clamp() size. */
.masthead { font-size: clamp(4.2rem, 10vw, 8.5rem); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
  padding-bottom: 0.4em; margin: 0 0 -0.26em;
  background: linear-gradient(180deg, #ffffff 0%, var(--silver) 55%, #c69a6d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.masthead-style { font-size: 0.4em; position: relative; top: 0.3em; margin-left: 0.1em; }
.masthead-sub { margin: 0.2rem 0 1.4rem; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.masthead-sub .hi { text-transform: none; letter-spacing: 0; }
.cover-head { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; margin: 0; color: #fff; line-height: 1.1; }
.cover-head-hi { font-size: clamp(1.25rem, 2.4vw, 1.8rem); margin: 0.15rem 0 0.8rem; color: var(--gold); font-weight: 600; }
.cover-sub { margin: 0 0 1.4rem; color: var(--ice); max-width: 60ch; }
.cover-lines { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.2rem; }
.cover-lines li:first-child { grid-column: 1 / -1; }
.cover-lines a { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(19,10,6,0.5); transition: transform 0.15s, border-color 0.15s; }
.cover-lines a:hover { transform: translateY(-2px); border-color: var(--accent); }
.cl-num { font-family: var(--serif); font-size: 1.6rem; font-weight: 900; color: var(--accent); line-height: 1; }
.cl-body { display: flex; flex-direction: column; gap: 0.1rem; }
.cl-name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: #fff; }
.cl-name-hi { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.cl-line { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--silver); }
.cl-line-hi { font-size: 0.92rem; color: var(--gold); }
.cl-subs { font-size: 0.75rem; color: var(--muted); }
.cover-aud { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cover-aud-label { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-right: 0.3rem; }
.cover-strip { position: relative; display: flex; gap: 2.5rem; white-space: nowrap; overflow: hidden; border-top: 1px solid var(--line); padding: 0.55rem 0; font-size: 0.72rem; letter-spacing: 0.24em; color: var(--muted); }
.cover-strip span { animation: marquee 40s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .cover-strip span { animation: none; } }

/* ---------- cover slider (desktop only) ---------- */
/* Sits directly beneath the emblem panel and borrows its frame. One slide per
   shelf, crossfading; the active slide creeps in slowly (Ken Burns), a soft
   light sweeps across, and golden fireflies drift up through it - the
   "glitter in a forest" the brief asked for, kept in the site's own bronze.
   Hidden below 1024px, and site.js does not start it there either. */
.cover-slider { position: relative; margin: 1.2rem auto 0; width: min(100%, 520px); aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(244, 232, 216, 0.18); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55); background: var(--bg-2); isolation: isolate; }
.cover-slider .slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.1s ease; }
.slide.is-active { opacity: 1; z-index: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6.5s linear; }
.slide.is-active img { transform: scale(1.1); }
.slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19, 10, 6, 0.94) 0%, rgba(19, 10, 6, 0.4) 42%, transparent 68%); }
.slide-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.2rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
.slide-kicker { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.slide-name { font-family: var(--serif); font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1.1; }
.slide-name .hi { font-size: 0.6em; color: var(--ice); font-weight: 500; }
.slide-line { color: var(--gold); font-size: 0.95rem; }
.slide-cta { margin-top: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--ice); letter-spacing: 0.02em; }
.slide:hover .slide-cta { color: #fff; }
/* The light sweep: a soft diagonal band that glides across every few seconds. */
.cover-slider::after { content: ''; position: absolute; inset: -40%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(252, 249, 242, 0.08) 48%, rgba(252, 249, 242, 0.2) 50%, rgba(252, 249, 242, 0.08) 52%, transparent 58%);
  animation: sweep 7.5s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-65%); } 55%, 100% { transform: translateX(65%); } }
/* Fireflies: site.js scatters ~36 of these with random size, start, speed and
   drift as CSS variables. Two animations on two different properties, because
   a second animation on the same property would silently cancel the first. */
.sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.sparkles i { position: absolute; bottom: -4%; left: var(--l, 50%); display: block; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%;
  background: radial-gradient(circle, #fff7dc 0%, var(--gold) 45%, transparent 72%); box-shadow: 0 0 6px 1px rgba(217, 164, 65, 0.75); opacity: 0;
  animation: rise var(--d, 10s) linear var(--delay, 0s) infinite, twinkle 1.7s ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 0.85; } 100% { transform: translate3d(var(--x, 0px), -780px, 0); opacity: 0; } }
@keyframes twinkle { from { filter: brightness(0.6); } to { filter: brightness(1.9); } }
.slide-dots { position: absolute; top: 1rem; right: 1rem; z-index: 3; display: flex; gap: 6px; }
.slide-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.65); background: transparent; cursor: pointer; transition: background 0.3s, transform 0.3s; }
.slide-dots button.is-on { background: var(--gold); border-color: var(--gold); transform: scale(1.3); }
@media (max-width: 1024px) { .cover-slider { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cover-slider::after, .sparkles i { animation: none; }
  .slide img, .slide.is-active img { transform: none; transition: none; }
}

/* ---------- chips / buttons ---------- */
.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--line); color: var(--silver); background: rgba(43,26,18,0.65); }
.chip .hi { color: var(--muted); font-size: 0.9em; }
.chip.is-on, .chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); color: #fff; }
.chip-big { padding: 0.5rem 0.95rem; font-size: 0.9rem; }
.btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.1rem; border-radius: 10px; background: var(--bronze); color: #fff; font-weight: 600; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.btn:hover { background: var(--bronze-2); color: #fff; }
.btn-amz { background: #ff9900; color: #111; font-size: 0.85rem; padding: 0.5rem 0.85rem; }
.btn-amz:hover { background: #ffb340; color: #111; }

/* ---------- audiences ---------- */
.aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.aud-tile { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1.4rem 1rem; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); transition: transform 0.15s, border-color 0.15s; }
.aud-tile:hover { transform: translateY(-3px); border-color: var(--bronze-2); }
.aud-ico { font-size: 2.4rem; }
.aud-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: #fff; }
.aud-hi { color: var(--muted); font-size: 0.9rem; }

/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
/* Portrait, because fashion photography is: the supplied product shots are
   784x1168 and a landscape frame with object-fit:cover would show only a band
   across the middle, cutting off heads and shoes. */
.card-media { position: relative; aspect-ratio: 3 / 4; display: block; background: var(--bg-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
/* The supplied product shots were photographed on a navy backdrop, from when
   the site palette was navy. Fading the foot of the photo into the card colour
   softens the cool/warm join without touching the garments - tinting the whole
   image would misrepresent the colour of what is being sold. */
.card-media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 60%, color-mix(in srgb, var(--panel) 90%, transparent) 100%); }
.tile { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--accent) 55%, #000) 0%, var(--bg-2) 70%); }
.tile-ico { font-size: 3rem; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
.tile-word { font-family: var(--serif); font-style: italic; color: var(--ice); font-size: 0.95rem; opacity: 0.9; }
/* Bottom-left, not top-left: these are full-length portrait shots, so the top
   of the frame is the model's head and the badge was landing across faces.
   The foot of the frame is hem and backdrop. z-index lifts it above
   .card-media::after, which is painted later in DOM order and would otherwise
   cover it. */
.badge { position: absolute; bottom: 0.6rem; left: 0.6rem; z-index: 1; background: var(--gold); color: #231204; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 6px; }
.card-body { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 0.95rem 1rem; flex: 1; }
.card-kicker { margin: 0; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card-title { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 1rem; color: #fff; }
.card-title-hi { margin: 0; color: var(--ice); font-size: 0.92rem; }
.card-blurb { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); }
.card-foot { margin-top: auto; padding-top: 0.7rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.chip-aud { font-size: 0.72rem; }

/* ---------- category cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.cat-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.3rem 1.2rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 28%, var(--panel)) 0%, var(--bg-2) 70%); transition: transform 0.15s, border-color 0.15s; }
.cat-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.cat-ico { font-size: 2rem; }
.cat-card h3 { margin: 0; color: #fff; font-size: 1.25rem; }
.cat-card h3 .hi { color: var(--muted); font-size: 0.8em; font-weight: 500; }
.cat-tag { margin: 0; color: var(--gold); font-size: 0.95rem; }
[data-alt="hi"] .cat-tag { font-family: var(--deva); }
.cat-desc { margin: 0; font-size: 0.86rem; }
.cat-subs { margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cat-subs .chip { font-size: 0.7rem; padding: 0.2rem 0.55rem; }
.cat-count { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--ice); }

/* ---------- category hero & filters ---------- */
.cat-hero { padding: 2.2rem 0 1.6rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 30%, var(--bg-2)) 0%, var(--bg) 75%); }
.crumbs { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--muted); }
.cat-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0; color: #fff; }
.cat-hero h1 .hi { color: var(--muted); font-size: 0.6em; font-weight: 500; }
.cat-hero-ico { font-size: 0.85em; }
.cat-hero-tag { margin: 0.4rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--silver); }
.cat-hero-tag-hi { margin: 0.1rem 0 0; color: var(--gold); }
.cat-hero-desc { margin: 0.8rem 0 0; color: var(--muted); max-width: 70ch; }
.filters { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.2rem 0 0.4rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.filter-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); min-width: 58px; }
.empty { padding: 2rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.search-big { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.search-big input, .search-big select { font: inherit; padding: 0.65rem 0.9rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.search-big input { flex: 1; min-width: 220px; }

/* ---------- prose / error ---------- */
.prose { max-width: 76ch; color: var(--silver); }
.prose p { margin: 0 0 1rem; }
.prose a { text-decoration: underline; }
/* Long-form pages - the privacy policy above all - are headings and lists, not
   just paragraphs. Without these they fell back to browser defaults: a bullet
   list indented off the text column and headings with no air above them. */
.prose h2 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--ice); margin: 2.2rem 0 0.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--ice); margin: 1.6rem 0 0.5rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.prose li { margin-bottom: 0.55rem; }
.prose li:last-child { margin-bottom: 0; }
.prose strong { color: var(--ice); font-weight: 600; }
.prose code { font-size: 0.9em; padding: 0.1em 0.35em; border-radius: 5px; background: var(--panel); border: 1px solid var(--line); color: var(--bronze-2); overflow-wrap: anywhere; }
.prose .hi { display: block; color: var(--muted); margin-top: 0.3rem; }
.policy-updated { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.contact-list { list-style: none; padding: 0; }
.contact-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.error-page { text-align: center; padding: 5rem 0; }
.error-code { font-family: var(--serif); font-size: 5rem; font-weight: 900; margin: 0; color: var(--bronze-2); line-height: 1; }

/* ---------- footer ---------- */
.site-footer { margin-top: 3rem; padding: 2rem 0 2.5rem; border-top: 1px solid var(--line); background: #0d0603; }
.disclosure { padding: 0.9rem 1rem; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 0.86rem; color: var(--silver); margin-bottom: 1.8rem; }
.disclosure .hi { display: block; color: var(--muted); margin-top: 0.3rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.5rem; }
.footer-grid h4 { margin: 0 0 0.6rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.92rem; }
.footer-mark { margin-bottom: 0.5rem; }
.footer-brand { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 900; font-size: 1.5rem; color: var(--silver); }
.footer-brand span { display: block; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; }
.social { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 0.9rem 0 0; font-size: 0.9rem; }
.copy { margin: 1.8rem 0 0; font-size: 0.78rem; color: var(--muted); }
.copy.formed { margin-top: 0.4rem; }
.copy.formed a { color: var(--silver); text-decoration: underline; text-underline-offset: 3px; }
.copy.formed a:hover { color: var(--gold); }
/* Links that leave the site carry an arrow, so a new tab is never a surprise. */
.topbar-links a.ext, .nav-aud a.ext { color: var(--gold); }
.topbar-links a.ext span, .nav-aud a.ext span { font-size: 0.85em; }

/* ---------- responsive ---------- */
/* Seven shelves is more than a laptop header can hold. The audience links go
   first — they duplicate the "Shop for" tiles and the per-page For filter — and
   the whole nav collapses to the menu button earlier than it used to. Before
   this, 1100px and 1280px pushed the search box clean off the screen. */
/* ⚠ These must be written as `.site-nav .nav-aud`, not `.nav-aud`. The base
   rule `.site-nav ul { display: flex }` has specificity (0,1,1) and a media
   query adds none, so a bare `.nav-aud { display: none }` (0,1,0) silently
   lost and the audience links kept showing at every laptop width. The 1500px
   threshold is measured, not guessed: at 1440 the row still overflowed by 24px. */
@media (max-width: 1400px) {
  .nav-search input { width: 92px; }
  .site-nav .nav-aud { display: none; }
}
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 66px; flex-direction: column; align-items: stretch; gap: 0.8rem; padding: 1rem; background: var(--bg-2); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-wrap: wrap; }
  .site-nav .nav-aud { display: flex; border-left: 0; padding-left: 0; }
  .nav-search input { width: 100%; }
  .nav-search { width: 100%; }
  .cover-grid { grid-template-columns: 1fr; padding-top: 1.6rem; text-align: left; }
  .cover-art img { width: min(60vw, 300px); }
  .cover-lines { grid-template-columns: 1fr; }
  .aud-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .masthead { font-size: 4rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .card-foot { flex-direction: column; align-items: stretch; }
  .btn-amz { justify-content: center; }
}

/* ---------- utility bar: country + quick links ---------- */
/* Sits above the brand row. The flag is an SVG file, not an emoji: Windows
   has no flag glyphs and renders 🇮🇳 as the letters "IN". */
.topbar { background: rgba(0,0,0,0.35); border-bottom: 1px solid var(--line); font-size: 0.76rem; }
.topbar-row { display: flex; align-items: center; gap: 0.6rem 1.2rem; min-height: 32px; flex-wrap: wrap; }
.country { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }
.country .flag { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); display: block; }
.country-label { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; }
.country select { background: transparent; border: 1px solid transparent; color: var(--silver); font: inherit; font-size: 0.78rem; padding: 0.15rem 0.2rem; border-radius: 6px; cursor: pointer; max-width: 11rem; }
.country select:hover, .country select:focus { border-color: var(--line); outline: none; background: var(--panel); }
.country select option { background: var(--bg-2); color: var(--text); }
.country-go { background: transparent; border: 1px solid var(--line); color: var(--silver); font: inherit; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; cursor: pointer; }
.locate-me { background: transparent; border: 1px solid var(--line); color: var(--silver); font: inherit; font-size: 0.72rem; padding: 0.15rem 0.6rem; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.locate-me:hover { border-color: var(--bronze); color: #fff; }
.locate-me[disabled] { opacity: 0.6; cursor: wait; }
.locate-note { font-size: 0.72rem; color: var(--muted); }
.locate-note.is-err { color: #f0a0a0; }
/* Hidden once site.js takes over the select; the form still works without it. */
.js .country-go { display: none; }
.store-note { color: var(--muted); }
.soon-note { color: var(--gold); }
.topbar-links { margin-left: auto; display: flex; gap: 0.1rem; }
.topbar-links a { padding: 0.2rem 0.55rem; border-radius: 6px; color: var(--muted); }
.topbar-links a:hover, .topbar-links a.is-active { color: #fff; background: var(--panel); }
/* Eleven shelves do not fit one row at any laptop width; let the shelf pills
   wrap into two tidy rows and keep the audience links in the utility bar. */
.nav-cats { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.15rem; }
.site-nav .nav-aud { display: none; }

/* ---------- stylist card ---------- */
/* Sits under the cover slider, same width and radius, so the column reads as
   one stack. `.cover-art img` forces a square aspect on everything in the
   column; this selector outranks it and restores the portrait. */
.stylist-card { position: relative; display: block; margin: 1.2rem auto 0; width: min(100%, 520px); aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 0 6px rgba(201,162,39,0.06); }
.cover-art .stylist-card img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 20%; display: block; transition: transform 0.6s; }
.stylist-card:hover img { transform: scale(1.03); }
.stylist-cap { position: absolute; inset: auto 0 0 0; padding: 3.2rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.15rem;
  background: linear-gradient(to top, rgba(19,10,6,0.96) 0%, rgba(19,10,6,0.75) 45%, transparent 100%); }
.stylist-kicker { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.stylist-kicker .hi { text-transform: none; letter-spacing: 0; font-size: 1.05em; }
.stylist-name { font-family: var(--serif); font-size: 2rem; font-weight: 900; font-style: italic; color: #fff; line-height: 1.05; }
.stylist-line { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--silver); }
.stylist-line-alt { font-size: 0.95rem; color: var(--ice); }
@media (max-width: 540px) { .stylist-name { font-size: 1.6rem; } .stylist-cap { padding: 2.4rem 1rem 1rem; } }

/* ---------- the look grid ---------- */
/* Rail tiles: a picture, a name, a count. Portrait-ish so a banner crop still
   reads, and so a wall of them looks like a lookbook rather than a toolbar. */
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.look-tile { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.look-tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.look-media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--bg-2); overflow: hidden; }
.look-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.35s; }
.look-tile:hover .look-media img { transform: scale(1.04); }
/* Fallback while a rail has no banner: its initial, large, on the accent. */
.look-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: var(--serif); font-style: italic; font-weight: 900; font-size: 4rem; color: color-mix(in srgb, var(--accent) 75%, #fff);
  background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--accent) 45%, #000) 0%, var(--bg-2) 72%); }
.look-cap { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.85rem 0.85rem; }
.look-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.2; }
.look-alt { font-size: 0.85rem; color: var(--ice); }
.look-count { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 540px) { .look-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.7rem; } .look-initial { font-size: 2.8rem; } }

/* ---------- image brief ---------- */
/* A working document, so it is built to be read and copied rather than
   admired: monospace filenames, selectable prompts, no decoration. */
.brief h2 { margin-top: 2rem; }
.brief-shelf { margin: 1.4rem 0 0.6rem; font-size: 1.05rem; color: var(--bronze); text-transform: uppercase; letter-spacing: 0.08em; }
.brief-note { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0 1.4rem; }
.brief-note p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.brief-note p:last-child { margin-bottom: 0; }
.shot { border-left: 2px solid var(--line); padding: 0.5rem 0 0.5rem 0.9rem; margin-bottom: 0.7rem; }
.shot-file { margin: 0 0 0.25rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.86rem; color: var(--gold); user-select: all; }
.shot-prompt { margin: 0; font-size: 0.88rem; color: var(--silver); line-height: 1.5; user-select: all; }

.cat-hero-desc-alt { margin-top: 0.3rem; color: var(--ice); }

/* ---------- sub-shelf banners ---------- */
/* A rail can carry its own image: the Paris Hilton banner above her fragrances,
   a Wall Art banner above the prints. Wide and short, so it sets the mood
   without pushing the products below the fold. */
.cat-hero.has-banner { padding-top: 0; }
.cat-banner { margin: 0 0 1.2rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
/* ⚠ These banners are fed portrait photographs as often as wide ones - a
   rail's hero doubles as its Look tile, which wants 4:5. Cover therefore
   takes a thin band out of a tall picture, and at 30% that band landed on a
   mid-torso. 18% puts it on the head and shoulders, which reads as a portrait
   crop rather than a wall of fabric. */
.cat-banner img { display: block; width: 100%; max-height: 190px; object-fit: cover; object-position: center 10%; }
.sub-banner { display: block; margin: 0 0 0.9rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.sub-banner img { display: block; width: 100%; max-height: 130px; object-fit: cover; object-position: center 10%; transition: transform 0.3s; }
.sub-banner:hover img { transform: scale(1.02); }
@media (max-width: 540px) {
  .cat-banner img { max-height: 140px; }
  .sub-banner img { max-height: 100px; }
}

/* ---------- fashion talk ---------- */
.talk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.post-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-2); }
.post-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.post-tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 3rem; color: var(--bronze); }
.post-kind { position: absolute; top: 0.6rem; left: 0.6rem; background: var(--gold); color: #231204; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: 6px; }
.post-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.95rem 1rem 1.1rem; flex: 1; }
.post-meta { margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.post-title { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; }
.post-title a { color: #fff; }
.post-title-hi { margin: 0; color: var(--ice); font-size: 0.92rem; }
.post-excerpt { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--muted); }
.post-more { margin-top: auto; padding-top: 0.6rem; font-size: 0.82rem; color: var(--bronze); }

.talk-hero .cat-hero-ico { color: var(--gold); }
.talk-post-head { padding-top: 1.6rem; max-width: 900px; }
.talk-post-head h1 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.12; margin: 0.4rem 0 0.5rem; color: #fff; }
.post-kind-line { margin: 0.6rem 0 0; }
.post-kind-line .post-kind { position: static; display: inline-block; }
.talk-title-hi { margin: 0 0 0.6rem; color: var(--ice); font-size: 1.15rem; }
.talk-excerpt { font-size: 1.08rem; color: var(--silver); margin: 0 0 0.6rem; }
/* Post hero.
   ⚠ The covers are natively 784px wide - that is the size the whole library was
   made at, and there are no larger originals. The old rule set width:100%, so
   on a desktop wrap of ~1490px every hero was blown up 1.9x and went soft; and
   because it also forced object-fit:cover into a 560px-tall band, a portrait
   cover was cropped to its top quarter, showing a magnified corner of the
   photograph rather than the photograph.
   width:auto is the fix and it is self-correcting: an <img> at auto width
   renders at its natural size, so max-width/max-height can only ever shrink it.
   Nothing is upscaled, whatever a future upload turns out to be, and nothing is
   cropped - which also means no cover can quietly lose its subject the way a
   fixed crop box does. */
.talk-cover { margin-top: 1.2rem; display: flex; justify-content: center; }
.talk-cover img {
  width: auto; max-width: 100%; max-height: 620px;
  object-fit: contain;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.talk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 2rem; margin-top: 1.6rem; }
.talk-body { max-width: 720px; font-size: 1.02rem; line-height: 1.7; }
.talk-body h2 { font-family: var(--serif); font-size: 1.45rem; margin: 1.6rem 0 0.5rem; color: #fff; }
.talk-body h3 { font-size: 1.1rem; margin: 1.2rem 0 0.4rem; color: var(--silver); }
.talk-body p { margin: 0 0 0.9rem; }
.talk-body ol, .talk-body ul { padding-left: 1.3rem; margin: 0 0 0.9rem; }
.talk-body li { margin-bottom: 0.3rem; }
.talk-side { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.heart-form { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.heart-btn { align-self: flex-start; background: transparent; border: 1px solid var(--line); color: #ff6b81; font: inherit; font-size: 1.1rem; font-weight: 700; padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer; transition: transform 0.15s, background 0.15s; }
.heart-btn:hover { background: rgba(255,107,129,0.12); transform: scale(1.04); }
.heart-btn.is-done { background: rgba(255,107,129,0.18); border-color: #ff6b81; }
.share { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.share-label { width: 100%; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.share-btn { background: var(--bg-2); border: 1px solid var(--line); color: var(--silver); font: inherit; font-size: 0.8rem; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; }
.share-btn:hover { border-color: var(--bronze); color: #fff; }
.share-btn.is-done { border-color: #2f9e6a; color: #9ee6bd; }
.share-native { border-color: var(--bronze); color: #fff; }

/* ---------- share menu (top bar) ---------- */
.share-menu { position: relative; }
.share-menu-btn { list-style: none; cursor: pointer; padding: 0.2rem 0.55rem; border-radius: 6px; color: var(--gold); white-space: nowrap; }
.share-menu-btn::-webkit-details-marker { display: none; }
.share-menu-btn:hover, .share-menu[open] .share-menu-btn { color: #fff; background: var(--panel); }
.share-pop {
  position: absolute; z-index: 60; top: calc(100% + 0.4rem); left: 0; min-width: 13rem;
  display: flex; flex-direction: column; padding: 0.35rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.share-pop-item {
  background: transparent; border: 0; text-align: left; font: inherit; font-size: 0.82rem;
  color: var(--silver); padding: 0.4rem 0.6rem; border-radius: 8px; cursor: pointer;
}
.share-pop-item:hover { background: var(--panel); color: #fff; }
.share-pop-item.is-done { color: #9ee6bd; }
/* In the collapsible menu the bar is not a row, so the panel sits inline. */
.nav-share .share-pop { position: static; box-shadow: none; margin-top: 0.3rem; }
.nav-share .share-menu-btn { padding: 0.35rem 0.5rem; font-size: 0.78rem; }
@media (max-width: 1024px) {
  .topbar-links { display: none; }
  .site-nav .nav-aud { display: flex; }
  .nav-cats { justify-content: flex-start; }
  .talk-layout { grid-template-columns: 1fr; }
  .talk-side { position: static; }
}
@media (max-width: 540px) {
  .store-note { display: none; }
  /* One row: flag, picker, locate button. The picker's basis is zero so it
     never claims the line for itself - it fills whatever the button leaves -
     and its label goes, since the flag already says what the row is. The
     locate message keeps a full-width basis so it wraps beneath when shown.
     (A previous rule gave the picker the whole row, which pushed the button
     onto a second line - the exact thing this replaces.) */
  .topbar-row { gap: 0.4rem 0.5rem; }
  .country-label { display: none; }
  .country { flex: 1 1 0; min-width: 0; }
  .country select { flex: 1; min-width: 0; max-width: none; }
  .locate-me { flex: 0 0 auto; }
  .locate-me .hi { display: none; }
  .locate-note { flex: 1 1 100%; }
  .talk-grid { grid-template-columns: 1fr; }
}

/* Admin: one photograph per store, on the product page. */
.market-photos { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.market-photo { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; }
.market-photo img { max-height: 64px; border-radius: 6px; }

/* ---------------------------------------------------------------------------
   Newsletter sign-up: the popup and the /newsletter form.
   A centred card on desktop; a bottom sheet on phones, which covers less of
   the page and is kinder to someone who arrived from search.
   ------------------------------------------------------------------------- */
.nl-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(8, 4, 2, 0.62); padding: 1rem; }
.nl-pop[hidden] { display: none; }
.nl-pop-card { position: relative; width: min(440px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.5rem 1.3rem; color: var(--text); }
.nl-pop-x { position: absolute; top: 0.45rem; right: 0.55rem; background: transparent; border: 0; color: var(--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.5rem; }
.nl-pop-x:hover { color: var(--text); }
.nl-pop-kicker { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: var(--bronze-2); margin: 0 0 0.4rem; }
.nl-pop-card h2 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.5rem; color: #fff; }
.nl-pop-sub { color: var(--muted); font-size: 0.95rem; margin: 0 0 1rem; }
.nl-form { position: relative; display: flex; flex-direction: column; gap: 0.7rem; }
.nl-form input[type=email] { padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; }
.nl-form input[type=email]:focus { outline: 2px solid var(--bronze-2); outline-offset: 1px; }
.nl-form .btn { justify-content: center; }
.nl-consent { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.nl-consent input { margin-top: 0.2rem; flex: none; }
.nl-consent a { color: var(--bronze-2); }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-msg { margin: 0; font-size: 0.9rem; min-height: 1.2em; }
.nl-msg.ok { color: #9fd49a; }
.nl-msg.err { color: #ff8f8f; }
.nl-page-form { max-width: 460px; margin-top: 1rem; }
body.nl-open { overflow: hidden; }
@media (max-width: 640px) {
  .nl-pop { place-items: end center; padding: 0; background: rgba(8, 4, 2, 0.45); }
  .nl-pop-card { width: 100%; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: 1.6rem; }
}

/* ---------------------------------------------------------------------------
   Phones and tablets: the compact cover.
   The first screen carries the emblem and the name, Rim Bose and the shelf
   slider side by side, and a search box in the header. The numbered shelf
   list folds behind one bar. Everything here is below 1024px only - the
   desktop cover is untouched.
   Written last so it wins over the older narrow-screen rules above without
   raising any selector's weight.
   ------------------------------------------------------------------------- */
.m-search { display: none; }
.shelves-check, .shelves-toggle { display: none; }
@media (max-width: 1024px) {
  /* Header. The country strip scrolls away (the header sticks 33px above the
     top, the strip's height), and the brand row stays with search in it. */
  .site-header { top: -33px; }
  .header-row { min-height: 56px; gap: 0.55rem; }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: 1.2rem; }
  .brand-sub { display: none; }
  .site-nav { top: 100%; }
  .site-nav .nav-search { display: none; }
  .m-search { display: flex; flex: 1; min-width: 0; margin-left: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
  .m-search:focus-within { border-color: var(--bronze-2); }
  .m-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); padding: 0.5rem 0.2rem 0.5rem 0.9rem; font: inherit; font-size: 0.9rem; }
  .m-search input:focus { outline: none; }
  .m-search input::placeholder { color: var(--muted); }
  .m-search button { background: transparent; border: 0; color: var(--ice); padding: 0 0.8rem; font-size: 1.1rem; cursor: pointer; }
  .nav-toggle { margin-left: 0; flex: none; }

  /* Cover. Both columns dissolve (display: contents) so their pieces can be
     placed on one six-column grid: emblem | name, then stylist | slider,
     then the headline and the shelf bar. Nothing in the markup is repeated. */
  .cover-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem 0.6rem; align-items: center; padding: 0.9rem 0 1.1rem; max-width: 720px; margin-inline: auto; }
  .cover-art, .cover-text { display: contents; }
  .cover-art > .logo-img { grid-column: 1; grid-row: 1 / 3; width: 100%; max-width: 92px; margin: 0; border-radius: 12px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
  .masthead { grid-column: 2 / -1; grid-row: 1; align-self: end; font-size: clamp(2.3rem, 11vw, 3.8rem); margin: 0 0 -0.34em; }
  .masthead-sub { grid-column: 2 / -1; grid-row: 2; align-self: start; margin: 0; font-size: 0.64rem; letter-spacing: 0.2em; }
  .masthead-sub .hi { display: none; }
  .stylist-card, .cover-slider { grid-row: 3; width: 100%; height: clamp(270px, 50vh, 470px); aspect-ratio: auto; margin: 0.4rem 0 0; border-radius: 16px; }
  .stylist-card { grid-column: 1 / 4; }
  .cover-slider { grid-column: 4 / -1; display: block; touch-action: pan-y; }
  .cover .cover-slider .slide img { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .stylist-cap { padding: 2.2rem 0.75rem 0.8rem; }
  .stylist-kicker { font-size: 0.56rem; letter-spacing: 0.16em; }
  .stylist-kicker .hi, .stylist-line, .stylist-line-alt { display: none; }
  .stylist-name { font-size: 1.3rem; }
  .slide-cap { padding: 2rem 0.75rem 0.8rem; gap: 0.1rem; }
  .slide-kicker { font-size: 0.56rem; letter-spacing: 0.16em; }
  .slide-name { font-size: 1.15rem; }
  .slide-name .hi { display: block; font-size: 0.72em; }
  .slide-line { display: none; }
  .slide-cta { font-size: 0.7rem; margin-top: 0.2rem; }
  .slide-dots { top: 0.6rem; right: 0.6rem; gap: 4px; }
  .slide-dots button { width: 5px; height: 5px; }
  .cover-issue, .cover-head-hi, .cover-sub, .cover-aud { display: none; }
  .cover-head, .shelves-toggle, .cover-lines { grid-column: 1 / -1; }
  .cover-head { margin: 0.55rem 0 0.1rem; text-align: center; font-size: 1.25rem; font-style: italic; font-weight: 500; color: var(--ice); letter-spacing: 0.01em; }

  /* The 01-15 bar, and the list it opens. */
  .shelves-check { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .shelves-toggle { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.95rem; border-radius: 12px; cursor: pointer; user-select: none;
    border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line)); background: rgba(19, 10, 6, 0.55);
    color: var(--silver); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
  .st-num { font-family: var(--serif); font-size: 1.05rem; font-weight: 900; letter-spacing: 0; color: var(--gold); }
  .st-chev { margin-left: auto; color: var(--gold); transition: transform 0.2s; }
  .st-open { display: none; }
  .shelves-check:checked + .shelves-toggle .st-open { display: inline; }
  .shelves-check:checked + .shelves-toggle .st-shut { display: none; }
  .shelves-check:checked + .shelves-toggle .st-chev { transform: rotate(180deg); }
  .shelves-check:focus-visible + .shelves-toggle { outline: 2px solid var(--bronze-2); outline-offset: 2px; }
  .cover-lines { display: none; margin: 0.1rem 0 0; gap: 0.45rem; }
  .shelves-check:checked ~ .cover-lines { display: grid; }
  .cover-lines a { padding: 0.55rem 0.7rem; gap: 0.6rem; }
  .cl-num { font-size: 1.3rem; }
  .cl-line { font-size: 0.95rem; }

  /* The sections below: tighter, so the page reads as one short magazine
     rather than a long scroll. */
  .section { padding: 1.5rem 0 0.4rem; }
  .section-head { margin-bottom: 0.8rem; }
  .section-head p { font-size: 0.85rem; }
  .aud-grid { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
  .aud-tile { padding: 0.75rem 0.3rem; }
  .aud-ico { font-size: 1.6rem; }
  .aud-name { font-size: 0.95rem; }
  .aud-hi { font-size: 0.72rem; }
}
@media (max-width: 540px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .cat-card { padding: 0.85rem 0.8rem 0.8rem; gap: 0.2rem; }
  .cat-ico { font-size: 1.5rem; }
  .cat-card h3 { font-size: 1rem; }
  .cat-card h3 .hi { display: block; }
  .cat-tag { font-size: 0.8rem; }
  .cat-desc, .cat-subs { display: none; }
  .cat-count { margin-top: 0.35rem; font-size: 0.78rem; }
  .grid { gap: 0.7rem; }
}
/* On the home page the cover already spells the name out right under the
   header, so the header keeps only the emblem and gives the room to search. */
@media (max-width: 1024px) { body:has(.cover) .site-header .brand-text { display: none; } }
/* The narrowest phones: the header wordmark gives its room to the search box,
   and the cover's small type is tightened so no label breaks mid-phrase. */
@media (max-width: 370px) {
  .brand-text { display: none; }
  .shelves-toggle { gap: 0.55rem; padding: 0.65rem 0.75rem; font-size: 0.66rem; letter-spacing: 0.1em; }
  .st-num { white-space: nowrap; font-size: 0.95rem; }
  .stylist-kicker, .slide-kicker { font-size: 0.5rem; letter-spacing: 0.1em; }
  .stylist-name { font-size: 1.15rem; }
  .slide-name { font-size: 1rem; }
  .slide-cta { display: none; }
}

/* ---------------------------------------------------------------------------
   Enigma Science — the exclusive section.
   Fashion Talk is bronze; this one is kept cooler and cleaner, so a reader can
   see at a glance that they are in the part of the site that explains rather
   than styles. It borrows the talk layout wholesale: only the badge, the hero
   product panel and the disclaimer are its own.
   ------------------------------------------------------------------------- */
.sci-hero { background: linear-gradient(120deg, rgba(111,174,143,.22) 0%, var(--bg) 75%); }
.sci-kind { background: #8fd3b0; color: #10301f; }
.post-card.sci-card .post-tile { color: #8fd3b0; }
.sci-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sci-head-row .share-menu-btn { border: 1px solid var(--line); }
.sci-body h2 { border-left: 3px solid #6fae8f; padding-left: .7rem; }
/* The molecule boxes an article uses to put one compound under the light. */
.sci-body .molecule { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: baseline;
  margin: 1rem 0; padding: .9rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid #6fae8f;
  border-radius: 10px; background: rgba(111,174,143,.07); }
.sci-body .molecule dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sci-body .molecule dd { margin: 0 0 .35rem; }
.sci-body .verdict { margin: 1.4rem 0; padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid rgba(143,211,176,.45);
  background: rgba(111,174,143,.1); }
.sci-body .warn { margin: 1.4rem 0; padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid rgba(224,138,110,.5);
  background: rgba(224,138,110,.1); }
.sci-body .warn strong { color: #ffbfa8; }
.sci-disclaimer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.sci-side-note { margin: 0; }
/* The product the article is actually about: wider than a card, with room to
   say why it is here. The alternatives below stay ordinary cards. */
.sci-hero-product { display: grid; grid-template-columns: 320px 1fr; gap: 1.4rem; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.shp-media { display: block; position: relative; aspect-ratio: 3 / 4; background: var(--bg-2); }
.shp-media img { width: 100%; height: 100%; object-fit: cover; }
.shp-body { display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem 1.4rem 1.4rem; }
.shp-body h3 { margin: 0; font-size: 1.5rem; color: #fff; }
.shp-blurb { margin: .3rem 0 0; color: var(--silver); }
.shp-note { margin: .2rem 0 0; }
.shp-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: auto 0 0; padding-top: .9rem; }
.btn-ghost-line { background: transparent; border: 1px solid var(--line); color: var(--ice); }
.btn-ghost-line:hover { border-color: var(--bronze); background: rgba(176,122,74,.12); color: #fff; }
/* The home strip. */
.sci-strip-note { color: var(--muted); }
@media (max-width: 720px) {
  .sci-hero-product { grid-template-columns: 1fr; }
  .shp-media { aspect-ratio: 4 / 3; }
  .shp-body { padding: 1rem 1.05rem 1.15rem; }
  .shp-body h3 { font-size: 1.2rem; }
  .shp-cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   "Orders clicked" — the panel after a tap through to Amazon, and /orders.
   Same bottom-sheet manners as the newsletter popup: a card on a desktop, a
   sheet on a phone, and never covering more than it must.
   ------------------------------------------------------------------------- */
.ord-pop { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(8, 4, 2, 0.62); padding: 1rem; }
.ord-pop[hidden] { display: none; }
.ord-pop-card { position: relative; width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.5rem 1.2rem; color: var(--text); }
.ord-item { font-family: var(--serif); font-size: 1.15rem; color: #fff; margin: 0.2rem 0 0.5rem; }
.ord-email { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.7rem 0 0.2rem; }
.ord-email > label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.ord-email input[type=email] { padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; }
.ord-email input[type=email]:focus { outline: 2px solid var(--bronze-2); outline-offset: 1px; }
.ord-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.9rem 0 0.2rem; }
.ord-btns .btn { flex: 1 1 auto; justify-content: center; }
.ord-foot { margin-top: 0.5rem; }
@media (max-width: 640px) {
  .ord-pop { place-items: end center; padding: 0; background: rgba(8, 4, 2, 0.5); }
  .ord-pop-card { width: 100%; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: 1.5rem; }
}

.ord-list { display: flex; flex-direction: column; gap: 0.8rem; }
.ord-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; align-items: center;
  padding: 0.8rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.ord-row.status-ordered, .ord-row.status-delivered { border-color: color-mix(in srgb, #6fae8f 55%, var(--line)); }
.ord-row.status-not_bought { opacity: 0.68; }
.ord-thumb { display: block; width: 92px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.ord-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ord-body h3 { margin: 0.1rem 0 0.2rem; font-family: var(--sans); font-size: 1.02rem; color: #fff; }
.ord-when { margin: 0.1rem 0 0.55rem; }
.ord-status { color: var(--ice); }
.ord-set { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0; }
.ord-set .chip { cursor: pointer; font: inherit; font-size: 0.78rem; }
.ord-account p { margin: 0 0 0.6rem; max-width: 70ch; }
.ord-signin { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.6rem 0 0.8rem; }
.ord-signin label { width: 100%; font-size: 0.85rem; color: var(--muted); }
.ord-signin input { flex: 1; min-width: 220px; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
.ord-forget { margin: 0.2rem 0 0.8rem; }
@media (max-width: 640px) {
  .ord-row { grid-template-columns: 72px 1fr; }
  .ord-thumb { width: 72px; }
  .ord-again { grid-column: 1 / -1; justify-content: center; }
}
/* The orders account: sign in, and set a password with an emailed code. */
.ord-auth { max-width: 460px; }
.ord-auth-form { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1rem; }
.ord-auth-form label { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.ord-auth-form input { padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
.ord-auth-form input:focus { outline: 2px solid var(--bronze-2); outline-offset: 1px; }
.ord-auth-form input[readonly] { opacity: 0.7; }
.ord-auth-form button { margin-top: 0.9rem; justify-content: center; }
.ord-account-do { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ord-account-do form { margin: 0; }
/* The account link in the top bar: a quiet pill, so it reads as "you" rather
   than as another shelf. */
.topbar-links a.acct, .nav-aud a.acct { border: 1px solid var(--line); border-radius: 999px; color: var(--ice); }
.topbar-links a.acct:hover, .nav-aud a.acct:hover { border-color: var(--bronze); color: #fff; background: var(--panel); }
/* Nykaa's button, in their pink rather than Amazon's orange: the colour is
   part of telling the shopper which shop the tap opens. */
.btn-nyk { background: #fc2779; color: #fff; font-size: 0.85rem; padding: 0.5rem 0.85rem; }
.btn-nyk:hover { background: #ff4d91; color: #fff; }