/* Storefront design system v1 — "hang-tag" shop. One system, four brand accents.
   The memorable element is the tag: a bevelled label whose punched hole encodes link status. */
@font-face { font-family: Archivo; src: url(/fonts/archivo-latin-var.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --paper: #FCFCFA;      /* page */
  --ground: #ECE9F0;     /* lilac-grey shelf ground that tags sit on */
  --ink: #2A2130;        /* aubergine ink */
  --ink-2: #625868;      /* secondary text */
  --line: #D6D0DB;
  --white: #FFFFFF;
  --accent: #4E5E2A;     /* brand accent, overridden per brand */
  --accent-ink: #FFFFFF;
  --accent-soft: #E3E8D3;
  --focus: #3D5AFE;

  --f-xs: .8125rem; --f-s: .9375rem; --f-m: 1.0625rem; --f-l: 1.375rem; --f-xl: 1.875rem; --f-2xl: 2.75rem; --f-3xl: 3.75rem;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --wrap: 76rem; --gutter: clamp(1rem, 4vw, 2.5rem);
  --bevel: 12px;
}
body[data-brand="nails"] { --accent: #A3214F; --accent-soft: #F5DDE6; }
body[data-brand="wear"]  { --accent: #2D4C80; --accent-soft: #DCE4F2; }
body[data-brand="hair"]  { --accent: #8F5414; --accent-soft: #F2E3CF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s5); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--f-m)/1.6 Archivo, system-ui, sans-serif; font-stretch: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 750; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -4rem; background: var(--ink); color: var(--white); padding: var(--s2) var(--s4); z-index: 10; }
.skip:focus { top: var(--s2); }

/* ---- preview strip + masthead ---- */
.preview-strip { background: repeating-linear-gradient(-45deg, #FFF3B0 0 10px, #FFEB8A 10px 20px); color: #3B2F00; font-size: var(--f-xs); padding: var(--s1) var(--gutter); text-align: center; }
.mast { max-width: var(--wrap); margin: 0 auto; padding: var(--s4) var(--gutter); display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; border-bottom: 1px solid var(--line); }
/* Wordmark: name inside a left-pointing hang tag with a punched hole. */
.mark { --h: 46px; display: inline-flex; align-items: center; height: var(--h); padding: 0 1.05rem 0 calc(var(--h) * .62); background: var(--accent); color: var(--accent-ink); text-decoration: none;
  clip-path: polygon(calc(var(--h) * .36) 0, 100% 0, 100% 100%, calc(var(--h) * .36) 100%, 0 50%); position: relative; flex: none;
  transform-origin: calc(var(--h) * .3) 50%; transition: transform 420ms cubic-bezier(.34, 1.36, .64, 1); }
.mark-hole { position: absolute; left: calc(var(--h) * .24); top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--paper); }
.mark-name { font-weight: 800; font-stretch: 84%; font-size: 1.3rem; letter-spacing: -.012em; line-height: 1; white-space: nowrap; }
.mark-sm { --h: 38px; }
.mark-sm .mark-name { font-size: 1.05rem; }
@media (hover: hover) and (pointer: fine) { .mark:hover { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .mark { transition: none; } .mark:hover { transform: none; } }
.mast-nav { display: flex; gap: var(--s5); font-size: var(--f-s); font-weight: 600; }
.mast-nav a { text-decoration: none; padding: var(--s1) 0; border-bottom: 2px solid transparent; }
.mast-nav a:hover, .mast-nav a[aria-current] { border-color: var(--accent); }
.mast-help { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--f-s); color: var(--ink-2); text-decoration: none; }
.mast-help:hover .help-text, .mast-help[aria-current] .help-text { text-decoration: underline; text-underline-offset: .2em; }
.help-dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: .8125rem; font-weight: 750; }

/* ---- shared actions ---- */
.act { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s4); border-radius: 6px; font-weight: 650; font-size: var(--f-s); text-decoration: none; white-space: nowrap; border: 2px solid transparent; cursor: pointer; font-family: inherit; }
.act-live { background: var(--accent); color: var(--accent-ink); }
.act-live:hover { background: color-mix(in srgb, var(--accent) 82%, black); }
/* Retailer button: amber outline in the retailer's own name, per user direction (no Amazon logo until trademark use is cleared). */
.act-retailer { gap: .35em; background: #FFF6E5; border: 1.5px solid #E8A33D; color: #2B1D06; min-height: 44px; padding: 0 var(--s4); font-weight: 650; }
.act-retailer:hover { background: #FFEBC7; border-color: #C9851F; }
.act-held { border: 2px dashed var(--ink-2); color: var(--ink); background: transparent; }
.act-quiet { border-color: var(--ink); color: var(--ink); background: transparent; }
.act-none { color: var(--ink-2); font-weight: 600; border: 1.5px dashed var(--line); background: var(--paper); cursor: default; } /* same box as the retailer button so every card keeps one shape */
.more { font-weight: 650; font-size: var(--f-s); }

/* ---- status holes (shape + text, never color alone) ---- */
.hole { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; }
.hole-active { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hole-held { border: 2.5px solid var(--ink); background: var(--white); }
.hole-prepared { border: 2px dashed var(--ink-2); background: transparent; }

/* ---- home ---- */
.intro { max-width: var(--wrap); margin: 0 auto; padding: var(--s6) var(--gutter) var(--s5); display: grid; gap: var(--s3); }
.intro h1 { font-size: clamp(2rem, 6vw, var(--f-3xl)); font-stretch: 118%; font-weight: 800; letter-spacing: -.02em; max-width: 16ch; }
.intro p { max-width: 58ch; color: var(--ink-2); }
.intro .act { margin-right: var(--s2); }

.doors { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) var(--s6); }
.door-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.door a { display: block; position: relative; text-decoration: none; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground); }
.door img { width: 100%; height: 100%; object-fit: cover; }
.door-label { position: absolute; left: 0; bottom: 0; display: grid; background: var(--white); padding: var(--s3) var(--s4) var(--s3) var(--s5); clip-path: polygon(var(--bevel) 0, 100% 0, 100% 100%, 0 100%, 0 var(--bevel)); }
.door-name { font-weight: 800; font-stretch: 80%; font-size: var(--f-l); line-height: 1.1; }
.door-count { font-size: var(--f-xs); color: var(--ink-2); }
.door a:hover .door-name { text-decoration: underline; text-decoration-thickness: 2px; }

.shelf, .edits, .how { max-width: var(--wrap); margin: 0 auto; padding: var(--s6) var(--gutter); }
.shelf { background: var(--ground); max-width: none; }
.shelf > *, .shelf > .tags { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin-inline: auto; }
.shelf-head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2) var(--s5); align-items: baseline; margin-bottom: var(--s5); }
.shelf-head h2, .edits h2, .how h2, .coll-head h1 { font-size: var(--f-xl); font-stretch: 110%; letter-spacing: -.01em; }
.shelf-head p { color: var(--ink-2); font-size: var(--f-s); max-width: 60ch; }

/* ---- the tag ---- */
.tags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: var(--s4); }
.tag { position: relative; background: var(--white); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2);
  clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, 0 100%, 0 var(--bevel)); }
.tag-state, .piece-meta { display: flex; align-items: center; gap: var(--s2); }
.tag-state { font-size: var(--f-xs); font-weight: 650; }
.piece-meta .hole { width: 11px; height: 11px; }
.tag-fig { margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s1); position: relative; }
.tag-fig figcaption { position: absolute; right: var(--s2); bottom: var(--s2); background: rgb(255 255 255 / .88); color: var(--ink-2); font-size: .6875rem; padding: 1px var(--s2); border-radius: 3px; }
.pic { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ground); }
.pic img { position: absolute; max-width: none; height: auto; }
.pic img.pic-own { position: static; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.pic-none { display: grid; place-items: center; color: var(--ink-2); font-size: var(--f-xs); background: repeating-linear-gradient(45deg, var(--ground) 0 8px, var(--white) 8px 16px); }
.pic-thumb { width: 72px; flex: none; }
.tag-name { font-size: var(--f-l); font-weight: 780; font-stretch: 78%; line-height: 1.1; }
.tag-match { font-size: var(--f-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-note { font-size: var(--f-s); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Equal line budgets keep every card's button on the same baseline across a row. */
.tag-name, .tag-from { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2lh; }
.tag-note { min-height: 3lh; }
.tag-foot { margin-top: auto; padding-top: var(--s3); display: grid; gap: var(--s2); justify-items: start; border-top: 1px dashed var(--line); }
.tag-from { font-size: var(--f-xs); color: var(--ink-2); }


/* ---- home edit list ---- */
.edits h2 { margin-bottom: var(--s5); }
.edit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--s6) var(--s5); }
.edit-card { display: grid; grid-template-rows: auto 1fr; gap: var(--s4); align-items: start; }
.edit-card-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ground); }
.edit-card-body { display: grid; gap: var(--s3); justify-items: start; align-content: start; height: 100%; }
.edit-card-body .act { margin-top: auto; }
.edit-card-room { font-size: var(--f-xs); font-weight: 650; color: var(--accent); }
.edit-card h3 { font-size: var(--f-l); font-stretch: 90%; }
.edit-card h3 a { text-decoration: none; }
.edit-card h3 a:hover { text-decoration: underline; }
.mini { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); font-size: var(--f-s); }
.mini li { display: flex; gap: var(--s2); align-items: center; }
.how { border-top: 1px solid var(--line); display: grid; gap: var(--s3); }
.how p { max-width: 62ch; }

