/* Hallmark · genre: editorial · macrostructure: Photographic · theme: custom "Ebony Heritage" · enrichment: real photography (library plate + portrait) · nav: N1a · footer: Ft4
 * tone: luxury-austere · anchor hue: 78 (brass) · redesign of Split Studio build (2026-10-09)
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }
a, button, input, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:target { scroll-margin-top: var(--space-md); }
body {
  margin: 0;
  background: var(--c-dark);
  color: var(--c-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 var(--space-sm); }
h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
::selection { background: var(--c-accent); color: var(--c-dark); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-sm); top: -4rem; z-index: 20; background: var(--c-accent); color: var(--c-dark); padding: var(--space-2xs) var(--space-sm); text-decoration: none; }
.skip:focus-visible { top: var(--space-sm); }

.textlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.textlink:hover { color: var(--c-accent); }
.textlink:active { color: var(--c-accent-hi); }

/* ---------- Top · N1a, sits on the photograph ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.top__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 5rem; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.top__links { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.top__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule) solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.top__links a:hover { border-bottom-color: var(--c-accent); }

/* ---------- Plate · the photograph is the hero ---------- */
.plate { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; overflow: clip; }
.plate picture { position: absolute; inset: 0; z-index: -2; }
.plate__img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; filter: grayscale(0.55) brightness(1.05) contrast(1.05); }
.plate picture::after { content: ""; position: absolute; inset: 0; background: oklch(30% 0.09 var(--c-hue)); mix-blend-mode: color; opacity: 0.75; }
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--c-scrim-mid) 0%, var(--c-scrim-none) 18%),
    linear-gradient(90deg, var(--c-scrim-strong) 0%, var(--c-scrim-mid) 36%, var(--c-scrim-none) 68%),
    linear-gradient(0deg, var(--c-scrim-mid) 0%, var(--c-scrim-none) 40%);
}
.plate__caption { padding-block: 9rem var(--space-2xl); }
.plate h1 {
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: 0.01em;
  max-width: 11ch;
}
.motto {
  margin-top: var(--space-md);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--c-on-dark-2);
}
.plate__line {
  margin-top: var(--space-xl);
  padding-top: var(--space-sm);
  border-top: var(--rule) solid var(--c-hair-on-photo);
  max-width: 36rem;
  color: var(--c-on-dark-2);
  font-variant-numeric: lining-nums;
}
.plate__line a { color: var(--c-on-dark); white-space: nowrap; }

/* ---------- Prose fold ---------- */
.prose { color-scheme: light; background: var(--c-paper); padding-block: var(--space-3xl) var(--space-2xl); }
.prose p {
  max-width: 34em;
  font-size: var(--text-prose);
  line-height: 1.5;
  color: var(--c-ink);
}
.prose p + p { color: var(--c-ink-2); }

/* ---------- Portrait plate (offset right, caption hangs left) ---------- */
.portrait { margin: 0; padding-bottom: var(--space-3xl); background: var(--c-paper); }
.portrait__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-lg); align-items: end; }
.portrait img { grid-column: 2; width: 100%; max-width: 34rem; aspect-ratio: 5 / 6; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.portrait figcaption {
  grid-column: 1; grid-row: 1;
  justify-self: end;
  max-width: 18rem;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--c-muted);
  padding-bottom: var(--space-sm);
}

/* ---------- Index of subjects (ivory, like a code's index) ---------- */
.index { color-scheme: light; background: var(--c-paper); color: var(--c-ink); padding-block: var(--space-2xl) var(--space-3xl); }
.index ::selection { background: var(--c-ink); color: var(--c-paper); }
.index :focus-visible { outline-color: var(--c-focus-on-paper); }
.index__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 3px double var(--c-ink);
}
.index__head h2 { font-size: var(--text-3xl); }
.index__head p { margin: 0; max-width: 30rem; color: var(--c-ink-2); }
.index__list { margin: var(--space-xl) 0 0; columns: 3 17rem; column-gap: var(--space-2xl); column-rule: var(--rule) solid var(--c-rule); }
.index__list > div { break-inside: avoid; margin-bottom: var(--space-lg); }
.index__list dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.2;
}
.index__list dd { margin: var(--space-3xs) 0 0; color: var(--c-ink-2); hyphens: auto; }

