/* A · SOFT — The Mediterranean Journal
   Carta #F5F2EB · Oliva #3C3C32 · Bronzo #77664C — Libre Baskerville + Inter.
   Titoli centrati, grandi margini, fotografie incorniciate; dittici asimmetrici. */

:root {
  --bg: #f5f2eb;
  --ink: #3c3c32;
  --muted: #6d6c60;
  --rule: #d4d0c5;
  --accent: #77664c;
  --panel: #3c3c32;
  --panel-ink: #f5f2eb;
  --font-display: "Libre Baskerville", Georgia, serif;
  --display-leading: 1.14;
}

/* Hero: occhiello e titolo centrati, fotografia incorniciata 1152×586, frase in serif sotto */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px var(--gutter) 0; }
.hero__copy { display: contents; }
.hero__eyebrow { order: 1; font-size: 11px; }
.hero__title { order: 2; margin-top: 22px; }
.hero__media { order: 3; width: min(100%, 1152px); aspect-ratio: 1152 / 586; overflow: hidden; margin-top: 52px; }
.hero__caption { order: 4; width: min(100%, 1152px); text-align: left; margin-top: 14px; }
.hero__kicker { display: none; }
.hero__lede { order: 5; margin-top: 84px; }
.hero__cta { order: 6; margin-top: 40px; }

.letter__title { font-size: clamp(36px, 3.6vw, 52px); }

/* Dittici: fotografie incorniciate, il testo respira */
.split { grid-template-columns: 580fr 470fr; gap: 120px; padding: 0 80px; }
.split--reverse { grid-template-columns: 470fr 580fr; }
.split__media img { aspect-ratio: 580 / 490; }
.chapter--taste .split__media img { aspect-ratio: 4 / 5; }
.chapter__title { font-size: clamp(34px, 3.4vw, 48px); }
.chapter__eyebrow { color: var(--muted); }
.style__head { padding: 0 80px; }
.style__title { font-size: clamp(40px, 4.4vw, 61px); }
.contents__list { margin: 0 auto; }
.contents__preview { display: none; }
.contents .section__head { text-align: center; }
.contents__list a { grid-template-columns: 72px 1fr 72px; }
.contents__list a::after { content: "→"; justify-self: end; font-size: 14px; color: var(--muted); transition: transform .5s var(--ease); }
.contents__list a:hover::after { transform: translateX(6px); }
.contents__d { grid-column: 2; }
.section__title { text-align: inherit; }
.journal .section__title, .notebook .section__title { font-size: clamp(36px, 3.8vw, 55px); }
.feature { background: transparent; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 56px 0; }
.feature .micro, .feature p { color: var(--muted); }
.feature h3, .feature .link-line { color: var(--ink); }
.scene { padding: 0 80px; }

@media (max-width: 1100px) {
  .split, .split--reverse, .style__head, .scene { padding: 0; gap: 56px; }
}
@media (max-width: 760px) {
  .hero { padding-top: 40px; }
  .hero__media { aspect-ratio: 4 / 3; margin-top: 36px; }
  .hero__lede { margin-top: 56px; }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .contents__list a { grid-template-columns: 40px 1fr 20px; }
}

/* Pagine interne — stessa grammatica della home: titolo centrato, fotografia incorniciata */
.hero--article .crumbs--hero { justify-content: center; }
.hero--article .hero__title { font-size: clamp(36px, 3.8vw, 54px); max-width: 22ch; }
.hero--article .hero__kicker { display: block; order: 2; margin-top: 18px; }
.hero--article .hero__lede { font-size: clamp(20px, 1.8vw, 26px); max-width: 34ch; margin-top: 64px; }
.rubric-head__title { font-size: clamp(56px, 7vw, 104px); }
.cover__title { font-size: clamp(36px, 3.8vw, 54px); }
.prose__fig img { outline: 1px solid var(--rule); outline-offset: 12px; }
.prose__fig--full img { outline: 0; }

