/* ==========================================================================
   Arcobaleno — componente
   ========================================================================== */

@layer components {

  /* ================================================================ marks */
  .mark {
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    text-decoration: none;
    color: var(--ink);
    view-transition-name: site-mark;
  }

  /* Sigla desenată stă dedesubt ca rezervă; fotografia siglei reale se pune
     peste ea. Dacă fișierul lipsește, site.js scoate <img> și rămâne desenul —
     vezi `optionalImages()`. */
  .mark__badge {
    position: relative;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    flex: none;
    display: grid;
    place-items: center;
    transition: transform var(--dur-slow) var(--ease-spring);
  }

  .mark:hover .mark__badge { transform: rotate(-7deg) scale(1.05); }

  /* Insigna e cea care se înclină la hover, nu conținutul ei — altfel sigla și
     desenul s-ar roti de două ori. */
  .mark__glyph {
    inline-size: 2.15rem;
    block-size: 2.15rem;
    flex: none;
    color: var(--clay);
  }

  .mark__logo {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: var(--r-sm);
  }

  .mark__type {
    display: grid;
    line-height: 1;
  }

  .mark__name {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 500;
    letter-spacing: -0.028em;
    font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 40;
  }

  .mark__sub {
    font-size: 0.5rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-faint);
    margin-block-start: 0.28rem;
  }

  .colophon .mark { color: var(--paper); }
  .colophon .mark__glyph { color: var(--ochre); }
  .colophon .mark__sub { color: color-mix(in oklab, var(--paper) 55%, var(--ink)); }

  /* ================================================================ eyebrow */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clay-deep);
    margin: 0;
  }

  .eyebrow::before {
    content: "";
    inline-size: 1.55rem;
    block-size: 1px;
    background: currentColor;
    opacity: 0.55;
    flex: none;
  }

  .eyebrow--bare::before { display: none; }

  /* ================================================================ lede */
  .lede {
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--ink-soft);
    max-inline-size: 34ch;
    letter-spacing: -0.008em;
  }

  .prose { max-inline-size: var(--measure); }
  .prose p + p { margin-block-start: 1em; }
  .prose a { text-decoration-color: var(--clay); }
  .prose a:hover { color: var(--clay-deep); }

  /* ================================================================ buttons */
  .btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-edge: var(--ink);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 0.82em 1.5em;
    border: 1px solid var(--btn-edge);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.012em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }

  /* --mx / --my are driven by the magnetic-pointer module in site.js; they stay
     at zero for keyboard, touch and reduced-motion users, so the hover lift
     below is all they ever see. */
  .btn { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); }

  .btn:hover {
    transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 2px), 0);
    box-shadow: var(--lift);
  }
  .btn:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); box-shadow: none; }

  .btn--clay { --btn-bg: var(--clay); --btn-edge: var(--clay); --btn-fg: #fffaf3; }
  .btn--clay:hover { --btn-bg: var(--clay-deep); --btn-edge: var(--clay-deep); }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-edge: var(--rule-strong);
  }
  .btn--ghost:hover { --btn-edge: var(--ink); --btn-bg: color-mix(in oklab, var(--ink) 5%, transparent); }

  .btn--quiet {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-edge: transparent;
    padding-inline: 0.4em;
  }
  .btn--quiet:hover { box-shadow: none; transform: none; text-decoration: underline; }

  .btn--lg { padding: 1em 1.85em; font-size: var(--fs-sm); }
  .btn--sm { padding: 0.62em 1.1em; font-size: var(--fs-3xs); }

  .panel--ink .btn--ghost,
  .colophon .btn--ghost {
    --btn-fg: var(--paper);
    --btn-edge: color-mix(in oklab, var(--paper) 34%, transparent);
  }
  .panel--ink .btn--ghost:hover,
  .colophon .btn--ghost:hover {
    --btn-edge: var(--paper);
    --btn-bg: color-mix(in oklab, var(--paper) 10%, transparent);
  }

  /* Arrow link — the underline grows from the left, the arrow nudges. */
  .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--ink);
    padding-block-end: 0.28em;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .arrow-link:hover { background-size: 100% 1px; color: var(--clay-deep); }
  .arrow-link svg { inline-size: 1.05em; flex: none; transition: transform var(--dur) var(--ease-spring); }
  .arrow-link:hover svg { transform: translateX(0.28em); }

  /* ================================================================ nav */
  .navlink {
    position: relative;
    padding: 0.5rem 0.72rem;
    font-size: var(--fs-xs);
    font-weight: 550;
    text-decoration: none;
    color: var(--ink-soft);
    border-radius: var(--r-sm);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .navlink:hover { color: var(--ink); }

  .navlink::after {
    content: "";
    position: absolute;
    inset-block-end: 0.16rem;
    inset-inline: 0.72rem;
    block-size: 2px;
    border-radius: var(--r-pill);
    background: var(--clay);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--dur) var(--ease-out);
  }
  .navlink:hover::after { transform: scaleX(1); }
  .navlink[aria-current="page"] { color: var(--ink); }
  .navlink[aria-current="page"]::after { transform: scaleX(1); }

  /* Burger */
  .burger {
    inline-size: 2.85rem;
    block-size: 2.85rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }
  .burger:hover { border-color: var(--ink); }
  .burger__bars { inline-size: 1.05rem; block-size: 0.62rem; position: relative; }
  .burger__bars span {
    position: absolute;
    inset-inline: 0;
    block-size: 1.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease-spring), opacity var(--dur-fast) linear;
  }
  .burger__bars span:nth-child(1) { inset-block-start: 0; }
  .burger__bars span:nth-child(2) { inset-block-end: 0; }
  [aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(0.31rem) rotate(45deg); }
  [aria-expanded="true"] .burger__bars span:nth-child(2) { transform: translateY(-0.3rem) rotate(-45deg); }

  @media (min-width: 62em) { .burger { display: none; } }

  /* Full-screen drawer */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: 480;
    background: var(--paper-warm);
    padding: calc(var(--header-h) + var(--sp-lg)) var(--gutter) var(--sp-xl);
    display: grid;
    align-content: space-between;
    gap: var(--sp-xl);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.5rem);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility 0s linear var(--dur);
  }

  .drawer[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .drawer__list { display: grid; gap: 0.1rem; }

  .drawer__list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding-block: 0.62rem;
    border-block-end: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 450;
    letter-spacing: -0.028em;
    font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 60;
    text-decoration: none;
    opacity: 0;
    transform: translateY(0.8rem);
  }

  .drawer[data-open="true"] .drawer__list a {
    animation: drawer-in 520ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 55ms + 60ms);
  }

  .drawer__list a span {
    font-family: var(--font-text);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-ghost);
  }

  @keyframes drawer-in {
    to { opacity: 1; transform: none; }
  }

  @media (min-width: 62em) { .drawer { display: none; } }

  /* ============================================================== dashboard
     One overlay that surfaces every destination at once. The burger opens it
     below 62em; the labelled trigger opens it above. Injected by site.js, so
     the markup lives in exactly one place. */

  .dash-trigger {
    display: none;
    align-items: center;
    gap: 0.55rem;
    padding: 0.52rem 0.8rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }

  @media (min-width: 62em) { .dash-trigger { display: inline-flex; } }

  .dash-trigger:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: color-mix(in oklab, var(--ink) 5%, transparent);
  }

  /* Four dots that scatter outwards on hover — the dashboard, in miniature. */
  .dash-trigger__dots {
    display: grid;
    grid-template-columns: repeat(2, 4px);
    gap: 2.5px;
    flex: none;
  }

  .dash-trigger__dots i {
    inline-size: 4px;
    block-size: 4px;
    border-radius: 1px;
    background: currentColor;
    transition: transform var(--dur) var(--ease-spring);
  }

  .dash-trigger:hover .dash-trigger__dots i:nth-child(1) { transform: translate(-1.5px, -1.5px); }
  .dash-trigger:hover .dash-trigger__dots i:nth-child(2) { transform: translate(1.5px, -1.5px); }
  .dash-trigger:hover .dash-trigger__dots i:nth-child(3) { transform: translate(-1.5px, 1.5px); }
  .dash-trigger:hover .dash-trigger__dots i:nth-child(4) { transform: translate(1.5px, 1.5px); }

  .dash-trigger kbd {
    font: inherit;
    font-size: 0.9em;
    padding: 0.1em 0.36em;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-xs);
    color: var(--ink-ghost);
    letter-spacing: 0.04em;
  }

  @media (max-width: 76em) { .dash-trigger kbd { display: none; } }

  .dash {
    position: fixed;
    inset: 0;
    z-index: 520;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--gutter);
    background: color-mix(in oklab, var(--paper-warm) 94%, transparent);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.7rem) scale(0.988);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility 0s linear var(--dur);
  }

  .dash[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .dash__sheet {
    max-inline-size: 72rem;
    margin-inline: auto;
    min-block-size: 100%;
    display: grid;
    align-content: start;
    gap: var(--sp-lg);
    padding-block: var(--sp-md) var(--sp-xl);
  }

  .dash__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding-block-end: var(--sp-sm);
    border-block-end: 1px solid var(--rule);
  }

  .dash__close {
    inline-size: 2.6rem;
    block-size: 2.6rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    cursor: pointer;
    color: var(--ink);
    transition: transform var(--dur) var(--ease-spring),
                border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }

  .dash__close:hover {
    border-color: var(--ink);
    background: color-mix(in oklab, var(--ink) 6%, transparent);
    transform: rotate(90deg);
  }

  .dash__close svg { inline-size: 0.95rem; }

  .dash__grid {
    display: grid;
    gap: var(--sp-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }

  .dashcard {
    position: relative;
    display: grid;
    /* Cardul are doar numărul, pictograma și titlul — fără text sub el.
       Titlul ia spațiul rămas și stă la mijloc. */
    grid-template-rows: auto auto 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.55rem;
    padding: var(--sp-md);
    min-block-size: 11rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--surface-raised);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
  }

  .dash[data-open="true"] .dashcard {
    animation: dash-in 560ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 45ms + 70ms);
  }

  @keyframes dash-in {
    from { opacity: 0; transform: translateY(1.1rem) scale(0.97); }
  }

  .dashcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--lift);
    border-color: var(--rule-strong);
  }

  .dashcard__no {
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    /* -deep, nu ochre plin: cardul are fundal aproape alb, iar auriul de bandă
       cade sub 3:1 acolo — deep ține un contrast mai bun ca decorație. */
    color: var(--ochre-deep);
    font-variant-numeric: lining-nums;
  }

  .dashcard__icon {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    color: var(--clay);
    transition: transform var(--dur-slow) var(--ease-spring);
  }

  .dashcard:hover .dashcard__icon { transform: rotate(-8deg) scale(1.12); }

  .dashcard__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 450;
    letter-spacing: -0.022em;
    line-height: 1.1;
    font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 48;
    align-self: center;
  }

  /* The two that do something rather than go somewhere. */
  .dashcard--call {
    background: var(--sage-wash);
    border-color: transparent;
  }
  .dashcard--call .dashcard__icon { color: var(--sage-deep); }

  .dashcard--book {
    background: var(--ink);
    border-color: transparent;
    color: var(--paper);
  }
  .dashcard--book .dashcard__no { color: var(--ochre); }
  .dashcard--book .dashcard__icon { color: var(--ochre); }

  .dash__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs) var(--sp-lg);
    align-items: center;
    padding-block-start: var(--sp-md);
    border-block-start: 1px solid var(--rule);
    font-size: var(--fs-2xs);
    color: var(--ink-faint);
  }

  .dash__foot strong { color: var(--ink); font-weight: 600; }

  /* ================================================================== bandă */
  .ticker {
    overflow: hidden;
    /* Banda urcă un pixel peste erou. Eroul se măsoară din JS și ajunge la
       fereastră la pixel, dar dacă vreodată rămâne scurt cu o fracțiune,
       muchia de sus a benzii era exact dunga de hârtie care se vedea sub
       film. Așa nu are cum. */
    margin-block-start: -1px;
    border-block: 1px solid var(--rule);
    padding-block: 0.85rem;
    background: var(--paper-warm);
  }

  /* ------------------------------------------------- banda care se scrie
     Aceeași bandă, dar cu o singură frază care apare literă cu literă.
     Nu mai derulează, deci nici masca de pe muchii n-are ce estompa. */
  .ticker--type {
    display: grid;
    justify-items: center;
    padding-block: 1.05rem;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ticker__line {
    position: relative;
    max-inline-size: 64rem;
    padding-inline: var(--gutter);
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 550;
    line-height: 1.45;
    color: var(--ink-soft);
    text-wrap: balance;
  }

  /* Ține locul frazei întregi, fără s-o arate. */
  .ticker__ghost { visibility: hidden; }

  .ticker__typed {
    position: absolute;
    inset: 0;
    padding-inline: var(--gutter);
  }

  /* Cursorul clipește cât se scrie și pleacă la final. */
  .ticker__typed::after {
    content: "";
    display: inline-block;
    inline-size: 0.09em;
    block-size: 1.05em;
    margin-inline-start: 0.14em;
    vertical-align: -0.18em;
    background: var(--clay);
    animation: caret 1s steps(1) infinite;
  }

  .ticker__typed[data-done="true"]::after { display: none; }

  @keyframes caret { 50% { opacity: 0; } }

  /* ================================================================ seal */
  .seal {
    position: relative;
    inline-size: clamp(6.5rem, 12vi, 9.5rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--ink);
  }

  .seal__ring {
    position: absolute;
    inset: 0;
    animation: spin 26s linear infinite;
  }

  /* Spațierea e potrivită ca textul să închidă exact cercul (301,6px la raza
     de 48). Dacă se schimbă textul din sigiliu, se schimbă și ea — altfel
     rămâne o gaură în inel acolo unde textul se termină prea devreme. */
  .seal__ring text {
    font-family: var(--font-text);
    font-size: 8.2px;
    font-weight: 600;
    letter-spacing: 0.372em;
    text-transform: uppercase;
    fill: currentColor;
  }

  .seal__core {
    inline-size: 42%;
    color: var(--clay);
  }

  /* Sigla, tăiată rotund ca să stea în cercul sigiliului. */
  .seal__logo {
    position: absolute;
    inline-size: 46%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  /* ================================================================ frames */
  /* Arch window — the recurring shape of the school's doorways. */
  .arch {
    position: relative;
    border-radius: var(--r-arch);
    overflow: hidden;
    background: var(--sky-wash);
    isolation: isolate;
  }

  .arch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
    pointer-events: none;
  }

  .blob {
    border-radius: 52% 48% 41% 59% / 47% 55% 45% 53%;
    overflow: hidden;
  }

  /* ================================================================== ziua
     Lista zilei lângă filmul vertical. Filmul trece sub listă abia sub 46em,
     unde o coloană de text de lângă un 9:16 ar rămâne prea îngustă. */
  .day { display: grid; gap: var(--sp-xl); }

  @media (min-width: 46em) {
    .day {
      grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
      gap: var(--sp-xl);
      align-items: start;
    }
  }

  .daylist {
    display: grid;
    gap: var(--sp-md);
    list-style: none;
    padding: 0;
    margin: 0;
    border-block-start: 1px solid var(--rule);
  }

  .daylist li {
    padding-block: var(--sp-md) 0;
    padding-inline-start: 2rem;
    position: relative;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-faint);
  }

  /* Bifa, desenată din două laturi ale unei casete rotite — fără pictogramă. */
  .daylist li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--sp-md) + 0.34em);
    inline-size: 1rem;
    block-size: 0.52rem;
    border-block-end: 2px solid var(--sage-deep);
    border-inline-start: 2px solid var(--sage-deep);
    rotate: -45deg;
  }

  .daylist strong {
    display: block;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ink);
  }

  .day__film { align-self: start; }

  /* ================================================================ rooms */
  .room {
    display: grid;
    gap: var(--sp-md);
    padding-block: var(--sp-xl);
    border-block-start: 1px solid var(--rule);
    align-items: start;
  }

  @media (min-width: 54em) {
    /* The artwork starts level with the description rather than the title, so
       the name and its age range read as a label sitting above the whole row.
       Areas rather than auto-placement because the swatch has to skip row one. */
    .room {
      grid-template-columns: 4.5rem minmax(0, 1.05fr) minmax(0, 1fr);
      grid-template-areas:
        "no   head  ."
        ".    body  art";
      column-gap: var(--sp-xl);
      row-gap: var(--sp-lg);
    }

    .room__no     { grid-area: no; }
    .room__head   { grid-area: head; }
    .room__body   { grid-area: body; }
    .room__swatch { grid-area: art; }
    .room__films  { grid-area: art; }

    /* Rândurile cu film au coloana a treia strânsă pe măsura filmului, nu pe
       jumătate de pagină: filmele sunt verticale (9:16), iar la lățimea
       întreagă a coloanei ieșeau cât un ecran de telefon în mărime naturală.
       Textul se așază pe mijlocul filmului, nu lipit de marginea lui de sus. */
    .room:has(.room__films) {
      grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 16rem);
    }

    .room:has(.room__films--doua) {
      grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 26rem);
    }

    .room:has(.room__films) .room__body {
      align-self: center;
      max-inline-size: 42rem;
    }
  }

  /* Filmele programului stau în locul ilustrației. Sunt verticale, ca toate
     filmările de la școală, iar `.vidcard__frame` le dă deja forma 9:16.
     Excursiile au două, deci merg umăr la umăr.

     Plafonul de lățime e ce ține înălțimea în frâu: un 9:16 lat cât coloana
     ajunge de două ori mai înalt decât textul de lângă el. Sub 54em coloana e
     una singură, deci filmul stă centrat sub text. */
  .room__films {
    display: grid;
    gap: var(--sp-sm);
    inline-size: 100%;
    max-inline-size: 15rem;
    margin-inline: auto;
  }

  .room__films--doua {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 26rem;
  }

  .room__no {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 400;
    color: var(--ink-ghost);
    line-height: 1;
    font-variant-numeric: lining-nums;
    font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 60;
  }

  .room__name {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    letter-spacing: -0.026em;
    line-height: 1.06;
    font-variation-settings: "SOFT" 44, "WONK" 1, "opsz" 72;
  }

  .room__ages {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clay-deep);
    margin-block-start: 0.7rem;
  }

  .room__facts {
    display: grid;
    gap: 0;
    margin-block-start: var(--sp-sm);
    font-size: var(--fs-xs);
  }

  .room__facts div {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding-block: 0.52rem;
    border-block-end: 1px dotted var(--rule-strong);
  }

  .room__facts dt { color: var(--ink-faint); }
  .room__facts dd { margin: 0; font-weight: 600; text-align: end; }

  .room__swatch {
    inline-size: 100%;
    aspect-ratio: 5 / 3;
    border-radius: var(--r-lg);
    background: var(--swatch, var(--sage-wash));
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
  }

  /* ================================================================ cards */
  .card {
    position: relative;
    display: grid;
    gap: var(--sp-xs);
    padding: var(--sp-md);
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
  }

  .card--link:hover {
    transform: translateY(-3px);
    box-shadow: var(--lift);
    border-color: var(--rule-strong);
  }

  .card__icon {
    inline-size: 2.4rem;
    block-size: 2.4rem;
    color: var(--clay);
  }

  .card__title { font-size: var(--fs-lg); letter-spacing: -0.018em; }
  .card__body { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.58; }

  /* Principles — hairline grid, no boxes. */
  .tenets {
    display: grid;
    gap: 0;
    counter-reset: tenet;
  }

  @media (min-width: 50em) {
    .tenets { grid-template-columns: repeat(2, 1fr); }
  }

  .tenet {
    counter-increment: tenet;
    padding: var(--sp-md) 0;
    border-block-start: 1px solid var(--rule);
    display: grid;
    gap: 0.5rem;
    align-content: start;
  }

  @media (min-width: 50em) {
    .tenet { padding: var(--sp-lg) var(--sp-lg) var(--sp-lg) 0; }
    .tenet:nth-child(odd) { border-inline-end: 1px solid var(--rule); }
    .tenet:nth-child(even) { padding-inline-start: var(--sp-lg); }
  }

  .tenet::before {
    content: counter(tenet, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ochre);
    font-variant-numeric: lining-nums;
  }

  .tenet h3 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
  .tenet p { font-size: var(--fs-sm); color: color-mix(in oklab, currentColor 74%, transparent); line-height: 1.6; }

  /* ================================================================ people */
  .people {
    display: grid;
    gap: var(--sp-md);
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  }

  .person { display: grid; gap: 0.75rem; align-content: start; }

  .person__portrait {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md) var(--r-md) 40% 40% / var(--r-md) var(--r-md) 12% 12%;
    background: var(--tone, var(--sage-wash));
    overflow: hidden;
    position: relative;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .person:hover .person__portrait { transform: translateY(-4px) rotate(-1deg); }
  .person__portrait svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

  /* Fotografie reală peste portretul desenat. Dacă fișierul lipsește, site.js
     scoate <img> și rămâne ilustrația de dedesubt. */
  .person__photo {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 22%;
  }

  .person__name { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.012em; font-family: var(--font-text); }
  .person__role { font-size: var(--fs-2xs); color: var(--ink-faint); letter-spacing: 0.03em; }
  .person__note { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; }

  /* ================================================================ quote */
  .quote { display: grid; gap: var(--sp-md); }

  .quote__text {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: -0.024em;
    font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 90;
    text-wrap: balance;
  }

  .quote__text::before { content: "\201C"; margin-inline-start: -0.42em; }
  .quote__text::after { content: "\201D"; }

  /* Citatul centrat: ghilimeaua nu mai atârnă în afara coloanei, fiindcă n-are
     margine de care să atârne. */
  .quote--centred { justify-items: center; text-align: center; }
  .quote--centred .quote__text { max-inline-size: 28ch; }
  .quote--centred .quote__text::before { margin-inline-start: 0; }

  .quote__by {
    font-size: var(--fs-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: color-mix(in oklab, currentColor 62%, transparent);
  }

  /* Testimonials — offset, slightly rotated, like pinned notes. */
  .notes {
    display: grid;
    gap: var(--sp-md);
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  }

  .note {
    padding: var(--sp-md);
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    display: grid;
    gap: var(--sp-sm);
    align-content: start;
    box-shadow: var(--lift);
    transition: transform var(--dur) var(--ease-out);
  }

  .note:nth-child(3n+1) { rotate: -0.7deg; }
  .note:nth-child(3n+2) { rotate: 0.5deg; translate: 0 var(--sp-xs); }
  .note:nth-child(3n)   { rotate: -0.3deg; }
  .note:hover { rotate: 0deg; transform: translateY(-4px); }

  .note p { font-size: var(--fs-sm); line-height: 1.6; }
  .note footer { font-size: var(--fs-2xs); color: var(--ink-faint); }
  .note__stars { display: flex; gap: 0.12rem; color: var(--ochre-deep); }
  .note__stars svg { inline-size: 0.85rem; }

  /* ------------------------------------------------------------- recenzii
     Cartonașul întreg e o legătură spre recenzia de pe Google sau Facebook. */
  .note--review {
    text-decoration: none;
    color: inherit;
  }

  /* Sigla sursei, deasupra textului. Facebook e un cerc plin, Google o literă
     decupată — la aceeași înălțime, cercul pare mai greu, deci e puțin mai mic. */
  .note__brand { display: flex; }

  .note__logo {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
  }

  .note__logo--facebook { inline-size: 1.35rem; block-size: 1.35rem; }

  /* Semnătura: poza rotundă a părintelui, apoi numele. Stă lipită de talpa
     cartonașului (`margin-block-start: auto`) — recenziile au lungimi foarte
     diferite, iar semnăturile aliniate pe un rând țin rândul de cartonașe
     legat, în loc să plutească fiecare la altă înălțime. */
  .note--review footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem var(--sp-xs);
    margin-block-start: auto;
    padding-block-start: var(--sp-sm);
    border-block-start: 1px solid var(--rule);
  }

  /* Discul e desenat de <span>, nu de <img>: rămâne perfect rotund și la locul
     lui și când poza încă nu există (`data-optional` scoate imaginea ruptă). */
  .note__face {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ochre-wash);
    box-shadow: inset 0 0 0 1px var(--rule);
    display: grid;
    place-items: center;
  }

  .note__face img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .note__who {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.006em;
  }

  .note__source {
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--fs-3xs);
    color: var(--clay-deep);
    white-space: nowrap;
  }

  .note--review:hover .note__source { text-decoration: underline; }

  /* Un cartonaș fără text de recenzie nu are ce căuta în pagină. Se ascunde
     singur, cât timp <p> e gol — așa nu poate ajunge un text de probă sau un
     cartonaș pe jumătate completat sub ochii unui părinte. Se afișează în
     clipa în care cineva scrie recenzia adevărată înăuntru. */
  .note--gol:has(p:empty) { display: none; }

  /* Subsolul cartonașului dispare cât timp n-are un nume în el. */
  .note--review footer:has(.note__who:empty) { display: none; }

  /* Trei pe primul rând, două pe al doilea. Grila are șase coloane: primele
     trei cartonașe iau două fiecare, ultimele două iau trei fiecare. Sub
     62em rămâne curgerea obișnuită, unul sub altul sau două pe rând. */
  @media (min-width: 62em) {
    .reviews .notes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .reviews .note:nth-child(-n+3) { grid-column: span 2; }
    .reviews .note:nth-child(n+4)  { grid-column: span 3; }
  }

  /* Secțiunea nu mai are panou, deci sub cartonașe trece fundalul colorat al
     paginii. Ca textul să rămână la fel de lizibil, cartonașele sunt pline,
     fără pic de transparență, și cu o umbră ceva mai apăsată.

     Aici cartonașele stau drepte, nu înclinate ca bilețelele prinse în ac:
     sunt recenzii adevărate, semnate cu poză și nume, iar rândul de semnături
     se citește ca un rând doar dacă marginile de jos sunt paralele. Rândul al
     treilea (textul recenziei) ia tot spațiul rămas, așa că semnătura cade la
     talpa cartonașului, la aceeași înălțime pe tot rândul. */
  .reviews .note {
    background: var(--surface-raised);
    border-color: var(--rule-strong);
    box-shadow: var(--lift-lg);
    rotate: 0deg;
    translate: none;
    grid-template-rows: auto auto 1fr auto;
  }

  /* Cât timp niciun cartonaș n-are text, secțiunea întreagă se ascunde —
     altfel ar rămâne un titlu („Ce spun părinții”) cu gol dedesubt. Reapare
     singură la prima recenzie scrisă. */
  .reviews:not(:has(.note--review p:not(:empty))) { display: none; }

  /* ================================================================ journal */
  .entries { border-block-start: 1px solid var(--rule); }

  .entry {
    display: grid;
    gap: 0.3rem var(--sp-md);
    padding-block: var(--sp-md);
    border-block-end: 1px solid var(--rule);
    position: relative;
    transition: background-color var(--dur) var(--ease-out);
  }

  @media (min-width: 48em) {
    .entry {
      grid-template-columns: 7.5rem minmax(0, 1fr) auto;
      align-items: baseline;
      padding-inline: var(--sp-xs);
      margin-inline: calc(var(--sp-xs) * -1);
      border-radius: var(--r-sm);
    }
    .entry:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }
  }

  .entry__date {
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-ghost);
    font-variant-numeric: tabular-nums;
  }

  .entry__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 450;
    letter-spacing: -0.022em;
    line-height: 1.2;
  }

  .entry__title a { text-decoration: none; }
  .entry__title a::after { content: ""; position: absolute; inset: 0; }
  .entry:hover .entry__title { color: var(--clay-deep); }

  /* Archive rows are a record, not a link — don't offer a hover they can't honour. */
  .entry--paper { cursor: default; }
  .entry--paper:hover { background: none; }
  .entry--paper .entry__title { font-size: var(--fs-lg); color: var(--ink-soft); }

  .entry__meta { font-size: var(--fs-2xs); color: var(--ink-ghost); }
  .entry__excerpt { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--ink-faint); max-inline-size: 58ch; }

  @media (min-width: 48em) {
    .entry__excerpt { grid-column: 2 / 3; }
  }

  /* ================================================================ faq */
  .faq { border-block-start: 1px solid var(--rule); }

  .faq details {
    border-block-end: 1px solid var(--rule);
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding-block: var(--sp-sm);
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-md);
    font-weight: 550;
    letter-spacing: -0.012em;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--clay-deep); }

  .faq summary::after {
    content: "";
    inline-size: 0.95rem;
    block-size: 0.95rem;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M1.5 8h13' stroke='%23000' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M1.5 8h13' stroke='%23000' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur) var(--ease-spring);
  }

  .faq details[open] summary::after { transform: rotate(135deg); }

  .faq__body {
    padding-block-end: var(--sp-md);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.62;
    max-inline-size: 60ch;
  }

  .faq details[open] .faq__body {
    animation: faq-in 380ms var(--ease-out) both;
  }

  @keyframes faq-in {
    from { opacity: 0; transform: translateY(-0.35rem); }
  }

  /* ================================================================ form */
  .form { display: grid; gap: var(--sp-md); }

  .field { position: relative; display: grid; gap: 0.4rem; }

  .field > label {
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .field input,
  .field select,
  .field textarea {
    inline-size: 100%;
    padding: 0.85rem 1rem;
    background: var(--surface-raised);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }

  .field textarea { resize: vertical; min-block-size: 6.5rem; line-height: 1.55; }

  .field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%233b4d43' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.72rem;
    padding-inline-end: 2.4rem;
  }

  .field :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--clay);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--clay) 18%, transparent);
  }

  .field__hint { font-size: var(--fs-2xs); color: var(--ink-ghost); }

  .field__error {
    font-size: var(--fs-2xs);
    color: var(--clay-deep);
    font-weight: 600;
    display: none;
  }

  .field[data-invalid="true"] :is(input, select, textarea) {
    border-color: var(--clay-deep);
    background: color-mix(in oklab, var(--clay) 6%, var(--surface-raised));
  }
  .field[data-invalid="true"] .field__error { display: block; }

  .form__row {
    display: grid;
    gap: var(--sp-md);
  }
  @media (min-width: 38em) {
    .form__row { grid-template-columns: repeat(2, 1fr); }
  }

  .form__note {
    font-size: var(--fs-2xs);
    color: var(--ink-faint);
    line-height: 1.5;
  }

  .form__done {
    display: none;
    padding: var(--sp-md);
    border: 1px solid var(--sage-deep);
    border-radius: var(--r-md);
    background: var(--sage-wash);
    color: var(--ink);
    font-size: var(--fs-sm);
  }

  /* Panoul de eșec: aceeași formă, dar în lut, ca să nu semene cu o reușită.
     `[hidden]` îl ține deoparte până se știe cum a mers trimiterea. */
  .form__fail {
    display: none;
    padding: var(--sp-md);
    border: 1px solid var(--clay);
    border-radius: var(--r-md);
    background: var(--clay-wash);
    color: var(--ink);
    font-size: var(--fs-sm);
  }

  .form__fail a { color: var(--clay-deep); }

  .form[data-sent="true"] .form__done:not([hidden]) { display: block; }
  .form[data-sent="true"] .form__fail:not([hidden]) { display: block; }
  .form[data-sent="true"] .form__body { display: none; }

  /* Honeypot */
  .form__trap {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ================================================================ misc */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.32em 0.75em;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .pill--ochre { background: var(--ochre-wash); border-color: transparent; color: var(--clay-deep); }
  .pill--sage  { background: var(--sage-wash);  border-color: transparent; color: var(--sage-deep); }

  .figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr));
    gap: var(--sp-md);
  }

  .figure { display: grid; gap: 0.28rem; }

  .figure__n {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 420;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: lining-nums;
    font-variation-settings: "SOFT" 34, "WONK" 1, "opsz" 100;
  }

  .figure__l {
    font-size: var(--fs-2xs);
    color: color-mix(in oklab, currentColor 62%, transparent);
    letter-spacing: 0.05em;
    line-height: 1.4;
  }

  /* Hand-drawn annotation on a word. */
  .marked {
    position: relative;
    white-space: nowrap;
  }

  .marked > svg {
    position: absolute;
    inset-block-end: -0.16em;
    inset-inline-start: -0.03em;
    inline-size: 103%;
    block-size: 0.46em;
    overflow: visible;
    color: var(--ochre);
    pointer-events: none;
  }

  .marked > svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: var(--len, 420);
    stroke-dashoffset: var(--len, 420);
  }

  .marked.is-drawn > svg path {
    animation: draw 900ms var(--ease-out) forwards;
  }

  @keyframes draw { to { stroke-dashoffset: 0; } }

  /* Reveal on scroll — small, quiet, staggered. */
  .reveal {
    opacity: 0;
    transform: translateY(1.15rem);
    transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .reveal.is-in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    .marked > svg path { stroke-dashoffset: 0; }
  }

  /* No-JS safety net. */
  .no-js .reveal { opacity: 1; transform: none; }

  /* ================================================================== play
     Small rewards for moving the pointer around. Everything here is additive —
     nothing depends on it to be legible, and all of it is switched off under
     prefers-reduced-motion or on coarse pointers. */

  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

    /* The artwork leans towards the cursor. Angles come from site.js. */
    .hero__art { perspective: 1000px; }

    .hero__arch {
      transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
      transition: transform 420ms var(--ease-out);
    }

    /* The seal picks up speed when you go near it. */
    .hero__art:hover .seal__ring { animation-duration: 9s; }
    .seal__ring { transition: none; }

    /* Room illustrations breathe on hover. */
    .room:hover .room__swatch img {
      transform: scale(1.045) rotate(-0.5deg);
    }
    .room__swatch img { transition: transform 700ms var(--ease-out); }

    /* Hero figures lift one at a time. */
    .hero__figures .figure { transition: transform var(--dur) var(--ease-spring); }
    .hero__figures .figure:hover { transform: translateY(-3px); }

    /* The time on a timetable row steps forward with the row. */
    .rhythm__row .rhythm__time { transition: transform var(--dur) var(--ease-spring); }
    .rhythm__row:hover .rhythm__time { transform: translateX(3px); }

    /* Tenet numbers tip over. */
    .tenet::before {
      display: inline-block;
      transition: transform var(--dur-slow) var(--ease-spring);
    }
    .tenet:hover::before { transform: rotate(-12deg) translateY(-2px); }
  }

  /* Leaves thrown by the logo. Positioned and coloured from script. */
  .leaf {
    position: fixed;
    z-index: 890;
    pointer-events: none;
    inline-size: var(--leaf-size, 16px);
    aspect-ratio: 1;
    background: var(--leaf-colour, var(--sage));
    border-radius: 0 100% 0 100%;
    will-change: transform, opacity;
    animation: leaf-fall var(--leaf-life, 2200ms) cubic-bezier(0.32, 0.12, 0.44, 1) forwards;
  }

  @keyframes leaf-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate3d(var(--leaf-dx, 0px), var(--leaf-dy, 220px), 0)
                      rotate(var(--leaf-spin, 220deg)); opacity: 0; }
  }

  .rule { border-block-start: 1px solid var(--rule); }

  /* Ridicat peste butonul de WhatsApp, care stă în același colț. */
  .to-top {
    position: fixed;
    inset-block-end: calc(var(--sp-md) + 4rem);
    inset-inline-end: var(--sp-md);
    z-index: 400;
    inline-size: 2.9rem;
    block-size: 2.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--lift);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.7rem) scale(0.9);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring),
                visibility 0s linear var(--dur);
  }

  .to-top[data-show="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .to-top svg { inline-size: 1rem; }

  /* ================================================================= bandă
     Anunțul de înscrieri. Stă înaintea antetului și derulează odată cu
     pagina — antetul lipicios rămâne singurul lucru care se agață sus. */
  .banner {
    position: relative;
    z-index: 510;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs) var(--sp-md);
    padding: 0.72rem calc(var(--gutter) + 2.6rem) 0.72rem var(--gutter);
    background: var(--moss);
    color: #f6fbf6;
    font-size: var(--fs-2xs);
    text-align: center;
    transition: opacity var(--dur) var(--ease-out);
  }

  .banner[data-closing="true"] { opacity: 0; }

  .banner-off .banner { display: none; }

  .banner__text { letter-spacing: 0.02em; }
  .banner__text strong { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

  .banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.9em;
    border: 1px solid color-mix(in oklab, #fff 55%, transparent);
    border-radius: var(--r-pill);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }

  .banner__cta:hover { background: #f6fbf6; border-color: #f6fbf6; color: var(--moss-deep); }

  .banner__close {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--gutter) - 0.4rem);
    translate: 0 -50%;
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                transform var(--dur) var(--ease-spring);
  }

  .banner__close:hover { background: color-mix(in oklab, #000 14%, transparent); transform: rotate(90deg); }
  .banner__close svg { inline-size: 0.8rem; }

  /* Pe telefon textul se rupe oricum pe două rânduri, deci strângem restul ca
     banda să nu mănânce un sfert din prima fereastră. */
  @media (max-width: 34em) {
    .banner {
      padding-block: 0.55rem;
      padding-inline: var(--gutter) calc(var(--gutter) + 1.9rem);
      gap: 0.35rem 0.7rem;
      font-size: var(--fs-3xs);
    }
    .banner__cta { padding: 0.28em 0.75em; }
    .banner__close { inset-inline-end: calc(var(--gutter) - 0.55rem); }
  }

  /* ========================================================= rețele sociale
     Bordura și fundalul se iau din `currentColor`, deci aceleași butoane merg
     și peste filmul din erou (text de hârtie), și în subsolul de cerneală. */
  .socials {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .social {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, currentColor 36%, transparent);
    color: inherit;
    text-decoration: none;
    transition: transform var(--dur) var(--ease-spring),
                border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }

  .social:hover {
    border-color: currentColor;
    background: color-mix(in oklab, currentColor 14%, transparent);
    transform: translateY(-2px);
  }

  .social svg { inline-size: 1.15rem; block-size: 1.15rem; }

  /* ============================================================== lightbox */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 620;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: color-mix(in oklab, var(--ink) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out),
                visibility 0s linear var(--dur);
  }

  .lightbox[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .lightbox__frame {
    display: grid;
    gap: var(--sp-sm);
    justify-items: center;
    max-inline-size: min(100%, 30rem);
  }

  .lightbox__frame video {
    inline-size: 100%;
    max-block-size: calc(100svh - 8rem);
    border-radius: var(--r-lg);
    background: #000;
    box-shadow: var(--lift-lg);
  }

  .lightbox__frame figcaption {
    font-size: var(--fs-xs);
    color: color-mix(in oklab, var(--paper) 78%, transparent);
    text-align: center;
  }

  .lightbox__close {
    position: absolute;
    inset-block-start: var(--sp-md);
    inset-inline-end: var(--gutter);
    inline-size: 2.8rem;
    block-size: 2.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--paper) 34%, transparent);
    color: var(--paper);
    cursor: pointer;
    transition: transform var(--dur) var(--ease-spring),
                background-color var(--dur-fast) var(--ease-out);
  }

  .lightbox__close:hover {
    background: color-mix(in oklab, var(--paper) 14%, transparent);
    transform: rotate(90deg);
  }

  .lightbox__close svg { inline-size: 1rem; }

  /* --------------------------------------------------- galeria de fotografii
     Aceeași fereastră ca la filme, dar cu o fotografie în ea și cu săgeți în
     lateral. Rama e mai largă: o fotografie are ce arăta. */
  .lightbox--photo .lightbox__frame {
    max-inline-size: min(100%, 64rem);
    gap: var(--sp-xs);
  }

  .lightbox__photo {
    inline-size: auto;
    max-inline-size: 100%;
    /* Lasă loc sus pentru butonul de închidere și jos pentru descriere. */
    max-block-size: calc(100svh - 10rem);
    border-radius: var(--r-lg);
    box-shadow: var(--lift-lg);
    background: color-mix(in oklab, var(--ink) 40%, transparent);
  }

  /* Descrierea și numărul, unul sub altul și centrate — la fel sub fotografii
     și sub filme. */
  .lightbox__frame figcaption {
    display: grid;
    gap: 0.15rem;
    justify-items: center;
  }

  .lightbox__count {
    font-size: var(--fs-3xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--paper) 52%, transparent);
    font-variant-numeric: lining-nums;
  }

  /* Săgețile apar doar când e unde te duce: `--nav` se pune din site.js, când
     în grilă sunt cel puțin două lucruri. Filmul zilei, singur în coloana lui
     de pe prima pagină, se deschide fără ele. */
  .lightbox:not(.lightbox--nav) .lightbox__nav { display: none; }

  .lightbox__nav {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    inline-size: 3rem;
    block-size: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--paper) 34%, transparent);
    background: color-mix(in oklab, var(--ink) 55%, transparent);
    color: var(--paper);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                transform var(--dur) var(--ease-spring);
  }

  .lightbox__nav:hover { background: color-mix(in oklab, var(--paper) 18%, transparent); }
  .lightbox__nav svg { inline-size: 1.15rem; }

  .lightbox__nav--prev { inset-inline-start: var(--gutter); }
  .lightbox__nav--next { inset-inline-end: var(--gutter); }
  /* Aceeași săgeată, întoarsă. */
  .lightbox__nav--next svg { scale: -1 1; }

  .lightbox__nav--prev:hover { transform: translateX(-2px); }
  .lightbox__nav--next:hover { transform: translateX(2px); }

  /* Pe ecran îngust săgețile nu mai încap în lateral fără să stea peste
     fotografie: coboară sub ea, una lângă alta. Ce e deasupra lor se strânge
     cu atât cât le trebuie — dar numai când chiar sunt pe ecran. */
  @media (max-width: 40em) {
    .lightbox__nav {
      inset-block-start: auto;
      inset-block-end: var(--sp-md);
      translate: 0;
      inline-size: 2.75rem;
      block-size: 2.75rem;
    }
    .lightbox__nav--prev { inset-inline-start: calc(50% - 3.4rem); }
    .lightbox__nav--next { inset-inline-end: calc(50% - 3.4rem); }

    .lightbox--nav .lightbox__photo,
    .lightbox--nav .lightbox__frame video { max-block-size: calc(100svh - 14rem); }
  }

  /* ============================================================== WhatsApp
     Butonul plutitor și fereastra de compunere. Nu trimite nimic singur:
     deschide WhatsApp cu mesajul deja scris. Injectat de site.js. */
  .wa {
    position: fixed;
    inset-block-end: var(--sp-md);
    inset-inline-end: var(--sp-md);
    z-index: 460;
    display: grid;
    justify-items: end;
    gap: var(--sp-sm);
    --wa-green: #1f7a4c;
    --wa-green-deep: #185f3b;

    /* Panoul închis e `visibility: hidden`, ceea ce îl ascunde dar îi păstrează
       locul în așezare — containerul rămâne un dreptunghi de vreo 336×574px,
       fixat în colț. Transparent, dar nu invizibil pentru mouse: fără linia de
       mai jos înghițea clicurile pe butoanele din ultima coloană a subsolului.
       Containerul lasă clicurile să treacă, iar copiii și le iau înapoi. */
    pointer-events: none;
  }

  .wa__launch,
  .wa__panel { pointer-events: auto; }

  .wa__launch {
    inline-size: 3.4rem;
    block-size: 3.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wa-green);
    color: #fff;
    box-shadow: var(--lift);
    cursor: pointer;
    transition: transform var(--dur) var(--ease-spring),
                background-color var(--dur-fast) var(--ease-out);
  }

  .wa__launch:hover { background: var(--wa-green-deep); transform: translateY(-3px) scale(1.04); }
  .wa__launch svg { inline-size: 1.6rem; }
  .wa__launch-close { display: none; inline-size: 1.05rem !important; }

  .wa[data-open="true"] .wa__launch-icon { display: none; }
  .wa[data-open="true"] .wa__launch-close { display: block; }

  /* Un puls discret, o singură dată la câteva secunde, ca să fie observat. */
  .wa__launch::after {
    content: "";
    position: absolute;
    inline-size: 3.4rem;
    block-size: 3.4rem;
    border-radius: 50%;
    border: 2px solid var(--wa-green);
    animation: wa-pulse 3.4s var(--ease-out) infinite;
    pointer-events: none;
  }

  .wa[data-open="true"] .wa__launch::after { animation: none; opacity: 0; }

  @keyframes wa-pulse {
    0%   { opacity: 0.55; transform: scale(1); }
    55%  { opacity: 0; transform: scale(1.55); }
    100% { opacity: 0; transform: scale(1.55); }
  }

  @media (prefers-reduced-motion: reduce) {
    .wa__launch::after { animation: none; opacity: 0; }
  }

  .wa__panel {
    inline-size: min(21rem, calc(100vw - var(--sp-md) * 2));
    display: grid;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--rule-strong);
    box-shadow: var(--lift-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.9rem) scale(0.97);
    transform-origin: 100% 100%;
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring),
                visibility 0s linear var(--dur);
  }

  .wa[data-open="true"] .wa__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .wa__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-sm);
    background: var(--wa-green);
    color: #fff;
  }

  .wa__avatar {
    inline-size: 2.2rem;
    block-size: 2.2rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in oklab, #fff 22%, transparent);
  }

  .wa__avatar svg { inline-size: 1.3rem; }

  .wa__who { display: grid; line-height: 1.25; }
  .wa__who strong { font-size: var(--fs-xs); font-weight: 600; }
  .wa__who span { font-size: var(--fs-3xs); opacity: 0.82; }

  .wa__close {
    margin-inline-start: auto;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  .wa__close:hover { background: color-mix(in oklab, #000 16%, transparent); }
  .wa__close svg { inline-size: 0.75rem; }

  .wa__body {
    display: grid;
    gap: var(--sp-sm);
    padding: var(--sp-sm);
    background: var(--paper-warm);
    max-block-size: 17rem;
    overflow-y: auto;
  }

  .wa__bubble {
    position: relative;
    padding: 0.7rem 0.85rem;
    border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
    background: var(--surface-raised);
    box-shadow: var(--lift);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-soft);
  }

  .wa__chips { display: grid; gap: 0.4rem; justify-items: end; }

  .wa__chip {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--wa-green);
    border-radius: var(--r-md) 0 var(--r-md) var(--r-md);
    background: color-mix(in oklab, var(--wa-green) 8%, transparent);
    color: var(--ink);
    font-size: var(--fs-2xs);
    text-align: end;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }

  .wa__chip:hover {
    background: color-mix(in oklab, var(--wa-green) 18%, transparent);
    transform: translateX(-2px);
  }

  .wa__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: end;
    padding: var(--sp-sm);
    border-block-start: 1px solid var(--rule);
  }

  .wa__form textarea {
    inline-size: 100%;
    resize: none;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    font-size: var(--fs-xs);
    line-height: 1.45;
  }

  .wa__form textarea:focus {
    outline: none;
    border-color: var(--wa-green);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--wa-green) 18%, transparent);
  }

  .wa__send {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wa-green);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }

  .wa__send:hover { background: var(--wa-green-deep); transform: scale(1.06); }
  .wa__send svg { inline-size: 0.95rem; }

  .wa__note {
    padding: 0 var(--sp-sm) var(--sp-sm);
    font-size: var(--fs-3xs);
    color: var(--ink-ghost);
    text-align: center;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .wa__note[data-tone="ok"]  { color: var(--wa-green); font-weight: 600; }
  .wa__note[data-tone="bad"] { color: var(--clay-deep); font-weight: 600; }

  .wa[data-sending="true"] .wa__send { opacity: 0.55; cursor: progress; }
  .wa__send:disabled { pointer-events: none; }

  /* Sub 26em panoul se lipește de marginile ecranului. */
  @media (max-width: 26em) {
    .wa { inset-inline: var(--sp-sm); justify-items: end; }
    .wa__panel { inline-size: 100%; }
  }
}

