/* Hallmark · custom · genre: atmospheric · job: buy · hero: the wall itself, a 3D display wall with one lamp per niche · nav: two corners, wordmark and cart · footer: one line · imagery: the product built in 3D, four watches made for the page · signature: the lamp that lights over the watch under the pointer
 * axes: dark/high-contrast-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: E, a canvas page carries its own motion; every control still has a real button beside it */
/* Hallmark · waive 29 · one cone of light per niche, drawn only over the watch the visitor points at · the user asked for a lit display wall, the lamp is the page */
:root {
  color-scheme: dark;
  --color-paper: oklch(11% 0.008 60); --color-paper-2: oklch(16% 0.01 60); --color-paper-3: oklch(21% 0.012 60);
  --color-ink: oklch(94% 0.015 80); --color-ink-2: oklch(84% 0.02 75); --color-muted: oklch(70% 0.02 70);
  --color-rule: oklch(96% 0.01 80 / 0.14);
  --color-void: oklch(5% 0.006 60);
  --color-glass: oklch(13% 0.008 60 / 0.66);
  --radius-card: 22px; --radius-soft: 14px;
  --shadow-card: 0 18px 50px oklch(3% 0.005 60 / 0.6), 0 2px 8px oklch(3% 0.005 60 / 0.4);
  --color-accent: oklch(80% 0.12 72); --color-accent-ink: oklch(14% 0.01 60); --color-focus: oklch(82% 0.13 72);
  --color-gold-hi: oklch(93% 0.07 88); --color-gold-lo: oklch(64% 0.11 65);
  --font-name: "Cinzel", "Frank Ruhl Libre", Georgia, serif;
  --font-display: "Frank Ruhl Libre", Georgia, serif; --font-body: "Assistant", ui-sans-serif, system-ui, sans-serif;
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
  --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display: clamp(2.25rem, 3vw + 1rem, 3.75rem);
  --radius-pill: 999px; --rule-hair: 1px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --z-raised: 10; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500;
  --gutter: 40px;
  /* גרסה בהירה (?theme=light): גלריה לבנה-אפורה, טקסט גרפיט, פרט שמפניה */
  --l-paper: oklch(95.5% 0.003 80); --l-paper-2: oklch(97.5% 0.002 80); --l-paper-3: oklch(91% 0.004 80);
  --l-ink: oklch(23% 0.006 60); --l-ink-2: oklch(38% 0.006 60); --l-muted: oklch(52% 0.006 60);
  --l-rule: oklch(25% 0.01 60 / 0.13); --l-void: oklch(99% 0.002 80); --l-glass: oklch(98.5% 0.002 80 / 0.74);
  --l-shadow: 0 24px 60px oklch(30% 0.01 60 / 0.14), 0 2px 10px oklch(30% 0.01 60 / 0.08);
  --l-accent: oklch(52% 0.07 70); --l-accent-ink: oklch(99% 0.002 80); --l-focus: oklch(45% 0.08 70);
  --l-gold-hi: oklch(40% 0.03 70); --l-gold-lo: oklch(20% 0.008 60);
  /* הערכים הכהים, כדי שמסך הפתיחה יישאר כהה גם בגרסה הבהירה */
  --d-paper: oklch(11% 0.008 60); --d-paper-3: oklch(21% 0.012 60); --d-ink: oklch(94% 0.015 80); --d-ink-2: oklch(84% 0.02 75); --d-muted: oklch(70% 0.02 70);
  --d-rule: oklch(96% 0.01 80 / 0.14); --d-void: oklch(5% 0.006 60); --d-glass: oklch(13% 0.008 60 / 0.66);
  --d-accent: oklch(80% 0.12 72); --d-accent-ink: oklch(14% 0.01 60); --d-focus: oklch(82% 0.13 72);
}
@media (max-width: 40rem) { :root { --gutter: 16px; } }
body.theme-light { color-scheme: light; --color-paper: var(--l-paper); --color-paper-2: var(--l-paper-2); --color-paper-3: var(--l-paper-3); --color-ink: var(--l-ink); --color-ink-2: var(--l-ink-2); --color-muted: var(--l-muted); --color-rule: var(--l-rule); --color-void: var(--l-void); --color-glass: var(--l-glass); --shadow-card: var(--l-shadow); --color-accent: var(--l-accent); --color-accent-ink: var(--l-accent-ink); --color-focus: var(--l-focus); --color-gold-hi: var(--l-gold-hi); --color-gold-lo: var(--l-gold-lo); }
body.theme-light:not(.ring) .hero, body.theme-light:not(.ring).is-hero .top { --color-paper: var(--d-paper); --color-paper-3: var(--d-paper-3); --color-ink: var(--d-ink); --color-ink-2: var(--d-ink-2); --color-muted: var(--d-muted); --color-rule: var(--d-rule); --color-void: var(--d-void); --color-glass: var(--d-glass); --color-accent: var(--d-accent); --color-accent-ink: var(--d-accent-ink); --color-focus: var(--d-focus); color: var(--color-ink); }
/* תצוגת המעגל: מסך הפתיחה שקוף — רואים דרכו את החוגה של השעונים מלמעלה */
body.ring .hero { background: transparent; pointer-events: none; }
body.ring .hero__go, body.ring .hero__load { pointer-events: auto; }
body.ring .hero__img, body.ring .hero__credit { display: none; }
body.ring .hero__title { font-family: var(--font-name); font-weight: 500; letter-spacing: 0.02em; color: var(--color-ink); text-shadow: 0 2px 24px var(--color-void); }
/* בפתיחה (חושך): טקסט בהיר */
body.ring .hero { color: var(--color-ink); }