/* ——— Moduli A · Belmond / Opta / ISSIMO ——— */
.statement { text-align: center; max-width: 980px; }
.statement__text { font-size: clamp(28px, 3vw, 42px); line-height: 1.3; margin: 28px auto; max-width: 26ch; }
.statement__text em { font-style: italic; color: var(--accent); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills a { padding: 10px 16px; background: var(--ink); color: var(--bg); transition: background .3s, color .3s; }
.pills a:hover, .pills a.is-current { background: var(--accent); color: var(--bg); }
.pills--center { justify-content: center; padding-top: 8px; margin-top: 0; margin-bottom: 0; }

.journal4__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 22px 0; margin-bottom: 48px; }
.journal4__head h2 { font-size: 34px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 28px; margin-bottom: 48px; }
.tile figure { aspect-ratio: 4 / 5; margin-bottom: 16px; }
.tile img { transition: transform .8s var(--ease); }
.tile:hover img { transform: scale(1.03); }
.tile h3 { font-size: 21px; line-height: 1.25; margin-top: 8px; }

.stagger { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: start; }
.stagger__item figure { margin-bottom: 16px; }
.stagger__item h3 { font-size: 24px; margin-top: 8px; }
.stagger__item--1 { grid-column: 2 / span 4; }
.stagger__item--1 figure { aspect-ratio: 3 / 4; }
.stagger__item--2 { grid-column: 7 / span 5; margin-top: 140px; }
.stagger__item--2 figure { aspect-ratio: 4 / 3; }
.bigquote { grid-column: 3 / span 8; text-align: center; padding: 64px 0; margin: 96px 0; position: relative; }
.bigquote::before { content: "“"; position: absolute; left: 50%; top: -40px; transform: translateX(-50%); font-family: var(--font-display); font-size: 220px; line-height: 1; color: var(--accent); opacity: .28; }
.bigquote p { font-size: clamp(28px, 3vw, 42px); line-height: 1.3; position: relative; }
.bigquote footer { margin-top: 22px; }
.stagger__item--3 { grid-column: 1 / span 6; }
.stagger__item--3 figure { aspect-ratio: 16 / 10; }
.stagger__item--4 { grid-column: 8 / span 4; margin-top: 180px; }
.stagger__item--4 figure { aspect-ratio: 3 / 4; }

@media (max-width: 1100px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .grid4 { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .tile h3 { font-size: 17px; }
  .stagger { grid-template-columns: 1fr; gap: 56px; }
  .stagger > * { grid-column: auto !important; margin-top: 0 !important; }
  .pills--center { padding-top: 4px; }
  .bigquote { margin: 24px 0; padding: 40px 0; }
  .bigquote::before { font-size: 150px; top: -20px; }
  .pills a { padding: 12px 14px; }
}

/* ——— Edizione A · sommario da journal ——— */
.toc-cover { text-align: center; max-width: 980px; padding-top: 48px; }
.toc-cover__title { font-size: clamp(36px, 4vw, 58px); margin: 20px 0 48px; }
.toc-cover__media { max-width: 520px; margin: 0 auto; }
.toc-cover__media img { aspect-ratio: 3 / 4; outline: 1px solid var(--rule); outline-offset: 14px; }
.toc-cover__media figcaption { margin-top: 26px; }
.toc-letter { max-width: 620px; margin: 72px auto 0; text-align: left; }
.toc-letter p:not(.micro) { font-family: var(--font-display); font-size: 19px; line-height: 1.75; color: var(--ink); margin: 18px 0; }
.toc { max-width: 900px; }
.toc__title { text-align: center; font-size: clamp(36px, 3.8vw, 54px); padding-bottom: 32px; border-bottom: 1px solid var(--ink); margin-bottom: 8px; }
.toc__chapter { padding: 36px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 140px; }
.toc__head, .toc__chapter li a { display: flex; align-items: baseline; gap: 14px; }
.toc__head { font-weight: 400; cursor: pointer; list-style: none; }
.toc__head::-webkit-details-marker { display: none; }
.toc__head:hover .display { color: var(--accent); }
.toc__head .display { transition: color .3s; }
.toc__plus { position: relative; flex: none; width: 14px; height: 14px; align-self: center; }
.toc__plus::before, .toc__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--ink); transition: transform .4s var(--ease); }
.toc__plus::after { transform: rotate(90deg); }
.toc__chapter[open] .toc__plus::after { transform: rotate(0); }
.toc__chapter ul { padding-top: 16px; }
.toc__chapter[open] ul { animation: toc-in .6s var(--ease); }
@keyframes toc-in { from { opacity: 0; transform: translateY(-8px); } }
.toc__head .display { font-size: clamp(24px, 2.4vw, 32px); }
.toc__dots { flex: 1; border-bottom: 1px dotted var(--muted); transform: translateY(-5px); min-width: 24px; }
.toc__chapter li a { padding: 10px 0 10px 28px; color: var(--ink); transition: color .3s; }
.toc__chapter li a:hover { color: var(--accent); }
.toc__story { font-family: var(--font-display); font-size: 18px; font-style: italic; }

