/* ==========================================================================
   Parrucchiere Antonio
   Il serif dice le cose, il sans le cataloga.
   Nessun border-radius, nessuna ombra, nessuna media query: il responsive
   e ottenuto solo con flex-wrap, clamp() e minmax().
   ========================================================================== */

:root {
  --pa-bg: #EFEDE7;
  --pa-ink: #1C1A17;
  --pa-body: #33302A;
  --pa-secondary: #5A544B;
  --pa-tertiary: #777064;
  --pa-meta: #8A8375;
  --pa-meta-soft: #A39B8B;
  --pa-accent: #67324C;
  --pa-accent-hover: #8C4467;
  --pa-border-strong: #1C1A17;
  --pa-border-mid: #D6D0C4;
  --pa-border-soft: #E0DACE;
  --pa-placeholder: #E2DFD6;
  --pa-placeholder-ink: #9A9384;
  --pa-row-hover: #E7E4DC;

  --pa-serif: Newsreader, Georgia, serif;
  --pa-sans: Archivo, "Helvetica Neue", Arial, sans-serif;

  --pa-gutter: clamp(18px, 4vw, 44px);
  --pa-max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--pa-bg);
  color: var(--pa-ink);
  font-family: var(--pa-serif);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

a {
  color: var(--pa-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(103, 50, 76, .3);
}

a:hover { color: var(--pa-accent-hover); text-decoration-color: var(--pa-accent-hover); }

::selection { background: var(--pa-accent); color: var(--pa-bg); }

:focus-visible { outline: 2px solid var(--pa-accent); outline-offset: 2px; }

@keyframes paIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-screen { animation: none !important; }
  html { scroll-behavior: auto; }
}

.pa-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pa-bg);
  color: var(--pa-ink);
  font-family: var(--pa-sans);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--pa-ink);
  z-index: 90;
}

.pa-skip:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------- Struttura */

.pa-page { min-height: 100vh; background: var(--pa-bg); }

.pa-wrap {
  max-width: var(--pa-max);
  margin: 0 auto;
  padding: 0 var(--pa-gutter);
}

.pa-screen { animation: paIn .5s ease both; }
.pa-screen--photo { animation-duration: .4s; }

/* ------------------------------------------------------------ Barra di nav */

.pa-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(239, 237, 231, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pa-border-strong);
}

.pa-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 30px;
  min-height: 58px;
}

.pa-brand {
  font-family: var(--pa-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pa-ink);
  text-decoration: none;
  white-space: nowrap;
}

.pa-brand:hover { color: var(--pa-ink); }

.pa-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-left: auto;
}

.pa-nav a {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pa-secondary);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}

.pa-nav a:hover { color: var(--pa-accent-hover); }

.pa-nav a[aria-current="true"] {
  color: var(--pa-accent);
  border-bottom-color: var(--pa-accent);
}

/* -------------------------------------------------------- Testata sezione */

.pa-head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
  align-items: baseline;
  border-bottom: 1px solid var(--pa-border-strong);
  padding: clamp(40px, 6vw, 76px) 0 22px;
  margin: 0 0 clamp(34px, 5vw, 56px);
}

.pa-head--mid { margin-bottom: clamp(30px, 4vw, 48px); }
.pa-head--tight { margin-bottom: 26px; }

.pa-head--photo {
  padding: clamp(34px, 5vw, 64px) 0 20px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* ------------------------------------------------------ Righe a due colonne */

.pa-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
}

.pa-row--img { gap: 32px 48px; }

.pa-label {
  flex: 1 1 150px;
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-meta);
}

.pa-label--accent { color: var(--pa-accent); }
.pa-label--stacked { line-height: 1.9; }

.pa-content { flex: 999 1 520px; min-width: 0; }
.pa-content--article { flex: 999 1 540px; min-width: 0; }
.pa-content--beside { flex: 999 1 420px; min-width: 0; }

.pa-aside { flex: 1 1 260px; min-width: 0; }
.pa-aside--portrait { flex: 1 1 250px; min-width: 0; }
.pa-aside--hours { flex: 1 1 220px; min-width: 0; }

/* ------------------------------------------------------------ Tipografia */

.pa-h1 {
  flex: 999 1 520px;
  min-width: 0;
  font-family: var(--pa-serif);
  font-weight: 300;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--pa-ink);
  text-wrap: balance;
}

