/* The home page — "Featured" (featured.js): one gallery (or one
   composition), full screen, then the way in. */
:root{
  --featured-bg:#141311;
  --text:#EDE8DD;
  --accent:#BE8C4A;
  --gold:#D8B36E;                /* the name's gold */
  --featured-move: 1200ms;       /* how long a photo takes to come out / go back (FEATURED_MOVE_MS) */
  /* the Biography / News / "?" dialogs (base.css's .site-dialog) */
  --bg:#2A2823;
  --bg-elevated:#34322C;
  --text-muted:#ABA398;
  --border:#454239;
}
html, body{ height:100%; overflow:hidden; background: var(--featured-bg); color: var(--text); }
body{ cursor: default; }
body.click-to-advance{ cursor: pointer; }

/* The background: every photo of the gallery as a thumbnail, covering the
   whole screen, in an extreme halftone — grey, dimmed and seen only through
   a grid of small dots (the ::after screen). */
.featured-bg{
  position:fixed; inset:0;
  display:grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
}
.featured-tile, .featured-stage{ position:relative; overflow:hidden; background: var(--featured-bg); }
.featured-tile img, .featured-stage img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter: var(--ht-filter, grayscale(1) contrast(1.15) brightness(0.48));   /* HALFTONE_* in constants.js */
}
.featured-tile::after, .featured-stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: var(--ht-screen, radial-gradient(circle, transparent 0 1.7px, rgba(20,19,17,0.7) 2.4px));
  background-size: var(--ht-spacing, 5px) var(--ht-spacing, 5px);
}
.featured-tile.lifted{ visibility:hidden; }   /* its photo is out, enlarged */

/* The photo being looked at: starts exactly over its tile, then grows to
   the largest size that fits the screen, losing the halftone on the way;
   going back, the other way round. */
.featured-stage-layer{ position:fixed; inset:0; pointer-events:none; z-index:2; }
.featured-stage{
  position:absolute;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85);
  transition:
    left var(--featured-move) cubic-bezier(.3,0,.2,1),
    top var(--featured-move) cubic-bezier(.3,0,.2,1),
    width var(--featured-move) cubic-bezier(.3,0,.2,1),
    height var(--featured-move) cubic-bezier(.3,0,.2,1);
}
.featured-stage img, .featured-stage::after{ transition: filter var(--featured-move) ease, opacity var(--featured-move) ease; }
.featured-stage.clear img{ filter:none; }
.featured-stage.clear::after{ opacity:0; }

/* A composition: the cover becomes a card shaped like an Instagram post
   (4:5) — the cover blurred and darkened behind, then the words, all sized
   by --u (1% of the card's height, set by featured.js). */
.featured-stage.is-post > img{ transition: filter var(--featured-move) ease, transform var(--featured-move) ease; }
.featured-stage.is-post.post-on > img{
  filter: blur(calc(var(--u, 8px) * 2.4)) brightness(0.42) saturate(1.15);
  transform: scale(1.12);
}
.featured-post{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: calc(var(--u, 8px) * 6) calc(var(--u, 8px) * 7);
  text-align:center;
  opacity:0;
  transition: opacity 0.9s ease;
}
.featured-stage.post-on .featured-post{ opacity:1; }
.featured-post .post-cover{
  width: calc(var(--u, 8px) * 46); height: calc(var(--u, 8px) * 46);
  object-fit:cover; filter:none !important;
  border-radius: calc(var(--u, 8px) * 0.8);
  box-shadow: 0 calc(var(--u, 8px) * 2) calc(var(--u, 8px) * 6) rgba(0,0,0,0.6);
  margin: calc(var(--u, 8px) * 3) 0 calc(var(--u, 8px) * 3.2);
}
.post-artist{
  font-family: var(--font-body); font-weight:600;
  font-size: calc(var(--u, 8px) * 1.9);
  letter-spacing:0.32em; text-transform:uppercase;
  color: var(--text); opacity:0.9;
}
.post-album{
  font-family: var(--font-body); font-weight:600;
  font-size: calc(var(--u, 8px) * 1.7);
  letter-spacing:0.25em; text-transform:uppercase;
  color: var(--accent);
  margin-bottom: calc(var(--u, 8px) * 0.8);
}
.post-title{
  font-family: var(--font-display); font-weight:500;
  font-size: calc(var(--u, 8px) * 5.6);
  line-height:1.05;
}
.post-meta{ font-size: calc(var(--u, 8px) * 1.9); opacity:0.75; margin-top: calc(var(--u, 8px) * 0.9); }
.post-desc{
  font-size: calc(var(--u, 8px) * 2.2); line-height:1.35;
  max-width: 88%; margin-top: calc(var(--u, 8px) * 1.6);
  opacity:0.92;
}
.post-logos{ display:flex; gap: calc(var(--u, 8px) * 2); margin-top: calc(var(--u, 8px) * 2.8); pointer-events:auto; }
.post-logo{ display:block; width: calc(var(--u, 8px) * 4.6); height: calc(var(--u, 8px) * 4.6); line-height:0; }
.post-logo svg{ width:100%; height:100%; }
.post-logo:hover{ transform: translateY(-2px); }