/* ---- collection ---- */
.coll-head { max-width: var(--wrap); margin: 0 auto; padding: var(--s6) var(--gutter) var(--s4); display: grid; gap: var(--s3); }
.coll-head p { max-width: 64ch; color: var(--ink-2); }
.filters { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: var(--s3); }
.chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips legend { float: left; font-size: var(--f-xs); font-weight: 650; color: var(--ink-2); width: 7rem; padding: 0; line-height: 36px; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s3); border: 1.5px solid var(--line); border-radius: 999px; font-size: var(--f-s); background: var(--white); }
.chips span img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin: 0 var(--s2) 0 calc(-1 * var(--s2)); }
.chips input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.result-count { max-width: var(--wrap); margin: var(--s4) auto var(--s3); padding: 0 var(--gutter); font-size: var(--f-s); color: var(--ink-2); }
.tags-grid { max-width: var(--wrap); margin: 0 auto var(--s7); padding: var(--s4); background: var(--ground); }
@media (min-width: 761px) { .tags-grid { width: calc(100% - 2 * var(--gutter)); } }
.tag[hidden], .piece[hidden] { display: none; }
.empty { max-width: var(--wrap); margin: 0 auto var(--s7); padding: var(--s5) var(--gutter); display: grid; gap: var(--s3); justify-items: start; }

/* ---- shoppable edit ---- */
.edit { max-width: var(--wrap); margin: 0 auto; padding: var(--s5) var(--gutter) var(--s7); display: grid; gap: var(--s6); }
/* Each sticky element lives in its own two-column block, so it stops at the end of that block and never slides over the next one. */
.edit-stage, .edit-guide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5) var(--s6); align-items: start; }
.edit-guide { border-top: 1px solid var(--line); padding-top: var(--s6); }
.edit-head { display: grid; gap: var(--s3); max-width: 52rem; }
.crumbs { font-size: var(--f-xs); color: var(--ink-2); }
.edit-head h1 { font-size: clamp(1.75rem, 4.2vw, var(--f-2xl)); font-stretch: 108%; letter-spacing: -.015em; }
.lede { color: var(--ink-2); max-width: 62ch; }
.edit-fig { margin: 0; position: sticky; top: var(--s4); align-self: start; }
.edit-fig img { width: 100%; max-height: calc(100svh - 6rem); object-fit: contain; background: var(--ground); }
.edit-fig figcaption { font-size: var(--f-xs); color: var(--ink-2); margin-top: var(--s2); }
.pieces { display: grid; gap: var(--s4); align-content: start; }
.pieces-head { display: grid; gap: var(--s2); }
.pieces-head h2 { font-size: var(--f-xl); font-stretch: 100%; }
.pieces-head p { font-size: var(--f-s); color: var(--ink-2); }
.filters-compact { padding: 0; }
.filters-compact .chips legend { float: none; width: auto; line-height: 1.4; margin-bottom: var(--s1); }
.piece-list { list-style: none; margin: 0; padding: 0; display: grid; background: var(--ground); padding: var(--s2); gap: var(--s2); }
.piece { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: start; background: var(--white); padding: var(--s3) var(--s4);
  clip-path: polygon(var(--bevel) 0, 100% 0, 100% 100%, 0 100%, 0 var(--bevel)); }

.piece-name { font-size: var(--f-m); font-weight: 760; font-stretch: 85%; }
.piece-meta { font-size: var(--f-xs); color: var(--ink-2); }
.piece-more { font-size: var(--f-s); margin-top: var(--s1); }
.piece-more summary { cursor: pointer; color: var(--ink-2); font-size: var(--f-xs); width: fit-content; }
.piece-more[open] > *:not(summary) { margin-top: var(--s2); }

.checked { border-left: 3px solid var(--line); padding-left: var(--s3); display: grid; gap: var(--s1); font-size: var(--f-s); margin-top: var(--s2); }
.checked-title { font-weight: 700; }
.checked-diff, .checked-src { color: var(--ink-2); font-size: var(--f-xs); }
.refs summary { cursor: pointer; font-weight: 650; font-size: var(--f-s); }
.jumps { position: sticky; top: var(--s4); align-self: start; display: grid; gap: var(--s2); font-size: var(--f-s); border-top: 2px solid var(--ink); padding-top: var(--s3); }
.jumps p { font-weight: 750; }
.jumps a { text-decoration: none; color: var(--ink-2); }
.jumps a:hover { color: var(--ink); text-decoration: underline; }

/* ---- prose (imported guide bodies) ---- */
.prose { max-width: 42rem; }
.edit-guide .prose > :first-child { margin-top: 0; }
.prose > * + * { margin-top: var(--s4); }
.prose h1 { font-size: clamp(1.75rem, 4vw, var(--f-2xl)); font-stretch: 108%; margin-bottom: var(--s5); }
.prose h2 { font-size: var(--f-l); font-stretch: 100%; margin-top: var(--s7); scroll-margin-top: var(--s5); }
.prose section > * + * { margin-top: var(--s4); }
.prose section + section { margin-top: var(--s4); }
.prose h3 { font-size: var(--f-m); margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s2); }
.prose [role="region"], .prose section[tabindex] { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--f-s); min-width: 32rem; }
.prose caption { text-align: left; font-weight: 700; padding-bottom: var(--s2); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.prose thead th { border-bottom: 2px solid var(--ink); font-weight: 700; }
.doc { max-width: 42rem; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s7); }
.legend { list-style: none; padding: 0; }
.legend li { display: flex; gap: var(--s3); align-items: baseline; }
.inspector .url, .guard .url { word-break: break-all; font-size: var(--f-xs); }

/* ---- guard dialog ---- */
.guard { border: 0; padding: 0; max-width: min(36rem, calc(100vw - 2rem)); background: var(--white); color: var(--ink);
  clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, 0 100%, 0 var(--bevel)); }
.guard::backdrop { background: rgb(42 33 48 / .55); }
.guard form { padding: var(--s5); display: grid; gap: var(--s4); }
.guard h2 { font-size: var(--f-l); }
.guard-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0; font-size: var(--f-s); }
.guard-facts dt { color: var(--ink-2); }
.guard-facts dd { margin: 0; min-width: 0; }
.guard-note { font-size: var(--f-s); }
.guard button { justify-self: start; }

