/* Paul & Sarah Jane: wedding site styles */
body { margin: 0; }
/* Layout: one long letterpress card resting on linen, everything centred on the card's axis like the printed save the date */
:root {
  --linen: #e6dbd3;
  --paper: #f8eee9;
  --blush: #f1e0da;
  --ink: #1d2638;
  --ink-soft: #4a5266;
  --gold: #a8723f;
  --gold-hi: #d9ad72;
  --rule: rgba(168, 114, 63, .35);
  --sea: #dfe3e6;
  --sea-line: rgba(70, 95, 120, .16);
  --sea-ink: #5b6f86;
  --river: #9fb3c6;
  --display: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --serif: "Cormorant Garamond", "Garamond", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { font-size: clamp(15px, 12.6px + 0.6vw, 20px); }
html { background: var(--blush); }
body {
  min-height: 100vh;
  background-color: var(--blush);
  background-image:
    radial-gradient(90% 60% at 50% 0%, var(--paper) 0%, transparent 100%),
    radial-gradient(70% 50% at 50% 100%, #f4e4dd 0%, transparent 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  padding-inline: 16px;
  padding-block: 0 3.5rem;
}
/* paper grain across the whole page */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .42 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page {
  position: relative;
  max-width: 47.5rem;
  margin-inline: auto;
  text-align: center;
}

/* ——— hero ——— */
.sprig { width: 4rem; height: auto; display: block; margin: 0 auto 1.125rem; overflow: visible; }
.sprig .stem { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 130; stroke-dashoffset: 130; animation: draw 1.6s .4s ease-out forwards; }
.sprig .leaf { fill: url(#goldleaf); transform-box: fill-box; transform-origin: 0% 50%;
  animation: unfurl .7s cubic-bezier(.3,1.4,.5,1) backwards; }

.eyebrow {
  font-family: var(--serif); font-weight: 600;
  font-size: 1rem;
  letter-spacing: .32em; text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.eyebrow .script, .and {
  font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold) 38%, var(--gold-hi) 50%, var(--gold) 62%, var(--gold) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s ease-in-out 2.4s infinite;
}
.eyebrow .script { font-size: 1.7em; line-height: .6; padding-inline: .3em; }

.diamond { width: 0.5rem; height: 0.5rem; background: var(--gold); transform: rotate(45deg); margin: 1.875rem auto; display: block; }
.diamond.pulse { animation: twinkle 4s ease-in-out infinite; }

.names { margin: 0; font-weight: 400; display: grid; justify-items: center; gap: 0; text-wrap: balance; }
.names .name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 5.4rem);
  line-height: 1.05; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink);
}
.names .and { font-size: clamp(2.1rem, 8vw, 3rem); line-height: 1.4; padding-inline: .2em; }
.tagline {
  font-weight: 600; text-transform: uppercase;
  font-size: .875rem; letter-spacing: .3em; text-wrap: balance;
  margin: 0.625rem 0 0;
}
.when {
  font-weight: 600; text-transform: uppercase; letter-spacing: .28em;
  font-size: 1rem; line-height: 1.5; margin: 0;
}
.when .where { display: block; margin-top: .55em; letter-spacing: .3em; }
.when .at { display: block; margin-top: .7em; letter-spacing: .3em; font-size: .85em; }
.when .at .script { font-family: var(--script); font-size: 1.9em; letter-spacing: 0; text-transform: none; color: var(--gold); font-weight: 400; padding-left: .15em; }
.tagline { line-height: 1.7; }

/* load sequence */
.seq { animation: fadeup 1s cubic-bezier(.2,.7,.2,1) backwards; }
.d1 { animation-delay: .9s } .d2 { animation-delay: 1.15s } .d3 { animation-delay: 1.5s }
.d4 { animation-delay: 1.85s } .d5 { animation-delay: 2.1s } .d6 { animation-delay: 2.35s }
.d7 { animation-delay: 2.6s } .d8 { animation-delay: 2.9s }
.names .and.seq { animation: fadeup 1s cubic-bezier(.2,.7,.2,1) 1.5s backwards, shimmer 7s ease-in-out 2.6s infinite; }

/* ——— castle ——— */
.castle {
  margin: 2.125rem auto 0;
  width: min(100%, 38.75rem);
  max-width: 100%;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 82%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 82%, transparent 100%);
}
.castle svg { display: block; width: 100%; height: auto; }