/* ---------- Contact ---------- */
.contact { padding-block: var(--space-3xl); }
.contact__call {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--c-on-dark-2);
  line-height: 1.2;
  margin-bottom: var(--space-2xl);
}
.contact__call a {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-size: clamp(3rem, 1.5rem + 6vw, 7.5rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--c-on-dark);
  text-decoration: none;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  border-bottom: var(--rule) solid var(--c-accent);
  transition: color var(--dur-fast) var(--ease-out);
}
.contact__call a:hover { color: var(--c-accent); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule) solid var(--c-rule-on-dark);
}
.contact h3 { font-size: var(--text-lg); font-weight: 600; color: var(--c-accent); margin-bottom: var(--space-xs); }
.contact h3 + * { margin-bottom: var(--space-lg); }
.contact address { font-style: normal; font-variant-numeric: lining-nums; }
.contact p { color: var(--c-on-dark); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }

.hours { width: 100%; max-width: 30rem; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.hours th, .hours td { text-align: left; font-weight: 400; padding: var(--space-2xs) 0; border-bottom: var(--rule) solid var(--c-rule-on-dark); }
.hours th { padding-right: var(--space-md); color: var(--c-on-dark); }
.hours td { text-align: right; color: var(--c-on-dark-2); }
.hours tr.closed td { color: var(--c-muted-on-dark); font-style: italic; }
.hours tr[aria-current="date"] th::after { content: " · oggi"; color: var(--c-accent); }

/* Form — plain, no card */
.form { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule) solid var(--c-rule-on-dark); max-width: 52rem; }
.form h3 { color: var(--c-on-dark); font-size: var(--text-2xl); font-weight: 500; }
.form__intro { color: var(--c-on-dark-2); font-size: var(--text-sm); max-width: 34rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-lg); margin-top: var(--space-md); }
.field { display: flex; flex-direction: column; gap: var(--space-3xs); margin-bottom: var(--space-md); }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); color: var(--c-on-dark-2); }
.field .opt { color: var(--c-muted-on-dark); }
.field input, .field textarea {
  font: inherit;
  color: var(--c-on-dark);
  background: var(--c-dark-2);
  border: 0;
  border-bottom: var(--rule) solid var(--c-muted-on-dark);
  border-radius: 0;
  padding: var(--space-xs) var(--space-sm);
  min-height: 3rem;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:hover, .field textarea:hover { background: var(--c-dark-3); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 0; border-bottom-color: var(--c-accent); }
.field input:disabled, .field textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-bottom: 2px solid var(--c-accent-hi); }
.field__error { margin: 0; font-size: var(--text-sm); color: var(--c-accent-hi); }
.field__error:empty { display: none; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); align-items: start; font-size: var(--text-sm); color: var(--c-on-dark-2); margin-bottom: var(--space-lg); }
.check input { width: 1.125rem; height: 1.125rem; margin-top: 0.2em; accent-color: var(--c-accent); }
.check[data-invalid="true"] { color: var(--c-accent-hi); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.form__status { margin: 0; font-size: var(--text-sm); color: var(--c-on-dark-2); }
.form__status:empty { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-lg);
  font: inherit;
  font-size: var(--text-base);
  white-space: nowrap;
  color: var(--c-on-dark);
  background: transparent;
  border: var(--rule) solid var(--c-accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--c-accent); color: var(--c-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Colophon · Ft4 ---------- */
.colophon { border-top: var(--rule) solid var(--c-rule-on-dark); padding-block: var(--space-lg) var(--space-xl); }
.colophon a { white-space: nowrap; }
.colophon p { margin: 0; max-width: 64ch; font-size: var(--text-sm); color: var(--c-muted-on-dark); font-variant-numeric: lining-nums; }

/* ---------- Legal page ---------- */
.doc-top { border-bottom: var(--rule) solid var(--c-rule-on-dark); }
.doc { color-scheme: light; background: var(--c-paper); color: var(--c-ink); padding-block: var(--space-2xl) var(--space-3xl); }
.doc .textlink { text-decoration-color: var(--c-accent-deep); }
.doc .textlink:hover { color: var(--c-accent-deep); }
.doc :focus-visible { outline-color: var(--c-focus-on-paper); }
.doc__inner { max-width: 46rem; }
.doc h1 { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }
.doc h2 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
.doc h3 { font-size: var(--text-lg); margin: var(--space-md) 0 var(--space-2xs); }
.doc p, .doc li { color: var(--c-ink-2); }
.doc ul { padding-left: var(--space-md); }
.doc .updated { color: var(--c-muted); font-size: var(--text-sm); margin-top: var(--space-xl); }

/* ---------- Motion: hovers only; respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 52rem) {
  .plate::before {
    background:
      linear-gradient(180deg, var(--c-scrim-mid) 0%, var(--c-scrim-none) 20%),
      linear-gradient(0deg, var(--c-scrim-strong) 0%, var(--c-scrim-mid) 50%, var(--c-scrim-soft) 100%);
  }
  .portrait__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .portrait img { grid-column: 1; max-width: none; }
  .portrait figcaption { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; max-width: none; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .top__links { gap: var(--space-sm); }
  .top__links a { font-size: var(--text-sm); }
  .wordmark { font-size: var(--text-lg); }
  .btn { width: 100%; }
}

/* ---------- 404 ---------- */
.nf { padding-block: var(--space-3xl); }
.nf__title { font-size: var(--text-3xl); }
.nf__text { margin-top: var(--space-md); color: var(--c-on-dark-2); }

.hours td span { white-space: nowrap; }
.hours td span + span::before { content: "· "; color: var(--c-muted-on-dark); }
.hours th { white-space: nowrap; }
@media (max-width: 30rem) {
  .hours td span { display: block; }
  .hours td span + span::before { content: none; }
}

/* ---------- Inner pages: top bar ---------- */
.bar { border-bottom: var(--rule) solid var(--c-rule-on-dark); }
.bar .top__links a[aria-current="page"] { border-bottom-color: var(--c-accent); }

/* ---------- Photo band (home) ---------- */
.band { position: relative; margin: 0; }
.band img { width: 100%; height: clamp(18rem, 62svh, 44rem); object-fit: cover; object-position: 60% 40%; filter: brightness(0.82) saturate(0.85); }
.band figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding-block: var(--space-md); background: linear-gradient(0deg, var(--c-scrim-mid), var(--c-scrim-none)); font-size: var(--text-sm); color: var(--c-on-dark-2); }

/* ---------- Articles teaser (home) + blog index ---------- */
.writing { padding-block: var(--space-3xl) var(--space-2xl); }
.writing__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-xl); padding-bottom: var(--space-md); border-bottom: var(--rule) solid var(--c-rule-on-dark); }
.writing__head h2, .writing__head h1 { font-size: var(--text-3xl); }
.writing__head p { margin: 0; max-width: 32rem; color: var(--c-on-dark-2); }
.posts { list-style: none; margin: 0; padding: 0; }
.post { border-bottom: var(--rule) solid var(--c-rule-on-dark); }
.post a {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center;
  padding-block: var(--space-md); text-decoration: none;
}
.post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: brightness(0.85) saturate(0.8); }
.post h3, .post h2 { font-size: var(--text-xl); line-height: 1.2; transition: color var(--dur-fast) var(--ease-out); }
.post p { margin: var(--space-3xs) 0 0; color: var(--c-on-dark-2); font-size: var(--text-sm); max-width: 60ch; }
.post time { color: var(--c-muted-on-dark); font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: lining-nums; }
.post a:hover h3, .post a:hover h2 { color: var(--c-accent); }
.writing__more { margin-top: var(--space-md); }

