/* ==========================================================================
   Chianti Vivo — entry pages
   The cartographic system: the same palette, marks and line weights as
   assets/territory.svg, so a page and a map look like one object.
   ========================================================================== */

:root{
  --cv-land:    #F0EDE8;   /* the ground on every map — now the page too */
  --cv-wood:    #E4EAE7;   /* hatched ground, quiet panels */
  --cv-maio:    #17494F;   /* every line, every mark, every label */
  --cv-ink:     #132A2E;   /* display type */
  --cv-verm:    #E0331E;   /* the live signal, and villages */
  --cv-coral:   #E8B4A8;   /* the Chiantigiana. One warm accent, used once */
  --cv-graf:    #6B6E6A;
  --cv-rule:    rgba(23,73,79,.18);
  --cv-rule-2:  rgba(23,73,79,.09);
}

body{ background: var(--cv-land); }

main.entry{
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,2rem) clamp(3rem,6vw,5rem);
}

/* ---- type ---------------------------------------------------------------- */
.crumbs{
  font-family: var(--cv-mono);
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cv-graf); margin-bottom: 1.6rem;
}
.crumbs a{ color: var(--cv-graf); text-decoration: none; }
.crumbs a:hover{ color: var(--cv-maio); }

main.entry h1{
  font-family: var(--cv-display);
  font-variation-settings: "opsz" 96, "wdth" 86;
  font-weight: 700; letter-spacing: -.028em;
  font-size: clamp(2.1rem, 6vw, 3.5rem); line-height: .96;
  margin: .3rem 0 1rem; color: var(--cv-ink);
}
main.entry h2{
  font-family: var(--cv-display);
  font-variation-settings: "opsz" 96, "wdth" 86;
  font-weight: 700; letter-spacing: -.024em;
  font-size: 1.5rem; line-height: 1.05; margin: 2.8rem 0 1rem;
  color: var(--cv-ink);
}
main.entry .lede{
  font-size: 1.12rem; line-height: 1.55; color: var(--cv-maio);
  margin-bottom: 1.8rem; max-width: 60ch;
}

/* ---- the mark sits with the eyebrow, at map weight ------------------------ */
.entry-head{ display: flex; align-items: center; gap: .7rem; margin-bottom: .1rem; }
.entry-head .mark{ width: 30px; height: 30px; color: var(--cv-maio); flex: none; }
.entry-head .k{ margin: 0; }

/* ---- the verdict is the product ------------------------------------------ */
.verdict-block{
  border-left: 3px solid var(--cv-verm);
  background: var(--cv-wood);
  padding: 1.3rem 1.4rem; margin: 2rem 0;
}
.verdict-block .k{ color: var(--cv-verm); margin-bottom: .6rem; }
.verdict-take{ font-size: 1.06rem; line-height: 1.6; color: var(--cv-ink); }
.srcs{
  margin-top: .9rem; font-family: var(--cv-mono); font-size: .55rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cv-graf);
}
.srcs a{ color: var(--cv-graf); } .srcs a:hover{ color: var(--cv-maio); }

/* ---- facts: hairlines at map weight -------------------------------------- */
dl.facts{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 1px; background: var(--cv-rule-2);
  border: 1px solid var(--cv-rule-2); margin: 1.8rem 0;
}
dl.facts > div{ background: var(--cv-land); padding: .85rem .95rem; }
dl.facts dt{
  font-family: var(--cv-mono); font-size: .52rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cv-graf); margin-bottom: .3rem;
}
dl.facts dd{ font-size: .95rem; color: var(--cv-ink); }
dl.facts dd a{ color: var(--cv-maio); text-decoration: none; }

.hours-note{
  font-size: .9rem; color: var(--cv-maio);
  border-left: 2px solid var(--cv-coral); padding-left: .9rem; margin: 1.2rem 0;
}

ul.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:1.4rem 0; padding:0; }
ul.tags li{
  font-family: var(--cv-mono); font-size: .54rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cv-graf);
  border: 1px solid var(--cv-rule); padding: .3rem .55rem;
}

/* ---- images and maps ------------------------------------------------------ */
.hero-shot{ margin: 0 0 1.8rem; }
.hero-shot img{
  width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover;
  filter: saturate(.92) contrast(1.04); background: var(--cv-wood);
}
.hero-shot figcaption{
  font-family: var(--cv-mono); font-size:.52rem; letter-spacing:.14em;
  text-transform: uppercase; color: var(--cv-graf); margin-top:.45rem;
}
.hero-shot figcaption a{ color: var(--cv-graf); text-decoration: underline; }
.hero-contour img{
  aspect-ratio:3/2; object-fit:contain; filter:none;
  border:1px solid var(--cv-rule); background: var(--cv-land);
}