/* ---- footer ---- */
.foot { border-top: 2px solid var(--ink); margin: 0; padding: var(--s6) max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); /* full-bleed rule, content aligned with the masthead */ display: grid; grid-template-columns: 1fr auto; gap: var(--s4) var(--s6); font-size: var(--f-s); }
.foot-brand { display: grid; gap: var(--s3); justify-items: start; }
.foot-brand p, .foot-disclosure { color: var(--ink-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-content: start; }
.foot-disclosure { grid-column: 1 / -1; font-size: var(--f-xs); }
/* Reserved: future authorized ad slots get their own named block here; nothing is rendered now. */

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .edit-stage, .edit-guide { grid-template-columns: minmax(0, 1fr); }
  .edit-fig { position: static; }
  .edit-fig img { max-height: 55svh; }
  .jumps { position: static; }
}
@media (max-width: 760px) {
  :root { --f-xl: 1.5rem; }
  .mast { gap: var(--s2) var(--s4); padding-block: var(--s3); }
  /* Phone header: wordmark + help button, then a full-width two-way switch. */
  .mast { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding-block: var(--s3); }
  .mark { --h: 40px; justify-self: start; grid-row: 1; grid-column: 1; }
  .mark-name { font-size: 1.15rem; }
  .mast-help { margin: 0; grid-row: 1; grid-column: 2; }
  .help-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .help-dot { width: 40px; height: 40px; font-size: 1rem; border-color: var(--line); color: var(--ink); background: var(--white); }
  .mast-nav { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--ground); border-radius: 10px; }
  .mast-nav a { text-align: center; padding: var(--s2) var(--s2); border: 0; border-radius: 7px; white-space: nowrap; color: var(--ink-2); }
  .mast-nav a[aria-current] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgb(42 33 48 / .12), 0 0 0 1px rgb(42 33 48 / .04); }
  .intro { padding-top: var(--s4); padding-bottom: var(--s4); gap: var(--s2); }
  .intro p { font-size: var(--f-s); }
  .preview-strip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .preview-strip .long { display: none; }
  .edit { padding-top: var(--s4); gap: var(--s4); }
  .edit-fig img { max-height: 28svh; }
  .edit-fig figcaption { font-size: .75rem; }
  .pieces-head p, .filters-compact .chips legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pieces { gap: var(--s3); }
  .lede { font-size: var(--f-s); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .piece { grid-template-columns: 64px minmax(0, 1fr); padding: var(--s3); }
  .piece .pic-thumb { width: 64px; grid-row: span 2; }
  .piece-act { grid-column: 2; }
  /* Phone tags read as a list: picture left, details right, so several pieces fit one screen. */
  .tags { grid-template-columns: 1fr; gap: var(--s2); }
  .tag { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s1); padding: var(--s3); align-content: start; }
  .tag > * { grid-column: 2; }
  .tag-fig { grid-column: 1; grid-row: 1 / span 5; margin: 0; align-self: start; }
  .tag-fig figcaption { display: none; }
  .tag-note { -webkit-line-clamp: 2; font-size: var(--f-xs); }
  .tag-name { font-size: var(--f-m); }
  .tag-name, .tag-note, .tag-from { min-height: 0; }
  .tag-foot { padding-top: var(--s2); }
  .tags-grid { padding: var(--s2); }
  .shelf { padding-top: var(--s5); }
  .shelf-head p { display: none; }
  .door-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .door-row::-webkit-scrollbar { display: none; }
  .door { scroll-snap-align: start; }
  .shelf-head { grid-template-columns: 1fr; }
  .edit-list { grid-template-columns: 1fr; }
  .edit-card { grid-template-columns: 7.5rem 1fr; grid-template-rows: none; gap: var(--s4); }
  .edit-card-img img { aspect-ratio: 4 / 5; }
  .edit-card-body > p:not(.edit-card-room) { display: none; }
  .chips legend { float: none; width: auto; line-height: 1.4; margin-bottom: var(--s1); }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter); }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row label { flex: none; } /* chips keep their full label; the row scrolls instead of squeezing them */
  .chips span { white-space: nowrap; }
  .foot { grid-template-columns: 1fr; }
}
/* Motion lives in motion.css, appended at build. */

/* ---- room ideas page ---- */
.edits-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.edits-head h2 { margin: 0; }
.room-jump { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.room-jump a { text-decoration: none; padding: var(--s1) var(--s3); border: 1.5px solid var(--line); border-radius: 999px; font-size: var(--f-s); background: var(--white); }
.room-jump span { color: var(--ink-2); font-size: var(--f-xs); margin-left: var(--s1); }
.room-group { max-width: var(--wrap); margin: 0 auto; padding: var(--s6) var(--gutter) var(--s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.room-group > h2 { font-size: var(--f-xl); font-stretch: 110%; border-top: 2px solid var(--ink); padding-top: var(--s3); }
.idea { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: start; }
.idea-img { display: block; overflow: hidden; background: var(--ground); }
.idea-img img { width: 100%; aspect-ratio: 1; object-fit: cover; } /* square centre crop keeps baked poster titles out instead of half-cut */
.idea-body { display: grid; gap: var(--s3); justify-items: start; min-width: 0; }
.idea-body h3 { font-size: var(--f-xl); font-stretch: 92%; }
.idea-body h3 a { text-decoration: none; }
.idea-body h3 a:hover { text-decoration: underline; }
.idea-body > p { color: var(--ink-2); max-width: 56ch; }
.idea-meta { font-size: var(--f-s); }
.rail-wrap { position: relative; justify-self: stretch; min-width: 0; max-width: 100%; container: tag-rail / inline-size; }
/* Items hang from a rail like tags on a shop line; the punched hole is the link-status dot. */
.rail { --rail-count: 1; list-style: none; margin: 0; padding: 0 var(--s5) var(--s6); width: 100%; display: flex; gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s5); scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--ink-2) transparent; position: relative; cursor: grab;
  background: linear-gradient(var(--ink-2), var(--ink-2)) 0 9px / 100% 2px no-repeat; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--ink-2); border-radius: 3px; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.rail.is-dragging .mini-tag { pointer-events: none; }
.rail li { flex: 0 0 calc((100% + var(--s4)) / var(--rail-count) - var(--s4)); scroll-snap-align: start; position: relative; padding-top: 26px; min-width: 0; } /* position keeps sr-only labels inside the scroller */
.rail li::before { content: ''; position: absolute; top: 10px; left: 50%; width: 1px; height: 22px; background: var(--ink-2); transform-origin: top; }
.mini-tag { display: grid; gap: var(--s2); height: 100%; align-content: start; text-decoration: none; background: var(--white); padding: var(--s4) var(--s2) var(--s3); position: relative; font-size: var(--f-xs);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
  transform-origin: 50% 0; rotate: var(--tilt, 0deg); transition: rotate 420ms var(--ease-swing, ease-out), translate 300ms var(--ease-out, ease-out); }
.rail li:nth-child(3n+1) .mini-tag { --tilt: -2.2deg; }
.rail li:nth-child(3n+2) .mini-tag { --tilt: 1.6deg; }
.rail li:nth-child(3n) .mini-tag { --tilt: -.8deg; }
.mini-tag > .hole { position: absolute; top: 6px; left: calc(50% - 6px); width: 12px; height: 12px; }
.mini-tag .pic { margin-top: var(--s1); }
.mini-name { line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2lh; }
.idea { background: none; }
.idea-body .rail-wrap { background: var(--ground); padding-top: var(--s3); margin-top: var(--s1); }
@container tag-rail (min-width: 20rem) { .rail { --rail-count: 2; } }
@container tag-rail (min-width: 30rem) { .rail { --rail-count: 3; } }
@container tag-rail (min-width: 40rem) { .rail { --rail-count: 4; } }
@container tag-rail (min-width: 50rem) { .rail { --rail-count: 5; } }
@container tag-rail (min-width: 60rem) { .rail { --rail-count: 6; } }
.rail-btns { display: none; position: absolute; right: var(--s2); top: calc(-1 * var(--s6)); gap: var(--s2); }
.rail-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font: 700 1.25rem/1 Archivo, sans-serif; cursor: pointer; transition: transform 160ms var(--ease-out, ease-out), border-color 160ms ease; }
.rail-btn:active { transform: scale(.94); }
.rail-btn:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .rail-btns { display: flex; }
  .rail-btn:hover:not(:disabled) { border-color: var(--ink-2); }
  .mini-tag:hover { rotate: 0deg; translate: 0 -4px; }
  .mini-tag:hover .mini-name { text-decoration: underline; }
}
.idea-meta { margin-bottom: var(--s5); }
@media (prefers-reduced-motion: reduce) { .mini-tag { transition: none; } .rail { scroll-behavior: auto; } }
@media (hover: hover) and (pointer: fine) {
  .idea:hover .idea-img img { transform: scale(1.03); }
  .room-jump a:hover { border-color: var(--ink-2); }
}
.idea-img img { transition: transform 600ms var(--ease-out, ease-out); }
@media (max-width: 760px) {
  .idea { grid-template-columns: 1fr; gap: var(--s4); }
  .idea-img img { aspect-ratio: 16 / 10; }
  .idea-body h3 { font-size: var(--f-l); }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- planned rooms (navigation before content, by user decision) ---- */
.door-blank { display: grid; place-items: center; width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, var(--ground) 0 12px, var(--paper) 12px 24px); outline: 2px dashed var(--line); outline-offset: -10px; }
.door-blank .hole { width: 22px; height: 22px; }
.door-planned .door-label { background: var(--paper); }
@media (min-width: 761px) { .door-row { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.empty-planned { display: grid; gap: var(--s3); justify-items: start; }
.empty-planned > .hole { width: 18px; height: 18px; }
.room-soon { grid-template-columns: auto 1fr; align-items: center; background: var(--ground); padding: var(--s4) var(--s5); clip-path: polygon(var(--bevel) 0, 100% 0, 100% 100%, 0 100%, 0 var(--bevel)); }
.room-soon .more { grid-column: 2; }

/* Home room cards: equal line budgets so item lists and buttons sit level across a row. */
@media (min-width: 761px) {
  .edit-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2lh; }
  .edit-card-body > p:not(.edit-card-room) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3lh; }
  .edit-card .mini { min-height: calc(4 * 1lh + 3 * var(--s2)); align-content: start; }
}
[data-filterable][hidden], .empty[hidden], .empty-planned[hidden], [data-planned-group][hidden] { display: none !important; }

