/* ==========================================================================
   layout — page frame, header, menu, footer, section rhythm
   ========================================================================== */

@layer layout {
  .wrap {
    width: 100%;
    max-width: 96rem;
    margin-inline: auto;
    padding-inline: max(var(--margin), env(safe-area-inset-left)) max(var(--margin), env(safe-area-inset-right));
  }

  main { display: block; min-height: 60vh; }
  /* Sections only pad their top; the footer's top margin closes the page. */
  .section { padding-top: var(--section); }
  .section--tight { padding-top: clamp(1.5rem, 0.75rem + 2.5vw, 3.5rem); }

  /* ---- Header: wordmark · pill navigation · language + contact ---------- */
  body { padding-top: var(--header-h); }

  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
    height: var(--header-h);
    background: rgb(243 246 250 / 0.82);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    transition: transform var(--d-ui) var(--ease-out), box-shadow var(--d-ui) ease;
  }
  .site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
  .site-header.is-hidden { transform: translateY(-100%); }
  .site-header:focus-within { transform: none; }

  .site-header__bar {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s-5);
  }
  @media (min-width: 64em) { .site-header__bar { grid-template-columns: 1fr auto 1fr; } }

  .wordmark {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    font-size: var(--fs-label);
    font-weight: var(--w-medium);
    letter-spacing: -0.015em;
    text-decoration: none;
    gap: 0.6rem;
  }
  .wordmark__mark {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    transition: transform var(--d-ui) var(--ease-out);
  }
  .wordmark__name { font-size: 1.0625rem; letter-spacing: -0.03em; }
  @media (hover: hover) and (pointer: fine) {
    .wordmark:hover .wordmark__mark { transform: rotate(-8deg); }
  }

  .primary-nav { display: none; }
  .primary-nav ul {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 5px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .primary-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.375rem;
    padding-inline: 1rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    text-decoration: none;
    color: var(--ink-2);
    transition: color var(--d-fast) ease, background-color var(--d-fast) ease;
  }
  .primary-nav a[aria-current="page"] { background: var(--inverse); color: var(--on-inverse); }
  @media (hover: hover) and (pointer: fine) {
    .primary-nav a:not([aria-current="page"]):hover { background: var(--bg); color: var(--ink); }
  }

  .site-header__tools { justify-self: end; display: flex; align-items: center; gap: var(--s-2); }
  .locale-switch {
    display: inline-grid;
    place-items: center;
    min-width: var(--target);
    min-height: var(--target);
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    text-decoration: none;
    color: var(--ink-2);
    transition: color var(--d-fast) ease;
  }
  @media (hover: hover) and (pointer: fine) { .locale-switch:hover { color: var(--ink); } }
  .site-header__cta { display: none; }
  .menu-button {
    display: inline-grid;
    place-items: center;
    width: var(--target);
    height: var(--target);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink);
    transition: transform var(--d-press) var(--ease-out);
  }
  .menu-button:active { transform: scale(0.95); }

  @media (min-width: 64em) {
    .primary-nav { display: block; }
    .site-header__cta { display: inline-flex; }
    .menu-button { display: none; }
  }

  /* ---- Menu (native <dialog>) ------------------------------------------ */
  .menu {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--bg);
    color: var(--ink);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu::backdrop { background: var(--scrim); }
  .menu[open] { animation: menu-in var(--d-ui) var(--ease-drawer) both; }
  .menu.is-closing { animation: menu-out var(--d-fast) var(--ease-out) both; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
  @keyframes menu-out { to { opacity: 0; } }

  .menu__inner {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
  }
  .menu__top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
  .menu__close {
    min-height: var(--target);
    padding-inline: 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
  }
  .menu__nav { align-self: center; }
  .menu__nav ul { margin: 0; }
  .menu__nav a {
    display: block;
    padding-block: 0.35rem;
    font-size: clamp(2.5rem, 10vw, 4rem);
    font-weight: var(--w-light);
    line-height: 1.08;
    letter-spacing: var(--track-tight);
    text-decoration: none;
    color: var(--ink);
  }
  .menu__nav a[aria-current="page"] { color: var(--mute); }
  .menu[open] .menu__nav li { animation: menu-item 420ms var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 35ms); }
  @keyframes menu-item { from { opacity: 0; transform: translateY(12px); } }
  .menu__meta { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); font-size: var(--fs-sm); color: var(--ink-2); }
  .menu__meta a { display: inline-flex; align-items: center; min-height: var(--target); }

  /* ---- Footer ---------------------------------------------------------- */
  .site-footer { margin-top: var(--section); }

  .footer-cta { padding-block: var(--s-6) var(--s-8); display: grid; gap: var(--s-4); }
  .footer-cta__title { font-size: clamp(2.75rem, 1.4rem + 5.4vw, 6rem); font-weight: var(--w-light); line-height: 1; letter-spacing: var(--track-tight); }
  .footer-cta__sub { font-size: var(--fs-read); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
  .footer-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-5); }
  .footer-cta__mail {
    font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem);
    font-weight: var(--w-light);
    letter-spacing: -0.02em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--line-strong);
    transition: text-decoration-color var(--d-fast) ease;
  }
  @media (hover: hover) and (pointer: fine) { .footer-cta__mail:hover { text-decoration-color: currentColor; } }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--gutter);
    padding-block: var(--s-7) var(--s-6);
    border-top: 1px solid var(--line);
  }
  .footer-grid__head { font-size: var(--fs-xs); font-weight: var(--w-medium); letter-spacing: 0; color: var(--mute); margin-bottom: var(--s-3); }
  .footer-grid ul { margin: 0; display: grid; }
  .footer-grid a, .footer-grid__button {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    font-size: var(--fs-sm);
    color: var(--ink-2);
    text-decoration: none;
    text-align: left;
    transition: color var(--d-fast) ease;
  }
  @media (hover: hover) and (pointer: fine) { .footer-grid a:hover, .footer-grid__button:hover { color: var(--ink); text-decoration: underline; } }
  @media (min-width: 48em) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .footer-end {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-6);
    padding-block: var(--s-5) max(var(--s-6), env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--mute);
  }
  .footer-end a { color: var(--mute); text-decoration: none; }
  .footer-end a:hover { color: var(--ink); }
  .footer-end { align-items: center; }
  .footer-end .footer-end__logo { color: var(--ink); min-height: var(--target); }
  .footer-end__top { margin-left: auto; }
}