/* Christmas at Homestead. Sits on fair-guides.css; the only change to the Fair
   palette is Christmas red where the guides use gold and brick. */
.guide-page.christmas-page{--red:#b4282e;--red-dark:#8f1f25;--red-light:#f07a6e;--brown:var(--red)}

.christmas-page .topline i{background:var(--red-light)}
.christmas-page .pass{color:var(--paper);background:var(--red)}
.christmas-page .feature-button{color:var(--paper);background:var(--red)}
.christmas-page .feature-button:hover{background:var(--red-dark)}
.christmas-page .guide-checker{background:repeating-conic-gradient(var(--red) 0% 25%,transparent 0% 50%) 0 0/32px 16px #fff}
.christmas-page .guide-close .guide-checker{background:repeating-conic-gradient(var(--red) 0% 25%,transparent 0% 50%) 0 0/32px 16px var(--paper)}
.christmas-page .guide-close .guide-hand{color:var(--red-light)}
.christmas-page .xmas-concerts a:not(.feature-button):hover,.christmas-page .guide-close a:not(.feature-button):hover{color:var(--red-light)}

.xmas-hero .guide-stamp img{object-position:30% center}

/* The market */
.xmas-photos{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:48px}
.guide-section.is-split .xmas-photos .guide-photo{margin:0}
.guide-section.is-split .xmas-photos .guide-photo img{aspect-ratio:4/3}
.guide-section.is-split .xmas-photos .guide-photo+.guide-photo{margin-top:72px}
.guide-section.is-split .xmas-photos .guide-photo+.guide-photo img{aspect-ratio:1}

/* The concerts */
.xmas-concerts{padding:clamp(72px,9vw,128px) max(28px,6vw);color:var(--paper);background:var(--navy);scroll-margin-top:84px}
.xmas-concerts .guide-hand{color:var(--red-light)}
.xmas-concerts-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:20px 64px;align-items:end;margin-bottom:clamp(40px,4.5vw,64px)}
.xmas-concerts-head .guide-hand{margin-bottom:10px}
.guide-page .xmas-concerts-head h2{margin:0;font-size:clamp(52px,5.4vw,86px);line-height:.84}
.xmas-concerts-head>p{margin:0;font:600 19px/1.45 var(--serif);letter-spacing:.012em}
.xmas-concert-photo{margin:0}
.xmas-concert-photo img{display:block;width:100%;aspect-ratio:2.4;object-fit:cover;object-position:center 58%}
.xmas-concert-photo figcaption{margin-top:12px;padding-top:10px;border-top:1px solid rgba(247,239,227,.25);color:var(--red-light);font-size:12px}

/* Admission tickets, after the homepage ticket */
.xmas-tickets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:56px}
.xmas-ticket{--stub:138px;position:relative;display:grid;grid-template-columns:var(--stub) minmax(0,1fr);min-width:0;color:var(--navy);background:var(--paper);border-radius:14px;overflow:hidden}
.xmas-ticket::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--stub) 0,var(--navy) 11px,transparent 11.5px),radial-gradient(circle at var(--stub) 100%,var(--navy) 11px,transparent 11.5px);pointer-events:none}
.xmas-ticket-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 10px;color:var(--paper);background:radial-gradient(circle,var(--paper) 1.6px,transparent 2.1px) right 2px top 0/6px 10px repeat-y,var(--red);text-align:center}
.xmas-ticket-stub span{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.xmas-ticket-stub strong{font:400 50px/.86 var(--display);font-variation-settings:"opsz" 2;text-transform:uppercase;white-space:nowrap}
.xmas-ticket-body{position:relative;padding:30px 32px 32px}
.xmas-ticket-body::before{content:"";position:absolute;inset:8px 8px 8px 10px;border:1px solid var(--navy);border-radius:0 8px 8px 0;opacity:.4;pointer-events:none}
.xmas-ticket-body h3{margin:0 0 8px;font-size:27px;line-height:1.15}
.xmas-ticket-body p{max-width:38ch;margin:0 0 22px;font-size:14px;line-height:1.6}
.xmas-ticket .feature-button{position:relative;z-index:1;gap:24px;font-size:21px}

.xmas-how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px clamp(40px,6vw,96px);margin-top:64px;padding-top:28px;border-top:1px solid rgba(247,239,227,.3)}
.xmas-how .guide-hand.is-sub{margin:0}
.xmas-how .guide-directions{margin:0}
.xmas-how .guide-directions li{border-color:rgba(247,239,227,.22)}
.xmas-how .guide-directions li:first-child{padding-top:0;border-top:0}
.xmas-how .guide-directions li:first-child::before{top:-2px}
.xmas-how .guide-directions li::before{color:var(--red-light)}

/* One ticket per row: details on the left, button on the right */
@media(min-width:701px) and (max-width:1079px){
  .xmas-tickets{grid-template-columns:minmax(0,1fr)}
  .xmas-ticket-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px}
  .xmas-ticket-body p{margin:0}
  .xmas-ticket .feature-button{grid-column:2;grid-row:1/3}
}
/* Keep the photo beside the headline until phone widths */
@media(min-width:701px) and (max-width:900px){
  .guide-hero.xmas-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px}
  .xmas-hero .guide-stamp{justify-self:end;width:100%}
  .xmas-hero .guide-stamp>div{padding:10px}
  .xmas-hero .feature-button{gap:20px;padding:14px 22px;font-size:20px}
  .xmas-ticket{--stub:112px}
  .xmas-ticket-stub strong{font-size:42px}
  .xmas-ticket-body{padding:26px 26px 28px}
  .xmas-ticket .feature-button{gap:18px;padding:14px 20px;font-size:19px}
}
@media(max-width:900px){
  .xmas-concerts-head,.xmas-how{grid-template-columns:minmax(0,1fr)}
  .xmas-concert-photo img{aspect-ratio:16/10}
}
@media(max-width:700px){
  .xmas-concerts{padding:60px 24px}
  .guide-page .xmas-concerts-head h2{font-size:clamp(46px,13vw,64px)}
  .xmas-concerts-head{margin-bottom:32px}
  .xmas-photos{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:36px}
  .guide-section.is-split .xmas-photos .guide-photo+.guide-photo{width:78%;margin:0 0 0 auto}
  .xmas-tickets{grid-template-columns:minmax(0,1fr);margin-top:40px;gap:20px}
  .xmas-ticket{--stub:64px;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--stub) auto}
  .xmas-ticket::after{background:radial-gradient(circle at 0 var(--stub),var(--navy) 11px,transparent 11.5px),radial-gradient(circle at 100% var(--stub),var(--navy) 11px,transparent 11.5px)}
  .xmas-ticket-stub{flex-direction:row;align-items:baseline;justify-content:space-between;padding:0 24px;line-height:var(--stub);background:radial-gradient(circle,var(--paper) 1.6px,transparent 2.1px) left 0 bottom 2px/10px 6px repeat-x,var(--red)}
  .xmas-ticket-stub strong{font-size:40px;line-height:inherit}
  .xmas-ticket-body{padding:26px 22px 24px}
  .xmas-ticket-body::before{inset:10px 8px 8px;border-radius:0 0 8px 8px}
  .xmas-ticket-body h3{font-size:23px}
  .xmas-ticket .feature-button{width:100%;padding:15px 20px;font-size:19px}
  .xmas-how{margin-top:48px}
}