/* Eugenio Carmi archive — site design (step 5, revision 2).
   Black only. Font: Helvetica (installed on Apple devices; Arial elsewhere). No font files, no external requests. */

:root {
  --ink: #111;
  --muted: #777;
  --line: #e4e4e4;
  --paper: #fff;
  --header: 84px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
       font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.text a, .notes a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bar { padding: 0 var(--gap); }

/* header and footer share the same bar */
.site-header, .site-footer { flex: none; background: var(--paper); }
.site-header .bar { height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo img { width: 118px; height: auto; }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a { font-size: 15px; letter-spacing: .01em; color: var(--muted); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); text-decoration: none; }
.languages { display: flex; gap: .6rem; margin-left: .75rem; }
.languages a { font-size: 15px; color: var(--muted); }
.languages a[aria-current] { color: var(--ink); }
.site-footer .bar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 13px; }
.menu-button { display: none; }

/* top bar (logo + menu) stays at the top while the page scrolls */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--paper); }

/* sub-menu: a column on the left, under the logo (Oliver, 14 Nov 2026); the second level is nested under the current item */
.subnav ul { list-style: none; margin: 0; padding: 0; }
.subnav li a { font-size: 14px; line-height: 1.35; color: var(--muted); }
.subnav li a:hover { color: var(--ink); text-decoration: none; }
.subnav li a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.subnav .level-2 a { font-size: 13px; }
@media (min-width: 1000px) {
  :root { --side: 270px; }
  .screen:has(> .subnav) { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
  .screen > .topbar { grid-column: 1 / -1; }
  .screen > .subnav { grid-column: 1; position: sticky; top: var(--topbar-h, var(--header)); max-height: calc(100vh - var(--topbar-h, var(--header)));
    overflow-y: auto; scrollbar-width: none; padding: clamp(1.5rem, 4vw, 3rem) 1rem 2rem var(--gap); }
  .screen > .subnav::-webkit-scrollbar { display: none; }
  .screen:has(> .subnav) > main { grid-column: 2; padding-left: 1rem; }
  .subnav li { margin: 0 0 .55rem; }
  .subnav .level-2 { padding: .55rem 0 .25rem .9rem; }
  .subnav .level-2 li { margin-bottom: .4rem; }
  /* biography (split pages): the column fills the screen height next to the text and images */
  .is-split .screen:has(> .subnav) { display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
  .is-split .screen > .subnav { position: static; max-height: none; padding-top: 1.5rem; }
  .is-split .screen:has(> .subnav) > main { height: 100%; }
}
/* phones and small tablets: sub-menu as lines of links above the page; the second level on its own line */
@media (max-width: 999px) {
  .subnav { padding: .4rem var(--gap) .5rem; }
  .subnav ul { display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; }
  .subnav .level-1 > li:has(> ul) { display: contents; }
  .subnav .level-2 { order: 99; flex-basis: 100%; padding-top: .5rem; gap: .35rem 1.5rem; }
}

/* main */
.screen { flex: 1 0 auto; display: flex; flex-direction: column; }
main { flex: 1 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--gap) clamp(3rem, 6vw, 5rem); }
h1, h2, h3 { font-weight: 400; line-height: 1.2; margin: 0 0 .8em; }
h1 { font-size: 26px; }
h2 { font-size: 19px; margin-top: 1.6em; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 1em; }
.text { max-width: 62ch; }
/* introduction of a section (Umberto Eco's quote, under the Monografie title) */
.section-intro { max-width: 62ch; margin: 0 0 3.5rem; }
.template-publication-category h1.section-title { padding-top: 0; margin-bottom: 1.25rem; }
.template-publication-category h1.section-title + .works { margin-top: 2rem; }
.publication-view .author { margin: -.75rem 0 1.25rem; }
.publication-view .doc-link { font-size: 14px; margin-top: 1.25rem; }
.publication-view .doc-link a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.publication-view .doc-link small { color: var(--muted); }
.section-intro p:last-child { margin-bottom: 0; }
.muted, .date, .breadcrumb { color: var(--muted); }
.breadcrumb { font-size: 13px; margin: 0 0 1.5rem; }
strong { font-weight: 700; }

/* home: one full-page image */

/* split layout: text left, images right (each column scrolls on its own) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--gap) * 2); }
/* split pages: no empty band at the bottom; the images end at the screen edge or right above the footer */
.is-split main { padding-bottom: 0; }
.split .col-text h1 { margin-bottom: 1.2rem; }
/* text in the split layout uses more of its column (about 75 characters per line) */
.split .col-text .text, .split .col-text .notes { max-width: 75ch; }
.split .col-images { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
/* centre vertically when the images are shorter than the column, scroll normally when longer */
.split .col-images > :first-child { margin-top: auto; }
.split .col-images > :last-child { margin-bottom: auto; }
.split .col-images figure { margin: 0; flex: none; }
.split .col-images img { width: 100%; height: auto; }
.split .col-images figcaption { max-width: none; }
.split .col-images .works { align-self: stretch; }
figcaption { font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: .6rem; max-width: 60ch; }
@media (min-width: 1000px) {
  .is-split .screen { height: 100vh; height: 100svh; display: flex; flex-direction: column; }
  .is-split main { flex: 1 1 auto; min-height: 0; padding-top: 1.5rem; padding-bottom: 0; }  /* columns run to the bottom edge of the screen */
  .is-split .split { height: 100%; }
  .is-split .col-text, .is-split .col-images { overflow-y: auto; padding-bottom: 3rem; scrollbar-width: none; -ms-overflow-style: none; }
  .is-split .col-text::-webkit-scrollbar, .is-split .col-images::-webkit-scrollbar { display: none; }
}

/* works grid (category pages, right column) */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2.5rem var(--gap); align-content: start; }
.works a { display: flex; flex-direction: column; }
.works a:hover { text-decoration: none; }
.works .frame { height: 180px; display: flex; align-items: flex-end; }
.works .frame img { max-height: 100%; width: auto; }
.works .title { margin-top: .7rem; font-size: 13px; line-height: 1.35; font-style: italic; }
.works .year { font-size: 13px; color: var(--muted); }
.works a:hover .title { text-decoration: underline; }

/* works overview: categories as cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2.5rem var(--gap); }
.card .frame { aspect-ratio: 1; display: flex; align-items: flex-end; }
.card .frame img { max-height: 100%; width: auto; }
.card .label { display: block; margin-top: .7rem; font-size: 13px; }
.card .count { display: block; font-size: 13px; color: var(--muted); }
.card:hover { text-decoration: none; }
.card:hover .label { text-decoration: underline; }
.group-title { font-size: 13px; font-weight: 400; color: var(--muted); margin: 3rem 0 1.2rem; }
.group-title:first-of-type { margin-top: 0; }

/* single work */
.work-info h1 { font-style: italic; margin-bottom: .3rem; }
.work-info .year { margin-bottom: 1.5rem; }
.facts { margin: 0 0 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.25rem; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.notes { font-size: 14px; max-width: 62ch; }
.pager { display: flex; gap: 1.5rem; margin-top: 2.5rem; font-size: 13px; color: var(--muted); }
.pager a:hover { color: var(--ink); }

/* other templates (to be designed after approval) */
.list { list-style: none; padding: 0; }
.list li { margin: .3rem 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2rem var(--gap); }
.grid img { width: 100%; height: 180px; object-fit: contain; object-position: left bottom; }
.grid .meta { font-size: 13px; margin-top: .5rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); margin: 2.5rem 0; align-items: end; }
.news-date { color: var(--muted); font-size: 13px; }
.documents { list-style: none; padding: 0; }
.documents li { margin: .3rem 0; }

/* video: click to load */
.video { position: relative; max-width: 760px; aspect-ratio: 16 / 9; background: #111; margin: 1rem 0 3rem; }
.video-play { all: unset; cursor: pointer; display: block; width: 100%; height: 100%; position: relative; }
.video-play img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-label { position: absolute; left: 1rem; bottom: 1rem; background: #fff; padding: .4rem .8rem; font-size: 13px; }
.video iframe { width: 100%; height: 100%; border: 0; }
/* Eventi: one event per line (like Video): image left, date + title + text right; months in the left column */
.event-month { margin-bottom: 0; }
.event-item { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding-bottom: 4rem; }
@media (min-width: 1000px) { .event-item { grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.event-image img { width: 100%; height: auto; max-height: 320px; object-fit: contain; object-position: left top; }
@media (max-width: 999px) { .event-image img { width: auto; max-width: 100%; max-height: 260px; } }
.event-item { padding-bottom: 3rem; }
.event-date { font-size: 13px; color: var(--muted); margin: 0 0 .35rem; }
.event-text h2 { font-size: 19px; margin: 0 0 1rem; }
.event-text .text { font-size: 14px; line-height: 1.55; max-width: 62ch; }
.event-text .text img { margin: 1rem 0; }

/* Video page: groups as headings (jump links in the left column), one video per line, description beside it */
.video-section { margin-bottom: 4.5rem; }
.video-section .section-title { margin-bottom: 1.75rem; padding-top: 0; }
.video-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }
@media (min-width: 1000px) {
  .video-item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; }
  .video-item .video { margin-bottom: 0 !important; }
}
.video-item .video, .video-single .video { max-width: none; margin: 0 0 1.25rem; }

.video-play img { opacity: 1; }
a.video-play:hover { text-decoration: none; }
.video-play:hover .video-label { background: var(--ink); color: #fff; }
.video-text { font-size: 14px; line-height: 1.5; max-width: 62ch; }
.video-text p { margin: 0 0 .5em; }
.video-title { font-size: 18px; font-weight: 400; line-height: 1.3; margin: 0 0 .6rem; }   /* the video's title, above its description */
.video-text > :last-child { margin-bottom: 0; }
.video-single { max-width: 960px; }
.video-back { font-size: 13px; color: var(--muted); margin-top: 2rem; }

/* phones and small tablets */
@media (max-width: 999px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 760px) {
  :root { --header: 68px; }
  .logo img { width: 96px; }
  .site-footer .bar { flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 1rem; padding-bottom: 1rem; }
}

/* stacked images: full column width, no gaps, caption in a white box on the image */
.scroll-wrap { position: relative; min-height: 0; }
.split .col-images.stack { display: block; gap: 0; position: relative; }
.split .col-images.stack > :first-child, .split .col-images.stack > :last-child { margin: 0; }
.stack-item { position: relative; margin: 0; }
.stack-item img { width: 100%; height: auto; display: block; }
.split .col-images .stack-item figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); margin: 0;
  background: #fff; color: var(--ink); font-size: 12px; line-height: 1.4; padding: 6px 9px; }
/* down arrow: shows that the image column continues */
.scroll-hint { position: absolute; right: 12px; bottom: 12px;
  /* same height as a one-line caption box: 12 px × 1.4 line + 6 px padding top and bottom */
  --box: calc(12px * 1.4 + 12px); width: var(--box); height: var(--box);
  border: 0; border-radius: 0; background: #fff; color: var(--ink); font: 400 14px/1 var(--font); display: flex; align-items: center; justify-content: center; text-align: center;
  cursor: pointer; padding: 0; transition: opacity .25s; }
.scroll-hint:hover { background: var(--ink); color: #fff; }
.scroll-hint.is-done { opacity: 0; pointer-events: none; }
@media (min-width: 1000px) {
  .is-split .scroll-wrap { height: 100%; }
  .is-split .col-text-wrap .col-text { height: 100%; }
  .is-split .col-images.stack, .is-split .col-images.fit { height: 100%; overflow-y: auto; padding-bottom: 0; }
}
@media (max-width: 999px) { .scroll-hint { display: none; } }

/* text column: soft white fade at the bottom while there is more text; gone at the end */
.has-fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.85) 100%); transition: opacity .3s; }
.has-fade.is-done::after { opacity: 0; }
@media (max-width: 999px) { .has-fade::after { display: none; } }

/* images keep the same white margin on the right as the text has on the left (Oliver, after trying a bleed) */

/* no visible page scroll bar (the page still scrolls with mouse, trackpad and keyboard) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

/* work page: each image fully visible, scaled to the height of the column; extra images follow below */
.split .col-images.fit { display: block; position: relative; }
.split .col-images.fit > :first-child, .split .col-images.fit > :last-child { margin: 0; }
.fit-item { margin: 0; height: var(--col-h, 75vh); display: flex; align-items: center; justify-content: center; }
.fit-item + .fit-item { margin-top: 0; }
.fit-frame { position: relative; display: inline-block; max-width: 100%; }
.fit-frame img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(var(--col-h, 75vh) * .8); }
.fit-frame figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); margin: 0;
  background: #fff; color: var(--ink); font-size: 12px; line-height: 1.4; padding: 6px 9px; }
