/* menu.css, the site chrome of the redesign (Nov 2026, spec §3 + §4).
   Header: the TR mark + "Tanya Rofman / Velonova studio" in the middle, the
   Menu button and the language switch at the reading start, "Let's talk" at
   the end. Menu: a full-screen paper sheet listing every offer with its
   price. Footer: the colophon's mark lockup.
   Injected after /style.css by scripts/sync_header_footer.py (MENU_VERSION),
   and copied into toolkit/src/site.css by scripts/notebook/sync_toolkit_css.py,
   so the static site and /toolkit/ draw one chrome. Colours and type through
   tokens.css only; logical properties only (the chrome is RTL in Hebrew). */

/* ── Header ──────────────────────────────────────────────────────────────── */
#vn-head.ln-head {
  position: sticky; top: 0; z-index: 60;
  /* The lockup sits in the middle, the actions at the end (Tanya, Nov 10, 2026). */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  width: 100%; max-width: none; min-width: 0; box-sizing: border-box; margin: 0;
  padding: 12px clamp(16px, 3vw, 44px);
  background: color-mix(in srgb, var(--base) 92%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  font-family: var(--font-body);
}
.ln-who {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 17px;
  color: var(--ink); text-decoration: none;
}
.ln-mark { flex: none; overflow: visible; }
/* The mark's strokes run exactly from the top of the name to the foot of the
   studio line (Tanya, Nov 9, 2026): the viewBox is cropped to the strokes'
   centrelines and the mark stretches to the lockup's height. */
.ln-mark { --lock-h: 1.49em; translate: 0 .03em; height: var(--lock-h); width: calc(var(--lock-h) * 67 / 70); }
html[lang="he"] .ln-mark, [dir="rtl"] .ln-mark { --lock-h: 1.125em; translate: 0 .1em; }
.vn-cmark .ln-mark { --lock-h: 1.47em; }
html[lang="he"] .vn-cmark .ln-mark, [dir="rtl"] .vn-cmark .ln-mark { --lock-h: 1.21em; }
.ln-mark path { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ln-name { display: flex; flex-direction: column; gap: .1em; min-width: 0; width: fit-content; }
.ln-name b {
  font-family: var(--font-display); font-weight: 600; font-size: 1em; line-height: 1;
  letter-spacing: 0; white-space: nowrap;
}
/* The studio line runs exactly the width of the name (Tanya, Nov 9, 2026):
   it takes no part in the lockup's width (width 0, min-width 100%), its size is
   the measured ratio of the two strings in their own faces, and justify closes
   the last few pixels. Ratios measured with the self-hosted fonts loaded. */
.ln-name small {
  width: 0; min-width: 100%; text-align: justify; text-align-last: justify;
  font-family: var(--font-mono); font-size: .655em; line-height: 1; color: var(--pencil);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
html[lang="he"] .ln-name small, [dir="rtl"] .ln-name small {
  font-family: var(--font-body); font-size: .59em; letter-spacing: 0; text-transform: none;
}

/* The actions run the full row under the lockup: the menu and the language at
   the reading start, everything after the language pushed to the end (Tanya,
   Nov 10, 2026). One row, one centre line. */
.ln-actions { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 22px; min-width: 0; }
#vn-head .ln-actions > .vn-nav-lang { margin-inline-end: auto; }
/* Words, not boxes (Tanya, Nov 10, 2026): each action is plain text whose
   underline draws in from the reading start on hover. */
.ln-talk, #ln-menu-btn, #vn-head .vn-nav-lang {
  position: static; inset: auto; z-index: auto; min-width: 0; min-height: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 15px/1.2 var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap;
  padding: 6px 0; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-decoration: none;
  color: var(--ink); background-color: transparent;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: 0 100%;
  transition: color .25s ease, background-size .35s cubic-bezier(.2, .7, .2, 1);
}
#ln-menu-btn { background-image: none; gap: 10px; }
.ln-menu-lbl {
  padding: 2px 0; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: 0 100%; transition: background-size .35s cubic-bezier(.2, .7, .2, 1);
}
#ln-menu-btn:hover .ln-menu-lbl, #ln-menu-btn[aria-expanded="true"] .ln-menu-lbl { background-size: 100% 1px; }
[dir="rtl"] .ln-talk, [dir="rtl"] .ln-menu-lbl, [dir="rtl"] #vn-head .vn-nav-lang,
html[lang="he"] .ln-talk, html[lang="he"] .ln-menu-lbl, html[lang="he"] #vn-head .vn-nav-lang { background-position: 100% 100%; }
/* The hamburger: three lines that fold into an X while the menu is open. */
.ln-burger { display: inline-grid; gap: 4px; width: 18px; flex: none; }
.ln-burger i { display: block; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
#ln-menu-btn[aria-expanded="true"] .ln-burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
#ln-menu-btn[aria-expanded="true"] .ln-burger i:nth-child(2) { opacity: 0; }
#ln-menu-btn[aria-expanded="true"] .ln-burger i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.ln-talk { color: var(--accent); font-weight: 600; }
.ln-talk:hover, #vn-head .vn-nav-lang:hover {
  background-color: transparent; background-size: 100% 1px; box-shadow: none; border: 0;
}
.ln-talk:hover { color: var(--accent-2, #0A423E); }
#ln-menu-btn:hover, #ln-menu-btn[aria-expanded="true"] { color: var(--accent); }
/* The language switch keeps its legacy class (the sync script and the coffee
   listing generator find it by name); the id outranks the old absolute rules. */
#vn-head .vn-nav-lang { color: var(--pencil); font-size: 14px; }
#vn-head .vn-nav-lang:hover { color: var(--accent); }
.ln-who:focus-visible, .ln-talk:focus-visible, #ln-menu-btn:focus-visible, #vn-head .vn-nav-lang:focus-visible,
.ln-menu a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: 80px; }

/* Phones: the five header items stay on ONE row down to 280px. */
@media (max-width: 720px) {
  #vn-head .ln-name small { display: none; }
  #vn-head .ln-name b { font-size: 15px; }
  #vn-head .ln-mark, html[lang="he"] #vn-head .ln-mark { --lock-h: 24px; }
  .ln-actions { gap: 16px; }
  .ln-talk, #ln-menu-btn { font-size: 14px; }
}
@media (max-width: 400px) {
  #vn-head.ln-head { gap: 8px; padding-inline: 12px; }
  .ln-actions { gap: 12px; }
  #vn-head .ln-mark, html[lang="he"] #vn-head .ln-mark { --lock-h: 26px; }
  #vn-head .vn-nav-lang { font-size: 13px; }
}
/* Phones: the mark alone holds the middle (the name stays its accessible text). */
@media (max-width: 560px) {
  #vn-head .ln-mark, html[lang="he"] #vn-head .ln-mark { translate: 0 0; }
  #vn-head .ln-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ── Menu: a full-screen sheet under the header ──────────────────────────── */
.ln-menu {
  position: fixed; inset: 0; z-index: 55; overflow: auto; overscroll-behavior: contain;
  background: var(--base); color: var(--ink);
  padding: 88px clamp(16px, 6vw, 90px) 48px;
  font-family: var(--font-body);
}
.ln-menu[hidden] { display: none; }
html.ln-menu-open, html.ln-menu-open body { overflow: hidden; }
/* The header (its Menu button turns into the X + "Close") stays on top while the
   sheet is open: with the page's overflow locked a sticky header could sit
   scrolled out of view, leaving no way to close (Tanya, Nov 11, 2026). */
html.ln-menu-open #vn-head { position: fixed; top: 0; inset-inline: 0; }
.ln-menu-in { display: block; max-width: 1100px; margin: 0 auto; }
.ln-menu-lab {
  margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pencil);
}
html[lang="he"] .ln-menu-lab, [dir="rtl"] .ln-menu-lab {
  font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none;
}
.ln-offers { list-style: none; margin: 18px 0 0; padding: 0; }
.ln-offers a {
  display: grid; grid-template-columns: 3.2em 1fr auto; gap: 12px 20px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.ln-offers li:last-child a { border-bottom: 1px solid var(--rule); }
.ln-n { font: 400 13px var(--font-mono); color: var(--pencil); letter-spacing: 0; }
.ln-t {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, min(3.6vw, 5.2vh), 46px);
  line-height: 1.05; letter-spacing: 0;
}
.ln-d {
  display: block; margin-top: 4px; font: 400 15px/1.4 var(--font-body); color: var(--sec); letter-spacing: 0;
}
.ln-p {
  font-family: var(--font-display); font-size: clamp(18px, 2vw, 24px); line-height: 1.35;
  color: var(--accent); text-align: end; font-variant-numeric: tabular-nums;
}
.ln-p-line { display: block; }
.ln-offers a:hover .ln-t { color: var(--accent); }
.ln-more { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; }
.ln-more a { color: var(--ink); font-weight: 600; }
.ln-more a:hover { color: var(--accent); }
@media (max-width: 720px) {
  .ln-menu { padding-top: 84px; }
  .ln-offers a { grid-template-columns: 1fr; gap: 6px; }
  .ln-n { display: none; }
  .ln-p { text-align: start; }
}

/* ── Footer: the colophon's lockup is the header's ───────────────────────── */
.vn-cmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; line-height: 1; }
.vn-cmark { font-size: 16px; }