@layer reset, base, site, layout, shell;

@layer shell {
  :root {
    --journal-bg: #f4f3f0;
    --journal-paper: #fcfbf8;
    --journal-glass-tint: transparent;
    --dock-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }
  :root[data-theme="dark"] { --journal-bg: #141820; --journal-paper: #1b2029; --journal-glass-tint: rgba(0, 0, 0, .40); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --journal-bg: #141820; --journal-paper: #1b2029; --journal-glass-tint: rgba(0, 0, 0, .40); }
  }

  .site-shell { position: relative; isolation: isolate; min-height: 100svh; padding-bottom: 0.01px; }
  /* 05 WebGL cannot observe compositor-only rubber-band displacement.
     Disable both axes on rain routes, leaving ordinary native scrolling intact.
     No wheel interception or custom bounce is used. */
  html[data-rain-glass="regular-05"],
  html[data-rain-glass="regular-05"] body { overscroll-behavior: none; }
  /* Native section snapping; the oversized main area remains freely scrollable.
     The footer has an end stop so mandatory snapping cannot hide it. */
  html[data-blog-landing] { scroll-snap-type: y mandatory; }
  /* Route restoration is instant; do not snap through the landing mid-layout. */
  html[data-rain-route-pending] { scroll-snap-type: none; overflow-anchor: none; scroll-behavior: auto; }
  html[data-rain-route-pending] .blog-landing__intro { visibility: hidden !important; }
  html[data-blog-landing] .blog-landing {
    scroll-snap-align: start;
    scroll-margin-top: var(--header-height);
  }
  html[data-blog-landing] .shared-page-layout {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  html[data-blog-landing] .site-footer {
    scroll-snap-align: end;
    /* Include the footer's bottom margin so the snap lands at the document end
       instead of pulling the page back up by that trailing space. */
    scroll-margin-bottom: var(--space-4);
  }
  .rain-scene-poster {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background: #708493 url('/rain-effect/img/city.jpg') center / cover no-repeat;
  }
  :root[data-theme="dark"] .rain-scene-poster {
    background: #111c46 url('/rain-effect/img/rain-scene-78302689.jpg') center / cover no-repeat;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rain-scene-poster {
      background: #111c46 url('/rain-effect/img/rain-scene-78302689.jpg') center / cover no-repeat;
    }
  }
  .site-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: none;
    opacity: 0;
    transition: opacity 420ms ease;
  }
  .site-shell:is([data-section="blog"], [data-section="friends"])::before { opacity: 1; }
  .site-shell:is([data-section="blog"], [data-section="friends"], [data-section="about"])::before {
    background: none;
  }

  :root { --header-height: 4.875rem; }
  .site-header { align-items: start; min-height: var(--header-height); }
  .dock-viewport {
    --dock-cell: 4.5rem;
    --dock-inset: 0.375rem;
    --dock-height: calc(2.5rem + var(--dock-inset) * 2 + 2px);
    --core-width: 16.5rem;
    --mini-gap: 0.5rem;
    --mini-height: 2.75rem;
    --core-height: var(--dock-height);
    --core-top: 0px;
    --wing-width: calc(var(--dock-cell) + var(--dock-inset) * 2 + 2px);
    --wing-gap: 1rem;
    --section-gap: 2rem;
    --core-offset: calc((var(--wing-width) + var(--wing-gap)) / -2);
    --wing-shift: calc(var(--core-width) / 2 + var(--section-gap) + var(--wing-width) - var(--dock-cell) * 1.5 + var(--wing-gap) / 2);
    --dock-motion: 380ms;
    --dock-spring: cubic-bezier(0.22, 1.12, 0.36, 1);
    --spread-width: calc(var(--core-width) + var(--wing-width) * 3 + var(--section-gap) * 2 + var(--wing-gap));
    grid-column: 2;
    justify-self: center;
    width: calc(var(--dock-cell) * 4 + var(--dock-inset) * 2 + 2px);
    height: var(--dock-height);
  }
  .dock-track { display: flex; justify-content: center; }
  .dock-cluster {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    width: calc(var(--dock-cell) * 4 + var(--dock-inset) * 2 + 2px);
    height: var(--dock-height);
  }
  .primary-dock { position: relative; height: 100%; }
  .dock-bridge {
    position: absolute;
    inset: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
    box-shadow: 0 4px 18px rgba(21, 31, 56, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: clamp(0, 1 - var(--dock-progress) * 4, 1);
    transform: scaleX(calc(1 - var(--dock-progress) * 0.25));
  }
  .primary-dock > ul { margin: 0; padding: 0; list-style: none; }
  .dock-item {
    position: absolute;
    z-index: 3;
    top: calc(var(--dock-inset) + 1px);
    width: var(--dock-cell);
  }
  .dock-item--blog { left: calc(var(--dock-inset) + 1px); }
  .dock-item--projects { left: calc(var(--dock-inset) + 1px + var(--dock-cell)); z-index: 5; }
  .dock-item--friends { left: calc(var(--dock-inset) + 1px + var(--dock-cell) * 2); }
  .dock-item--about { right: calc(var(--dock-inset) + 1px); }
  .dock-link {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.4rem 0.25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color 180ms ease, background-color 240ms ease, border-color 240ms ease;
  }
  .dock-wing-glass {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(-1 * var(--dock-inset) - 1px);
    border: 1px solid var(--border);
    border-radius: inherit;
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
    box-shadow: 0 6px 24px rgba(21, 31, 56, 0.12), inset 0 1px 0 color-mix(in srgb, var(--border) 65%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    transition: opacity 220ms ease, transform 160ms var(--dock-ease);
  }
  @media (hover: hover) {
    .dock-link:hover { color: var(--text); border-color: var(--border); }
  }
  .dock-cluster--expanded .dock-link:active .dock-wing-glass { transform: scale(0.97); transition-duration: 80ms; }
  .dock-link[aria-current] { color: var(--text); background: var(--surface-subtle); border-color: var(--border); }
  .dock-item--blog { transform: translateX(calc(-1 * var(--wing-shift) * var(--dock-progress))); }
  /* Balance the whole expanded row, including both items on its right. */
  .dock-item--projects { transform: translateX(calc((var(--core-offset) + var(--dock-cell) / 2) * var(--dock-progress))); }
  .dock-item--friends { transform: translateX(calc((var(--core-width) / 2 + var(--section-gap) - var(--wing-gap) / 2 - var(--dock-cell) / 2) * var(--dock-progress))); }
  .dock-item--about { transform: translateX(calc(var(--wing-shift) * var(--dock-progress))); }
  .dock-cluster--expanded :is(.dock-item--blog, .dock-item--friends, .dock-item--about) .dock-wing-glass { opacity: 1; }
  .dock-item--projects > .dock-link { opacity: clamp(0, 1 - var(--dock-progress) * 4, 1); }
  .dock-cluster--expanded .dock-item--projects > .dock-link { visibility: hidden; pointer-events: none; }

  /* Smaller independent docks form one secondary group within the main row. */
  .subdock-slot {
    position: absolute;
    z-index: 2;
    top: calc(-1 * (var(--dock-inset) + 1px));
    left: calc(50% - var(--core-width) / 2);
    width: var(--core-width);
    height: var(--dock-height);
    visibility: hidden;
    pointer-events: none;

  }
  .dock-cluster--expanded .subdock-slot { visibility: visible; pointer-events: auto; }
  .dock-cluster--moving .subdock-slot { visibility: visible; }
  .dock-morph { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: calc(clamp(0, var(--dock-progress) * 8, 1) * (1 - clamp(0, (var(--dock-progress) - 0.92) / 0.08, 1))); }
  .dock-morph path { fill: color-mix(in srgb, var(--surface-strong) 76%, transparent); stroke: var(--border-muted); stroke-width: 1px; }

  .project-dock { position: relative; display: flex; align-items: center; width: 100%; height: 100%; }
  .project-dock::before, .project-dock::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px;
    height: 1rem;
    background: var(--border-muted);
    opacity: 0;
    transform: translateY(-50%) scaleY(0.5);
    transition: opacity 200ms ease, transform 360ms var(--dock-ease);
    pointer-events: none;
  }
  .project-dock::before { left: -1.125rem; }
  .project-dock::after { right: -1.125rem; }
  .dock-cluster--expanded .project-dock::before,
  .dock-cluster--expanded .project-dock::after { opacity: 1; transform: translateY(-50%); transition-delay: 220ms; }
  .project-dock ul {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mini-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .project-dock li { min-width: 0; }
  .project-dock a {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--mini-height);
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transform: translateX(calc((1 - var(--dock-progress)) * (1 - var(--mini-index)) * (100% + var(--mini-gap))));
    transition: color 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .dock-mini-glass {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -1px;
    border: 1px solid var(--border-muted);
    border-radius: inherit;
    background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
    box-shadow: 0 2px 8px rgba(21, 31, 56, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: clamp(0, (var(--dock-progress) - 0.92) / 0.08, 1);
    transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--dock-ease);
  }
  .project-dock a > span:not(.dock-mini-glass) { opacity: clamp(0, (var(--dock-progress) - 0.35) / 0.5, 1); }
  .project-dock a[aria-current] { color: var(--text); }
  @media (hover: hover) {
    .project-dock a:hover { color: var(--text); }
    .project-dock a:hover .dock-mini-glass { border-color: var(--border); }
  }
  .project-dock a[aria-current] { font-weight: 600; }
  .project-dock a[aria-current] .dock-mini-glass { border-color: var(--border); }
  .project-dock a[aria-current] { background: var(--surface-subtle); }
  .project-dock a:active .dock-mini-glass { transform: scale(0.96); transition-duration: 80ms; }
  .header-tools { display: flex; align-items: center; gap: var(--space-2); }
  .header-tool-shell { position: relative; isolation: isolate; border-radius: 999px; }
  .dock-tool-glass {
    position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-soft);
  }
  .site-header .header-tool-shell :is(sf-weather, .theme-picker, .language-picker) {
    height: var(--dock-shell-height);
    background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .header-tools-toggle, .header-tools-label { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .dock-cluster *, .dock-cluster *::before, .dock-cluster *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  }

  /* Page transitions are independent of the persistent dock group. */
  .section-page-enter-active { transition: opacity 200ms ease, transform 260ms var(--dock-ease); }
  .section-page-leave-active { transition: opacity 120ms ease; }
  .section-page-enter-from { opacity: 0; transform: translateY(6px); }
  .section-page-leave-to { opacity: 0; }
  /* An opacity < 1 ancestor cuts off the glass's external rain backdrop.
     Keep rain page roots opaque throughout entry/exit, not just at rest.
     The persistent navigation retains its own animation. */
  .rain-page.section-page-enter-active,
  .rain-page.section-page-leave-active { transition: none; }
  .rain-page.section-page-enter-from,
  .rain-page.section-page-leave-to { opacity: 1; transform: none; }
  .site-shell .rain-style-card {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border-muted) 75%, transparent);
    border-radius: var(--radius-xl);
    box-shadow: 0 1.25rem 3.5rem rgba(21, 31, 56, 0.12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Match the client glass's waiting tint before ClientOnly mounts. */
  .site-shell .rain-style-card:not(:has(.rain-glass-surface)) { background: var(--journal-glass-tint, transparent); }
  .site-shell main > .page-content.rain-style-card {
    display: block;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .site-shell main > .page-content.rain-style-card > :is(section, article) {
    background: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .site-shell main > .page-content.rain-style-card > section + section { margin-top: var(--space-8); }
  .site-shell .site-footer { background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  .site-header { isolation: isolate; }
  .site-header.dock-glass-ready .dock-glass-surface {
    background: var(--journal-glass-tint, transparent);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .dock-glass-surface { pointer-events: none; }
  main > .page-content.about-glass-card { position: relative; display: block; padding: clamp(1.25rem, 4vw, 2.5rem); }
  .about-intro { padding-bottom: 2.5rem; }
  .about-intro h1 { margin-block: 0.65rem 1rem; }
  .about-content > section {
    padding: 0; background: none; border: 0; border-radius: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .about-content > section + section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-muted); }
  .about-content > .about-intro + section { padding-top: 2rem; border-top: 1px solid var(--border-muted); }
  .about-glass-card :is(input, textarea) { background: color-mix(in srgb, var(--journal-paper) 82%, transparent); }
  .about-glass-card :is(p, a) { overflow-wrap: anywhere; }
  .site-shell main > .profile-sidebar > .profile-panel,
  .site-shell main > .page-content,
  .site-shell main > .page-content > section,
  .site-shell main > .page-content > article { animation: none; }

  /* 05 samples the rain iframe directly, so the card can fade as one group.
     Keep Nuxt route transitions disabled. Opacity only: no transform/filter
     reanchoring fixed canvases, no doubled child fade or forwards layer retention. */
  .site-shell main :is(.rain-style-card, .rain-blog-card) {
    animation: rain-card-enter 0.5s ease-out backwards;
  }
  @keyframes rain-card-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-shell main :is(.rain-style-card, .rain-blog-card) { animation: none; }
  }

  /* The persistent site card owns the optics; only its content is routed.
     Keep padding/borders of the existing inner sections without extra glass. */
  .shared-card > :is(.shared-page-content, .portfolio-content) { display: flow-root; margin: 0; min-width: 0; }
  .shared-page-content > * + * { margin-top: var(--space-4); }
  .portfolio-content > * + * { margin-top: var(--space-4); }
  .portfolio-content:is(.project-summary, .project-detail) > :first-child { margin-top: var(--space-4); }
  .portfolio-content > :is(section, article) {
    background: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .portfolio-content:not(.project-summary):not(.project-detail) > section:not([aria-label="Downloadable resume"]) {
    padding: var(--space-8);
    border: 1px solid var(--border); border-radius: var(--radius-xl);
  }
  .portfolio-content:not(.project-summary):not(.project-detail) > section:first-of-type { margin-top: 0; }
  .portfolio-content:not(.project-summary):not(.project-detail) > section + section { margin-top: var(--space-8); }
  .shared-card[data-content-transition="true"] > :is(.shared-page-content, .portfolio-content) { animation: site-content-enter 0.5s ease-out backwards; }
  @keyframes site-content-enter { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .shared-card[data-content-transition="true"] > :is(.shared-page-content, .portfolio-content) { animation: none; }
  }

  /* Friends keeps its independent single-column layout. Shared pages use the
     same profile + main-card grid from site.css, including Blog and articles. */
  main.journal-layout {
    display: block;
    width: min(calc(100% - 3rem), 49rem);
    margin: clamp(2rem, 6vw, 5rem) auto 0;
  }
  .blog-index-content > section {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .blog-index-content > section + section { margin-top: 3rem; }
  .journal-signature { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 2.75rem; color: var(--text-muted); font-size: 0.83rem; }
  .journal-signature img { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
  .journal-signature-divider { margin-inline: 0.4rem; color: var(--text-soft); }
  .journal-intro h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 550; letter-spacing: 0.02em; }
  .journal-intro > p:not(.eyebrow) { font-size: 1rem; }
  .journal-year { border-top: 1px solid var(--border-muted) !important; }
  .journal-year .year-heading { padding-top: 1.5rem; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; }
  .journal-year .post-list { margin-top: 0.5rem; }
  .journal-year .post-list h3 { font-size: 1.35rem; font-weight: 600; }
  .journal-year .post-list > li { padding: 1.75rem 0; }
  .journal-year .post-excerpt { max-width: 66ch; }
  :is([data-section="blog"], [data-section="friends"], [data-section="about"]) .site-footer { border: 0; box-shadow: none; background: none; backdrop-filter: none; }
  /* Desktop: sticky sidebar with native independent scrolling. At either end,
     normal scroll chaining hands back to the page. No wheel interception,
     translated ancestors, or custom momentum near the fixed glass canvases. */
  @media (min-width: 60.001rem) {
    .site-shell main > .profile-sidebar {
      position: sticky;
      max-height: calc(100dvh - var(--header-height) - var(--space-6) - var(--space-4));
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior-y: auto;
      align-content: start;
      grid-auto-rows: max-content;
      padding: .25rem;
      scrollbar-width: none;
      /* Overflow alone need not clip fixed descendants. This clips the glass
         at the scrollport without changing its viewport coordinate system. */
      clip-path: inset(0);
    }
    .site-shell main > .profile-sidebar::-webkit-scrollbar { display: none; }
  }
  .site-shell main > .profile-sidebar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  /* Keep touch scrolling and expanding compact cards in the document flow. */
  @media (max-width: 60rem) {
    .site-shell main > .profile-sidebar { position: static; }
  }

  /* One outer material across all shared pages, with no extra backdrop filter. */
  .site-shell main.shared-page-layout > .shared-card.rain-style-card {
    position: relative; isolation: isolate;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .shared-card.blog-index :is(input, select) { background: color-mix(in srgb, var(--journal-paper) 82%, transparent); }

  @media (max-width: 76rem) {
    .site-header .header-actions { width: 5.7rem; justify-content: flex-end; gap: 0.5rem; }
    .site-header sf-weather, .site-header .theme-picker { flex: 0 0 2.6rem; width: 2.6rem; min-height: 2.6rem; height: 2.6rem; padding: 0.3rem; justify-content: center; overflow: hidden; }
    .site-header .sf-weather__record, .site-header .sf-weather__retry { display: none; }
    .site-header .sf-weather__icon, .site-header .theme-picker__icon { margin: 0; }
    .site-header .theme-picker { position: relative; }
    .site-header .theme-picker select { position: absolute; inset: 0; width: 100%; padding: 0; color: transparent; }
  }
  @media (max-width: 60rem) {
    .portfolio-content:not(.project-summary):not(.project-detail) > section:not([aria-label="Downloadable resume"]) { padding: var(--space-5); }
    .site-header { min-height: var(--header-height); grid-template-columns: minmax(0, 1fr) auto; padding-block: 0; align-items: center; }
    .dock-viewport {
      grid-column: 1;
      width: 100%;
      min-width: 0;
      height: var(--header-height);
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
      mask-image: linear-gradient(90deg, transparent, black 0.75rem, black calc(100% - 0.75rem), transparent);
    }
    .dock-viewport::-webkit-scrollbar { display: none; }
    .dock-track { width: calc(var(--spread-width) + 2rem); height: var(--header-height); align-items: center; }
    .site-header .header-actions { grid-column: 2; }
    main.journal-layout { margin-top: 1.75rem; }
  }
  @media (max-width: 40rem) {
    .dock-viewport { --dock-cell: 4.25rem; }
    .site-header .header-actions { position: relative; width: 2.75rem; justify-content: flex-end; }
    .header-tools-toggle {
      display: grid; place-items: center; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem;
      padding: 0; border: 1px solid var(--border); border-radius: 50%;
      color: var(--text-muted); background: var(--surface-strong); box-shadow: var(--shadow-soft); cursor: pointer;
    }
    .header-tools-toggle[aria-expanded="true"] { color: var(--text); background: var(--surface-subtle); }
    .header-tools {
      position: absolute; top: calc(100% + 0.75rem); right: 0; width: 14rem;
      display: none; align-items: stretch; flex-direction: column; gap: 0.625rem; padding: 0.875rem;
      border: 1px solid var(--border); border-radius: 1.25rem;
      background: var(--journal-paper); box-shadow: var(--shadow-soft);
    }
    .header-tools--open { display: flex; }
    .header-tools-label { display: block; padding: 0.125rem 0.25rem 0.25rem; font-size: 0.75rem; color: var(--text-muted); }
    .site-header .header-tools :is(sf-weather, .theme-picker, .language-picker) {
      flex: 0 0 auto; width: 100%; min-height: 2.75rem; height: 2.75rem; aspect-ratio: auto; padding: 0.375rem 0.625rem; justify-content: flex-start; overflow: visible;
    }
    .site-header .header-tools .sf-weather__record { display: flex; }
    .site-header .header-tools .sf-weather__retry:not([hidden]) { display: inline-block; }
    .site-header .header-tools :is(.sf-weather__record, .sf-weather__retry) { width: auto; max-width: none; opacity: 1; overflow: visible; pointer-events: auto; }
    .site-header .header-tools .theme-picker select { position: static; width: 100%; padding: 0 0.5rem; color: var(--text); appearance: auto; }
    main.journal-layout { width: calc(100% - 2.5rem); }
    .journal-signature { margin-bottom: 2rem; }
    .journal-year .post-list h3 { font-size: 1.2rem; }
    #featured-projects-heading ~ article img { float: none; width: 5rem; margin: 1rem 0; }
  }
  @media (max-width: 24rem) {
    .site-header { padding-inline: 0.5rem; gap: 0.4rem; }
    .site-header .header-actions { gap: 0.25rem; justify-self: end; }
  }
}