@media (max-width: 999px) {
  .fit-item { height: auto; }
  .fit-frame img { max-height: 80vh; }
}

/* arrows between works: same small square as the image arrow */
.work-nav { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; font-size: 13px; color: var(--muted); }
.nav-arrow { --box: calc(12px * 1.4 + 12px); width: var(--box); height: var(--box); display: inline-flex; align-items: center; justify-content: center;
  font: 400 14px/1 var(--font); color: var(--ink); background: #fff; text-decoration: none; }
@media (hover: hover) { .nav-arrow:hover { background: var(--ink); color: #fff; text-decoration: none; } }
.nav-arrow:hover { text-decoration: none; }
.nav-arrow.is-off { opacity: .2; }
.work-nav .count { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }

/* works grid on category pages: images centred in their slot on a common bottom line, title and year centred below */
.template-category .works { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3.5rem 2.5rem; }
.template-category .works a { align-items: center; text-align: center; }
.template-category .works .frame { height: 220px; width: 100%; justify-content: center; align-items: flex-end; }
.template-category .works .frame img { max-height: 100%; max-width: 100%; }


/* single work, two columns: label always in the same place, towards the image, at the level of the bottom of the work area */
@media (min-width: 1000px) {
  .work-split .work-col-label { display: flex; justify-content: flex-end; align-items: flex-end; padding-bottom: calc(var(--col-h, 75vh) * .1); overflow: visible; }
  .work-label { width: 260px; max-height: calc(var(--col-h, 75vh) * .8); overflow-y: auto; scrollbar-width: none; }
  .work-label::-webkit-scrollbar { display: none; }
}
.work-label h1 { font-style: italic; font-size: 22px; margin: 0 0 .2rem; }
.work-label .year { margin: 0 0 1.2rem; }
.work-label .facts { font-size: 13px; margin-bottom: 1rem; }
.work-label .notes { font-size: 13px; }
.work-label .work-nav { margin-top: 1.5rem; }
@media (max-width: 999px) {
  .work-split .work-col-label { order: 2; }
  .work-split .col-images-wrap { order: 1; }
}

/* work group page: jump links, small headings, centred grid (same as the category grid) */
/* (jump links moved into the sub-menu) */
.jump a { color: var(--muted); }
.jump a:hover { color: var(--ink); }
.work-section { scroll-margin-top: calc(var(--topbar-h, var(--header)) + 1.5rem); margin-bottom: 3.5rem; }
.section-title { font-size: 22px; font-weight: 400; color: var(--ink); margin: 0 0 .5rem; padding-top: 1.5rem; }
.section-subtitle { font-size: 17px; font-weight: 400; color: var(--ink); margin: 0 0 1.75rem; }
.section-title + .works { margin-top: 1.5rem; }
.template-family .works, .template-publication-category .works { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3.5rem 2.5rem; }
.template-family .works a, .template-publication-category .works a { align-items: center; text-align: center; }
.template-family .works .frame, .template-publication-category .works .frame { height: 220px; width: 100%; justify-content: center; align-items: flex-end; }
.template-family .works .frame img, .template-publication-category .works .frame img { max-height: 100%; max-width: 100%; }

/* × on work pages: back to the group's grid */
.gv-close { position: absolute; top: 0; right: 0; --box: calc(12px * 1.4 + 12px); width: var(--box); height: var(--box);
  display: flex; align-items: center; justify-content: center; font: 300 22px/1 var(--font); color: var(--ink); background: #fff; z-index: 2; }
@media (hover: hover) { .gv-close:hover { background: var(--ink); color: #fff; text-decoration: none; } }

/* work pop-up on group pages: a white box centred on the screen, the page faintly visible behind it */
html.has-overlay { overflow: hidden; }
.work-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(255, 255, 255, .86);
  display: flex; align-items: center; justify-content: center; padding: 3vh 4vw; }
.work-overlay[hidden] { display: none; }
.work-popup { position: relative; background: #fff; border: 1px solid transparent;  /* TRIAL 15 Nov: no outline (was var(--ink)) */
  width: min(1240px, 100%); height: min(860px, 100%); --pt: 3rem; --pr: 2.25rem;
  padding: var(--pt) var(--pr) 0; overflow: hidden; }
.work-overlay.is-loading { cursor: progress; }
.work-overlay.is-loading .gallery-view { opacity: .35; transition: opacity .15s; }
.work-popup .gallery-view { height: 100%; }
.work-popup:focus { outline: none; }
/* keyboard focus on the × (Tab): frame drawn inside the square, so the box edge doesn't cut it */
.work-popup .gv-close:focus-visible { outline-offset: -4px; }
/* × sits in the box's top-right corner (sharing its border), always above the photo */
.work-popup .gv-close { top: calc(-1 * var(--pt) - 1px); right: calc(-1 * var(--pr) - 1px); }
@media (max-width: 999px) {
  .work-overlay { padding: 12px; }
  .work-popup { width: 100%; height: 100%; --pt: 3rem; --pr: 1rem; padding: var(--pt) var(--pr) 1.5rem; overflow-y: auto; scrollbar-width: none; }
  .work-popup::-webkit-scrollbar { display: none; }
}
/* single work, two columns like the biography: details left, photo(s) right */
.work-view { position: relative; }
.work-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--gap) * 2); }
.wv-info h1 { font-style: italic; margin: 0 0 .3rem; }
.wv-info .year { margin: 0 0 1.5rem; }
.wv-info .facts { font-size: 14px; margin: 0 0 1.5rem; }
.wv-info .notes { font-size: 14px; max-width: 62ch; }
.wv-info .work-nav { margin-top: 1.5rem; }
.wv-images-wrap { position: relative; min-height: 0; }
.wv-images { position: relative; }
.wv-item { margin: 0; }
.wv-frame { position: relative; display: inline-block; vertical-align: top; max-width: 100%; }
.wv-frame img { display: block; width: auto; height: auto; max-width: 100%; }
.wv-frame figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); margin: 0;
  background: #fff; color: var(--ink); font-size: 12px; line-height: 1.4; padding: 6px 9px; }
@media (min-width: 1000px) {
  .is-split .work-view, .work-popup .work-view { height: 100%; }
  .work-view .work-split { height: 100%; }
  /* left: details at the top, ← n / total → always at the bottom of the column */
  .wv-info { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .wv-info-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 1rem; }
  .wv-info-inner::-webkit-scrollbar { display: none; }
  .wv-info .work-nav { flex: none; margin: 0; padding: .75rem 0 1.25rem; }
  /* right: each photo fully visible (as tall as the column at most), stacked without gaps */
  .wv-images-wrap { height: 100%; }
  .wv-images { height: 100%; overflow-y: auto; scrollbar-width: none; }
  .wv-images::-webkit-scrollbar { display: none; }
  .wv-frame img { max-height: calc(var(--col-h, 75vh) - 1.25rem); }   /* stops 20 px above the bottom edge, level with the arrows' margin */
}
@media (max-width: 999px) {
  /* phones: section, title and year above the photo(s), so you know what you are looking at; details and arrows below */
  .work-split { grid-template-columns: 1fr; gap: 0; }
  .wv-info, .wv-info-inner { display: contents; }
  .wv-head { order: 0; margin-bottom: 1.25rem; }
  .wv-head .year { margin-bottom: 0; }
  .wv-images-wrap { order: 1; margin-bottom: 1.5rem; }
  .wv-info .facts { order: 2; }
  .wv-info .notes { order: 3; }
  .wv-info .work-nav { order: 4; }
  .wv-frame img { max-height: 80vh; }
  .wv-item + .wv-item { margin-top: 0; }
}

/* section label above the title of a work */
.wv-section { font-size: 13px; color: var(--muted); margin: 0 0 .5rem; }
/* works with several photos: full column width, stacked like the biography */
.work-view.has-many .wv-frame { display: block; width: 100%; }
.work-view.has-many .wv-frame img { width: 100%; max-height: none; }
@media (min-width: 1000px) { .work-view.has-many .wv-frame img { max-height: none; } }
/* back on the grid: the last work you looked at is briefly framed */
.works a .frame img { transition: outline-color .6s; outline: 1px solid transparent; outline-offset: 6px; }
.works a.is-last .frame img { outline-color: var(--ink); }
.works a.no-ring:focus-visible { outline: none; }

/* publications as a list (Testi critici, Scritti): one block per text, no dividing lines; only the title is a link (to the PDF) */
.pub-list { list-style: none; margin: 0; padding: 0; max-width: 980px; }
.pub-list li { padding: 0 0 2rem; }
.pub-list .pl-title { display: block; font-size: 18px; line-height: 1.3; color: var(--ink); }
.pub-list .pl-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pub-list .pl-sub { display: block; font-size: 15px; }
.pub-list .pl-author { display: block; font-size: 14px; margin-top: .35rem; color: var(--ink); }
.pub-list .pl-source { display: block; font-size: 13px; margin-top: .15rem; color: var(--muted); }
.template-publication-category h1.section-title + .pub-list, .section-intro + .pub-list { margin-top: 2rem; }

/* Page not found: one sentence, English then Italian */
.not-found p { margin: 0 0 .4rem; }


/* ---------- Phones (Oliver, 15 Nov 2026) ---------- */
/* 1. Menu: three lines that turn into ×; the menu opens as a white panel over the page, fading in */
@media (max-width: 760px) {
  .menu-button { display: block; position: relative; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); }
  .menu-button span { position: absolute; left: 9px; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s ease, opacity .2s ease; }
  .menu-button span:nth-child(1) { top: 13px; }
  .menu-button span:nth-child(2) { top: 19.5px; }
  .menu-button span:nth-child(3) { top: 26px; }
  .menu-open .menu-button span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-open .menu-button span:nth-child(2) { opacity: 0; }
  .menu-open .menu-button span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .js .nav { position: fixed; left: 0; right: 0; top: var(--topbar-h, var(--header)); bottom: 0; z-index: 60; background: var(--paper);
    display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; padding: 2rem var(--gap) 2.5rem; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; }
  .js.menu-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .28s ease, visibility 0s; }
  .js .nav a { font-size: 17px; color: var(--ink); }
  .js .nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
  .js .nav .languages { margin: auto 0 0; gap: 1.25rem; }
  .js .nav .languages a { font-size: 15px; color: var(--muted); text-decoration: none; }
  .js .nav .languages a[aria-current] { color: var(--ink); }
  .menu-open body { overflow: hidden; }
  .nav { flex-wrap: wrap; }   /* without JavaScript the links simply show under the logo */
}
@media (prefers-reduced-motion: reduce) { .menu-button span, .js .nav { transition: none !important; } }