.pa-h1--home { font-size: clamp(40px, 7.4vw, 92px); }
.pa-h1--sub { font-size: clamp(34px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -.022em; }
.pa-h1--gallery { font-size: clamp(34px, 5.4vw, 68px); }
.pa-h1--photo { font-size: clamp(32px, 5vw, 58px); line-height: 1.04; letter-spacing: -.022em; }

.pa-h1 em { font-style: italic; color: var(--pa-accent); }

.pa-h2 {
  font-family: var(--pa-serif);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--pa-ink);
  text-wrap: balance;
}

.pa-h2--long { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; }
.pa-h2--alone { margin-bottom: 26px; }

.pa-p {
  font-family: var(--pa-serif);
  font-size: 20px;
  line-height: 1.62;
  color: var(--pa-body);
  margin: 0 0 22px;
  max-width: 60ch;
  text-wrap: pretty;
}

.pa-p--wide { max-width: 62ch; }
.pa-p--narrow { max-width: 52ch; }
.pa-p:last-child { margin-bottom: 0; }
.pa-p--gap { margin-bottom: 34px; }

.pa-p--art {
  font-size: 19px;
  line-height: 1.68;
  max-width: 66ch;
  margin: 0 0 20px;
}

.pa-p--art-last { margin-bottom: 24px; }
.pa-p--quote { margin-bottom: 12px; }

.pa-notice {
  font-family: var(--pa-serif);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--pa-ink);
  margin: 0 0 20px;
  max-width: 24ch;
  text-wrap: pretty;
}

.pa-notice--dove {
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.38;
  letter-spacing: 0;
  max-width: 30ch;
  margin-bottom: 18px;
}

.pa-lead {
  font-family: var(--pa-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--pa-secondary);
  margin: 0 0 26px;
  max-width: 56ch;
}

.pa-lead--body {
  font-size: 19px;
  line-height: 1.68;
  color: var(--pa-secondary);
  max-width: 66ch;
  margin-bottom: 22px;
  text-wrap: pretty;
}

.pa-aside-note {
  font-family: var(--pa-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--pa-tertiary);
  margin: 22px 0 0;
}

.pa-aside-note--flush { margin: 0; }

.pa-strong { font-weight: 500; color: var(--pa-ink); }
.pa-em { font-style: italic; }

.pa-source {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pa-meta);
  margin: 0;
}

.pa-source--spaced { margin-bottom: 34px; }

.pa-translation {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-accent);
  margin: 0 0 12px;
}

.pa-stack {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-meta);
  line-height: 1.9;
}

.pa-stack--accent { color: var(--pa-accent); }
.pa-stack--sign { color: var(--pa-secondary); line-height: 2; }

/* -------------------------------------------------------------- Immagini */

/* Il contenitore si stringe sull'immagine: niente grigio scoperto attorno
   alle foto piccole, e le foto grandi rientrano invece di sfondare. */
.pa-figure { position: relative; background: var(--pa-placeholder); width: fit-content; max-width: 100%; }
.pa-figure--gap { margin: auto auto 26px; width: fit-content;}
.pa-figure--card { margin: 0 0 14px; }
.pa-figure--thumb { margin: 0 0 10px; }
.pa-figure--logo { max-width: 260px; margin: auto auto 26px; }
.pa-figure--map { margin: auto auto clamp(40px, 6vw, 72px); width: fit-content; }

/* Celle di griglia (galleria, capitoli, staff): qui la forma la decide il
   contenitore, altrimenti ogni cella prende l'altezza della propria foto e
   la griglia si sfalsa. L'immagine resta centrata e mai ingrandita. */
.pa-figure--card,
.pa-figure--thumb {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.pa-figure--card > img,
.pa-figure--thumb > img { max-width: 100%; max-height: 100%; }

.pa-ratio-43 { aspect-ratio: 4 / 3; }
.pa-ratio-34 { aspect-ratio: 3 / 4; }
.pa-ratio-11 { aspect-ratio: 1 / 1; }

.pa-figure__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  font-family: var(--pa-sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pa-placeholder-ink);
}

.pa-figure__ph--lg { font-size: 11px; letter-spacing: .16em; }

.pa-figure img { position: relative; width: auto; height: auto; max-width: 100%; }

