/* ============================================================================
   My Agile Stories — override layer over Journal (GAE-301)
   Loaded AFTER built/screen.css and {{ghost_head}} so these tokens win.

   Palette: REAL hexes sampled from readtangle.com (2026-07-14) — pulled from
   the site's built CSS :root plus frequency analysis of the rendered stylesheet.
   Replaces the un-sampled provisional crema/terracotta tokens from the mockup.
   ========================================================================== */

:root {
    /* --- Tangle-faithful palette (sampled) --------------------------------- */
    /* CEO redesign 2026-07-16 (claude.ai/design "Redesign myagilestories.dc.html") — palette esatta */
    --mas-paper:       #f5efe1;  /* ground esatto del design (crema un filo più greige) */
    --mas-paper-warm:  #f5efe1;  /* header sul ground, solo filetto sotto (come nel design) */
    --mas-ink:         #1d1a16;  /* body text del design (caldo, un filo più soft del near-black) */
    --mas-ink-soft:    #5a5344;  /* secondary text del design                   */
    --mas-title:       #48443e;  /* titoli "soft" (preferenza CEO) rimappata sul nuovo ground */
    --mas-muted:       #8a8171;  /* meta del design                             */
    --mas-border:      #e2d9c6;  /* hairline del design                         */
    --mas-accent:      #7c2951;  /* plum del design (rose-plum sobrio) — sostituisce #951867 */
    --mas-accent-dark: #611f3f;  /* deeper plum : link hover                    */

    /* --- wire tokens into Ghost's design-system variables ------------------ */
    --ghost-accent-color:   var(--mas-accent);
    --background-color:     var(--mas-paper);
    --page-color:           var(--mas-paper);
    --page-body-text-color: var(--mas-ink);

    /* --- wire tokens into Journal's internal variables --------------------- */
    --color-black:          var(--mas-ink);
    --color-primary-text:   var(--mas-ink);
    --color-secondary-text: var(--mas-muted);
    --color-darker-gray:    var(--mas-ink);      /* CEO: titoli erano "spenti" (usavano ink-soft #423d34); ora tutti i titoli/heading Journal → ink brillante, coerente col resto */
    --color-border:         var(--mas-border);
    --color-light-gray:     var(--mas-border);

    /* --- article column: 760px (~+15% vs Journal's default) ---------------- */
    --content-width: 760px;
}

body { background-color: var(--mas-paper); color: var(--mas-ink); }
a { color: var(--mas-accent); }
.gh-content a:hover,
.gh-head .nav a:hover { color: var(--mas-accent-dark); }

/* keep the editorial list/section column in step with the article column */
.gh-wrapper > .gh-section { max-width: 760px; }

/* ============================================================================
   Harvard-Gazette masthead (stacked layout)
   Journal's "Stacked" nav already gives a centred brand with a thin nav
   between two rules. We (1) stack a figure-mark ABOVE the "My Agile Stories"
   wordmark, and (2) make the rules robust real borders instead of the fixed
   absolute-offset pseudo-elements.
   ========================================================================== */

.is-head-stacked .gh-head-brand {
    height: auto;
    min-height: unset;
    padding: 2.6rem 0 1.6rem;
}

/* Masthead font — Neue Haas Unica (a Helvetica revival: resembles the original
   Harvard Gazette logo font). Bundled in the theme. */
@font-face {
    font-family: "Neue Haas Unica";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/NeueHaasUnica-Medium.woff2") format("woff2");
}

/* Masthead is an inline SVG that REUSES the reference's exact square path and
   text baselines (Harvard_Gazette_logo.svg) — only the words + square colour
   change, so geometry/size are pixel-identical to the reference (~64px tall). */
.mas-masthead { display: inline-flex; text-decoration: none; }
.mas-logo-svg { height: 73.079896px; width: auto; display: block; }   /* GAE-315: canvas so the 56.924u mark renders 65px visible (65*64/56.924) */
.mas-logo-svg .mas-svg-em { fill: var(--mas-accent); }
.mas-logo-svg .mas-svg-wm {
    font-family: "Newsreader", Georgia, "Times New Roman", serif;   /* CEO 2026-07-16: prova il logo nel serif editoriale */
    font-weight: 500;
    fill: var(--mas-title);
    font-size: 22px;
    letter-spacing: -0.2px;
}
.mas-masthead img { max-height: 73.079896px; width: auto; }   /* GAE-315: align site-logo branch to the 65px-visible placeholder */
@media (max-width: 600px) { .mas-logo-svg { height: 3.2rem; } }

/* real hairline rules around the nav (robust; no fixed pixel offsets) */
@media (min-width: 768px) {
    .is-head-stacked .gh-head-menu {
        height: auto;
        margin: 0;
        padding: 1.05rem 0 1.15rem;
        border-top: 1px solid var(--mas-border);
        border-bottom: 1px solid var(--mas-border);
    }
    .is-head-stacked .gh-head-menu::before,
    .is-head-stacked .gh-head-menu::after { display: none; }
    .is-head-stacked .gh-head-menu .nav { justify-content: center; }
}

