/* THEOMA.SPACE — shared stylesheet
   Structure: foundation → homepage/about → thematic pages → shared editorial components
   → accessibility/navigation → documented exceptions.
   Desktop narrative geometry has one source of truth in “Canonical narrative geometry”. */

:root {
  --bg: #101110;
  --surface: #181918;
  --surface-hover: #1d1f1e;
  --text: #e6e4df;
  --muted: #969491;
  --line: #2b2d2c;
  --accent: #3fa796;
  --shell: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background:
    linear-gradient(
      180deg,
      #171817 0%,
      #131413 38%,
      #0e0f0e 72%,
      #080908 100%
    );
  color: var(--text);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.shell,
.site-header {
  width: min(calc(100% - 96px), var(--shell));
  margin-inline: auto;
}

.site-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .08em;
}

.brand { font-weight: 600; }

nav {
  display: flex;
  gap: 28px;
  color: var(--muted);
}

nav a, .socials a, .text-link { transition: color .2s ease; }
nav a:hover, .socials a:hover, .text-link:hover { color: var(--accent); }

.hero {
  padding: 92px 0 0;
}

h1 {
  max-width: 1240px;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(48px, 4.8vw, 72px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 400;
}

.hero-copy {
  max-width: 880px;
  margin: 48px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.65vw, 24px);
  line-height: 1.55;
}

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

.world-grid {
  margin-top: 108px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.world-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 150px;
  padding: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.world-card:hover {
  background: var(--surface-hover);
  border-color: #373a38;
  transform: translateY(-2px);
}

.card-image,
.card-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card-image {
  z-index: -2;
  object-fit: cover;
  transform: scale(1.015);
  transition: filter .55s ease, opacity .55s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}

.card-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18,19,18,.78) 0%, rgba(18,19,18,.48) 52%, rgba(18,19,18,.56) 100%),
    linear-gradient(0deg, rgba(10,11,10,.45), rgba(10,11,10,.08));
  transition: opacity .55s ease;
}

.has-image:is(:hover,:focus-visible) .card-image {
  transform: scale(1.045);
}

.has-image:is(:hover,:focus-visible) .card-shade {
  opacity: .84;
}

/* Per-image calibration: deliberately different source corrections,
   tuned toward the same perceived visual weight. */
.card-musica .card-image {
  object-position: 58% 43%;
  filter: grayscale(.58) saturate(.66) brightness(.80) contrast(1.03);
  opacity: .74;
}

.card-mentoring .card-image {
  object-position: 58% 42%;
  filter: grayscale(.78) saturate(.48) brightness(.64) contrast(1.00);
  opacity: .64;
}

.card-eventi .card-image {
  object-position: 46% 48%;
  filter: grayscale(.78) saturate(.50) brightness(.62) contrast(.99);
  opacity: .62;
}

.card-musica:is(:hover,:focus-visible) .card-image {
  filter: grayscale(.14) saturate(.96) brightness(.91) contrast(1.04);
  opacity: .88;
}

.card-mentoring:is(:hover,:focus-visible) .card-image {
  filter: grayscale(.32) saturate(.82) brightness(.78) contrast(1.02);
  opacity: .78;
}

.card-eventi:is(:hover,:focus-visible) .card-image {
  filter: grayscale(.34) saturate(.82) brightness(.76) contrast(1.01);
  opacity: .76;
}

.world-card > .index,
.world-card > .world-title,
.world-card > .arrow {
  position: relative;
  z-index: 2;
}

.index {
  color: var(--accent);
  font-size: 14px;
  letter-spacing: .02em;
}

.world-title {
  margin-top: 24px;
  font-size: 22px;
  font-weight: 600;
}

.arrow {
  position: absolute;
  right: 32px;
  top: 31px;
  color: transparent;
  font-size: 18px;
  transition: color .2s ease, transform .2s ease;
}

.world-card:hover .arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
}

.about {
  padding: 155px 0 20px;
}

.about-copy { max-width: 790px; }

.about-text {
  margin-top: 18px;
  font-family: "Inter", sans-serif;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.42;
  font-weight: 400;
}

.about-text p { margin: 0 0 .85em; }

.text-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.contact {
  padding: 190px 0 150px;
}

.contact h2 {
  max-width: 790px;
  margin: 18px 0 32px;
  font-family: "Inter", sans-serif;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.42;
  font-weight: 400;
}