/* ---------- Article ---------- */
.art-head { padding-block: var(--space-2xl) var(--space-xl); }
.art-crumbs { font-size: var(--text-sm); color: var(--c-muted-on-dark); margin-bottom: var(--space-lg); }
.art-crumbs a { color: var(--c-on-dark-2); }
.art-head h1 { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem); line-height: 1.02; max-width: 20ch; }
.art-meta { margin-top: var(--space-md); color: var(--c-on-dark-2); font-size: var(--text-sm); font-variant-numeric: lining-nums; }
.art-cover { margin: 0; }
.art-cover img { width: 100%; height: clamp(14rem, 46svh, 34rem); object-fit: cover; filter: brightness(0.86) saturate(0.82); }
.art-cover figcaption { font-size: var(--text-xs); color: var(--c-muted-on-dark); padding-top: var(--space-2xs); }
.art-body { background: var(--c-paper); color: var(--c-ink); color-scheme: light; padding-block: var(--space-2xl) var(--space-3xl); }
.art-body ::selection { background: var(--c-ink); color: var(--c-paper); }
.art-body :focus-visible { outline-color: var(--c-focus-on-paper); }
.art-body .textlink { text-decoration-color: var(--c-accent-deep); }
.art-body .textlink:hover { color: var(--c-accent-deep); }
.prose-doc { max-width: 40rem; font-size: var(--text-lg); line-height: 1.6; }
.prose-doc p, .prose-doc li { color: var(--c-ink); hyphens: manual; text-wrap: pretty; }
.prose-doc h2 { font-size: var(--text-2xl); margin: var(--space-2xl) 0 var(--space-sm); scroll-margin-top: var(--space-md); }
.prose-doc h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); line-height: 1.3; margin: var(--space-xl) 0 var(--space-2xs); color: var(--c-ink); }
.prose-doc ul, .prose-doc ol { padding-left: var(--space-md); margin: 0 0 var(--space-md); }
.prose-doc li { margin-bottom: var(--space-2xs); }
.prose-doc li::marker { color: var(--c-accent-deep); }
.prose-doc strong { font-weight: 600; }
.brief { margin: 0 0 var(--space-xl); padding: var(--space-md) 0; border-block: 3px double var(--c-ink); }
.brief h2 { margin-top: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent-deep); }
.brief ul { margin-bottom: 0; }
.cmp { width: 100%; border-collapse: collapse; margin: var(--space-md) 0 var(--space-lg); font-size: var(--text-base); }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: var(--rule) solid var(--c-rule); }
.cmp thead th { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); border-bottom: var(--rule) solid var(--c-ink); }
.cmp tbody th { font-weight: 600; color: var(--c-ink); }
.cmp td { color: var(--c-ink-2); }
.table-scroll { overflow-x: auto; }
.art-cta {
  margin-top: var(--space-2xl); padding: var(--space-xl) var(--space-lg);
  background: var(--c-dark); color: var(--c-on-dark);
  border-top: 3px solid var(--c-accent);
}
.art-cta p { margin: 0 0 var(--space-sm); font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.45; color: var(--c-on-dark); }
.art-cta a.call {
  font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.1; letter-spacing: 0.01em;
  color: var(--c-accent); text-decoration: none; font-variant-numeric: lining-nums; white-space: nowrap;
  border-bottom: 2px solid var(--c-accent);
}
.art-cta a.call:hover { color: var(--c-accent-hi); border-bottom-color: var(--c-accent-hi); }
.art-cta a.call:focus-visible { outline-color: var(--c-focus); }
.art-note { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--c-muted); }
.art-related { margin-top: var(--space-2xl); }
.art-related h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.art-related ul { list-style: none; padding: 0; margin: 0; }
.art-related li { padding-block: var(--space-2xs); border-bottom: var(--rule) solid var(--c-rule); }

