:root {
  --sc-canvas: var(--page);  --sc-surface: var(--card);
  --sc-ink: var(--ink);      --sc-ink-soft: var(--muted);
  --sc-accent: var(--accent-fill);  --sc-accent-ink: var(--on-accent);
  --sc-font-display: var(--display);
  --sc-font-text: var(--body);
  --inset: var(--sc-gutter);
}
body { background: var(--page); }
.skip { position: fixed; left: var(--space-4); top: var(--space-4); z-index: 99; translate: 0 -200%; }
.skip:focus { translate: 0 0; }

/* Over the film the bar floats with no ground. The FAQ and the footer, in flow after the film,
   slide over both the film and the bar, so no text ever scrolls under it. */
.bar { position: fixed; z-index: var(--sc-z-chrome); inset: 0 0 auto; background: none; }
.faq, .foot { position: relative; z-index: calc(var(--sc-z-chrome) + 1); }

/* Before the engine mounts, nothing on the first screen may sit where mounting moves it (A5):
   the legs and their clips stack out of flow, the world holds one screen so the FAQ stays below,
   and the first poster keeps its own height. Mounted, it only grows from the same corner; drawn
   full-screen already, Chrome would not count it as the largest paint. */
[data-sc-world]:not(.sc-world) { position: relative; height: 100svh; overflow: clip; background: var(--sc-canvas); }
[data-sc-segment] { position: absolute; inset: 0; }
[data-sc-segment]:not(:first-child) { opacity: 0; }
[data-sc-segment] > video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
[data-sc-world-copy] { position: fixed; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; }

/* The AI disclosure is in flow, not a film block, so it reads on the first screen before any
   script runs or any scroll. Where scroll can drive it, it holds under the opening line and fades with it. */
.ai {
  position: absolute; z-index: calc(var(--sc-z-copy) + 1); top: 100svh; translate: 0 -100%;
  inset-inline: var(--sc-gutter); max-width: var(--measure); margin: 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-4));
  font-size: var(--text-xs); line-height: var(--lh-snug); color: var(--muted);
}
@supports (animation-timeline: scroll()) {
  .ai { position: fixed; top: auto; bottom: 0; translate: none; animation: ai-out linear both; animation-timeline: scroll(root); animation-range: 0 50svh; }
}
@keyframes ai-out { to { opacity: 0; visibility: hidden; } }

/* Copy */
.sc-world__scrim {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--page) 94%, transparent) 0%,
    color-mix(in oklab, var(--page) 78%, transparent) 26%,
    color-mix(in oklab, var(--page) 30%, transparent) 48%,
    transparent 62%);
}
.sc-copy { max-width: min(var(--measure), calc(100vw - 2 * var(--sc-gutter))); display: grid; gap: var(--space-3); justify-items: start; }
.sc-copy--trail { justify-items: end; }
.say {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(var(--text-xl), 1.1rem + 2.2vw, var(--text-3xl));
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance;
}
h1.say { font-size: clamp(var(--text-2xl), 1.2rem + 3.6vw, 4.2rem); }
.line { margin: 0; color: var(--ink); opacity: .86; font-size: var(--text-l); line-height: var(--lh-snug); text-wrap: pretty; max-width: var(--measure); }
.told { display: flex; align-items: center; gap: var(--space-3); }
.told img { block-size: var(--space-7); inline-size: auto; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: var(--space-2) var(--space-5); margin-top: var(--space-2);
  border-radius: var(--radius-pill); background: var(--accent-fill); color: var(--on-accent);
  font: 600 var(--text-m)/1 var(--body); text-decoration: none;
  transition: filter var(--dur-1) var(--ease);
}
.btn:hover { filter: brightness(1.1); }

/* Leg 9: the day's jobs, ticked done one after another. No times, no counts. */
.day { display: flex; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.day li {
  inline-size: clamp(2.2rem, 7vw, 3.4rem); block-size: var(--space-2);
  border-radius: var(--radius-pill); background: color-mix(in oklab, var(--ink) 22%, transparent);
  transition: background-color var(--dur-3) var(--ease);
}
.day li.done { background: var(--accent-fill); }

/* Leg 10: work, then home. */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font: 600 var(--text-m)/1 var(--body); }
.switch__track {
  inline-size: 3.2rem; block-size: 1.8rem; border-radius: var(--radius-pill); padding: 3px;
  background: var(--accent-fill); transition: background-color var(--dur-3) var(--ease);
}
.switch__knob { display: block; block-size: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); transition: translate var(--dur-3) var(--ease); translate: 1.4rem 0; }
.switch.off .switch__track { background: color-mix(in oklab, var(--ink) 22%, transparent); }
.switch.off .switch__knob { translate: 0 0; }
.switch__label::before { content: "Σε δουλειά"; }
.switch.off .switch__label::before { content: "Στο σπίτι"; }

/* The close: the three windows become the three doors. */
#close { max-width: min(var(--wide), calc(100vw - 2 * var(--sc-gutter))); }
.doors { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.door {
  display: grid; gap: var(--space-1); min-width: 12rem; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-touch); border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  background: color-mix(in oklab, var(--page) 55%, transparent);
  color: var(--ink); text-decoration: none; transition: border-color var(--dur-1) var(--ease);
}
.door:hover { border-color: var(--accent); }
.door b { font-family: var(--display); font-size: var(--text-l); }
.door span { color: var(--accent); font-weight: 600; }

/* The FAQ: after the film, on the page's own ground. Each question opens in place, between hairlines. */
.faq { padding: var(--space-8) var(--sc-gutter); border-top: 1px solid var(--line); background: var(--page); }
.faq h2 { max-width: var(--measure-wide); margin: 0 0 var(--space-7); font: 700 var(--text-2xl)/var(--lh-tight) var(--display); letter-spacing: var(--ls-tight); text-wrap: balance; }
.faq__list { max-width: var(--measure-wide); border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  position: relative; padding: var(--space-5) var(--space-7) var(--space-5) 0;
  list-style: none; cursor: pointer; color: var(--ink);
  font: 600 var(--text-m)/var(--lh-snug) var(--body);
}
.faq summary::-webkit-details-marker { display: none; }
/* The plus: two hairlines, the upright one fading out as the answer opens. */
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: var(--space-1); top: 50%;
  inline-size: var(--space-3); block-size: 1px; background: var(--muted); translate: 0 -50%;
}
.faq summary::before { rotate: 90deg; transition: opacity var(--dur-1) var(--ease); }
.faq details[open] summary::before { opacity: 0; }
.faq summary:hover::before, .faq summary:hover::after { background: var(--ink); }
.faq details p { margin: 0; padding: 0 0 var(--space-5); color: var(--muted); line-height: var(--lh-body); text-wrap: pretty; }

@media (max-width: 860px) {
  .sc-copy--trail { justify-items: start; }
  .line { font-size: var(--text-m); }
  .door { min-width: 0; flex: 1 1 100%; padding: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .day li, .switch__track, .switch__knob, .door, .faq summary::before { transition: none; }
}