body.ring .hero__kicker { color: var(--color-muted); }
body.ring .hero__go { background: var(--color-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.ring.is-hero .labels, body.ring.is-hero .intro, body.ring.is-hero .note, body.ring.is-hero .story-cue, body.ring.is-hero [data-cart-open] { opacity: 0; pointer-events: none; }
.labels, .intro, .note { transition: opacity var(--dur-long) var(--ease-out); }
/* בכניסה לשעון: השם בענק ובשקיפות מאחור, כמו בעמוד של מגזין */
.bigname { position: fixed; inset-inline-end: var(--gutter); top: 50%; z-index: 1; margin: 0; max-width: 62vw; font-family: var(--font-name); font-weight: 500; font-size: clamp(4rem, 11vw, 11rem); line-height: 0.92; letter-spacing: -0.01em; color: var(--color-ink); opacity: 0; pointer-events: none; translate: 0 -50%; transition: opacity var(--dur-long) var(--ease-out); }
body.ring.is-focus .bigname { opacity: 0.06; }
@media (max-width: 40rem) { .bigname { top: 22%; inset-inline: var(--gutter); max-width: none; text-align: center; font-size: 18vw; } }
/* בגרסה הבהירה: השמות בגרפיט עם צל לבן רך במקום צל שחור */
body.theme-light .label__name { filter: drop-shadow(0 1px 6px var(--l-void)); }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.16em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: color-mix(in oklab, var(--color-accent) 35%, transparent); }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
.num, .figure { font-variant-numeric: lining-nums tabular-nums; }
.figure { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
[hidden] { display: none !important; }

.skip { position: absolute; inset-inline-start: var(--space-md); top: -80px; z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
body.is-pointing #scene { cursor: pointer; }
body.is-focus #scene { cursor: grab; }

.top { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-sticky-nav); display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg) var(--gutter); pointer-events: none; }
.top > * { pointer-events: auto; }
.wordmark { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; text-decoration: none; }
.wordmark:hover { color: var(--color-ink-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 46px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink); }
.btn--ghost { background: color-mix(in oklab, var(--color-paper) 55%, transparent); color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.btn--ghost:hover { background: var(--color-paper-3); }
.btn[aria-pressed="true"] { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-accent); }

.intro { position: fixed; inset-inline: var(--gutter); bottom: var(--space-xl); z-index: var(--z-raised); display: grid; gap: var(--space-xs); pointer-events: none; transition: opacity var(--dur-long) var(--ease-out); }
.intro h1 { font-size: var(--text-display); }
.hint { color: var(--color-ink-2); max-width: 46ch; }
body.is-focus .intro { opacity: 0; }

/* one label under each niche, placed by script; a real button for keyboard and touch */
.labels { list-style: none; margin: 0; padding: 0; }
.labels li { position: fixed; left: 0; top: 0; z-index: var(--z-raised); transform: translate(-50%, 0); transition: opacity var(--dur-short) var(--ease-out); }
.label { display: grid; justify-items: center; gap: var(--space-2xs); min-height: 44px; padding: var(--space-xs) var(--space-lg); border: 0; border-radius: var(--radius-card); background: transparent; color: var(--color-ink-2); font: inherit; cursor: pointer; transition: color var(--dur-long) var(--ease-out), background-color var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.label:hover, .label.is-lit { color: var(--color-ink); background: var(--color-glass); transform: translateY(-2px); }
.label:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* שם השעון: אותיות רומיות חרוטות בזהב, עם קו זהב דק מתחת */
.label__name { position: relative; padding-bottom: var(--space-xs); font-family: var(--font-name); font-weight: 600; font-size: calc(var(--text-lg) * var(--ls, 1)); line-height: 1.15; white-space: nowrap; background: linear-gradient(180deg, var(--color-gold-hi), var(--color-accent) 55%, var(--color-gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 6px var(--color-void)); }
.label__name::after { content: ""; position: absolute; inset-inline: 4%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent); opacity: 0.7; transform: scaleX(0.6); transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out); }
.label:hover .label__name::after, .label.is-lit .label__name::after { transform: scaleX(1); opacity: 1; }
.label__price { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
body.is-focus .labels li { opacity: 0; pointer-events: none; }
html:not(.js) .labels li { position: static; transform: none; }

/* the panel beside a focused watch */
/* כרטיס זכוכית מעוגל שצף ליד השעון, ונכנס בהחלקה רכה */
.panel { position: fixed; top: calc(var(--space-2xl) + var(--space-lg)); bottom: var(--space-lg); inset-inline-start: var(--space-lg); z-index: var(--z-raised); width: min(420px, calc(100% - 2 * var(--space-lg))); display: grid; align-content: start; gap: var(--space-md); padding: var(--space-xl) var(--space-xl) var(--space-2xl); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--radius-card); background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--watch-tint, var(--color-accent)) 26%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--watch-tint, var(--color-accent)) 10%, var(--color-glass)), var(--color-glass)); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--shadow-card), inset 0 0 0 var(--rule-hair) color-mix(in oklab, var(--watch-tint, var(--color-accent)) 35%, var(--color-rule)); animation: panel-in 0.7s var(--ease-out) both; }
.panel #panel-name { font-family: var(--font-name); font-weight: 500; }
@keyframes panel-in { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
.panel__block { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); margin-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.panel h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.15; }
.parts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.parts button { min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.parts button:hover { background: var(--color-paper-3); color: var(--color-ink); }
.parts button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.parts button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.parts__text { min-height: 3lh; }
.panel__back { justify-self: start; margin-bottom: var(--space-lg); }
.panel h2 { font-size: var(--text-display); }
.panel p { color: var(--color-ink-2); max-width: 36ch; }
.specs { display: grid; margin: 0; }
.specs > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.specs dt { font-size: var(--text-sm); color: var(--color-muted); }
.specs dd { margin: 0; }
/* תג מחיר: מסגרת זהב דקה עם חור קטן, כמו תווית שתלויה על שעון בחלון ראווה */
.panel__tag { justify-self: start; display: grid; gap: var(--space-2xs); }
.panel__price { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); margin: 0; padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-md); border-radius: var(--radius-soft); background: linear-gradient(135deg, color-mix(in oklab, var(--color-accent) 16%, var(--color-paper-2)), var(--color-paper-2)); box-shadow: inset 0 0 0 var(--rule-hair) color-mix(in oklab, var(--color-accent) 60%, transparent), var(--shadow-card); font-size: var(--text-2xl); line-height: 1.2; color: var(--color-ink) !important; }
.panel__price::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-paper); box-shadow: inset 0 0 0 1.5px var(--color-accent); flex: none; }
.panel__pricenote { font-size: 0.75rem; color: var(--color-muted) !important; }
.panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.panel .panel__tip { font-size: var(--text-sm); color: var(--color-muted); }