/* ---- look galleries (Nails looks, Wear outfits) ---- */
.gallery { grid-template-columns: minmax(0, 1fr); }
.look-grid { list-style: none; margin: 0; padding: var(--s4); background: var(--ground); display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: var(--s5) var(--s4); }
/* Three fixed sections keep shopping lists aligned even when a card has buying notes. */
.look { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s3); background: var(--white); padding: 0 0 var(--s4);
  clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, 0 100%, 0 var(--bevel)); scroll-margin-top: calc(var(--mast-h, 72px) + var(--s4)); }
.look-fig { margin: 0; overflow: hidden; background: var(--ground); }
.look-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.look-head, .look-items { padding-inline: var(--s4); }
.look-meta { display: flex; gap: var(--s2); align-items: center; font-size: var(--f-xs); color: var(--ink-2); margin-bottom: var(--s1); white-space: nowrap; overflow: hidden; }
.look-meta-text { overflow: hidden; text-overflow: ellipsis; } /* one line, so titles stay level */
.look-meta span { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .75rem; padding: 0 .4rem; }
.look-head h2 { font-size: var(--f-l); font-stretch: 84%; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2lh; }
.look-note { font-size: var(--f-s); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.look-parts { color: var(--ink); }
.look-items { align-self: start; display: grid; gap: var(--s2); border-top: 1px dashed var(--line); padding-top: var(--s3); }
.look-items-h { font-size: var(--f-xs); font-weight: 700; }
.look-items ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.look-items li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2); align-items: center; font-size: var(--f-s); }
.look-items li .act { min-height: 36px; padding: 0 var(--s3); font-size: var(--f-xs); }
.look-items li .hole { width: 11px; height: 11px; }
.look-item-match { display: block; color: var(--ink-2); font-size: var(--f-xs); }

/* ---- press-on style index (Nails hub) ---- */
.look-index-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); scroll-margin-top: calc(var(--mast-h, 72px) + var(--s4)); }
.look-index-block > h2 { font-size: var(--f-xl); }
.look-index-block .filters { display: grid; gap: var(--s3); }
.thumb-grid { list-style: none; margin: 0; padding: var(--s3); background: var(--ground); display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s3); }
.thumb-grid a { display: grid; gap: var(--s2); text-decoration: none; font-size: var(--f-xs); font-weight: 600; background: var(--white); padding: var(--s2) var(--s2) var(--s3); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px); }
.thumb-grid a:hover span { text-decoration: underline; }
.pic img.pic-top { object-position: 50% 30%; }

/* ---- guide variants ---- */
.edit-stage.no-fig { grid-template-columns: minmax(0, 1fr); }
.edit-guide.no-toc { grid-template-columns: minmax(0, 1fr); }
.edit-guide.no-toc .prose { max-width: 46rem; }
.edit--reading .edit-guide { grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); }
.edit--reading .prose { max-width: 48rem; }
.edit--reading .prose figure { max-width: 24rem; margin: var(--s4) 0; }
.edit--reading .prose figure img { width: 100%; height: auto; display: block; }
.edit--reading .prose figcaption { margin-top: var(--s2); font-size: var(--f-xs); color: var(--ink-2); }
.edit--reading .prose th { background: var(--ground); }
@media (max-width: 760px) { .edit--reading .edit-guide { grid-template-columns: minmax(0, 1fr); } }

/* ---- featured block (Wear capsule on the homepage) ---- */
.feature { max-width: var(--wrap); margin: 0 auto; padding: var(--s6) var(--gutter); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s6); align-items: center; }
.feature img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ground); }
.feature > div { display: grid; gap: var(--s3); justify-items: start; }
.feature h2 { font-size: var(--f-xl); font-stretch: 100%; }
.feature p { color: var(--ink-2); max-width: 52ch; }

@media (max-width: 760px) {
  .look-grid { grid-template-columns: minmax(0, 1fr); padding: var(--s2); gap: var(--s3); }
  .look { grid-row: auto; grid-template-rows: none; }
  .look-head h2 { min-height: 0; }
  .feature { grid-template-columns: 1fr; }
  .thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Grid tracks never grow past the viewport because of a long child. */
.edit { grid-template-columns: minmax(0, 1fr); }
.edit .result-count { margin: 0; padding: 0; }
.door-blank-solid { background: var(--accent-soft); outline: 0; }
.door-text .door-label { background: var(--white); }

.look-items-sub { font-size: var(--f-xs); color: var(--ink-2); margin-top: var(--s1); }
.filters { grid-template-columns: minmax(0, 1fr); }
.filters > div { min-width: 0; }
/* Door labels share one height whether the name takes one line or two. */
.door-name { min-height: 2.2em; display: flex; align-items: flex-end; }
@media (max-width: 760px) { .door-name { min-height: 0; } }

/* ---- full photos, never cropped ---- */
.fit { position: relative; overflow: hidden; background: var(--ground); isolation: isolate; display: block; }
.fit::before { content: ''; position: absolute; inset: -12%; z-index: -1; background: var(--src) center / cover no-repeat; filter: blur(22px) saturate(1.15); opacity: .55; }
.fit img, .fit img.pic-own { object-fit: contain !important; object-position: center !important; position: relative; background: none; }
.door .fit img { width: 100%; height: 100%; }
.look-fig img { aspect-ratio: 2 / 3; }                /* outfit and hand photos are 2:3: shown edge to edge */
.edit-card-img img { aspect-ratio: 4 / 5; }
.feature-img img { width: 100%; aspect-ratio: 4 / 5; display: block; }
.feature-img { max-width: 28rem; }
.edit-fig .fit img { background: none; }
@media (max-width: 760px) {
  .edit-card-img img { aspect-ratio: 4 / 5; }
  .idea-img img { aspect-ratio: 4 / 5; }
}

/* Item picture placeholder: category name, no stand-in photo. */
.pic-none { display: grid; place-content: center; justify-items: center; gap: var(--s2); text-align: center; padding: var(--s3);
  background: linear-gradient(145deg, var(--accent-soft), var(--ground)); }
.pic-none-job { font-weight: 800; font-stretch: 78%; font-size: clamp(1rem, 4.5cqi, 1.6rem); line-height: 1.05; color: var(--accent); }
.pic-none-note { font-size: .6875rem; color: var(--ink-2); }
.pic { container-type: inline-size; }
.pic-thumb.pic-none .pic-none-note, .rail .pic-none .pic-none-note { display: none; }
.pic-thumb.pic-none .pic-none-job { font-size: .6875rem; }
.edit .filters { margin: 0; padding: 0; max-width: none; }
.edit-card-text { display: grid; place-items: center; aspect-ratio: 4 / 5; background: linear-gradient(145deg, var(--accent-soft), var(--ground)); text-decoration: none; }
.edit-card-text span { font-weight: 800; font-stretch: 78%; font-size: var(--f-xl); color: var(--accent); text-align: center; padding: var(--s4); }

/* ---- doors v2: hang-tag cards with a framed photo (replaces image tiles with overlaid labels) ---- */
.door-row { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)) !important; gap: var(--s3); }
.door a { aspect-ratio: auto; overflow: visible; display: flex; align-items: center; gap: var(--s3); min-height: 8.25rem; padding: var(--s3) var(--s3) var(--s3) calc(var(--s5) + 6px);
  background: var(--white); position: relative; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); transition: transform 160ms var(--ease-out, ease-out), background-color 200ms ease; }
.door a > .hole { position: absolute; left: 12px; top: calc(50% - 6px); width: 12px; height: 12px; }
.door-text { display: grid; gap: var(--s1); flex: 1; min-width: 0; }
.door-name { min-height: 0 !important; display: block !important; font-size: var(--f-l); line-height: 1.08; }
.door-photo { flex: none; height: 7rem; display: block; background: var(--ground); box-shadow: 0 1px 0 var(--line); transform: rotate(2deg); transition: transform 300ms var(--ease-swing, ease-out); }
.door-photo img { height: 100%; width: auto; max-width: 8.5rem; object-fit: contain; display: block; }
.door-planned a { background: transparent; outline: 1.5px dashed var(--line); outline-offset: -4px; }
.door-planned .door-name { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .door a:hover { background: var(--accent-soft); }
  .door a:hover .door-photo { transform: rotate(0deg) translateY(-2px); }
  .door a:hover img { transform: none !important; }
}
@media (max-width: 760px) {
  .door-row { grid-template-columns: none !important; grid-auto-columns: 78%; }
  .door a { min-height: 6.5rem; }
  .door-photo { height: 5.25rem; }
  .door-name { font-size: var(--f-m); }
}
/* =====================================================================
   Motion layer, appended to styles.css at build.
   Rules (emil-design-eng): animate transform/opacity/clip only, custom ease-out,
   UI under 300ms, hover only on fine pointers, reduced motion = fades only.
   Card entrance animation removed at the user's request (24 Oct); motion is interaction + navigation only.
   ===================================================================== */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); --ease-swing: cubic-bezier(.34, 1.36, .64, 1); }