/* 2. Sub-menu: one line per level showing where you are, with ▾; tap to see the other sections */
.subnav-pick { display: none; }
@media (max-width: 999px) {
  .js .subnav > ul { display: none; }
  .js .subnav-pick { display: block; }
  .subnav { padding: .25rem var(--gap) .75rem; }
  .pick summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem; padding: .5rem 0; font-size: 15px; color: var(--ink); }
  .pick summary::-webkit-details-marker { display: none; }
  .pick summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg); transition: transform .25s ease; }
  .pick[open] summary::after { transform: translateY(1px) rotate(-135deg); }
  .pick-2 summary { font-size: 14px; color: var(--muted); padding-top: .15rem; }
  .pick ul { list-style: none; margin: 0 0 .5rem; padding: .25rem 0 .5rem .9rem; border-left: 1px solid var(--line); display: block; }
  .pick li a { display: block; padding: .4rem 0; font-size: 15px; color: var(--muted); }
  .pick li a[aria-current] { color: var(--ink); }
}
@keyframes pick-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 3. Biography photos on phones: small squares, 3 per row, the first 9 + "see all"; tap = full-screen viewer */
@media (max-width: 999px) {
  .split .col-images.stack.as-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .as-grid .stack-item { cursor: zoom-in; }
  .as-grid .stack-item img { aspect-ratio: 1; object-fit: cover; width: 100%; height: auto; }
  .as-grid .stack-item figcaption { display: none; }
  .as-grid:not(.show-all) .stack-item:nth-child(n+10) { display: none; }
  .grid-more { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; margin: .75rem 0 0; padding: 1rem 0;
    font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; cursor: pointer; }
  .grid-more::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
}
@media (min-width: 1000px) { .grid-more { display: none; } }
.viewer:focus { outline: none; }
.viewer { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: flex; flex-direction: column; animation: pick-in .2s ease; }
.viewer-bar { flex: none; height: var(--header); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gap); font-size: 13px; color: var(--muted); }
.viewer-close { position: relative; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.viewer-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--gap) 2rem; }
.viewer-slide img { max-width: 100%; max-height: calc(100% - 5rem); width: auto; height: auto; object-fit: contain; }
.viewer-slide p { margin: .9rem 0 0; font-size: 13px; line-height: 1.4; color: var(--ink); text-align: center; max-width: 36rem; }
.viewer-open body { overflow: hidden; }

