/* Shared, stable navigation: hover changes the typeface, never the line count. */
.hdr {
  display:flex; align-items:flex-start; gap:calc(20 * var(--u));
  padding:calc(8 * var(--u)) calc(16 * var(--u)); height:auto;
}
.hdr .a { display:flex; align-items:flex-start; position:static; width:auto; white-space:nowrap; min-height:44px; }
.hdr > a:first-child { margin-right:auto; }
.hdr .celebrities-link { width:max(120px, calc(130 * var(--u))); }
.hdr .info-btn { width:max(120px, calc(114 * var(--u))); }
.hdr .t20 { font-size:clamp(20px, calc(20 * var(--u)), 32px); line-height:1.2; }
@media(hover:hover) and (pointer:fine) {
  .hdr .sw:hover, .hdr .sw:focus-visible, .hdr .sw[aria-expanded="true"] {
    font-size:clamp(19px, calc(19 * var(--u)), 30.4px);
  }
}
.info-close, .info-x { white-space:nowrap; }
/* Flowing sections stay legible on phones/tablets, including landscape and large text. */
@media(max-width:1023px) {
  .info {
    --panel-u:clamp(1px, calc(100vw / 320), 1.25px);
    position:fixed; inset:0; height:auto; z-index:40; background:var(--bg);
    overflow-y:auto; overscroll-behavior:contain;
    padding:calc(64 * var(--panel-u) + env(safe-area-inset-top, 0px)) max(calc(16 * var(--panel-u)), env(safe-area-inset-right, 0px)) max(calc(32 * var(--panel-u)), env(safe-area-inset-bottom, 0px)) max(calc(16 * var(--panel-u)), env(safe-area-inset-left, 0px));
    opacity:0; transform:translateY(8px);
    transition:opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms;
  }
  .info.open { opacity:1; transform:none; transition:opacity 280ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s; }
  .info > .a, .info.open > .a { opacity:1; transform:none; transition:none; }
  .info .mb { display:block; }
  .info .info-block {
    position:static; width:100%; max-width:40rem;
    margin:0 auto calc(24 * var(--panel-u));
    font-size:max(14px, calc(12 * var(--panel-u))); line-height:max(20px, calc(16 * var(--panel-u)));
  }
  .info .info-block:last-child { margin-bottom:0; }
  .info .info-close, .info .info-x {
    top:calc(8 * var(--panel-u) + env(safe-area-inset-top, 0px));
    display:flex; align-items:flex-start; width:auto; min-height:44px; font-size:calc(20 * var(--panel-u)); line-height:1.2;
  }
  .info .info-close { left:max(calc(16 * var(--panel-u)), env(safe-area-inset-left, 0px)); }
  .info .info-x { left:auto; right:max(calc(16 * var(--panel-u)), env(safe-area-inset-right, 0px)); }
}
@media(max-width:1023px) and (hover:hover) and (pointer:fine) {
  .info .info-close:hover, .info .info-close:focus-visible,
  .info .info-x:hover, .info .info-x:focus-visible { font-size:calc(19 * var(--panel-u)); }
}
@media(max-width:699px) {
  .hdr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px; padding:8px max(16px, calc(16 * var(--u))); }
  .hdr .t20 { font-size:clamp(20px, calc(20 * var(--u)), 25px); }
  .hdr .celebrities-link { grid-column:1; grid-row:2; width:auto; }
  .hdr .info-btn { grid-column:2; grid-row:1; width:auto; }
}
@media(max-width:699px) and (hover:hover) and (pointer:fine) {
  .hdr .sw:hover, .hdr .sw:focus-visible, .hdr .sw[aria-expanded="true"] { font-size:clamp(19px, calc(19 * var(--u)), 23.75px); }
}
@media(prefers-reduced-motion:reduce) { .info, .info.open { transform:none; transition:none; } }

/* Repeated keyboard actions never wait for decorative transitions. */
.keyboard-mode *, .keyboard-mode *::before, .keyboard-mode *::after {
 transition:none !important; animation:none !important;
}
.site-footer {
 display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 28px;
 padding:0 calc(16 * var(--u)) max(80px, calc(72 * var(--u)));
 font-size:clamp(14px, calc(12 * var(--u)), 18px); line-height:1.5;
}
.site-footer a { display:inline-flex; align-items:center; min-height:44px; }
.footer-profile { flex-basis:100%; }
.footer-profile nav { display:flex; flex-wrap:wrap; gap:8px 28px; }
.work-link:focus-visible { outline:1px solid currentColor; outline-offset:4px; }
@media(hover:hover) and (pointer:fine) { .work-link:hover { text-decoration:underline; text-underline-offset:3px; } }
@media(max-width:699px) {
 .site-footer { flex-direction:column; align-items:flex-start; gap:4px; }
 .site-footer > span { margin-bottom:4px; }
}

/* Only the label responds; the 44px hit area stays still. */
.press-label {
 display:inline-block; transform-origin:center;
 transition:transform 160ms var(--ease-out), opacity 100ms ease;
}
html:not(.keyboard-mode) :is(.info-btn, .info-x).is-pressed .press-label {
 transform:scale(.97); transition:none;
}
@media(prefers-reduced-motion:reduce) {
 .press-label { transition:opacity 100ms ease; }
 html:not(.keyboard-mode) :is(.info-btn, .info-x).is-pressed .press-label {
  transform:none; opacity:.8;
 }
}