/* Cross-document page transitions + shared room-image morph (home card -> edit page). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 160ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 260ms var(--ease-out) both; }
::view-transition-group(*) { animation-duration: 380ms; animation-timing-function: var(--ease-drawer); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Sticky, translucent masthead; hides on scroll down on phones, returns on scroll up. */
.mast { position: sticky; top: 0; z-index: 5; max-width: none; background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  transition: transform 280ms var(--ease-drawer), box-shadow 200ms ease; }
.mast.is-scrolled { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line), 0 10px 24px -20px rgb(42 33 48 / .4); }
.mast.is-hidden { transform: translateY(-100%); }
.edit-fig, .jumps { top: calc(var(--mast-h, 72px) + var(--s3)); }
html { scroll-padding-top: calc(var(--mast-h, 72px) + var(--s4)); }

/* Nav underline draws in from the left. */
.mast-nav a { border-bottom: 0; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 2px no-repeat; transition: background-size 240ms var(--ease-out); }
.mast-nav a[aria-current] { background-size: 100% 2px; }
@media (max-width: 760px) {
  .mast-nav a, .mast-nav a[aria-current] { background-image: none; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
}

/* Press feedback on everything pressable. */
.act, .chips span, .door a { transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.act:active, .door a:active { transform: scale(.97); }
.chips label:active span { transform: scale(.95); }
.act-retailer span[aria-hidden] { display: inline-block; transition: transform 200ms var(--ease-out); }
/* Zoomed images stay on their own compositor layer; otherwise they snap to the pixel grid when the zoom ends (the "shake"). */
.pic img, .door img, .edit-card-img img, .idea-img img { transition: transform 600ms var(--ease-out); will-change: transform; backface-visibility: hidden; }
.pic, .door a, .edit-card-img { overflow: hidden; }
.edit-card-img { display: block; }

@media (hover: hover) and (pointer: fine) {
  .mast-nav a:hover { background-size: 100% 2px; }
  .act-retailer:hover span[aria-hidden] { transform: translate(2px, -2px); }
  .tag:hover .pic, .piece:hover .pic { --zoom: 1.045; }
  .pic img { scale: var(--zoom, 1); transition: scale 600ms var(--ease-out); }
  .door a:hover img, .edit-card:hover .edit-card-img img { transform: scale(1.045); }
  .chips span:hover { border-color: var(--ink-2); }
}

/* Homepage load: one orchestrated entrance for the intro and room doors. */
.motion .intro > *, .motion .door { animation: rise 520ms var(--ease-out) both; }
.motion .intro > :nth-child(2) { animation-delay: 60ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* Dialog: springy enter, quicker exit, fading backdrop. */
.guard { transition: opacity 180ms var(--ease-out), transform 280ms var(--ease-swing), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.guard:not([open]) { opacity: 0; transform: scale(.96) translateY(6px); transition-duration: 140ms; }
@starting-style { .guard[open] { opacity: 0; transform: scale(.96) translateY(8px); } }
.guard::backdrop { transition: background-color 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
@starting-style { .guard[open]::backdrop { background-color: transparent; } }

/* "What to check" opens smoothly where supported; plus sign turns into a close mark. */
:root { interpolate-size: allow-keywords; }
.piece-more::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 260ms var(--ease-out), opacity 200ms ease, content-visibility 260ms allow-discrete; }
.piece-more[open]::details-content { block-size: auto; opacity: 1; }
.piece-more summary { list-style: none; }
.piece-more summary::-webkit-details-marker { display: none; }
.piece-more summary::before { content: '+'; display: inline-block; width: 1em; font-weight: 700; transition: transform 200ms var(--ease-out); }
.piece-more[open] summary::before { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .motion .intro > *, .motion .door { animation: none !important; }
  .mast { transition: none; }
  .mast.is-hidden { transform: none; }
  .pic img, .door img, .edit-card-img img, .idea-img img, .act-retailer span[aria-hidden], .act, .chips span { transition: none !important; transform: none !important; scale: none !important; }
  .guard, .guard:not([open]) { transform: none; }
}
/* ---- pinned filter dock + section chips (appended at build) ---- */
.filter-dock, .jump-dock { position: sticky; top: var(--mast-h, 72px); z-index: 4; transition: top 280ms var(--ease-drawer, ease-out), box-shadow 200ms ease; }
html.mast-hidden .filter-dock, html.mast-hidden .jump-dock { top: 0; }
.filter-dock { background: var(--paper); }
.dock-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.edit .dock-bar, .look-index-block .dock-bar { padding: 0; }
.dock-bar .result-count { margin: var(--s3) 0; padding: 0; }
.dock-more { font: 600 var(--f-xs)/1 Archivo, sans-serif; color: var(--ink); border: 1.5px solid var(--line); background: var(--white); border-radius: 999px; padding: var(--s2) var(--s3); cursor: pointer; }
.dock-more[hidden] { display: none; }
.filter-dock.is-stuck { background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 20px -18px rgb(42 33 48 / .5); }
/* Collapse only when pinned; script reserves the original document space. */
@media (min-width: 761px) {
.filter-dock.is-stuck { padding-top: var(--s2); }
.filter-dock.is-stuck .chips legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.filter-dock.is-stuck .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); padding-right: 3rem; }
.filter-dock.is-stuck .chip-row::-webkit-scrollbar { display: none; }
.filter-dock.is-stuck .chips span { min-height: 32px; font-size: var(--f-xs); }
.filter-dock.is-stuck:not(.is-open) .filters > :not(:first-child) { display: none; }
.filter-dock.is-stuck .filters { gap: var(--s2); }
.filter-dock.is-stuck .dock-bar .result-count { margin: var(--s2) 0; }
}
.jump-dock { background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.jump-row { max-width: var(--wrap); margin: 0 auto; padding: var(--s3) var(--gutter); display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.jump-row::-webkit-scrollbar { display: none; }
.jump-row a { flex: none; text-decoration: none; padding: var(--s1) var(--s3); border: 1.5px solid var(--line); border-radius: 999px; font-size: var(--f-s); background: var(--white); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.jump-row a[aria-current] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.room-group { scroll-margin-top: calc(var(--mast-h, 72px) + 4rem); }
@media (prefers-reduced-motion: reduce) { .filter-dock, .jump-dock { transition: none; } }

/* Desktop: section chips wrap so none are ever hidden; phones: one scrolling row with a fade hint. */
@media (min-width: 761px) { .jump-row { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 760px) { .jump-row { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } }
/* ---- interaction contract (appended last at build) ----
   Every card-like surface gets the same feedback on every site, whether or not it has a photo:
   hover (fine pointers) = lift 3px + title underline; press = scale .985; photos inside also ease-zoom.
   Entrances: intro + every door stagger by index (--i), not just the first three. */
:root { --lift: translateY(-3px); }
.tag, .look, .edit-card, .idea, .door a, .mini-tag, .thumb-grid a, .piece, .feature, .room-soon {
  transition: transform 220ms var(--ease-out, ease-out), background-color 200ms ease, box-shadow 220ms ease; }
.tag:active, .look:active, .edit-card:active, .door a:active, .thumb-grid a:active, .piece:active { transform: scale(.985); }
.pic-none { transition: background-position 600ms var(--ease-out, ease-out); background-size: 160% 160%; background-position: 0% 0%; }
.pic-none-job { transition: transform 300ms var(--ease-out, ease-out); }
.tag-name, .look-head h2, .edit-card h3 a, .idea-body h3 a, .door-name, .piece-name, .thumb-grid span, .mini-name {
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .18em; transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .tag:hover, .look:hover, .edit-card:hover, .idea:hover, .door a:hover, .thumb-grid a:hover, .feature:hover { transform: var(--lift); }
  .piece:hover { background: color-mix(in srgb, var(--white) 85%, var(--accent-soft)); }
  .tag:hover .pic-none, .piece:hover .pic-none, .mini-tag:hover .pic-none { background-position: 100% 100%; }
  .tag:hover .pic-none-job { transform: scale(1.06); }
  .tag:hover .tag-name, .look:hover .look-head h2, .edit-card:hover h3 a, .idea:hover .idea-body h3 a, .door a:hover .door-name,
  .piece:hover .piece-name, .thumb-grid a:hover span, .mini-tag:hover .mini-name { text-decoration-color: currentColor; }
  .look:hover .look-fig img, .idea:hover .idea-img img, .thumb-grid a:hover .pic img, .feature:hover img, .tag:hover .pic img, .piece:hover .pic img { transform: scale(1.04); }
}
.look-fig img, .feature img, .thumb-grid .pic img { transition: transform 600ms var(--ease-out, ease-out); will-change: transform; backface-visibility: hidden; }
/* Homepage entrance: intro, then every door in order. */
.motion .door { animation: rise 520ms var(--ease-out, ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 45ms) !important; }
@media (prefers-reduced-motion: reduce) {
  .tag, .look, .edit-card, .idea, .door a, .mini-tag, .thumb-grid a, .piece, .feature, .room-soon, .pic-none, .pic-none-job { transition: none !important; transform: none !important; }
  .motion .door { animation: none !important; }
}
/* ---- frame system (appended last at build) ----
   Frames match the photos so they fill edge to edge with nothing cropped:
   scene, look, outfit, guide and door photos are 2:3 portraits -> every photo frame is 2:3;
   item pictures are 1:1 (Codex generates 1024x1024; scene photos are 1024x1536).
   A photo in any other shape still shows whole over its blurred fill and is listed for regeneration. */
.edit-card-img img, .idea-img img, .feature-img img, .look-fig img, .pic-tall, .thumb-grid .pic { aspect-ratio: 2 / 3 !important; }
.pic-tall img { width: 100%; height: 100%; }
.edit-card-text, .idea-img.edit-card-text { aspect-ratio: 2 / 3; }
.feature-img { max-width: 22rem; }
/* Guide hero: the frame is the photo itself (no side bands): height-capped, width follows. */
.edit-fig .fit { background: none; display: flex; justify-content: center; }
.edit-fig .fit::before { display: none; }
.edit-fig img { width: auto !important; max-width: 100%; height: auto; max-height: calc(100svh - var(--mast-h, 72px) - 4rem); }
@media (max-width: 760px) {
  .idea-img { max-width: 15rem; }
  .edit-fig img { max-height: 44svh; }
}

/* Doors: bigger whole photos so nails, hands and outfits read clearly; names sit level (two-line slot). */
.door a { min-height: 11rem; }
.door-photo { height: 9.5rem; }
.door-photo img { max-width: 11rem; }
.door-name { min-height: 2.16em !important; display: flex !important; align-items: flex-end; }
@media (max-width: 760px) { .door a { min-height: 8.5rem; } .door-photo { height: 7rem; } }

/* Filter chips: one height, one line, no thumbnails, on every site and in the pinned dock. */
.chips span { white-space: nowrap; min-height: 36px; padding: 0 var(--s3); }
.chips span img { display: none; }
.filter-dock.is-stuck .chips span { min-height: 32px; }
.filter-dock.is-stuck .chip-row { flex-wrap: nowrap; }
.filter-dock.is-open .chip-row { flex-wrap: nowrap; overflow-x: auto; }

/* Phones: image-first product cards (the picture is the sales pitch). Overrides the earlier side-thumbnail phone layout. */
@media (max-width: 760px) {
  .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .tag { display: flex; flex-direction: column; grid-template-columns: none; padding: var(--s3); row-gap: var(--s2); }
  .tag > * { grid-column: auto; }
  .tag-fig { grid-column: auto; grid-row: auto; margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s1); }
  .tag-fig figcaption { display: block; font-size: .625rem; }
  .tag-name { font-size: var(--f-m); min-height: 2lh; }
  .tag-match, .tag-from { display: none; }
  .tag-note { font-size: var(--f-xs); -webkit-line-clamp: 2; min-height: 2lh; }
  .tag-foot .act { width: 100%; }
  .piece { grid-template-columns: 88px minmax(0, 1fr); }
  .piece .pic-thumb { width: 88px; }
}
@media (max-width: 520px) {
  .tags { grid-template-columns: minmax(0, 1fr); }
  .tag-name { min-height: 0; font-size: var(--f-l); }
  .tag-note { min-height: 0; }
}
@media (min-width: 761px) { .pic-thumb { width: 96px; } }
@media (max-width: 760px) {
  /* The picture spans the full card width (an older phone rule aligned it to start, collapsing it to zero). */
  .tag-fig { align-self: stretch !important; width: auto; }
  .tag-fig .pic { width: 100%; }
}
/* Door names: condensed so every name fits the same two-line slot. */
.door-name { font-stretch: 70% !important; font-size: 1.3rem; line-height: 1.08; min-height: calc(2 * 1.08em) !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-content: end; }
@media (max-width: 760px) { .door-name { font-size: 1.1rem; } }
.door-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.door-photo img { max-width: 7rem !important; object-fit: contain; }
.door-photo { width: auto; max-width: 7rem; }

/* Phones: every main photo spans the full content width in its 2:3 frame (consistent on all sites; nothing cropped). */
@media (max-width: 760px) {
  .idea-img, .feature-img { max-width: none !important; width: 100%; }
  .idea-img img, .edit-card-img img, .feature-img img { width: 100%; }
  .edit-card { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none; gap: var(--s3); }
  .edit-card-img { display: block; width: 100%; }
  .edit-card-body > p:not(.edit-card-room) { display: -webkit-box; }
  .edit-fig .fit { display: block; }
  .edit-fig img { width: 100% !important; max-height: none !important; }
  .edit-card-text, .idea-img.edit-card-text { width: 100%; }
}
@media (max-width: 760px) { .look-grid { padding: 0 !important; background: none; gap: var(--s4) !important; } }
/* Look cards: title block now sits above the photo. */
.look-head { padding-top: var(--s4); }
.look-fig { margin: 0; }
/* ---- phones: filters live in a bottom bar + bottom sheet (appended last at build) ---- */
.sheet-bar, .sheet-done, .sheet-scrim { display: none; }
@media (max-width: 760px) {
  /* The dock leaves the page flow and becomes a bar pinned to the bottom edge. */
  .filter-dock, .filter-dock.is-stuck, html.mast-hidden .filter-dock { position: fixed; top: auto !important; left: 0; right: 0; bottom: 0; z-index: 8; margin: 0; padding: 0;
    background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; max-width: none; }
  .filter-dock > .filters, .filter-dock > .result-count, .filter-dock > .dock-bar { display: none; }
  .sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -20px rgb(42 33 48 / .5); }
  .sheet-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border-radius: 999px; border: 0; background: var(--ink); color: var(--white); font: 650 var(--f-s)/1 Archivo, sans-serif; cursor: pointer; }
  .sheet-btn::before { content: ''; width: 16px; height: 12px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 70% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 10px / 40% 2px no-repeat; }
  .sheet-badge { min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: inline-grid; place-items: center; font-size: .75rem; }
  .sheet-badge[hidden] { display: none; }
  .sheet-count { font-size: var(--f-s); color: var(--ink-2); }
  /* Open: the form slides up above the bar as a sheet. */
  .filter-dock.is-sheet > .filters { display: grid; gap: var(--s4); position: absolute; left: 0; right: 0; bottom: 100%; max-height: 72svh; overflow-y: auto; padding: var(--s5) var(--gutter) var(--s4);
    background: var(--paper); border-radius: 18px 18px 0 0; box-shadow: 0 -16px 40px -20px rgb(42 33 48 / .55); animation: sheet-up 280ms var(--ease-drawer, ease-out); }
  .filter-dock.is-sheet > .filters::before { content: ''; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin-top: calc(-1 * var(--s3)); }
  .filter-dock.is-sheet .chips legend { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; display: block; margin-bottom: var(--s2); font-size: var(--f-xs); }
  .filter-dock.is-sheet .chip-row { flex-wrap: wrap !important; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .filter-dock.is-sheet .filters > * { display: block !important; }
  .sheet-done { display: block; position: sticky; bottom: calc(-1 * var(--s4)); padding: var(--s3) 0 var(--s1); background: var(--paper); }
  .sheet-done .act { width: 100%; }
  .sheet-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 7; background: rgb(42 33 48 / .4); animation: fade-in 200ms ease; }
  html.sheet-open { overflow: hidden; }
  /* Room for the bar at the end of the page. */
  body:has(.filter-dock) .foot { padding-bottom: calc(var(--s7) + 3rem); }
  body:has(.filter-dock) main { scroll-padding-bottom: 5rem; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .filter-dock.is-sheet > .filters, .sheet-scrim { animation: none !important; } }
/* ---- phones: doors become a swipe carousel of upright tags (appended last at build) ----
   Photo centered on top, name and counts underneath; cards snap to the center with neighbours peeking. */
.door-dots { display: none; }
.doors { padding-bottom: var(--s3); }
.reel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: var(--s1); }
.reel-dots[hidden] { display: none; }
.reel-frame { position: relative; padding-inline: 52px; }
.reel-frame .reel-row a { background: #e7d5c2; }
.reel-arrow { position: absolute; z-index: 2; top: 45%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 56px; padding: 0; border: 1px solid rgb(86 57 32 / .25); border-radius: 12px; color: #412c1d; background: rgb(243 230 213 / .8); backdrop-filter: blur(8px); font-size: 36px; line-height: 1; cursor: pointer; }
.reel-arrow[data-dir="-1"] { left: 0; }
.reel-arrow[data-dir="1"] { right: 0; }
.reel-arrow:disabled { opacity: .35; cursor: default; }
.reel-arrow[hidden] { display: none; }
.reel-arrow:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) { .reel-frame { padding-inline: 0; } .reel-arrow { display: none; } }
.door-dots button, .reel-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.door-dots button::before, .reel-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: width 240ms var(--ease-out, ease-out), background-color 200ms ease; }
.door-dots button[aria-current="true"]::before, .reel-dots button[aria-current="true"]::before { width: 22px; background: var(--accent); }
@media (max-width: 760px) {
  .door-row { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 64% !important; gap: var(--s3);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18%; padding: var(--s2) 18% var(--s3) !important; margin-inline: calc(-1 * var(--gutter)) !important;
    scrollbar-width: none; overscroll-behavior-x: contain; }
  .door-row::-webkit-scrollbar { display: none; }
  .door { scroll-snap-align: center; scroll-snap-stop: always; }
  .door a { flex-direction: column; align-items: center; text-align: center; gap: var(--s3); min-height: 0; padding: calc(var(--s5) + 4px) var(--s3) var(--s4);
    clip-path: polygon(50% 0, 100% 18px, 100% 100%, 0 100%, 0 18px); }
  .door a > .hole { left: calc(50% - 6px); top: 12px; }
  .door-photo { order: -1; height: 13.5rem; max-width: none !important; transform: none; box-shadow: none; }
  .door-photo img { max-width: none !important; height: 100%; width: auto; }
  .door-text { justify-items: center; width: 100%; }
  .door-name { font-size: var(--f-l) !important; min-height: 0 !important; -webkit-line-clamp: 2; justify-content: center; }
  .door-planned a { padding-top: var(--s7); padding-bottom: var(--s7); }
  .door-planned .door-text::before { content: ''; display: block; height: 7.5rem; }
  /* Pager dots under the carousel. */
  .door-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: var(--s1); }
  /* Swipe feedback: the centered card is full size, neighbours sit back slightly. */
  .door { transition: transform 300ms var(--ease-out, ease-out), opacity 300ms ease; }
  .door:not(.is-centered) { transform: scale(.94); opacity: .75; }
}
@media (prefers-reduced-motion: reduce) { .door, .door-dots button::before, .reel-dots button::before { transition: none !important; } }
/* Generated media: "More ideas" galleries and the Haircut library. Uses the design system's existing tokens. */
.more-looks { margin-top: var(--s5); min-width: 0; }
.more-looks h3 { font-size: var(--f-s); letter-spacing: .02em; margin: 0 0 var(--s3); }
.more-looks figure { margin: 0; display: grid; gap: var(--s2); }
.more-looks img, .more-looks video { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; background: var(--ground); transition: transform .25s ease; }
.more-looks figure:hover img { transform: translateY(-2px); }
.more-looks figcaption { font-size: var(--f-xs); line-height: 1.3; color: var(--ink-2); }

.cut-lib { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.cut-card { display: grid; grid-template-rows: auto auto 1fr; gap: var(--s2); background: var(--white); padding: var(--s3); min-width: 0; }
.cut-card h2 { font-size: var(--f-m); margin: 0; }
.cut-media { position: relative; aspect-ratio: 2 / 3; background: var(--ground); overflow: hidden; }
.cut-media img, .cut-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.cut-card ul { margin: 0; padding-left: 1.1em; font-size: var(--f-xs); color: var(--ink-2); }
.cut-card .cut-meta { font-size: var(--f-xs); color: var(--ink-2); margin: 0; }
.cut-jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
@media (prefers-reduced-motion: reduce) { .more-looks img { transition: none; } }
/* Cozy "In this setup": every product in the photo, by its searched name (labels, not links, until merchants are approved). */
.more-looks .setup-items { display: block; margin-top: var(--s1, .25rem); font-size: var(--f-xs); line-height: 1.35; color: var(--ink-2); }
.cut-fam { max-width: var(--wrap); margin: var(--s6) auto 0; padding-inline: var(--gutter); }
.cut-fam h2 { margin: 0; }
.fit video { display: block; width: 100%; height: 100%; object-fit: contain; position: relative; }
/* One motion language on every site (user, 25 Oct: "some animated and some not"): stills drift slowly while on screen,
   clips play while on screen. Same duration and feel everywhere; off for reduced motion. */
@keyframes drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -1.5%); } }
.look-fig img, .idea-img img, .cut-media img { transform-origin: 50% 40%; }
.in-view.look-fig img, .in-view .look-fig img, .idea-img.in-view img, .cut-media.in-view img { animation: drift 9s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .look-fig img, .idea-img img, .cut-media img { animation: none !important; } }
/* "In motion" reel: tall clip cards in a snap rail, slight alternating tilt like pinned photos; a pulse tag marks moving cards. */
.reel { max-width: var(--wrap); margin: var(--s5) auto; padding: 0 var(--gutter); }
.reel-head { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.reel-head h2 { margin: 0; }
.reel-head p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.reel-row { list-style: none; margin: 0; padding: var(--s3) 0 var(--s4); display: grid; grid-auto-flow: column; grid-auto-columns: 14rem; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.reel-row::-webkit-scrollbar { display: none; }
.reel-row li { scroll-snap-align: start; transform: rotate(-.8deg); transition: transform .3s ease; }
.reel-row li:nth-child(even) { transform: rotate(.8deg) translateY(6px); }
.reel-row li:hover { transform: rotate(0) translateY(-4px); }
.reel-row a { display: grid; gap: var(--s2); text-decoration: none; color: inherit; background: var(--white); padding: var(--s2) var(--s2) var(--s3); box-shadow: 0 6px 18px rgb(0 0 0 / .08); position: relative; }
.reel-row video { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; background: var(--ground); }
.reel-name { font-weight: 600; font-size: var(--f-s); line-height: 1.25; }
.reel-tag, .has-clip::after { position: absolute; top: calc(var(--s2) + 8px); left: calc(var(--s2) + 8px); font-size: var(--f-xs); font-weight: 600; color: #fff; background: rgb(20 16 24 / .7); padding: 2px 8px; border-radius: 999px; animation: tag-pulse 2.4s ease-in-out infinite; }
.has-clip { position: relative; }
.has-clip::after { content: '▶ In motion'; top: 10px; left: 10px; z-index: 2; }
@keyframes tag-pulse { 50% { opacity: .55; } }
@media (max-width: 40rem) { .reel-row { grid-auto-columns: 62vw; } }
@media (prefers-reduced-motion: reduce) { .reel-tag, .has-clip::after { animation: none; } .reel-row li { transform: none; } }

/* Hair magazine articles retain the house colors, tag cards and whole-photo framing. */
.hair-editorial { max-width: var(--wrap); margin: auto; padding: var(--s7) var(--gutter); }
.editorial-mast { border-bottom: 1px solid var(--ink); padding-bottom: var(--s5); }
.editorial-kicker { font-size: var(--f-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.editorial-mast h1 { font-size: clamp(2.25rem, 5.2vw, 4rem); letter-spacing: -.04em; margin: var(--s3) 0; max-width: 24ch; }
.editorial-deck { color: var(--ink-2); max-width: 60ch; font-size: var(--f-l); line-height: 1.45; }
.editorial-byline { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; margin-top: var(--s5); font-size: var(--f-xs); }
.mast-nav { align-items: center; }
.editorial-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; margin: var(--s5) 0 var(--s6); }
.editorial-photo { margin: 0; position: relative; background: var(--ground); }
.editorial-photo img, .editorial-photo video { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; display: block; }
.editorial-lead-copy { display: grid; gap: var(--s4); }
.editorial-lead h2 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1.06; letter-spacing: -.035em; }
.editorial-lead-copy > p:not(.editorial-kicker) { max-width: 44ch; }
.editorial-lead-copy .act { justify-self: start; }
.editorial-principles { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s3); font-size: var(--f-s); }
.editorial-caption { font-size: var(--f-xs); color: var(--ink-2); }
.editorial-section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s3) var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
.editorial-section-head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: var(--s2); letter-spacing: -.025em; max-width: 24ch; }
.editorial-section-head > p { color: var(--ink-2); font-size: var(--f-s); max-width: 26ch; }
.editorial-jumps { display: flex; flex-wrap: wrap; gap: 0 var(--s4); padding: var(--s2) 0; }
.editorial-jumps a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--f-s); }
.editorial-grid { list-style: none; padding: var(--s4); margin: var(--s3) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); background: var(--ground); }
.editorial-card { min-width: 0; background: var(--white); display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-self: stretch; clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, 0 100%, 0 var(--bevel)); scroll-margin-top: calc(var(--mast-h, 72px) + var(--s5)); }
.editorial-card[hidden] { display: none; }
.editorial-card > header { padding: var(--s3) var(--s4); }
/* Legacy bookmarks inside a card must clear the pinned filters, just like the card itself. */
@media (min-width: 761px) {
  .editorial-card > header > span[id], .editorial-shopping[id] { scroll-margin-top: calc(var(--mast-h, 72px) + var(--s5)); }
}
.editorial-card h3 { margin-top: var(--s2); font-size: var(--f-l); font-stretch: 86%; line-height: 1.15; }
.editorial-card .editorial-kicker span { margin-right: var(--s2); }
.editorial-card-copy { display: contents; font-size: var(--f-s); }
.editorial-card-text { display: grid; gap: var(--s3); padding: var(--s4); }
.editorial-features { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s2); }
.editorial-shopping { border-top: 1px dashed var(--line); padding-top: var(--s3); margin: 0 var(--s4) var(--s5); }
.editorial-shopping h4 { margin: 0 0 var(--s3); font-size: var(--f-s); }
.editorial-card summary { min-height: 44px; display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.editorial-options { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s3); }
.editorial-options li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.editorial-options .act { font-size: var(--f-xs); flex-shrink: 0; padding: var(--s2); }
.editorial-note { margin: var(--s6) 0; padding: var(--s5); border-left: 4px solid var(--accent); background: var(--accent-soft); display: grid; gap: var(--s3); }
.editorial-note p { max-width: 74ch; }
.editorial-compare { margin-bottom: var(--s7); }
.editorial-compare > p { margin: var(--s3) 0; color: var(--ink-2); }
.editorial-compare dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.editorial-compare dt { font-weight: 700; }
.editorial-compare dd { margin: var(--s2) 0 0; font-size: var(--f-s); color: var(--ink-2); }
body[data-brand="hair"] .look-fig img, body[data-brand="hair"] .idea-img img, body[data-brand="hair"] .cut-media img { animation: none; transform: none; }
/* Normalized Hair sources fill consistent 2:3 frames without cropping. */
body[data-brand="hair"] :is(.idea-img, .edit-card-img, .feature-img, .look-fig, .editorial-photo, .pic-tall) { aspect-ratio: 2 / 3 !important; align-self: start; background: none; overflow: hidden; }
body[data-brand="hair"] :is(.idea-img, .edit-card-img, .feature-img, .look-fig, .editorial-photo, .pic-tall) img { display: block; width: 100%; height: 100% !important; aspect-ratio: 2 / 3 !important; object-fit: contain !important; object-position: center; }
body[data-brand="hair"] :is(.idea-img, .edit-card-img, .feature-img, .look-fig .fit, .pic-tall)::before { display: none; }
.motion-paused video + *, .motion-paused .has-clip::after, .motion-paused .reel-tag { animation-play-state: paused; }
.motion-paused .editorial-photo { animation-play-state: paused; }
.motion-paused .look-fig img, .motion-paused .idea-img img, .motion-paused .cut-media img { animation-play-state: paused !important; }
@media (prefers-reduced-motion: no-preference) {
  .editorial-photo { animation: editorial-reveal 240ms var(--ease-out) both; }
  @keyframes editorial-reveal { from { opacity: .96; transform: translateY(6px); } }
  .hair-editorial a { transition: color 180ms ease; }
  html { scroll-behavior: smooth; }
}
@media (max-width: 1000px) { .editorial-grid, .editorial-compare dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .editorial-lead { gap: var(--s6); } }
@media (max-width: 640px) {
  .hair-editorial { padding-top: var(--s5); }
  .editorial-deck { font-size: 1.125rem; }
  .editorial-lead { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s6); }
  .editorial-lead-copy { gap: var(--s4); }
  .editorial-grid { grid-template-columns: minmax(0, 1fr); padding: 0; background: none; }
  .editorial-card { grid-row: auto; grid-template-rows: auto auto auto 1fr; }
  .editorial-section-head { display: grid; }
  .editorial-section-head > p { max-width: none; }
  .editorial-note { padding: var(--s5); }
  .editorial-compare dl { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Site-wide consistency (29 Oct): one spacing rhythm for cards and articles on every brand ---- */
/* Card text blocks start at the top; spare row height sits below the content, never between a heading and its list. */
.editorial-card-text, .editorial-shopping, .look-items, .look-head { align-content: start; }
.editorial-card-text h4 { margin: 0; }

/* Guide pages share the editorial masthead treatment. */
.edit-head { border-bottom: 1px solid var(--ink); padding-bottom: var(--s5); gap: var(--s3); }
.edit-head .crumbs { font-size: var(--f-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.edit-head .crumbs a { color: inherit; }
.edit-head h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.035em; line-height: 1.04; max-width: 24ch; }
.edit-head .lede { font-size: var(--f-l); line-height: 1.45; max-width: 60ch; }

/* Contents column stays narrow; the article keeps a reading measure. */
.edit-guide { grid-template-columns: minmax(11rem, 15rem) minmax(0, 44rem); justify-content: start; gap: var(--s5) var(--s8); }
.edit--reading .edit-guide { grid-template-columns: minmax(11rem, 15rem) minmax(0, 46rem); }
.jumps { top: calc(var(--mast-h, 72px) + var(--s4)); gap: var(--s3); }
.jumps p { font-size: var(--f-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* One heading rhythm inside every article. */
.prose > * + * { margin-top: var(--s4); }
.prose h2 { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -.02em; }
.prose h2 + *, .prose h3 + * { margin-top: var(--s3); }
.prose h3 { margin-top: var(--s6); font-size: var(--f-m); }
.edit-guide .prose > h2:first-child, .edit-guide .prose > :first-child + h2 { margin-top: var(--s5); }
.prose section > * + * { margin-top: var(--s3); }
.prose section + section, .prose section + * { margin-top: var(--s5); }
/* In-article jump links read as a spaced row, not run-together text. */
.prose .prose-jumps { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--f-s); }
.prose blockquote { margin-left: 0; padding-left: var(--s4); border-left: 3px solid var(--accent); }

@media (max-width: 860px) {
  .edit-guide, .edit--reading .edit-guide { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .jumps { position: static; }
}

/* ---- Hair cut guides ---- */
.cut-guide { display: grid; }
.cut-guide .editorial-jumps { margin-top: var(--s5); }
.cut-section { margin-top: var(--s7); }
.cut-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s6); margin-top: var(--s5); align-items: start; }
.cut-body { display: grid; gap: var(--s4); max-width: 62ch; }
.cut-aside { background: var(--white); padding: var(--s5); display: grid; gap: var(--s3); align-content: start; }
.cut-aside h3 { font-size: var(--f-s); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.cut-say { margin: 0; padding: var(--s4) var(--s5); background: var(--white); border-left: 4px solid var(--accent); font-size: var(--f-m); line-height: 1.5; }
.cut-guide .editorial-compare { margin-bottom: 0; }
.cut-guide .editorial-compare dl { margin-top: var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cut-shelf { margin: 0; display: grid; gap: var(--s3); align-content: start; }
.cut-compare { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.cut-compare-card { display: grid; gap: var(--s3); align-content: start; }
.cut-compare-card a { display: grid; gap: var(--s3); text-decoration: none; color: var(--ink); }
.cut-compare-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--ground); }
.cut-compare-name { font-weight: 700; font-size: var(--f-m); line-height: 1.2; }
.cut-compare-card p { font-size: var(--f-s); color: var(--ink-2); }
.cut-faq { margin: var(--s7) 0 var(--s5); display: grid; gap: var(--s3); }
.cut-faq h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
.cut-faq details { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.cut-faq summary { min-height: 44px; display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.cut-faq details p { margin-top: var(--s2); max-width: 70ch; color: var(--ink-2); }
@media (max-width: 860px) {
  .cut-cols, .cut-guide .editorial-compare dl { grid-template-columns: minmax(0, 1fr); }
  .cut-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cut-guide [id] { scroll-margin-top: calc(var(--mast-h, 72px) + var(--s5)); }
/* Group guides: the look gallery is a dense thumbnail grid, not three big cards. */
.guide-looks { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s4); }
.guide-looks .cut-compare-name { font-size: var(--f-s); }
@media (max-width: 860px) { .guide-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } }
@media (max-width: 480px) { .guide-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Group-guide shop: a full-width grid of item cards, first eight shown, the rest behind "Show all". */
.guide-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s3); margin: var(--s5) 0 0; }
.guide-more { margin-top: var(--s4); }
.guide-more summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--ink); border-radius: 999px; font-weight: 650; cursor: pointer; list-style: none; }
.guide-more summary::-webkit-details-marker { display: none; }
.guide-more[open] summary { margin-bottom: var(--s2); }