/* colour board — after La Garçonne, Album di Famiglia (lagarconne.com/collections/album-di-famiglia) */
:root {
  --olive: #383c2d;   /* promo bar, accents */
  --straw: #b29a7d;   /* highlight */
  --bark: #7d674e;
  --umber: #5c4b36;
  --linen: #d0c8b9;
  --studio: #ededeb;  /* product ground */
  --ink: #1a1918;
  --paper: #ffffff;
  --mute: #8b867f;
  --line: #e6e4df;
  --bg: var(--paper);
  --accent: var(--olive);
  --red: #a8432f;
  --fs: 13px;
  --promo: 30px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: var(--fs)/1.43 "Hanken Grotesk", Pretendard, "Helvetica Neue", Arial, "Apple SD Gothic Neo", sans-serif;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
a:hover, button:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- chrome ---------- */
.top { position: fixed; inset: var(--promo) 0 auto 0; height: 48px; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.logo { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-size: 17px; font-weight: 400; letter-spacing: .16em; }
.dots { position: absolute; right: 16px; top: 15px; display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--accent); transition: background .2s; }
.dot:hover { background: var(--accent); }
.plus { font-size: 22px; line-height: 16px; width: 16px; transition: transform .25s; }
.plus:hover { text-decoration: none; }
body.menu-open .plus { transform: rotate(45deg); }

.menu { position: fixed; right: 0; top: calc(48px + var(--promo)); padding: 16px 16px 22px 40px; background: rgba(255,255,255,.97); z-index: 30; text-align: right; display: flex; flex-direction: column; gap: 18px; }
.menu-group { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.menu a.on { text-decoration: underline; }
.menu .soon { color: var(--mute); }

.foot { position: fixed; left: 6px; bottom: 6px; z-index: 20; font-size: 10px; line-height: 1.35; padding: 4px 6px; background: var(--paper); }   /* white behind it, so text scrolling under it doesn't show through */
.foot a { margin-right: 6px; }
.hint { position: fixed; right: 16px; bottom: 10px; font-size: 10px; color: var(--mute); z-index: 20; transition: opacity 1s; }
.hint.gone { opacity: 0; }

main { padding: calc(78px + var(--promo)) 16px 72px; }
.fade { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

/* ---------- archive: bottom-aligned home grid ---------- */
.baseline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px; align-items: end; max-width: 1500px; margin: 0 auto; padding-top: 2vh; }
.baseline .frame { display: flex; align-items: flex-end; }
/* every photo's long side = the column width: landscapes share one width, portraits share one height */
.baseline .frame { aspect-ratio: 1 / 1; }
.baseline .frame img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.baseline .cap { font-size: 9px; letter-spacing: .06em; margin-top: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
@media (max-width: 900px) { .baseline { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .baseline { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; } }
/* (old scattered layout, kept for reference) */
.scatter { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: 1400px; margin: 0 auto; padding-top: 4vh; }
.tile { position: relative; cursor: pointer; }
.tile img { width: 100%; height: auto; transition: filter .3s; background: #f2f2f2; }
.tile:hover img { filter: brightness(.92); }
.cap { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; letter-spacing: .02em; margin-top: 3px; text-transform: uppercase; }

/* ---------- archive: index (list) ---------- */
.index { max-width: 1100px; margin: 4vh auto 0; display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.row .strip { display: flex; gap: 2px; height: 64px; overflow: hidden; }
.row .strip img { height: 100%; width: auto; }
.row:hover .label { text-decoration: underline; }

/* ---------- archive: project (book-like) ---------- */
.project { height: calc(100vh - 166px - var(--promo)); display: grid; grid-template-columns: 1fr 2.2fr 1fr; align-items: center; gap: 2vw; perspective: 1600px; }
.project .side { cursor: pointer; opacity: .9; justify-self: center; max-height: 50vh; }
.project .side img { max-height: 50vh; width: auto; }
.project .side.prev { justify-self: end; }
.project .side.next { justify-self: start; }
.project .main { justify-self: center; position: relative; transform-origin: left center; }
.project .main img { max-height: calc(100vh - 166px - var(--promo)); width: auto; margin: 0 auto; cursor: e-resize; }
/* turning a page: only the photo moves — it eases in from a little to the side. No swing, and the rest of the page stays still. */
.flip-next { animation: turnN .26s cubic-bezier(.2, .7, .3, 1) both; }
.flip-prev { animation: turnP .26s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes turnN { from { opacity: .3; transform: translateX(10px); } }
@keyframes turnP { from { opacity: .3; transform: translateX(-10px); } }
.pagebar { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; font-size: 11px; }
.progress { width: 120px; height: 1px; background: var(--line); position: relative; }
.progress i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }

.endcard { max-width: 760px; margin: 12vh auto 0; text-align: center; }
.endcard h2 { font-weight: 400; font-size: 13px; margin: 0 0 24px; }
.recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.recs .tile img { aspect-ratio: 3/4; object-fit: cover; }

/* ---------- shop ---------- */
.shop { max-width: 760px; margin: 0 auto; text-align: center; }
.brand { font-weight: 700; letter-spacing: -.01em; font-size: 13px; }
.shop h1 { font-weight: 400; font-size: 26px; margin: 0 0 22px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero img { aspect-ratio: 1.56; object-fit: cover; width: 100%; cursor: pointer; }
.release { margin: 14px 0 0; font-size: 14px; }
.release .name { margin-right: 24px; }
.sub { margin: 26px auto 0; width: 220px; text-align: left; font-size: 13px; }
/* subscribe, as the mockup notes it: only "Subscribe to …" shows; the line appears when the pointer comes over it
   (or the field is tapped), and Send only once something is typed */
.sub .field { position: relative; border-bottom: 1px solid transparent; height: 26px; transition: border-color .25s; }
.sub:hover .field, .sub:focus-within .field, .sub:has(input:not(:placeholder-shown)) .field { border-bottom-color: var(--ink); }
.sub input { border: 0; outline: 0; font: inherit; width: 100%; height: 100%; opacity: 0; transition: opacity .2s; background: none; }
.sub:hover input, .sub input:focus, .sub input:not(:placeholder-shown) { opacity: 1; }
/* Send stays out of sight until something is typed on the line */
.sub .send { color: #1b3cff; margin-top: 6px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }   /* blue, as in the mockup */
.sub:has(input:not(:placeholder-shown)) .send { opacity: 1; visibility: visible; }
.sub .send:hover { text-decoration: underline; text-underline-offset: 3px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 20px; margin: 90px auto 0; max-width: 640px; text-align: left; }
.card { cursor: pointer; }
.card img { aspect-ratio: 2/3; object-fit: cover; width: 100%; }
.card .line { display: flex; justify-content: space-between; font-size: 10px; margin-top: 4px; }
.card .stat { text-align: center; font-size: 10px; margin-top: 4px; }
.red { color: var(--red); }
.newsletter { margin: 80px auto 0; width: 160px; font-size: 10px; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.empty { margin-top: 30vh; color: var(--mute); }

/* ---------- product ---------- */
.product { max-width: 900px; margin: 0 auto; text-align: center; }
.product .stage { height: 62vh; display: flex; justify-content: center; align-items: center; gap: 16px; }
.product .stage img { max-height: 62vh; width: auto; cursor: e-resize; }
.product .stage .ghost { opacity: .35; max-height: 62vh; cursor: pointer; }
.pinfo { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tabs { display: flex; gap: 18px; }
.tabs button.on { text-decoration: underline; }
.panel { font-size: 11px; min-height: 0; }
.sizes table { border-collapse: collapse; font-size: 10px; }
.sizes td, .sizes th { padding: 1px 9px; font-weight: 400; }
.sizes .col-on { outline: 1px solid var(--accent); outline-offset: -1px; }
.opts { display: flex; gap: 22px; }
.opts button { padding: 1px 8px; border-radius: 50%; border: 1px solid transparent; }
.opts button.on { border-color: var(--accent); }
.opts button:disabled { color: var(--mute); text-decoration: line-through; cursor: default; }
.add { margin-top: 4px; text-decoration: underline; }
.add:disabled { color: var(--mute); text-decoration: none; cursor: default; }
.thumbs { position: fixed; right: 16px; bottom: 34px; display: flex; gap: 4px; }
.thumbs img { height: 34px; width: auto; opacity: .45; cursor: pointer; }
.thumbs img.on { opacity: 1; }

/* ---------- text pages ---------- */
.text { max-width: 560px; margin: 6vh 0 0 7vw; font-size: 12px; }
.text h2 { font-weight: 400; font-size: 12px; margin: 0 0 28px; }
.text p { margin: 0 0 14px; }

/* ---------- overlays ---------- */
.sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #fff; z-index: 40; border-left: 1px solid var(--line); padding: 50px 28px 28px; overflow-y: auto; animation: slide .3s ease both; }
.sheet.wide { width: min(720px, 100%); }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.close { position: absolute; top: 14px; right: 18px; }
.sheet .brand { text-align: center; font-size: 15px; margin-bottom: 26px; }
.bagitem { display: grid; grid-template-columns: 1fr 70px; gap: 12px; font-size: 10px; margin: 10px 0 30px; }
.bagitem img { width: 70px; }
.bagitem .acts button { margin-right: 8px; text-decoration: underline; }
.sum { border-top: 1px solid var(--line); padding-top: 10px; font-size: 9px; text-transform: uppercase; }
.sum div { display: flex; justify-content: space-between; margin: 3px 0; }
.checkout { width: 100%; background: #000; color: #fff; padding: 9px; margin-top: 12px; font-size: 9px; letter-spacing: .08em; }
#searchInput { width: 100%; border: 0; border-bottom: 1px solid var(--ink); font: inherit; font-size: 16px; padding: 4px 0; outline: 0; margin-bottom: 18px; }
.result { display: flex; gap: 10px; align-items: center; margin: 6px 0; cursor: pointer; }
.result img { width: 34px; height: 44px; object-fit: cover; }

.covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin: 14px 0 20px; }
.covers img { aspect-ratio: 3/4; object-fit: cover; width: 100%; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; }
.covers img.on { outline-color: var(--accent); }
.print-title { width: 100%; border: 0; border-bottom: 1px solid var(--ink); font: inherit; font-size: 15px; padding: 4px 0; outline: 0; }
.print-go { margin-top: 18px; background: #000; color: #fff; padding: 9px 16px; }
.muted { color: var(--mute); }

/* ---------- print: the book ---------- */
#book { display: none; }
@media print {
  @page { size: A5; margin: 0; }
  body > *:not(#book) { display: none !important; }
  #book { display: block; }
  .bpage { width: 148mm; height: 210mm; page-break-after: always; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 14mm; font: 9pt Helvetica, Arial, sans-serif; position: relative; }
  .bpage img { max-width: 100%; max-height: 165mm; object-fit: contain; }
  .bpage .pn { position: absolute; bottom: 8mm; font-size: 7pt; }
  .bcover { padding: 0; justify-content: flex-end; }
  .bcover img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
  .bcover .t { position: relative; background: #fff; padding: 3mm 5mm; margin-bottom: 14mm; font-size: 11pt; }
}

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  main { padding: 56px 12px 72px; }
  .project { grid-template-columns: 1fr; height: auto; }
  .project .side { display: none; }
  .project .main img { max-height: 70vh; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .hero { grid-template-columns: 1fr; }
  .product .stage .ghost { display: none; }
  .product .stage { height: auto; }
  .product .stage img { max-height: 66vh; }
  .recs { grid-template-columns: repeat(2, 1fr); }
  .hint { display: none; }
  .thumbs { display: none; }
}

/* flat product shots (HTAE) */
.grid.flat .card img { aspect-ratio: 1; object-fit: contain; background: #fff; }
.product.flat .stage img { max-height: 56vh; }
.pagebar span { white-space: nowrap; }

/* ---------- shop extras ---------- */
.hero.one { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
.hero.one img { aspect-ratio: 3/4; }
.rnote { margin: 4px 0 0; font-size: 11px; }
.sect { font-weight: 400; font-size: 13px; text-align: center; margin: 90px 0 26px; }
.notes { display: flex; flex-direction: column; gap: 6px; max-width: 520px; margin: 0 auto; text-align: left; font-size: 11px; }

/* ---------- nuance ---------- */
.nhead { text-align: center; margin: 0 0 34px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.nhead .logos { display: flex; gap: 16px; align-items: center; margin: 10px 0 4px; }
.nhead .logos img { height: 14px; width: auto; }
.piecegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 22px; max-width: 1200px; margin: 0 auto; }
.piece { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: 11px; align-items: start; }
.piece[data-href] { cursor: pointer; }
.piece[data-href]:hover b { text-decoration: underline; }
.piece img { width: 64px; aspect-ratio: 1; object-fit: contain; background: #f5f5f5; }
.look { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4vw; max-width: 1200px; margin: 0 auto; align-items: end; perspective: 1600px; }
.lookimg { cursor: e-resize; transform-origin: left center; }
.lookimg img { max-height: calc(100vh - 150px); width: auto; max-width: 100%; }
.pieces .piece { margin-bottom: 12px; }

/* ---------- journal (colindoerffler-hq style) ---------- */
#view.serif, #view.serif button { font-family: "Times New Roman", Times, serif; }
.journal { max-width: 820px; font-size: 12px; line-height: 1.16; margin-top: -24px; }
.jhead p { margin: 0 0 12px; max-width: 470px; }
.journal a.on { text-decoration: underline; }
.jtools { position: fixed; top: calc(58px + var(--promo)); right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: #b5b5b5; z-index: 25; font-size: 12px; }
.jtools button { color: #b5b5b5; }
.jtools button:hover { color: var(--ink); text-decoration: none; }
.jitem { margin: 90px 0 0; }
.jitem img { display: block; height: auto; min-width: 180px; max-width: 100%; }
.jitem p { margin: 6px 0 0; max-width: 430px; }
.jitem a:hover { text-decoration: underline; }
.journal.text-only .jitem { margin-top: 22px; }
.journal.text-only .jitem img { display: none; }
.jitem.flash p { animation: flash 1.4s ease; }
.jitem.gone { opacity: 0; transition: opacity .3s; }
.journal.reading .jitem:first-of-type { margin-top: 48px; }
@keyframes flash { 0%, 40% { background: rgba(178, 154, 125, .38); } 100% { background: transparent; } }

/* ---------- print preview + watermark ---------- */
.ppreview { position: relative; width: 148px; aspect-ratio: 148/210; border: 1px solid var(--line); margin: 14px 0 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ppreview img { position: relative; max-width: 80%; max-height: 70%; }
.wm { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media print {
  .bpage .wm { z-index: 0; }
  .bpage img, .bpage > div { position: relative; z-index: 1; }
  .bcover img { position: absolute; z-index: 0; }
  .bcover .wm { z-index: 1; }
  .bcover .t { z-index: 2; }
  .pfoot { position: absolute; left: 10mm; bottom: 7mm; font-size: 6.5pt; letter-spacing: .06em; z-index: 2; color: #555; }
  .bcover .pfoot { color: #fff; }
  .bpage .pn { right: 10mm; }
}

@media (max-width: 700px) {
  .look { grid-template-columns: 1fr; }
  .jtools { top: auto; bottom: 34px; }
}

/* ---------- index: page table (after billinprint.com) ---------- */
.pageidx { max-width: 780px; margin: 2vh auto 110px; }
.pnow { text-align: center; font-size: 11px; color: var(--mute); margin-bottom: 14px; min-height: 16px; }
.nums { position: relative; display: grid; grid-template-columns: repeat(16, 1fr); gap: 7px 0; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.nums a { padding: 1px 0; }
.nums a.first { color: var(--accent); }
.nums a:hover { text-decoration: underline; }
.pile { position: absolute; inset: 0; pointer-events: none; }
.pile img { position: absolute; left: 50%; top: 50%; max-height: min(88%, 62vh); max-width: 64%; width: auto; }
.contains { text-align: center; font-size: 12px; max-width: 560px; margin: 40px auto 0; line-height: 1.6; }
.contains a:hover { text-decoration: underline; }
@media (max-width: 700px) { .nums { grid-template-columns: repeat(8, 1fr); } .pile img { max-width: 86%; } }


/* ---------- La Garçonne mood: promo bar, type, product cards ---------- */
.promo { position: fixed; inset: 0 0 auto 0; height: var(--promo); z-index: 31; background: var(--olive); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 16px; white-space: nowrap; overflow: hidden; }
.promo i { font-style: normal; opacity: .6; }
.promo a:hover { text-decoration: underline; }
.shop > .brand, .pinfo .brand { text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.shop h1 { font-size: 20px; letter-spacing: .01em; margin: 6px 0 26px; }
.grid { max-width: 1180px; grid-template-columns: repeat(3, 1fr); gap: 46px 24px; margin-top: 80px; }
.card .ph { background: var(--studio); }
.card .ph img { width: 100%; height: 100%; object-fit: contain; }
.card .ph img.mult { mix-blend-mode: multiply; }

.card .bline { margin-top: 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.card .nm { font-size: 11px; margin-top: 2px; }
.card .pr { font-size: 12px; margin-top: 3px; }
.card .stat { text-align: left; font-size: 10.5px; color: var(--mute); margin-top: 2px; }
.card .stat .red { color: var(--red); }
.dot { border-color: var(--olive); }
.dot:hover { background: var(--olive); }
.newsletter { border-color: var(--line); color: var(--mute); }

/* colour board on Info */
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 14px; font-size: 11px; }
.swatches i { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line); margin-bottom: 6px; }
.spec1 { font-size: 13px; } .spec2 { font-size: 11px; font-weight: 700; letter-spacing: .06em; } .spec3 { font: 700 13.8px/1.1 "Times New Roman", Times, serif; }

/* ---------- HTAE journal: rarebooksparis.com form ---------- */
#view.rb .rbhead { display: flex; justify-content: space-between; gap: 12px; font: 700 12px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0; margin: -18px 0 10px; }
#view.rb .rbhead a:hover { text-decoration: underline; }
.collage { position: relative; margin: 0 -16px; }
.citem { position: absolute; display: block; }
.citem img { width: 100%; height: auto; display: block; background: var(--studio); }
.ccap { padding: 3px 8px 9px; font: 700 13.8px/1.1 "Times New Roman", Times, serif; letter-spacing: 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.ccap[lang="ko"] { word-break: keep-all; font-family: "Times New Roman", "AppleMyungjo", "Nanum Myeongjo", serif; }
.ccap .cdate { font-weight: 400; color: var(--mute); white-space: nowrap; }
.citem:hover .ccap { text-decoration: underline; text-decoration-thickness: 1px; }
.collage.stack .citem { position: static; width: auto; }

@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  #view.rb .rbhead { flex-wrap: wrap; }
}

/* ---------- home: one rule — every photo fills the column width, bottoms aligned ---------- */
.baseline .frame { aspect-ratio: auto; position: relative; }
.baseline .frame img { width: 100%; height: auto; max-width: none; max-height: none; }

/* ---------- new arrivals: never cropped ---------- */
.hero img { aspect-ratio: auto; object-fit: contain; height: auto; }
.hero.one { grid-template-columns: 1fr; max-width: none; }
.hero.one img { width: auto; max-width: 100%; max-height: 62vh; margin: 0 auto; }

/* ---------- stack ---------- */
.stacklink { position: absolute; left: 16px; top: 15px; font-size: 12px; }
.stk.short { position: absolute; left: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.94); border: 1px solid var(--line); font-size: 14px; line-height: 21px; text-align: center; padding: 0; opacity: 0; transition: opacity .15s; z-index: 3; color: var(--ink); }
.tile:hover .stk.short, .card:hover .stk.short, .citem:hover .stk.short, .hcell:hover .stk.short, .stk.short.in { opacity: 1; }
.stk.short.in { background: var(--olive); border-color: var(--olive); color: #fff; }
.stk.short:hover { text-decoration: none; }
@media (hover: none) { .stk.short { opacity: 1; } }
.stk.long { text-decoration: underline; }
.stk.long.in, .stk.link.in { color: var(--olive); }
.stk.link { font: inherit; color: var(--mute); }
.citem .stk.short { top: 6px; bottom: auto; }
.card .ph { position: relative; }
.stacklist { list-style: none; padding: 0; margin: 16px 0 24px; }
.stacklist li { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11px; cursor: grab; }
.stacklist li.drag { opacity: .4; }
.stacklist img { width: 48px; height: 48px; object-fit: cover; background: var(--studio); }
.sacts button { margin-left: 6px; color: var(--mute); }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; font-size: 12px; padding: 7px 14px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 60; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { color: #fff; text-decoration: underline; }
@media print { .bpage .pcap { position: relative; z-index: 1; margin-top: 4mm; font-size: 7.5pt; text-align: center; max-width: 100mm; } }

/* ---------- product: catalogue card (fashionresearchlibrary.com) + Seen in ---------- */
.record { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; max-width: 460px; margin: 34px auto 0; text-align: left; }
.record div { min-width: 0; }
.record dt { font-size: 10px; color: var(--mute); margin-bottom: 2px; }
.record dd { margin: 0; font-size: 13px; }
.record dd a:hover { text-decoration: underline; }
.seen { display: flex; gap: 6px; flex-wrap: wrap; }
.seen a { position: relative; display: block; }
.seen img { width: 44px; height: 58px; object-fit: cover; background: var(--studio); }
.seen i { position: absolute; left: 2px; bottom: 1px; font: 9px/1 ui-monospace, Menlo, monospace; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.6); font-style: normal; }

/* ---------- all brands: goat.com filters + hairline grid, elitemodelmanagement.com index ---------- */
.sall { display: grid; grid-template-columns: 190px 1fr; gap: 28px; max-width: 1500px; margin: 0 auto; }
.sfil { position: sticky; top: calc(64px + var(--promo)); align-self: start; text-align: right; font-size: 12px; display: flex; flex-direction: column; gap: 18px; }
.sgrp { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sgrp b { font-weight: 700; margin-bottom: 2px; }
.sgrp button.on { text-decoration: underline; }
.sgrp button.none { color: #c9c5bf; }
.sbar { display: flex; justify-content: flex-start; align-items: center; gap: 22px; font-size: 12px; margin-bottom: 12px; }
.sbar .radio button:first-child { margin-left: 0; }
.radio button { margin-left: 16px; }
.radio button::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); margin-right: 6px; vertical-align: 0; }
.radio button.on::before { background: var(--ink); }
.radio button:hover { text-decoration: none; }
.hgrid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.hcell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 12px 10px; cursor: pointer; transition: background .15s; position: relative; }
.hcell:hover { background: var(--studio); }
.hph { position: relative; }
.hph img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.hph img.mult { mix-blend-mode: multiply; }
.hmeta { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; font-size: 10.5px; margin-top: 10px; align-items: start; }
.hb { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; }
.hn { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hcell.out .hp { color: var(--mute); }
.pindex { column-count: 4; column-gap: 28px; font-size: 11.5px; line-height: 1.6; }
.pindex a { display: block; break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pindex a:hover { text-decoration: underline; }
.pindex a.out { color: #bcb7b0; }
.pindex .pb { font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); margin-left: 5px; }
.pv { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; width: 230px; background: var(--studio); padding: 8px; }
.pv img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; }
.pv div { font-size: 10.5px; margin-top: 6px; }
@media (max-width: 900px) { .hgrid { grid-template-columns: repeat(3, 1fr); } .pindex { column-count: 3; } }
@media (max-width: 700px) {
  .sall { grid-template-columns: 1fr; }
  .sfil { position: static; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .sgrp { align-items: flex-start; }
  .hgrid { grid-template-columns: repeat(2, 1fr); }
  .pindex { column-count: 2; }
  .record { grid-template-columns: 1fr; }
}

/* ---------- Your edition ---------- */
.edhead { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.edmeta { font-size: 11px; color: var(--mute); letter-spacing: .04em; }
.edhead h1 { font-weight: 400; font-size: 34px; letter-spacing: -.005em; line-height: 1.15; margin: 8px 0 4px; }
.edby { font-size: 13px; }
.edtools { display: flex; justify-content: center; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 18px; font-size: 12px; }
.edtools .radio button:first-child { margin-left: 0; }
.edacts button { margin: 0 7px; text-decoration: underline; }
.edgrid .cap span:last-child { text-align: right; }
.edbook { text-align: center; perspective: 1600px; }
.edbook .main { display: inline-block; transform-origin: left center; }
.edbook .main img { max-height: calc(100vh - 360px); width: auto; margin: 0 auto; cursor: e-resize; }
.edcap { margin: 14px 0 4px; font-size: 13px; }
.edcap a:hover { text-decoration: underline; }
.edlist { margin: 0 auto !important; }
.edform { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.edform input { display: block; margin: 12px 0; font-size: 14px; }
.edform .radio { margin: 14px 0 0; font-size: 12px; }
.edform .radio button:first-child { margin-left: 0; }
@media (max-width: 700px) { .edhead h1 { font-size: 26px; } .edtools { gap: 12px; } }

/* ---------- front page: arrange (drag like an Instagram grid) ---------- */
.frontbar { display: flex; justify-content: flex-end; align-items: center; gap: 18px; font-size: 12px; max-width: 1500px; margin: -22px auto 10px; }
.frontbar > button { text-decoration: underline; }
.arrbar { position: sticky; top: calc(48px + var(--promo)); z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--olive); color: #fff; font-size: 12px; padding: 9px 14px; margin: -26px -16px 18px; }
.arracts { display: flex; gap: 16px; flex-wrap: wrap; }
.arracts button { color: #fff; }
.arracts .strong { text-decoration: underline; font-weight: 700; }
.baseline.arranging .tile { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.baseline.arranging .tile.placeholder { opacity: .25; }
.baseline.arranging .frame img { pointer-events: none; }
.ghosttile { position: fixed; z-index: 70; pointer-events: none; opacity: .92; box-shadow: 0 10px 30px rgba(0,0,0,.18); cursor: grabbing; background: #fff; }
.tx { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.95); border: 1px solid var(--line); line-height: 19px; text-align: center; font-size: 14px; z-index: 3; }
.tx:hover { text-decoration: none; background: var(--ink); color: #fff; }

/* ---------- journal landing: Aieul | HTAE, equal halves ---------- */
.jsplit { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 160px); margin: -30px -16px 0; border-top: 1px solid var(--line); }
.jhalf { display: flex; flex-direction: column; gap: 18px; padding: 22px 26px 26px; transition: opacity .25s, background .25s; overflow: hidden; }
.jhalf + .jhalf { border-left: 1px solid var(--line); }
.jsplit:hover .jhalf:not(:hover) { opacity: .45; }
.jhalf:hover { background: #fbfaf8; }
.jlabel { font-size: 14px; }
.jfoot { margin-top: auto; font-size: 12px; text-decoration: underline; }
.ja { font-family: "Times New Roman", Times, serif; font-size: 12px; line-height: 1.16; }
.ja-prev > div { margin-bottom: 26px; }
.ja-prev img { display: block; height: auto; }
.ja-prev p { margin: 5px 0 0; max-width: 360px; }
.jh-prev { display: flex; flex-wrap: wrap; align-items: flex-start; }
.jh-prev img { width: 100%; height: auto; display: block; }
.jh-prev p { padding: 3px 6px 8px; margin: 0; font: 700 12.5px/1.1 "Times New Roman", Times, serif; text-align: justify; hyphens: auto; }
.jswitch { font-size: 12px; margin: -22px 0 18px; }
.jswitch a.on { text-decoration: underline; }
#view.rb .jswitch { margin-bottom: 8px; }
@media (max-width: 700px) { .jsplit { grid-template-columns: 1fr; } .jhalf + .jhalf { border-left: 0; border-top: 1px solid var(--line); } .arrbar { margin-left: -12px; margin-right: -12px; } }

/* coming soon (Piloti) */
.shop.soon { padding-top: 12vh; }
.soonline { font-size: 20px; margin: 10px 0 0; }
.soonseen { margin: 90px auto 0; max-width: 520px; font-size: 11px; }
.soonpcs { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.soonpcs a { width: 150px; text-align: left; }
.soonpcs img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--studio); mix-blend-mode: multiply; margin-bottom: 6px; }

/* ---------- end of a project (after suzieandleo.com #related, pyrnarchives.com edito) ---------- */
/* end of a project: plain white like the rest of the site — one quiet line, the next projects small and bottom-aligned,
   captioned like the front page. No blur, no frames, no shadows. */
.endwrap { position: relative; min-height: calc(100vh - 150px - var(--promo)); display: flex; flex-direction: column; justify-content: center; }
.endtop { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; }
.endacts { display: flex; gap: 18px; }
.endrow { display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding: 56px 0 24px; overflow-x: auto; max-width: 100%; }
.endcard2 { flex: 0 0 auto; width: clamp(120px, 11vw, 190px); transition: opacity .2s; }
.endcard2:hover { opacity: .6; }
.endcard2 img { width: 100%; height: auto; display: block; max-height: 40vh; object-fit: contain; }
.endcard2 .cap { margin: 6px 0 0; font: 9px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 6px; color: var(--ink); }
.endcard2 .cap span:last-child { text-align: right; }
@media (max-width: 700px) { .endrow { justify-content: flex-start; } .endcard2 { width: 40vw; } }

/* a photo put on the stack flies into the Stack button; on the front page its tile then leaves */
.flying { position: fixed; z-index: 60; pointer-events: none; margin: 0; max-width: none; max-height: none; object-fit: cover; transform-origin: center; }
.baseline .tile.gone { opacity: 0; transform: scale(.94); transition: opacity .3s, transform .3s; pointer-events: none; }
.project .main.taken img { opacity: 0; transition: opacity .15s; }

/* all brands, gallery: the brand-page cards (La Garçonne), every photo full width at its own ratio, bottoms aligned — no lines, no bands, no crops */
.grid.allgrid { grid-template-columns: repeat(4, 1fr); gap: 40px 22px; margin: 6px 0 0; max-width: none; align-items: end; }
.grid.allgrid .card .ph img { width: 100%; height: auto; object-fit: initial; display: block; }
@media (max-width: 900px) { .grid.allgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .grid.allgrid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; } }

/* bag: a centred panel over a white veil (mockup artboard 13), not a side sheet */
.veil { position: fixed; inset: 0; z-index: 39; background: rgba(250, 249, 247, .38); -webkit-backdrop-filter: blur(22px) saturate(.85); backdrop-filter: blur(22px) saturate(.85); animation: veilin .3s ease both; }   /* the page stays behind the bag, softly out of focus */
@keyframes veilin { from { opacity: 0; } }
#bag.sheet { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); max-height: calc(100vh - 120px); border: 1px solid var(--line); padding: 46px 40px 34px; animation: bagin .25s ease both; }
@keyframes bagin { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } }
@media (max-width: 700px) { #bag.sheet { padding: 44px 20px 24px; max-height: calc(100vh - 90px); } }

/* Aieul journal intro: longer, colindoerffler-style; the switch line no longer overlaps it */
.jswitch + .journal { margin-top: 0; }
.jswitch { margin-bottom: 22px; }
.jhead { max-width: 560px; }
.jhead p { margin: 0 0 14px; }
.jjump { font: inherit; padding: 0; text-align: left; }
.jjump:hover { text-decoration: underline; }

/* card caption with Add to bag on the right */
.cmeta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 10px; }
.cmeta .bline { margin-top: 0; }
.cmeta .cl { min-width: 0; }
.cmeta .cr { flex: 0 0 auto; font-size: 11px; white-space: nowrap; padding-top: 1px; }
.addb { font-size: 11px; }
.addb:hover { text-decoration: underline; }
.cmeta .stat { text-align: left; }

/* no grey side bands around narrow product shots: natural ratio, no studio ground */
.soonpcs { align-items: flex-end; gap: 28px; }
.soonpcs a { width: auto; }
.soonpcs img { height: 150px; width: auto; max-width: 40vw; aspect-ratio: auto; object-fit: initial; background: none; mix-blend-mode: normal; }
.piece img { background: none; mix-blend-mode: normal; }

/* product ground: clean white (was studio grey) */
.card .ph, .grid.allgrid .card .ph { background: var(--paper); }
.card .ph img.mult, .hph img.mult { mix-blend-mode: normal; }
.pv { background: var(--paper); border: 1px solid var(--line); }
.pv img { mix-blend-mode: normal; }
.seen img, .stacklist img, .citem img { background: var(--paper); }

/* price sits above Add to bag on the right of the card */
.cmeta .cr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cmeta .cr .pr { margin-top: 0; font-size: 12px; }
/* HTAE journal: the Journal — Aieul · HTAE line no longer runs into the header below */
.jswitch + .rbhead { margin-top: 0 !important; }
#view.rb .jswitch { margin-bottom: 12px; }

/* coming soon with the next release on top (Piloti) */
.shop.soon.withhero { padding-top: 2vh; }
.soonhero { margin: 26px auto 10px; max-width: 980px; gap: 14px; }
.soonhero img { cursor: default; }
/* stack: how it works */
.stackhow { font-size: 12.5px; line-height: 1.55; margin-top: 8px; }
.stackhow ol { padding-left: 18px; margin: 14px 0; }
.stackhow li { margin-bottom: 8px; }
.kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; text-align: center; font-size: 11px; line-height: 17px; }

/* "First seen in" shoes: each photo centred over its caption */
.soonpcs a { display: flex; flex-direction: column; align-items: center; text-align: center; }
.soonpcs img { margin: 0 auto 8px; }

/* ---------- this round ---------- */
/* fixed things inside the page (journal %, project page bar) stay fixed: the page fade no longer leaves a transform behind */
.fade { animation: fade .35s ease backwards; }
/* NEW ARRIVALS */
.shop h1 { text-transform: uppercase; font-size: 16px; font-weight: 500; letter-spacing: .1em; margin: 8px 0 24px; }
/* card caption: brand | price on one baseline, name | Add to bag on the next — reads as one small box */
.cmeta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: baseline; margin-top: 10px; }
.cmeta .bline, .cmeta .pr { margin: 0; font-size: 10.5px; line-height: 1.35; }
.cmeta .bline { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cmeta .pr { text-align: right; }
.cmeta .nm, .cmeta .cr, .cmeta .addb { margin: 0; font-size: 11px; line-height: 1.35; }
.cmeta .cr { display: block; text-align: right; white-space: nowrap; padding: 0; }
.cmeta .stat { grid-column: 1 / -1; margin: 0; }
/* new arrivals, one flat product shot: framed to the product itself with a little air (trimShot in app.js), never cut.
   --flat-h is the frame's height; the width follows the product. */
.hero.one.flatshot { display: flex; justify-content: center; }
.hero.one.flatshot .trim { --ar: .8; position: relative; display: block; overflow: hidden; width: min(100%, calc(var(--flat-h, 280px) * var(--ar))); aspect-ratio: var(--ar); cursor: pointer; }
.hero.one.flatshot .trim img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; aspect-ratio: auto; object-fit: fill; opacity: 0; transition: opacity .25s; }
.hero.one.flatshot .trim.ready img { opacity: 1; }

/* promo bar: a slow ticker */
.promo { justify-content: flex-start; padding: 0; }
.promo .ptrack { display: flex; width: max-content; animation: promo-roll 40s linear infinite; }
.promo .pset { display: flex; align-items: center; gap: 14px; padding-right: 14px; }
.promo:hover .ptrack { animation-play-state: paused; }
@keyframes promo-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo .ptrack { animation: none; } }
.hero.one:not(.flatshot) img { max-height: 46vh; }
/* product page: the next photo is a narrow faded sliver (mockup), never a second full photo */
.product .stage { overflow: hidden; }
.product .stage img:not(.ghost) { max-width: 68%; object-fit: contain; }
.product .stage .ghost { width: 12vw; max-width: 160px; height: 62vh; object-fit: cover; object-position: left center; opacity: .3; }
/* for you */
.foryou { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.fygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin-top: 12px; }
.fygrid a { font-size: 10.5px; line-height: 1.3; }
.fygrid img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--paper); margin-bottom: 5px; }
.fygrid a:hover span { text-decoration: underline; }
.fynew { margin-top: 16px; font-size: 11.5px; line-height: 1.6; }
.also { max-width: 460px; margin: 40px auto 0; text-align: left; }
.also .fygrid { grid-template-columns: repeat(4, 1fr); }

/* ---------- PER news: betweenbridges.net page, cnp.studio index ---------- */
.pern { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 0 4vw; align-items: start; }
.pn-side { position: sticky; top: calc(64px + var(--promo)); font-size: 10.5px; line-height: 1.3; max-height: calc(100vh - 120px - var(--promo)); overflow: auto; }
.pn-mast { margin: 0 0 20px; }
.pn-idx { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pn-idx a { display: flex; flex-direction: column; color: var(--mute); }
.pn-idx b { font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.pn-idx li.on b { text-decoration: underline; text-underline-offset: 2px; }
.pn-idx li.on a { color: var(--ink); }
.pn-idx a:hover b { text-decoration: underline; }
.pn-foot { margin-top: 26px; }
.pn-main { max-width: 760px; }
.pn-meta { font-size: 11px; line-height: 1.35; margin: 0 0 14px; }
.pn-hero { display: block; width: auto; max-width: 100%; max-height: 78vh; height: auto; margin: 4px 0 14px; background: var(--studio); }
.pn-text { font: 15px/1.38 "Times New Roman", Times, serif; max-width: 640px; margin: 24px 0 8px; }
.pn-text p { margin: 0 0 1em; }
.pn-text p.q { font-style: italic; }
.pn-text.verse p { margin: 0 0 .3em; }
.pn-more { font-size: 11px; margin: 6px 0 44px; }
.pn-grid { display: flex; flex-direction: column; gap: 10px; }
.pn-row { display: flex; gap: 10px; align-items: flex-start; }
.pn-row.one a { width: 58%; }
.pn-row.one.r { justify-content: flex-end; }
.pn-row.one.r a { width: 42%; }
.pn-row.two a { flex: var(--ar) 1 0; }   /* in proportion to the photographs, so a pair stands the same height */
.pn-row img { display: block; width: 100%; height: auto; background: var(--studio); }
.pn-row a:hover img { opacity: .85; }
.pn-cred { margin-top: 36px; color: var(--mute); }
.jsplit.three { grid-template-columns: 1fr 1fr 1fr; }
.jp-hero { width: 64%; height: auto; display: block; }
.jp-prev { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; font-size: 10.5px; line-height: 1.3; }
.jp-prev p { margin: 0; }
.jp-prev b { font-weight: 500; }
@media (max-width: 800px) { .pern { grid-template-columns: 1fr; } .pn-side { position: static; max-height: none; margin-bottom: 26px; } .pn-idx { grid-template-columns: repeat(2, 1fr); } .jsplit.three { grid-template-columns: 1fr; } }
/* the bag carries the house mark, not the brands in it */
.baglogo { font-size: 22px; letter-spacing: .08em; text-align: center; margin: 2px 0 26px; }

/* ---------- All brands: a publisher's list (cnp.studio) — or the pieces as a collage (rarebooksparis.com) ---------- */
.cat { max-width: 1500px; margin: 0 auto; }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 12px; margin: 0 0 10px; }
.cat-head b { font-weight: 500; text-transform: uppercase; letter-spacing: .08em; margin-right: 8px; }
.cat-views button.on, .cat-filters button.on { text-decoration: underline; text-underline-offset: 3px; }
.cat-filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 11px; margin: 0 0 34px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cat-filters .lbl { color: var(--mute); margin-left: 10px; }
.cat-filters .lbl:first-child { margin-left: 0; }
.cat-filters button.none { color: #c8c8c8; }
.cat sup { font-size: 7.5px; color: var(--mute); margin-left: 1px; vertical-align: super; line-height: 0; }
.cat-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.cat-col h3 { font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 18px; }
.cat-item { display: block; font-size: 10.5px; line-height: 1.3; margin: 0 0 15px; }
.cat-tx { display: flex; flex-direction: column; }
.cat-tx b { font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.cat-tx i, .cat-tx span { color: var(--mute); }
.cat-tx i { font-style: italic; }
.cat-item:hover b { text-decoration: underline; text-underline-offset: 2px; }
.cat-item.out b { color: var(--mute); }
.cat-th { display: none; }
@media (hover: none) {   /* no pointer to follow on a phone: a small picture beside each piece instead */
  .cat-item { display: flex; gap: 10px; align-items: flex-start; }
  .cat-th { display: block; width: 54px; height: 68px; object-fit: contain; flex: none; background: var(--paper); }
}
@media (max-width: 1000px) { .cat-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; } }
@media (max-width: 640px) { .cat-cols { grid-template-columns: 1fr 1fr; } .cat-filters .lbl { width: 100%; margin: 6px 0 0; } }
.cat-photos .citem img { background: var(--paper); }
.cat-photos .pcap { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px 12px; font-size: 10.5px; line-height: 1.3; }
.cat-photos .pcap b { font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.cat-photos .pcap span:last-child { white-space: nowrap; }
.cat-photos .citem.out img { opacity: .55; }
.cat-photos .citem:hover .pcap span:first-child { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- News: a magazine page ---------- */
.news { max-width: 1400px; margin: 0 auto; }
/* the page in the site's own type (Hanken Grotesk): the title set like NEW ARRIVALS, no serif anywhere */
.news-h { font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; margin: 8px 0 8px; }
.news-dek { font-size: 12px; color: var(--mute); margin: 0 0 46px; }
.news-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; padding-bottom: 8px; border-bottom: 1px solid var(--ink); margin-bottom: 22px; grid-column: 1 / -1; }
.nc-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; align-items: end; }
.nc { display: flex; flex-direction: column; font-size: 11px; line-height: 1.35; }
.nc-ph { height: 170px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; }
.nc-ph img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nc-b { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.nc-t { font-size: 13px; font-weight: 500; line-height: 1.35; margin: 3px 0 2px; }
.nc-d { color: var(--mute); }
.nc-s { margin-top: 6px; }
.nc:hover .nc-t, .nc:hover .nc-s { text-decoration: underline; text-underline-offset: 3px; }
.news-coming { margin-bottom: 64px; }
.news-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 0 0 70px; }
.news-now .news-lbl { width: 100%; }
.nn-t { font-size: 15px; font-weight: 500; }
.nn-go { font-size: 11px; }
.news-now:hover .nn-t { text-decoration: underline; text-underline-offset: 3px; }
.news-feed { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 72px 3vw; align-items: start; }
.nf { display: block; }
.nf.big { grid-column: 1 / span 7; }
.nf.small { grid-column: 9 / span 4; align-self: end; }
.nf.small.l { grid-column: 1 / span 4; align-self: start; margin-top: 40px; }
.nf.big.r { grid-column: 6 / span 7; }
.nf img { display: block; width: auto; max-width: 100%; height: auto; max-height: 76vh; margin-bottom: 14px; background: var(--studio); }
.nf.small img { max-height: 48vh; }
.nf-meta { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-bottom: 6px; }
.nf-t { font-size: 17px; font-weight: 500; line-height: 1.3; }
.nf.small .nf-t { font-size: 14px; }
.nf-sub { font-size: 11px; margin-top: 6px; }
.nf-line { font-size: 13px; line-height: 1.45; margin: 8px 0 0; max-width: 520px; }
.nf-go { font-size: 11px; margin-top: 10px; }
.nf:hover .nf-t { text-decoration: underline; text-underline-offset: 3px; }
.news-foot { margin: 90px 0 20px; font-size: 12px; }
@media (max-width: 900px) {
  .nc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-feed { grid-template-columns: 1fr; gap: 56px; }
  .nf.big, .nf.small, .nf.small.l, .nf.big.r { grid-column: 1; margin-top: 0; }
  .nf-t { font-size: 15px; }
}
/* Stack: the PDF button carries a line drawing of an open book */
.stackacts { margin-top: 22px; display: flex; align-items: center; gap: 18px; }
.pdfbtn { display: inline-flex; align-items: center; gap: 9px; }
.pdfbtn:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ico-book { flex: none; }
/* front page sizes */
#front.baseline { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
#front.z-small { gap: 14px 10px; }
#front.z-small .cap { display: none; }
#front { touch-action: pan-y; }   /* two fingers on the photographs change the size here, not the whole page */
.ztools { top: calc(122px + var(--promo)); }   /* below the Newest / Random bar */
.ztools button { color: inherit; }
.ztools button.on, .ztools button:hover { color: var(--ink); }
/* Instagram under a brand's name */
.iglink { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mute); margin: 6px auto 0; }
.iglink:hover { color: var(--ink); }
.iglink:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ico-ig { flex: none; }
.footig .iglink { margin: 3px 0 0; font-size: 10px; }
.nhead .iglink { margin-left: 14px; }
.pn-year { margin: 22px 0 10px; font-size: 10.5px; color: var(--mute); letter-spacing: .06em; }
.pn-mast + .pn-year { margin-top: 0; }
/* phones have no pointer to hover with: the line stays, so the field can be found */
@media (hover: none) { .sub .field { border-bottom-color: var(--ink); } .sub input { opacity: 1; } }

/* ---------- PER news: Read · List · Images ---------- */
.pn-views { display: flex; align-items: baseline; gap: 16px; font-size: 12px; margin: 0 0 26px; }
.pn-views a.on { text-decoration: underline; text-underline-offset: 3px; }
.pn-views .muted { margin-left: auto; font-size: 11px; }
/* List: a line for each piece, numbered from the first; the cover follows the pointer */
.pn-list { font-size: 12px; }
.pl-row { display: grid; grid-template-columns: 46px 104px minmax(0, 2.4fr) minmax(0, 1.5fr) 120px 74px; gap: 0 18px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pl-head { color: var(--mute); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--ink); padding-top: 0; }
.pl-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row span:nth-child(1), .pl-row span:nth-child(2), .pl-row span:nth-child(6) { color: var(--mute); font-variant-numeric: tabular-nums; }
.pl-row span:nth-child(6) { text-align: right; }
.pl-row b { font-weight: 500; }
a.pl-row:hover b { text-decoration: underline; text-underline-offset: 3px; }
a.pl-row:hover { background: #fbfaf8; }
.pl-year { font-size: 10.5px; letter-spacing: .08em; color: var(--mute); padding: 28px 0 6px; }
@media (max-width: 760px) {
  .pl-row { grid-template-columns: 40px minmax(0, 1fr) 86px; }
  .pl-row span:nth-child(2), .pl-row span:nth-child(4), .pl-row span:nth-child(6) { display: none; }
  .pl-row span:nth-child(5) { text-align: right; color: var(--mute); }
}
/* Images: every cover, bottoms level, captioned like the archive */
.baseline.pn-imgs { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; padding-top: 0; }
.baseline.pn-imgs .frame img { max-height: 52vh; object-fit: contain; object-position: bottom; background: none; }
@media (max-width: 1000px) { .baseline.pn-imgs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .baseline.pn-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* menu: Bag · Search · Stack · PDF as a row of line drawings under the words */
.menu-icons { flex-direction: row; align-items: center; gap: 15px; margin-top: 4px; }
.menu-icons button { display: inline-flex; align-items: center; gap: 1px; color: var(--ink); line-height: 1; }
.menu-icons button:hover svg { opacity: .55; }
.menu-icons sup { vertical-align: baseline; font-size: 11px; line-height: 1; align-self: center; margin-left: 3px; font-variant-numeric: tabular-nums; }   /* (2), (15) beside the icon, in brackets */
.menu-icons .icolbl { font-size: 9.5px; letter-spacing: .06em; align-self: center; margin-left: 3px; }
/* the open book wherever a page becomes a PDF */
.pdfbtn { display: inline-flex; align-items: center; gap: 6px; }
.pdfbtn svg { flex: none; }
.pdfhead { display: flex; align-items: center; gap: 10px; }
.print-go.pdfgo { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
/* the Stack in the header: the same line drawing, its count in brackets beside it */
.stacklink { display: inline-flex; align-items: center; gap: 4px; top: 13px; line-height: 1; }
.stacklink:hover svg { opacity: .55; }
.stacklink .stackCount { font-size: 11px; font-variant-numeric: tabular-nums; }

/* subscribe: the words sit centred over the line; send is a blue paper plane at the line's right end, there once something is typed */
.sub > div:first-child { text-align: center; }
.sub .field { display: flex; align-items: center; }
.sub .field input { flex: 1; min-width: 0; padding-right: 6px; }
.sub .field .send { flex: none; margin: 0 0 0 4px; padding: 2px 0 2px 2px; display: inline-flex; align-items: center; color: #1b3cff; }
.sub .field .send:hover { text-decoration: none; }
.sub .field .send:hover svg { transform: translate(1px, -1px); }
.sub .field .send svg { transition: transform .2s; }

/* cut-out product shots (white or light ground) sit in a light grey square again: the white of the photo melts into
   the studio grey, so only the piece shows. Photographs with their own background keep it. */
.card .ph:has(img.mult), .hph:has(img.mult) { background: var(--studio); }
.card .ph img.mult, .hph img.mult { mix-blend-mode: multiply; }
/* the icons one under another, like the words above: drawings on the right edge, the count or label just left of them */
.menu-icons { flex-direction: column; align-items: flex-end; gap: 9px; margin-top: 2px; }
.menu-icons button { flex-direction: row-reverse; gap: 7px; }
.menu-icons svg { width: 22px; height: auto; }
.menu-icons sup, .menu-icons .icolbl { margin-left: 0; }
/* News feed: the two pieces of a row sit close — no empty column between them, a 28px gutter */
.news-feed { column-gap: 28px; row-gap: 64px; }
.nf.big { grid-column: 1 / span 7; }
.nf.small { grid-column: 8 / span 5; }
.nf.small.l { grid-column: 1 / span 5; }
.nf.big.r { grid-column: 6 / span 7; }
/* News feed in rows of two: the row is full, the gutter 28px, no picture cut; the larger piece stays under 74% of the
   screen's height (the row narrows instead), and alternates sides */
.news-feed { display: flex; flex-direction: column; gap: 64px; }
.nf-row { display: flex; gap: 28px; align-items: flex-start; max-width: calc(74vh * var(--S, 2) / var(--wb, 1.35) + 28px); }
.nf-row.r { margin-left: auto; }
.nf-row.one { max-width: calc(60vh * var(--S, 1)); }
.nf-row .nf { flex: var(--g, 1) 1 0; min-width: 0; grid-column: auto; margin-top: 0; align-self: auto; }
.nf-row .nf img { width: 100%; height: auto; max-height: none; }
@media (max-width: 900px) {
  .nf-row { flex-direction: column; max-width: none; gap: 48px; }
  .nf-row .nf { flex: none; width: 100%; }
}

/* News feed: every piece in a thin frame — the picture mounted inside it, its words underneath, inside the same line.
   One gap everywhere: 28px between frames, side by side and row to row; the frames in a row stand the same height */
.news-feed { gap: 28px; }
.news-feed > .news-lbl { margin-bottom: 0; }
.nf-row { align-items: stretch; }
.nf-row .nf { border: 1px solid #cfcac2; padding: 12px 12px 16px; display: flex; flex-direction: column; transition: border-color .2s; }
.nf-row .nf:hover { border-color: var(--ink); }
.nf-row .nf img { margin: 0 0 14px; }
.nf-row .nf .nf-meta { margin-bottom: 5px; }
.nf-row .nf .nf-go { margin-top: auto; padding-top: 10px; }   /* "Read →" sits at the foot of the frame, level across a row */
@media (max-width: 900px) { .nf-row { gap: 28px; } }
.news-feed { align-items: stretch; }   /* the LATEST rule runs the full width, like COMING */
/* the house mark a little heavier — medium, not bold — in the header and on the bag */
.logo { font-weight: 500; }
.baglogo { font-weight: 500; }
/* + stack on the News pieces and on each line of the PER list */
.nf-row .nf .nf-go { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pl-row { grid-template-columns: 46px 104px minmax(0, 2.4fr) minmax(0, 1.5fr) 120px 74px 64px; }
.pl-row .pl-sk { text-align: right; overflow: visible; }
@media (max-width: 760px) { .pl-row { grid-template-columns: 40px minmax(0, 1fr) 86px 58px; } }
/* stack buttons carry the stack drawing (no "+"): on photos a small round chip, in text an inline icon */
.stk { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.stk.short { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; line-height: 1; padding: 0; }
.stk.short .ico-stk { width: 16px; height: 16px; }
.stk.short.in { background: var(--olive); border-color: var(--olive); color: #fff; }
.stk.long { text-decoration: none; }
.stk.long span { text-decoration: underline; text-underline-offset: 3px; }
.stk.link { color: var(--ink); }
.stk.link.in, .stk.long.in { color: var(--olive); }
.stk:hover .ico-stk { opacity: .6; }
.jhead .ico-stk, .kbd .ico-stk { width: 14px; height: 14px; vertical-align: -2px; }
/* subscribe: a wrong address — the line goes red, one quiet line of words underneath */
.sub.bad .field { border-bottom-color: var(--red) !important; }
.sub .subnote { margin-top: 6px; font-size: 11px; color: var(--red); text-align: center; }
/* menu: the bag sits right under the brands, the stack right under Journal (the search on top keeps its space) */
.menu .menu-group + .menu-icons { margin-top: -12px; }

/* header, left: search, then the stack — line drawings side by side */
.lefttools { position: absolute; left: 16px; top: 12px; display: flex; align-items: center; gap: 14px; }
.lefttools .stacklink { position: static; }
.searchlink { display: inline-flex; align-items: center; line-height: 1; }
.searchlink:hover svg { opacity: .55; }
/* header, right: the circle and the menu mark the same size (17px) and the same line (1.5px); open, the + turns into an
   × that fills the same square as the circle */
.dot { width: 17px; height: 17px; box-sizing: border-box; }
.plus { position: relative; width: 17px; height: 17px; font-size: 0; line-height: 0; padding: 0; transition: none; }
body.menu-open .plus { transform: none; }
.plus::before, .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 17px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s, width .25s; }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
body.menu-open .plus::before { width: 24px; transform: translate(-50%, -50%) rotate(45deg); }
body.menu-open .plus::after { width: 24px; transform: translate(-50%, -50%) rotate(-45deg); }
.dots { gap: 12px; top: 15px; }
/* the × a little smaller than the circle (about 14px across) */
body.menu-open .plus::before, body.menu-open .plus::after { width: 20px; }
/* footer as a cut-out: no white box — the words and the icon invert against whatever passes under them
   (black on the white page, light over a dark photograph) */
.foot { background: transparent; color: #fff; mix-blend-mode: difference; }
.foot a, .foot .iglink { color: inherit; }
.foot .iglink:hover { color: inherit; opacity: .7; }

/* header as a cut-out, like the footer: no white bar, no line — the search, the stack, Pp, ○ and + pass over the page
   and invert against whatever is under them (black on white, light over a dark photograph). The blend sits on the bar
   itself so everything in it blends with the page. */
.top { background: transparent; border-bottom: 0; color: #fff; mix-blend-mode: difference; }
.top .logo, .top button { color: #fff; }
.top .dot { border-color: #fff; }
.top .dot:hover { background: #fff; }
.top .plus::before, .top .plus::after { background: #fff; }
/* "Subscribe to …" in the same blue as the paper plane (the thank-you that replaces it too) */
.sub > div:first-child { color: #1b3cff; }
/* after sending: "Thank you." on its own line, the rest on one line underneath, centred on the page */
.sub.sent { width: auto; }
.sub.sent > div:first-child { line-height: 1.6; }
/* product record: two rows of three — Brand · Category · Colour / Sizes · Price · Seen in */
.record { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; gap: 16px 28px; }
@media (max-width: 700px) { .record { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; } }

/* a photo that is already on the stack: its mark waits as a faint cut-out (no chip, no colour) and only wakes up —
   the olive chip — when the pointer comes onto the photo. Where photos are gathered (an edition, your front page)
   they no longer carry a badge each. */
.stk.short.in { opacity: .45; background: transparent; border-color: transparent; color: #fff; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .5)); transition: opacity .15s, background .15s; }
.tile:hover .stk.short.in, .card:hover .stk.short.in, .citem:hover .stk.short.in, .hcell:hover .stk.short.in, .stk.short.in:hover, .stk.short.in:focus-visible { opacity: 1; background: var(--olive); border-color: var(--olive); filter: none; }
@media (hover: none) { .stk.short.in { opacity: .7; } }
/* subscribe: what you type in grey, the paper plane in black (the words above stay blue) */
.sub input { color: var(--mute); caret-color: var(--ink); }
.sub .field .send { color: var(--ink); }
/* product page: only "Seen in" stays below (brand, name, price, sizes and colour are already above) */
.record.seenonly { display: flex; justify-content: center; text-align: center; max-width: none; }
.record.seenonly .seen { justify-content: center; }
/* the wishlist heart: an outline until the piece is saved, then filled in olive */
.stk.wish .ico-heart { width: 18px; height: 18px; }
.stk.wish.link { color: var(--ink); }
.stk.wish.in { color: var(--olive); }
.stk.short.wish.in:not(:hover) { color: #fff; }
.tile:hover .stk.short.wish.in, .card:hover .stk.short.wish.in, .citem:hover .stk.short.wish.in { color: #fff; }
.wishmark { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--olive); }
.wishmark .ico-heart { width: 12px; height: 12px; }

/* bag: the wishlist under Checkout */
.bagwish { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); text-align: left; }
.bw-head { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 12px; }
.bw-head .ico-heart { color: var(--olive); width: 15px; height: 15px; }
.bw-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bw-item { display: flex; flex-direction: column; gap: 1px; font-size: 11px; line-height: 1.3; cursor: pointer; min-width: 0; }
.bw-item > span:not(.bw-ph) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-ph { display: block; background: var(--studio); margin-bottom: 6px; }
.bw-ph img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; }
.bw-item:hover > span:nth-child(2) { text-decoration: underline; text-underline-offset: 2px; }
.bw-add { align-self: flex-start; margin-top: 4px; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }

/* colour and size: no ring — the chosen one in bold ink, the others quiet grey; each keeps its bold width so nothing shifts */
.opts { gap: 20px; }
.opts button, .nu-sz button { padding: 1px 0; border: 0; border-radius: 0; color: var(--mute); display: inline-flex; flex-direction: column; align-items: center; transition: color .15s; }
.opts button::after, .nu-sz button::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.opts button:hover:not(:disabled), .nu-sz button:hover { color: var(--ink); text-decoration: none; }
.opts button.on, .nu-sz button.on { color: var(--ink); font-weight: 600; border-color: transparent; }
.opts button:disabled { opacity: .5; text-decoration: line-through; }
/* the Nuance look: sizes to choose, and Add to bag where Add to stack was */
.nu-sz { display: inline-flex; gap: 12px; vertical-align: baseline; }
.nu-buy { margin-top: 18px; }
.nu-add { display: inline-flex; align-items: center; gap: 6px; }
.nu-add:hover { text-decoration: none; }
.nu-add span { text-decoration: underline; text-underline-offset: 3px; }
.nu-msg { margin-top: 6px; min-height: 1em; }

/* subscribe: the words (and the thank-you) in the first blue; a wrong address keeps the quiet brick red set further up */
:root { --sub-c: #1b3cff; }
.sub > div:first-child { color: var(--sub-c); }

/* a Nuance look like the archive's book view: the look in the middle, its neighbours at the sides, the pieces underneath */
.project.nulook { height: calc(100vh - 252px - var(--promo)); }
.project.nulook .main img { max-height: calc(100vh - 252px - var(--promo)); }
.project.nulook .side, .project.nulook .side img { max-height: 42vh; }
.nu-shop { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 14px 34px; max-width: 1100px; margin: 18px auto 0; }
.nu-shop .piece { grid-template-columns: 46px auto; margin: 0; }
.nu-shop .piece img { width: 46px; }
.nu-shop .nu-buy { margin: 0; align-self: center; }
.nu-shop .nu-msg { margin: 4px 0 0; }
@media (max-width: 700px) { .project.nulook { height: auto; } .nu-shop { flex-direction: column; align-items: flex-start; padding: 0 16px 90px; } }

/* new arrivals: the release date in bold */
.release b { font-weight: 600; }

/* front page: the % sizes just under the header (the Newest / Random bar is gone), the photographs start below them */
.ztools { top: calc(56px + var(--promo)); }
#front { margin-top: 40px; }
@media (max-width: 700px) { #front { margin-top: 0; } }
/* Nuance: the Instagram mark at the foot of the page, centred */
.nu-ig { display: flex; justify-content: center; margin: 56px 0 10px; }
.nu-ig .iglink { margin: 0; }

/* ○ — Nuance Neuf: neuf is new, and nine, the lucky number. A ring at rest; under the pointer its 9 shows;
   pressed (or R) it turns into a lucky ball — the disc filled, the 9 cut out of it, rolling in — while the page shuffles */
.dot { display: inline-flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
.dot .nine { width: 14px; height: 14px; display: block; flex: none; }
.dot .nine text { font: 600 10px 'Hanken Grotesk', sans-serif; fill: #fff; opacity: 0; transition: opacity .15s; transform-box: fill-box; transform-origin: center; }
.top .dot:hover { background: transparent; }
.top .dot:hover .nine text, .top .dot:focus-visible .nine text { opacity: 1; }
.top .dot.lucky { background: #fff; }
.top .dot.lucky .nine text { opacity: 1; fill: #000; animation: nine-roll .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes nine-roll { from { transform: rotate(-200deg) scale(.6); } to { transform: none; } }

/* ○ → 9: at rest only the 9 (Nuance Neuf — nine, new, lucky); come near and the ring draws round it as the 9 settles
   inside; press (or R) and it turns into the lucky ball — the disc filled, the 9 cut out of it, rolling in */
.top .dot { border-color: transparent; transition: background .2s, border-color .2s; }
.dot .nine text { font-size: 16px; opacity: 1; transform: none; transition: transform .2s, fill .2s; }
.top .dot:hover, .top .dot:focus-visible { border-color: #fff; }
.top .dot:hover .nine text, .top .dot:focus-visible .nine text { transform: scale(.62); }
.top .dot.lucky { border-color: #fff; background: #fff; }
.top .dot.lucky .nine text { fill: #000; transform: scale(.62); animation: nine-roll2 .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes nine-roll2 { from { transform: rotate(-200deg) scale(.35); } to { transform: scale(.62); } }

/* pressed: the black ball shows for a blink only — in at once, out in a quick fade, no roll */
.top .dot { transition: background .26s ease-out, border-color .2s; }
.dot .nine text { transition: transform .2s, fill .26s ease-out; }
.top .dot.lucky, .top .dot.lucky .nine text { transition: none; animation: none; }
/* Pp, a touch closer (the space after the p is given back on the left, so the pair stays centred) */
.logo { letter-spacing: .11em; padding-left: .11em; }

/* the 9 on a product page: the picks underneath are drawn again — they come in softly, one after another */
.also.reroll .fygrid a { animation: fy-in .4s ease-out both; }
.also.reroll .fygrid a:nth-child(2) { animation-delay: .05s; }
.also.reroll .fygrid a:nth-child(3) { animation-delay: .1s; }
.also.reroll .fygrid a:nth-child(4) { animation-delay: .15s; }
@keyframes fy-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.fywish { display: inline-flex; vertical-align: -1px; margin-right: 4px; color: var(--olive); }
.fywish svg { width: 10px; height: 10px; }

/* Index: the number the 9 picked */
.nums a.picked { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }