/* THE U.C. — PARAMETRI ANIMAZIONE (secondi; punto per i decimali)
   Cambia solo questi valori: i tempi della sequenza sono calcolati automaticamente. */
:root {
  --uc-fade-in: 4s;       /* Comparsa di ciascuna frase */
  --uc-hold: 0.3s;        /* Pausa a frase completamente visibile */
  --uc-fade-out: 2s;      /* Scomparsa di ciascuna frase */
  --uc-gap: 0.15s;         /* Intervallo bianco fra un elemento e il successivo */
  --uc-logo-fade-in: 4s;  /* Comparsa finale di Under Construction */
}

:root { color-scheme: light; font-family: Tahoma, Arial, sans-serif; font-size: 100%; color: #466778; background: #fff; }
.photo-geometry { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 4px); left: 50%; transform: translateX(-50%); z-index: 8; width: max-content; max-width: calc(100% - 16px); padding: 5px 8px; border: 1px solid #9bbdd0; border-radius: 4px; background: #fffffff0; color: #23485f; font: 11px/1.35 monospace; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
.photo-geometry[hidden] { display: none; }
* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
/* Dynamic viewport units follow browser chrome and device rotation.
   Safe-area padding keeps the frame clear of notches and the home indicator. */
body { margin: 0; width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
img { display: block; max-width: 100%; }
.masthead { flex: 0 0 auto; height: 119px; display: flex; align-items: flex-start; justify-content: space-between; overflow: hidden; }
.brand { flex: 0 0 199px; }
.brand img { height: auto; }
.panorama { width: 563px; height: 119px; object-fit: cover; object-position: right center; min-width: 0; }
.navigation { flex: 0 0 25px; position: relative; z-index: 2; height: 25px; background: url('assets/bar-top.jpg') repeat-x; }
.navigation::after { content: ""; position: absolute; top: 0; right: 0; width: 25px; height: 25px; background: url('assets/corner-top-right.svg') no-repeat; pointer-events: none; }
/* Two-dimensional blend: the horizontal blue fade gains opacity gradually
   down the full button height, merging into the original top frame.
   The fixed 4px left rim reaches menu opacity after the top 5px junction. */
.home { position: relative; display: block; width: 104px; height: 25px; margin: 0; padding: 0; border: 0; background: transparent; appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: width 420ms cubic-bezier(.22, .61, .36, 1); }
.home[aria-expanded="true"] { width: var(--menu-width, 104px); }
.home[aria-expanded="false"] { width: 104px; }
/* Native text and a small vector icon stay sharp at every pixel density. */
.home-label { position: absolute; inset: 0 auto 0 4px; z-index: 1; display: flex; align-items: center; gap: 4px; color: #386780; font: normal .75rem/1 Georgia, 'Times New Roman', serif; text-transform: uppercase; transition: color 160ms ease; }
.home-icon { flex: none; }
.home::before { z-index: 2; opacity: 0; }
.home[aria-expanded="true"]::before { opacity: 1; }
.home::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, #71a6cb 0, #8ab9d8 1px, #bde4f8 4px) left top / 4px 100% no-repeat, linear-gradient(to right, #bde4f8 0%, #c5e8ff 8%, #cde9fe 19%, #d6eefa 36%, #e0f5fc 56%, #edf8faee 76%, #f6fafd88 91%, #ffffff00 100%) right top / calc(100% - 4px) 100% no-repeat; -webkit-mask: linear-gradient(to bottom, transparent 0, transparent 1px, #0008 3px, #000 5px) left top / 4px 100% no-repeat, linear-gradient(to bottom, transparent 0, transparent 1px, #00000033 3px, #00000066 7px, #00000099 12px, #000000d1 18px, #000 23px) right top / calc(100% - 4px) 100% no-repeat; mask: linear-gradient(to bottom, transparent 0, transparent 1px, #0008 3px, #000 5px) left top / 4px 100% no-repeat, linear-gradient(to bottom, transparent 0, transparent 1px, #00000033 3px, #00000066 7px, #00000099 12px, #000000d1 18px, #000 23px) right top / calc(100% - 4px) 100% no-repeat; }
@media (hover: hover) { .home:hover .home-label { color: #245575; } }
.home:focus-visible .home-label, .home:active .home-label { color: #245575; }
.dropdown { position: absolute; top: 25px; left: 0; width: var(--menu-width, 104px); display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 280ms ease, visibility 0s 280ms; }
.dropdown.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.dropdown-clip { min-height: 0; overflow: hidden; }
/* Blue stops sampled from Home's clean background (rows 20–22).
   End in pure white to keep the menu open-edged, without boxed rows. */
.page-links { list-style: none; margin: 0; padding: 0; border: 0; background: var(--menu-background); transform: translateY(-100%); transition: transform 280ms ease; }
.dropdown.is-open .page-links { transform: translateY(0); }
.page-links button { position: relative; display: flex; align-items: center; width: 100%; height: 25px; margin: 0; padding: 0 24px 0 23px; white-space: nowrap; overflow: hidden; border: 0; border-radius: 0; background: transparent; appearance: none; color: #386780; font: .875rem/1.2 Georgia, 'Times New Roman', serif; text-align: left; cursor: pointer; transition: color 160ms ease; }
/* Keep the original 4px edge; smoothly interpolate its two separator rows
   across the remaining width, identically for Home and every menu entry. */
.home::before, .page-links button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; background: linear-gradient(to right, #aad8f2 0%, #bbdef2 20%, #ccecf9 40%, #dfeff8 60%, #f0fbfd 80%, #fff 100%) right top / calc(100% - 4px) 1px no-repeat, linear-gradient(to right, #9bc9ea 0%, #acd6ef 20%, #bde0f4 40%, #d4ecf8 60%, #eef9fd 80%, #fff 100%) right bottom / calc(100% - 4px) 1px no-repeat; }
.page-links button:hover, .page-links button:focus-visible { background: transparent; color: #245575; }
.page-links button:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.page-links button { -webkit-tap-highlight-color: transparent; -webkit-appearance: none; isolation: isolate; transition: color 300ms ease-in-out; }
.page-links button::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to right, #328dca30, #65b5df18 55%, #65b5df00 100%); opacity: 0; transition: opacity 300ms ease-in-out; }
.page-links button[aria-current="page"] { font-weight: normal; color: #245575; }
.page-links button[aria-current="page"]::before { opacity: 1; }
.page-links button:active { background: transparent; color: #245575; }
.page-panel { flex: 0 0 auto; min-width: 0; max-width: 100%; margin: auto; overflow-wrap: anywhere; }
.page-panel[hidden] { display: none; }
.sample-page { padding: 16px 24px; text-align: center; }
.sample-page h1 { margin: 0 0 12px; font: normal 1.5rem/1.2 Georgia, 'Times New Roman', serif; color: #466778; }
.sample-page p { margin: 0; font-size: 1rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .home::after, .dropdown, .page-links, .page-links button, .page-links button::before { transition: none; }
}
.page-frame { flex: 1 1 0; min-height: 0; min-width: 0; display: grid; grid-template-columns: var(--left-frame-width) minmax(0, 1fr) 25px; transition: grid-template-columns 280ms ease; grid-template-rows: minmax(0, 1fr); }
.left-border { position: relative; background: url('assets/bar-left-fade.svg') repeat-y right top / calc(100% - 4px) 1px; }
.left-border::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: url('assets/bar-left.jpg') repeat-y left top; }
.right-border { background: url('assets/bar-right.svg') repeat-y right top; }
/* Auto margins center short content but resolve to zero for tall content,
   keeping the beginning of an overflowing page reachable by scrolling. */
main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.construction { width: 237px; height: auto; }
.bottom-border { flex: 0 0 25px; position: relative; height: 25px; background: url('assets/bar-bottom.jpg') repeat-x; }
.bottom-border::after { content: ""; position: absolute; top: 0; right: 0; width: 25px; height: 25px; background: url('assets/corner-bottom-right.svg') no-repeat; pointer-events: none; }
a:focus-visible, button:focus-visible, main:focus-visible { outline: 2px solid #183b56; outline-offset: -2px; }
.skip-link { position: absolute; z-index: 3; top: 0; left: 0; padding: 12px 16px; background: #fff; color: #183b56; transform: translateY(-120%); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .masthead { height: auto; flex-wrap: wrap; }
  .brand { flex-basis: 100%; }
  .brand img { width: 199px; }
  .panorama { width: 100%; height: auto; object-fit: contain; }
  main { padding: 20px 12px; }
  .sample-page { padding: 12px 4px; }
}
/* A short viewport (especially a phone in landscape) needs a compact header.
   Do not shrink the 25px frame or the Home/menu graphics. */
@media (max-height: 500px) {
  .masthead { height: min(119px, 22vh); height: min(119px, 22dvh); flex-wrap: nowrap; }
  .brand { flex: 0 0 auto; width: min(199px, 28vw); height: 100%; }
  .brand img { width: auto; height: 100%; object-fit: contain; object-position: left top; }
  .panorama { width: 563px; height: 100%; object-fit: cover; object-position: right center; }
  main { padding: 8px; }
}

/* The frame stays still; only this inner viewport scrolls. */
.content-window { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.content-window main { width: 100%; height: 100%; padding: 0; }
.content-window::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, #fff, transparent) top / 100% 24px no-repeat,
    linear-gradient(to top, #fff, transparent) bottom / 100% 24px no-repeat,
    linear-gradient(to right, #fff, transparent) left / 24px 100% no-repeat,
    linear-gradient(to left, #fff, transparent) right / 24px 100% no-repeat;
}
.custom-scroll main { scrollbar-width: none; }
.custom-scroll main::-webkit-scrollbar { display: none; }
main[data-scroll="vertical"] { overflow-x: hidden; }
.reading-page { margin: 0; padding: 32px; width: 100%; text-align: left; }
.reading-page h1 { margin: 0 0 10px; font: normal 1.7rem/1.2 Georgia, serif; }
.reading-page .byline { margin: 0 0 32px; font-size: .85rem; line-height: 1.6; }
.reading-page h2 { margin: 0 0 16px; font: normal .85rem/1.5 Tahoma, sans-serif; color: #7292a6; }
.wide-page { width: max(72rem, calc(100% + 24rem)); max-width: none; min-height: calc(100% + 120px); }
.poem-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.verses { font: 1.125rem/1.8 Georgia, 'Times New Roman', serif; }
.verses span { display: block; }
.wide-page .verses { white-space: nowrap; }
.tercets p { margin: 0 0 1.2em; }
.text-source { margin: 32px 0 0; font-size: .8rem; line-height: 1.6; }
.text-source a { color: inherit; text-underline-offset: 3px; }
.right-border { position: relative; }
.frame-scroll {
  --thumb-length: 48px;
  --thumb-fade-direction: to right;
  --thumb-feather: min(10px, 20%);
  /* Only the long axis fades; the original frame image keeps its cross-axis shading. */
  --thumb-mask: linear-gradient(var(--thumb-fade-direction), transparent 0%, #00000020 calc(var(--thumb-feather) * .3), #00000080 calc(var(--thumb-feather) * .65), #000 var(--thumb-feather), #000 calc(100% - var(--thumb-feather)), #00000080 calc(100% - var(--thumb-feather) * .65), #00000020 calc(100% - var(--thumb-feather) * .3), transparent 100%);
  /* Reuse the frame itself at its native 25px thickness. Only its chroma changes. */
  --thumb-fill: url('assets/bar-bottom.jpg') repeat-x left top;
  --thumb-opacity: .65;
  --thumb-saturation: 4.3;
  position: absolute; display: none; margin: 0; padding: 0; border: 0;
  border-radius: 0; appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer; z-index: 1;
}
.custom-scroll .frame-scroll { display: block; }
.vertical-scroll { inset: 0; width: 25px; height: 100%; writing-mode: vertical-lr; direction: ltr; --thumb-fill: url('assets/bar-right.svg') repeat-y right top; }
.horizontal-scroll { left: var(--left-frame-width); right: 25px; top: 0; width: calc(100% - var(--left-frame-width) - 25px); height: 25px; transition: left 280ms ease, width 280ms ease; }
.frame-scroll::-webkit-slider-runnable-track { width: 100%; height: 100%; background: transparent; border: 0; }
.frame-scroll::-moz-range-track { width: 100%; height: 100%; background: transparent; border: 0; }
.frame-scroll::-webkit-slider-thumb {
  -webkit-mask-image: var(--thumb-mask); mask-image: var(--thumb-mask);
  appearance: none; -webkit-appearance: none; box-sizing: border-box; border: 0; border-radius: 0;
  background: var(--thumb-fill); box-shadow: none; filter: saturate(var(--thumb-saturation)); opacity: var(--thumb-opacity); transition: filter 160ms ease, opacity 160ms ease;
}
.frame-scroll::-moz-range-thumb {
  mask-image: var(--thumb-mask);
  box-sizing: border-box; border: 0; border-radius: 0; background: var(--thumb-fill);
  box-shadow: none; filter: saturate(var(--thumb-saturation)); opacity: var(--thumb-opacity); transition: filter 160ms ease, opacity 160ms ease;
}
.horizontal-scroll::-webkit-slider-thumb { width: var(--thumb-length); height: 25px; margin-top: 0; }
.horizontal-scroll::-moz-range-thumb { width: var(--thumb-length); height: 25px; }
.vertical-scroll::-webkit-slider-thumb { width: 25px; height: var(--thumb-length); margin-left: 0; }
.horizontal-scroll { --thumb-fade-direction: to right; }
.vertical-scroll { --thumb-fade-direction: to bottom; }
.vertical-scroll::-moz-range-thumb { width: 25px; height: var(--thumb-length); }
.frame-scroll:disabled { visibility: hidden; pointer-events: none; }
.frame-scroll:focus-visible { outline: 2px solid #386780; outline-offset: -2px; }
.frame-scroll:enabled:focus-visible { --thumb-opacity: 1; --thumb-saturation: 6; }
.frame-scroll:enabled:active { --thumb-opacity: 1; --thumb-saturation: 7; }
@media (hover: hover) { .frame-scroll:enabled:hover:not(:active) { --thumb-opacity: 1; --thumb-saturation: 6; } }
.frame-scroll:enabled:is(:active, :focus-visible) { --thumb-feather: min(18px, 25%); }
@media (hover: hover) { .frame-scroll:enabled:hover { --thumb-feather: min(18px, 25%); } }
@media (max-width: 600px) { .reading-page { padding: 28px 24px; } }
@media (forced-colors: active) {
  .frame-scroll { forced-color-adjust: none; --thumb-opacity: 1; --thumb-fill: linear-gradient(ButtonText, ButtonText); --thumb-mask: none; }
  .content-window::after { display: none; }
}

/* Home controls both the dropdown and the breathing room at the left edge. */
body { --left-frame-width: 30px; --menu-background: linear-gradient(to right, #71a6cb 0, #8ab9d8 1px, #bde4f8 4px) left top / 4px 100% no-repeat, linear-gradient(to right, #bde4f8 0%, #c5e8ff 8%, #cde9fe 19%, #d6eefa 36%, #e0f5fc 56%, #edf8fa 76%, #f6fafd 91%, #fff 100%) right top / calc(100% - 4px) 100% no-repeat; }
body.menu-open { --left-frame-width: var(--menu-width, 104px); }
.header-photo { --header-transition-ms: 700; position: relative; width: 563px; height: 119px; min-width: 0; flex: 0 1 563px; overflow: hidden; }
.header-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.header-layer .panorama { display: block; }
.header-photo .panorama { width: 100%; height: 100%; object-fit: cover; }
.header-layer.has-fade::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.8) calc(var(--header-fade, 55%) * .3), rgba(255,255,255,0) var(--header-fade, 55%)); }
@media (max-width: 600px) {
  .header-photo { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 563 / 119; }
  .header-photo .panorama { position: absolute; inset: 0; }
}
@media (max-height: 500px) {
  .header-photo { flex: 0 1 563px; width: 563px; height: 100%; aspect-ratio: auto; }
}
.bottom-border > img { width: 4px; height: 25px; max-width: none; object-fit: none; object-position: left top; }
.bottom-border::before { content: ""; position: absolute; left: 4px; top: 0; width: calc(var(--left-frame-width) * .8173076923 - 4px); height: 25px; background: url('assets/corner-left-fade.svg') no-repeat left top / 100% 25px; pointer-events: none; transition: width 280ms ease; }
@media (prefers-reduced-motion: reduce) {
  .page-frame, .bottom-border > img, .horizontal-scroll { transition: none; }
}

/* Photographs stay within the existing frame; zoom uses the same scroll viewport. */
.gallery-page { width: 100%; margin: 0; padding: 28px 24px; }
.gallery-page h1 { margin: 0 0 24px; font: normal 1.5rem/1.2 Georgia, serif; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 28px 24px; }
.photo-grid figure { margin: 0; min-width: 0; }
.photo-grid button { display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; background: #fff; color: #466778; cursor: pointer; aspect-ratio: 3 / 2; overflow: hidden; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: filter 160ms ease; }
.photo-grid button:hover img { filter: saturate(1.15); }
.photo-grid figcaption { padding-top: 8px; font: .8rem/1.5 Tahoma, sans-serif; }
.photo-grid figcaption span { display: block; font: 1.05rem/1.5 Georgia, serif; }
.gallery-page a { color: inherit; text-underline-offset: 3px; }
.gallery-page.is-viewer { padding: 0; max-width: none; overflow-wrap: normal; }
.photo-caption { width: 100%; margin: 0; padding: 24px 24px 0; font: .75rem/1.4 Tahoma, sans-serif; overflow-wrap: anywhere; }
.photo-stage { display: flex; justify-content: center; align-items: center; padding: 24px; }
.photo-stage img { flex: none; max-width: none; object-fit: contain; user-select: none; }
#gallery-message:empty { display: none; }
#gallery-message { margin: 24px; }
.gallery-controls { position: absolute; left: var(--left-frame-width); bottom: 0; height: 25px; width: 196px; display: flex; align-items: center; z-index: 2; transition: left 280ms ease; }
.gallery-controls[hidden], .photo-grid[hidden], #photo-viewer[hidden] { display: none; }
.gallery-controls button { flex: 0 0 26px; width: 26px; height: 25px; padding: 0; border: 0; background: transparent; color: #466778; font: 22px/25px Georgia, serif; cursor: pointer; }
.gallery-controls button:hover { color: #205e86; background: linear-gradient(to top, #a9d9ef99, #fff0); }
.gallery-controls button:disabled { opacity: .35; cursor: default; }
.gallery-controls output { flex: 0 0 40px; text-align: center; font: 11px/25px Tahoma, sans-serif; color: #466778; }
.gallery-viewing .horizontal-scroll { left: calc(var(--left-frame-width) + 196px); width: max(0px, calc(100% - var(--left-frame-width) - 221px)); }
@media (max-width: 330px) {
  .gallery-controls { width: 172px; }
  .gallery-controls button { flex-basis: 22px; width: 22px; }
  .gallery-viewing .horizontal-scroll { left: calc(var(--left-frame-width) + 172px); width: max(0px, calc(100% - var(--left-frame-width) - 197px)); }
}
@media (prefers-reduced-motion: reduce) { .gallery-controls, .photo-grid img { transition: none; } }

.header-credit { position: absolute; z-index: 1; right: 4px; bottom: 3px; max-width: calc(100% - 8px); padding: 2px 4px; color: #365568; background: #ffffffe6; font: 11px/1.3 Tahoma, sans-serif; text-align: right; }
.header-credit a { color: inherit; }

/* A soft white edge follows each photo, independently of the viewport fade. */
.photo-grid img, .photo-stage img, .thumb-placeholder {
  --photo-edge: 12px;
  border-radius: 10px;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 min(var(--photo-edge), 20%), #000 calc(100% - min(var(--photo-edge), 20%)), transparent),
    linear-gradient(to bottom, transparent, #000 min(var(--photo-edge), 20%), #000 calc(100% - min(var(--photo-edge), 20%)), transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 min(var(--photo-edge), 20%), #000 calc(100% - min(var(--photo-edge), 20%)), transparent),
    linear-gradient(to bottom, transparent, #000 min(var(--photo-edge), 20%), #000 calc(100% - min(var(--photo-edge), 20%)), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.photo-stage img { --photo-edge: 20px; border-radius: 14px; }

/* One shared CSS placeholder, without per-photo placeholder downloads. */
.thumb-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; pointer-events: none; background: linear-gradient(135deg, #e6f4fc, #c5e8f5 55%, #eaf7fd); color: #7292a6; font: 12px/1.4 Georgia, serif; }
.thumb-placeholder[hidden] { display: none; }
.thumb-placeholder::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 30deg, transparent, #b7dced 35%, #6daacb 85%, transparent); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation: thumbnail-loading 1.4s linear infinite; animation-play-state: paused; }
.thumb-loading .thumb-placeholder::before { animation-play-state: running; }
.thumb-error .thumb-placeholder::before { display: none; }
.photo-grid button:not(.thumb-ready) > img { opacity: 0; }
@keyframes thumbnail-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .thumb-placeholder::before { animation: none; } }

.photo-stage.is-dragging, .photo-stage.is-dragging img { cursor: grabbing !important; }

@media (prefers-reduced-motion: reduce) {
  .frame-scroll::-webkit-slider-thumb { transition: none; }
  .frame-scroll::-moz-range-thumb { transition: none; }
}

@media (prefers-reduced-motion: reduce) { .home, .home-label, .bottom-border::before { transition: none; } }

/* Transparent native button supports mouse, touch and keyboard; credits remain clickable. */
.header-change { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.header-change:disabled { cursor: progress; }
.header-change:focus-visible { outline: 2px solid #386780; outline-offset: -3px; }
.header-credit { z-index: 2; }

/* The original logo becomes a white watermark, separate from the changing photo. */
.header-photo .header-watermark { position: absolute; right: 2px; bottom: 2px; z-index: 3; width: 54px; height: 16px; pointer-events: none; user-select: none; }
.header-credit { right: 64px; max-width: calc(100% - 68px); }

/* Responsive lettering fits the inner frame as the menu and device resize. */
.uc-page { width: 100%; padding: 32px clamp(24px, 4vw, 64px); display: grid; grid-template-areas: "stage"; place-items: center; text-align: center; }
.uc-motto { width: 100%; margin: 0; white-space: nowrap; font: normal 4vw/1.2 'Times New Roman', Times, serif; color: #466778; transform: translateX(var(--uc-ink-shift, 0px)); }
/* Crop only the uneven white margins: visible artwork is x4..236, y18..153. */
.uc-emblem { position: relative; width: 233px; max-width: 100%; aspect-ratio: 233 / 136; overflow: hidden; }
.uc-page .construction { position: absolute; width: 101.716738%; max-width: none; height: auto; left: -1.716738%; top: -13.235294%; margin: 0; }

/* All three elements share one stage. Entry starts blank; the logo remains at the end. */
.uc-page {
  --uc-second-start: calc(var(--uc-fade-in) + var(--uc-hold) + var(--uc-fade-out) + var(--uc-gap));
  --uc-logo-start: calc(var(--uc-second-start) + var(--uc-second-start));
}
.uc-motto, .uc-emblem { grid-area: stage; opacity: 0; }
.uc-motto { --uc-start: 0s; }
.uc-motto:last-of-type { --uc-start: var(--uc-second-start); }
@keyframes uc-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes uc-disappear { from { opacity: 1; } to { opacity: 0; } }
.uc-page:not([hidden]) .uc-motto {
  animation:
    uc-reveal var(--uc-fade-in) ease-in-out var(--uc-start) forwards,
    uc-disappear var(--uc-fade-out) ease-in-out calc(var(--uc-start) + var(--uc-fade-in) + var(--uc-hold)) forwards;
}
.uc-page:not([hidden]) .uc-emblem { animation: uc-reveal var(--uc-logo-fade-in) ease-in-out var(--uc-logo-start) forwards; }
@media (prefers-reduced-motion: reduce) {
  .uc-page { grid-template-areas: none; gap: 24px; }
  .uc-page:not([hidden]) .uc-motto, .uc-page:not([hidden]) .uc-emblem { animation: none; opacity: 1; grid-area: auto; }
}

.uc-quote { color: #d66b22; }

/* Scale from a fixed bottom-right anchor, 1px inside the 12px fade. */
.photo-grid button { position: relative; }
.photo-grid figure { container-type: inline-size; container-name: thumbnail; }
.photo-grid button::after { content: ""; position: absolute; right: 13px; bottom: 13px; width: min(15%, clamp(54px, 5vw, 128px)); height: auto; aspect-ratio: 54 / 16; background: url('assets/watermark.svg') no-repeat center / contain; pointer-events: none; }
/* 32px / 15%: omit the mark when its proportional size would be unreadable. */
@container thumbnail (width < 213.333333px) { .photo-grid button::after { display: none; } }

/* Fixed overlay outside the scrolling viewport; sized from the fitted photograph. */
.viewer-watermark { position: absolute; z-index: 1; aspect-ratio: 54 / 16; background: url('assets/watermark.svg') no-repeat center / contain; pointer-events: none; }
.viewer-watermark[hidden] { display: none; }

/* Gallery metadata stays in the frame, on one line, with title first. */
.photo-info-bar { --photo-info-inset: 108px; position: absolute; left: var(--photo-info-inset); right: 25px; top: 2px; height: 25px; display: flex; align-items: center; gap: 4px; min-width: 0; color: #386780; transition: left 280ms ease, right 280ms ease; }
.photo-info-bar[hidden], .photo-info-button[hidden], .photo-info-line [hidden] { display: none; }
.photo-info-line { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; white-space: nowrap; font: 12px/25px Georgia, 'Times New Roman', serif; }
#photo-frame-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#photo-frame-author, #photo-frame-links { flex: 0 0 auto; white-space: nowrap; }
.photo-info-line a { color: inherit; text-underline-offset: 2px; }
.photo-info-button { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #386780; cursor: pointer; }
.photo-info-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.photo-info-button:hover { color: #174a6a; }
/* Balance the menu on wide screens, keeping the overflow icon at the right frame. */
@media (min-width: 768px) {
  .photo-info-bar { right: var(--photo-info-inset); }
  .photo-info-button { position: absolute; top: 0; right: calc(25px - var(--photo-info-inset)); }
}
.photo-info-dialog { box-sizing: border-box; width: min(440px, calc(100% - 40px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid #8ab9d8; border-radius: 10px; background: linear-gradient(135deg, #e3f3fc, #fff 60%); color: #466778; }
.photo-info-dialog::backdrop { background: #25435355; }
.photo-info-dialog h2 { margin: 0 0 16px; font: normal 1.25rem Georgia, serif; }
.photo-info-dialog .photo-caption { padding: 0; font: 1rem/1.6 Georgia, serif; }
.photo-info-dialog a { color: inherit; }
.photo-info-dialog form { margin-top: 20px; text-align: right; }
.photo-info-dialog button { padding: 8px 18px; color: #386780; background: #e6f4fc; border: 1px solid #8ab9d8; border-radius: 5px; cursor: pointer; font: inherit; }
/* Transparent side controls stay attached to the side rails in either orientation. */
.frame-photo-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 56px; padding: 8px; z-index: 3; border: 0; border-radius: 0; background: transparent; color: #386780; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gallery-viewing .frame-photo-nav { display: block; }
.frame-photo-prev { left: 0; }
.frame-photo-next { right: 0; }
.frame-photo-nav svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: opacity 160ms ease, filter 160ms ease; }
.frame-photo-nav:hover svg, .frame-photo-nav:focus-visible svg { opacity: 1; filter: saturate(1.5); }
.frame-photo-nav:disabled { display: none; }
.gallery-controls #photo-count { flex: 0 0 52px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 330px) { .gallery-controls #photo-count { flex-basis: 44px; } }
@media (prefers-reduced-motion: reduce) { .photo-info-bar, .frame-photo-nav svg { transition: none; } }

.photo-stage.is-cover { padding: 0; }
/* Fade the visible photo plane after cover cropping, so all four edges
   reproduce the supplied references even for portrait/landscape originals.
   Frame artwork and the foreground watermark/like are outside this mask. */
/* One mask on the intersection of image and viewport. JS moves its edges
   with the photo, avoiding multiplication of coincident fade ramps. */
.photo-stage.is-cover img { border-radius: 14px; -webkit-mask-image: none; mask-image: none; }
.gallery-cover .content-window main {
  border-radius: 14px;
  clip-path: inset(0 round 14px);
  --cover-mask-x: linear-gradient(to right, transparent, #000 min(12.5px, 10%), #000 calc(100% - min(12.5px, 10%)), transparent);
  --cover-mask-y: linear-gradient(to bottom, transparent, #000 min(12.5px, 10%), #000 calc(100% - min(12.5px, 10%)), transparent);
  -webkit-mask-image: var(--cover-mask-x), var(--cover-mask-y);
  mask-image: var(--cover-mask-x), var(--cover-mask-y);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.gallery-cover .content-window::after { background: none; }
/* The real scroll viewport extends beneath all four rails. Only the frame
   artwork is masked: controls and their hit areas remain fully interactive. */
/* Shared opacity: two +5% adjustments followed by two +10% adjustments for frame, corners,
   scrollbars, Home and menu separators (clamped at full opacity).
   Keep the opaque rim and fully transparent endpoint unchanged. */
.gallery-cover { --frame-skin-stops: #000 0, #000 2px, #000 6px, #000000e4 13px, #00000070 20px, transparent 100%; }
.gallery-cover .page-frame { position: relative; }
.gallery-cover { --photo-inset-left: 22px; --photo-inset-right: 22px; --photo-inset-top: 22px; --photo-inset-bottom: 22px; }
.gallery-cover .content-window { position: absolute; inset: calc(-25px + var(--photo-inset-top)) var(--photo-inset-right) calc(-25px + var(--photo-inset-bottom)) var(--photo-inset-left); z-index: 0; }
.gallery-cover .left-border { grid-area: 1 / 1; z-index: 1; background: none; pointer-events: none; }
.gallery-cover .right-border { grid-area: 1 / 3; z-index: 1; background: none; pointer-events: none; }
.gallery-cover .frame-photo-nav, .gallery-cover .frame-scroll { pointer-events: auto; }
.gallery-cover .left-border::after,
.gallery-cover .right-border::before,
.gallery-cover .navigation::before,
.gallery-cover .cover-bottom-skin {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(var(--skin-direction), var(--frame-skin-stops));
  mask-image: linear-gradient(var(--skin-direction), var(--frame-skin-stops));
}
/* Share the frame's cross-axis transparency without changing the thumb's
   existing longitudinal feather, saturation or hover/drag response. */
.gallery-cover .horizontal-scroll { --skin-direction: to top; }
.gallery-cover .vertical-scroll { --skin-direction: to left; }
.gallery-cover .frame-scroll {
  -webkit-mask-image: linear-gradient(var(--skin-direction), var(--frame-skin-stops));
  mask-image: linear-gradient(var(--skin-direction), var(--frame-skin-stops));
}
.gallery-cover .left-border::after { --skin-direction: to right; left: 4px; background: url('assets/bar-left-fade.svg') repeat-y left top / 100% 1px; }
.gallery-cover .right-border::before { --skin-direction: to left; background: url('assets/bar-right.svg') repeat-y; }
.gallery-cover .navigation { background: none; }
.gallery-cover .navigation::before { --skin-direction: to bottom; right: 25px; background: url('assets/bar-top.jpg') repeat-x; }
.cover-bottom-skin { display: none; }
.gallery-cover .bottom-border { z-index: 2; background: none; }
.gallery-cover .cover-bottom-skin { display: block; --skin-direction: to top; left: var(--left-frame-width); right: 25px; background: url('assets/bar-bottom.jpg') repeat-x; transition: left 280ms ease; }
/* Each corner owns its background, without another rail underneath it.
   Combine the adjacent alpha ramps: each boundary matches its straight rail,
   while the interior blends continuously in both directions. */
.gallery-cover .navigation::after { --corner-vertical: to bottom; --corner-horizontal: to left; }
.gallery-cover .bottom-border::after { --corner-vertical: to top; --corner-horizontal: to left; }
.gallery-cover .bottom-border::before { --corner-vertical: to top; --corner-horizontal: to right; width: calc(var(--left-frame-width) - 4px); }
.gallery-cover .navigation::after,
.gallery-cover .bottom-border::after,
.gallery-cover .bottom-border::before {
  -webkit-mask-image: linear-gradient(var(--corner-vertical), var(--frame-skin-stops)), linear-gradient(var(--corner-horizontal), var(--frame-skin-stops));
  mask-image: linear-gradient(var(--corner-vertical), var(--frame-skin-stops)), linear-gradient(var(--corner-horizontal), var(--frame-skin-stops));
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
@media (prefers-reduced-motion: reduce) { .gallery-cover .cover-bottom-skin { transition: none; } }
.gallery-cover .photo-info-bar, .gallery-cover .gallery-controls, .gallery-cover .site-copyright { text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
/* The menu surface shares the left frame's alpha ramp. Keep the mask on
   its own background layer so labels and separator lines remain unchanged. */
/* Keep the left rim, protect the longest label, then reveal the photo.
   Home interpolates only the horizontal stops; its vertical junction stays intact. */
@property --home-fade-solid { syntax: '<length>'; inherits: false; initial-value: 13px; }
@property --home-fade-end { syntax: '<length-percentage>'; inherits: false; initial-value: 100%; }
@property --home-fade-soft { syntax: '<length>'; inherits: false; initial-value: 20px; }
.gallery-cover {
  --menu-skin-stops: #000 0, #000 2px, #000 6px, #000000e4 var(--menu-fade-solid, 80px), #00000070 var(--menu-fade-soft, 93px), transparent var(--menu-fade-end, 100%);
}
.gallery-cover .home::after {
  --home-fade-solid: 13px;
  --home-fade-soft: 20px;
  --home-fade-end: 100%;
  transition: --home-fade-end 420ms cubic-bezier(.22, .61, .36, 1), --home-fade-solid 420ms cubic-bezier(.22, .61, .36, 1), --home-fade-soft 420ms cubic-bezier(.22, .61, .36, 1);
}
.gallery-cover .home[aria-expanded="true"]::after {
  --home-fade-solid: var(--menu-fade-solid, 80px);
  --home-fade-soft: var(--menu-fade-soft, 93px);
  --home-fade-end: var(--menu-fade-end, 100%);
}
.gallery-cover .page-links { position: relative; isolation: isolate; background: none; }
.gallery-cover .page-links::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--menu-background);
  -webkit-mask-image: linear-gradient(to right, var(--menu-skin-stops));
  mask-image: linear-gradient(to right, var(--menu-skin-stops));
}
.gallery-cover .home::after {
  -webkit-mask: linear-gradient(to right, #000 0, #000 2px, #000 6px, #000000e4 var(--home-fade-solid), #00000070 var(--home-fade-soft), transparent var(--home-fade-end)), linear-gradient(to bottom, transparent 0, transparent 1px, #0008 3px, #000 7px);
  mask: linear-gradient(to right, #000 0, #000 2px, #000 6px, #000000e4 var(--home-fade-solid), #00000070 var(--home-fade-soft), transparent var(--home-fade-end)), linear-gradient(to bottom, transparent 0, transparent 1px, #0008 3px, #000 7px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.gallery-cover .home[aria-expanded="true"]::before,
.gallery-cover .page-links button::after {
  /* Preserve the original two-tone artwork. Fade its pale tail earlier
     than the row background so it cannot read as a white stripe. */
  --separator-fade: linear-gradient(to right, #000 0, #000 6px, #000000e4 30%, #000000a6 48%, #00000052 66%, #00000014 82%, transparent 100%);
  -webkit-mask-image: var(--separator-fade), linear-gradient(to right, #000 var(--menu-fade-solid), transparent var(--menu-fade-end));
  mask-image: var(--separator-fade), linear-gradient(to right, #000 var(--menu-fade-solid), transparent var(--menu-fade-end));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.gallery-cover .page-links button::before {
  -webkit-mask-image: linear-gradient(to right, var(--menu-skin-stops));
  mask-image: linear-gradient(to right, var(--menu-skin-stops));
}
@media (prefers-reduced-motion: reduce) { .gallery-cover .home::after { transition: none; } }
/* In fill mode the photograph meets the frame, with navigation overlaid inside it. */
.gallery-cover .frame-photo-prev { left: 38px; }
.gallery-cover .frame-photo-next { right: calc(100% + 8px); }
.gallery-cover .frame-photo-nav { color: #edf7ff; }
.gallery-cover .frame-photo-nav svg { opacity: .7; filter: drop-shadow(0 1px 2px rgba(12, 39, 55, .8)); }
.gallery-cover .frame-photo-nav:hover svg,
.gallery-cover .frame-photo-nav:focus-visible svg { opacity: 1; filter: drop-shadow(0 1px 3px rgba(12, 39, 55, .95)); }
:is(#photo-fit, #photo-in, #photo-out) svg { width: 12px; height: 12px; position: relative; z-index: 1; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#photo-fit .fit-contain, #photo-fit[aria-pressed="true"] .fit-expand { display: none; }
#photo-fit[aria-pressed="true"] .fit-contain { display: initial; }
/* Inset tint preserves the saturated bottom edge of the frame. */
:is(#photo-fit, #photo-in, #photo-out) { position: relative; display: grid; place-items: center; background: transparent; }
:is(#photo-fit, #photo-in, #photo-out)::before { content: ""; position: absolute; inset: 3px; pointer-events: none; background: linear-gradient(to top, #6db9e066, #b8e4f433 55%, transparent); opacity: .45; transition: opacity 160ms ease; }
:is(#photo-fit, #photo-in, #photo-out):not(:disabled):is(:hover, :focus-visible)::before { opacity: .8; }
#photo-fit[aria-pressed="true"] { color: #205e86; }
#photo-fit[aria-pressed="true"]::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { :is(#photo-fit, #photo-in, #photo-out)::before { transition: none; } }
/* Controls use the closed-frame inset; only the decorative rail follows the menu. */
.bottom-border { --footer-end: 25px; --gallery-toolbar-width: 196px; --gallery-toolbar-left: min(30px, max(4px, calc(100% - var(--footer-end) - var(--gallery-toolbar-width)))); }
.gallery-controls { left: var(--gallery-toolbar-left); width: var(--gallery-toolbar-width); }
.horizontal-scroll { left: 30px; right: var(--footer-end); width: max(0px, calc(100% - 30px - var(--footer-end))); }
.gallery-viewing .horizontal-scroll { left: calc(var(--gallery-toolbar-left) + var(--gallery-toolbar-width)); width: max(0px, calc(100% - var(--gallery-toolbar-left) - var(--gallery-toolbar-width) - var(--footer-end))); }
/* A quiet foreground signature: the scrollbar remains interactive underneath. */
.site-copyright { position: absolute; right: 8px; bottom: 7px; z-index: 3; color: rgba(70, 103, 120, .6); font: 10px/1 Tahoma, Arial, sans-serif; white-space: nowrap; pointer-events: none; user-select: none; }
.credits-page { max-width: 48rem; margin: auto; line-height: 1.65; }
.credits-page p { margin: 1em 0 0; }
.article-page { line-height: 1.65; }
.article-page img { max-width: 100%; height: auto; }
.article-page figure { margin: 1em 0; }
.article-page a { color: inherit; text-underline-offset: 3px; }
.article-page pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.article-page table { max-width: 100%; border-collapse: collapse; }
.article-page td, .article-page th { padding: .4em; border: 1px solid #c7dce8; }
.article-page button { color: #386780; background: #e6f4fc; border: 1px solid #8ab9d8; padding: 6px 12px; cursor: pointer; }
.sections-status { margin: 24px; color: #466778; font: 1rem/1.5 Georgia, serif; }
@media (max-width: 330px) { .bottom-border { --gallery-toolbar-width: 172px; } }

/* Hearts share the photo overlays' safe margins; only the open photo accepts likes. */
.photo-like { display: inline-flex; align-items: flex-end; gap: 5px; white-space: nowrap; color: #fff; font: 12px/1.2 Tahoma, Arial, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000b; }
.photo-like svg { flex: none; width: 18px; height: 18px; fill: #de5b6a; stroke: #fff9; stroke-width: .7; filter: drop-shadow(0 1px 2px #0005); }
.thumbnail-like { position: absolute; left: 13px; bottom: 13px; z-index: 1; pointer-events: none; }
.viewer-like { position: absolute; z-index: 2; min-width: 54px; height: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Keep a 44px touch target while aligning the artwork, not the button padding. */
.viewer-like::before { content: ""; position: absolute; inset: -13px -4px; }
.photo-like svg { translate: 0 2px; }
.viewer-like:hover svg { fill: #f16c7b; }
.viewer-like[hidden] { display: none; }

/* Mirror/rotate the exact sampled right-rail profile on the other sides.
   Keep the reference right rail, calibrated photo insets and control positions. */
.gallery-cover { --frame-color-stops: #8c9fa6 2.00000%, #a1b4bb 6.00000%, #becdd4 10.00000%, #cddce3 14.00000%, #d8e2e4 18.00000%, #dce6e8 22.00000%, #e1e6e9 26.00000%, #e3e8eb 30.00000%, #e6eaeb 34.00000%, #e8eced 38.00000%, #eaeef1 42.00000%, #ecf0f3 46.00000%, #ebf0f4 50.00000%, #edf2f6 54.00000%, #eff4fa 58.00000%, #f1f6fc 62.00000%, #f7f7f7 66.00000%, #f7f7f7 70.00000%, #f8f8f8 74.00000%, #f9f9f9 78.00000%, #fbfbfb 82.00000%, #fcfcfc 86.00000%, #fdfdfd 90.00000%, #fdfdfd 94.00000%, #fefefe 98.00000%; }
.gallery-cover .left-border::before { display: none; }
.gallery-cover .left-border::after { left: 0; background: linear-gradient(to right, var(--frame-color-stops)); }
.gallery-cover .navigation::before { background: linear-gradient(to bottom, var(--frame-color-stops)); }
.gallery-cover .cover-bottom-skin { background: linear-gradient(to top, var(--frame-color-stops)); }
.gallery-cover .horizontal-scroll { --thumb-fill: linear-gradient(to top, var(--frame-color-stops)); }
.gallery-cover .bottom-border > img { visibility: hidden; }
.gallery-cover .bottom-border::before { left: 0; width: var(--left-frame-width); }
.gallery-cover .navigation::after,
.gallery-cover .bottom-border::after,
.gallery-cover .bottom-border::before {
  background: linear-gradient(var(--corner-vertical), var(--frame-color-stops)), linear-gradient(var(--corner-horizontal), var(--frame-color-stops));
  background-blend-mode: darken;
}

/* Save failures are visible without changing the photograph's geometry. */
.likes-notice { position: fixed; z-index: 30; left: 50%; bottom: 40px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 10px 14px; border: 1px solid #b8d1df; border-radius: 5px; background: #fff; color: #23485f; box-shadow: 0 2px 12px #0003; font: 14px/1.4 system-ui, sans-serif; }
.likes-notice[hidden] { display: none; }
.viewer-like:disabled { cursor: default; }

/* Transparent horizontal thumb over the expanding menu corner.
   Keep the immersive photo scrollbar and forced-color accessibility unchanged. */
@media (forced-colors: none) {
  body:not(.gallery-cover) .horizontal-scroll {
    --thumb-fill: linear-gradient(to top,
      rgba(80, 153, 190, .85) 0%,
      rgba(109, 170, 203, .65) 12%,
      rgba(139, 194, 219, .35) 35%,
      rgba(167, 211, 231, .12) 60%,
      rgba(167, 211, 231, 0) 85%);
    --thumb-opacity: .65;
    --thumb-saturation: 1;
    --thumb-feather: min(20px, 25%);
  }
  body:not(.gallery-cover) .horizontal-scroll:enabled:is(:active, :focus-visible) {
    --thumb-opacity: .95;
    --thumb-saturation: 1;
  }
}
@media (forced-colors: none) and (hover: hover) {
  body:not(.gallery-cover) .horizontal-scroll:enabled:hover:not(:active) {
    --thumb-opacity: .85;
    --thumb-saturation: 1;
  }
}