/* The bar, the menu and the footer every page shares, all on the dark palette.
   --inset lines them up with the page's own column. */
/* The measures brand/system leaves to each surface, named once for every page:
   a line of reading, a column of it, the page's width, and a window's pane. */
:root { --measure: 36rem; --measure-wide: 44rem; --wide: 68rem; --pane-w: 1.05rem; --pane-h: 1.3rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.bar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-4)) var(--inset) var(--space-4);
  background: var(--page);
}
.bar__mark { margin-inline-end: auto; }
.bar__mark img { display: block; height: var(--space-6); width: auto; }

/* The signature: three windows that keep the score of the night.
   Dark until its story starts, ochre (theirs) while that night is on screen,
   green (ours) once it is answered. The word says the same thing the colour does. */
.windows { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.win {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--touch); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-touch); color: var(--muted); text-decoration: none;
  font: 600 var(--text-s)/1 var(--body);
  transition: color var(--dur-2) var(--ease);
}
.win:hover { color: var(--ink); }
.win__pane {
  inline-size: var(--pane-w); block-size: var(--pane-h); border-radius: var(--radius-tag);
  border: 1px solid var(--muted); position: relative;
  transition: background-color var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
}
.win__pane::after { content: ""; position: absolute; inset: 45% 0 auto; border-top: 1px solid var(--page); }
.win[data-state="night"] { color: var(--ink); }
.win[data-state="night"] .win__pane { background: var(--ochre-fill); border-color: var(--ochre-fill); }
.win[data-state="answered"] .win__pane { background: var(--accent-fill); border-color: var(--accent-fill); }
.win__state { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* One word in the bar, and the same word's place for Κλείσιμο once the menu is open. */
.bar__menu, .menu__close {
  min-height: var(--touch); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink); font: 600 var(--text-s)/1 var(--body);
  text-decoration: underline 1px transparent; text-underline-offset: var(--space-2);
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.bar__menu:hover, .menu__close { text-decoration-color: var(--muted); }
/* In the first paint, not unhidden by menu.js, so the bar never shifts when the script lands. */
@media (scripting: none) { .bar__menu { display: none; } }

/* The ground parts from a seam down the middle and fills the screen. */
html.menu-open { overflow: hidden; }
.menu {
  position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome, 0) + 2);
  overflow-y: auto; overscroll-behavior: contain; background: var(--page); color: var(--ink);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-8) + var(--space-6)) var(--inset)
    calc(env(safe-area-inset-bottom, 0px) + var(--space-8));
  clip-path: inset(0 50%);
  transition: clip-path var(--dur-3) var(--ease);
}
.menu.is-open { clip-path: inset(0); }
.menu__close {
  position: fixed; z-index: 1;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-4)); right: var(--inset);
}
.menu__grid { display: grid; gap: var(--space-7); }
.menu__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.menu__list a {
  display: inline-flex; align-items: center; min-height: var(--touch);
  color: var(--ink); text-decoration: none;
  font: 600 var(--text-2xl)/var(--lh-tight) var(--display); letter-spacing: var(--ls-tight);
  transition: color var(--dur-1) var(--ease);
}
.menu__list a:hover { color: var(--accent); }
.menu__h, .foot__h {
  margin: 0 0 var(--space-2); color: var(--muted);
  font: 600 var(--text-xs)/var(--lh-snug) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.menu__contact, .menu__legal {
  display: flex; align-items: center; min-height: var(--touch); text-decoration: none;
  font-size: var(--text-s);
}
.menu__contact { color: var(--ink); border-bottom: 1px solid var(--line); transition: border-color var(--dur-1) var(--ease); }
.menu__contact:hover { border-color: var(--accent); }
.menu__legal { margin-top: var(--space-5); color: var(--muted); }
.menu__legal:hover { color: var(--ink); }

/* The footer: every page's links in columns, then the identity under a hairline. */
.foot {
  padding: var(--space-8) var(--inset) calc(env(safe-area-inset-bottom, 0px) + var(--space-7));
  border-top: 1px solid var(--line); background: var(--page); color: var(--muted);
  font: var(--text-s)/var(--lh-snug) var(--body);
}
.foot__nav { display: grid; gap: var(--space-6); margin-bottom: var(--space-8); }
.foot__list { display: grid; margin: 0; padding: 0; list-style: none; }
.foot__list a {
  display: inline-flex; align-items: center; min-height: var(--touch);
  color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
  transition: color var(--dur-1) var(--ease);
}
.foot__spine {
  display: grid; gap: var(--space-1); max-width: var(--measure-wide); padding-top: var(--space-6);
  border-top: 1px solid var(--line); font-size: var(--text-xs); line-height: var(--lh-body);
}
.foot__spine p, .foot__legal { margin: 0; overflow-wrap: anywhere; }
.foot__legal { margin-top: var(--space-3); font-size: var(--text-xs); }
.foot__legal a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--muted); text-decoration: none; }
.foot__list a:hover, .foot__legal a:hover { color: var(--accent); }

@media (min-width: 861px) {
  .menu__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); }
  .foot__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .win__name { display: none; }
  .win { padding-inline: var(--space-2); min-inline-size: var(--touch); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .win, .win__pane, .menu, .bar__menu, .menu__list a, .menu__contact, .foot__list a { transition: none; }
}