/* A small village newspaper: readable ink, folded paper, one quiet bell. */
.village-news {
  --news-paper: #f4ecd9;
  --news-ink: #293f33;
  --news-muted: #626653;
  --news-accent: #934f36;
  --news-rule: #a9a78b;
  --news-grain: .25;
  margin: 64px 4.4vw 48px;
  color: var(--news-ink);
  scroll-margin-top: 30px;
  position: relative;
  filter: drop-shadow(0 8px 10px #23352a0d);
}
.village-news-paper {
  position: relative;
  isolation: isolate;
  padding: 22px clamp(24px, 3.2vw, 54px) 16px;
  background: var(--news-paper);
  border-top: 1px solid color-mix(in srgb, var(--news-rule) 50%, transparent);
  transition: background-color 1.6s ease, color 1.6s ease;
}
.village-news-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/assets/village-paper.webp') center / 627px;
  opacity: var(--news-grain);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.village-news-paper::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0; height: 6px;
  background: var(--news-paper);
  clip-path: polygon(0 0,100% 0,100% 55%,98% 80%,94% 45%,91% 90%,87% 60%,84% 100%,80% 50%,76% 90%,71% 40%,66% 85%,62% 45%,57% 95%,52% 50%,47% 90%,42% 40%,38% 85%,33% 55%,28% 100%,23% 50%,18% 85%,13% 55%,9% 95%,5% 50%,0 85%);
  transition: background-color 1.6s ease;
}
.village-news-edition {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--news-rule);
  color: var(--news-muted); font: 500 10px/1.6 var(--reading); letter-spacing: .085em; text-transform: uppercase;
}
.village-news-edition>span:first-child>span { padding: 0 10px; }
.village-news-edition-date { letter-spacing: .025em; }
.village-news-edition-date time { margin-left: 10px; color: var(--news-ink); }
.village-news-heading { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 24px; padding: 24px 0 27px; border-bottom: 3px double var(--news-ink); }
.village-news-heading h2 { margin: 0; font: 450 clamp(35px, 4vw, 62px)/1.2 var(--display); letter-spacing: -.045em; text-align: left; text-wrap: balance; }
.village-news-heading h2 em { font-weight: 400; color: var(--news-accent); }
.village-news-heading p { font: 400 13px/1.7 var(--reading); max-width: 22ch; text-wrap: balance; color: var(--news-muted); }
.village-news-heading p small { display: block; margin-top: 5px; font-size: 10px; letter-spacing: .055em; text-transform: uppercase; }
.village-news-seal { display: block; width: 84px; height: 84px; color: var(--news-accent); border-radius: 50%; }
.village-news-bell { width: 100%; height: 100%; overflow: visible; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.news-seal { stroke-width: 1; }.news-seal-inner { stroke-width: .7; stroke-dasharray: 1 3; }
.news-bell-body { fill: color-mix(in srgb, var(--news-accent) 8%, transparent); }
.news-bell-shine { opacity: .5; }.news-bell-swing { transform-origin: 50px 25px; }
.village-news-stories { display: grid; grid-template-columns: 1fr 1fr; gap: 0 42px; padding: 28px 0; }
.village-news-story { position: relative; min-width: 0; }
.village-news-link { display: block; position: relative; height: 100%; padding: 18px 35px 20px 0; color: var(--news-ink); }
.village-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; font: 400 10px/1.6 var(--reading); color: var(--news-muted); }
.village-news-meta>span:last-child { font-size: 10px; }
.village-news-story h3 { margin: 7px 0 0; font: 450 clamp(19px, 1.5vw, 24px)/1.45 var(--display); letter-spacing: -.025em; text-wrap: pretty; overflow-wrap: anywhere; }
.village-news-story h3 span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color .25s ease; }
.village-news-rest { border-left: 1px solid var(--news-rule); padding-left: 35px; }
.village-news-rest .village-news-story+.village-news-story { border-top: 1px solid color-mix(in srgb,var(--news-rule) 55%,transparent); }
.village-news-rest .village-news-story:first-child .village-news-link { padding-top: 0; }
.village-news-rest .village-news-story:last-child .village-news-link { padding-bottom: 0; }
.village-news-lead .village-news-link { display: flex; flex-direction: column; align-items: flex-start; padding: 0 20px 0 0; }
.village-news-lead h3 { font-size: clamp(26px, 2.45vw, 40px); line-height: 1.35; letter-spacing: -.035em; margin-top: 18px; }
.village-news-fresh { color: var(--news-accent); font-weight: 600; letter-spacing: .055em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.village-news-fresh::before { content: ''; width: 5px; height: 5px; border: 1px solid currentColor; transform: rotate(45deg); }
.village-news-story-arrow { position: absolute; right: 0; top: 50%; color: var(--news-accent); transition: transform .3s ease; }
.village-news-story-arrow svg,.village-news-all svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.village-news-lead .village-news-story-arrow { position: static; margin-top: 26px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--news-rule); border-radius: 50%; }
.village-news-lead-date { margin-top: auto; padding-top: 25px; font: 400 11px/1.6 var(--reading); color: var(--news-muted); }
.village-news-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 3px double var(--news-ink); padding-top: 10px; }
.village-news-footer p { font: italic 400 14px/1.5 var(--display); color: var(--news-muted); }
.village-news-all { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 500 12px/1.6 var(--reading); color: var(--news-ink); }
.village-news-language { font-size: 9px; border: 1px solid var(--news-rule); padding: 1px 4px; }
.village-news-all>span:last-child { transition: transform .3s ease; }
.village-news a:focus-visible { outline: 2px solid var(--news-accent); outline-offset: 6px; }
.village-news-fallback { padding-block: 28px; font: 400 18px/1.6 var(--display); }
.village-news :is(.village-news-heading,.village-news-edition,.village-news-rest,.village-news-footer,.village-news-story,.village-news-link,.village-news-meta,.village-news-fresh,.village-news-lead-date,.village-news-heading p,.village-news-heading em,.village-news-footer p,.village-news-seal,.village-news-all) { transition: color 1.6s ease, border-color 1.6s ease; }
body[data-time=evening] .village-news {
  --news-paper: #253c32; --news-ink: #f2e8d2; --news-muted: #bdc3ad; --news-accent: #e4ba81; --news-rule: #71806a; --news-grain: .12;
  filter: drop-shadow(0 8px 14px #07171220);
}
@media (hover:hover) {
  .village-news-link:hover h3 span { text-decoration-color: var(--news-accent); }
  .village-news-link:hover .village-news-story-arrow,.village-news-all:hover>span:last-child { transform: translateX(4px); }
  .village-news-all:hover { color: var(--news-accent); }
  .village-news-seal:hover .news-bell-swing { animation: village-news-ring 1.2s ease-in-out; }
}
.village-news[data-news-arrived] .news-bell-swing { animation: village-news-ring 1.4s ease-in-out; }
.village-news[data-news-arrived] .village-news-stories { animation: village-news-unfold .7s ease-out; }
@keyframes village-news-ring { 0%,100% { transform: rotate(0); } 18% { transform: rotate(-13deg); } 37% { transform: rotate(10deg); } 55% { transform: rotate(-6deg); } 72% { transform: rotate(3deg); } }
@keyframes village-news-unfold { from { opacity: .7; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width:1000px) {
  .village-news-heading { grid-template-columns: 64px 1fr; gap: 12px 20px; }
  .village-news-seal { width: 64px; height: 64px; grid-row: 1/3; }
  .village-news-heading h2 { font-size: 42px; }
  .village-news-heading p { grid-column: 2; max-width: none; }
  .village-news-heading p small { display: inline; margin-left: 12px; }
  .village-news-stories { gap: 0 24px; }.village-news-rest { padding-left: 24px; }
}
@media (max-width:700px) {
  .village-news { margin: 42px 16px 35px; }
  .village-news-paper { padding: 16px 22px 12px; }
  .village-news-edition { font-size: 9px; letter-spacing: .055em; padding-bottom: 10px; }
  .village-news-edition-date { display: none; }
  .village-news-heading { padding: 19px 0 21px; grid-template-columns: 51px 1fr; gap: 7px 13px; }
  .village-news-seal { width: 51px; height: 51px; }
  .village-news-heading h2 { font-size: clamp(28px, 7.4vw, 40px); line-height: 1.24; }
  .village-news-heading p { font-size: 11px; }.village-news-heading p small { display: block; margin: 3px 0 0; font-size: 9px; }
  .village-news-stories { grid-template-columns: 1fr; padding: 22px 0 20px; gap: 25px; }
  .village-news-lead .village-news-link { padding: 0 0 2px; }
  .village-news-lead h3 { font-size: 26px; line-height: 1.4; margin-top: 12px; }
  .village-news-lead .village-news-story-arrow { position: absolute; right: 0; top: auto; bottom: 0; margin: 0; width: 34px; height: 34px; }
  .village-news-lead-date { margin-top: 0; padding-top: 21px; padding-right: 45px; }
  .village-news-rest { border-left: 0; border-top: 1px solid var(--news-rule); padding: 20px 0 0; }
  .village-news-story h3 { font-size: 19px; line-height: 1.5; }
  .village-news-lead h3 { font-size: 26px; line-height: 1.4; }
  .village-news-meta { font-size: 9px; gap: 4px 10px; }.village-news-meta>span:last-child { font-size: 9px; }
  .village-news-link { padding-right: 29px; }
  .village-news-footer { flex-wrap: wrap; gap: 2px 14px; }
  .village-news-footer p { font-size: 12px; }
  .village-news-all { margin-left: auto; font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .village-news *,.village-news *::before,.village-news *::after { animation: none!important; transition: none!important; }
}