.site-footer {
  min-height: 110px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.socials { display: flex; gap: 24px; }

@media (max-width: 760px) {
  .shell, .site-header { width: min(calc(100% - 36px), var(--shell)); }
  .site-header { min-height: 74px; }
  nav { gap: 16px; }

  .hero { padding-top: 70px; }

  h1 {
    font-size: clamp(40px, 10.5vw, 58px);
    line-height: 1.02;
  }

  h1 br { display: none; }

  .hero-copy {
    margin-top: 36px;
    font-size: 17px;
  }

  .hero-copy br { display: none; }

  .world-grid {
    margin-top: 70px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .world-card { min-height: 142px; padding: 26px; }
  .arrow { right: 25px; top: 24px; }

  .about { padding-top: 115px; }
  .about-text { font-size: 21px; }

  .contact { padding: 130px 0 110px; }
  .contact h2 { font-size: 21px; }

  .site-footer {
    min-height: auto;
    padding: 30px 0;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 24px;
  }

  .socials { flex-wrap: wrap; }
}

.world-card > .arrow {
  position: absolute;
}

/* Interaction polish */
nav a, .text-link, .socials a { position: relative; }
nav a::after, .text-link::after, .socials a::after {
  content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .24s ease;
}
nav a:hover::after, nav a:focus-visible::after,
.text-link:hover::after, .text-link:focus-visible::after,
.socials a:hover::after, .socials a:focus-visible::after { transform:scaleX(1); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:2px; }

.reveal { opacity:0; transform:translateY(16px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }

@media (hover:none) {
  .world-card:hover { transform:none; }
  .has-image:is(:hover,:focus-visible) .card-image { transform:scale(1.015); }
  .world-card .arrow { color:var(--accent); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}
@media (max-width:760px) {
  .site-header { min-height:70px; font-size:11px; }
  nav { gap:18px; }
  .hero { padding-top:58px; }
  h1 { max-width:100%; font-size:clamp(39px,10.8vw,56px); line-height:1.04; letter-spacing:-.045em; }
  .hero-copy { max-width:100%; margin-top:32px; font-size:16px; line-height:1.6; }
  .world-grid { margin-top:62px; gap:12px; }
  .world-card { min-height:152px; padding:25px; border-radius:9px; }
  .world-title { font-size:20px; }
  .arrow { right:24px; top:23px; }
  .card-musica .card-image { object-position:61% 43%; }
  .card-mentoring .card-image { object-position:56% 42%; }
  .card-eventi .card-image { object-position:45% 48%; }
  .about { padding-top:105px; }
  .about-copy,.contact h2 { max-width:100%; }
  .about-text,.contact h2 { font-size:20px; line-height:1.5; }
  .text-link,.socials a { min-height:44px; display:inline-flex; align-items:center; }
  .text-link { margin-top:8px; }
  .contact { padding:120px 0 100px; }
  .contact h2 { margin:18px 0 24px; }
  .site-footer { padding:28px 0 34px; }
  .socials { gap:24px; }
}
@media (min-width:761px) and (max-width:1050px) {
  .shell,.site-header { width:min(calc(100% - 56px),var(--shell)); }
  h1 { font-size:clamp(50px,6.8vw,68px); }
  .hero-copy { max-width:760px; }
  .world-card { min-height:158px; }
  .about { padding-top:135px; }
  .contact { padding-top:155px; }
}

/* ABOUT PAGE */
.about-page { background: linear-gradient(180deg,#171817 0%,#131413 32%,#0e0f0e 68%,#080908 100%); }
.about-page .site-header nav a[aria-current="page"] { color: var(--text); }
.about-page .site-header nav a[aria-current="page"]::after { transform: scaleX(1); }

.about-hero { padding-top: 118px; padding-bottom: 155px; }
.section-label, .story-no {
  display:block; color:var(--accent); font-size:12px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
}
.about-hero h1 {
  max-width: 1040px; margin:24px 0 0;
  font-size:clamp(48px,5.5vw,82px); line-height:1.03; letter-spacing:-.05em;
}
.about-lead {
  width:min(690px,100%); margin:56px 0 0 auto;
  font-size:clamp(18px,1.6vw,23px); line-height:1.58; color:var(--muted);
}
.about-lead p + p { margin-top:18px; color:var(--text); }

.story { border-top:1px solid var(--line); }
.story-block {
  display:grid; grid-template-columns:minmax(120px, .55fr) minmax(0, 2fr) minmax(80px,.45fr);
  gap:32px; padding:120px 0; border-bottom:1px solid var(--line);
}
.story-content { grid-column:2; max-width:780px; }
.story-content h2 {
  margin:0 0 46px; font-size:clamp(30px,3.1vw,48px); line-height:1.1;
  letter-spacing:-.035em; font-weight:500;
}
.story-content p {
  margin:0; font-size:clamp(17px,1.4vw,20px); line-height:1.72; color:#b7b5b1;
}
.story-content p + p { margin-top:24px; }
.story-content strong { color:var(--text); font-weight:500; }
.story-content .pull {
  margin:46px 0; max-width:850px; color:var(--text);
  font-size:clamp(24px,2.4vw,34px); line-height:1.35; letter-spacing:-.025em;
}
.story-content .closing-line { color:var(--text); }
.story-wide .story-content { max-width:850px; }.final-thought {
  margin-top:62px !important; color:var(--text) !important;
  font-size:clamp(25px,2.6vw,38px) !important; line-height:1.38 !important;
  letter-spacing:-.025em;
}
.final-thought span { color:var(--accent); }
.story-last { border-bottom:0; padding-bottom:160px; }

@media (max-width:760px) {
  .about-hero { padding-top:72px; padding-bottom:100px; }
  .about-hero h1 { margin-top:18px; font-size:clamp(40px,11vw,56px); }
  .about-hero h1 br { display:none; }
  .about-lead { margin:38px 0 0; font-size:17px; }
  .story-block { display:block; padding:82px 0; }
  .story-no { margin-bottom:20px; }
  .story-content h2 { margin-bottom:34px; font-size:30px; }
  .story-content p { font-size:17px; line-height:1.68; }
  .story-content .pull { margin:36px 0; font-size:24px; }.final-thought { margin-top:46px !important; font-size:25px !important; }
  .story-last { padding-bottom:110px; }
}


/* About: quieter editorial hierarchy */
.about-page .about-hero {
  padding-top: 104px;
  padding-bottom: 118px;
}

.about-page .about-hero h1 {
  max-width: 920px;
  font-size: clamp(44px, 4.7vw, 68px);
  line-height: 1.06;
}

.about-page .about-lead {
  width: min(650px, 100%);
  margin-top: 44px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62;
}

.about-page .story-block {
  grid-template-columns: minmax(100px, .42fr) minmax(0, 2fr) minmax(60px, .35fr);
  gap: 28px;
  padding: 88px 0;
}

.about-page .story-no {
  padding-top: 7px;
  font-size: 10px;
  letter-spacing: .13em;
}

.about-page .story-content {
  max-width: 750px;
}

.about-page .story-wide .story-content {
  max-width: 790px;
}

.about-page .story-content h2 {
  margin-bottom: 34px;
  font-size: clamp(27px, 2.45vw, 38px);
  line-height: 1.14;
}

.about-page .story-content p {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.72;
}

.about-page .story-content p + p {
  margin-top: 20px;
}

.about-page .story-content .pull {
  margin: 32px 0;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.5;
  letter-spacing: -.015em;
}.about-page .final-thought {
  margin-top: 38px !important;
  font-size: clamp(19px, 1.55vw, 23px) !important;
  line-height: 1.5 !important;
  letter-spacing: -.015em;
}

.about-page .story-last {
  padding-bottom: 118px;
}


@media (max-width: 760px) {
  .about-page .about-hero {
    padding-top: 64px;
    padding-bottom: 82px;
  }

  .about-page .about-hero h1 {
    font-size: clamp(37px, 9.8vw, 49px);
    line-height: 1.06;
  }

  .about-page .about-lead {
    margin-top: 32px;
    font-size: 16px;
  }

  .about-page .story-block {
    padding: 62px 0;
  }

  .about-page .story-no {
    margin-bottom: 15px;
    padding-top: 0;
  }

  .about-page .story-content h2 {
    margin-bottom: 28px;
    font-size: 27px;
  }

  .about-page .story-content p {
    font-size: 16px;
    line-height: 1.68;
  }

  .about-page .story-content .pull {
    margin: 28px 0;
    font-size: 19px;
  }.about-page .final-thought {
    margin-top: 32px !important;
    font-size: 19px !important;
  }

  .about-page .story-last {
    padding-bottom: 84px;
  }
}

/* WRITING CARD */
.card-scrittura .card-image {
  object-position: 60% 58%;
  filter: grayscale(.78) saturate(.46) brightness(.64) contrast(1.02);
  opacity: .62;
}
.card-scrittura:is(:hover,:focus-visible) .card-image {
  filter: grayscale(.34) saturate(.78) brightness(.76) contrast(1.03);
  opacity: .76;
}

/* WRITING PAGE */
.writing-page {
  background: linear-gradient(180deg,#171817 0%,#131413 31%,#0d0e0d 67%,#070807 100%);
}
.writing-hero { padding-top:104px; padding-bottom:144px; }
.writing-hero h1 {
  max-width:980px; margin:22px 0 0;
  font-size:clamp(44px,4.9vw,72px); line-height:1.04; letter-spacing:-.05em;
}
.writing-lead {
  margin-top:68px;
  color:#b7b5b1;
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.68;
}
.writing-lead p { margin:0; }
.writing-lead p + p { margin-top:20px; }
.writing-lead .writing-emphasis { margin-top:32px; color:var(--text); }

.book-section { border-top:1px solid var(--line); }
.book-intro { padding:116px 0 128px; display:grid; grid-template-columns:minmax(150px,.5fr) minmax(0,2fr) minmax(70px,.3fr); gap:30px; }
.writing-marker { color:var(--accent); font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.book-intro > .writing-marker { padding-top:9px; }
.book-intro h2 {
  grid-column:2; margin:0; max-width:900px; font-size:clamp(34px,3.8vw,56px); line-height:1.08; letter-spacing:-.045em; font-weight:400;
}
.book-copy { grid-column:2; margin-top:18px; color:#b7b5b1; font-size:clamp(16px,1.15vw,18px); line-height:1.72; }
.book-copy p { margin:0; }
.book-copy p + p { margin-top:20px; }
.book-copy em { color:var(--text); font-style:normal; }
.emotion-line {
  grid-column:2; margin:42px 0 0; max-width:800px; color:var(--text);
  font-size:clamp(17px,1.45vw,21px); line-height:1.7; letter-spacing:-.01em;
}
.emotion-line span:not(:last-child)::after { content:""; display:inline-block; width:3px; height:3px; margin:0 11px 4px 13px; border-radius:50%; background:var(--accent); opacity:.7; }

.memory-block { position:relative; padding:106px 0 156px 8%; border-top:1px solid rgba(255,255,255,.07); }
.memory-rail { position:absolute; left:0; top:106px; bottom:156px; width:1px; background:linear-gradient(180deg,rgba(63,167,150,.75),rgba(63,167,150,.18) 70%,rgba(63,167,150,0)); }
.memory-heading { display:flex; align-items:baseline; gap:22px; margin-bottom:62px; }
.memory-parent { color:#6f706d; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.novel-fragment {
  margin:0; color:var(--text); font-size:clamp(25px,2.6vw,39px); line-height:1.34; letter-spacing:-.03em; font-weight:400;
}
.fragment-first { width:min(820px,82%); }
.memory-copy { margin:108px 7% 0 auto; }
.memory-copy h3 {
  margin:0 0 38px; color:var(--text); font-size:clamp(24px,2.25vw,34px); line-height:1.3; letter-spacing:-.025em; font-weight:400;
}
.memory-copy p { margin:0; color:#b7b5b1; font-size:clamp(16px,1.15vw,18px); line-height:1.72; }
.memory-copy p + p { margin-top:20px; }
.fragment-second { width:min(790px,76%); margin:128px 0 0 auto; color:#c9c7c2; font-size:clamp(22px,2.15vw,32px); }

.horos-section { position:relative; overflow:hidden; background:#070807; }.horos-inner { padding:18px 0 188px; }
.horos-head { display:grid; grid-template-columns:minmax(150px,.5fr) minmax(0,2fr) minmax(70px,.3fr); gap:30px; }
.horos-head > .writing-marker { padding-top:9px; }
.horos-head h2 {
  grid-column:2; margin:0; max-width:900px; font-size:clamp(34px,3.8vw,56px); line-height:1.08; letter-spacing:-.045em; font-weight:400;
}
.horos-composition { position:relative; margin-top:96px; min-height:930px; color:#aaa8a4; font-size:clamp(16px,1.15vw,18px); line-height:1.72; }
.horos-p { position:relative; margin:0; width:min(620px,55%); }
.horos-p em { color:var(--text); font-style:normal; }
.horos-p strong { color:var(--text); font-weight:500; }
.horos-p1 { margin-left:17%; }
.horos-p2 { margin:132px 5% 0 auto; }
.horos-p3 { margin:156px 0 0 8%; }
.horos-p4 { margin:132px 8% 0 auto; }
.horos-trace { position:absolute; pointer-events:none; opacity:.68; }
.horos-trace::before,.horos-trace::after,.horos-trace i { content:""; position:absolute; display:block; }
.trace-one { top:90px; left:49%; width:28%; height:105px; }
.trace-one::before { left:0; top:0; width:58%; height:1px; background:linear-gradient(90deg,rgba(63,167,150,.62),rgba(63,167,150,.1)); }
.trace-one::after { left:58%; top:0; width:1px; height:56px; background:linear-gradient(180deg,rgba(63,167,150,.32),transparent); }
.trace-one i { left:calc(58% - 2px); top:-2px; width:5px; height:5px; border:1px solid rgba(63,167,150,.55); transform:rotate(45deg); }
.trace-two { bottom:205px; left:29%; width:29%; height:90px; }
.trace-two::before { right:0; top:0; width:64%; height:1px; background:linear-gradient(90deg,rgba(63,167,150,.06),rgba(63,167,150,.5)); }
.trace-two::after { right:64%; top:0; width:1px; height:46px; background:linear-gradient(180deg,rgba(63,167,150,.28),transparent); }
.horos-void { position:absolute; top:375px; left:48%; width:30%; height:130px; }
.horos-void::before { content:""; position:absolute; left:0; top:50%; width:34%; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.13),transparent); }
.horos-void span { position:absolute; left:44%; top:calc(50% - 2px); width:4px; height:4px; border-radius:50%; background:rgba(63,167,150,.5); }
.horos-status { margin:150px 0 0 17%; color:var(--text); font-size:clamp(19px,1.5vw,22px); }

@media (max-width:760px) {
  .card-scrittura .card-image { object-position:62% 55%; }
  .writing-hero { padding-top:64px; padding-bottom:94px; }
  .writing-hero h1 { margin-top:18px; font-size:clamp(37px,9.8vw,49px); line-height:1.06; }
  .writing-hero h1 br { display:none; }
  .writing-lead { display:block; margin-top:42px; font-size:16px; line-height:1.68; }
  .writing-lead-opening,.writing-lead-closing { width:100%; max-width:none; margin-left:0; }
  .writing-lead-closing { margin-top:42px; }
  .writing-lead .writing-emphasis { margin-top:28px; }
  .book-intro { display:block; padding:78px 0 88px; }
  .book-intro > .writing-marker { display:block; padding:0; margin-bottom:20px; }
  .book-intro h2 { font-size:32px; }
  .book-copy { margin-top:36px; font-size:16px; line-height:1.68; }
  .emotion-line { margin-top:34px; font-size:16px; }
  .emotion-line span { white-space:nowrap; }
  .emotion-line span:not(:last-child)::after { margin-inline:8px 10px; }
  .memory-block { padding:74px 0 104px 22px; }
  .memory-rail { top:74px; bottom:104px; }
  .memory-heading { display:block; margin-bottom:50px; }
  .memory-parent { display:block; margin-top:9px; }
  .fragment-first,.fragment-second { width:100%; font-size:24px; line-height:1.4; }
  .memory-copy { width:100%; margin:72px 0 0; }
  .memory-copy h3 { margin:0 0 30px; font-size:24px; }
  .memory-copy p { font-size:16px; line-height:1.68; }
  .fragment-second { margin-top:72px; color:#c9c7c2; font-size:21px; }.horos-inner { padding:0 0 120px; }
  .horos-head { display:block; }
  .horos-head > .writing-marker { display:block; padding:0; margin-bottom:20px; }
  .horos-head h2 { font-size:32px; }
  .horos-composition { margin-top:64px; min-height:0; font-size:16px; line-height:1.68; }
  .horos-p { width:100%; margin-left:0; margin-right:0; }
  .horos-p2,.horos-p3,.horos-p4 { margin-top:82px; }
  .horos-p2 { padding-left:13%; }
  .horos-p3 { padding-right:9%; }
  .horos-p4 { padding-left:8%; }
  .horos-trace,.horos-void { position:relative; inset:auto; width:100%; height:46px; margin:18px 0 -22px; }
  .trace-one::before,.trace-two::before { left:14%; right:auto; top:22px; width:28%; }
  .trace-one::after,.trace-two::after { display:none; }
  .trace-one i { left:42%; top:20px; }
  .horos-void::before { left:55%; top:22px; width:23%; }
  .horos-void span { left:49%; top:20px; }
  .horos-status { margin:94px 0 0; font-size:19px; }
}


/* Writing: one continuous book flow, then an emerging Hóros field */
.writing-books-flow {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    rgba(16,17,16,0) 0%,
    rgba(13,14,13,.18) 28%,
    rgba(10,11,10,.52) 58%,
    rgba(7,8,7,.88) 78%,
    #070807 100%);
}
.book-ygg {
  position: relative;
  border-top: 1px solid var(--line);
}
.book-ygg::before {
  content:"";
  position:absolute;
  left:0;
  top:116px;
  bottom:110px;
  width:1px;
  background:linear-gradient(180deg,
    rgba(63,167,150,.72) 0%,
    rgba(63,167,150,.52) 42%,
    rgba(63,167,150,.24) 82%,
    rgba(63,167,150,0) 100%);
}
.book-intro { padding-left:8%; }
.memory-block {
  padding-left:8%;
  border-top:1px solid rgba(255,255,255,.055);
}
.memory-rail { display:none; }
.novel-fragment {
  margin-left:0;
  color:#b8b6b1;
  font-size:clamp(17px,1.55vw,22px);
  line-height:1.55;
  letter-spacing:-.015em;
}
.fragment-second {
  margin:112px 0 0;
  color:#aaa8a4;
  font-size:clamp(17px,1.55vw,22px);
}

/* The next visual language begins before Hóros itself. */
.horos-approach {
  position:relative;
  width:min(calc(100% - 96px),var(--shell));
  height:230px;
  margin:0 auto;
  pointer-events:none;
}
.approach-line,.field-line {
  position:absolute;
  display:block;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(63,167,150,.18) 22%,rgba(63,167,150,.3) 72%,transparent);
}
.approach-a { left:72%; top:18px; height:104px; opacity:.28; }
.approach-b { left:38%; top:92px; height:128px; opacity:.38; }
.approach-c { left:86%; top:118px; height:98px; opacity:.48; }

.horos-section { background:transparent; }
.horos-inner { padding:24px 0 188px; }
.horos-composition { min-height:1010px; }
.horos-field { position:absolute; inset:-72px 0 70px; pointer-events:none; z-index:0; }
.horos-p,.horos-status { z-index:2; }
.field-line { background:linear-gradient(180deg,transparent,rgba(63,167,150,.2) 12%,rgba(63,167,150,.38) 80%,transparent); }
.f1 { left:8%; top:3%; height:150px; opacity:.24; }
.f2 { left:72%; top:12%; height:235px; opacity:.30; }
.f3 { left:45%; top:29%; height:270px; opacity:.36; }
.f4 { left:88%; top:43%; height:315px; opacity:.44; }
.f5 { left:20%; top:58%; height:300px; opacity:.50; }
.f6 { left:61%; top:67%; height:285px; opacity:.58; }
.f3::after,.f4::after,.f5::after,.f6::after {
  content:"";
  position:absolute;
  top:58%; left:0;
  width:clamp(54px,8vw,118px); height:1px;
  background:linear-gradient(90deg,rgba(63,167,150,.34),transparent);
}
.f4::after { width:clamp(42px,6vw,90px); transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(63,167,150,.34)); }
.f5::after { top:32%; width:clamp(70px,10vw,145px); }
.f6::after { top:72%; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(63,167,150,.4)); }
.horos-trace { z-index:1; }
.horos-void { z-index:1; }

@media (max-width:760px) {
  .writing-books-flow { background:linear-gradient(180deg,rgba(16,17,16,0),rgba(11,12,11,.42) 58%,#070807 100%); }
  .book-ygg::before { top:78px; bottom:72px; left:0; }
  .book-intro { padding-left:22px; }
  .memory-block { padding-left:22px; }
  .novel-fragment,.fragment-first,.fragment-second { width:100%; font-size:18px; line-height:1.55; }
  .fragment-second { margin-top:70px; }
  .horos-approach { width:min(calc(100% - 36px),var(--shell)); height:150px; }
  .approach-a { left:78%; height:78px; }
  .approach-b { left:24%; top:55px; height:92px; }
  .approach-c { left:92%; top:72px; height:70px; }
  .horos-inner { padding-top:10px; }
  .horos-field { inset:-34px 0 35px; }
  .f1 { left:6%; height:100px; }
  .f2 { left:82%; top:16%; height:150px; }
  .f3 { left:42%; top:31%; height:170px; }
  .f4 { left:92%; top:48%; height:190px; }
  .f5 { left:12%; top:61%; height:185px; }
  .f6 { left:68%; top:72%; height:170px; }
  .f3::after,.f4::after,.f5::after,.f6::after { max-width:62px; }
}

/* Writing: shared novel rail + quieter emerging Hóros structure */
/* One faint fragment introduces Hóros before its section; the rest of the field grows inside it. */
.approach-b,
.approach-c { display:none; }
.approach-a { left:72%; top:54px; height:142px; opacity:.30; }

/* Hóros now shares the same continuous left rail as Gli Eredi. */
.horos-inner {
  position:relative;
  padding-left:8%;
}
.horos-inner::before {
  content:"";
  position:absolute;
  left:0;
  top:24px;
  bottom:92px;
  width:1px;
  background:linear-gradient(180deg,
    rgba(63,167,150,.68) 0%,
    rgba(63,167,150,.52) 44%,
    rgba(63,167,150,.28) 84%,
    rgba(63,167,150,0) 100%);
}

/* Fewer secondary marks: enough to suggest an emerging structure without filling the void. */
.f2,
.f4,
.trace-two,
.horos-void { display:none; }
.f1 { left:11%; top:5%; height:142px; opacity:.20; }
.f3 { left:48%; top:31%; height:250px; opacity:.31; }
.f5 { left:23%; top:59%; height:286px; opacity:.42; }
.f6 { left:67%; top:69%; height:270px; opacity:.52; }
.f3::after { width:clamp(48px,6vw,92px); opacity:.75; }
.f5::after { width:clamp(62px,8vw,118px); opacity:.82; }
.f6::after { width:clamp(58px,7vw,105px); opacity:.9; }
.trace-one { opacity:.44; }
.trace-one::before { width:46%; opacity:.7; }
.trace-one::after { height:42px; opacity:.65; }
.trace-one i { display:none; }

@media (max-width:760px) {
  .horos-inner { padding-left:22px; }
  .horos-inner::before { left:0; top:10px; bottom:58px; }
  .approach-a { left:78%; top:46px; height:92px; opacity:.28; }
  .f1 { left:10%; top:6%; height:92px; }
  .f3 { left:47%; top:33%; height:150px; }
  .f5 { left:14%; top:62%; height:165px; }
  .f6 { left:72%; top:73%; height:150px; }
  .trace-one { opacity:.36; }
}

/* Editorial grid + accessibility baseline */
:root {
  --writing-inset: 8%;
  --text-secondary: #b7b5b1;
  --text-meta: #969491;
}

/* Keyboard navigation and assistive text */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 11px 14px;
  background: var(--text);
  color: #101110;
  border-radius: 4px;
  transform: translateY(-180%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.brand, nav a, .socials a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.world-card:focus-visible .arrow { color:var(--accent); transform:translate(2px,-2px); }
.world-card:focus-visible { border-color:#59605d; }
.memory-parent { color:var(--text-meta); }

/* Writing page geometry is defined once in “Canonical narrative geometry” below. */
.book-intro {
  display:block;
  padding-left:var(--writing-inset);
}
.book-intro > .writing-marker {
  display:block;
  padding-top:0;
  margin-bottom:24px;
}
.book-intro h2,
.book-copy,
.emotion-line {
  grid-column:auto;
}
.book-copy { margin-top:38px; }

/* Hóros follows the same structural axis as Gli Eredi. */
.horos-head {
  display:block;
}
.horos-head > .writing-marker {
  display:block;
  padding-top:0;
  margin-bottom:24px;
}
.horos-head h2 { grid-column:auto; }

/* Keep Hóros expressive, but snap prose to two deliberate content axes. */
.horos-p { width:min(620px,58%); }
.horos-p1 { margin-left:0; }
.horos-p2 { margin:132px 0 0 auto; }
.horos-p3 { margin:156px 0 0 0; }
.horos-p4 { margin:132px 0 0 auto; }
.horos-status { margin-left:0; }

@media (max-width:760px) {
  .brand, nav a { min-height:44px; }
  .site-header { font-size:12px; }
  .writing-lead { margin-top:42px; }
  .writing-lead-opening,
  .writing-lead-closing {
    width:100%;
    margin-left:0;
    text-align:left;
  }
  .writing-lead-closing { margin-top:42px; }
  .book-intro { padding-left:22px; }
  .book-intro > .writing-marker,
  .horos-head > .writing-marker { margin-bottom:20px; }
  .horos-p { width:100%; }
  .horos-p1,.horos-p2,.horos-p3,.horos-p4 { margin-left:0; margin-right:0; }
  .horos-p2,.horos-p3,.horos-p4 { margin-top:82px; }
  .horos-p2 { padding-left:13%; }
  .horos-p3 { padding-right:9%; }
  .horos-p4 { padding-left:8%; }
}

/* Internal design-system reference */
.guide-page { background:linear-gradient(180deg,#171817 0%,#111211 46%,#080908 100%); }
.guide-state { color:var(--text-meta); font-size:11px; letter-spacing:.12em; }
.guide-hero { padding:110px 0 150px; }
.guide-hero .eyebrow,.guide-index { color:var(--accent); font-size:11px; letter-spacing:.16em; font-weight:600; }
.guide-hero h1 { margin-top:24px; max-width:900px; }
.guide-intro { width:min(700px,65%); margin:58px 0 0 auto; color:var(--text-secondary); font-size:clamp(18px,1.6vw,22px); line-height:1.65; }
.guide-section { display:grid; grid-template-columns:minmax(150px,22%) minmax(0,760px); gap:8%; padding:92px 0; border-top:1px solid var(--line); }
.guide-index { padding-top:10px; }
.guide-content h2 { margin:0 0 32px; font-size:clamp(30px,3vw,46px); line-height:1.12; letter-spacing:-.03em; font-weight:400; }
.guide-content > p { color:var(--text-secondary); font-size:17px; line-height:1.7; }
.guide-rules { margin-top:48px; border-left:1px solid var(--line); padding-left:28px; }
.guide-rules p { margin:0; padding:20px 0; color:var(--text-secondary); line-height:1.65; border-bottom:1px solid var(--line); }
.guide-rules p:first-child { padding-top:0; }
.guide-rules strong { color:var(--text); font-weight:500; }
.guide-rules.compact p { padding:15px 0; }
.axis-demo { position:relative; height:220px; margin:54px 0; border-block:1px solid var(--line); }
.axis-demo i { position:absolute; top:0; bottom:0; width:1px; background:rgba(63,167,150,.52); }
.axis-demo i:nth-child(1){left:0}.axis-demo i:nth-child(2){left:18%}.axis-demo i:nth-child(3){right:0}
.axis-demo span { position:absolute; bottom:16px; color:var(--text-meta); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.axis-demo span:nth-of-type(1){left:10px}.axis-demo span:nth-of-type(2){left:calc(18% + 10px)}.axis-demo span:nth-of-type(3){right:10px}
.type-specimens { margin:48px 0; }
.type-specimens > div { display:grid; grid-template-columns:90px 1fr; gap:24px; padding:28px 0; border-top:1px solid var(--line); }
.type-specimens > div > span { color:var(--text-meta); font-size:11px; letter-spacing:.12em; }
.type-specimens p { margin:0; max-width:590px; color:var(--text-secondary); line-height:1.65; }
.spec-h1 { font-size:clamp(32px,4vw,52px); line-height:1.08; letter-spacing:-.035em; font-weight:400; }
.spec-h2 { font-size:clamp(26px,3vw,38px); line-height:1.14; letter-spacing:-.025em; font-weight:400; }
.swatches { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:48px 0; }
.swatches div { border:1px solid var(--line); padding:12px; color:var(--text-secondary); font-size:12px; line-height:1.5; }
.swatches i { display:block; height:88px; margin-bottom:14px; border:1px solid #343634; }
.swatches code,.guide-content code { color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
.guide-donts .guide-content > p { font-size:clamp(20px,2vw,27px); line-height:1.7; color:var(--text); }
.guide-example { margin-top:48px; padding:26px 0 0 28px; border-left:1px solid var(--accent); }
.guide-example span { display:block; margin-bottom:12px; color:var(--accent); font-size:11px; letter-spacing:.14em; font-weight:600; }
.guide-footer { margin-top:70px; display:flex; justify-content:space-between; gap:24px; color:var(--text-meta); }
.guide-footer a { min-height:44px; display:inline-flex; align-items:center; color:var(--text); }
@media(max-width:760px){
 .guide-state{font-size:9px}.guide-hero{padding:72px 0 100px}.guide-intro{width:100%;margin-top:40px}
 .guide-section{display:block;padding:68px 0}.guide-index{margin-bottom:26px;padding:0}.guide-content h2{margin-bottom:24px}
 .axis-demo{height:170px}.type-specimens>div{grid-template-columns:1fr;gap:12px}.swatches{grid-template-columns:1fr 1fr}
 .guide-footer{display:block}.guide-footer a{margin-top:14px}
}

/* Home + About: shared editorial discipline */
:root {
  --editorial-inset: 8%;
  --reading-measure: 750px;
  --standalone-narrative-width: 75%;
}

/* A skip-link should move both viewport and keyboard focus into main. */
main[tabindex="-1"]:focus { outline: none; }

/* HOME: preserve the original character while making the rhythm systemic. */
.worlds { margin-top:108px; }
.worlds .world-grid { margin-top:0; }
.hero-copy { max-width:790px; }
.about-copy,
.contact h2 { max-width:var(--reading-measure); }/* ABOUT: same three-axis logic as the rest of the editorial system. */
.about-page .about-lead {
  margin-left:auto;
}
.about-page .story-block {
  grid-template-columns:var(--editorial-inset) minmax(0,var(--reading-measure)) 1fr;
  gap:0;
}
.about-page .story-no {
  grid-column:1;
  align-self:start;
}
.about-page .story-content {
  grid-column:2;
  width:100%;
  max-width:var(--reading-measure);
}
.about-page .story-wide .story-content { max-width:var(--reading-measure); }
.about-page .story-content .pull,
.about-page .story-content .pullquote,
.about-page .final-thought { max-width:680px; }
.about-page .story-content .pullquote {
  margin:38px 0 0;
  padding:0 0 0 20px;
  border-left:1px solid var(--accent);
  color:var(--text);
  font-size:clamp(19px,1.55vw,23px);
  line-height:1.5;
  letter-spacing:-.015em;
}

@media (max-width:760px) {
  .worlds { margin-top:62px; }
  .about-page .about-lead {
    width:100%;
    margin-left:0;
    text-align:left;
  }
  .about-page .story-block { display:block; }
  .about-page .story-content .pullquote {
    margin-top:32px;
    font-size:19px;
  }
}

@media (min-width:761px) and (max-width:1050px) {
  .worlds { margin-top:88px; }
  .about-page .about-lead { width:min(650px,62%); }
}


/* About: one documentary image introduces human presence without turning the page into a gallery. */
.about-documentary {
  margin:48px 0 2px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
}
.about-documentary img {
  display:block; width:100%; aspect-ratio:3/2; object-fit:cover; object-position:50% 42%;
  filter:saturate(.90) brightness(.84) contrast(1.02);
}
@media (max-width:760px) {
  .about-documentary { width:calc(100% + 18px); margin-left:-18px; border-left:0; }
  .about-documentary img { aspect-ratio:4/3; object-position:54% 44%; }
}

/* MUSIC PAGE
   Shared editorial axes, with light and overlap as the page-specific grammar. */
.music-page {
  background:linear-gradient(180deg,#171817 0%,#121312 34%,#0d0e0d 68%,#080908 100%);
}
.music-hero { padding-top:104px; padding-bottom:150px; }
.music-hero h1 {
  max-width:1000px; margin:22px 0 0;
  font-size:clamp(44px,5vw,74px); line-height:1.04; letter-spacing:-.05em; font-weight:400;
}
.music-hero-grid {
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
  align-items:end; gap:clamp(48px,7vw,110px); margin-top:76px;
}
.music-hero-copy { max-width:590px; color:var(--text-secondary); font-size:clamp(16px,1.2vw,18px); line-height:1.72; }
.music-hero-copy p { margin:0; }
.music-hero-copy p + p { margin-top:20px; }
.music-stage-image {
  position:relative; margin:0; min-height:440px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.music-stage-image::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(8,9,8,.18),transparent 44%),linear-gradient(0deg,rgba(8,9,8,.28),transparent 40%);
}
.music-stage-image img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:56% 44%;
  filter:grayscale(.04) saturate(.94) brightness(.80) contrast(1.04);
}
.music-flow { border-top:1px solid var(--line); }
.music-section {
  position:relative; display:grid;
  grid-template-columns:var(--editorial-inset) minmax(0,var(--reading-measure)) 1fr;
  gap:0; padding-top:122px; padding-bottom:132px; border-bottom:1px solid var(--line);
}
.music-marker {
  grid-column:1; padding-top:8px; color:var(--accent); font-size:10px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
}
.music-content { grid-column:2; max-width:var(--reading-measure); }
.music-content-right { grid-column:2 / 4; justify-self:end; }
.music-content h2 {
  margin:0 0 48px; max-width:720px; font-size:clamp(31px,3.25vw,49px); line-height:1.08;
  letter-spacing:-.04em; font-weight:400;
}
.music-content p { margin:0; color:var(--text-secondary); font-size:clamp(16px,1.15vw,18px); line-height:1.72; }
.music-content p + p { margin-top:22px; }
.music-content strong { color:var(--text); font-weight:500; }
.music-pull {
  margin-top:52px !important; max-width:690px; color:var(--text) !important;
}
.music-voices { min-height:760px; overflow:hidden; }
.music-voices .music-content { position:relative; z-index:2; }.music-poets { padding-top:148px; padding-bottom:180px; border-bottom:0; }
.music-return {
  margin:58px 0 !important; max-width:700px; color:var(--text) !important;
}
.music-ending {
  margin-top:68px !important; max-width:700px; color:var(--text) !important;
}

@media (max-width:900px) {
  .music-hero-grid { grid-template-columns:1fr; gap:58px; }
  .music-hero-copy { max-width:680px; }
  .music-stage-image { min-height:460px; }
  .music-content-right { width:100%; justify-self:auto; }
}
@media (max-width:760px) {
  .music-hero { padding-top:64px; padding-bottom:92px; }
  .music-hero h1 { margin-top:18px; font-size:clamp(37px,9.8vw,49px); line-height:1.06; }
  .music-hero-grid { margin-top:44px; gap:48px; }
  .music-hero-copy { font-size:16px; line-height:1.68; }
  .music-stage-image { min-height:340px; margin-inline:-18px; border-left:0; border-right:0; }
  .music-stage-image img { object-position:59% 44%; }
  .music-section { display:block; padding:76px 0 86px; }
  .music-marker { display:block; padding:0; margin-bottom:20px; }
  .music-content,.music-content-right { width:100%; max-width:none; }
  .music-content h2 { margin-bottom:32px; font-size:30px; }
  .music-content p { font-size:16px; line-height:1.68; }
  .music-pull { margin-top:38px !important; }
  .music-voices { min-height:0; padding-bottom:110px; }.music-poets { padding-top:94px; padding-bottom:112px; }
  .music-return { margin:44px 0 !important; }
  .music-ending { margin-top:48px !important; }
}

/* Music: photography carries the idea from individual → ensemble → relationship. */
.music-voices {
  min-height:0;
  overflow:visible;
  grid-template-columns:var(--editorial-inset) minmax(0,1fr) var(--editorial-inset);
  row-gap:72px;
}
.music-voices .music-content {
  grid-column:2;
  width:min(100%,var(--reading-measure));
  max-width:var(--reading-measure);
  justify-self:center;
}
.music-voices-image {
  grid-column:1 / 4;
  width:min(980px,86%);
  margin:8px 0 0 auto;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.music-voices-image::after,
.poets-opening-image::after,
.poets-together-image::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 80px rgba(8,9,8,.12);
}
.music-voices-image img,
.poets-opening-image img,
.poets-together-image img {
  display:block; width:100%; height:auto;
}
.music-voices-image img {
  aspect-ratio:16/7.2; object-fit:cover; object-position:50% 48%;
  filter:saturate(.82) brightness(.82) contrast(1.04);
}
.music-poets {
  display:grid;
  grid-template-columns:var(--editorial-inset) minmax(0,var(--reading-measure)) 1fr;
}
.poets-opening-image {
  position:relative;
  width:min(900px,calc(100vw - 96px));
  margin:0 0 64px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.poets-opening-image img {
  aspect-ratio:16/7;
  object-fit:cover;
  object-position:50% 45%;
  filter:saturate(.84) brightness(.76) contrast(1.04);
}
.poets-together-image {
  position:relative;
  width:min(760px,calc(100vw - 96px));
  margin:58px 0 0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.poets-together-image img {
  aspect-ratio:16/8;
  object-fit:cover;
  object-position:50% 48%;
  filter:saturate(.86) brightness(.8) contrast(1.03);
}
.music-poets .music-ending { margin-top:56px !important; }

@media (max-width:760px) {
  .music-voices { display:block; padding-bottom:86px; }
  .music-voices-image {
    width:calc(100% + 36px); margin:54px -18px 0;
    border-left:0; border-right:0;
  }
  .music-voices-image img { min-height:260px; aspect-ratio:16/9; object-fit:cover; object-position:50% 50%; }
  .poets-opening-image,
  .poets-together-image {
    width:calc(100% + 18px); margin-left:-22px; border-left:0;
  }
  .poets-opening-image { margin-top:0; margin-bottom:46px; }
  .poets-opening-image img { aspect-ratio:16/11; object-position:62% 48%; }
  .poets-together-image { margin-top:44px; }
  .poets-together-image img { aspect-ratio:16/11; object-position:50% 48%; }
  .music-poets .music-ending { margin-top:44px !important; }
}

/* Music: on desktop, image and related copy share the horizontal field.
   This keeps the page compact without turning photography into thumbnails. */
@media (min-width:901px) {
  .music-voices-image {
    width:min(920px,82%);
    margin:8px auto 0;
  }

  .music-poets { display:grid; }
  .music-poets > .music-marker { grid-column:1; }
  .poets-layout {
    grid-column:2 / 4;
    display:grid;
    grid-template-columns:minmax(0,560px) minmax(360px,1fr);
    column-gap:clamp(52px,6vw,96px);
    row-gap:72px;
    align-items:center;
  }
  .poets-copy { max-width:560px; }
  .poets-copy h2 {
    margin:0 0 40px;
    max-width:560px;
    font-size:clamp(31px,3.25vw,49px);
    line-height:1.08;
    letter-spacing:-.04em;
    font-weight:400;
  }
  .poets-copy p {
    margin:0;
    color:var(--text-secondary);
    font-size:clamp(16px,1.15vw,18px);
    line-height:1.72;
  }
  .poets-copy p + p { margin-top:22px; }
  .poets-copy strong { color:var(--text); font-weight:500; }
  .poets-opening-image,
  .poets-together-image {
    width:100%;
    margin:0;
    align-self:center;
  }
  .poets-opening-image img { aspect-ratio:4/3; object-position:62% 46%; }
  .poets-together-image img { aspect-ratio:4/3; object-position:50% 48%; }
  /* Centred transitional statement inside the photo-led Poets composition. */
  .poets-layout > .music-return {
    grid-column:1 / 3;
    width:min(700px,72%);
    margin:42px auto !important;
  }
  .poets-copy-together { grid-column:1; }
  .poets-together-image { grid-column:2; }
  .poets-copy .music-ending { margin-top:42px !important; }
}

@media (max-width:900px) {
  .poets-layout { display:block; }
  .poets-copy h2 {
    margin:0 0 32px;
    font-size:30px;
    line-height:1.08;
    letter-spacing:-.04em;
    font-weight:400;
  }
  .poets-copy p {
    margin:0;
    color:var(--text-secondary);
    font-size:16px;
    line-height:1.68;
  }
  .poets-copy p + p { margin-top:22px; }
  .poets-opening-image { margin-top:44px; }
  .poets-layout > .music-return { margin:44px 0 !important; }
  .poets-together-image { margin-top:44px; }
  .poets-copy .music-ending { margin-top:44px !important; }
}

/* Events: the page moves from infrastructure to participation.
   Photography carries the narrative: preparation → shared responsibility → lived experience. */
.events-page { background:var(--bg); }
.events-hero { padding-top:clamp(86px,10vw,148px); padding-bottom:clamp(110px,13vw,190px); }
.events-hero h1 {
  max-width:980px; margin:28px 0 72px;
  font-size:clamp(46px,6.4vw,92px); line-height:.98; letter-spacing:-.055em; font-weight:400;
}
.events-hero-grid { display:grid; grid-template-columns:minmax(0,560px) minmax(420px,1fr); gap:clamp(64px,8vw,124px); align-items:end; }
.events-copy,.events-content { max-width:720px; }
.events-copy p,.events-content p { margin:0; color:var(--text-secondary); font-size:clamp(16px,1.15vw,18px); line-height:1.72; }
.events-copy p + p,.events-content p + p { margin-top:22px; }
.events-copy strong,.events-content strong { color:var(--text); font-weight:500; }
.events-pull { margin-top:42px !important; color:var(--text) !important; }
.events-hero-image,.events-photo { margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.events-hero-image img,.events-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.events-hero-image img { aspect-ratio:4/3; object-position:44% 50%; filter:saturate(.72) brightness(.72) contrast(1.03); }
.events-flow { position:relative; }
.events-flow::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); }
.events-section { padding-top:122px; padding-bottom:132px; display:grid; grid-template-columns:var(--editorial-inset) minmax(0,1fr); }
.events-marker { grid-column:1; color:var(--text-meta); font-size:11px; letter-spacing:.16em; line-height:1.4; writing-mode:vertical-rl; transform:rotate(180deg); justify-self:start; }
.events-section > :not(.events-marker) { grid-column:2; }
.events-section h2 { margin:0 0 42px; max-width:720px; font-size:clamp(32px,4vw,58px); line-height:1.06; letter-spacing:-.045em; font-weight:400; }
.events-split { display:grid; grid-template-columns:minmax(0,600px) minmax(360px,1fr); gap:clamp(64px,8vw,118px); align-items:center; }
.events-split-reverse { grid-template-columns:minmax(360px,1fr) minmax(0,600px); }
.events-content-right { margin-left:auto; }
.events-staff { max-width:720px; }
.events-staff img { aspect-ratio:4/3; object-position:50% 48%; filter:saturate(.74) brightness(.8); }
.events-after { padding-bottom:132px; }
.events-after-grid { display:grid; grid-template-columns:minmax(0,570px) minmax(420px,1fr); gap:clamp(64px,8vw,120px); align-items:center; }
.events-karaoke { align-self:end; }
.events-karaoke img { aspect-ratio:4/3; object-position:52% 50%; filter:saturate(.98) brightness(.86) contrast(1.03); }
.events-ending { margin-top:52px !important; color:var(--text) !important; }

@media (max-width:900px) {
  .events-hero { padding-top:74px; padding-bottom:104px; }
  .events-hero h1 { margin:24px 0 54px; font-size:clamp(42px,11vw,68px); }
  .events-hero-grid,.events-split,.events-split-reverse,.events-after-grid { grid-template-columns:1fr; gap:50px; }
  .events-hero-image { width:calc(100% + 36px); margin-left:-18px; border-left:0; border-right:0; }
  .events-hero-image img { aspect-ratio:16/11; }
  .events-section { display:block; padding-top:76px; padding-bottom:86px; }
  .events-marker { display:block; writing-mode:horizontal-tb; transform:none; margin-bottom:28px; }
  .events-content-right { width:100%; margin:0; }
  .events-section h2 { margin-bottom:34px; font-size:34px; }
  .events-photo { width:calc(100% + 18px); margin-left:-18px; border-left:0; }.events-split-reverse .events-staff { order:2; }
  .events-split-reverse .events-content { order:1; }
  .events-after-grid .events-karaoke { margin-top:4px; }
  .events-ending { margin-top:42px !important; }
}

/* Events: il ritmo alterna costruzione, spazio condiviso e ritorno al silenzio. */
.events-page .events-hero h1 { max-width:980px; }
.events-page .events-community-photo img { aspect-ratio:4/3; object-position:52% 48%; filter:saturate(.76) brightness(.82) contrast(1.02); }
.events-page .events-directive-photo { max-width:680px; justify-self:end; }
.events-page .events-directive-photo img { aspect-ratio:4/3; object-position:50% 48%; filter:saturate(.78) brightness(.80) contrast(1.02); }
.events-page .events-after { border-top:1px solid var(--line); }
.events-page .events-after .events-ending { }
@media (max-width:760px) {
  .events-page .events-directive-photo { max-width:none; }
}

/* Shared editorial components */

/* Narrative photography: one default measure, with content-led exceptions. */
:root {
  --editorial-image-width:clamp(420px,40vw,560px);
  --editorial-image-ratio:4 / 3;
}

.music-stage-image,
.poets-opening-image,
.poets-together-image,
.events-hero-image,
.events-photo,
.events-page .events-directive-photo {
  width:min(var(--editorial-image-width),100%);
  max-width:var(--editorial-image-width);
  aspect-ratio:var(--editorial-image-ratio);
  overflow:hidden;
}

.music-stage-image img,
.poets-opening-image img,
.poets-together-image img,
.events-hero-image img,
.events-photo img,
.events-page .events-community-photo img,
.events-page .events-directive-photo img {
  width:100%;
  height:100%;
  aspect-ratio:var(--editorial-image-ratio);
  object-fit:cover;
}

.events-hero-image,
.events-photo { justify-self:end; }

/* Mentoring: one content axis and one reading measure. Space comes from rhythm. */
.mentoring-hero {
  padding-top:clamp(76px,9vw,132px);
  padding-bottom:clamp(112px,13vw,190px);
}
.mentoring-hero h1 {
  max-width:900px;
  margin:18px 0 0;
  font-size:clamp(3.7rem,7vw,7rem);
  line-height:.94;
  letter-spacing:-.065em;
  font-weight:500;
}
.mentoring-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,var(--reading-measure)) var(--editorial-image-width);
  justify-content:space-between;
  align-items:end;
  gap:clamp(52px,7vw,112px);
  margin-top:clamp(70px,8vw,120px);
}
.mentoring-copy,
.mentoring-content {
  width:100%;
  max-width:var(--reading-measure);
  font-size:clamp(1.04rem,1.25vw,1.18rem);
  line-height:1.72;
  color:var(--text-secondary);
}
.mentoring-copy p,
.mentoring-content p { margin:0 0 1.35em; }
.mentoring-copy p:last-child,
.mentoring-content p:last-child { margin-bottom:0; }
.mentoring-photo {
  width:var(--editorial-image-width);
  aspect-ratio:var(--editorial-image-ratio);
  margin:0;
  overflow:hidden;
  background:var(--surface);
}
.mentoring-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% 42%;
  filter:grayscale(.45) saturate(.68) brightness(.76);
}
.mentoring-flow { border-top:1px solid var(--line); }
.mentoring-section {
  display:grid;
  grid-template-columns:var(--editorial-inset) minmax(0,var(--reading-measure)) 1fr;
  padding-top:122px;
  padding-bottom:132px;
  position:relative;
}
.mentoring-section + .mentoring-section { border-top:1px solid rgba(230,228,223,.08); }
.mentoring-content,
.mentoring-content-right {
  grid-column:2;
  justify-self:start;
  width:100%;
  max-width:var(--reading-measure);
}
.mentoring-content h2 {
  margin:0 0 clamp(34px,4vw,56px);
  max-width:680px;
  color:var(--text);
  font-size:clamp(2rem,3.2vw,3.5rem);
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:500;
}
.mentoring-pull {
  margin-top:clamp(42px,5vw,68px)!important;
  color:var(--text);
}
.mentoring-space {
  padding-top:122px;
  padding-bottom:132px;
}
.mentoring-ending {
  margin-top:clamp(60px,7vw,96px)!important;
  max-width:680px;
  color:var(--text);
}
.mentoring-ending strong { font-weight:500; }

/* Shared thematic marker grammar. */
.events-marker,
.mentoring-marker {
  grid-column:1;
  writing-mode:horizontal-tb;
  transform:none;
  justify-self:start;
  align-self:start;
  padding-top:8px;
  margin:0;
  color:var(--accent);
  font-size:10px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.13em;
  text-transform:uppercase;
}

@media (min-width:901px) {
  .events-hero-grid,
  .events-split,
  .events-after-grid {
    grid-template-columns:minmax(0,1fr) var(--editorial-image-width);
  }
  .events-split-reverse {
    grid-template-columns:var(--editorial-image-width) minmax(0,1fr);
  }
  .music-hero-grid {
    grid-template-columns:minmax(0,1fr) var(--editorial-image-width);
  }
  .poets-layout {
    grid-template-columns:minmax(0,560px) var(--editorial-image-width);
  }

  /* Narrative exception: breadth communicates the plurality of the choir. */
  .music-voices-image {
    width:min(100%,920px);
    max-width:920px;
    aspect-ratio:auto;
    margin:8px auto 0;
  }
  .music-voices-image img {
    width:100%;
    height:auto;
    aspect-ratio:16 / 7.2;
    object-fit:cover;
    object-position:50% 48%;
  }
}

@media (max-width:980px) {
  .mentoring-hero-grid {
    grid-template-columns:1fr;
    gap:52px;
  }
  .mentoring-photo {
    width:var(--editorial-image-width);
    max-width:100%;
  }
  .mentoring-section {
    grid-template-columns:var(--editorial-inset) minmax(0,1fr);
  }
  .mentoring-content,
  .mentoring-content-right {
    grid-column:2;
    max-width:var(--reading-measure);
  }
}

@media (max-width:900px) {
  .music-stage-image,
  .poets-opening-image,
  .poets-together-image,
  .events-hero-image,
  .events-photo,
  .events-page .events-directive-photo {
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    min-height:0;
    aspect-ratio:var(--editorial-image-ratio);
    border-left:1px solid rgba(255,255,255,.08);
    border-right:1px solid rgba(255,255,255,.08);
  }
  .music-stage-image img,
  .poets-opening-image img,
  .poets-together-image img,
  .events-hero-image img,
  .events-photo img,
  .events-page .events-community-photo img,
  .events-page .events-directive-photo img {
    min-height:0;
    aspect-ratio:var(--editorial-image-ratio);
  }
  .music-voices-image {
    width:100%;
    max-width:none;
    aspect-ratio:auto;
  }
  .music-voices-image img {
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16 / 9;
    object-fit:cover;
    object-position:50% 50%;
  }
}

@media (max-width:640px) {
  .mentoring-hero {
    padding-top:58px;
    padding-bottom:100px;
  }
  .mentoring-hero h1 { font-size:clamp(3.2rem,17vw,5rem); }
  .mentoring-hero-grid {
    margin-top:56px;
    gap:42px;
  }
  .mentoring-photo {
    width:100%;
    aspect-ratio:var(--editorial-image-ratio);
  }
  .mentoring-section {
    display:block;
    padding-top:76px;
    padding-bottom:86px;
  }
  .events-marker,
  .mentoring-marker {
    display:block;
    margin-bottom:28px;
    padding:0;
    color:var(--accent);
  }
  .mentoring-copy,
  .mentoring-content,
  .mentoring-content-right { line-height:1.68; }
  .mentoring-content,
  .mentoring-content-right { max-width:none; }
  .mentoring-content h2 { margin-bottom:34px; }
  .mentoring-space {
    padding-top:76px;
    padding-bottom:86px;
  }
  .mentoring-ending { margin-top:54px!important; }
}

/* Language navigation */
.header-controls {
  display: flex;
  align-items: center;
  gap: 28px;
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  color: var(--muted);
  letter-spacing: .08em;
  white-space: nowrap;
}

.language-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 44px;
}

.language-option.is-current {
  color: var(--text);
  font-weight: 600;
}

.language-option.is-pending {
  opacity: .48;
  cursor: default;
}

.language-separator {
  color: var(--line);
}

@media (max-width: 760px) {
  .header-controls { gap: 14px; }
  .site-header nav { gap: 14px; }
  .language-switcher { gap: 4px; }
  .language-option { min-width: 20px; }
}

@media (max-width: 460px) {
  .site-header {
    align-items: flex-start;
    padding-block: 14px;
  }
  .header-controls {
    align-items: flex-end;
    flex-direction: column;
    gap: 0;
  }
  .site-header nav,
  .language-switcher { min-height: 32px; }
  .language-option { min-height: 32px; }
}

/* Global navigation: persistent, compact and anchored to the site identity. */
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(16,17,16,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.brand { white-space:nowrap; }

/* Contextual entity links stay editorial but remain visibly interactive. */
.entity-link {
  color:inherit;
  text-decoration-line:underline;
  text-decoration-color:rgba(63,167,150,.55);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.entity-link:hover,
.entity-link:focus-visible {
  color:var(--text);
  text-decoration-color:var(--accent);
}

/* Key statements belong to body hierarchy: contrast, not scale, carries emphasis. */
.writing-lead .writing-emphasis,
.story-content .pull,
.final-thought,
.about-page .story-content .pullquote,
.music-pull,
.music-return,
.music-ending,
.events-pull,
.events-ending,
.events-page .events-after .events-ending,
.mentoring-pull,
.mentoring-ending {
  color:var(--text) !important;
}

/* Fiction excerpts are quotations, not secondary headlines. */
.novel-fragment em { font-style:italic; }

/* Thematic text-only geometry is consolidated in “Canonical narrative geometry” below. */

/* The choir panorama is intentionally broad; on mobile it remains centred. */
@media (max-width:900px) {
  .music-voices-image {
    width:100%;
    margin:54px auto 0;
  }
}

@media (max-width:760px) {
  .site-header { min-height:64px; }
  .music-poets > .music-marker {
    position:static;
    display:block;
    margin:0 0 20px;
    padding:0;
  }
  .music-poets .poets-layout { clear:both; }
}

/* Credits */
.credits-page { padding-top:clamp(76px,9vw,124px); padding-bottom:clamp(120px,15vw,210px); }
.credits-page h1 { margin-top:20px; }
.credits-copy { max-width:760px; margin-top:64px; color:var(--text-secondary); font-size:clamp(16px,1.2vw,18px); line-height:1.72; }
.credits-copy p { margin:0; }
.credits-copy p + p { margin-top:24px; }
.credits-note { color:var(--text-meta); }

/* Canonical narrative geometry
   Autonomous text-only blocks use exactly 75% of the shell on desktop.
   Photo-led compositions and documented narrative exceptions keep dedicated geometry.
   Do not add competing desktop widths elsewhere: extend this block instead. */
@media (min-width:901px) {
  /* Shared text-only sections: exact 75% shell width. */
  .about-page .story-content,
  .music-section:not(.music-voices):not(.music-poets) .music-content,
  .music-section:not(.music-voices):not(.music-poets) .music-content-right,
  .events-section > .events-content,
  .mentoring-content,
  .mentoring-content-right {
    grid-column:1 / -1;
    width:var(--standalone-narrative-width);
    max-width:none;
  }

  /* Left anchor: reserve the marker gutter, but keep type left-aligned. */
  .about-page .story-content,
  .music-section:not(.music-voices):not(.music-poets) .music-content:not(.music-content-right),
  .mentoring-content:not(.mentoring-content-right) {
    justify-self:start;
    margin-left:var(--editorial-inset);
  }

  /* Right anchor: same width, different position only. */
  .music-section:not(.music-voices):not(.music-poets) .music-content-right,
  .events-section > .events-content-right,
  .mentoring-content-right {
    justify-self:end;
    margin-left:0;
    margin-right:0;
  }

  /* About introduction is autonomous: right anchored, left-aligned type. */
  .about-page .about-lead {
    width:var(--standalone-narrative-width);
    max-width:none;
    margin-left:auto;
    text-align:left;
  }

  /* Writing introduction follows the shared 75% field, alternating its anchor. */
  .writing-lead {
    display:block;
  }
  .writing-lead-opening,
  .writing-lead-closing {
    width:var(--standalone-narrative-width);
    max-width:none;
  }
  .writing-lead-opening {
    margin-left:auto;
  }
  .writing-lead-closing {
    margin-top:72px;
    margin-left:0;
  }

  /* A deliberate centred pause closes the opening without centring the typography. */
  .writing-lead .writing-emphasis-center {
    width:min(100%,var(--reading-measure));
    margin:72px auto 0;
    text-align:left;
  }

  /* Yggdrasill stays on the common field. The rail and excerpts provide its identity. */
  .book-intro h2,
  .book-intro .book-copy,
  .book-intro .emotion-line {
    grid-column:1 / -1;
    width:var(--standalone-narrative-width);
    max-width:none;
    margin-left:var(--editorial-inset);
  }
  .book-intro .book-copy { margin-top:18px; }
  .book-intro .emotion-line { margin-top:42px; }

  .memory-block .novel-fragment,
  .memory-block .memory-copy {
    width:var(--standalone-narrative-width);
    max-width:none;
  }
  .memory-block .novel-fragment { margin-left:0; margin-right:auto; }
  .memory-block .memory-copy { margin:108px 0 0 auto; }
  .memory-block .fragment-second { margin:112px 0 0; }
}

@media (max-width:900px) {
  .writing-lead .writing-emphasis-center {
    width:100%;
    margin-left:0;
    margin-right:0;
    text-align:left;
  }
}

/* Keep anchored and keyboard-focused sections clear of the sticky global navigation. */
:where(section, [id]) { scroll-margin-top: 6.5rem; }

/* v011 — canonical narrative metrics.
   Key statements may change contrast/weight/spacing, never body type metrics. */
.writing-lead { line-height:1.72; }
.writing-lead .writing-emphasis {
  font-size:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
}

.about-page .story-content .pull,
.about-page .story-content .pullquote,
.about-page .final-thought {
  font-size:clamp(16px,1.15vw,18px) !important;
  line-height:1.72 !important;
  letter-spacing:normal !important;
}

.music-content .music-pull,
.music-content .music-return,
.music-content .music-ending,
.poets-layout > .music-return,
.poets-copy .music-ending {
  font-size:clamp(16px,1.15vw,18px) !important;
  line-height:1.72 !important;
  letter-spacing:normal !important;
}

.events-copy .events-pull,
.events-content .events-pull,
.events-copy .events-ending,
.events-content .events-ending,
.events-page .events-after .events-ending {
  font-size:clamp(16px,1.15vw,18px) !important;
  line-height:1.72 !important;
  letter-spacing:normal !important;
}

.mentoring-copy .mentoring-pull,
.mentoring-content .mentoring-pull,
.mentoring-copy .mentoring-ending,
.mentoring-content .mentoring-ending {
  font-size:clamp(1.04rem,1.25vw,1.18rem) !important;
  line-height:1.72 !important;
  letter-spacing:normal !important;
}

/* Inline emphasis must never alter text metrics. */
.story-content strong,
.writing-lead strong,
.book-copy strong,
.horos-p strong,
.music-content strong,
.events-copy strong,
.events-content strong,
.mentoring-copy strong,
.mentoring-content strong {
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}

@media (max-width:760px) {
  .writing-lead { line-height:1.68; }
  .about-page .story-content .pull,
  .about-page .story-content .pullquote,
  .about-page .final-thought {
    font-size:16px !important;
    line-height:1.68 !important;
  }
  .music-content .music-pull,
  .music-content .music-return,
  .music-content .music-ending,
  .poets-layout > .music-return,
  .poets-copy .music-ending,
  .events-copy .events-pull,
  .events-content .events-pull,
  .events-copy .events-ending,
  .events-content .events-ending,
  .events-page .events-after .events-ending,
  .mentoring-copy .mentoring-pull,
  .mentoring-content .mentoring-pull,
  .mentoring-copy .mentoring-ending,
  .mentoring-content .mentoring-ending {
    line-height:1.68 !important;
  }
}

/* ==========================================================
   ABOUT NARRATIVE GRAMMAR PROTOTYPE v003
   Experimental only. Baseline v011 is intentionally untouched.

   Geometry and rhythm:
   - one narrative width
   - two explicit desktop axes
   - one fixed narrative spacing inside the same section
   - one larger section spacing reserved for real structural transitions
   ========================================================== */
.about-prototype {
  --narrative-gap: 64px;
  --section-gap: 96px;
}

.about-prototype .story {
  border-top: 1px solid var(--line);
}

/* Space expresses structure, not importance. Every narrative block in this
   About sequence uses exactly the same vertical gap. */
.about-prototype .story-block {
  border-bottom: 0;
  padding-top: var(--narrative-gap);
  padding-bottom: 0;
}

.about-prototype .story-last {
  padding-bottom: 118px;
}

/* Optional annotations: lowercase, quiet, and deliberately non-taxonomic. */
.about-prototype .story-no {
  color: rgba(183,181,177,.72);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
  padding-top: 4px;
}

/* One grammar for every named narrative turn: intimate, close to prose. */
.about-prototype .story-content .narrative-heading {
  max-width: 680px;
  margin: 0 0 28px;
  color: #c7c5c1;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.012em;
}

/* Desktop movement is binary and explicit: same 75% width, left or right axis. */
@media (min-width: 901px) {
  .about-prototype .story-block.axis-left .story-content {
    justify-self: start;
    margin-left: var(--editorial-inset);
    margin-right: 0;
  }

  .about-prototype .story-block.axis-right .story-content {
    justify-self: end;
    margin-left: 0;
    margin-right: 0;
  }

  .about-prototype .story-block.axis-right .story-no {
    grid-column: 1 / -1;
    width: var(--standalone-narrative-width);
    justify-self: end;
    margin: 0 0 12px;
  }

  .about-prototype .story-block.axis-left .story-no {
    grid-column: 1 / -1;
    width: var(--standalone-narrative-width);
    justify-self: start;
    margin: 0 0 12px var(--editorial-inset);
  }
}

@media (max-width: 900px) {
  .about-prototype {
    --narrative-gap: 48px;
    --section-gap: 72px;
  }

  /* Axes collapse naturally on mobile; rhythm stays structurally identical. */
  .about-prototype .story-no {
    margin-bottom: 12px;
  }

  .about-prototype .story-content .narrative-heading {
    margin-bottom: 24px;
    font-size: 19px;
    line-height: 1.45;
  }

  .about-prototype .story-last {
    padding-bottom: 84px;
  }
}


/* ==========================================================
   NARRATIVE GRAMMAR v012
   Space expresses structure, not importance.
   One narrative width, two axes, one intra-section rhythm.
   ========================================================== */
:root {
  --narrative-gap: 64px;
  --section-gap: 96px;
}

.narrative-heading,
.about-prototype .story-content .narrative-heading,
.narrative-grammar .events-section h2.narrative-heading {
  max-width: 680px;
  margin: 0 0 28px;
  color: #c7c5c1;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.012em;
  text-transform: none;
}

.narrative-marker,
.about-prototype .story-no {
  display: block;
  color: rgba(183,181,177,.72);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
  margin-bottom: 12px;
}

/* About: approved prototype geometry. */
.about-prototype .story-block {
  border-bottom: 0;
  padding-top: var(--narrative-gap);
  padding-bottom: 0;
}
.about-prototype .story-last { padding-bottom: 118px; }

@media (min-width: 901px) {
  .about-prototype .story-block.axis-left .story-content {
    justify-self: start;
    margin-left: var(--editorial-inset);
    margin-right: 0;
  }
  .about-prototype .story-block.axis-right .story-content {
    justify-self: end;
    margin-left: 0;
    margin-right: 0;
  }
  .about-prototype .story-block.axis-right .story-no {
    grid-column: 1 / -1;
    width: var(--standalone-narrative-width);
    justify-self: end;
    margin-left: 0;
  }
  .about-prototype .story-block.axis-left .story-no {
    grid-column: 1 / -1;
    width: var(--standalone-narrative-width);
    justify-self: start;
    margin-left: var(--editorial-inset);
  }
}

/* Internal narrative sections share a stable vertical beat.
   Photo-led compositions keep their own grid, but not arbitrary extra gaps. */
.narrative-grammar .music-section,
.narrative-grammar .mentoring-section,
.narrative-grammar .events-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: var(--narrative-gap) !important;
  padding-bottom: var(--narrative-gap) !important;
}

/* Ordinary prose stays ordinary: no body-sized sentence is promoted just
   because it used to be a pull quote or a page-ending thesis. */
.narrative-grammar .music-content p,
.narrative-grammar .poets-copy p,
.narrative-grammar .mentoring-content p,
.narrative-grammar .events-content p {
  letter-spacing: normal;
}

/* Memory subsection: a quiet editorial title, not metadata. */
.memory-narrative-title {
  display: block;
  color: #c7c5c1;
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: .13em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  :root {
    --narrative-gap: 48px;
    --section-gap: 72px;
  }

  .narrative-heading,
  .about-prototype .story-content .narrative-heading,
  .narrative-grammar .events-section h2.narrative-heading {
    font-size: 19px;
    line-height: 1.45;
    margin-bottom: 24px;
  }

  .about-prototype .story-last { padding-bottom: 84px; }
}


/* ==========================================================
   HOMEPAGE REFINEMENT v013
   Supporting copy below the four world cards is deliberately
   quieter than the hero and card titles.
   ========================================================== */
.home-page .about-text,
body:not(.about-page) > main .about-text {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.58;
  font-weight: 400;
  color: var(--text-secondary);
}

.home-page .contact h2,
body:not(.about-page) > main .contact h2 {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.58;
  font-weight: 400;
  color: var(--text-secondary);
}


/* ==========================================================
   TYPOGRAPHIC HIERARCHY v017
   All section-page hero titles share one scale.
   All internal block titles share the established quiet
   narrative typography used by "Alla fine arriva il silenzio".
   ========================================================== */

.writing-hero h1,
.about-hero h1,
.music-hero h1,
.mentoring-hero h1,
.events-hero h1 {
  max-width: 980px;
  margin-top: 22px;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 400;
}

.book-intro h2,
.horos-head h2,
.about-prototype .story-content h2.narrative-heading,
.narrative-grammar .music-section h2.narrative-heading,
.narrative-grammar .mentoring-section h2.narrative-heading,
.narrative-grammar .events-section h2.narrative-heading {
  max-width: 680px;
  margin: 0 0 28px;
  color: #c7c5c1;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.012em;
  text-transform: none;
}

@media (max-width: 900px) {
  .writing-hero h1,
  .about-hero h1,
  .music-hero h1,
  .mentoring-hero h1,
  .events-hero h1 {
    margin-top: 18px;
    font-size: clamp(32px, 8vw, 42px);
    line-height: 1.1;
    letter-spacing: -.03em;
  }

  .book-intro h2,
  .horos-head h2,
  .about-prototype .story-content h2.narrative-heading,
  .narrative-grammar .music-section h2.narrative-heading,
  .narrative-grammar .mentoring-section h2.narrative-heading,
  .narrative-grammar .events-section h2.narrative-heading {
    font-size: 19px;
    line-height: 1.45;
    margin-bottom: 24px;
  }
}


/* v018 — Semantic green: identity and selected narrative passages only.
   Interactive text remains neutral and is signaled by an underline.
   Existing geometry, spacing and separators are unchanged. */
.brand .brand-space,
.narrative-accent { color:var(--accent); }
.brand:hover .brand-space,
.brand:focus-visible .brand-space { color:var(--accent); }

/* Contextual text links: underline always, neutral on hover and focus. */
.entity-link,
.entity-link:hover,
.entity-link:focus-visible {
  color:inherit;
  text-decoration-line:underline;
  text-decoration-color:currentColor;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}
.entity-link:hover { text-decoration-thickness:2px; }

/* Other textual navigation: neutral, visibly underlined. */
nav a, .socials a, .text-link {
  color:inherit;
  text-decoration-line:underline;
  text-decoration-color:currentColor;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}
nav a:hover, .socials a:hover, .text-link:hover,
nav a:focus-visible, .socials a:focus-visible, .text-link:focus-visible {
  color:inherit;
  text-decoration-thickness:2px;
}
nav a::after, .text-link::after, .socials a::after { display:none; }

/* Identity link keeps its established wordmark presentation. */
.brand, .brand:hover, .brand:focus-visible {
  color:var(--text);
  text-decoration:none;
}
a:focus-visible {
  outline:2px solid var(--text);
  outline-offset:5px;
}

/* Non-narrative structural accents stay neutral. */
.index, .eyebrow, .section-label, .story-no,
.writing-marker, .music-marker, .mentoring-marker, .events-marker {
  color:var(--muted);
}
.world-card:hover .arrow,
.world-card:focus-visible .arrow,
.world-card .arrow { color:var(--muted); }
nav a:hover, .socials a:hover, .text-link:hover { color:inherit; }

/* v019: book-title labels are identity, not generic structural markers. */
.book-intro > .writing-marker,
.horos-head > .writing-marker { color:var(--accent); }

/* v020: full-viewport header rule, with content aligned to the original shell. */
.site-header {
  width:100%;
  max-width:none;
  padding-inline:max(48px, calc((100% - var(--shell))/2));
}
@media (min-width:761px) and (max-width:1050px) {
  .site-header { width:100%; padding-inline:28px; }
}
@media (max-width:760px) {
  .site-header { width:100%; padding-inline:18px; }
}
/* v020: the later desktop grid declaration was overriding the earlier
   mobile display:block, collapsing the Poets section into the narrow grid rail. */
@media (max-width:900px) {
  .music-poets { display:block; }
  .music-poets .poets-layout { display:block; width:100%; min-width:0; }
  .music-poets .poets-copy { width:100%; max-width:none; }
  .music-poets .poets-opening-image,
  .music-poets .poets-together-image { max-width:none; }
}

/* v021: homepage introduction between hero and thematic cards. */
.home-page .about { padding-top: 96px; padding-bottom: 0; }
.home-page .home-about-heading {
  max-width: 680px;
  margin: 0 0 28px;
  color: #c7c5c1;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.012em;
  text-transform: none;
}
@media (max-width: 900px) {
  .home-page .about { padding-top: 72px; }
  .home-page .home-about-heading { font-size: 19px; line-height: 1.45; margin-bottom: 24px; }
}

/* v022: homepage introduction uses the existing 75% right narrative axis.
   The grid moves both copy and CTA together; mobile retains the original flow. */
@media (min-width:901px) {
  .home-page .about {
    display:grid;
    grid-template-columns:calc(100% - var(--standalone-narrative-width)) var(--standalone-narrative-width);
    --standalone-narrative-width:75%;
  }
  .home-page .about-copy,
  .home-page .about > .text-link {
    grid-column:2;
    justify-self:start;
  }
  .home-page .about-copy {
    width:100%;
    max-width:none;
  }
}

/* v023: restrained editorial progress notes for both novels.
   Reuse the existing muted metadata token, and the writing narrative inset. */
.novel-publication-status {
  color:var(--text-meta);
  font-size:14px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:0;
}
.book-ygg > .novel-publication-status {
  margin:64px 0 0 var(--writing-inset);
}
.horos-status.novel-publication-status {
  margin:94px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--text-meta);
}
@media (max-width:760px) {
  .book-ygg > .novel-publication-status { margin:48px 0 0 22px; }
  .horos-status.novel-publication-status { margin-top:72px; }
}