/* Vivipedia 28.2 — voce editoriale pilota */

:root {
  --v282-paper: #fff8ed;
  --v282-paper-deep: #f4ead9;
  --v282-ink: #17251f;
  --v282-muted: #5e6b64;
  --v282-sage: #45614f;
  --v282-clay: #b96f4a;
  --v282-gold: #d5a23e;
  --v282-line: rgba(23, 37, 31, .14);
  --v282-shadow: 0 18px 55px rgba(42, 49, 43, .10);
}

.v282-page {
  color: var(--v282-ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(213,162,62,.12), transparent 26rem),
    linear-gradient(180deg, var(--v282-paper), #fffdf8 38rem);
}

.v282-page main {
  overflow: clip;
}

.v282-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: end;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 7vw, 5rem);
}

.v282-hero::before {
  content: "";
  position: absolute;
  width: 17rem;
  height: 17rem;
  right: -7rem;
  top: 1rem;
  border: 1px solid rgba(69,97,79,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 2.8rem rgba(69,97,79,.035), 0 0 0 6rem rgba(185,111,74,.025);
  pointer-events: none;
}

.v282-overline {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--v282-sage);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.v282-overline::before {
  content: "";
  width: 2.3rem;
  height: 2px;
  background: var(--v282-clay);
}

.v282-hero h1 {
  max-width: 16ch;
  margin: 1rem 0;
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.v282-hero .lead {
  max-width: 62ch;
  margin: 0;
  color: #34463d;
  font-size: clamp(1.08rem, 2.1vw, 1.35rem);
  line-height: 1.62;
}

.v282-hero-note {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--v282-line);
  border-radius: 1.35rem;
  background: rgba(255,255,255,.72);
  box-shadow: var(--v282-shadow);
  transform: rotate(1deg);
}

.v282-hero-note strong,
.v282-hero-note span {
  display: block;
}

.v282-hero-note strong {
  margin-bottom: .55rem;
  font-size: 1.18rem;
}

.v282-hero-note span {
  color: var(--v282-muted);
  line-height: 1.55;
}

.v282-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.5rem;
}

.v282-route-line {
  max-width: 1180px;
  margin: 0 auto 2rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.v282-route-line ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--v282-line);
}

.v282-route-line li {
  position: relative;
  padding: 1rem .75rem .4rem 0;
  color: var(--v282-muted);
  font-size: .9rem;
}

.v282-route-line li::before {
  content: "";
  position: absolute;
  top: -.3rem;
  left: 0;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--v282-clay);
}

.v282-reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 46rem) minmax(14rem, 18rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem) 5rem;
}

.v282-copy {
  font-size: 1.08rem;
  line-height: 1.8;
}

.v282-copy > p:first-of-type::first-letter {
  float: left;
  margin: .07em .12em 0 0;
  color: var(--v282-clay);
  font-size: 4.4rem;
  font-weight: 800;
  line-height: .8;
}

.v282-copy h2 {
  margin: 3.4rem 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.v282-copy h3 {
  margin: 2.2rem 0 .7rem;
  font-size: 1.3rem;
}

.v282-copy a {
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}

.v282-copy blockquote {
  margin: 2.5rem 0;
  padding: 1.35rem 1.5rem;
  border: 0;
  border-left: .35rem solid var(--v282-clay);
  background: rgba(185,111,74,.075);
  font-size: 1.22rem;
  line-height: 1.55;
}

.v282-scene,
.v282-fast,
.v282-notebook,
.v282-limit,
.v282-sources,
.v282-turn {
  margin: 2.5rem 0;
  padding: clamp(1.25rem, 4vw, 2rem);
  border-radius: 1.25rem;
}

.v282-scene {
  border: 1px solid rgba(185,111,74,.2);
  background: linear-gradient(135deg, rgba(185,111,74,.10), rgba(213,162,62,.07));
}

.v282-fast {
  border: 1px solid rgba(69,97,79,.22);
  background: rgba(69,97,79,.07);
}

.v282-fast ol,
.v282-notebook ol,
.v282-notebook ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.v282-turn {
  color: #fffaf0;
  background: var(--v282-ink);
  box-shadow: var(--v282-shadow);
}

.v282-turn strong {
  color: #f5c76a;
}

.v282-notebook {
  position: relative;
  border: 1px solid rgba(213,162,62,.32);
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 2.1rem, rgba(69,97,79,.09) 2.15rem),
    #fffdf7;
  box-shadow: var(--v282-shadow);
}

.v282-notebook::before {
  content: "Quaderno";
  display: inline-block;
  margin-bottom: .7rem;
  color: var(--v282-clay);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.v282-limit {
  border: 1px solid rgba(23,37,31,.16);
  background: var(--v282-paper-deep);
}

.v282-sources {
  font-size: .92rem;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--v282-line);
}

.v282-sources li + li {
  margin-top: .6rem;
}

.v282-aside {
  position: sticky;
  top: 6rem;
}

.v282-aside nav,
.v282-aside .v282-aside-card {
  padding: 1.2rem;
  border: 1px solid var(--v282-line);
  border-radius: 1rem;
  background: rgba(255,255,255,.72);
}

.v282-aside nav strong {
  display: block;
  margin-bottom: .7rem;
}

.v282-aside nav a {
  display: block;
  padding: .45rem 0;
  color: var(--v282-muted);
  text-decoration: none;
}

.v282-aside nav a:hover {
  color: var(--v282-clay);
}

.v282-aside-card {
  margin-top: 1rem;
}

.v282-aside-card p {
  color: var(--v282-muted);
  font-size: .92rem;
  line-height: 1.55;
}

.v282-path {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2rem) 5rem;
}

.v282-path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.v282-path-card {
  display: flex;
  flex-direction: column;
  min-height: 20rem;
  padding: 1.5rem;
  border: 1px solid var(--v282-line);
  border-radius: 1.2rem;
  color: inherit;
  background: rgba(255,255,255,.74);
  text-decoration: none;
  box-shadow: 0 12px 35px rgba(42,49,43,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.v282-path-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--v282-shadow);
}

.v282-path-card small {
  color: var(--v282-clay);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.v282-path-card h2,
.v282-path-card h3 {
  margin: .8rem 0;
  font-size: 1.65rem;
  line-height: 1.12;
}

.v282-path-card p {
  color: var(--v282-muted);
  line-height: 1.6;
}

.v282-path-card span {
  margin-top: auto;
  color: var(--v282-sage);
  font-weight: 800;
}

.v282-manifesto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.v282-principle {
  padding: 1.35rem;
  border: 1px solid var(--v282-line);
  border-radius: 1rem;
  background: rgba(255,255,255,.7);
}

.v282-principle b {
  display: block;
  margin-bottom: .5rem;
  color: var(--v282-clay);
}

@media (max-width: 820px) {
  .v282-hero,
  .v282-reading-layout {
    grid-template-columns: 1fr;
  }

  .v282-hero-note {
    transform: none;
  }

  .v282-aside {
    position: static;
    order: -1;
  }

  .v282-path-grid,
  .v282-manifesto-grid {
    grid-template-columns: 1fr;
  }

  .v282-route-line ol {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v282-path-card {
    transition: none;
  }
}