/* Shared look for the pages behind the menu: Events, Travel, Things to do, FAQ.
   A warm paper page, painting on the right fading into it, maroon and gold type. */
:root{
  color-scheme:light;
  --paper:#FAF1E2;
  --ink:#2B1D17;
  --soft:#4A3A31;
  --muted:#6A584D;
  --maroon:#7A1B2C;
  --gold:#B7802A;
  --line:rgb(183 128 42 / .55);
  --hair:rgb(106 88 77 / .28);
  --shade:22 13 6;
  --ivory:#F7F0E1;
  --marigold:#E9BC63;
  --f-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --f-ui:"Karla","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(22px,6vw,98px);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-display);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--maroon);outline-offset:4px}

.page{position:relative;min-height:100svh;isolation:isolate;overflow-x:clip}

/* ---------- the painting, fading into the paper on its left edge ---------- */
.art{position:absolute;z-index:-1;top:0;bottom:0;right:0;width:62%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%);
          mask-image:linear-gradient(to right,transparent 0,#000 42%)}
.art img{display:block;width:100%;height:100%;object-fit:cover;object-position:35% 50%}

/* ---------- the top bar ---------- */
.bar{margin:0 var(--pad);padding:30px 64px 26px 0;border-bottom:1px solid var(--line)}
.brand{font:500 .74rem/1.2 var(--f-ui);letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);text-decoration:none}
.brand:hover{color:var(--maroon)}

/* ---------- the words ---------- */
.copy{width:min(100%,41rem);padding:clamp(34px,6vh,64px) var(--pad) 72px}
.eyebrow{margin:0;font:500 .74rem/1.5 var(--f-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
h1{margin:.5rem 0 0;font-weight:500;font-size:clamp(2.8rem,6.2vw,4.7rem);line-height:1.04;
  letter-spacing:-.012em;color:var(--maroon);text-wrap:balance}
.rule{display:block;width:3rem;height:2px;background:var(--gold);margin:1.5rem 0 1.6rem}
.lede{margin:0;max-width:34ch;font-style:italic;font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.5;
  color:var(--soft);text-wrap:balance}
.soon-note{margin:2.4rem 0 0;font:600 .74rem/1.5 var(--f-ui);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}

/* ---------- the timeline ---------- */
.timeline{--date:8.4rem;--node:3.6rem;list-style:none;margin:2.6rem 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;top:2.2rem;bottom:1.6rem;
  left:calc(var(--date) + var(--node) / 2);width:1px;background:var(--gold)}
.timeline li{display:grid;grid-template-columns:var(--date) var(--node) 1fr;align-items:center;padding-block:1.15rem}
.date{display:grid;gap:.15rem;justify-items:start}
.dow,.mon{font:500 .72rem/1.4 var(--f-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.num{font-style:italic;font-weight:400;font-size:3.2rem;line-height:1;color:var(--maroon)}
.node{position:relative;z-index:1;justify-self:center;width:2rem;height:2rem;border-radius:50%;border:1.5px solid var(--gold);
  background:var(--paper);display:grid;place-items:center}
.node::after{content:"";width:.58rem;height:.58rem;border-radius:50%;background:var(--gold)}
.what{padding-left:.5rem}
.soon .what{padding-left:1.1rem}
.what h2{margin:0 0 .55rem;font-weight:400;font-size:clamp(1.55rem,2.5vw,2.15rem);line-height:1.1;color:var(--ink)}
.what p{margin:0 0 .3rem;font:500 .76rem/1.5 var(--f-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.what p:last-child{margin-bottom:0}
.soon .node{width:3.6rem;height:3.6rem}
.soon .node::after{display:none}
.soon .node svg{width:1.9rem;height:1.9rem;stroke:var(--ink);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.soon .what h2{font-size:1.3rem;margin-bottom:.4rem}
.soon .what p{color:var(--gold);font-weight:600}

/* ---------- the menu ---------- */
#burger{position:fixed;z-index:70;top:calc(18px + env(safe-area-inset-top,0px));
  right:max(22px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#burgerBtn{cursor:pointer;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:rgb(var(--shade)/.62);border:1px solid rgb(233 188 99/.5);backdrop-filter:blur(6px);
  transition:background .2s ease}
#burgerBtn:hover{background:rgb(var(--shade)/.82)}
#burgerBtn span{position:relative;width:18px;height:12px;display:block}
#burgerBtn span::before,#burgerBtn span::after,#burgerBtn i{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--ivory);transition:transform .25s ease,opacity .25s ease}
#burgerBtn span::before{top:0}
#burgerBtn i{top:5px;display:block}
#burgerBtn span::after{top:10px}
#burgerBtn.open span::before{transform:translateY(5px) rotate(45deg)}
#burgerBtn.open span::after{transform:translateY(-5px) rotate(-45deg)}
#burgerBtn.open i{opacity:0}
#burgerMenu{list-style:none;margin:0;padding:10px;display:grid;gap:2px;
  background:rgb(var(--shade)/.94);border:1px solid rgb(233 188 99/.3);
  backdrop-filter:blur(8px);min-width:13rem}
#burgerMenu[hidden]{display:none}
#burgerMenu a{display:flex;align-items:center;min-height:44px;padding:8px 12px;
  text-decoration:none;color:var(--ivory);font:400 .95rem/1.2 var(--f-display);opacity:.86}
#burgerMenu a:hover{opacity:1;background:rgb(233 188 99/.12)}
#burgerMenu a[aria-current="page"]{opacity:1;color:var(--marigold)}
#burgerBtn:focus-visible,#burgerMenu a:focus-visible{outline-color:var(--ivory)}

/* ---------- phones and narrow windows: the painting becomes a banner ---------- */
@media (max-width:899px){
  .art{left:0;right:0;width:auto;bottom:auto;height:min(40svh,20rem);
    -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 52%,transparent 100%)}
  .art img{object-position:30% 62%}
  .bar{border-bottom-color:transparent;padding-right:0}
  .brand{display:inline-block;padding:.35rem .6rem;margin-left:-.6rem;border-radius:2px;
    background:rgb(250 241 226 / .78);color:var(--ink)}
  .copy{width:100%;padding-top:calc(min(40svh,20rem) - 84px)}
  .eyebrow{text-shadow:0 0 12px var(--paper),0 0 4px var(--paper)}
  .timeline{--date:5.9rem;--node:2.8rem}
  .num{font-size:2.5rem}
  .what h2{font-size:1.5rem}
  .what p,.dow,.mon{letter-spacing:.2em;font-size:.68rem}
  .soon .node{width:2.8rem;height:2.8rem}
  .soon .node svg{width:1.5rem;height:1.5rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}