/* One × everywhere (menu, photo viewer, work pop-up): the same two thin lines as the menu button */
.gv-close, .viewer-close { font-size: 0; }
.gv-close::before, .gv-close::after, .viewer-close::before, .viewer-close::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 1.5px; background: currentColor; }
.gv-close::before, .viewer-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.gv-close::after, .viewer-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Phones: an opened work fills the screen (no box, nothing showing through); × exactly where the menu's × is */
@media (max-width: 999px) {
  .work-overlay { padding: 0; background: var(--paper); }
  .work-popup { border: 0; --pt: var(--header); padding-top: var(--pt); }
  .work-popup .gv-close { position: fixed; top: calc((var(--header) - 40px) / 2); right: calc(var(--gap) - 8px);
    width: 40px; height: 40px; background: none; color: var(--ink); z-index: 110; }
}



/* Phones: a work always shows title, photo and details on one screen; the ← n / total → bar is fixed at the bottom,
   in the same place for every work (Oliver, 15 Nov 2026). Changing work is instant (no dimming, no slide). */
@media (max-width: 999px) {
  .work-overlay.is-loading .gallery-view { opacity: 1; }
  .wv-info .work-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 105; margin: 0;
    display: flex; align-items: center; gap: 1rem; padding: .7rem var(--gap) calc(.7rem + env(safe-area-inset-bottom)); background: var(--paper); }
  .work-popup { padding-bottom: 5rem; }
  .template-work .work-view { padding-bottom: 5rem; }
  /* single photo: as large as possible while title, details and the arrows stay on screen */
  .work-view:not(.has-many) .wv-frame img { max-height: calc(100svh - var(--header) - 17rem); }
  .work-view:not(.has-many) .wv-images-wrap { margin-bottom: 1.1rem; }
}