/* ============================================================================
   Header — "Logo on the left" (Harvard Gazette SITE-header style)
   logo left · nav (Articoli / Glossario / Riferimenti / About) · actions right
   (Cerca / Accedi / Iscriviti). Nav items separated by thin dividers.
   ========================================================================== */
.is-head-left-logo:not(.is-head-transparent) #gh-head {
    background: var(--mas-paper-warm);
    border-bottom: 1px solid var(--mas-border);
}
/* logo prominent in the header bar, like the Harvard Gazette site header
   (~0.75 of the 100px header height). Free the brand's 64px cap so it isn't clipped. */
.is-head-left-logo .gh-head { height: 118px; }         /* taller bar for a bigger logo */
.is-head-left-logo .gh-head-brand { height: auto; }
.is-head-left-logo .mas-logo-svg { height: 73.079896px; }   /* GAE-315: desktop-winning rule → 65px visible mark (was 5.5rem/88px) */
@media (max-width: 991px) { .is-head-left-logo .gh-head { height: auto; } .is-head-left-logo .mas-logo-svg { height: 4rem; } }

@media (min-width: 992px) {
    /* thin vertical dividers between nav items, centred in the spacing */
    .is-head-left-logo .gh-head-menu .nav { gap: 0; }
    .is-head-left-logo .gh-head-menu .nav > li > a { padding: 0 1.5rem; }
    .is-head-left-logo .gh-head-menu .nav > li + li { border-left: 1px solid var(--mas-border); }
}
/* search icon in the Tangle accent (like the Gazette's crimson search) */
.is-head-left-logo .gh-head-actions .gh-search { color: var(--mas-accent); }
/* subscribe button already uses --ghost-accent-color (plum) via Journal */

/* ============================================================================
   TYPOGRAPHY AS DESIGN ELEMENT (CEO direction, Harvard Gazette reference)
   Editorial serif (Playfair Display) drives nav, titles & blockquotes;
   body stays sans (Journal Inter). Accent = Tangle plum.
   ========================================================================== */
:root { --mas-font-display: "Newsreader", Georgia, "Times New Roman", serif; }
/* optical sizing on for the display serif everywhere it's used */
.gh-head-menu .nav a, .gh-article-title, .gh-card-title,
.gh-article-excerpt, .gh-content blockquote,
.gh-content h2, .gh-content h3 { font-optical-sizing: auto; }

/* --- Nav: serif + RIGHT-aligned (like the reference) --- */
.is-head-left-logo .gh-head-menu { justify-content: flex-end; }
.is-head-left-logo .gh-head-menu .nav { justify-content: flex-end; }
.is-head-left-logo .gh-head-menu .nav a {
    font-family: var(--mas-font-display);
    font-weight: 500;
    font-size: 1.9rem;
    letter-spacing: 0;
    text-transform: none;          /* editorial Title Case, not uppercase (CEO) */
    color: var(--mas-ink);         /* brilliant black nav (Gazette); plum = accent/hover */
}
.is-head-left-logo .gh-head-menu .nav a:hover { color: var(--mas-accent); }

/* tighten the gap between the nav and the utility divider (was a wide grid gap):
   About sits close to the separator, balanced against the icons. */
.is-head-left-logo .gh-head-inner { column-gap: 2rem; }

/* --- Nav flush-right against the utility divider (no Journal 64px gap) --- */
.is-head-left-logo .gh-head-menu { margin-right: 0; margin-left: 0; }

/* --- Right utility cluster (Cerca · account-icon · Iscriviti): light icons
   (search + sign-in) matching the search magnifier, then the Iscriviti CTA
   (sober plum button). Set apart from the serif nav by a hairline. --- */
.is-head-left-logo .gh-head-actions {
    border-left: 1px solid var(--mas-border);
    padding-left: 2rem;      /* symmetric with the 2rem column-gap → balanced divider */
    gap: 1.7rem;
}
/* both utility icons the SAME rendered size + weight (were mismatched, CEO) */
.is-head-left-logo .gh-head-actions .gh-search svg,
.is-head-left-logo .gh-head-actions .mas-signin svg { width: 21px; height: 21px; }
.is-head-left-logo .gh-head-actions .mas-signin {
    display: inline-flex;
    align-items: center;
    color: var(--mas-accent);
    padding: 0;
}
.is-head-left-logo .gh-head-actions .mas-signin:hover { color: var(--mas-accent-dark); }
.is-head-left-logo .gh-head-actions .gh-head-btn.gh-primary-btn {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.4rem;
    padding: 0.7rem 1.4rem;
    border-radius: 4px;      /* less pill, more editorial */
    letter-spacing: 0;
}

/* --- Post/card titles: editorial serif --- */
.gh-article-title,
.gh-card-title { font-family: var(--mas-font-display); font-weight: 600; letter-spacing: 0; }
.gh-card-title { font-weight: 600; }
/* CEO: titoli sul tono "soft" #3f3b35 (il pieno #100c07 era troppo scuro); Journal
   sbiadiva i titoli in hover con opacity .8 → ESATTAMENTE questo tono. Lo rendiamo
   fisso, e in hover si SCURISCE all'ink pieno (così riposo≠hover). !important per
   battere le regole di Journal (screen.css, caricato dopo) su opacity/colore. */