@media (max-width: 40rem) {
  .post a { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); gap: var(--space-md); }
  .post time { grid-column: 2; grid-row: 2; }
  .prose-doc { font-size: var(--text-base); }
}
.art-cover--portrait img { width: min(100%, 26rem); height: auto; aspect-ratio: 5 / 6; object-position: 50% 20%; filter: grayscale(1) contrast(1.04); }

/* ---------- Services index (home + /servizi) ---------- */
.svc-grid { margin-top: var(--space-xl); columns: 2 24rem; column-gap: var(--space-2xl); }
.svc { break-inside: avoid; margin-bottom: var(--space-xl); }
.svc__group {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule) solid var(--c-ink);
}
.svc ul { list-style: none; margin: 0; padding: 0; }
.svc li { border-bottom: var(--rule) solid var(--c-rule); }
.svc a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md);
  padding-block: var(--space-sm); text-decoration: none;
}
.svc a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--c-accent-deep); transition: transform var(--dur-fast) var(--ease-out); }
.svc__name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; transition: color var(--dur-fast) var(--ease-out); }
.svc__sum { grid-column: 1; margin-top: var(--space-3xs); color: var(--c-ink-2); font-size: var(--text-sm); }
.svc a:hover .svc__name { color: var(--c-accent-deep); }
.svc a:hover::after { transform: translateX(3px); }
.index--page { padding-top: var(--space-2xl); min-height: 60svh; }
.index--page h1 { font-size: var(--text-3xl); }

