/* The Italian tricolore, interpreted in the site's editorial palette. */
:root {
  --paper: #faf8f1;
  --ink: #183d30;
  --muted: #607168;
  --green: #156347;
  --green-dark: #0d4934;
  --red: #ba363c;
  --red-dark: #982b31;
  --orange: var(--red);
  --orange-dark: var(--red-dark);
  --sand: #e9eadc;
  --line: #d7dfd2;
}

::selection { background: #d4e5d5; color: var(--green-dark); }
.country-return { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; font-size: 10px; color: var(--green); }
.country-return a { padding: 7px 0; border-bottom: 1px solid transparent; }
.country-return a:hover { border-color: var(--green); }
.country-return > span { font-size: 7px; letter-spacing: .15em; color: #6a7e6c; }
a:focus-visible, button:focus-visible, video:focus-visible { outline-color: var(--green); }
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0 33.333%, #fffefa 33.333% 66.666%, var(--red) 66.666%);
}
.site-header .project-wordmark {
  display: block;
  border-color: #c1cfbe;
  padding-left: 18px;
  font-family: var(--serif);
  font-size: 26px;
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--green);
}
.project-wordmark em { color: var(--red); font-size: 25px; }
.main-nav { background: #edf1e7; border-color: #d9e0d2; }
.main-nav a:hover { background: #dfe8d9; }
.main-nav a[aria-current=page] {
  background: var(--green);
  color: #fffdf7;
  box-shadow: 0 3px 10px #15634720;
}
.edition { color: var(--green); }
.italian-flag {
  background: linear-gradient(90deg, var(--green) 0 33.333%, #fffefa 33.333% 66.666%, var(--red) 66.666%);
  border-color: #183d3014;
}
.hero h1 { color: var(--green-dark); }
.hero h1 em { color: var(--red); }
.hero .eyebrow { color: var(--green); }
.tiny-line { background: var(--green); }
.hero-description { color: #586c5f; }
.button.primary {
  background: var(--green);
  color: #fffdf7;
  box-shadow: 0 7px 22px #1563471c;
}
.button.primary:hover {
  background: var(--green-dark);
  box-shadow: 0 10px 25px #1563472c;
}
.play-circle { border-color: #b7ccba; color: var(--green); }
.play-link:hover .play-circle { background: var(--green); color: #fffdf7; }
.hero-meta strong { color: var(--green-dark); }
.meta-number { color: var(--green); }
.sun-stamp, .title-dot { color: var(--red); }
.orbit { border-color: #cad8c7; }
.little-postcard { border-bottom: 3px solid var(--green); }
.tape {
  background: linear-gradient(90deg, #15634772 0 33.333%, #fffdf4b0 33.333% 66.666%, #ba363c75 66.666%);
}
.handwritten {
  color: var(--red-dark);
  background: #fffdf4;
  border: 1px solid #e4ddcf;
  border-radius: 5px;
  padding: 13px 18px 8px;
  box-shadow: 0 5px 20px #103b2a1a;
  right: -4px;
  bottom: -10px;
  line-height: .9;
}
.handwritten svg {
  stroke: var(--red-dark);
  width: 55px;
  height: 28px;
  margin-left: 0;
  margin-top: 4px;
}
.marquee {
  color: #fffdf4;
  background: var(--green);
  border-top: 4px solid #fffdf4;
  border-bottom: 4px solid var(--red);
}
.marquee > div { color: #e69a92; }
.marquee span { color: #fffdf4; }
.eyebrow, .chapter-date { color: var(--green); }
.chapter-number { color: var(--green); }
.chapter-link > span { border-color: #c2d2bd; color: var(--green); }
.chapter-card:hover .chapter-link > span { background: var(--green); color: white; }
.chapter-art { background: var(--green); }
.chapter-art::before {
  border-color: #dfe6ce99;
  box-shadow: 0 0 0 22px #256e51, 0 0 0 23px #e1e5cb66, 0 0 0 46px #256e51, 0 0 0 47px #e1e5cb66;
}
.chapter-art::after { background: #e4e7d391; }
.chapter-art .art-sun { color: #efaaa0; }
.chapter-art .art-type { color: #fffdf0; }
.project-teaser { background: var(--green-dark); }
.project-teaser h2 em { color: #f0b7ac; }
.project-teaser .eyebrow { color: #c9dbbf; }
.project-teaser p:not(.eyebrow) { color: #e0e8d7; }
.teaser-sun { color: #f5c8b8; opacity: .12; }
.project-teaser .text-link:hover { color: #f4b5aa; }
.photo-card .photo-frame { background: #e9ecdf; }
.photo-caption small { color: var(--green); }
.filter-tabs button[aria-pressed=true] { background: var(--green); border-color: var(--green); }
.empty-album { background: #edf0e4; border-color: #cddac6; }
.journal-note { border-color: #cbd9c4; }
.journal-note > span:first-child { color: var(--green); }
.site-footer { background: #eff2e7; }
.footer-signature { color: var(--green); }
.footer-top .brand-label { border-color: #c1cfbe; color: var(--green); }
.funding-strip { background: #fff; }
.about-photo { border-bottom: 4px solid var(--green); }
.project-timeline > div > span { color: var(--green); }
.funding-copy { background: #eaf0e1; }
.reel-card::after { background: linear-gradient(#0d493402 30%, #0b2e23e8); }
.photo-dialog { background: #103528; }
.reel-dialog { background: #0b271e; }
.reel-progress i { background: #e6a69b; }

@media (max-width: 1150px) {
  .site-header { gap: 18px; }
  .site-header .brand { gap: 13px; }
  .site-header .project-wordmark { font-size: 23px; padding-left: 13px; }
  .project-wordmark em { font-size: 23px; }
  .main-nav a { padding-inline: 15px; }
}
@media (min-width: 801px) and (max-width: 960px) {
  .site-header .brand img { width: 75px; }
  .site-header .project-wordmark { font-size: 21px; }
  .project-wordmark em { font-size: 21px; }
  .main-nav a { padding-inline: 12px; font-size: 11px; }
  .edition { font-size: 12px; gap: 7px; }
  .edition small { font-size: 6px; }
}
@media (max-width: 800px) {
  .main-nav { background: #fafbf3f5; }
  .main-nav a { padding-inline: 18px; }
  .site-header .project-wordmark { font-size: 24px; line-height: .9; }
  .project-wordmark em { font-size: 24px; }
}
@media (max-width: 560px) {
  .site-header { gap: 13px; }
  .site-header .brand { gap: 11px; }
  .site-header .brand img { width: 68px; height: 28px; }
  .site-header .project-wordmark { font-size: 21px; padding-left: 11px; }
  .project-wordmark em { font-size: 21px; }
  .edition { font-size: 12px; gap: 7px; }
  .edition small { font-size: 6px; letter-spacing: .08em; }
  .edition .italian-flag { width: 21px; height: 15px; }
  .reel-stage .media-arrow { background: #0b271eb3; }
  .lightbox-stage .media-arrow { background: #103528c9; }
}
@media (max-width: 370px) {
  .orbit { width: 250px; height: 250px; left: 5%; top: 0; }
  .site-header .brand img { width: 60px; }
  .site-header .project-wordmark, .project-wordmark em { font-size: 20px; }
  .edition > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .edition .italian-flag { width: 25px; height: 18px; }
}