/* Christmas bunting: one flag for each part of the countdown. */
body { padding-top: 0; display: flex; flex-direction: column; }
main { height: auto; flex: 1; min-height: 0; padding-top: 6px; }
.side-garland { position:absolute; top:0; bottom:0; left:0; width:60px; overflow:hidden; pointer-events:none; z-index:2; mask-image:linear-gradient(to right,#000 0%,#000 60%,transparent 100%); }
.side-garland img { position:absolute; top:0; left:0; width:100dvh; max-width:none; height:84px; object-fit:cover; object-position:center 25%; transform-origin:0 0; transform:rotate(90deg) scaleY(-1); }
.side-garland-right { left:auto; right:0; transform:scaleX(-1); }
.christmas-countdown { display: block; width: 100%; max-width: none; margin: 0; flex: none; position: relative; padding: 30px 18px 4px; text-align: center; }
.event-date { white-space: nowrap; margin: 0 0 12px; color: #fff0cf; font: 700 34px/1.05 'Mountains of Christmas', Georgia, serif; text-shadow: 0 2px 3px #3b091c80; }
.christmas-countdown .bunting-row { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 18px; width: min(100%, 460px); height: 138px; margin: 0 auto; padding-top: 8px; }
.bunting-cord { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:#d2b68b; stroke-width:1.8; pointer-events:none; z-index:1; filter:drop-shadow(0 2px 1px #31081380); }
.bunting-pennant { position:relative; --tilt: -7deg; --drop: 4px; width: 86px; height: 112px; flex: none; transform: translateY(var(--drop)) rotate(var(--tilt)); transform-origin: 50% 0; filter: drop-shadow(1px 5px 4px #31081366); animation: bunting-sway 5s ease-in-out infinite alternate; }
.bunting-pennant:nth-of-type(2) { --tilt: 3deg; --drop: 14px; animation-delay: -1s; }
.bunting-pennant:nth-of-type(3) { --tilt: -3deg; --drop: 14px; animation-delay: -3s; }
.bunting-pennant:nth-of-type(4) { --tilt: 7deg; --drop: 4px; animation-delay: -2s; }
.flag-face { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 15px 5px 0; clip-path: polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); background-color: #285c40; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='47' viewBox='0 0 46 47'%3E%3Cg fill='none' stroke='%23fff3d7' opacity='.21' stroke-width='.8'%3E%3Cpath d='M9 2v14M2 9h14M4 4l10 10M4 14L14 4M6 3l3 3 3-3M3 6l3 3-3 3M6 15l3-3 3 3M15 6l-3 3 3 3M33 29v12M27 35h12M29 31l8 8M29 39l8-8'/%3E%3C/g%3E%3Ccircle cx='34' cy='12' r='1' fill='%23fff3d7' opacity='.25'/%3E%3C/svg%3E"), linear-gradient(110deg,#ffffff12,transparent 40%,#00000016); box-shadow: inset 0 2px #ffffff24; }
.bunting-pennant:nth-of-type(even) .flag-face { background-color: #a72432; }
.flag-face::after { content: ''; position: absolute; inset: 6px 6px 23px; border: 1px dashed #fff2d72e; pointer-events: none; }
.bunting-number { display: block; color: #fff3d7; font: 600 49px/.95 'Cormorant Garamond',Georgia,serif; letter-spacing: 0; text-shadow: 0 1px 1px #0003; }
.flag-label { color: #fff3d7; margin-top: 8px; font: 600 8px/1.2 'DM Sans',sans-serif; letter-spacing: 1.2px; }
@keyframes bunting-sway { to { transform: translateY(var(--drop)) rotate(calc(var(--tilt) + 1.8deg)); } }
@media (max-height:850px) and (min-width:651px) {
  .christmas-countdown { padding-top: 26px; }
  .event-date { font-size: 28px; margin-bottom: 7px; }
  .christmas-countdown .bunting-row { height: 112px; gap: 16px; width: 382px; }
  .bunting-pennant { width: 72px; height: 91px; }
  .flag-face { padding-top: 10px; }
  .bunting-number { font-size: 40px; }
  .flag-label { font-size: 7px; margin-top: 6px; letter-spacing: .8px; }
}
@media (max-width:650px) {
  .christmas-countdown { padding: 28px 16px 2px; }
  .event-date { font-size: 28px; margin-bottom: 8px; }
  .christmas-countdown .bunting-row { width: min(100%,330px); height: 111px; gap: 12px; }
  .bunting-pennant { width: 64px; height: 89px; }
  .side-garland { width: 18px; }
  .side-garland img { height: 45px; transform:rotate(90deg) scaleY(-1); }
  .flag-face { padding-top: 11px; }
  .bunting-number { font-size: 38px; }
  .flag-label { font-size: 6px; margin-top: 6px; letter-spacing: .7px; }
  .page-tabs { gap: 17px; }
}
@media (prefers-reduced-motion:reduce) { .bunting-pennant { animation: none; } }

/* A continuous rope, with the fabric suspended beneath its tangent. */
.bunting-cord { stroke-linecap:round; stroke-linejoin:round; filter:none; z-index:2; }
.bunting-cord .cord-shadow { stroke:#350d18; stroke-width:4; opacity:.3; transform:translateY(2px); }
.bunting-cord .cord-rope { stroke:#bda079; stroke-width:2.6; }
.bunting-cord .cord-twist { stroke:#ead6b2; stroke-width:1; stroke-dasharray:2 2.6; opacity:.85; }
.bunting-cord .cord-ties { stroke:#e3cda6; stroke-width:1.2; fill:none; }
.bunting-pennant { transform:translateY(var(--cord-y,14px)) rotate(var(--cord-angle,0rad)); animation:none; }

/* Compact date and bunting, preserving the smooth suspended cord. */
.christmas-countdown{padding:18px 18px 2px;}
.event-date{font-size:26px;margin-bottom:6px;}
.christmas-countdown .bunting-row{width:min(100%,320px);height:101px;gap:12px;padding-top:5px;}
.bunting-pennant{width:60px;height:78px;}
.flag-face{padding:10px 4px 0;}
.flag-face::after{inset:4px 4px 16px;}
.bunting-number{font-size:33px;}
.flag-label{font-size:6px;margin-top:5px;letter-spacing:.7px;}
@media(max-height:850px) and (min-width:651px){.christmas-countdown{padding-top:16px;}.event-date{font-size:24px;margin-bottom:5px;}.christmas-countdown .bunting-row{width:280px;height:89px;gap:11px;}.bunting-pennant{width:52px;height:68px;}.flag-face{padding-top:8px;}.bunting-number{font-size:29px;}.flag-label{font-size:5.5px;margin-top:4px;letter-spacing:.5px;}}
@media(max-width:650px){.christmas-countdown{padding:18px 16px 2px;}.event-date{font-size:24px;margin-bottom:6px;}.christmas-countdown .bunting-row{width:min(100%,260px);height:88px;gap:10px;}.bunting-pennant{width:50px;height:68px;}.flag-face{padding-top:8px;}.bunting-number{font-size:29px;}.flag-label{font-size:5px;letter-spacing:.5px;margin-top:4px;}}

/* Phones use a natural document, so every page can reach its sponsors and footer. */
@media(max-width:650px){
 html{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;}
 body{height:auto;min-height:100dvh;overflow:visible;padding-top:0;display:block;}
 main{height:auto;min-height:0;max-height:none;display:block;overflow:visible;padding:3px 20px 0;}
 .christmas-countdown{padding:12px 18px 0;}
 .event-date{font-size:20px;line-height:1.1;margin-bottom:3px;}
 .christmas-countdown .bunting-row{width:218px;max-width:100%;height:72px;gap:9px;padding-top:3px;}
 .bunting-pennant{width:42px;height:54px;}
 .flag-face{padding:6px 3px 0;}
 .flag-face::after{inset:3px 3px 12px;}
 .bunting-number{font-size:24px;line-height:1;}
 .flag-label{font-size:4.5px;letter-spacing:.4px;margin-top:3px;}
 .introduction{padding:1px 0 8px;}
 .introduction h1{font-size:clamp(27px,7.4vw,35px);line-height:1.1;margin:0;}
 nav.page-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:5px;padding:5px 0;margin:0 auto 16px;}
 :is(nav.page-tabs button,#termsPanel .terms-back){min-height:39px;}
 nav.page-tabs button{min-width:0;width:100%;white-space:nowrap;}
 [data-panel]{height:auto;max-height:none;min-height:0;overflow:visible;flex:none;}
 #pubsPanel,#attendeesPanel{padding:0 0 12px;scroll-padding-bottom:0;-webkit-mask-image:none;mask-image:none;}
 #pubsPanel .pub-list{margin:0 auto 12px;padding:0;}
 #routePanel{display:block;overflow:visible;height:auto;}
 #routePanel[hidden]{display:none;}
 #routePanel .gallery{display:block;min-height:0;}
 #routePanel .picture{height:auto;min-height:0;filter:none;box-shadow:3px 16px 22px #0007;isolation:isolate;}
 #routePanel .screen{height:auto;min-height:0;aspect-ratio:16/9;}
 #routePanel .frame-outer,#routePanel .frame-carved,#routePanel .frame-bevel,#routePanel .frame-liner{height:auto;}
 #routePanel .frame-carved{padding:7px;}#routePanel .frame-bevel{padding:5px;}
 #rulesPanel .christmas-rule{height:auto;min-height:0;}
 #rulesPanel .rule-photo{height:240px;}
 #rulesPanel .rule-copy{padding:26px 20px;}
 #rulesPanel .rule-copy h2{font-size:30px;}
 .sponsors{height:auto;min-height:118px;max-height:none;margin:22px auto 0;padding:18px 0 12px;overflow:hidden;}
 .sponsor-heading{margin:0 0 18px;}
 .sponsor-track{min-height:60px;}
 .site-copyright{padding:16px 14px 22px;font-size:9px;line-height:1.6;}
 .side-garland{width:12px;position:fixed;bottom:0;}
 body.terms-page-open{overflow:hidden;height:100dvh;}
 body.terms-page-open #termsPanel{overflow:auto;position:fixed;inset:0;max-height:none;}
 [data-panel][hidden]{display:none!important;}
}
@media(max-width:650px){
 #pubsPanel .map-links{gap:6px;}
 #pubsPanel .map-links a{font-size:10px;gap:4px;padding:8px;min-height:42px;}
 #pubsPanel .map-links img{width:17px;height:17px;}
}
@media(max-width:370px){:is(nav.page-tabs button,#termsPanel .terms-back){font-size:9px;padding-left:4px;padding-right:4px;}}
@media(max-width:650px){
 #routePanel .journey-heading{top:6px;left:7px;max-width:calc(100% - 14px);padding:5px 8px;}
 #routePanel .journey-heading strong{font-size:16px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 #routePanel .journey-kicker{font-size:5.5px;letter-spacing:.8px;margin-bottom:2px;}
 #routePanel .journey-heading #currentPubTime{display:none;}
 #routePanel .apple-play{justify-content:center;padding:38px 10px 16px;gap:6px;}
 #routePanel .apple-play .play-circle{width:32px;height:32px;}
 #routePanel .apple-play .play-circle svg{width:17px;height:17px;}
 #routePanel .apple-play .play-label{font-size:7px;letter-spacing:.8px;padding:6px 9px;}
 #routePanel .apple-play .play-hint{display:none;}
}
@media(max-width:650px){#pubsPanel .map-links{gap:4px;}#pubsPanel .map-links a{padding:8px 5px;}#pubsPanel .map-links img{width:16px;height:16px;}}