.note { position: fixed; inset-inline-end: var(--gutter); bottom: var(--space-lg); z-index: var(--z-raised); font-size: var(--text-sm); color: var(--color-muted); max-width: 44ch; text-align: end; }
body.is-focus .note { display: none; }
.fallback { display: none; position: fixed; inset: 0; place-content: center; text-align: center; padding: var(--gutter); }
body.no-webgl .fallback { display: grid; }
body.no-webgl #scene { display: none; }

/* cart */
.cart { width: min(440px, calc(100% - 2 * var(--space-lg))); max-height: calc(100svh - 2 * var(--space-lg)); height: calc(100svh - 2 * var(--space-lg)); margin: var(--space-lg) auto var(--space-lg) var(--space-lg); padding: var(--space-xl); border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--shadow-card), inset 0 0 0 var(--rule-hair) var(--color-rule); }
.cart::backdrop { background: color-mix(in oklab, var(--color-paper) 70%, transparent); }
.cart[open] { display: grid; grid-template-rows: auto auto 1fr auto auto auto; gap: var(--space-lg); }
.cart__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.cart__head h2 { font-size: var(--text-2xl); }
.cart__items { list-style: none; margin: 0; padding: 0; align-self: start; }
.cart__items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.cart__remove { min-height: 44px; padding: 0 var(--space-sm); border: 0; background: transparent; color: var(--color-ink-2); text-decoration: underline; cursor: pointer; }
.cart__remove:hover { color: var(--color-ink); }
.cart__remove:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; }
.cart__total .figure { font-size: var(--text-2xl); font-variant-numeric: lining-nums tabular-nums; }
.cart__msg { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }

