/* Theme case studies: the industry interaction "find it by memory" (signature type "nose"). Markup: src/_includes/e2/theme/sig-nose.njk;
   behaviour: e2-theme-nose.js. Nothing is brand-specific: the wrapper's inline style carries the theme (--th-from / --th-to / --th-ink / --th-accent
   from stage, --th-f-head / ui / prod from tokens.fonts, --nz-r from tokens.button.radius) and every colour below derives from those.
   The look: the theme's own manner on its stage (Sondhi's is umber and gold on a dark page, so the stage is dark, the ink is light and the accent is
   the gold). Hairlines, the corner the theme's buttons have, the heading face for names and titles, tabular figures for money. The accent is the ONE
   filled button; everything else that can be pressed (the memories, the pick of the bottle, the forms, the bottle button) is outlined, and the
   pressed one is outlined in the accent and tinted, never filled. The dry-down bar is the accent too.
   Layout: a desk of two panels side by side (the memories, the accord), the vials under them, then the button, the credit line and the rules. Under
   900px the two panels stack; under 700px the button row sticks to the bottom of the screen while the section is in view. Every control is at least
   44 x 44px. */

.th-nosewrap {
  --nz-out: cubic-bezier(.2, .8, .2, 1);
  --nz-muted: color-mix(in srgb, var(--th-ink) 76%, transparent);
  --nz-line: color-mix(in srgb, var(--th-ink) 16%, transparent);
  --nz-line-2: color-mix(in srgb, var(--th-ink) 30%, transparent);
  --nz-paper: color-mix(in srgb, var(--th-ink) 6%, transparent);
  --nz-ink-on: var(--th-to);
  display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px);
}
.th-nosewrap .th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.th-nose) :is(button) { font: inherit; color: inherit; }
.th-nose__stage :focus-visible { outline: 2px solid var(--th-accent); outline-offset: 3px; }

/* ---------- The stage: the page's dark, with a warm light from the top right ---------- */
.th-nose__stage {
  position: relative; isolation: isolate; border-radius: 32px; padding: clamp(18px, 3vw, 40px);
  background: linear-gradient(135deg, var(--th-from), var(--th-to)); color: var(--th-ink);
  font-family: var(--th-f-ui); font-size: 15px; line-height: 1.4;
  display: flex; flex-direction: column; gap: clamp(22px, 2.4vw, 30px);
  box-shadow: inset 0 0 0 1px var(--nz-line);
}
.th-nose__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 70% at 88% 0%, color-mix(in srgb, var(--th-accent) 18%, transparent), transparent 66%), radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--th-accent) 8%, transparent), transparent 70%);
}
.th-nose__desk { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 60px); align-items: stretch; min-width: 0; }
.th-nose__panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.th-nose__ph { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--nz-line-2); }
.th-nose__h { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--th-f-head); letter-spacing: -.005em; }
.th-nose__n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; font: 500 12px/1 var(--mono); letter-spacing: 0; color: var(--th-accent); }
.th-nose__v { margin: 0; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nz-muted); font-variant-numeric: tabular-nums; text-align: right; min-height: 1.3em; }

/* ---------- 1 Memories: nine chips ---------- */
.th-nose__mems { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(96px, 1fr); gap: 10px; }
.th-nose__mem {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 108px; margin: 0; padding: 14px 14px 12px; border: 0; border-radius: var(--nz-r); cursor: pointer; text-align: left;
  background: var(--nz-paper); box-shadow: inset 0 0 0 1px var(--nz-line-2);
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-nose__mem:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 62%, transparent); } }
.th-nose__mem:active { transform: scale(.98); transition-duration: .08s; }
.th-nose__mem[aria-pressed="true"], .th-nose__mem[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--th-accent) 13%, transparent); box-shadow: inset 0 0 0 1.5px var(--th-accent); }
.th-nose__mname { font: 400 21px/1.16 var(--th-f-head); letter-spacing: -.005em; text-wrap: balance; overflow-wrap: anywhere; padding-right: 18px; }
.th-nose__mnotes { font-size: 12.5px; line-height: 1.35; color: var(--nz-muted); overflow-wrap: anywhere; }
/* the order the memory was pressed in: a small ring that turns gold, 1 is the oldest and the first to go */
.th-nose__mn { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--th-accent); box-shadow: inset 0 0 0 1px var(--th-accent); opacity: 0; scale: .6; transition: opacity .15s ease, scale .2s var(--nz-out); }
.th-nose__mem[aria-pressed="true"] .th-nose__mn { opacity: 1; scale: 1; }
.th-nose__hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--nz-muted); }

