/* Sol Stories mockup: the shared stylesheet. Lola's storefront grammar
   (charcoal on white, uppercase grotesk, square edges, grey product
   tiles) with the Sol wordmark and the house olive as the one accent. */

:root {
  /* The linen weave, shared with reader.css (--rev-linen on .rvx) so the cards' tiles wear it too. */
  --rev-linen: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='h'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.75' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .27 0 0 0 .55 0'/></filter><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='0.75 0.012' numOctaves='3' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .27 0 0 0 .55 0'/></filter><rect width='240' height='240' filter='url(%23h)'/><rect width='240' height='240' filter='url(%23v)'/></svg>");
  --ink: #2d2f2f;
  --ink-soft: #5b5e5e;
  --ink-faint: #8d8f8c;
  --paper: #ffffff;
  --tile: #f5f4f1;
  --rule: #e4e3df;
  --bar: #2d2f2f;
  --on-bar: #ffffff;
  --olive: #5f5b45;
  --olive-wash: #f3f1ea;
  --good: #3f6b3a;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --top-h: 94px;
  color-scheme: light;
}
@media (min-width: 900px) { :root { --top-h: 100px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: var(--ink); }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.caps { text-transform: uppercase; font-weight: 600; letter-spacing: 0.01em; }
.gutter { padding-inline: 16px; }
@media (min-width: 900px) { .gutter { padding-inline: 24px; } }
.wrap { max-width: 1320px; margin-inline: auto; }
.narrow { max-width: 720px; margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.4; flex: none; }
.hide, [hidden] { display: none !important; }

/* ── buttons ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; padding: 15px 20px; min-height: 48px; transition: background .15s, opacity .15s; }
.btn:hover { background: #151616; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.full { width: 100%; }
.btn.white { background: #fff; color: var(--ink); }
.btn.white:hover { background: #f2f2f0; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.line:hover { background: var(--tile); }
.btn.olive { background: var(--olive); }
.btn.olive:hover { background: #4d4a37; }
.ulink { font-size: 14px; font-weight: 600; text-transform: uppercase; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; justify-self: start; align-self: start; }
.tlink { text-decoration: underline; text-underline-offset: 3px; }

/* ── the dated strip (components/Notice.tsx) ─────────────── */
/* It is rendered by App above every page, old site and new, and the new
   site stands down the only sheet that had ever styled it: on 2026-10-08
   the Linen upgrade strip went out bare — the words ran off the left edge
   and the close button fell onto its own line (Ziah: "the linen upgrade
   banner isnt working properly"). Same family as /say and /thanks going
   out unstyled: markup that knows only index.css, on a page that has
   stood index.css down.
   The selectors are unscoped on purpose. The strip is rendered ABOVE the
   page's own .ns wrapper, so .ns .notice would never match it; this sheet
   is itself disabled whenever the old site stands (lib/new-look.ts), so
   plain .notice applies exactly when the new site does — and from the
   first frame, since the sheet is in the head. */
.notice {
  position: relative;
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 9px 48px;
  box-sizing: border-box;
  background: var(--olive);
  color: #fbf8f1;
  text-align: center;
}
.notice-text {
  margin: 0;
  max-width: 68ch;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  text-wrap: balance;
}
.notice-clock { font-weight: 600; font-variant-numeric: tabular-nums; }
.notice-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* A thumb needs 44px however small the glyph is, and the strip's own side
   padding keeps the words clear of it. */
.notice-shut {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(251, 248, 241, 0.72);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.notice-shut:hover { color: #fbf8f1; }
/* The extended window: the one strip that says something has been held
   open past its own deadline. */
.notice-urgent { background: #8c2f22; color: #f7f1e8; }

/* ── top: bar + header ──────────────────────────────────── */
/* The strip runs up under the phone's status bar (Ziah, 2026-09-27: on iOS the header sat below a gap the page showed through): the bar starts at 0 and pads by the safe area, so the dark fills the notch. */
/* Sticky needs no help with the dated strip above it: at rest it sits
   below the strip in flow, and it pins at the top once the strip has
   scrolled away. The HERO pages are the ones that needed telling — see
   --notice-h further down. */
.top { position: sticky; top: 0; z-index: 30; }
.announce { background: var(--bar); color: var(--on-bar); text-align: center; font-size: 13px; font-weight: 600; text-transform: uppercase; height: calc(36px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; display: grid; place-items: center; padding-inline: 16px; overflow: hidden; }
/* NOTHING MOVES ON THE FIRST PAINT (Ziah, 2026-09-28: "a weird animation happens first"): the strip's rise, the header's fade and the product bar's slide wait until html.ns-settled, set a frame after load (lib/new-look.ts, shop.js). */
.announce span { display: block; }
.announce span.rise { animation: rise .5s ease; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.head { background: var(--paper); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 58px; padding-inline: 16px; }
.head .l, .head .r { display: flex; align-items: center; gap: 18px; }
.head .r { justify-content: flex-end; }
.head .navlink { font-size: 14px; font-weight: 600; text-transform: uppercase; display: none; white-space: nowrap; }
.head .navlink.on { box-shadow: inset 0 -2px 0 var(--ink); }
.head .hb { position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.head .hide-sm { display: none; }
.wordmark { font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: 0.28em; text-align: center; line-height: 1; padding-left: 0.28em; white-space: nowrap; }
.wordmark small { display: block; font-family: var(--sans); font-size: 8.5px; letter-spacing: 0.32em; font-weight: 600; margin-top: 5px; }
.badge-count { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; padding: 0 4px; transform: scale(0); transition: transform .2s; }
.badge-count.on { transform: scale(1); }
.badge-count.pop { animation: pop .35s ease; }
@keyframes pop { 50% { transform: scale(1.35); } }
@media (min-width: 900px) {
  .head { height: 64px; padding-inline: 24px; }
  .head .navlink { display: inline; }
  .head .hide-sm { display: grid; }
  .wordmark { font-size: 20px; }
}

/* ── drawers, overlays ──────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(20,20,20,.38); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(90vw, 400px); background: #fff; z-index: 61; transform: translateX(-102%); transition: transform .3s cubic-bezier(.2,.8,.2,1); display: grid; grid-template-rows: auto 1fr auto; padding-top: env(safe-area-inset-top, 0px); }
.drawer.right { left: auto; right: 0; transform: translateX(102%); }
.drawer.on { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; height: 58px; padding-inline: 16px; border-bottom: 1px solid var(--rule); font-size: 15px; font-weight: 600; text-transform: uppercase; }
.drawer-body { overflow-y: auto; overscroll-behavior: contain; }
.drawer-foot { border-top: 1px solid var(--rule); padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.x { width: 32px; height: 32px; display: grid; place-items: center; }
.x svg { width: 18px; height: 18px; stroke: var(--ink); stroke-width: 1.6; fill: none; }

.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list > li { border-bottom: 1px solid var(--rule); }
.menu-list a, .menu-list button.m-open { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 16px; font-size: 14px; font-weight: 600; text-transform: uppercase; text-align: left; }
.menu-list .chev { width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
.menu-sub { display: none; list-style: none; margin: 0; padding: 0 16px 12px; }
.menu-sub.on { display: block; }
.menu-sub a { padding: 9px 0; font-size: 15px; font-weight: 500; text-transform: none; }
.menu-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; }
.menu-tiles a { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tile); }
.menu-tiles img { width: 100%; height: 100%; object-fit: cover; }
.menu-tiles span { position: absolute; left: 12px; bottom: 12px; color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; border-bottom: 1.5px solid #fff; z-index: 1; }
.menu-tiles a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4), transparent 50%); }
.menu-meta { display: grid; gap: 12px; padding: 20px 16px; font-size: 14px; }

.search-panel { position: fixed; left: 0; right: 0; top: 0; z-index: 61; background: #fff; transform: translateY(-104%); transition: transform .3s cubic-bezier(.2,.8,.2,1); padding-top: env(safe-area-inset-top, 0px); max-height: 100svh; overflow-y: auto; }
.search-panel.on { transform: none; }
.search-bar { display: flex; align-items: center; gap: 12px; height: 64px; padding-inline: 16px; border-bottom: 1px solid var(--rule); }
.search-bar input { flex: 1; min-width: 0; border: 0; font-size: 18px; font-weight: 500; outline: none; background: none; }
.search-body { padding: 18px 16px 26px; }
.search-body h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--ink-soft); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { border: 1px solid var(--rule); padding: 8px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 900px) { .results { grid-template-columns: repeat(5, 1fr); } }
.results a { background: #fff; display: grid; gap: 6px; padding-bottom: 12px; }
.results img { aspect-ratio: 4 / 5; object-fit: cover; background: var(--tile); width: 100%; }
.results b { font-size: 13px; text-transform: uppercase; padding-inline: 10px; }
.results span { font-size: 13px; padding-inline: 10px; color: var(--ink-soft); }
.nothing { font-size: 15px; padding: 10px 0 20px; }

.modal { position: fixed; z-index: 62; left: 50%; top: 50%; width: min(92vw, 460px); max-height: 90svh; overflow-y: auto; background: #fff; transform: translate(-50%, -46%); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.modal.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.modal .x { position: absolute; top: 8px; right: 8px; z-index: 2; background: #fff; }
.modal-img { aspect-ratio: 16 / 9; overflow: hidden; }
.modal-img img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { padding: 24px 22px 26px; display: grid; gap: 12px; }
.modal-body h2 { margin: 0; font-size: 22px; font-weight: 600; text-transform: uppercase; line-height: 1.1; }
.modal-body p { margin: 0; font-size: 14px; }
.modal-body small { font-size: 12px; color: var(--ink-soft); }

.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 70; transform: translate(-50%, 24px); opacity: 0; visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s, visibility .3s; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; padding: 13px 16px; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ── forms ──────────────────────────────────────────────── */
.field { display: grid; gap: 6px; }
.field label, .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; }
.input, .select, .textarea { width: 100%; border: 1px solid #cfceca; background: #fff; padding: 13px 12px; font-size: 16px; border-radius: 0; appearance: none; -webkit-appearance: none; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.textarea { min-height: 110px; resize: vertical; }
.select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.inline-form { display: flex; }
.inline-form .input { border-right: 0; }
.inline-form .btn { min-height: 0; padding-block: 0; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.err { color: #9a2b1f; font-size: 13px; }
.note { font-size: 13px; color: var(--ink-soft); }

/* ── home: hero carousel ────────────────────────────────── */
.hero { position: relative; }
.hero-track, .x-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hero-track::-webkit-scrollbar, .x-scroll::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: min(78svh, 700px); overflow: hidden; background: #d9d6ce; }
.slide img, .slide video { width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 48%); }
.slide-copy { position: absolute; left: 16px; right: 16px; bottom: 76px; z-index: 1; text-align: center; color: #fff; display: grid; justify-items: center; gap: 4px; }
.slide-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); margin-bottom: 4px; }
.slide-rating b { color: #dcae3c; letter-spacing: 1px; font-size: 12px; font-weight: 500; }
.slide-copy h1, .slide-copy h2 { margin: 0; font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.005em; text-wrap: balance; }
.slide-copy p { margin: 0 0 14px; font-size: 14px; }
/* THE SOUND, IF THEY ASK FOR IT (Ziah, 2026-10-06). No browser will
   autoplay a film that makes a noise, so the hero plays silent and this
   turns it on. Small and in the corner: it is an offer, not a control
   the page is about. Above the slide's own gradient, and out of the way
   of the copy at the foot. */
.hero-sound {
  /* Bottom right, not top: the top bar sits OVER the hero and its search
     and account icons are already there. The film-only hero has no
     arrows or dots along the foot, so this corner is free. */
  position: absolute; bottom: 18px; right: 16px; z-index: 3;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(0, 0, 0, .34); backdrop-filter: blur(4px);
  border: 0; cursor: pointer;
}
.hero-sound .ico { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-sound:hover { background: rgba(0, 0, 0, .5); }
@media (min-width: 900px) { .hero-sound { bottom: 22px; right: 22px; } }

.hero-nav { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; align-items: center; gap: 18px; z-index: 2; }
.hero-nav button { width: 30px; height: 30px; display: grid; place-items: center; }
.hero-nav .ico { stroke: #fff; width: 14px; height: 14px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 18px; height: 2px; background: rgba(255,255,255,.45); transition: background .2s, width .2s; }
.dots i.on { background: #fff; width: 26px; }
@media (min-width: 900px) {
  .slide { height: min(84vh, 800px); }
  .slide-copy { bottom: 92px; }
  .slide-copy h1, .slide-copy h2 { font-size: 32px; }
  .slide-copy p { font-size: 16px; }
}

/* ── product cards and rows ─────────────────────────────── */
.tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding-block: 18px 12px; border-bottom: 1px solid var(--rule); }
.tabs::-webkit-scrollbar { display: none; }
.tab { font-size: 14px; font-weight: 600; text-transform: uppercase; white-space: nowrap; padding-bottom: 6px; border-bottom: 2px solid transparent; color: var(--ink-faint); transition: color .15s; }
.tab[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }
.rowwrap { position: relative; }
/* A breath between the pictures (Ziah, 2026-09-27). */
.row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1px) / 2); gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .row { grid-auto-columns: calc((100% - 3px) / 4); } }
.row-arrows { position: absolute; right: 14px; top: calc((min(100vw, 1320px) / 2) * 1.25 - 52px); display: flex; background: #fff; border: 1px solid var(--rule); z-index: 2; }
@media (min-width: 900px) { .row-arrows { top: calc((min(100vw, 1320px) / 4) * 1.25 - 52px); } }
.row-arrows button { width: 36px; height: 36px; display: grid; place-items: center; }
.row-arrows button + button { border-left: 1px solid var(--rule); }
.row-arrows button[disabled] { opacity: .3; cursor: default; }
.row-arrows .ico { width: 16px; height: 16px; }

.card { position: relative; scroll-snap-align: start; border-right: 0; display: grid; grid-template-rows: auto 1fr; min-width: 0; background: #fff; }
.card-img { position: relative; background: var(--tile); aspect-ratio: 4 / 5; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: opacity .35s, transform .6s ease; }
.card-img img.alt { position: absolute; inset: 0; opacity: 0; mix-blend-mode: normal; }
@media (hover: hover) { .card:hover .card-img img.alt { opacity: 1; } .card:hover .card-img img:first-of-type { transform: scale(1.03); } }
/* A title waiting for its picture: the house's ground and its name,
   rather than the empty white box the Christmas card showed on
   2026-10-08. */
.card-img-bare { display: grid; place-items: center; padding: 24px; background: var(--olive-wash); }
.card-img-name { font-family: var(--serif); font-size: 19px; line-height: 1.25; text-align: center; text-wrap: balance; color: var(--ink-soft); letter-spacing: .01em; }
.badge { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 500; padding: 3px 6px; z-index: 2; }
.badge.dark { background: var(--ink); color: #fff; }
.card-body { padding: 14px 14px 26px; display: grid; gap: 4px; align-content: start; }
.card-title { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; line-height: 1.25; }
.card-sub, .card-price { font-size: 14px; font-weight: 500; }
.heart { flex: none; width: 24px; height: 24px; display: grid; place-items: center; margin: -3px -4px 0 0; position: relative; z-index: 3; }
.heart svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.4; transition: fill .15s, transform .2s; }
.heart[aria-pressed="true"] svg { fill: var(--ink); }
.heart:active svg { transform: scale(.85); }
.swatches { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 13px; }
.sw { width: 10px; height: 10px; border: 1px solid rgba(0,0,0,.15); }
.stars { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.stars b { letter-spacing: 1px; font-size: 11px; font-weight: 500; }
.card-link { position: absolute; inset: 0; z-index: 1; }

.grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 2px; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(var(--dcols, 4), minmax(0, 1fr)); } }
.grid .card { border-bottom: 0; }
/* The cards' tiles (2026-10-09): the card as it prints, lying a little askew on a brown recycled envelope in soft light. The face is set as the press sets it: every measure a share of the panel's width (--pw, measured), the drawing balanced onto the cream, the greeting in its faces, the names at the foot. */
@font-face { font-family: 'Gaegu'; src: url('/fonts/Gaegu-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
.card-img.cards-tile { background: radial-gradient(120% 90% at 30% 10%, #f1ebe0, #ddd5c6); display: grid; place-items: center; padding: 12% 16%; }
/* KRAFT (Ziah, 2026-10-09: "change all the envelopes to brown recycled envelopes"): one brown for every design, the flap a shade darker, a faint fibre over it. */
.cards-tile-env { position: absolute; left: 22%; right: 10%; top: 9%; bottom: 13%; background: #b99f78; transform: rotate(6deg); box-shadow: 0 10px 26px rgba(0,0,0,.18); overflow: hidden; }
.cards-tile-env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(to bottom, rgba(70,50,25,.16), rgba(70,50,25,.06)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cards-tile-env::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: var(--rev-linen, none); background-size: 240px 240px; }
.cards-tile-sheet { position: relative; display: block; width: 100%; aspect-ratio: 105 / 148; background: #f3eee4; box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 28px rgba(0,0,0,.16); transform: rotate(-2deg); transition: transform .6s ease; overflow: hidden; }
.cards-tile-sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .34; background-image: var(--rev-linen, none); background-size: 240px 240px; }
.cards-face-line { position: absolute; left: 7%; right: 7%; font-family: "Fraunces", Georgia, serif; line-height: 1; text-align: center; color: #211f1a; white-space: nowrap; overflow: hidden; }
.cards-face-line .cardp-ch { display: inline-block; text-indent: 0; }
.cards-face-art { position: absolute; left: 14%; width: 72%; bottom: 26%; aspect-ratio: 1 / 1; display: block; }
/* The shop's picture rule multiplies every tile image onto its ground and scales it on hover; the card's drawing is ink lifted off its paper (lib/card-art.ts) and must do neither, or its paper shows as a box. */
.card-img.cards-tile img, .card:hover .card-img.cards-tile img { mix-blend-mode: normal; transform: none; }
.cards-face-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* The press's feather (print.ts makeCoverFeatherPng, a tenth of the picture): cream fading in from each edge, so the drawing's own paper melts into the card instead of ending in a line. */
.cards-face-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, #f3eee4, rgba(243,238,228,0) 10%), linear-gradient(to left, #f3eee4, rgba(243,238,228,0) 10%), linear-gradient(to bottom, #f3eee4, rgba(243,238,228,0) 10%), linear-gradient(to top, #f3eee4, rgba(243,238,228,0) 10%); }
.cards-tile-names { position: absolute; left: 7%; right: 7%; bottom: 12.5%; font-size: calc(var(--pw, 200px) * 0.021); letter-spacing: .3em; text-indent: .3em; text-align: center; color: #b99b72; text-transform: uppercase; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .card:hover .cards-tile-sheet { transform: rotate(-2deg) translateY(-3px); } }
/* The cards' landing page (2026-10-09): one offer, the form above the
   fold on a phone, the card photographed beside it on a desk. */
.clx-open { display: grid; gap: 22px; padding-block: 26px 30px; }
@media (min-width: 900px) { .clx-open { grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding-block: 44px 48px; } }
.clx-words { display: grid; gap: 12px; align-content: start; max-width: 36em; }
.clx-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.clx-head { margin: 0; font-size: 28px; line-height: 1.08; font-weight: 600; text-wrap: balance; }
@media (min-width: 900px) { .clx-head { font-size: 40px; } }
.clx-lede { margin: 0; font-size: 15px; max-width: 34em; }
.clx-stars { margin: 0; font-size: 14px; }
.clx-stars b { letter-spacing: .08em; }
.clx-dateline { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.clx-form { display: grid; gap: 8px; margin-top: 4px; }
.clx-form .inline-form .btn { white-space: nowrap; }
.clx-small { margin: 0; font-size: 13px; color: var(--ink-soft); }
.clx-shot { margin: 0; display: grid; gap: 10px; }
.clx-shot figcaption { font-size: 13px; color: var(--ink-soft); }
.clx-acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.cards-how { padding-block: 10px 50px; max-width: 760px; margin-inline: 0; }
.cards-how p { font-size: 15px; line-height: 1.55; margin: 0 0 14px; max-width: 62ch; }
.cards-others { padding-bottom: 40px; }

/* ── sections ───────────────────────────────────────────── */
.section-head { font-size: 14px; font-weight: 600; text-transform: uppercase; padding-block: 34px 16px; margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.section-head a { font-size: 13px; }
.h-display { font-size: 22px; font-weight: 600; text-transform: uppercase; line-height: 1.1; margin: 0; text-wrap: balance; }
@media (min-width: 900px) { .h-display { font-size: 28px; } }
.feature { position: relative; margin-top: 8px; display: grid; gap: 1px; }
.feature-photo { position: relative; height: min(120vw, 900px); overflow: hidden; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.feature-label { position: absolute; top: 16px; left: 16px; color: #fff; font-size: 19px; font-weight: 600; text-transform: uppercase; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.feature-band { position: relative; min-height: min(140vw, 820px); overflow: hidden; display: grid; align-content: end; }
.feature-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-list { position: relative; z-index: 1; background: rgba(255,255,255,.26); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fff; padding: 22px 16px 18px; display: grid; gap: 1px; font-size: 14px; font-weight: 600; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.feature-list a { margin-top: 18px; justify-self: start; border-bottom: 1.5px solid #fff; padding-bottom: 2px; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature-photo, .feature-band { height: 780px; min-height: 0; }
  .feature-band { align-content: end; }
  .feature-list { font-size: 15px; padding: 26px 24px 24px; }
}
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 50%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tiles::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .tiles { grid-auto-columns: 25%; } }
.tile { position: relative; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-right: 1px solid #fff; min-width: 0; }
.tile-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tile); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
@media (hover: hover) { .tile:hover .tile-img img { transform: scale(1.03); } }
.tile-body { padding: 16px 14px 30px; display: grid; gap: 6px; align-content: start; }
.tile-body h3 { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.tile-body p { margin: 0; font-size: 14px; font-weight: 500; }
.tile-body .ulink { margin-top: 12px; }
.divider { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.mosaic-head { font-size: 18px; font-weight: 600; text-transform: uppercase; margin: 0; padding-block: 44px 28px; }
@media (min-width: 900px) { .mosaic-head { font-size: 26px; } }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #fff; }
.m { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--tile); }
.m img, .m video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
@media (hover: hover) { .m:hover img { transform: scale(1.03); } }
.m.big { grid-column: 1 / -1; aspect-ratio: 5 / 4; }
.m span { position: absolute; left: 14px; bottom: 16px; color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; border-bottom: 1.5px solid #fff; padding-bottom: 2px; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.38), transparent 42%); }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .m { aspect-ratio: auto; height: 100%; min-height: 400px; }
  .m.big { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; min-height: 820px; }
}

/* editorial pages */
.page-hero { position: relative; height: min(62svh, 560px); overflow: hidden; color: #fff; background: #cfcac0; }
.page-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 55%), linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,0) 20%); }
.page-hero .crumbs { position: absolute; top: 14px; left: 16px; z-index: 1; border: 0; padding: 0; color: #fff; }
.page-hero .copy { position: absolute; left: 16px; right: 16px; bottom: 24px; z-index: 1; max-width: 620px; display: grid; gap: 8px; }
.page-hero h1 { margin: 0; font-size: 24px; font-weight: 600; text-transform: uppercase; line-height: 1.08; text-wrap: balance; }
.page-hero p { margin: 0; font-size: 15px; }
@media (min-width: 900px) { .page-hero h1 { font-size: 36px; } .page-hero .copy { left: 24px; bottom: 36px; } .page-hero .crumbs { left: 24px; } }
.crumbs { font-size: 14px; padding-block: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs span.sep { opacity: .6; }
.plain-head { padding-block: 40px 30px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
.plain-head h1 { margin: 0; font-size: 26px; font-weight: 600; text-transform: uppercase; line-height: 1.1; }
.plain-head p { margin: 0; max-width: 60ch; font-size: 15px; }
@media (min-width: 900px) { .plain-head h1 { font-size: 34px; } }
.prose { font-size: 15px; line-height: 1.65; font-weight: 400; }
.prose p { margin: 0 0 18px; max-width: 64ch; }
.prose h2 { font-size: 15px; font-weight: 600; text-transform: uppercase; margin: 34px 0 12px; }
.prose ul { padding-left: 20px; margin: 0 0 18px; max-width: 64ch; }
.prose li { margin-bottom: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 26px 0; padding: 0 0 0 18px; border-left: 2px solid var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.5; font-weight: 400; }
.prose blockquote cite { display: block; font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 600; text-transform: uppercase; margin-top: 10px; }
.pull { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.3; text-wrap: balance; margin: 0; }
@media (min-width: 900px) { .pull { font-size: 30px; } }
.split { display: grid; gap: 0; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: stretch; } .split.rev > :first-child { order: 2; } }
.split-img { min-height: 420px; position: relative; overflow: hidden; background: var(--tile); }
.split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-copy { padding: 36px 16px; display: grid; gap: 14px; align-content: center; }
@media (min-width: 900px) { .split-copy { padding: 60px 56px; } }
.steps { display: grid; gap: 0; background: var(--paper); border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: #fff; padding: 26px 16px 30px; display: grid; gap: 8px; align-content: start; }
@media (min-width: 900px) { .step { padding: 34px 24px 38px; } }
.step b { font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--ink-soft); }
.step h3 { margin: 0; font-size: 16px; font-weight: 600; text-transform: uppercase; }
.step p { margin: 0; font-size: 14px; }

/* accordions */
details.acc { border-top: 1px solid var(--rule); }
details.acc:last-of-type { border-bottom: 1px solid var(--rule); }
details.acc > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 0; font-size: 15px; font-weight: 600; cursor: pointer; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translateY(-2px); transition: transform .2s; margin-right: 4px; }
details.acc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.acc .inner { padding-bottom: 20px; font-size: 14px; line-height: 1.6; max-width: 66ch; }
details.acc .inner p { margin: 0 0 10px; }

/* reviews */
.rev-summary { display: grid; gap: 18px; margin-bottom: 20px; }
/* The button follows the bars rather than drifting to the far edge of a wide page (Ziah, 2026-09-30: off on the cart's desk), and never stretches into a tall box on the phone. */
@media (min-width: 900px) { .rev-summary { grid-template-columns: 240px minmax(0, 520px) auto; justify-content: start; align-items: center; gap: 40px; } }
.rev-summary .btn { justify-self: start; white-space: nowrap; }
.score { display: flex; align-items: center; gap: 14px; }
.score big { font-size: 46px; font-weight: 600; line-height: 1; }
.score small { display: block; font-size: 13px; }
.bars { display: grid; gap: 6px; font-size: 13px; max-width: 420px; }
.bar { display: grid; grid-template-columns: 24px 1fr 34px; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; }
.bar i { display: block; height: 7px; background: var(--rule); position: relative; }
.bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ink); }
.bar em { font-style: normal; text-align: right; }
.rev-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.review { border-top: 1px solid var(--rule); padding-block: 20px; display: grid; gap: 7px; font-size: 14px; }
@media (min-width: 900px) { .review { grid-template-columns: 220px 1fr; gap: 6px 40px; } .review .who { grid-row: span 4; } }
.review .who { display: flex; gap: 10px; align-items: flex-start; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.review .who b { display: block; font-size: 14px; }
.review .who span { font-size: 12px; color: var(--ink-soft); display: block; }
.review .st { letter-spacing: 1px; font-size: 11px; }
.review h3 { margin: 0; font-size: 15px; font-weight: 600; }
.review p { margin: 0; max-width: 70ch; line-height: 1.55; }
.review small { color: var(--ink-soft); }
.review .rimg { width: 88px; height: 88px; object-fit: cover; margin-top: 4px; }
/* A review may carry up to five photographs (2026-10-16): they sit in a
   row and wrap, each opening full size. */
.review .rimgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.review .rimgs .rimg { margin-top: 0; cursor: zoom-in; border: none; padding: 0; background: none; line-height: 0; display: block; }
.review .rimgs .rimg img { width: 88px; height: 88px; object-fit: cover; display: block; }
.rev-zoom { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.84); display: grid; place-items: center; padding: 16px; }
.rev-zoom img, .rev-zoom video { max-width: min(96vw, 1100px); max-height: 86vh; object-fit: contain; background: #000; }
/* A family's video: the still shows, the film is fetched only on play. */
.review .rimgs .rfilm { position: relative; }
.review .rimgs .rfilm-blank { display: block; width: 88px; height: 88px; background: #2c2a26; }
.review .rimgs .rfilm img { filter: brightness(.78); }
.review .rimgs .rfilm-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
.rev-zoom .shut { position: absolute; top: 14px; right: 16px; border: none; background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.helpful { display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft); align-items: center; }
.helpful button { text-decoration: underline; text-underline-offset: 2px; font-size: 12px; }

/* ── footer ─────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--rule); padding-block: 36px 40px; display: grid; gap: 30px; margin-top: 40px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; }
.cols h4 { margin: 0 0 12px; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.cols a { display: block; font-size: 14px; padding-block: 5px; font-weight: 500; }
.cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.signup label { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; }
.signup p { font-size: 13px; margin: 10px 0 0; }
.socials { display: flex; gap: 16px; font-size: 13px; font-weight: 600; text-transform: uppercase; }
.legal { font-size: 12px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mock-note { font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 14px; }
@media (min-width: 900px) {
  footer.site { grid-template-columns: 3fr 1.3fr; align-items: start; }
  .cols { grid-template-columns: repeat(4, 1fr); }
  .legal, .mock-note { grid-column: 1 / -1; }
}

/* sticky buy bar (product) */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--rule); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); }
html.ns-settled .sticky { transition: transform .25s; }
.sticky.on { transform: none; }
/* On the phone the bar is STICKY, not fixed (Ziah, 2026-09-27: "the
   buttons slide up when I scroll" — iOS moves a fixed element as its
   toolbar folds away, and a transform transition made it visibly glide).
   It sits at the very end of the page and sticks to the foot of the
   screen until the page itself ends, with no transform to animate. */
@media (max-width: 899px) { .sticky { position: sticky; transform: none; transition: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sticky .who { display: none; } }
@media (min-width: 900px) { .sticky { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding-inline: 24px; } .sticky .btn { width: auto; min-width: 220px; } }
.sticky .who { display: none; font-size: 14px; font-weight: 600; text-transform: uppercase; }
@media (min-width: 900px) { .sticky .who { display: block; } }

/* skeleton shimmer for "drawing" */
.shimmer { background: linear-gradient(100deg, #efede8 30%, #f8f7f3 50%, #efede8 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── On the real site (the .ns root) ─────────────────────────────────────
   The old stylesheet is still loaded there: its .wordmark is cream for
   the old dark bar; the new bar's is charcoal. */
.ns .wordmark, .ns .wordmark small { color: var(--ink); }
.ns-cart .nav-link { color: var(--ink); }

/* The old site's pieces that keep their logic on the new pages (the
   sign-in card, the letters switches, the referral and redraw panels)
   wear the new site's clothes here. */
.ns .com-form, .ns .mail-prefs, .ns .prf-block { font-family: var(--sans); color: var(--ink); }
.ns .eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.ns .com-question, .ns .wallet-heading, .ns .refer-heading, .ns .prf-title { font-family: var(--sans); font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0; line-height: 1.2; color: var(--ink); margin: 6px 0 10px; }
.ns .com-note, .ns .com-notice, .ns .prf-note, .ns .wallet-lede, .ns .refer-lede, .ns .mail-pref-line, .ns .mail-pref-always { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink-soft); line-height: 1.5; }
.ns .com-input { font-family: var(--sans); font-size: 16px; font-weight: 400; width: 100%; border: 1px solid #cfceca; background: #fff; padding: 13px 12px; border-radius: 0; color: var(--ink); }
.ns .com-input.com-code { letter-spacing: .5em; text-align: center; font-size: 24px; }
.ns .com-button { font-family: var(--sans); display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; padding: 15px 20px; min-height: 48px; border: 0; border-radius: 0; }
.ns .com-button:hover { background: #151616; }
.ns .com-linklike { font-family: var(--sans); font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; }
.ns .com-error { font-family: var(--sans); font-size: 13px; color: var(--bad, #9a2b1f); }
.ns .com-step { display: grid; gap: 12px; max-width: 440px; padding: 10px 0 30px; }
.ns .com-form { display: grid; gap: 10px; }
.ns .com-linkrow { display: flex; gap: 14px; flex-wrap: wrap; }
.ns .prf-block { padding: 0; margin: 0; border: 0; background: none; }
.ns .mail-pref-name, .ns .refer-friend-who { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.ns .mail-pref-state, .ns .refer-friend-state, .ns .refer-ledger-when { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.ns .mail-pref-body { border-bottom: 1px solid var(--rule); }
.ns .refer-meter-bar { background: var(--rule); } .ns .refer-meter-fill { background: var(--ink); }
.ns-cart .nav-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; text-decoration: none; }
.ns-cart svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.5; }
.ns .mail-pref-knob { position: relative; width: 46px; height: 26px; border-radius: 13px; background: #cfcdc7; border: 0; flex: none; }
.ns .mail-pref-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ns .mail-pref-knob[aria-checked="true"] { background: var(--ink); } .ns .mail-pref-knob[aria-checked="true"]::after { transform: translateX(20px); }
.ns .mail-pref-body { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding-block: 14px; }
/* The welcome offer (components/Welcome.tsx), in the modal's clothes while the new look is on. */
body.ns-on .wel { position: fixed; inset: 0; z-index: 62; background: rgba(20,20,20,.38); display: grid; place-items: center; padding: 16px; }
/* SMALLER, AND NO PHOTOGRAPH (Ziah, 2026-09-28). The picture took the
   top half of the card on a phone and pushed the email field and the
   button below the fold — the only part of this that does any work.
   The tag is gone from Welcome.tsx, so nothing is downloaded either. */
body.ns-on .wel-card { position: relative; width: min(92vw, 400px); max-height: 88svh; overflow-y: auto; background: #fff; border-radius: 0; display: grid; }
body.ns-on .wel-body { padding: 22px 20px 22px; display: grid; gap: 10px; }
body.ns-on .wel-body .eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--ink-soft); }
body.ns-on .wel-shut { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; background: #fff; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
body.ns-on .wel-title { margin: 0; font-size: 19px; font-weight: 600; text-transform: uppercase; line-height: 1.1; font-family: var(--sans); color: var(--ink); }
body.ns-on .wel-text { margin: 0; font-size: 13.5px; line-height: 1.45; }
body.ns-on .wel-text-dim, body.ns-on .wel-fine { font-size: 12px; color: var(--ink-soft); margin: 0; }
body.ns-on .wel-fine a, body.ns-on .wel-ig { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
body.ns-on .wel-form { display: grid; gap: 10px; }
body.ns-on .wel-names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.ns-on .wel-error { color: #9a2b1f; font-size: 13px; margin: 0; }
body.ns-on .wel .com-input { width: 100%; border: 1px solid #cfceca; background: #fff; padding: 11px 12px; font-size: 16px; border-radius: 0; font-family: inherit; color: var(--ink); }
body.ns-on .wel .com-input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
body.ns-on .wel .com-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; background: var(--ink); color: #fff; border: 0; font: inherit; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; text-decoration: none; }
body.ns-on .wel .com-button[disabled] { opacity: .45; }
/* THE HEADER OVER THE HERO (Ziah, 2026-09-27, as Lola's): on a hero-top
   page the strip and header float over the picture, transparent and
   white, and turn solid the moment the page scrolls. */
/* A hero page pins its header over the picture from the first frame, so
   unlike a sticky one it has to be told that the dated strip is there:
   the strip publishes its height as --notice-h (components/Notice.tsx).
   Without this the header covered the strip, which is how the Linen
   upgrade looked on 2026-10-08. Once the page has moved at all the strip
   is on its way out and the header takes the top for itself. */
.ns-hero-top .top { position: fixed; left: 0; right: 0; top: var(--notice-h, 0px); }
.ns-hero-top .top.solid { top: 0; }
html.ns-settled .ns-hero-top .top { transition: top .2s ease, background .25s ease, border-color .25s ease; }
html.ns-settled .ns-hero-top .head { transition: background .25s ease, border-color .25s ease; }
.ns-hero-top .top:not(.solid) .head { background: transparent; border-bottom-color: transparent; }
.ns-hero-top .top:not(.solid) .head .ico { stroke: #fff; }
.ns-hero-top .top:not(.solid) .head .wordmark, .ns-hero-top .top:not(.solid) .head .wordmark small, .ns-hero-top .top:not(.solid) .head .navlink, .ns-hero-top .top:not(.solid) .head .ns-cart, .ns-hero-top .top:not(.solid) .head .ns-cart .nav-link { color: #fff; }
.ns-hero-top .top:not(.solid) .head svg { stroke: #fff; }
.ns-hero-top .top:not(.solid) .head .navlink.on { box-shadow: inset 0 -2px 0 #fff; }
.ns-hero-top .top:not(.solid) .head .badge-count { background: #fff; color: var(--ink); }
.ns-hero-top .hero .slide::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 140px; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0)); pointer-events: none; }
.ns-hero-top .page-hero .crumbs { top: calc(env(safe-area-inset-top, 0px) + 36px + 58px + 14px); }
@media (min-width: 900px) { .ns-hero-top .page-hero .crumbs { top: calc(env(safe-area-inset-top, 0px) + 36px + 64px + 14px); } }
.ns-hero-top .page-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 140px; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0)); pointer-events: none; }
/* The page's own sheet is still on its way (lib/new-look.ts): its main waits, unpainted, rather than paint raw and snap. */
body.ns-pending .ns main { visibility: hidden; }

/* PAY IN FOUR (2026-10-02): one line under every price that can be paid,
   because Afterpay is on at Stripe's till and nothing said so. The mark
   is Afterpay's own dress — mint ground, dark lowercase wordmark — so it
   reads as the badge a shopper already knows. */
.pay-in4 { margin: 10px 0 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ap-mark { display: inline-block; vertical-align: baseline; padding: 1px 7px 2px; border-radius: 4px; background: #b2fce4; color: #0f1b1a; font-weight: 700; font-size: 13px; letter-spacing: -0.01em; line-height: 1.3; }
.pay-in4-q { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--ink-faint); border-radius: 50%; color: var(--ink-soft); font-size: 11px; font-weight: 600; text-decoration: none; vertical-align: -2px; }
.pay-in4-q:hover { border-color: var(--ink); color: var(--ink); }
/* A COLLECTOR'S TITLE ON THE SHELF (2026-10-18). Two facts, two places:
   the TAG says what the book is and is shown to everyone, in the olive
   wash so it reads as a mark rather than a warning; the STATE says where
   this reader stands and sits under the price, shown only to someone
   signed in. */
.badge-collector { background: var(--olive-wash); color: var(--olive); font-weight: 600; }
/* A tile may wear two: the studio's own word and the house's category.
   The second sits under the first rather than on top of it. */
.badge-second { top: 40px; }
.card-state { font-size: 12px; margin-top: 2px; }
.card-state-locked { color: var(--ink-soft); }
.card-state-opened { color: var(--good); font-weight: 600; }