/* ---------- Logo ---------- */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark img { display: block; height: 34px; width: auto; }
.colophon__logo { display: block; height: 28px; width: auto; margin-bottom: var(--space-sm); opacity: 0.9; }
@media (max-width: 40rem) { .wordmark img { height: 28px; } }
@media (max-width: 24rem) {
  .wordmark img { height: 24px; }
  .top__links { gap: var(--space-xs); }
}
.art-related a, .svc a, .post a { hyphens: manual; }

/* ---------- Mobile call bar ---------- */
.callbar { display: none; }
@media (max-width: 52rem) {
  .callbar {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
    min-height: 56px; padding: var(--space-xs) var(--gutter) max(var(--space-xs), env(safe-area-inset-bottom));
    background: var(--c-accent); color: var(--c-dark);
    font-family: var(--font-body); font-weight: 600; text-decoration: none;
    box-shadow: 0 -6px 18px rgb(0 0 0 / 0.28);
  }
  .callbar__num { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
  .callbar:active { filter: brightness(0.92); }
  .callbar:focus-visible { outline: 3px solid var(--c-paper); outline-offset: -6px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ---------- Page transitions (cross-document view transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Footer details ---------- */
.colophon p + p { margin-top: var(--space-2xs); }
.colophon__contacts a { font-variant-numeric: lining-nums; }
.colophon__credit { font-size: var(--text-xs); color: var(--c-muted-on-dark); }

/* ---------- Visit: address, hours, map (mid-page) ---------- */
.visit { color-scheme: light; background: var(--c-paper-2); color: var(--c-ink); padding-block: var(--space-3xl); }
.visit :focus-visible { outline-color: var(--c-focus-on-paper); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: stretch; }
.visit h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.visit h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent-deep); margin: var(--space-xl) 0 var(--space-2xs); }
.visit address { font-style: normal; font-size: var(--text-lg); line-height: 1.5; font-variant-numeric: lining-nums; }
.visit__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin: var(--space-md) 0 0; }
.visit .btn { color: var(--c-ink); border-color: var(--c-ink); }
.visit .btn:hover { background: var(--c-ink); color: var(--c-paper); }
.visit .textlink { text-decoration-color: var(--c-accent-deep); white-space: nowrap; }
.visit .hours th, .visit .hours td { border-bottom-color: var(--c-rule); }
.visit .hours th { color: var(--c-ink); }
.visit .hours td { color: var(--c-ink-2); }
.visit .hours tr.closed td { color: var(--c-muted); }
.visit .hours tr[aria-current="date"] th::after { color: var(--c-accent-deep); }
.visit__note { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--c-muted); }
.visit__map { min-height: 26rem; border: var(--rule) solid var(--c-ink); background: var(--c-paper); }
.visit__map iframe { display: block; width: 100%; height: 100%; min-height: 26rem; border: 0; }
.contact__hint { font-size: var(--text-sm); color: var(--c-on-dark-2); }
@media (max-width: 52rem) {
  .visit__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .visit__map, .visit__map iframe { min-height: 22rem; }
}

