@layer layout {
  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
  }

  .section { padding-block: var(--space-8); }
  .section--tight { padding-block: var(--space-6); }
  .section--ruled { border-block-start: var(--border) solid var(--line); }

  /* Spacing helpers: set --gap on the element (or use a modifier) to change it */
  .stack > * + * { margin-block-start: var(--gap, var(--space-4)); }
  .stack--s { --gap: var(--space-3); }
  .stack--l { --gap: var(--space-5); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-3)); }

  /* A heading on the left, its controls on the right; stacks when narrow */
  .section-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .section-bar {
    display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
    gap: var(--space-4) var(--space-6);
  }

  /* 12-column grid. Children span the full row until told otherwise. */
  .grid-12 {
    display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--col-gap); row-gap: var(--space-6);
  }
  .grid-12 > * { grid-column: 1 / -1; }
  @media (min-width: 56rem) {
    .grid-12 > .span-4 { grid-column: span 4; }
    .grid-12 > .span-5 { grid-column: span 5; }
    .grid-12 > .span-7 { grid-column: span 7; }
    .grid-12 > .span-8 { grid-column: span 8; }
  }

  /* Cards in reading order (left to right, then down); each keeps its own height */
  .grid-auto {
    display: grid; align-items: start;
    gap: var(--gap, var(--space-7) var(--col-gap));
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, var(--card-min))), 1fr));
  }

  /* Header */
  site-header {
    display: block;
    position: sticky; inset-block-start: 0; z-index: 30;
    min-block-size: var(--header-h);
    background: var(--bg-high);   /* the header is part of the sky */
    border-block-end: var(--border) solid var(--hairline);
  }
  .site-header__bar {
    display: flex; align-items: center; gap: var(--space-4);
    min-block-size: var(--header-h);
  }
  .site-header__brand {
    display: inline-flex; align-items: center; min-block-size: var(--tap);
    font-family: var(--font-display); font-weight: var(--weight-strong); font-size: var(--type-sub);
    letter-spacing: 0.01em;
    color: var(--text); text-decoration: none; margin-inline-end: auto;
  }
  .site-header__brand:hover { color: var(--text); }
  /* one row: when the links do not fit (a host has more of them), the row scrolls instead of breaking the header */
  .site-header__nav { display: flex; gap: var(--space-4); flex-wrap: nowrap; min-inline-size: 0; overflow-x: auto; scrollbar-width: none;
    padding: calc(var(--ring) + var(--ring-offset)); margin: calc(-1 * (var(--ring) + var(--ring-offset))); }   /* room for the focus ring inside the scroller */
  .site-header__nav a { white-space: nowrap; flex: none; }
  .site-header__nav[data-more] { mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent); }
  .site-header__nav a {
    display: inline-flex; align-items: center; min-block-size: var(--tap);
    color: var(--text-soft); text-decoration: none; letter-spacing: var(--tracking-ui);
    box-shadow: inset 0 calc(-1 * var(--border)) 0 transparent;
    transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .site-header__nav a:hover { color: var(--text); box-shadow: inset 0 calc(-1 * var(--border)) 0 var(--line-strong); }
  .site-header__nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 calc(-1 * var(--border)) 0 var(--signal); }
  .site-header__tools { display: flex; align-items: center; gap: var(--space-3); }
  /* The account menu (site-header.js userMenu): the role on the button, the rest in a small panel */
  .user-menu { position: relative; }
  .user-menu summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
  .user-menu summary::-webkit-details-marker { display: none; }
  .user-menu summary::after { content: ""; inline-size: 0.4em; block-size: 0.4em; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: 45deg; translate: 0 -0.15em; }
  .user-menu[open] summary::after { rotate: 225deg; translate: 0 0.1em; }
  /* between phone and wide: the account button shows only its letter, to leave the links room (the role stays in its label) */
  @media (min-width: 40.01rem) and (max-width: 80rem), (max-width: 24rem) { .user-menu__role { display: none; } }   /* also on the narrowest phones */
  .user-menu__dot { display: grid; place-items: center; inline-size: 1.5em; block-size: 1.5em; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); font-size: 0.8em; font-weight: var(--weight-strong); }
  .user-menu__panel {
    position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-2)); z-index: 20;
    min-inline-size: 15rem; padding: var(--space-3); display: grid; gap: var(--space-1);
    background: var(--surface); border-radius: var(--r-m); box-shadow: var(--lift);
    border: var(--border) solid color-mix(in oklab, var(--text) 8%, transparent);
  }
  .user-menu__who { padding: var(--space-2); font-weight: var(--weight-strong); }
  .user-menu__who span, .user-menu__label { color: var(--text-soft); font-size: var(--type-caption); font-weight: normal; }
  .user-menu__label { padding: var(--space-2) var(--space-2) 0; border-block-start: var(--border) solid var(--line); }
  .user-menu__item { text-align: start; padding: var(--space-2); border: 0; border-radius: var(--r-s); background: none; color: var(--text); font: inherit; cursor: pointer; min-block-size: var(--tap); }
  .user-menu__item:hover, .user-menu__item:focus-visible { background: var(--well); }
  .user-menu__out { border-block-start: var(--border) solid var(--line); border-radius: 0; color: var(--text-soft); }

  /* Phones: the places move to a bar along the bottom (site-header.js tabBar); the top keeps the brand and the tools */
  .tabbar { display: none; }
  @media (max-width: 40rem) {
    .site-header__bar { column-gap: var(--space-3); }
    .site-header__nav { display: none; }
    /* a floating pill above the bottom edge, not glued to it */
    .tabbar {
      position: fixed; inset-inline: var(--space-3); inset-block-end: calc(var(--space-3) + env(safe-area-inset-bottom)); z-index: 40;
      display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
      padding-inline: var(--space-1);
      border-radius: 999px;
      background: color-mix(in oklab, var(--surface) 86%, transparent);
      backdrop-filter: blur(16px) saturate(1.3);
      border: var(--border) solid var(--hairline);
      box-shadow: 0 14px 34px -12px color-mix(in oklab, var(--ink) 35%, transparent);
    }
    body { padding-block-end: calc(var(--tabbar-h) + var(--space-5) + env(safe-area-inset-bottom)); }
  }
  .tabbar__tab {
    display: grid; justify-items: center; align-content: center; gap: var(--space-1);
    min-block-size: var(--tabbar-h); min-inline-size: 0; padding: var(--space-1) 0;
    border: 0; background: none; font: inherit; cursor: pointer;
    color: var(--text-soft); text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
  }
  .tabbar__tab[aria-current="page"] { color: var(--accent); }
  .tabbar__icon { position: relative; display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; }
  .tabbar__icon .line-icon { inline-size: 1.4rem; block-size: 1.4rem; }
  .tabbar__tab[aria-current="page"] .line-icon { stroke-width: 2.2; }
  .tabbar__icon img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; }
  .tabbar__tab[aria-current="page"] .tabbar__icon img { outline: var(--border-strong) solid var(--accent); outline-offset: 1px; }
  .tabbar__icon .nav-count { position: absolute; inset-block-start: calc(-1 * var(--space-1)); inset-inline-start: 60%; margin: 0; }
  .tabbar__label { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-caption); letter-spacing: 0; line-height: 1.2; }

  /* Page heading used on inner pages */
  .page-head { padding-block: var(--space-7) var(--space-5); }
  .page-head p { color: var(--text-soft); margin-block-start: var(--space-3); }

  /* Footer: the same on every page (site-footer.js) */
  .theme-toggle { padding-inline: 0; }
  .theme-icon { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* The page ends on the horizon: a low line of hills, then the footer on the grass-light ground */
  site-footer {
    display: block; position: relative; margin-block-start: var(--space-9);
    background: linear-gradient(to bottom, color-mix(in oklab, var(--hill) 75%, var(--bg)), var(--hill));   /* the front hill runs straight into it */
  }
  site-footer::before {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: clamp(3rem, 8vw, 7rem); pointer-events: none;
    /* two lines of hills: the shape is a mask, the colour is --hill (day and night) */
    background: var(--hill);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C150 30 260 55 380 42 S620 8 760 34 S1010 20 1200 48 V120 H0Z' fill-opacity='.45'/%3E%3Cpath d='M0 96 C180 70 330 88 500 76 S820 62 980 82 S1120 74 1200 80 V120 H0Z' fill-opacity='.75'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C150 30 260 55 380 42 S620 8 760 34 S1010 20 1200 48 V120 H0Z' fill-opacity='.45'/%3E%3Cpath d='M0 96 C180 70 330 88 500 76 S820 62 980 82 S1120 74 1200 80 V120 H0Z' fill-opacity='.75'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  }
  .site-footer__grid { padding-block: var(--space-7) var(--space-6); align-items: start; }
  .site-footer__brand { font: var(--weight-display) var(--type-title) / 1 var(--font-display); letter-spacing: var(--tracking-display); }
  .site-footer__lead { color: var(--text-soft); margin-block-start: var(--space-2); max-inline-size: var(--measure-narrow); }
  .site-footer__nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
  .site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-5); }
  .site-footer__cols h2 { font-family: var(--font-sans); font-size: var(--type-caption); color: var(--text-soft); letter-spacing: var(--tracking-ui); margin-block-end: var(--space-2); }
  .site-footer__cols a, .site-footer__cols p { display: flex; align-items: center; min-block-size: var(--tap); color: var(--text); }
  .site-footer__nav a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--text); }
  .site-footer__note {
    grid-column: 1 / -1; padding-block-start: var(--space-4); border-block-start: var(--border) solid var(--line);
    color: var(--text-soft); font-size: var(--type-caption); max-inline-size: none;
  }
  .site-footer__nav .btn, .site-footer__cols .btn { font-weight: inherit; font-size: inherit; padding-inline: 0; text-decoration: underline; text-underline-offset: 0.2em; }
  .site-footer__nav .btn:hover, .site-footer__cols .btn:hover { background: transparent; color: var(--accent-strong); }

  /* Below-the-fold sections are skipped by the renderer until near the screen */
  .defer-render { content-visibility: auto; contain-intrinsic-size: auto 40rem; }
}