/* Phones (round 1f): single photo centred; works with several photos read top to bottom:
   title → main photo (same size as a single work) → details → text → "Altre foto" → the other photos, one under the other,
   each centred, caption underneath. Long texts show their first lines + "Continua a leggere". Computer unchanged. */
@media (max-width: 999px) {
  .wv-item { text-align: center; }
  .work-view.has-many .wv-images-wrap, .work-view.has-many .wv-images { display: contents; }
  .work-view.has-many .wv-item:first-child { order: 1; margin-bottom: 1.1rem; }
  .work-view.has-many .wv-info .facts { order: 2; }
  .work-view.has-many .wv-info .notes, .work-view.has-many .notes-more { order: 3; }
  .work-view.has-many .thumbs-label { order: 4; }
  .work-view.has-many .wv-item:not(:first-child) { order: 5; margin-top: 2rem; }
  .work-view.has-many .wv-frame { display: inline-block; width: auto; }
  .work-view.has-many .wv-item:first-child img { width: auto; max-height: calc(100svh - var(--header) - 17rem); }
  .work-view.has-many .wv-item:not(:first-child) img { width: auto; max-height: 70svh; }
  .work-view.has-many .wv-frame figcaption { position: static; max-width: none; padding: .5rem 0 0; background: none; color: var(--muted); font-size: 12px; text-align: center; }
  .thumbs-label { margin: 2.25rem 0 0; font-size: 13px; color: var(--muted); }
  .wv-item img { cursor: zoom-in; }
  .notes.is-clamped { max-height: 4.65em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .notes-more { order: 3; display: flex; align-items: center; gap: .55rem; margin: .4rem 0 0; padding: .4rem 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
  .notes-more::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
}
@media (min-width: 1000px) { .thumbs-label, .notes-more { display: none; } }
/* phones: a white strip behind the × at the top, like the arrows bar at the bottom, so scrolled photos pass under it */
@media (max-width: 999px) {
  .work-popup::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--header); background: var(--paper); z-index: 104; }
}
/* phones: the work grows with its content (it had the screen's height, so the end of long texts hid under the arrows bar
   and could not be scrolled to — e.g. C'era una volta un re); the space for the bar is inside the work, which iOS respects */