/* ---------- 2 The accord: two cards, each a glass with a dry-down bar ---------- */
.th-nose__cards { display: flex; flex-direction: column; gap: 12px; }
.th-nose__card {
  display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 20px 12px; border-radius: var(--nz-r);
  background: var(--nz-paper); box-shadow: inset 0 0 0 1px var(--nz-line-2); transition: box-shadow .2s ease, background-color .2s ease;
}
.th-nose__card[data-state="on"] { background: color-mix(in srgb, var(--th-ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--nz-line-2); }
.th-nose__ctop { display: flex; align-items: center; gap: 12px; }
.th-nose__rank { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; font: 500 12px/1 var(--mono); color: var(--th-accent); }
.th-nose__aname { margin: 0; font: 400 clamp(32px, 3.1vw, 42px)/1 var(--th-f-head); letter-spacing: -.01em; }
.th-nose__empty { margin: auto 0; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--nz-muted); }
.th-nose__card[data-state="on"] .th-nose__empty { display: none; }
.th-nose__card[data-state="empty"] .th-nose__got, .th-nose__card[data-state="empty"] .th-nose__aname { display: none; }
.th-nose__card[data-state="empty"] .th-nose__ctop { opacity: .6; }
.th-nose__got { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.th-nose__anotes { margin: 0; font-size: 15px; line-height: 1.4; color: var(--nz-muted); }
/* the dry-down bar: three segments, 15 min, 2 h, 8 h, each filled by how long this attar lasts; the fill climbs like oil up paper */
.th-nose__bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.th-nose__seg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.th-nose__bar { position: relative; display: block; height: 8px; border-radius: 2px; overflow: hidden; background: var(--nz-line); }
.th-nose__bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); background: linear-gradient(90deg, color-mix(in srgb, var(--th-accent) 62%, #C77A2E), var(--th-accent)); transition: transform .3s var(--nz-out); }
.th-nose__bl { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nz-muted); font-variant-numeric: tabular-nums; }
.th-nose__wears { margin: 0; font: 400 18px/1.35 var(--th-f-head); text-wrap: pretty; min-height: 1.35em; }
.th-nose__cbot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--nz-line); }
.th-nose__aprice { margin: 0; font: 500 16px/1.2 var(--th-f-prod); font-variant-numeric: tabular-nums; }
.th-nose__pick, .th-nose__conc, .th-nose__bottle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--nz-r); cursor: pointer;
  background: transparent; box-shadow: inset 0 0 0 1px var(--nz-line-2); font: 500 14px/1.15 var(--th-f-ui); letter-spacing: .02em; color: var(--th-ink);
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { :is(.th-nose__pick, .th-nose__conc, .th-nose__bottle):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 62%, transparent); } }
:is(.th-nose__pick, .th-nose__conc, .th-nose__bottle):active { transform: scale(.98); transition-duration: .08s; }
.th-nose__pick[aria-pressed="true"], .th-nose__conc[aria-pressed="true"], .th-nose__pick[aria-pressed="true"]:hover, .th-nose__conc[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--th-accent) 13%, transparent); box-shadow: inset 0 0 0 1.5px var(--th-accent); }
.th-nose__card[data-state="empty"] .th-nose__pick { display: none; }