.gh-article-title, .gh-card-title { color: var(--mas-title) !important; opacity: 1 !important; }
.gh-card-link:hover .gh-card-title,
.gh-card-link:hover .gh-article-title { color: var(--mas-ink) !important; opacity: 1 !important; }

/* CEO: "troppo spazio sopra e sotto le foto" → margini più stretti attorno alla
   copertina (le immagini sono anche state rese a fascia più bassa). */
.gh-article-image { margin-top: 2.4rem; margin-bottom: 2.4rem; }
.gh-article-image img { display: block; margin: 0 auto; }

/* --- Article header, Gazette style: kicker · serif title · rule · byline · subtitle, centred --- */
/* CEO 2026-07-16: allinea lo spazio header→contenuto al featured della home
   (là c'è +40px sopra il blocco) così passando da home a dettaglio non c'è "salto". */
.mas-article-header { text-align: center; margin-top: 4rem; }
.gh-article-kicker {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mas-ink);
    text-decoration: none;
    margin-bottom: 2.4rem;
}
.gh-article-kicker:hover { color: var(--mas-accent); }
.mas-article-header .gh-article-title {
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.005em;
    max-width: 16em;
    margin-inline: auto;
}
.gh-article-rule {
    display: block;
    width: 44px;
    height: 3px;
    background: var(--mas-accent);
    margin: 3rem auto 2.4rem;
}
.mas-article-header .gh-article-meta {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    color: var(--mas-muted);
    margin-top: 0;
}
/* Subtitle: SAME serif family as the title (Newsreader), lighter weight →
   connected to the title, not a disconnected different font (CEO note). */
.mas-article-header .gh-article-excerpt {
    font-family: var(--mas-font-display);
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1.35;
    color: var(--mas-ink-soft);
    max-width: 30em;   /* CEO: sottotitolo troppo stretto (andava a 4 righe) → più spazio sx/dx così sta in ~2 righe */
    margin: 2.8rem auto 0;
    text-wrap: pretty;
}

/* COHERENCE across the whole site (CEO): subtitles/excerpts and the site
   description in the SAME editorial serif everywhere — article header, homepage
   featured post, and list cards — so nothing renders in the fallback sans. */
.gh-article-excerpt,
.gh-card-excerpt,
.gh-about-description {
    font-family: var(--mas-font-display);
    font-optical-sizing: auto;
    font-weight: 400;
}
.gh-card-excerpt { color: var(--mas-ink-soft); }

/* Section headings inside the article ("chapter subtitles") in the same
   editorial serif so the type system is coherent end-to-end (CEO note). */
.gh-content h2, .gh-content h3 {
    font-family: var(--mas-font-display);
    letter-spacing: 0;
    color: var(--mas-ink);
}
.gh-content h2 { font-weight: 600; font-size: 1.55em; }          /* section heading */
.gh-content h3 { font-weight: 600; font-style: italic; font-size: 1.3em; }

/* Warm date pill on cards — friendly secondary accent, sampled in the spirit of
   Tangle's yellow date badge but restrained (butter tint + ink). Proposal. */