/* ——— Articolo A · colonna laterale fissa (Belmond), testo in serif ——— */
.prose { max-width: calc(1060px + var(--gutter) * 2); display: grid; grid-template-columns: 240px minmax(0, 680px); column-gap: 96px; justify-content: center; }
.prose > * { grid-column: 2; }
.prose > .prose__fig--full, .prose > .prose__marquee { grid-column: 1 / -1; }
.story-aside { grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: 150px; padding-top: 6px; border-top: 1px solid var(--ink); }
.story-aside > * + * { margin-top: 14px; }
.story-aside__kicker { font-size: 22px; line-height: 1.25; }
.story-aside .ledger { margin-top: 24px; border-top: 1px solid var(--rule); }
.story-aside .ledger div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
.story-aside .ledger dd { font-size: 14px; }
.prose > p { font-family: var(--font-display); font-size: 18px; line-height: 1.85; }
.prose__fig--wide { margin-left: 0; margin-right: 0; }
.prose__pair { margin-left: 0; margin-right: 0; }

@media (max-width: 1100px) {
  .prose { grid-template-columns: minmax(0, 680px); }
  .prose > * { grid-column: 1; }
  .story-aside { grid-row: auto; position: static; margin-bottom: 56px; }
}
@media (max-width: 760px) {
  .toc__head { flex-wrap: wrap; }
  .toc__chapter li a { padding-left: 0; flex-wrap: wrap; gap: 4px 14px; }
  .toc__chapter li .toc__dots { display: none; }
  .toc__story { width: 100%; }
  .prose > p { font-size: 17px; }
}

.grid4--3 { grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
@media (max-width: 760px) { .grid4--3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid4--3 .tile figure { aspect-ratio: 3 / 2; } }

/* ——— Testata A · journal a più righe (ISSIMO / Belmond) ———
   Allo scorrimento resta visibile solo la riga delle rubriche: top negativo calcolato da site.js, nessuna animazione di layout */
.masthead--a { top: calc(var(--mh-hide, 0px) * -1); display: grid; justify-items: center; text-align: center; }
.mh-util { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 0; }
.mh-util__left { display: flex; gap: 28px; }
.mh-util__left .mh-link { display: inline-flex; align-items: center; gap: 10px; }
.mh-util__right { justify-self: end; }
.masthead--a .masthead__logo { padding: 10px 0 18px; }
.masthead--a .logo { width: 196px; }
.mh-motto { width: 100%; padding: 11px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--muted); }
.masthead--a .rubricbar { width: 100%; justify-content: center; gap: 34px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.masthead--a .rubricbar a { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.masthead--a .rubricbar a:hover { color: var(--accent); }
.masthead--a .rubricbar a.is-current { font-style: italic; color: var(--accent); }

/* Menu A · colonna centrata, chiara */
.menu-a { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8vh; gap: 18px; }
.menu-a__logo .logo { width: 170px; }
.menu-a__list { display: flex; flex-direction: column; gap: 2px; margin: 24px 0; }
.menu-a__list a { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.25; transition: color .3s; }
.menu-a__list a:hover { color: var(--accent); font-style: italic; }
.menu-a__foot { display: flex; gap: 32px; border-top: 1px solid var(--rule); padding-top: 22px; }

@media (max-width: 760px) {
  .mh-util { grid-template-columns: auto 1fr; padding: 12px 0; }
  .mh-util__mid { display: none; }
  .mh-util__left { gap: 18px; }
  .masthead--a .logo { width: 150px; }
  .masthead--a .masthead__logo { padding: 4px 0 12px; }
  .mh-motto { font-size: 13px; padding: 9px 12px; }
  .masthead--a .rubricbar { justify-content: flex-start; gap: 4px; margin: 0 calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); padding: 4px var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .masthead--a .rubricbar a { padding: 10px 10px; font-size: 15px; }
}