/* L'etichetta di sfondo serve solo finche' la foto non c'e': appena carica
   va nascosta, altrimenti resta leggibile accanto alle immagini piccole. */
.pa-figure--loaded .pa-figure__ph { display: none; }

.pa-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pa-placeholder);
  padding: 12px;
  width: fit-content;
  max-width: 100%;
}

.pa-plate img { max-width: 100%; height: auto; }
.pa-plate--photo { margin: auto auto 18px; }

.pa-caption {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pa-meta);
  margin: 12px 0 0;
}

.pa-caption--accent { color: var(--pa-accent); }

.pa-missing {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-placeholder-ink);
  padding: 26px 0;
  text-align: center;
  width: 100%;
}

/* -------------------------------------------------------------- Home: hero */

.pa-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 48px;
  align-items: flex-end;
  padding: clamp(46px, 8vw, 104px) 0 clamp(30px, 5vw, 56px);
}

.pa-figlabel {
  border-top: 1px solid var(--pa-border-strong);
  padding: 14px 0 0;
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-meta);
}

.pa-sign { margin: auto auto clamp(52px, 8vw, 96px); }

.pa-notice-row {
  border-top: 1px solid var(--pa-border-strong);
  padding: 26px 0 clamp(56px, 8vw, 92px);
  gap: 26px 48px;
}

.pa-indexlabel {
  border-top: 1px solid var(--pa-border-strong);
  padding: 14px 0 6px;
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-meta);
}

.pa-index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--pa-border-mid);
  text-decoration: none;
  color: inherit;
}

.pa-index:hover { background: var(--pa-row-hover); color: inherit; }

.pa-index__n {
  flex: 0 0 44px;
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--pa-meta-soft);
}

.pa-index__name {
  flex: 1 1 220px;
  font-family: var(--pa-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--pa-ink);
}

.pa-index__desc {
  flex: 1 1 200px;
  font-family: var(--pa-serif);
  font-size: 18px;
  color: var(--pa-tertiary);
}

.pa-closing { margin: clamp(56px, 8vw, 96px) 0 0; }
.pa-closing img { max-width: 100%; height: auto; margin-left: auto; margin-right: auto;}

/* --------------------------------------------------------------- Citazione */

.pa-quote {
  flex: 999 1 520px;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 1px solid var(--pa-accent);
}

.pa-quote p {
  font-family: var(--pa-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.5;
  color: var(--pa-ink);
  margin: 0 0 18px;
  max-width: 52ch;
  text-wrap: pretty;
}

.pa-quote cite {
  font-family: var(--pa-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pa-meta);
}

/* ----------------------------------------------------------------- Griglie */

.pa-grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.pa-grid--chapters { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pa-grid--staff { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.pa-grid--photos {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}

.pa-card { text-decoration: none; color: inherit; display: block; }
.pa-card:hover { color: inherit; }

.pa-card__n {
  font-family: var(--pa-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-meta-soft);
  margin: 0 0 6px;
}

.pa-card__title {
  font-family: var(--pa-serif);
  font-size: 23px;
  line-height: 1.2;
  color: var(--pa-ink);
}

.pa-card__name {
  font-family: var(--pa-serif);
  font-size: 26px;
  line-height: 1.15;
  color: var(--pa-ink);
}

.pa-card__role {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pa-meta);
  margin: 7px 0 0;
}

.pa-card__caption {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pa-secondary);
}

/* ------------------------------------------------------------ Navigazioni */

.pa-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: baseline;
  border-top: 1px solid var(--pa-border-mid);
  padding: 18px 0 0;
}

.pa-pager--photo {
  justify-content: space-between;
  gap: 16px 32px;
  padding: 18px 0 clamp(40px, 6vw, 72px);
}

.pa-pager a,
.pa-back {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pa-secondary);
}

.pa-pager a:hover, .pa-back:hover { color: var(--pa-accent-hover); }

.pa-pager a.pa-pager__home,
.pa-back {
  color: var(--pa-accent);
  border-bottom: 1px solid rgba(103, 50, 76, .35);
  padding: 0 0 3px;
}

.pa-peers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding: 0 0 clamp(30px, 4vw, 48px);
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pa-peers span { color: var(--pa-accent); }
.pa-peers a { color: var(--pa-meta); text-decoration: none; }
.pa-peers a:hover { color: var(--pa-accent-hover); }

/* ------------------------------------------------------- Rassegna stampa */