/* ================================================================ utilities */
@layer utilities {
  /* No-JS fallbacks.

     These live in `utilities` rather than next to the components they override
     because layer order beats specificity: `.no-js .burger` sitting in `layout`
     would still lose to `.burger` in `components`, however specific it is.

     The dashboard the burger opens is built by script, so without JS there is
     nothing behind that button — show the nav inline and hide the button. */
  .no-js .masthead__nav { display: flex; flex-wrap: wrap; margin-inline-start: auto; }

  /* The <noscript> wrapper becomes the flex item when scripting is off, so the
     auto margin belongs on it rather than on the nav inside.

     Deliberately not `display: contents` here: with scripting *on* the parser
     leaves the noscript's contents as a raw text node, so anything that un-hides
     it spills markup into the header. Margin is inert either way. */
  .no-js .masthead__inner > noscript { margin-inline-start: auto; }
  .no-js .burger,
  .no-js .drawer,
  .no-js .dash { display: none; }

  .u-center     { text-align: center; }
  .u-measure    { max-inline-size: var(--measure); }
  .u-measure-sm { max-inline-size: 46ch; }
  .u-mt-lg      { margin-block-start: var(--sp-lg); }
  .u-mt-xl      { margin-block-start: var(--sp-xl); }
  .u-mt-2xl     { margin-block-start: var(--sp-2xl); }
  .u-clay       { color: var(--clay-deep); }
  .u-faint      { color: var(--ink-faint); }
  .u-display    { font-family: var(--font-display); }

  .u-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}