/* Fabrizia Lellero, The Art of Healthy Living: il sito.
   La stessa identità dell'app: la palette del brand (circa 70% chiari e neutri, 20% naturali,
   10% floreali), Cormorant Garamond per i titoli, Manrope per i testi, la peonia della moodboard
   in alto a sinistra. Un solo momento scuro: il manifesto, firmato a mano.
   Nessuno script, nessun cookie, nessuna risorsa da altri siti. */

@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: italic; font-display: swap; font-weight: 300 700;
  src: url(fonts/cormorant-garamond-latin-wght-italic.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
}
/* Solo per la firma sotto il manifesto. */
@font-face {
  font-family: 'Herr Von Muellerhoff';
  font-style: normal; font-display: block; font-weight: 400;
  src: url(fonts/herr-von-muellerhoff-latin-400-normal.woff2) format('woff2');
}

:root {
  /* La palette del brand */
  --ivory: #F5F1E9;      /* fondo principale */
  --champagne: #E7DCCB;  /* fondi e dettagli */
  --taupe: #A99B8A;      /* elementi secondari */
  --stone: #C8BFB2;      /* grafica e superfici */
  --cocoa: #66564C;      /* testi e contrasti */
  --sage: #A5AA91;       /* accenti naturali */
  --rose: #C9AAA4;       /* accenti floreali */
  /* Le stesse tinte dell'app: i colori della palette schiariti sull'avorio. Il testo cacao resta sopra 5:1. */
  --cream: #FBEEE1;           /* il fondo della peonia nella moodboard */
  --wash-champagne: #EAE0D1;
  --wash-rose: #EADFD7;
  --wash-sage: #E0DFD2;
  --quiet: #776759;           /* testo secondario: solo sull'avorio */
  /* Verde bosco e oro, come nell'app */
  --forest: #3F513F;
  --gold: #B8964F;
  --gold-light: #DCC38C;
  --gold-soft: #EFE4C9;
  --gold-deep: #7D6229;
  --wash-gold: #F1E8D3;
  --font-display: 'Cormorant Garamond Variable', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-text: 'Manrope Variable', Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(24px, 6vw, 96px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--cocoa);
  font-family: var(--font-text);
  font-size: 1.04rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, dl, dd, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 3px; }
img, svg { display: block; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 7vw, 4.9rem); line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; }
h3 { font-size: 1.75rem; line-height: 1.15; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 6px; background: var(--cocoa); color: var(--ivory); font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- In alto ---------- */
/* La testata come nel logo: il nome, il payoff, i tre campi; sotto, le sezioni. Filetti d'oro antico. */

.top { position: relative; background: var(--ivory); }
.masthead { position: relative; display: grid; justify-items: center; padding: clamp(26px, 4vw, 44px) var(--gutter) 14px; text-align: center; }
.mast-brand { display: grid; justify-items: center; text-decoration: none; }
.mast-brand .lockup-name { align-items: center; }
.mast-brand .brand-name { font-size: clamp(1.45rem, 4vw, 2.2rem); letter-spacing: 0.26em; margin-right: -0.26em; }
.mast-brand .lockup-payoff { color: var(--gold-deep); }
.mast-brand .lockup-payoff::before { content: ""; flex: 1; min-width: 26px; height: 1px; background: var(--gold); }
.mast-brand .lockup-payoff::after { background: var(--gold); min-width: 26px; }
.mast-brand .lockup-fields { color: var(--quiet); }
.masthead .langs { position: absolute; top: 12px; right: 12px; }
@media (max-width: 699px) { .masthead { padding-top: 6px; } .masthead .langs { position: static; justify-self: end; margin: 0 -14px 6px 0; } }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(6px, 2.6vw, 34px); padding: 4px 12px 8px; border-top: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne); }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-family: var(--font-display); font-size: clamp(1rem, 2.4vw, 1.15rem); font-weight: 500; letter-spacing: 0.02em; text-decoration: none; }
.nav a::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 9px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform 0.25s ease; }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 380px) { .nav { gap: 0 2px; padding: 4px 6px 6px; } .nav a { font-size: 0.95rem; padding: 0 5px; } }