/* ---------- 3 The vials ---------- */
.th-nose__vrow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 56px); align-items: center; }
.th-nose__pic { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--nz-r); overflow: hidden; background: var(--th-from); box-shadow: inset 0 0 0 1px var(--nz-line); }
.th-nose__pic img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.1; transform-origin: 50% 54%; }
.th-nose__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--th-to) 24%, transparent), transparent 40%, color-mix(in srgb, var(--th-to) 30%, transparent)); mix-blend-mode: multiply; }
.th-nose__vcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.th-nose__vials { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.th-nose__vial { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 44px; border-top: 1px solid var(--nz-line); }
.th-nose__vial:last-child { border-bottom: 1px solid var(--nz-line); }
.th-nose__vname { font: 400 26px/1.1 var(--th-f-head); letter-spacing: -.005em; overflow-wrap: anywhere; }
.th-nose__vial[data-state="free"] .th-nose__vname { color: var(--nz-muted); }
.th-nose__vml { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nz-muted); }
/* a vial drawn from two boxes: the glass with its oil, a dark cap; the third is empty glass, the shopper's to fill */
.th-nose__vdot { position: relative; display: block; width: 12px; height: 28px; margin: 0 auto; border-radius: 2px 2px 5px 5px; background: linear-gradient(180deg, transparent 0 28%, var(--oil, #C77A2E) 28%); box-shadow: inset 0 0 0 1px var(--nz-line-2); }
.th-nose__vdot::before { content: ""; position: absolute; left: -1px; right: -1px; top: -5px; height: 7px; border-radius: 2px; background: color-mix(in srgb, var(--th-ink) 82%, var(--th-to)); }
.th-nose__vial:nth-child(1) .th-nose__vdot { --oil: color-mix(in srgb, var(--th-accent) 70%, #C77A2E); }
.th-nose__vial:nth-child(2) .th-nose__vdot { --oil: color-mix(in srgb, var(--th-accent) 42%, #C77A2E); }
.th-nose__vial:nth-child(3) .th-nose__vdot { --oil: transparent; }
.th-nose__vial[data-state="empty"] .th-nose__vdot { --oil: transparent; }
.th-nose__forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.th-nose__conc { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 64px; padding: 10px 14px; text-align: left; }
.th-nose__cn { font-size: 13px; letter-spacing: .02em; color: var(--nz-muted); }
.th-nose__cp { font: 500 18px/1.1 var(--th-f-prod); font-variant-numeric: tabular-nums; }
.th-nose__conc[aria-pressed="true"] .th-nose__cn { color: var(--th-ink); }

/* ---------- The foot: the one filled button, then the credit, the bottle and the rules ---------- */
.th-nose__foot, .th-nose__after { width: min(100%, 540px); margin-inline: auto; }
.th-nose__foot { display: flex; flex-direction: column; }
.th-nose__ask { margin: 8px 0 0; text-align: center; font: 500 14px/1.35 var(--th-f-ui); color: var(--th-ink); }
.th-nose__ask[hidden] { display: none; }
.th-nose__cta {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: var(--nz-r); cursor: pointer;
  background: var(--th-accent); color: var(--nz-ink-on); font: 500 14px/1.2 var(--th-f-ui); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-nose__ctat { text-align: center; }
.th-nose__ctap { font-variant-numeric: tabular-nums; }
@media (hover: hover) { .th-nose__cta:hover { background: color-mix(in srgb, var(--th-accent) 88%, #fff); } }
.th-nose__cta:active { transform: scale(.985); transition-duration: .08s; }
.th-nose__cta:focus-visible { outline-offset: 4px; }
.th-nose__check { display: none; margin-right: 10px; }
.th-nose__cta.is-done, .th-nose__cta.is-done:hover { background: color-mix(in srgb, var(--th-accent) 70%, var(--th-ink)); }
.th-nose__cta.is-done .th-nose__check { display: block; animation: th-nose-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes th-nose-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.th-nose__after { display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
@media (min-width: 900px) {
  .th-nose__after { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "credit rules" "bottle rules"; gap: 12px clamp(24px, 4vw, 56px); text-align: left; align-items: center; }
  .th-nose__credit { grid-area: credit; align-self: end; } .th-nose__bottle { grid-area: bottle; align-self: start; max-width: 540px; }
  .th-nose__rules { grid-area: rules; }
}
.th-nose__rules { display: flex; flex-direction: column; gap: 6px; }

.th-nose__credit { margin: 0; font-size: 14px; line-height: 1.45; color: var(--th-ink); text-wrap: balance; }
.th-nose__bottle { min-height: 48px; width: 100%; font-variant-numeric: tabular-nums; }
.th-nose__bottle.is-asked { box-shadow: inset 0 0 0 1.5px var(--th-accent); }
.th-nose__promise { margin: 0; font-size: 14px; line-height: 1.45; color: var(--th-ink); text-wrap: balance; }
.th-nose__privacy { margin: 0; font-size: 13px; line-height: 1.4; color: var(--nz-muted); }

/* ---------- Narrower: the two panels stack ---------- */
@media (max-width: 1099px) {
  .th-nose__desk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .th-nose__mems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-nose__vrow { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
  .th-nose__card { min-height: 0; }
}

/* ---------- Phones: the button sticks to the bottom ---------- */
@media (max-width: 699px) {
  .th-nose__stage { gap: 22px; padding: 14px 14px 12px; border-radius: 24px; }
  .th-nose__h { font-size: 26px; }
  .th-nose__mem { min-height: 96px; padding: 12px; }
  .th-nose__mname { font-size: 18px; }
  .th-nose__aname { font-size: 36px; }
  .th-nose__vrow { grid-template-columns: minmax(0, 1fr); }
  .th-nose__pic { aspect-ratio: 16 / 9; }
  .th-nose__pic img { object-position: 50% 58%; }
  .th-nose__vname { font-size: 24px; }
  .th-nose__forms { grid-template-columns: minmax(0, 1fr); }
  .th-nose__foot {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; padding: 8px; border-radius: var(--nz-r);
    background: color-mix(in srgb, var(--th-to) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px var(--nz-line-2), 0 18px 30px -18px rgba(0, 0, 0, .8);
  }
  .th-nose__cta { min-height: 52px; padding: 0 18px; font-size: 13px; letter-spacing: .06em; }
  /* Focus Not Obscured (WCAG 2.4.11): whatever takes focus stops above the sticky row. The room to keep is the row's bottom offset + its height
     (8px + the 52px button + 8px) + a 16px gap; the same sum as .th-fitting__stage in e2-theme-fitting.css. */
  .th-nose__stage { --nz-clear: calc(max(12px, env(safe-area-inset-bottom)) + 68px + 16px + 28px); }   /* the last 28px: the "pick a memory first" line when it is showing */
  .th-nose__mem, .th-nose__pick, .th-nose__conc, .th-nose__bottle { scroll-margin-bottom: var(--nz-clear); }
}

/* ---------- Reduced motion: nothing eases, nothing pops; everything shows its finished state ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-nose *, .th-nose *::before, .th-nose *::after { animation: none !important; transition: none !important; }
}

/* the section's own head, in the theme's heading face (the rest of the page's heads are the case study's) */
.th-nosewrap .th-hd__title { font-family: var(--th-f-head); font-weight: 400; letter-spacing: -.02em; font-size: clamp(40px, 5vw, 68px); line-height: 1; }