@media (max-width: 999px) {
  .work-popup .gallery-view, .work-popup .work-view, .is-split .work-view { height: auto; }
  .work-popup { padding-bottom: 0; }
  .work-view { padding-bottom: 5.5rem; }
}

/* Phones: the sub-menu lines stay pinned under the top bar while the page scrolls (Oliver, 15 Nov 2026, option 3),
   so you always see where you are and can jump to any section from anywhere */
@media (max-width: 999px) {
  .js .subnav { position: sticky; top: var(--topbar-h, var(--header)); z-index: 40; background: var(--paper); }
  .pick ul { max-height: 60vh; overflow-y: auto; }
  .work-section, .video-section { scroll-margin-top: calc(var(--topbar-h, var(--header)) + var(--subnav-h, 0px) + 1rem); }
}
@media (max-width: 999px) {
  .js .subnav { padding-top: 0; padding-bottom: .45rem; }
  .pick summary { padding: .35rem 0; }
  .pick-2 summary { padding-top: 0; }
}
/* Publications with a cover behave like works on phones (Oliver, 15 Nov 2026): title, year, author above the cover;
   text and PDF link below; the rest as for works */
@media (max-width: 999px) {
  .wv-info .doc-link { order: 3; }
  .publication-view .wv-head .author { margin: .35rem 0 0; }
  .publication-view .notes { margin-top: 0; }
}
/* Phones: book covers smaller than works (about a third of the screen), so title, cover, text and PDF link fit on one
   screen for most publications; tap the cover to see it full-screen (Oliver, 15 Nov 2026) */