.pa-toc {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pa-border-soft);
  text-decoration: none;
  color: inherit;
}

.pa-toc:hover { background: var(--pa-row-hover); color: inherit; }

.pa-toc__n {
  flex: 0 0 26px;
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--pa-meta-soft);
}

.pa-toc__title {
  flex: 1 1 auto;
  font-family: var(--pa-serif);
  font-size: 19px;
  color: var(--pa-ink);
}

.pa-toc__source {
  font-family: var(--pa-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pa-meta);
  white-space: nowrap;
}

.pa-article {
  border-top: 1px solid var(--pa-border-strong);
  margin: clamp(30px, 5vw, 60px) 0 0;
  padding: 26px 0 0;
  scroll-margin-top: 80px;
}

/* -------------------------------------------------------- Elenchi compatti */

.pa-listrow {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pa-border-soft);
}

.pa-listrow--price { align-items: baseline; padding: 14px 0; }

.pa-listrow__line {
  font-family: var(--pa-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--pa-accent);
}

.pa-listrow__stop {
  font-family: var(--pa-serif);
  font-size: 19px;
  color: var(--pa-body);
}

.pa-listrow__service {
  font-family: var(--pa-serif);
  font-size: 20px;
  color: var(--pa-ink);
}

.pa-listrow__price {
  font-family: var(--pa-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--pa-meta-soft);
}

.pa-hours-label {
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-accent);
  margin: 0 0 14px;
}

.pa-hours {
  font-family: var(--pa-serif);
  font-size: 20px;
  line-height: 1.7;
  color: var(--pa-body);
}

.pa-hours-note {
  font-family: var(--pa-serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--pa-tertiary);
  margin: 16px 0 0;
}

/* ------------------------------------------------------- Mappa del sito */

.pa-sitemap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--pa-border-soft);
  text-decoration: none;
  color: inherit;
}

.pa-sitemap-row:hover { background: var(--pa-row-hover); color: inherit; }

.pa-sitemap-row__name {
  flex: 1 1 190px;
  font-family: var(--pa-serif);
  font-size: 20px;
  color: var(--pa-ink);
}

.pa-sitemap-row__desc {
  flex: 2 1 240px;
  font-family: var(--pa-serif);
  font-size: 17px;
  color: var(--pa-tertiary);
}

.pa-sitemap-row__path {
  font-family: var(--pa-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--pa-meta-soft);
}

/* ------------------------------------------------------------ Spaziature */

.pa-mb-block { margin-bottom: clamp(36px, 5vw, 56px); margin-left: auto; margin-right: auto;}
.pa-mb-large { margin-bottom: clamp(44px, 6vw, 72px); }
.pa-mb-small { margin-bottom: clamp(32px, 4vw, 48px); }
.pa-mb-flat { margin-bottom: clamp(20px, 3vw, 32px); }

.pa-pb-section { padding-bottom: clamp(40px, 6vw, 72px); }
.pa-pb-block { padding-bottom: clamp(36px, 5vw, 56px); }
.pa-pb-mid { padding-bottom: 44px; }
.pa-pb-flat { padding-bottom: 34px; }

.pa-notes {
  border-top: 1px solid var(--pa-border-mid);
  padding: 26px 0 clamp(40px, 6vw, 72px);
}

.pa-quotes {
  border-top: 1px solid var(--pa-border-strong);
  margin: clamp(30px, 5vw, 60px) 0 0;
  padding: 26px 0 clamp(40px, 6vw, 72px);
}

/* ---------------------------------------------------------------- Footer */

.pa-footer {
  border-top: 1px solid var(--pa-border-strong);
  margin: clamp(30px, 5vw, 60px) 0 0;
}

.pa-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 48px;
  align-items: flex-start;
  padding-top: 30px;
  padding-bottom: 56px;
}

.pa-footer__col {
  flex: 1 1 260px;
  font-family: var(--pa-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pa-meta);
  line-height: 2;
}

.pa-footer__col--links { display: flex; flex-direction: column; gap: 8px; line-height: normal; }
.pa-footer__col--tips { color: var(--pa-meta-soft); }

.pa-footer a { color: var(--pa-secondary); text-decoration: none; }
.pa-footer a:hover { color: var(--pa-accent-hover); }
.pa-footer__col--tips a { color: var(--pa-meta); white-space: nowrap;}