/* the territory map, used whole on index and village pages */
.territory{ margin: 0 0 2rem; border: 1px solid var(--cv-rule); background: var(--cv-land); }
.territory img{ width:100%; height:auto; display:block; }
.territory figcaption{
  font-family: var(--cv-mono); font-size:.52rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--cv-graf);
  padding:.5rem .7rem; border-top:1px solid var(--cv-rule-2);
}

/* ---- outbound ------------------------------------------------------------- */
.outlinks{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.8rem 0; }
.btn-out{
  font-size:.85rem; font-weight:600; padding:.6rem 1rem;
  border:1px solid var(--cv-maio); color: var(--cv-maio); text-decoration:none;
  transition: background .2s, color .2s;
}
.btn-out:hover{ background: var(--cv-maio); color: var(--cv-land); }

/* ---- itineraries ---------------------------------------------------------- */
ol.stops{ list-style:none; padding:0; margin:2rem 0; }
ol.stops li{ display:flex; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--cv-rule-2); }
ol.stops li:first-child{ border-top:none; }
ol.stops .when{
  flex:0 0 3.6rem; font-family: var(--cv-mono); font-size:.72rem;
  color: var(--cv-verm); padding-top:.15rem;
}
ol.stops strong{ font-size:1.05rem; display:block; }
ol.stops strong a{ color: var(--cv-ink); text-decoration:none; border-bottom:1px solid var(--cv-rule); }
ol.stops strong a:hover{ border-color: var(--cv-maio); color: var(--cv-maio); }
ol.stops .town{
  font-family: var(--cv-mono); font-size:.52rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--cv-graf); display:block; margin-top:.15rem;
}
ol.stops p{ font-size:.92rem; color: var(--cv-maio); line-height:1.55; margin-top:.45rem; }

.prose p{ font-size:1.02rem; line-height:1.7; margin-bottom:1.1rem; color: var(--cv-ink); }

/* ---- lists ---------------------------------------------------------------- */
ul.nearby{ list-style:none; padding:0; margin:1rem 0; }
ul.nearby li{
  padding:.6rem 0; border-top:1px solid var(--cv-rule-2);
  display:flex; align-items:center; gap:.7rem;
}
ul.nearby li:first-child{ border-top:none; }
ul.nearby .mark{ width:20px; height:20px; color: var(--cv-maio); flex:none; }
ul.nearby a{ color: var(--cv-ink); text-decoration:none; border-bottom:1px solid var(--cv-rule); }
ul.nearby a:hover{ color: var(--cv-maio); border-color: var(--cv-maio); }
ul.nearby .k{ margin-left:auto; }

ul.index-list{ list-style:none; padding:0; margin:2rem 0; }
ul.index-list li{ border-top:1px solid var(--cv-rule-2); }
ul.index-list li:first-child{ border-top:none; }
ul.index-list a{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1.1rem 0; text-decoration:none; color:inherit;
}
ul.index-list .mark{ width:26px; height:26px; color: var(--cv-maio); flex:none; margin-top:.1rem; }
ul.index-list a:hover strong{ color: var(--cv-maio); }
ul.index-list strong{ font-size:1.12rem; display:block; color: var(--cv-ink); }
ul.index-list .k{ margin-top:.2rem; }
ul.index-list p{ font-size:.92rem; color: var(--cv-maio); line-height:1.5; margin-top:.35rem; }

/* ---- the one call to action ----------------------------------------------- */
.cta-band{
  margin-top:3rem; padding:1.6rem 1.5rem; background: var(--cv-wood);
  border-left:3px solid var(--cv-coral);
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between;
}
.cta-band p{ font-size:.98rem; color: var(--cv-maio); max-width:42ch; margin:0; }
.btn-plan{
  background: var(--cv-maio); color: var(--cv-land);
  font-size:.92rem; font-weight:600; padding:.75rem 1.3rem;
  text-decoration:none; white-space:nowrap; transition: background .2s;
}
.btn-plan:hover{ background: var(--cv-ink); }

@media (max-width:560px){
  .cta-band{ flex-direction:column; align-items:flex-start; }
  ol.stops li{ flex-direction:column; gap:.3rem; }
  ol.stops .when{ flex:none; }
}