/* תוויות של חלקי השעון בזמן פירוק: נקודה, קו קצר, שם והסבר בשורה אחת */
.xlabels { list-style: none; margin: 0; padding: 0; }
.xlabel { --lead: 0px; position: fixed; left: 0; top: 0; z-index: var(--z-raised); opacity: 0; pointer-events: none; display: grid; gap: 2px; justify-items: center; text-align: center; translate: -50% -50%; width: max-content; max-width: 22ch; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-soft); background: var(--color-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-card), inset 0 0 0 var(--rule-hair) var(--color-rule); }
/* קו דק מהתווית אל החלק, ונקודה על החלק עצמו */
.xlabel::before { content: ""; position: absolute; left: 50%; width: 1px; background: color-mix(in oklab, var(--color-accent) 70%, transparent); top: calc(50% + min(var(--lead), 0px)); height: max(var(--lead), calc(var(--lead) * -1)); }
.xlabel::after { content: ""; position: absolute; left: calc(50% - 3px); top: calc(50% + var(--lead) - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.xlabel b { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); color: var(--color-ink); }
.xlabel span { font-size: var(--text-sm); color: var(--color-ink-2); }

/* כפתור קטן בתחתית הקיר שמזמין לגלול */
.story-cue { position: fixed; bottom: var(--space-lg); left: 50%; translate: -50% 0; z-index: var(--z-raised); display: inline-flex; gap: var(--space-xs); align-items: center; min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); color: var(--color-ink-2); font: 600 var(--text-sm) var(--font-body); cursor: pointer; transition: color var(--dur-short) var(--ease-out), opacity var(--dur-long) var(--ease-out); }
.story-cue:hover { color: var(--color-ink); }
.story-cue:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.story-cue span { display: inline-block; animation: hero-bob 1.8s ease-in-out infinite; }
body.is-focus .story-cue, body.is-story .story-cue { opacity: 0; pointer-events: none; }
/* באזור "מה יש בתוך שעון": אותו כפתור, רק למעלה, חזרה לקיר */
.swipe-hint { display: none; }
/* במסך הפתיחה: בלי כפתור הסל למעלה */
body.is-hero [data-cart-open] { opacity: 0; pointer-events: none; }
.story-back { top: var(--space-lg); bottom: auto; z-index: calc(var(--z-sticky-nav) + 1); opacity: 0; pointer-events: none; }
body.is-story .story-back { opacity: 1; pointer-events: auto; transition-delay: 0.5s; }
/* כשאזור הגלילה פתוח, לכותרת העליונה יש רקע, כדי שהטקסט לא יעבור מתחתיה */
.top { transition: background-color var(--dur-long) var(--ease-out); }
body.is-story .top { background: linear-gradient(to bottom, var(--color-void) 55%, transparent); }