@media (max-width: 999px) {
  .publication-view .wv-item:first-child img, .publication-view:not(.has-many) .wv-frame img { max-height: 34svh; width: auto; }
  .publication-view .wv-item:first-child { margin-bottom: 1.1rem; }
}
@media (max-width: 999px) {
  .publication-view .wv-item:first-child img, .publication-view:not(.has-many) .wv-frame img { max-height: 26svh; }
  .publication-view .notes p { margin: 0 0 .55em; }
  .publication-view .doc-link { margin-top: .6rem; }
  .publication-view .wv-head { margin-bottom: 1rem; }
}

/* Phones (round 2, Oliver 15 Nov 2026) */
@media (max-width: 999px) {
  /* the same space (3rem) between the last item of every page and the footer */
  main { padding-bottom: 3rem; }
  .is-split main { padding-bottom: 3rem; }
  .work-section:last-of-type, .video-section:last-of-type { margin-bottom: 0; }
  .event-month:last-of-type .event-item:last-child { padding-bottom: 0; }
  .template-family .works, .template-publication-category .works { padding-bottom: 0; }
  /* "A Brief Outline of the Artist": the photo before the text */
  .split.image-first .col-images-wrap { order: -1; }
  /* Eventi: the months as a pinned line like the other sections; event headings land below it */
  .event-month, .event-item { scroll-margin-top: calc(var(--topbar-h, var(--header)) + var(--subnav-h, 0px) + 1rem); }
  /* phones: the same soft fade as the biography text column on the computer, only where a text continues below the
     screen's bottom edge (biography texts, texts of works and publications) — never over lists of works, videos, events */
  .scroll-fade { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 30; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.85) 100%);
    opacity: 0; transition: opacity .3s; }
  .scroll-fade.is-on { opacity: 1; }
  .work-overlay .scroll-fade { z-index: 104; }
}
@media (min-width: 1000px) { .scroll-fade { display: none; } }
/* computer: long texts in a work / publication (the left column scrolls): the same soft fade at its bottom edge */
@media (min-width: 1000px) {
  .wv-info-inner.text-fades { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), rgba(0,0,0,.45) calc(100% - 25px), rgba(0,0,0,.15) 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), rgba(0,0,0,.45) calc(100% - 25px), rgba(0,0,0,.15) 100%); }
}
/* Phones: events spaced exactly like the videos — 56 px of white between one event's last line and the next image
   (before: 118 px = the month section's margin + the event's padding + the last paragraph's margin) */