.prose ::selection, .portrait ::selection { background: var(--c-ink); color: var(--c-paper); }
.prose :focus-visible, .portrait :focus-visible { outline-color: var(--c-focus-on-paper); }

/* =========================================================
   Motion (hallmark motion + animate + emil-design-eng)
   Everything is off under prefers-reduced-motion.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: title rises line by line, then motto and line */
  .plate h1 .line { display: inline-block; overflow: clip; padding-bottom: 0.08em; vertical-align: bottom; }
  .plate h1 .line > span { display: inline-block; animation: line-up 900ms var(--ease-out) both; }
  .plate h1 .line:nth-of-type(2) > span { animation-delay: 140ms; }
  .plate .rise { animation: fade-up 700ms var(--ease-out) both; animation-delay: 520ms; }
  .plate .rise + .rise { animation-delay: 660ms; }
  @keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* Scroll reveal (only when JS runs; content stays visible without JS) */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .svc-grid .reveal:nth-child(2) { transition-delay: 90ms; }
  .js .svc-grid .reveal:nth-child(3) { transition-delay: 180ms; }
  .js .svc-grid .reveal:nth-child(4) { transition-delay: 270ms; }
  .js .svc-grid .reveal:nth-child(5) { transition-delay: 360ms; }

  /* Services: name turns gold, arrow travels */
  .svc a::after { transition: transform 260ms var(--ease-out), color 260ms var(--ease-out); }
  .svc a:hover::after { transform: translateX(6px); }

  /* Band: slow parallax (JS sets --shift) */
  .band { overflow: clip; }
  .band img { transform: translate3d(0, var(--shift, 0px), 0) scale(1.14); will-change: transform; }

  /* Contact number: gold underline draws in */
  .js .contact__call a {
    border-bottom: 0;
    background: linear-gradient(var(--c-accent), var(--c-accent)) left bottom / 0% 2px no-repeat;
    padding-bottom: 0.06em;
    transition: color var(--dur-fast) var(--ease-out), background-size 1100ms var(--ease-out);
  }
  .js .contact__call a.is-in { background-size: 100% 2px; }
}

/* =========================================================
   Glass (liquid-glass CSS fallback — static site, no React)
   Used only on: top bar on scroll, mobile call bar, photo/map chips.
   ========================================================= */
.glass, .glass-chip, .top.is-scrolled, .bar {
  --glass-tint: oklch(25% 0.065  var(--c-hue) / 0.9);
  --glass-edge: oklch(96% 0.018 85 / 0.18);
}
.glass-chip {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--c-on-dark);
  background: var(--glass-tint);
  border: var(--rule) solid var(--glass-edge);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.16), 0 6px 18px oklch(15% 0.05  var(--c-hue) / 0.28);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
.band figcaption { background: none; }
.visit__map { position: relative; }
.visit__chip { position: absolute; left: var(--space-sm); bottom: var(--space-sm); z-index: 1; pointer-events: none; }