/* אזור הגלילה: עולה מלמטה מעל הקיר */
.story { position: fixed; inset: 0; z-index: 260; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(to bottom, var(--color-void), var(--color-paper) 30%); translate: 0 100%; outline: none; } /* התנועה עצמה מגיעה מהקוד, יחד עם הקיר */
.story__inner { width: min(1080px, 100%); margin-inline: auto; padding: calc(var(--space-2xl) * 2) var(--gutter) var(--space-2xl); display: grid; gap: calc(var(--space-2xl) * 1.5); }
.story h2 { font-size: var(--text-display); }
.story h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.15; }
.story p { color: var(--color-ink-2); }
.story__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-xl); align-items: center; }
.story__headtext { display: grid; gap: var(--space-md); max-width: 46ch; }
.story__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; border-radius: var(--radius-card); -webkit-mask-image: radial-gradient(closest-side, var(--color-void) 62%, transparent 100%); mask-image: radial-gradient(closest-side, var(--color-void) 62%, transparent 100%); }
@media (min-width: 64rem) { .anatomy { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.story__kicker { font-size: var(--text-lg); color: var(--color-accent) !important; }
.story__lead { font-size: var(--text-lg); line-height: 1.6; }
/* חמשת החלקים: קו זהב דק לפני כל אחד */
.anatomy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-lg); }
.anatomy li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-accent) 45%, transparent); }
.anatomy__n { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-accent); font-variant-numeric: lining-nums tabular-nums; }
.anatomy p { font-size: var(--text-sm); line-height: 1.6; }
/* שלושה שלבים מחוברים בקו */
.flow { display: grid; gap: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.flow h2 { font-size: var(--text-2xl); }
.flow__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.flow__steps::before { content: ""; position: absolute; inset-inline: 7px; top: 7px; height: 1px; background: linear-gradient(to left, var(--color-accent), color-mix(in oklab, var(--color-accent) 20%, transparent)); }
.flow__step { position: relative; display: grid; gap: var(--space-xs); align-content: start; }
.flow__dot { width: 15px; height: 15px; border-radius: 50%; background: var(--color-paper-2); box-shadow: inset 0 0 0 2px var(--color-accent); margin-bottom: var(--space-sm); }
.flow__step p { font-size: var(--text-sm); }
.flow__tip { font-size: var(--text-sm); color: var(--color-muted) !important; }
.cta { display: grid; gap: var(--space-md); justify-items: center; text-align: center; padding-block: var(--space-xl); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.cta__msg { min-height: 1lh; font-size: var(--text-sm); }
.story__foot { display: grid; gap: var(--space-2xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.story__foot p { font-size: 0.8125rem; color: var(--color-muted); }

/* מסך הפתיחה: שעון אחד מואר על שחור, לחיצה גוללת אל הקיר */
.hero { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; overflow: hidden; background: var(--color-void); transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.4s ease; }
.hero.is-gone { transform: translateY(-100%); opacity: 0.6; pointer-events: none; }
.hero__img > img, .hero__sec { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img { position: absolute; left: 50%; top: 54%; height: 104svh; width: auto; aspect-ratio: 4 / 5; max-width: none; translate: -50% -50%; -webkit-mask-image: radial-gradient(closest-side, var(--color-void) 58%, transparent 100%); mask-image: radial-gradient(closest-side, var(--color-void) 58%, transparent 100%); animation: hero-in 2.4s var(--ease-out) both; }
@keyframes hero-in { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
.hero__text { position: absolute; top: clamp(72px, 11svh, 120px); inset-inline: var(--gutter); display: grid; gap: var(--space-xs); justify-items: center; text-align: center; animation: hero-text 1.6s 0.5s var(--ease-out) both; }
@keyframes hero-text { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.hero__kicker { font-size: var(--text-lg); color: var(--color-ink-2); }
.hero__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display); letter-spacing: 0.04em; color: var(--color-accent); text-shadow: 0 2px 30px var(--color-void); }
.hero__go { position: absolute; bottom: clamp(28px, 7svh, 64px); left: 50%; translate: -50% 0; display: inline-flex; gap: var(--space-xs); align-items: center; padding: var(--space-sm) var(--space-lg); border: var(--rule-hair) solid color-mix(in oklab, var(--color-accent) 60%, transparent); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-void) 55%, transparent); color: var(--color-ink); font: 600 var(--text-md) var(--font-body); cursor: pointer; transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.hero__go:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.hero__go:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.hero__go span { display: inline-block; animation: hero-bob 1.8s ease-in-out infinite; }
@keyframes hero-bob { 50% { translate: 0 4px; } }
.hero__load { position: absolute; bottom: calc(clamp(28px, 7svh, 64px) + 64px); left: 50%; translate: -50% 0; display: grid; gap: var(--space-xs); justify-items: center; width: min(240px, 70vw); transition: opacity 1s var(--ease-out) 0.6s; }
.hero__load.is-done { opacity: 0; }
.hero__load-bar { display: block; width: 100%; height: 1px; background: var(--color-rule); overflow: hidden; }
.hero__load-bar i { display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease-out); }
.hero__load-text { font-size: 0.8125rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.hero__credit { position: absolute; bottom: var(--space-sm); inset-inline-end: var(--gutter); font-size: 0.75rem; color: var(--color-muted); opacity: 0.7; }

@media (max-width: 40rem) {
  .hero__img { top: 56%; height: 82svh; }
  .intro { bottom: var(--space-2xl); }
  .note { inset-inline: var(--gutter); bottom: var(--space-sm); max-width: none; text-align: start; font-size: 0.8125rem; }
  /* בתחתית יש מקום לתווית של Netlify, כדי שלא תסתיר את סוף הכרטיס */
  .panel { top: auto; inset-inline: var(--space-xs); bottom: var(--space-xs); width: auto; max-height: 52svh; align-content: start; gap: var(--space-sm); padding: var(--space-lg) var(--gutter) 76px; border-radius: var(--radius-card); animation-name: panel-up; }
  @keyframes panel-up { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
  /* "חזרה לקיר" בראש הכרטיס, ונשאר שם כשגוללים בכרטיס (לא עולה על הטקסט) */
  .panel__back { position: sticky; top: 0; z-index: 1; margin: 0; }
  .panel h2 { font-size: var(--text-2xl); }
  .panel .panel__tip { display: none; }
  /* בטלפון: שמות קטנים שנשברים לשתי שורות במקום לעלות אחד על השני */
  .label { padding: var(--space-2xs) var(--space-2xs); max-width: 38vw; }
  .label__name { font-size: 0.95rem; white-space: normal; text-align: center; text-wrap: balance; }
  .label__price { font-size: 0.75rem; }
  .intro h1 { font-size: var(--text-xl); }
  .hint { font-size: var(--text-sm); }
  .note { display: none; }
  /* רמז להחלקה הצידה, מעל הכפתור "מה יש בתוך שעון" */
  .swipe-hint { display: block; position: fixed; inset-inline: 0; bottom: 136px; z-index: var(--z-raised); margin: 0; text-align: center; font-size: var(--text-sm); color: var(--color-muted); pointer-events: none; transition: opacity var(--dur-long) var(--ease-out); }
  .swipe-hint span { display: inline-block; color: var(--color-accent); }
  body.is-hero .swipe-hint, body.is-focus .swipe-hint, body.is-story .swipe-hint, body.has-swiped .swipe-hint { opacity: 0; }
  /* בפירוק בטלפון: רק שם החלק, בתווית קטנה, כדי שהתוויות לא יעלו אחת על השנייה */
  .xlabel { padding: var(--space-2xs) var(--space-xs); max-width: 14ch; }
  .xlabel b { font-size: var(--text-sm); }
  .xlabel span { display: none; }
  /* מעל התווית של Netlify, שלא תסתיר את הכפתור */
  .story-cue:not(.story-back) { bottom: 76px; }
  .intro { display: none; } /* בטלפון אין מקום לכותרת מתחת לקיר; הכפתור למטה מספיק */
  .story__head { grid-template-columns: 1fr; }
  .story__img { max-width: 320px; justify-self: center; }
  .flow { padding: var(--space-lg); }
  .flow__steps { grid-template-columns: 1fr; }
  .flow__steps::before { inset-inline: auto; inset-inline-start: 7px; top: 7px; bottom: 7px; width: 1px; height: auto; }
  .flow__step { padding-inline-start: var(--space-xl); }
  .flow__dot { position: absolute; inset-inline-start: 0; top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } .story { transition: none; } .story-cue span { animation: none; } .hero, .hero__img, .hero__text, .hero__go span { animation: none; transition: none; } .btn, .label, .labels li, .intro, .parts button { transition: none; } .btn:active { transform: none; } }