.gh-card-date {
    background: var(--mas-date-bg, #fbecc8);
    color: var(--mas-ink);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.2rem;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
}

/* --- Blockquote / citations: large serif + thick plum rule (reference s3) --- */
/* Citation: clearly BIGGER than the section headings (2.4em vs 1.55em) → strong
   hierarchy; medium weight; balanced wrapping so it never orphans one little
   word on its own line (CEO: "non può rimanere monca con una parolina a capo"). */
.gh-content blockquote:not([class]) {
    font-family: var(--mas-font-display);
    font-weight: 300;              /* CEO: peso light → più elegante, toglie lo sbilanciamento (era 500 = troppo pesante) */
    font-style: normal;
    font-size: 2.4em;
    line-height: 1.24;
    color: rgb(107, 107, 107);   /* CEO: softer grey for the citation, distinct from body ink */
    border-left: 3px solid var(--mas-accent);   /* CEO: bordo sx più sottile (era 5px = troppo spesso) */
    padding-left: 3.2rem;
    margin-left: 0;
    text-wrap: balance;      /* no orphan word on the last line */
    text-wrap: pretty;
}
.gh-content blockquote:not([class]) p { margin-bottom: 0.4em; text-wrap: balance; }
/* Balance the space around the quote. NOTE: .gh-content is display:grid, so
   sibling margins do NOT collapse — they ADD. The gap below the quote was its own
   3.6rem PLUS the next element's top margin (headings get 1.6em≈4.96rem from
   Journal's `.gh-content > [id]:not(:first-child)`, specificity 0,3,0), landing at
   ~86px below vs 36px above. Fix: the quote owns its air with equal margins, and the
   FOLLOWING element's top margin is zeroed so nothing is added below. !important is
   required to outrank that 0,3,0 id rule. CEO: ~50px both sides → 5rem (1rem=10px). */
.gh-content > blockquote:not([class]) { margin-top: 5rem; margin-bottom: 5rem; }
.gh-content > blockquote:not([class]) + * { margin-top: 0 !important; }

/* ============================================================================
   BODY READABILITY (CEO: max-legibility body font that ties with the style)
   Study: the biggest legibility levers are size (18–20px), line-height (1.5–1.65),
   measure (60–75 char — our 760px column ≈ 70), weight (400) and contrast. The
   FACE matters less than these. To tie fully with the editorial serif we chose,
   the body is set in the SAME family (Newsreader) at its TEXT optical size —
   a proper reading serif → cohesive + legible long-form. (Sans alt available.)
   ========================================================================== */
/* Body = Charter (Medium's reading serif, per CEO): sturdy, low-contrast,
   high-legibility (Matthew Carter). Charter ships with macOS → exact match on
   the CEO's Mac; Georgia (also Carter) is the near-identical cross-platform
   fallback. ~20px / regular 400 / line-height 1.6, like the Medium reference. */
.gh-content {
    font-family: "Charter", "Bitstream Charter", Georgia, "Times New Roman", serif;
    font-size: 2rem;        /* ~20px */
    line-height: 1.6;
    font-weight: 400;
    color: var(--mas-ink);
}
.gh-content p { letter-spacing: 0; }
.gh-content > p + p { margin-top: 1.7em; }   /* airy paragraph rhythm, Medium-like */

/* ============================================================================
   CEO REDESIGN 2026-07-15 (mockup db78be47): plum newsletter band + dark
   editorial footer + tracked-caps masthead. Home = "quaderno" finito.
   Compound selectors (.gh-x.mas-x) so we beat Journal's screen.css (loaded after).
   ========================================================================== */

/* --- Newsletter band: deep plum full-width CTA --- */
.gh-subscribe.mas-newsletter { background: #5e1e3e; padding: 7rem 0; margin: 0; border: 0; }
.mas-newsletter > .gh-outer { max-width: none; padding: 0 4vmin; }
.mas-newsletter .mas-newsletter-inner {
    max-width: 58rem; margin: 0 auto; text-align: center; display: block; padding: 0; border: 0;
}
.mas-newsletter .mas-newsletter-kicker {
    font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.2em;
    font-size: 1.3rem; font-weight: 600; color: #d99cbd; margin: 0 0 1.8rem;
}
.mas-newsletter .mas-newsletter-title {
    font-family: var(--mas-font-display); font-weight: 500; font-size: 4rem;
    line-height: 1.15; color: #fbf3f7; margin: 0 0 1.6rem; letter-spacing: 0;
}
.mas-newsletter .mas-newsletter-desc {
    font-family: var(--mas-font-display); font-size: 1.9rem; line-height: 1.5;
    color: #e2c3d3; max-width: 36rem; margin: 0 auto 3.2rem;
}
.mas-newsletter .mas-newsletter-input {
    display: flex; align-items: stretch; max-width: 44rem; margin: 0 auto;
    background: #faf3f6; border-radius: 5px; overflow: hidden; padding: 0.5rem; border: 0;
}
.mas-newsletter .mas-newsletter-input .gh-subscribe-input-text {
    flex: 1; display: flex; align-items: center; gap: 0.9rem; padding: 0 1.4rem;
    color: #a04773; font-family: var(--font-sans); font-size: 1.6rem; background: none;
}
.mas-newsletter .mas-newsletter-input .gh-subscribe-input-text svg { width: 18px; height: 18px; }
.mas-newsletter .mas-newsletter-input .gh-subscribe-input-btn {
    background: var(--mas-accent); color: #fff; font-family: var(--font-sans);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.35rem;
    padding: 1.3rem 2.4rem; border-radius: 3px; white-space: nowrap;
}
.mas-newsletter .mas-newsletter-note {
    font-family: var(--mas-font-display); font-style: italic; font-size: 1.5rem;
    color: #c891ac; margin: 1.8rem 0 0;
}

/* ── Pagine autore & argomento (dc.html "Pagine autore e argomento") ──────── */
.mas-listpage { max-width: 86rem; margin: 0 auto; padding: 0 4rem; }

.mas-listkicker {
    font-family: var(--font-sans); font-size: 1.2rem; letter-spacing: 0.22em;
    text-transform: uppercase; font-weight: 600; color: var(--mas-accent);
}
.mas-listcount {
    font-family: var(--font-sans); font-size: 1.3rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--mas-muted); margin-top: 1.4rem;
}

/* testata autore */
.mas-authorhead { display: flex; align-items: center; gap: 3.4rem; padding: 1rem 0 4rem; }
.mas-authorhead-avatar {
    width: 10.4rem; height: 10.4rem; border-radius: 50%; flex: none; object-fit: cover; display: block;
}
.mas-authorhead-avatar--fallback {
    background: var(--mas-accent); color: #f3e4ec;
    display: flex; align-items: center; justify-content: center;
}
.mas-authorhead-avatar--fallback svg { width: 4.6rem; height: 4.6rem; fill: currentColor; }
.mas-authorhead-name {
    font-family: var(--mas-font-display); font-size: 5.8rem; line-height: 1.02;
    font-weight: 500; letter-spacing: -0.022em; margin-top: 0.8rem; color: var(--mas-ink);
}
.mas-authorhead-bio {
    font-family: var(--mas-font-display); font-size: 1.9rem; line-height: 1.5;
    color: var(--mas-ink-soft); margin-top: 1.2rem; max-width: 52rem;
}

/* testata argomento */
.mas-taghead { padding: 1rem 0 4.4rem; }
.mas-taghead-name {
    font-family: var(--mas-font-display); font-size: 6.6rem; line-height: 1;
    font-weight: 500; letter-spacing: -0.024em; margin-top: 1rem; color: var(--mas-ink);
    text-wrap: balance;
}
.mas-taghead-desc {
    font-family: var(--mas-font-display); font-size: 2.2rem; line-height: 1.5;
    font-style: italic; color: var(--mas-ink-soft); margin-top: 2rem; max-width: 60rem;
    text-wrap: pretty;
}

/* lista */
.mas-list-item { display: block; padding: 4rem 0; border-top: 1px solid #d9cfb9; }
.mas-list-kicker {
    font-family: var(--font-sans); font-size: 1.1rem; letter-spacing: 0.17em;
    text-transform: uppercase; font-weight: 600; color: var(--mas-accent); margin-bottom: 1.3rem;
}
.mas-list-title {
    font-family: var(--mas-font-display); font-size: 3.8rem; line-height: 1.06;
    font-weight: 500; letter-spacing: -0.016em; color: var(--mas-ink); transition: color .18s ease;
}
.mas-list-item:hover .mas-list-title { color: var(--mas-accent); }
.mas-list-excerpt {
    font-family: var(--mas-font-display); font-size: 1.9rem; line-height: 1.55;
    color: var(--mas-ink-soft); margin-top: 1.5rem;
}
.mas-list-meta {
    margin-top: 1.8rem; font-family: var(--font-sans); font-size: 1.2rem;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--mas-muted);
}

/* chiusura elegante (raccolta breve) */
.mas-list-closer {
    border-top: 1px solid #d9cfb9; padding-top: 4rem;
    display: flex; align-items: center; gap: 1.6rem; color: var(--mas-muted);
}
.mas-list-closer-tick { width: 9px; height: 9px; background: var(--mas-accent); display: inline-block; flex: none; }
.mas-list-closer-text { font-family: var(--mas-font-display); font-size: 1.7rem; font-style: italic; }
.mas-list-closer-link {
    margin-left: auto; font-family: var(--font-sans); font-size: 1.2rem; letter-spacing: 0.16em;
    text-transform: uppercase; font-weight: 600; color: var(--mas-accent);
    border-bottom: 1px solid #d8b9c9; padding-bottom: 2px;
}
.mas-list-closer-link:hover { color: var(--mas-accent-dark); }

.mas-listpage .gh-loadmore { margin-top: 4rem; }

@media (max-width: 700px) {
    .mas-listpage { padding: 0 2.2rem; }
    .mas-authorhead { flex-direction: column; align-items: flex-start; gap: 2rem; }
    .mas-authorhead-name { font-size: 4.2rem; }
    .mas-taghead-name { font-size: 4.4rem; }
    .mas-list-title { font-size: 2.9rem; }
    .mas-list-closer { flex-wrap: wrap; }
    .mas-list-closer-link { margin-left: 0; }
}

/* CEO 2026-07-16: card "Entra in redazione" nella sidebar */
.mas-join-card {
    border: 1px solid var(--mas-border);
    background: #faf5ea;
    padding: 2rem 2.1rem 2.2rem;
}
.mas-join-text {
    font-family: var(--mas-font-display);
    font-size: 1.6rem; line-height: 1.5; color: var(--mas-ink-soft);
    margin: 0 0 1.4rem;
}
.mas-join-link {
    font-family: var(--font-sans); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.2rem;
    color: var(--mas-accent); text-decoration: none;
}
.mas-join-link:hover { color: var(--mas-accent-dark); }
.mas-join-link span { transition: margin-left .18s ease; margin-left: 0.2rem; }
.mas-join-link:hover span { margin-left: 0.5rem; }

/* CEO 2026-07-16: le pagine (Glossario, Riferimenti…) ereditavano da Journal
   `.page-template .gh-main{padding-block:0}` → il corpo si appiccicava al footer.
   Solo il fondo era il problema: la testata articolo dà già ~80px in cima (come
   la pagina autore). Quindi ripristino solo il respiro SOTTO; sopra resta 0 così
   il titolo parte alla stessa altezza della pagina autore (CEO 2026-07-16). */
.page-template .gh-main { padding-top: 0; padding-bottom: 9rem; }

/* --- Dark editorial footer --- */
.gh-foot.mas-foot { background: #17130f; color: #e9e0d2; padding: 6rem 0 3rem; margin-top: 0; border: 0; }
.mas-foot .mas-foot-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; align-items: start; padding-bottom: 4rem;
}
.mas-foot .mas-foot-logo .mas-logo-svg { height: 3.4rem; width: auto; }
.mas-foot .mas-svg-em { fill: #b45585; }
.mas-foot .mas-svg-wm { fill: #f3e4ec; }
.mas-foot .mas-foot-tagline {
    font-family: var(--mas-font-display); font-style: italic; font-size: 1.7rem;
    color: #a89b88; margin: 1.8rem 0 0; max-width: 26rem;
}
.mas-foot .mas-foot-head {
    font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.16em;
    font-size: 1.2rem; font-weight: 600; color: #8f8471; margin: 0.4rem 0 1.8rem;
}
.mas-foot .mas-foot-col ul { list-style: none; margin: 0; padding: 0; }
.mas-foot .mas-foot-col li { margin: 0 0 1.1rem; }
.mas-foot .mas-foot-col a { font-family: var(--mas-font-display); font-size: 1.75rem; color: #e9e0d2; text-decoration: none; }
.mas-foot .mas-foot-col a:hover { color: #e6bdd2; }
.mas-foot .mas-foot-bottom {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid #2e2720; padding-top: 2.6rem;
}
.mas-foot .mas-foot-squares { display: flex; gap: 0.6rem; }
.mas-foot .mas-foot-squares span { width: 10px; height: 10px; border: 1px solid #a04773; display: block; }
.mas-foot .mas-foot-squares span:last-child { background: var(--mas-accent); border-color: var(--mas-accent); }
.mas-foot .mas-foot-credits { display: flex; gap: 2.4rem; font-family: var(--font-sans); font-size: 1.3rem; color: #8f8471; }

@media (max-width: 700px) {
    .mas-foot .mas-foot-top { grid-template-columns: 1fr; gap: 3rem; }
    .mas-foot .mas-foot-bottom { flex-direction: column; gap: 1.6rem; align-items: flex-start; }
    .mas-newsletter .mas-newsletter-title { font-size: 3rem; }
    .mas-newsletter .mas-newsletter-input { flex-direction: column; }
}

/* --- Home featured hero: centered, editorial (CEO mockup) --- */
.gh-latest { text-align: center; }
.gh-latest .gh-card-link { display: block; }
.gh-latest .gh-article-meta { display: flex; justify-content: center; margin-bottom: 1.4rem; }
.gh-latest .gh-card-date {   /* kicker: no pill, plum tracked caps */
    background: none; color: var(--mas-accent); padding: 0; border-radius: 0;
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.3rem; font-weight: 600;
}
.gh-latest .gh-article-title { max-width: 14em; margin: 0 auto; }
.gh-latest .gh-article-excerpt {
    max-width: 30em; margin: 2.4rem auto 0; font-style: italic; color: var(--mas-ink-soft);
}
.gh-latest .gh-card-meta { display: flex; justify-content: center; margin-top: 2.8rem; }
.gh-latest .gh-card-duration {
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 1.2rem; color: var(--mas-muted);
    display: inline-flex; align-items: center; gap: 1.4rem;
}
.gh-latest .gh-card-duration::before,
.gh-latest .gh-card-duration::after { content: ""; width: 3rem; height: 1px; background: var(--mas-border); }

/* --- Altre edizioni list items: tag kicker + plain muted date (CEO mockup) --- */
.gh-feed .gh-card-kicker {
    display: block; font-family: var(--font-sans); text-transform: uppercase;
    letter-spacing: 0.14em; font-size: 1.25rem; font-weight: 600; color: var(--mas-accent);
    margin-bottom: 0.9rem;
}
.gh-feed .gh-card-date {
    background: none; padding: 0; border-radius: 0; color: var(--mas-muted);
    font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 1.2rem; font-weight: 600;
}
.gh-feed .gh-card-duration { text-transform: uppercase; letter-spacing: 0.08em; color: var(--mas-muted); }

/* --- Medium-style article action bar (native: comments + share) --- */
.mas-actionbar {
    display: flex; justify-content: center; gap: 3rem;
    margin: 3rem auto 0; padding: 1.5rem 0;
    border-top: 1px solid var(--mas-border); border-bottom: 1px solid var(--mas-border);
}
.mas-actionbar .mas-action {
    display: inline-flex; align-items: center; gap: 0.7rem;
    color: var(--mas-muted); font-family: var(--font-sans); font-size: 1.45rem;
    font-weight: 500; text-decoration: none; background: none; cursor: pointer;
}
.mas-actionbar .mas-action:hover { color: var(--mas-accent); }
.mas-actionbar .mas-action svg { width: 19px; height: 19px; display: block; }
.mas-actionbar .mas-action-count { font-variant-numeric: tabular-nums; }

/* CEO dc.html: nel featured hero solo il tempo di lettura (niente contatore commenti) */
.gh-latest .gh-card-comments { display: none; }

/* CEO 2026-07-16: footer minimale — solo la striscia in basso */
.mas-foot.mas-foot--minimal { padding: 3.5rem 0 3rem; }

/* ============================================================================
   CEO dc.html "Article - commenti e navigazione" — nav edizioni + frame commenti
   ========================================================================== */
/* Navigazione edizioni: prev/next in due colonne, filetto centrale, occhiello plum */
.gh-navigation.mas-editionnav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid var(--mas-ink); margin-top: 5rem;
}
.mas-editionnav .gh-navigation-previous { padding: 3.4rem 4rem 3.4rem 0; }
.mas-editionnav .gh-navigation-next { padding: 3.4rem 0 3.4rem 4rem; text-align: right; border-left: 1px solid #d9cfb9; }
.mas-editionnav .gh-navigation-link { display: block; }
.mas-editionnav .gh-navigation-label {
    display: flex; align-items: center; gap: 1rem;
    font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.18em;
    font-size: 1.2rem; font-weight: 600; color: var(--mas-accent);
}
.mas-editionnav .gh-navigation-next .gh-navigation-label { justify-content: flex-end; }
.mas-editionnav .gh-navigation-label svg { width: 15px; height: 15px; }
.mas-editionnav .gh-navigation-title {
    font-family: var(--mas-font-display); font-size: 2.6rem; line-height: 1.15;
    font-weight: 500; letter-spacing: -0.01em; margin-top: 1.2rem; color: var(--mas-ink);
    transition: color .18s ease;
}
.mas-editionnav .gh-navigation-link:hover .gh-navigation-title { color: var(--mas-accent); }

/* ── Commenti ─────────────────────────────────────────────────────────────
   Empty-state / CTA custom (dc.html «Article - commenti e navigazione»):
   ricostruito nel tema per i non-iscritti — il widget nativo di Ghost non è
   tematizzabile a questo livello (tipografia/pulsante rosa hard-coded). Per i
   membri loggati resta il widget nativo {{comments}} (box+thread reali). */
.gh-comments { margin: 5rem auto 0; }

.mas-comments {
    background: #faf5ea;
    border: 1px solid var(--mas-border);
    padding: 3.4rem 3.6rem 4.2rem;
}
.mas-comments-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: 1.6rem; border-bottom: 1px solid var(--mas-border);
}
.mas-comments-title {
    font-family: var(--mas-font-display); font-weight: 700;
    font-size: 3.2rem; line-height: 1; letter-spacing: -0.01em;
    color: var(--mas-ink); margin: 0;
}
.mas-comments-count {
    font-family: var(--font-sans); text-transform: uppercase;
    letter-spacing: 0.2em; font-size: 1.2rem; font-weight: 500;
    color: var(--mas-muted);
}
.mas-comments-empty { text-align: center; padding: 4.6rem 0 1rem; }
.mas-comments-squares {
    display: flex; justify-content: center; gap: 0.7rem; margin-bottom: 2.6rem;
}
.mas-comments-squares span {
    width: 11px; height: 11px; box-sizing: border-box;
    border: 1.5px solid var(--mas-accent);
}
.mas-comments-squares span:last-child { background: var(--mas-accent); }
.mas-comments-cta-title {
    font-family: var(--mas-font-display); font-weight: 500;
    font-size: 4rem; line-height: 1.05; letter-spacing: -0.015em;
    color: var(--mas-ink); margin: 0;
}
.mas-comments-cta-desc {
    font-family: var(--mas-font-display); font-size: 2rem; line-height: 1.5;
    color: var(--mas-ink-soft); margin: 1.3rem auto 0; max-width: 34rem;
}
.mas-comments-cta-desc strong { font-weight: 600; color: var(--mas-ink); }
.mas-comments-cta-btn {
    display: inline-block; margin-top: 2.8rem;
    background: var(--mas-accent); color: #fbf3f7;
    font-family: var(--font-sans); text-transform: uppercase;
    letter-spacing: 0.16em; font-size: 1.3rem; font-weight: 600;
    padding: 1.25rem 2.9rem; border: 0; text-decoration: none;
    transition: background .18s ease;
}
.mas-comments-cta-btn:hover { background: var(--mas-accent-dark); }
.mas-comments-signin {
    margin-top: 1.9rem; font-family: var(--mas-font-display);
    font-size: 1.7rem; color: var(--mas-muted);
}
.mas-comments-signin a {
    color: var(--mas-accent); text-decoration: underline;
    text-underline-offset: 2px;
}

/* Stato iscritto (mock «stato B»): stesso frame serif del non-iscritto, con il
   widget nativo Ghost (avatar + campo + bottone plum) sotto il filetto. Il box
   è un iframe: eredita l'accent plum e il font del sito, ma bordo/placeholder
   restano gestiti da Ghost — non tematizzabili oltre a quello. */
.mas-comments--member .mas-comments-native { margin-top: 2.6rem; }
/* neutralizza i margini superiori del widget nativo così il gap sotto il
   filetto è quello del frame, non doppio */
.mas-comments-native > * { margin-top: 0; }

/* ============================================================================
   GAE-359 — Revisione lista articoli home + footer (dc.html "Lista e footer")
   La lista home ("Altri articoli") adotta lo stesso linguaggio editoriale delle
   pagine argomento/autore (.mas-list-item): occhiello plum, titolo serif, meta
   muta, separatori a filetto. Il footer minimale riottiene il masthead a sx.
   Scope lista limitato a .gh-wrapper > .gh-section (colonna principale della
   home): la sidebar e le pagine tag/autore restano invariate.
   ========================================================================== */

/* Titolo di sezione "Altri articoli": CEO 2026-07-16 preferisce lo stesso
   trattamento di «Chi siamo»/«Argomenti» (label + filetto inline del tema base)
   → nessun override, eredita `.gh-section-title` come la sidebar. */

/* Voci lista: separatore in alto + respiro verticale (dc.html 52px) */
.gh-wrapper > .gh-section > .gh-feed .gh-card {
    padding: 5.2rem 0;
    border-top: 1px solid #c8bca3;
}
.gh-wrapper > .gh-section > .gh-feed .gh-card + .gh-card { margin-top: 0; }
/* Niente filetto sulla PRIMA voce: sotto il titolo di sezione (che ha già il suo
   filetto inline) eviterebbe la doppia linea segnalata dal CEO. */
.gh-wrapper > .gh-section > .gh-feed .gh-card:first-child { border-top: 0; padding-top: 0.6rem; }

/* Titolo voce: serif 34px, peso 500, tracking stretto (dc.html) */
.gh-wrapper > .gh-section > .gh-feed .gh-card-title {
    font-weight: 500 !important;
    font-size: 3.4rem;
    line-height: 1.08;
    letter-spacing: -0.014em;
}

/* Occhiello tag della voce, allineato al kicker delle pagine argomento/autore */
.gh-wrapper > .gh-section > .gh-feed .gh-card-kicker {
    font-size: 1.1rem; letter-spacing: 0.17em; margin-bottom: 1.3rem;
}

/* Excerpt: 18px, interlinea 1.55, misura contenuta (dc.html 620px) */
.gh-wrapper > .gh-section > .gh-feed .gh-card-excerpt {
    font-size: 1.8rem; line-height: 1.55; margin-top: 1.4rem; max-width: 62rem;
}

/* Meta: solo data · tempo di lettura — niente contatore commenti nella lista
   (coerente col featured, dc.html) */
.gh-wrapper > .gh-section > .gh-feed .gh-card-meta { margin-top: 1.8rem; letter-spacing: 0.13em; }
.gh-wrapper > .gh-section > .gh-feed .gh-card-comments { display: none; }

/* --- Footer minimale: masthead a sinistra, quadratini + copyright a destra --- */
.mas-foot.mas-foot--minimal { padding: 5.5rem 0 4.5rem; }
.mas-foot--minimal .mas-foot-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2.4rem; flex-wrap: wrap; border-top: 0; padding-top: 0;
}
.mas-foot-brand { display: inline-flex; align-items: center; }
/* CEO 2026-07-16: il logo del footer = STESSA grandezza dell'header (73.08px),
   solo colori declinati sul fondo scuro (em plum chiaro + wordmark crema, già
   gestiti da .mas-foot .mas-svg-em / .mas-svg-wm). */
.mas-foot-brand .mas-logo-svg { height: 73.079896px; width: auto; display: block; }
.mas-foot-end { display: flex; align-items: center; gap: 1.8rem; }
@media (max-width: 700px) {
    .mas-foot--minimal .mas-foot-bottom { flex-direction: row; align-items: center; }
    .mas-foot-brand .mas-logo-svg { height: 4rem; }   /* pari all'header ≤991px */
}

/* ============================================================================
   GAE-359 rev2 — feedback CEO 2026-07-16 (screenshot)
   ========================================================================== */
/* «Chi siamo»: staccare la descrizione dal titolo e darle piu respiro
   (line-height come le descrizioni degli articoli in lista). */
.gh-about-title { margin-bottom: 0; }
.gh-about-description { margin-top: 1.5rem; line-height: 1.62; }

/* Navigazione articolo (prev/next): il tema base aggiunge un filetto chiaro su
   `.gh-article-footer` E la nav ne ha un altro (ink) → doppia linea. Tengo solo
   quello della nav come unico separatore (CEO: "semplifichiamo"). */
.gh-article-footer { border-top: 0; padding-top: 0; margin-top: 0; }

/* ============================================================================
   GAE-389 — Variazioni UI newsletter (CEO 2026-07-16)
   ========================================================================== */
/* Sidebar: la newsletter e ora una sezione a se con titoletto «Newsletter»
   (h3.gh-section-title). Il titolo gia stacca il blocco, quindi azzero il
   margine extra del .gh-signup sotto il titolo. */
.mas-sidebar-newsletter .gh-signup { margin-top: 0; }
/* Testo invito nello stesso serif editoriale/peso della descrizione «Chi siamo»
   (.gh-about-description) invece del sans di default. */
.gh-sidebar .gh-signup-description {
    font-family: var(--mas-font-display);
    font-optical-sizing: auto;
    font-weight: 400;
}
/* Ritmo verticale della sidebar. Il tema base stacca ogni sezione di 8rem: con
   la newsletter diventata sezione a sé lo stacco risultava sbilanciato (molto
   sopra «Newsletter», poco sotto verso «Argomenti») e in generale troppo arioso.
   Uniformo a 4.8rem (= 2× il margin-bottom dei titoletti) → ritmo coerente e più
   compatto tra tutte le sezioni. CEO 2026-07-17 «Sistema le spaziature». */
.gh-sidebar .gh-section + .gh-section { margin-top: 4.8rem; }