/* ——— countdown ——— */
.countdown { margin-top: clamp(2.5rem, 7vh, 4.5rem); display: flex; justify-content: center; flex-wrap: wrap; gap: 1.75rem; }
.unit { display: grid; gap: 2px; min-width: 3.5rem; }
@media (max-width: 440px) { .tagline, .eyebrow, .when, .rsvp p.lead { letter-spacing: .2em; } .countdown { gap: .9rem; } .unit .lab { letter-spacing: .16em; } }
.unit .num {
  font-family: var(--display); font-size: 2.6rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.unit .num.tick { animation: tick .5s ease-out; }
.unit .lab { font-size: 0.75rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.countnote { margin: 0.625rem 0 0; font-style: italic; color: var(--ink-soft); }

/* ——— details ——— */
.section-title { font-family: var(--serif); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; font-size: 0.938rem; margin: 0 0 0.375rem; }
.section-title .script { font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 2em; color: var(--gold); line-height: .5; }
.details {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.625rem; text-align: center;
}
.detail { padding: .375rem 1.25rem .625rem; min-width: 0; }
.detail + .detail { border-left: 1px solid var(--rule); }
.detail h3 { font-family: var(--serif); font-weight: 600; font-size: 0.812rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.625rem; }
.detail p { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.detail .small { margin-top: 0.5rem; font-size: 1rem; font-style: italic; color: var(--ink-soft); }
.detail a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 0.188rem; }
.detail a:hover { color: var(--gold); }

@media (max-width: 620px) {
  .details { grid-template-columns: 1fr; gap: 0; }
  .detail { padding-block: 1.125rem; }
  .detail + .detail { border-left: 0; border-top: 1px solid var(--rule); }
  .detail + .detail::before { content: none; }
}

/* ——— rsvp ——— */
.rsvp p.lead { font-weight: 600; text-transform: uppercase; letter-spacing: .26em; font-size: .9rem; margin: 0; }
.rsvp p.sub { font-weight: 600; text-transform: uppercase; letter-spacing: .26em; font-size: 0.75rem; margin: 0.375rem 0 1.5rem; color: var(--ink-soft); }
.btn {
  position: relative; display: inline-block; overflow: hidden;
  font-family: var(--serif); font-weight: 600; font-size: 0.875rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: 0.938rem 2.125rem 0.875rem 2.375rem;
  border: 1px solid var(--gold);
  transition: color .45s ease;
  isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.6,.1,.2,1);
}
.btn:hover, .btn:focus-visible { color: var(--paper); }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 0.25rem; }
.btn[aria-disabled="true"] { border-style: dashed; color: var(--ink-soft); pointer-events: none; }
.rsvp-note { margin: 0.875rem 0 0; font-style: italic; color: var(--ink-soft); font-size: 1rem; }

footer.sign { margin-top: 0.5rem; }
.mono { font-family: var(--display); font-size: 1.875rem; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 0.875rem; }
.mono .diamond { margin: 0; width: 0.375rem; height: 0.375rem; }
.sign small { display: block; margin-top: 0.375rem; font-size: 0.75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }

/* ——— map ——— */
.map { margin: 26px calc(50% - min(470px, 50vw - 16px)) 0; }
.map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map .sea { fill: var(--sea); }
.map .hatch line { stroke: var(--sea-line); stroke-width: 1.2; }
.map .hatch { animation: drift 14s linear infinite; }
.map .neighbours { fill: var(--paper); stroke: var(--ink-soft); stroke-opacity: .35; stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.map .county { fill: url(#wash); }
.map .county-line { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.map.drawing .county-line { animation: draw-county 3.2s cubic-bezier(.45,.05,.2,1) both; }
.map .river { fill: none; stroke: var(--river); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.map .river-flow { fill: none; stroke: #fff; stroke-opacity: .8; stroke-width: 1.4; stroke-dasharray: 6 26; stroke-linecap: round; animation: flow 4s linear infinite; }
.map .peak { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; opacity: .8; }
.map text { font-family: var(--serif); fill: var(--ink); }
.map .town { font-size: 24px; font-weight: 500; }
.map .dot { fill: var(--ink); }
.map .region { font-size: 17px; font-weight: 600; letter-spacing: .38em; fill: var(--ink-soft); opacity: .6; }
.map .water-label { font-size: 19px; font-style: italic; letter-spacing: .3em; fill: var(--sea-ink); }
.map .county-name { font-family: var(--display); font-size: 30px; letter-spacing: .28em; fill: var(--gold); opacity: .75; }
.map .hills { font-size: 17px; font-style: italic; fill: var(--gold); letter-spacing: .12em; }
.map .venue { font-family: var(--script); font-size: 40px; fill: var(--gold); }
.map .pin { fill: var(--gold); stroke: var(--paper); stroke-width: 2; }
.map .ring { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring 2.8s ease-out infinite; }
.map .inset-bg { fill: var(--paper); stroke: var(--gold); stroke-width: 2; }
.map .leader { stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 3 5; fill: none; }
.map .ferry { animation: ferry 7s ease-in-out infinite; }
.map .small { font-size: 16px; letter-spacing: .26em; font-weight: 600; fill: var(--ink-soft); }
.travel { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem 1.75rem; margin: 0.875rem 0 0; padding: 0; list-style: none; font-size: 1.062rem; color: var(--ink-soft); font-style: italic; }
.travel b { font-style: normal; font-weight: 600; color: var(--ink); }
@keyframes draw-county { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes flow { to { stroke-dashoffset: -64; } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ferry { 0%, 12% { transform: translateY(0); } 45%, 57% { transform: translateY(-30px); } 90%, 100% { transform: translateY(0); } }

/* ——— order of the day (copied from the invitation) ——— */
.timeline { list-style: none; margin: 1.75rem auto 0; padding: 0; width: fit-content; max-width: 100%; position: relative; text-align: left; }
.timeline::before { content: ""; position: absolute; left: 2.125rem; top: 1.875rem; bottom: 1.875rem; width: 1px; background: var(--rule); transform-origin: top; }
.timeline.drawing::before { animation: grow 2s cubic-bezier(.45,.05,.2,1) both; }
.tl-item { position: relative; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 0.875rem; align-items: center; padding-block: 0.625rem; }
.tl-icon { display: flex; justify-content: center; }
.tl-icon span { width: 3.375rem; height: 3.375rem; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--rule); display: flex; align-items: center; justify-content: center; transition: transform .4s cubic-bezier(.3,1.4,.5,1), box-shadow .4s ease; }
.tl-icon svg { width: 1.875rem; height: 1.875rem; stroke: var(--gold); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.tl-item:hover .tl-icon span { transform: scale(1.08); box-shadow: 0 0 0 1px var(--gold); }
.tl-time { font-family: var(--serif); font-weight: 500; font-variant-numeric: lining-nums; font-size: 1.5rem; letter-spacing: .04em; line-height: 1.1; display: inline-block; }
.tl-what { font-size: 0.812rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 600; margin-top: 0.25rem; line-height: 1.35; }
.tl-where { font-style: italic; font-size: 1rem; color: var(--ink-soft); line-height: 1.25; margin-top: 2px; }
.timeline.drawing .tl-item { animation: fadeup .8s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i) * .2s + .2s); }
.timeline.drawing .tl-icon svg > * { stroke-dasharray: 1; animation: draw-icon 1.4s ease-out backwards; animation-delay: calc(var(--i) * .2s + .45s); }
.timeline.drawing .tl-icon svg > * { stroke-dashoffset: 0; }
@keyframes draw-icon { from { stroke-dashoffset: 1; } }
.map-note { max-width: 52ch; margin: 0.625rem auto 0; font-size: 1.062rem; color: var(--ink-soft); font-style: italic; text-wrap: pretty; }
.sign .domain { margin-top: 0.25rem; letter-spacing: .18em; text-transform: none; color: var(--gold); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* held state before a scroll-in animation starts (set by script only when below the fold) */
.timeline.pending::before { transform: scaleY(0); }
.timeline.pending .tl-item { opacity: 0; transform: translateY(.875rem); }
.timeline.pending .tl-icon svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.map.pending .county-line { stroke-dashoffset: 1; }

/* ——— top navigation ——— */
html { scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.topnav {
  position: sticky; top: 0; z-index: 10;
  margin-inline: -16px;
  padding: calc(env(safe-area-inset-top, 0px) + .55rem) 1.5rem .55rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  animation: fadeup 1s cubic-bezier(.2,.7,.2,1) .3s backwards;
}
.topnav.scrolled {
  background-color: rgba(241, 224, 218, .82);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  border-bottom-color: var(--rule);
}
.topnav .mark { font-family: var(--display); font-size: 1.25rem; letter-spacing: .08em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.topnav .mark span { font-family: var(--script); color: var(--gold); font-size: 1.1em; padding-inline: .1em; }
.topnav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 2.2rem); }
.topnav ul a {
  position: relative; display: inline-block; padding-block: .35rem;
  font-weight: 600; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.topnav ul a:not(.nav-rsvp)::after {
  content: ""; position: absolute; left: 0; right: .24em; bottom: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.6,.1,.2,1);
}
.topnav ul a:hover::after, .topnav ul a.active::after { transform: scaleX(1); }
.topnav ul a.active { color: var(--gold); }
.topnav .nav-rsvp { border: 1px solid var(--gold); padding: .45rem .9rem .4rem 1.14rem; transition: background-color .3s ease, color .3s ease; }
.topnav .nav-rsvp:hover, .topnav .nav-rsvp.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.topnav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 720px) {
  .topnav { padding-inline: 16px; justify-content: center; }
  .topnav .mark { display: none; }
  .topnav ul { gap: .9rem; }
  .topnav ul a { font-size: .68rem; letter-spacing: .14em; }
  .topnav .nav-rsvp { padding: .38rem .6rem .34rem .74rem; }
}
@media (max-width: 360px) { .topnav ul li:nth-child(2) { display: none; } }

/* ——— opening screen: fills the window under the nav, castle takes the spare height ——— */
.hero {
  min-height: calc(100vh - var(--nav-h, 3.75rem));
  min-height: calc(100svh - var(--nav-h, 3.75rem));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-block: clamp(.5rem, 2.4vh, 2.5rem) clamp(.5rem, 1.6vh, 1.5rem);
}
.hero > * { flex-shrink: 0; }
.hero-text { display: flex; flex-direction: column; align-items: center; }
.hero .sprig { width: clamp(1.9rem, 4.6vh, 3.5rem); margin-bottom: clamp(.4rem, 1.4vh, 1.125rem); }
.hero .diamond { margin: clamp(.55rem, 2vh, 1.875rem) auto; }
.hero .when br { display: none; }
.hero .when .where { margin-top: .35em; }
.hero .when .at { margin-top: .3em; }
.hero .tagline { margin-top: clamp(.3rem, 1vh, .625rem); }
.hero .names .name { font-size: clamp(2.6rem, min(11vw, 9.5vh), 5.4rem); }
.hero .names .and { font-size: clamp(2rem, min(8vw, 6vh), 3rem); line-height: 1.3; }
.hero .castle {
  flex: 1 1 0; min-height: 5.5rem; width: 100%;
  max-height: calc(min(100vw - 32px, 38.75rem) * 528 / 1100);
  margin: clamp(.5rem, 2vh, 2.125rem) auto 0;
  display: flex; justify-content: center;
  -webkit-mask-image: none; mask-image: none;
}
.hero .castle svg {
  width: auto; height: 100%; max-width: 100%;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 82%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 82%, transparent 100%);
}
.scroll-cue {
  margin-top: clamp(.4rem, 1.6vh, 1.25rem);
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  padding-left: .32em; color: var(--ink-soft); text-decoration: none;
}
.scroll-cue i { position: relative; display: block; width: 1px; height: clamp(1.1rem, 3.4vh, 2.25rem); background: var(--rule); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--gold); animation: cue 2.4s cubic-bezier(.6,0,.3,1) 3.4s infinite; transform: translateY(-100%); }
.scroll-cue:hover { color: var(--gold); }
.scroll-cue:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.topnav.scrolled ~ .page .scroll-cue { opacity: 0; transition: opacity .6s ease; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(260%); } }

/* Landscape screens: words on the left, the castle large on the right, both inside one window. */
@media (min-width: 960px) and (min-aspect-ratio: 6/5) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: 1fr auto;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
    width: min(76rem, 100vw - 32px);
    margin-inline: calc(50% - min(38rem, 50vw - 16px));
  }
  .hero-text { grid-column: 1; grid-row: 1; }
  .hero .castle { grid-column: 2; grid-row: 1; flex: none; max-height: none; min-height: 0; margin: 0; }
  .hero .castle svg { width: 100%; height: auto; }
  .scroll-cue { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .hero .names .name { font-size: clamp(2.6rem, min(5.2vw, 9.5vh), 4.6rem); }
  .hero .names .and { font-size: clamp(2rem, min(3.4vw, 6vh), 3rem); }
}

@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes unfurl { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shimmer { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
@keyframes twinkle { 0%, 100% { transform: rotate(45deg) scale(1); opacity: 1; } 50% { transform: rotate(45deg) scale(.6); opacity: .55; } }
@keyframes tick { from { transform: translateY(-6px); opacity: .2; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sprig .stem { stroke-dashoffset: 0; }
}

@media (max-width: 620px) {
  .map .town { font-size: 34px; }
  .map .venue { font-size: 52px; }
  .map .county-name { font-size: 38px; }
  .map .region, .map .hills { font-size: 24px; }
  .map .water-label { font-size: 26px; }
  .map .small { font-size: 22px; }
  .map .peak { stroke-width: 2.2; }
  .map .minor, .map .hills { display: none; }
  .map .county-name { font-size: 32px; transform: translateX(-50px); }
  .map .venue { transform: translateX(-40px); }
}