/* The gallery's name, bottom left. */
.featured-title{
  position:fixed; left: clamp(16px, 3vw, 40px); bottom: calc(clamp(12px, 2.5vh, 28px) + 0.9rem);
  z-index:3;
  font-family: var(--font-display);
  font-weight:500;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height:1.1;
  text-shadow: 0 2px 18px rgba(0,0,0,0.9);
  pointer-events:none;
  transition: opacity 0.8s ease;
}
html.chosen .featured-title{ opacity:0; }
.featured-title.changing{ opacity:0; transition-duration:0.35s; }

/* The words over the slideshow: a dark outline so they read on anything. */
.featured-name, .featured-hint, .featured-btn, .featured-sound, .choice{
  text-shadow: 0 0 22px rgba(0,0,0,0.75), 1px 1px 0 rgba(30,26,20,0.8), -1px 1px 0 rgba(30,26,20,0.8), 1px -1px 0 rgba(30,26,20,0.8), -1px -1px 0 rgba(30,26,20,0.8);
}
/* The top line: "Antonio Sbrolli" on the left (the home page's name: Inter,
   the gold), and on the same line, on the right, the speaker, Biography,
   News, "?" — always working. */
.featured-head{
  position:fixed; top: var(--space-4); left: var(--space-3); right: var(--space-3); z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap: 1rem;
  pointer-events:none;
}
.featured-head > *{ pointer-events:auto; }
.featured-name{
  font-family: var(--font-body); font-weight:600;
  font-size: clamp(2rem, 4.6vw, 3.4rem); line-height:1.05;
  color: var(--gold);
  white-space:nowrap;
}
.featured-name a{ color:inherit; }
.featured-ui{ display:flex; align-items:center; gap: 1.1rem; flex:none; }
.featured-btn .lbl-short{ display:none; }
.featured-btn{
  background:none; border:none; padding:0;
  font-family: var(--font-display); font-style:italic; font-size:0.95rem;
  color:#fff;
  border-bottom:1px solid transparent;
}
.featured-btn:hover{ border-color: rgba(255,255,255,0.7); }
.featured-btn.help-btn{
  width:1.5rem; height:1.5rem;
  border:1px solid rgba(255,255,255,0.75); border-radius:50%;
  font-family: var(--font-body); font-style:normal; font-size:0.8rem; font-weight:600;
  line-height:1; display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 0 12px rgba(0,0,0,0.35);
}
.featured-btn.help-btn:hover{ border-color:#fff; background: rgba(255,255,255,0.15); }
/* The music: a speaker, crossed out while silent (a click turns it on). */
.featured-sound{
  width:2.1rem; height:2.1rem; padding:0.3rem;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(20,19,17,0.45); color:#fff;
  border:1px solid rgba(255,255,255,0.55); border-radius:50%;
  cursor:pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.featured-sound[hidden]{ display:none; }
.featured-sound svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.featured-sound .icon-on{ display:none; }
.featured-sound.is-on .icon-on{ display:block; }
.featured-sound.is-on .icon-off{ display:none; }
.featured-sound:hover{ border-color: var(--gold); color: var(--gold); }
.featured-sound:not(.is-on){ animation: sound-call 2.4s ease-in-out 3; }   /* a few soft pulses: there's music */
@keyframes sound-call{ 50%{ box-shadow: 0 0 0 6px rgba(216,179,110,0.25); } }

/* The title of the track heard (featured.js, while the music plays): bottom
   right, on the copyright line's level. */
.now-playing{
  position:fixed; right: var(--space-3); bottom:0.35rem; z-index:6;
  max-width: 38vw;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family: var(--font-display); font-style:italic; font-size:0.85rem;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9);
  opacity:0; transition: opacity 0.45s ease;
  pointer-events:none;
}
.now-playing.on{ opacity:0.92; }
.now-note{ font-style:normal; margin-right:0.15rem; }
@media (max-width: 720px){
  /* phones: above the copyright line (which is centred) */
  .now-playing{ right: var(--space-2); bottom:1.35rem; max-width: 55vw; font-size:0.78rem; }
}

/* The photography lightbox's "Slideshow": only the photos (and the copyright
   line) — no name, buttons, music, words — and × to close it, top right. */
html.slideshow .featured-head, html.slideshow .featured-title, html.slideshow .featured-hint,
html.slideshow .featured-choice, html.slideshow .now-playing{ display:none; }
/* behind the slideshow, as behind the lightbox: only PAGE_HALFTONE_STRENGTH shows through */
html.slideshow .featured-bg::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: var(--featured-bg); opacity: var(--pht-veil, 0);
}
/* the slideshow's caption: the photo's place and description, under it */
.featured-caption{
  position:fixed; left:0; right:0; bottom: calc(clamp(12px, 2.5vh, 28px) + 0.9rem); z-index:3;
  max-width: 52rem; margin: 0 auto; padding: 0 var(--space-3);
  text-align:center;
  text-shadow: 0 0 16px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9);
  opacity:0; transition: opacity 0.6s ease;
  pointer-events:none;
}
.featured-caption[hidden]{ display:none; }
.featured-caption.on{ opacity:1; }
.cap-place{ color: var(--accent); font-size:0.95rem; }
.cap-desc{ color: var(--text); opacity:0.8; font-size:0.9rem; line-height:1.45; margin-top:0.25rem; }
.cap-desc:empty, .cap-place:empty{ display:none; }
.featured-close{
  position:fixed; top: clamp(10px, 2vh, 22px); right: clamp(14px, 2.5vw, 30px); z-index:6;
  width:2.4rem; height:2.4rem;
  display:flex; align-items:center; justify-content:center;
  background: rgba(20,19,17,0.55); color: var(--text);
  border:1px solid rgba(237,232,221,0.5); border-radius:50%;
  font-size:1.6rem; line-height:1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.featured-close:hover{ color: var(--gold); border-color: var(--gold); }
/* phones and tablets, after a tap (featured.js): the photos alone, on the whole screen, on black */
html.slideshow-full, html.slideshow-full body{ background:#000; }
html.slideshow-full .featured-bg{ opacity:0; transition: opacity 0.6s ease; }
html.slideshow-full .featured-caption, html.slideshow-full .featured-close{ display:none; }

/* very narrow phones (under 360px): even with "Bio" the line doesn't fit — no "?" */
@media (max-width: 359px){ .featured-btn.help-btn{ display:none; } }

/* "Click to continue": bottom centre, once the page reacts. */
.featured-hint{
  position:fixed; bottom: calc(clamp(12px, 2.5vh, 28px) + 0.9rem); left:0; right:0; z-index:3;   /* over the copyright line */
  text-align:center;
  font-family: var(--font-body); font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  letter-spacing:0.12em; text-transform:uppercase;
  color: var(--gold);
  opacity:0; transition: opacity 1.2s ease;
  pointer-events:none;
}
.featured-hint.on{ opacity:0.9; }

/* The way in (after "Click to continue"): Photography on the left,
   music on the right — the words of the old home page — over a dark
   band at the bottom; the slideshow goes on above. */
.featured-choice{
  position:fixed; left:0; right:0; bottom:0; z-index:4;
  display:flex; justify-content:space-between; align-items:flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) calc(clamp(12px, 2.5vh, 28px) + 1.6rem);
  background: linear-gradient(180deg, rgba(20,19,17,0), rgba(20,19,17,0.82) 45%);
  opacity:0; transform: translateY(12px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.featured-choice[hidden]{ display:none; }
.featured-choice.on{ opacity:1; transform:none; }
.choice{ display:flex; flex-direction:column; align-items:flex-start; color: var(--text); max-width: 30rem; }
.choice-music{ align-items:flex-end; text-align:right; }
.choice-video{ align-items:center; text-align:center; }
.choice[hidden]{ display:none; }
.choice-title{ font-family: var(--font-display); font-weight:500; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height:1.05; margin-bottom: var(--space-2); }
.choice-link{ display:inline-flex; font-size:1rem; padding-bottom:2px; border-bottom:1px solid currentColor; }
.choice-photo .choice-link{ color: var(--accent); }
.choice-music .choice-link{ color:#85A2B4; }
.choice-video .choice-link{ color: var(--gold); }
.choice:hover .choice-title{ color: var(--gold); }
.choice:hover .choice-link{ border-bottom-width:2px; }

@media (max-width: 1024px){
  .featured-head{ top: var(--space-3); }
  .featured-name{ font-size: clamp(1.7rem, 4.6vw, 2.6rem); }
}
@media (max-width: 720px){
  /* phones: all on one line — "Bio" for Biography, smaller gaps */
  .featured-head{ top: var(--space-2); left: var(--space-2); right: var(--space-2); gap: 0.6rem; }
  .featured-name{ font-size: clamp(1.25rem, 5.6vw, 1.8rem); }
  .featured-ui{ gap: 0.75rem; }
  .featured-btn .lbl-long{ display:none; }
  .featured-btn .lbl-short{ display:inline; }
  .featured-sound{ width:1.85rem; height:1.85rem; }
  .featured-hint{ bottom: calc(clamp(12px, 2.5vh, 28px) + 3.4rem); }   /* above the gallery's name */
  .featured-choice{ padding: var(--space-3) var(--space-2) calc(clamp(12px, 2.5vh, 28px) + 1.4rem); gap: var(--space-2); }
  .choice-title{ font-size: clamp(1.5rem, 7.5vw, 2.2rem); margin-bottom: var(--space-1); }
  .choice-link{ font-size:0.85rem; }
}
@media (prefers-reduced-motion: reduce){ :root{ --featured-move: 1ms; } }

/* The frame around the photo out (as in the photography lightbox): drawn
   outside it, growing in as the photo comes out and going as it goes back. */
.featured-stage{ outline: 0 solid var(--photo-frame-color, #D8B36E); transition-property: left, top, width, height, outline-width; }
.featured-stage.clear{ outline-width: var(--photo-frame, 2px); }
/* full screen (phones and tablets, after a tap): no frame */
html.slideshow-full .featured-stage, html.slideshow-full .featured-stage.clear{ outline-width:0; }

/* the copyright line (.landing-rights in base.css) */
.featured-rights{ z-index:5; }

/* The mosaic appearing (revealMosaic in featured.js): each tile from black,
   a little smaller, to its place. */
.featured-tile{ transition-property: opacity, transform; transition-timing-function: ease-out; }
.featured-tile.tile-wait{ opacity:0; transform: scale(0.82); }