/* Home top bar: fixed, becomes glass after scrolling past the top */
.top { position: fixed; transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms var(--ease-out); border-bottom: var(--rule) solid transparent; }
.top.is-scrolled {
  background: var(--glass-tint);
  border-bottom-color: var(--glass-edge);
  box-shadow: 0 8px 24px oklch(15% 0.05  var(--c-hue) / 0.25);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.top.is-scrolled .top__inner { min-height: 4rem; }
.top__inner { transition: min-height 300ms var(--ease-out); }
html { scroll-padding-top: 5rem; }

/* Inner pages: sticky glass bar */
.bar {
  position: sticky; top: 0; z-index: 5;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

/* Mobile call bar: dark glass with gold edge */
@media (max-width: 52rem) {
  .callbar {
    background: oklch(25% 0.065  var(--c-hue) / 0.9);
    color: var(--c-on-dark);
    border-top: var(--rule) solid var(--c-accent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
  .callbar__num { color: var(--c-accent); }
}

/* Browsers without backdrop-filter: solid navy, still readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-chip, .top.is-scrolled, .bar { background: var(--c-dark); }
  @media (max-width: 52rem) { .callbar { background: var(--c-dark); } }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-chip, .top.is-scrolled, .bar { background: var(--c-dark); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Intro: text and portrait side by side ---------- */
.intro { color-scheme: light; background: var(--c-paper); color: var(--c-ink); padding-block: var(--space-3xl); }
.intro ::selection { background: var(--c-ink); color: var(--c-paper); }
.intro :focus-visible { outline-color: var(--c-focus-on-paper); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.intro__text p { max-width: 34em; margin: 0; font-size: var(--text-prose); line-height: 1.5; color: var(--c-ink); }
.intro__text p + p { margin-top: var(--space-md); color: var(--c-ink-2); }
.intro__photo { margin: 0; }
.intro__photo img { width: 100%; max-width: 30rem; aspect-ratio: 5 / 6; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.intro__photo figcaption { margin-top: var(--space-xs); max-width: 30rem; font-size: var(--text-sm); color: var(--c-muted); }
@media (max-width: 52rem) {
  .intro__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

/* ---------- Contact: two aligned columns ---------- */
.contact__grid { align-items: start; }
.contact__grid > div:first-child { padding-right: var(--space-xl); border-right: var(--rule) solid var(--c-rule-on-dark); align-self: stretch; }
.contact__grid h3, .contact__grid .form h3 {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent);
}
.contact__grid > div:first-child p { margin: 0 0 var(--space-lg); line-height: 1.7; }
.contact__grid > div:first-child p:last-child { margin-bottom: 0; }
.contact__grid .form { margin: 0; padding: 0; border: 0; max-width: none; }
.contact__grid .form__intro { margin-top: 0; }
@media (max-width: 52rem) {
  .contact__grid > div:first-child { padding-right: 0; border-right: 0; padding-bottom: var(--space-xl); border-bottom: var(--rule) solid var(--c-rule-on-dark); }
}

/* ---------- FAQ accordion (native details/summary) ---------- */
.faq { margin: var(--space-md) 0 var(--space-lg); border-top: var(--rule) solid var(--c-ink); }
.faq__item { border-bottom: var(--rule) solid var(--c-rule); }
.faq__item:last-child { border-bottom-color: var(--c-ink); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  min-height: 44px; padding: var(--space-md) 0; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); line-height: 1.35; color: var(--c-ink); }
.faq summary:hover h3 { color: var(--c-accent-deep); }
.faq summary:focus-visible { outline: 2px solid var(--c-focus-on-paper); outline-offset: 4px; }
.faq__icon { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: var(--rule) solid var(--c-ink); border-radius: 50%; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.7rem; height: 1.5px; background: var(--c-ink); transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--c-ink); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: var(--c-paper); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 0 var(--space-md); }
.faq__a p { margin: 0; max-width: 38rem; color: var(--c-ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .faq__icon, .faq__icon::before, .faq__icon::after { transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out); }
  .faq__item[open] .faq__a { animation: fade-up 260ms var(--ease-out) both; }
}

/* ---------- Article hero: photo behind the title (as on Margherita's category pages) ---------- */
.art-hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: clamp(26rem, 68svh, 42rem);
  display: flex; align-items: flex-end;
  padding-block: 7rem var(--space-2xl);
  background: var(--c-dark); color: var(--c-on-dark);
}
.art-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(0.35) contrast(1.04); }
.art-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: oklch(30% 0.09 var(--c-hue)); mix-blend-mode: color; opacity: 0.55; }
.art-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, oklch(22% 0.065  var(--c-hue) / 0.6) 0%, oklch(22% 0.065  var(--c-hue) / 0.3) 38%, oklch(22% 0.065  var(--c-hue) / 0.94) 100%),
    linear-gradient(90deg, oklch(22% 0.065  var(--c-hue) / 0.55) 0%, oklch(22% 0.065  var(--c-hue) / 0) 70%);
}
.art-hero__inner { width: 100%; }
.art-hero .art-crumbs { color: var(--c-on-dark-2); margin-bottom: var(--space-lg); }
.art-hero .art-crumbs a { color: var(--c-on-dark); }
.art-hero h1 { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem); line-height: 1.04; max-width: 20ch; color: var(--c-on-dark); text-wrap: balance; }
.art-hero__intro { max-width: 40rem; margin: var(--space-md) 0 0; font-size: var(--text-lg); line-height: 1.5; color: var(--c-on-dark-2); }
.art-hero .art-meta { margin-top: var(--space-md); color: var(--c-accent); }
.art-hero--portrait .art-hero__bg { object-position: 72% 18%; filter: grayscale(1) contrast(1.05); }
@media (max-width: 52rem) {
  .art-hero { padding-block: 6rem var(--space-xl); }
  .art-hero--portrait .art-hero__bg { object-position: 60% 15%; }
}