/* ---------- La prima schermata ---------- */
/* Impaginata come una rivista: il titolo comincia in alto a sinistra, la peonia al centro,
   il titolo finisce in basso a destra. Fondo crema, una cornice d'oro sottile intorno alla foto. */

.hero.editorial {
  position: relative; max-width: 1240px; margin: 0 auto;
  padding: clamp(36px, 6vw, 84px) var(--gutter) clamp(52px, 7vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 34px);
}
.hero h1 { display: contents; font-weight: 400; }
.hl { display: block; font-family: var(--font-display); font-size: clamp(2.5rem, 7.4vw, 5.4rem); line-height: 1.02; letter-spacing: -0.012em; color: #4E4038; text-wrap: balance; }
.hl-1 { justify-self: start; max-width: 11em; animation: rise 1s ease-out both; }
.hl-2 { justify-self: end; text-align: right; max-width: 12em; font-style: italic; animation: rise 1s 0.45s ease-out both; }
.hl-1 { order: 0; } .hero-figure { order: 1; } .hl-2 { order: 2; } .hero-text { order: 3; }
.hero-figure { justify-self: center; width: min(78vw, 420px); padding: 10px; border: 1px solid var(--gold); background: var(--cream); box-shadow: 14px 14px 0 -1px var(--gold-soft); animation: bloom 1.4s 0.15s ease-out both; }
.hero-figure img { width: 100%; height: auto; }
.hero-text { display: grid; gap: 20px; justify-items: center; text-align: center; animation: rise 1.1s 0.6s ease-out both; }
.hero .actions { justify-content: center; }
@media (min-width: 900px) {
  .hero.editorial { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 28px; row-gap: 0; }
  .hl { font-size: clamp(3rem, 5.6vw, 5.2rem); }
  .hl-1 { grid-column: 1 / span 6; grid-row: 1; align-self: start; }
  .hero-figure { grid-column: 5 / span 4; grid-row: 1 / span 2; margin-top: calc(2.3 * clamp(3rem, 5.6vw, 5.2rem)); width: 100%; }
  .hl-2 { grid-column: 9 / span 4; grid-row: 2; align-self: end; margin-bottom: 0.4em; }
  .hero-text { grid-column: 1 / -1; grid-row: 3; margin-top: 56px; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bloom { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

/* Il nome, con «Dott.ssa» in piccolo sotto la parola Fabrizia, a sinistra.
   Nel codice il titolo viene prima del nome, così si legge «Dott.ssa Fabrizia Lellero». */
.lockup-name { display: inline-flex; flex-direction: column-reverse; align-items: flex-start; font-family: var(--font-display); font-weight: 500; line-height: 1.1; }
.brand-name { font-size: clamp(1.5rem, 4.4vw, 2.1rem); text-transform: uppercase; letter-spacing: 0.2em; }
.brand-title { margin-top: 5px; font-size: clamp(1rem, 2.4vw, 1.2rem); font-style: italic; letter-spacing: 0.02em; line-height: 1; }
.lockup-payoff { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }
.lockup-payoff::after { content: ""; flex: 1; min-width: 40px; height: 1px; background: var(--taupe); }
.lockup-fields { margin-top: 9px; font-family: var(--font-display); font-style: italic; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }

.hero-lede { max-width: 30em; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex; align-items: center; min-height: 50px; padding: 12px 26px;
  border: 1px solid var(--cocoa); border-radius: 6px; background: var(--cocoa); color: var(--ivory);
  font-weight: 600; font-size: 0.98rem; text-decoration: none;
}
.button.is-quiet { border-color: var(--taupe); background: transparent; color: var(--cocoa); }
.button:hover { background: #57483F; border-color: #57483F; }
.button.is-quiet:hover { background: rgba(245, 241, 233, 0.7); border-color: var(--cocoa); }

/* ---------- Sezioni ---------- */

.section { padding: clamp(60px, 9vw, 128px) var(--gutter); }
.split { max-width: 1160px; margin: 0 auto; display: grid; gap: 26px; }
.split-head { display: grid; gap: 14px; align-content: start; justify-items: start; }
.role { max-width: 22em; font-weight: 600; }
.prose { display: grid; gap: 18px; max-width: 38em; }
.opening { font-family: var(--font-display); font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.3; }
.essence { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.3; }
.pull { margin-top: 6px; padding-left: 20px; border-left: 2px solid var(--rose); font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: 1.35; }
.note { margin-top: 22px; max-width: 38em; font-size: 0.94rem; }

/* Il ritmo della pagina: una sezione sull'avorio, una su una tinta. */
.tone-rose { background: var(--wash-rose); }
.tone-sage { background: var(--wash-sage); }
.tone-champagne { background: var(--wash-champagne); }
.tone-gold { background: var(--wash-gold); }
/* Un filo d'oro sotto ogni titolo di sezione */
.split-head h2::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 16px; background: var(--gold); }
.nav .lang { gap: 8px; }
.flag { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(60, 48, 40, 0.18); }
.ai { display: inline-block; margin-left: 4px; padding: 1px 8px 0; border-radius: 999px; background: var(--gold-soft); border: 1px solid var(--gold); color: var(--gold-deep); font-family: var(--font-text); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; vertical-align: 6px; }
.areas-title { margin-top: 38px; }
.areas { display: grid; gap: 12px; margin-top: 16px; }
.area { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border-left: 4px solid var(--tone); background: var(--tint); }
.area strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.area.is-rose { --tone: var(--rose); --tint: #F6EEEA; }
.area.is-sage { --tone: var(--sage); --tint: #F1F1EA; }
.area.is-gold { --tone: var(--gold); --tint: #F8F2E4; }
.area.is-cocoa { --tone: var(--cocoa); --tint: #F2EDE7; }
@media (min-width: 620px) { .areas { grid-template-columns: 1fr 1fr; } }

/* ---------- Il manifesto: l'unico momento scuro, firmato a mano ---------- */

.manifesto-band { padding: clamp(72px, 12vw, 168px) var(--gutter); background: var(--forest); color: var(--ivory); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.manifesto-figure { max-width: 46rem; margin: 0 auto; display: grid; gap: 10px; }
.manifesto { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3.5vw, 2.7rem); line-height: 1.34; text-wrap: pretty; }
.signature {
  justify-self: end; margin-top: 14px; color: var(--gold-light);
  font-family: 'Herr Von Muellerhoff', 'Snell Roundhand', 'Apple Chancery', cursive;
  font-size: clamp(3.2rem, 7vw, 5rem); line-height: 1.15; white-space: nowrap;
  transform: rotate(-3deg); transform-origin: right bottom;
}

/* ---------- Il metodo: quattro settimane, in ordine ---------- */

.weeks { max-width: 1160px; margin: clamp(40px, 6vw, 72px) auto; display: grid; gap: 30px 28px; }
.week { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--taupe); }
.week-when { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; font-weight: 600; }
/* Un petalo per settimana, ognuno con un colore della palette. */
.week-when::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--petal); }
.week:nth-child(1) { --petal: var(--gold); }
.week:nth-child(2) { --petal: var(--sage); }
.week:nth-child(3) { --petal: var(--taupe); }
.week:nth-child(4) { --petal: var(--rose); }
.week p:last-child { font-size: 0.98rem; }

/* ---------- Elenchi: i temi, le stanze dell'app ---------- */

.pillars, .rooms { display: grid; }
.pillar, .room { display: grid; gap: 4px; padding: 20px 0; border-top: 1px solid var(--stone); }
.pillar:last-child, .room:last-child { border-bottom: 1px solid var(--stone); }
.pillar dt, .room dt { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.tone-champagne .contact { border-color: #D3C5AE; }

/* ---------- La peonia disegnata ---------- */

.emblem { width: clamp(110px, 16vw, 170px); margin: 6px 0 0 -8px; }
.peony { width: 100%; height: auto; overflow: visible; }
.petal { fill: #FDFBF7; stroke: var(--taupe); stroke-width: 0.7; }
.p-mid { fill: var(--champagne); }
.p-inner { fill: var(--rose); }
.leaf { fill: var(--sage); opacity: 0.65; }
.heart { fill: var(--sage); }

/* ---------- Contatti, ognuno con il suo simbolo ---------- */

.contacts { display: grid; max-width: 34em; }
.contact { display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 12px 0; border-top: 1px solid var(--stone); text-decoration: none; }
.contacts li:last-child .contact { border-bottom: 1px solid var(--stone); }
.contact-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--champagne); }
.contact[data-kind="telefono"] .contact-icon { background: #D2D4C8; }   /* salvia schiarita */
.contact[data-kind="instagram"] .contact-icon { background: #E4D4D0; }  /* rosa cipria schiarito */
.contact-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--cocoa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-text { display: grid; min-width: 0; }
.contact-label { font-size: 0.84rem; }
.contact-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- In fondo ---------- */

.foot { display: grid; gap: 24px; padding: clamp(40px, 6vw, 72px) var(--gutter); border-top: 1px solid var(--stone); }
.foot .brand-name { font-size: 1.15rem; }
.foot .brand-title { font-size: 0.86rem; color: var(--quiet); }
.foot-payoff { margin-top: 10px; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }
.foot-notes { display: grid; gap: 6px; max-width: 34em; color: var(--quiet); font-size: 0.88rem; }
.todo { font-weight: 600; }

/* ---------- Schermi larghi ---------- */

@media (min-width: 620px) {
  .weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar, .room { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: baseline; }
  .foot { grid-template-columns: 1fr 1fr; align-items: end; }
  .foot-notes { justify-self: end; text-align: right; }
}

@media (min-width: 900px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 28px; }
  .split-head { grid-column: 1 / span 4; }
  .split-body { grid-column: 6 / span 7; }
  .weeks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hl-1, .hl-2, .hero-figure, .hero-text { animation: none; }
}

@media print {
  .top, .actions { display: none; }
  .manifesto-band { background: none; color: #000000; }
  .signature { color: #000000; }
}

/* ---------- Le lingue: la bandierina della lingua attuale; aprendola, tutte le altre. Senza script. ---------- */

.langs { position: relative; }
.langs summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border-radius: 999px; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.langs[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.langs ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px; padding: 6px;
  display: grid; background: var(--ivory); border: 1px solid var(--gold); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(47, 61, 48, 0.18);
}
.langs ul a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px; background: none; font-size: 0.92rem; }
.langs ul a:hover, .langs ul a[aria-current] { background: var(--gold-soft); text-decoration: none; }


/* Cinese e giapponese: i caratteri del brand non hanno gli ideogrammi, si usano quelli del sistema. */
html[lang="zh-Hans"] {
  --font-display: 'Cormorant Garamond Variable', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
  --font-text: 'Manrope Variable', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
html[lang="ja"] {
  --font-display: 'Cormorant Garamond Variable', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  --font-text: 'Manrope Variable', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', 'Meiryo', sans-serif;
}
html[lang="zh-Hans"] body, html[lang="ja"] body { line-height: 1.8; }
html[lang="zh-Hans"] .hl, html[lang="ja"] .hl { font-style: normal; letter-spacing: 0.04em; line-height: 1.2; }


/* ---------- Percorsi personalizzati ---------- */
.journeys { display: grid; gap: 18px; counter-reset: journey; }
.journey { position: relative; display: grid; gap: 12px; padding: 26px 22px 22px; border: 1px solid #DCCDAE; border-radius: 4px; background: rgba(251, 249, 244, 0.75); counter-increment: journey; }
.journey::before { content: counter(journey, upper-roman); position: absolute; top: -14px; left: 20px; padding: 0 10px; background: var(--wash-gold); color: var(--gold-deep); font-family: var(--font-display); font-size: 1.15rem; font-style: italic; }
.journey.is-featured { border-color: var(--gold); box-shadow: inset 0 0 0 3px rgba(239, 228, 201, 0.9), inset 0 0 0 4px var(--gold); }
.journey h3 { font-size: 1.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 2px 12px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-deep); font-size: 0.82rem; font-weight: 700; }
.journey-for { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.35; }
.ticks { display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 22px; font-size: 0.97rem; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 9px; height: 9px; border-radius: 50% 0; background: var(--sage); transform: rotate(45deg); }
#percorsi .actions { margin-top: 18px; }
@media (min-width: 900px) { .journeys { grid-template-columns: repeat(3, minmax(0, 1fr)); } #percorsi .split-body { grid-column: 1 / -1; margin-top: 34px; } }

/* ---------- Journal ---------- */
.journal { display: grid; gap: 0; }
.entry { display: grid; gap: 10px; padding: 26px 0; border-top: 1px solid var(--gold); }
.entry:last-child { border-bottom: 1px solid var(--gold); }
.entry-kind { color: var(--gold-deep); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.entry h3 { font-size: clamp(1.6rem, 3vw, 2rem); }
.entry details summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--gold-deep); list-style: none; }
.entry details summary::-webkit-details-marker { display: none; }
.entry details summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.entry details[open] summary::after { content: "–"; }
.entry details p { max-width: 38em; }

/* Rifiniture in oro antico */
.tone-gold { background: var(--wash-gold); }
.manifesto-band { box-shadow: inset 0 6px 0 -3px var(--gold-light), inset 0 -6px 0 -3px var(--gold-light); }
.button { border-radius: 2px; }

/* ==========================================================================
   Modifiche 6: la filosofia, le cinque espressioni, l'app, The Journal, l'arabo.
   ========================================================================== */

.band-title { color: var(--gold-light); font-size: clamp(1.6rem, 3vw, 2.2rem); font-style: italic; margin-bottom: 18px; }
.band-text { margin-top: 26px; max-width: 36em; color: #E9E4D8; font-size: 1.04rem; }

/* Le cinque espressioni: foto editoriali, numero in oro, nome originale della rubrica. */
.expressions { max-width: 1160px; margin: clamp(34px, 5vw, 60px) auto 0; display: grid; gap: clamp(34px, 5vw, 56px); counter-reset: none; }
.expression { display: grid; gap: 18px; align-items: center; }
.expression figure { overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; background: var(--champagne); }
.expression figure img { width: 100%; height: 100%; object-fit: cover; }
.expression-text { display: grid; gap: 8px; }
.expression-n { color: var(--gold-deep); font-family: var(--font-display); font-size: 1.25rem; font-style: italic; }
.expression h3 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.expression-formats { color: var(--quiet); font-size: 0.92rem; }
.expression-formats span { font-weight: 700; color: var(--gold-deep); }
@media (min-width: 900px) {
  .expression { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; }
  .expression figure { grid-column: 1 / span 6; }
  .expression-text { grid-column: 8 / span 5; }
  .expression:nth-child(even) figure { grid-column: 7 / span 6; grid-row: 1; }
  .expression:nth-child(even) .expression-text { grid-column: 1 / span 5; grid-row: 1; }
}

/* L'anteprima dell'app in un telefono disegnato con un filetto d'oro. */
.app-preview { display: grid; gap: 28px; }
.phone { justify-self: center; width: min(68vw, 280px); padding: 10px; border-radius: 36px; background: #2F2A26; box-shadow: 0 0 0 1px var(--gold), 0 24px 50px rgba(47, 61, 48, 0.25); }
.phone img { width: 100%; height: auto; border-radius: 28px; }
@media (min-width: 900px) { .app-preview { grid-template-columns: 280px 1fr; align-items: start; } .app-preview .note { grid-column: 1 / -1; } }

/* Le schede degli articoli. */
.j-cards { display: grid; gap: 22px; }
.j-cards.is-grid { margin-top: 24px; }
@media (min-width: 620px) { .j-cards.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .j-cards.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.j-card a { display: grid; gap: 8px; text-decoration: none; }
.j-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; transition: transform 0.4s ease; }
.j-card a:hover .j-img { transform: scale(1.015); }
.j-rubric { color: var(--gold-deep); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; }
.j-title { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.2; }
.j-card a:hover .j-title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.j-excerpt { color: var(--quiet); font-size: 0.96rem; }
.j-date { color: var(--quiet); font-size: 0.84rem; }
#journal .j-cards { gap: 26px; }
@media (min-width: 620px) { #journal .j-card a { grid-template-columns: 180px 1fr; grid-template-rows: auto auto 1fr; column-gap: 20px; } #journal .j-img { grid-row: 1 / span 3; } }

/* La pagina del Journal. */
.journal-page .section { max-width: 1240px; margin: 0 auto; }
.j-head { padding-bottom: 10px; }
.j-head h1, .article h1 { font-size: clamp(2.8rem, 7vw, 5rem); color: #4E4038; }
.kicker { color: var(--gold-deep); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.feature { display: grid; gap: 18px; text-decoration: none; }
.feature-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.feature-text { display: grid; gap: 10px; max-width: 40em; }
.feature-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
@media (min-width: 900px) { .feature { grid-template-columns: 7fr 5fr; align-items: end; gap: 34px; } }
.j-tools { display: grid; gap: 16px; margin-bottom: 30px; }
.j-search { display: grid; gap: 6px; max-width: 30em; font-weight: 600; font-size: 0.92rem; }
.j-search input { min-height: 48px; padding: 10px 16px; border: 1px solid var(--stone); border-radius: 999px; background: #FBF9F4; font: inherit; color: inherit; }
.j-search input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 4px 14px; border: 1px solid var(--stone); border-radius: 999px; background: none; font: inherit; font-size: 0.9rem; color: inherit; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--gold); background: var(--forest); color: var(--gold-light); }
.rubric-list { display: grid; gap: 14px; margin-top: 20px; max-width: 46em; }
.rubric-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding-top: 14px; border-top: 1px solid var(--gold); }
.rubric-list strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; }
.rubric-list span:last-child { grid-column: 2; color: var(--quiet); }

/* L'articolo. */
.article { max-width: 860px; margin: 0 auto; padding: clamp(30px, 5vw, 70px) var(--gutter) 30px; display: grid; gap: 20px; }
.crumbs a { color: var(--gold-deep); font-weight: 700; text-decoration: none; }
.art-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.art-hero img, .art-figure img { width: 100%; height: auto; border-radius: 2px; }
.art-figure { margin: 10px 0; }
.art-body { max-width: 40em; font-size: 1.1rem; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--champagne); }
.share-mail { color: var(--gold-deep); font-weight: 600; }
.cta { display: grid; gap: 12px; padding: 26px 24px; border: 1px solid var(--gold); background: var(--wash-gold); }
.cta h2 { font-size: 1.9rem; }

/* L'arabo: da destra a sinistra, con caratteri arabi del sistema. */
html[lang="ar"] {
  --font-display: 'Cormorant Garamond Variable', 'Noto Naskh Arabic', 'Geeza Pro', 'Amiri', 'Traditional Arabic', serif;
  --font-text: 'Manrope Variable', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif;
}
html[lang="ar"] body { line-height: 1.85; }
html[lang="ar"] .hl { font-style: normal; letter-spacing: 0; line-height: 1.35; }
html[lang="ar"] .hl-2, html[lang="ar"] .manifesto, html[lang="ar"] .journey-for, html[lang="ar"] .band-title { font-style: normal; }
html[dir="rtl"] .hl-2 { text-align: left; }
html[dir="rtl"] .masthead .langs { right: auto; left: 12px; }
html[dir="rtl"] .langs ul { right: auto; left: 0; }
html[dir="rtl"] .pull { padding-left: 0; padding-right: 20px; border-left: 0; border-right: 2px solid var(--rose); }
html[dir="rtl"] .ticks li { padding-left: 0; padding-right: 22px; }
html[dir="rtl"] .ticks li::before { left: auto; right: 2px; }
html[dir="rtl"] .journey::before { left: auto; right: 20px; }
html[dir="rtl"] .signature { justify-self: start; }
html[dir="rtl"] .foot-notes { text-align: left; }
@media (max-width: 699px) { html[dir="rtl"] .masthead .langs { margin: 0 0 6px -14px; justify-self: start; } }
html[lang="hi"] {
  --font-display: 'Cormorant Garamond Variable', 'Noto Serif Devanagari', 'Kohinoor Devanagari', 'Devanagari Sangam MN', serif;
  --font-text: 'Manrope Variable', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', sans-serif;
}
html[lang="hi"] body { line-height: 1.8; }
html[lang="hi"] .hl, html[lang="hi"] .hl-2, html[lang="hi"] .manifesto { font-style: normal; line-height: 1.35; }