@media (max-width: 999px) {
  .event-month.work-section { margin-bottom: 0; }
  .event-item { padding-bottom: 3.5rem; }
  .event-text .text > :last-child, .event-text > :last-child { margin-bottom: 0; }
  .event-month:last-of-type .event-item:last-child { padding-bottom: 0; }
}
/* Event titles = video titles (18 px), on phones and computer (Oliver, 15 Nov 2026); 22 px stays for section headings */
.event-text h2.event-title, .event-item .event-text h2 { font-size: 18px; font-weight: 400; line-height: 1.3; margin: 0 0 .6rem; }

/* Phones — consistency pass (Oliver, 15 Nov 2026: "a thorough check of the mobile site") */
@media (max-width: 999px) {
  /* one size for the title at the top of every page and of every work / publication: 22 px (works stay italic) */
  main h1:not(.sr-only), .work-popup h1, .wv-head h1 { font-size: 22px; line-height: 1.25; }
  /* one size for all running text: biography, videos, events, works and publications, introductions, contacts: 15 px */
  .col-text .text, .video-text, .event-text .text, .wv-info .notes, .section-intro, .template-contacts main, .not-found { font-size: 15px; line-height: 1.55; }
  .video-text p, .event-text .text p, .wv-info .notes p { font-size: inherit; }
  .wv-info .facts, .publication-view .doc-link { font-size: 14px; }
  /* the same 48 px before the footer everywhere: no extra margin under the last paragraph or the "see all" link */
  .col-text .text > :last-child, .text > :last-child { margin-bottom: 0; }
  .grid-more { padding-bottom: 0; margin-bottom: 0; }
  /* opened works / publications: the same 20 px side margins as the pages */
  .work-popup { --pr: var(--gap); padding-left: var(--gap); padding-right: var(--gap); }
}
@media (max-width: 999px) {
  /* biography pages without photos: no empty photo column (it added 40 px before the footer) */
  .split .col-images-wrap:not(:has(img)) { display: none; }
}