/* =========================================================
   Legal: cookie banner, consent embeds, footer legal (generated by tools/legal.py)
   ========================================================= */
.consent {
  position: fixed; z-index: 60; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm);
  max-width: 34rem; margin-left: auto; padding: var(--space-md) var(--space-md) var(--space-sm);
  background: var(--c-dark); color: var(--c-on-dark);
  border: var(--rule) solid var(--c-rule-on-dark); border-top: 3px solid var(--c-accent);
  box-shadow: 0 12px 32px oklch(15% 0.05  var(--c-hue) / 0.35);
}
@media (max-width: 52rem) { .consent { bottom: calc(64px + env(safe-area-inset-bottom)); } }
.consent__title { margin: 0 0 var(--space-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-sm); color: var(--c-accent); }
.consent__text { margin: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--c-on-dark-2); }
.consent__text .textlink { color: var(--c-on-dark); }
.consent__prefs { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-sm); font-size: var(--text-sm); }
.consent__opt { display: flex; gap: var(--space-xs); align-items: center; min-height: 44px; }
.consent__opt input { width: 1.25rem; height: 1.25rem; accent-color: var(--c-accent); }
.consent__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
.consent__actions .btn { min-height: 44px; padding-inline: var(--space-xs); font-size: var(--text-sm); }
.consent__x { position: absolute; top: 0.25rem; right: 0.25rem; width: 44px; height: 44px; background: none; border: 0; color: var(--c-on-dark); font-size: 1.5rem; cursor: pointer; }
.consent-embed { position: relative; width: 100%; height: 100%; min-height: 18rem; background: var(--c-paper-2); }
.consent-embed iframe { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.consent-embed__ph { height: 100%; min-height: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-lg); text-align: center; }
.consent-embed__ph p { margin: 0; max-width: 28rem; font-size: var(--text-sm); color: var(--c-ink-2); }
.consent-embed__ph .btn { color: var(--c-ink); border-color: var(--c-ink); }
.linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; }
.colophon__legal { font-size: var(--text-sm); }
.top--solid { position: sticky; background: var(--c-dark); }
.consent__prefs[hidden] { display: none; }