/* Web layer over slides.css.
   Desktop: each slide rendered at its native 1280x720 and scaled to the viewport,
   so the composition is identical to the deck.
   Phone: the transform is dropped and every panel reflows to one column. */

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{ background:var(--paper); margin:0 }

.deck{ display:flex; flex-direction:column }
.panel{ position:relative; width:100%; overflow:hidden }
.panel > .s{ transform-origin:top left }

/* ── desktop: scale the native slide ───────────────── */
@media (min-width:860px){
  .panel{ height:var(--ph,720px) }
  .panel > .s{ transform:scale(var(--k,1)) }
}

/* ── phone / narrow: reflow ────────────────────────── */
@media (max-width:859.98px){
  .panel{ height:auto !important }
  .panel > .s{
    transform:none !important;
    width:100% !important; height:auto !important; min-height:0 !important;
  }
  .s{ overflow:visible }

  .fr{
    height:auto !important;
    padding:44px max(16px,env(safe-area-inset-left,0px)) 36px max(16px,env(safe-area-inset-right,0px)) !important;
  }

  /* splits stack */
  .split{ position:static !important; flex-direction:column !important }
  .half{ flex:none !important; width:100% !important }
  .half.photo,.photo.half{ aspect-ratio:4/3; min-height:0 }
  .half.collage{ aspect-ratio:3/4; }
  .half:not(.photo){ padding:40px max(16px,env(safe-area-inset-left,0px)) 36px !important }

  /* a split slide puts its frame back in flow */
  .s > .fr{ position:relative }

  /* rows stack, fixed proportions released */
  .row{
    flex-direction:column !important;
    height:auto !important; aspect-ratio:auto !important;
    gap:18px !important;
  }
  .row > *{ flex:none !important; width:100% !important; aspect-ratio:auto }
  .row > .photo{ aspect-ratio:3/2 }
  .row .photo{ aspect-ratio:3/2 }
  .grow{ flex:none !important }

  /* type: inline sizes in the source need overriding */
  h1{ font-size:40px !important; line-height:1.06 !important }
  h2{ font-size:30px !important; line-height:1.14 !important }
  h3{ font-size:14px !important }
  .lead{ font-size:17px !important }
  .stat{ font-size:64px !important }
  p,li,td{ font-size:15px !important; line-height:1.72 !important }
  .card .t{ font-size:19px !important }
  .card .b{ font-size:13.5px !important }
  .cap,.eyebrow{ font-size:9.5px !important }
  [style*="max-width"]{ max-width:100% !important }

  .shead{ flex-wrap:wrap; gap:4px }
  .shead .r{ flex-basis:100% }
  .sfoot{ flex-wrap:wrap; gap:6px 18px }
  .pills{ gap:8px }

  /* the week grid and the map scroll inside themselves */
  .svg-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .svg-scroll > svg{ min-width:720px }

  /* tables: each row becomes a small block — label beside time, description underneath */
  table, tbody{ display:block }
  tr{ display:grid; grid-template-columns:auto 1fr; gap:2px 14px; padding:12px 0; border-bottom:1px solid var(--rule) }
  .on-dark tr,.dark tr{ border-color:var(--rule-dk) }
  td{ display:block; width:auto !important; padding:0 !important; border:0 !important; white-space:normal !important }
  tr > td:nth-child(3){ grid-column:1 / -1 }
  td.k{ font-size:18px !important }

  /* heading-and-paragraph rows (map, eating) and the personal note stack */
  .fr > div[style*="justify-content:space-between"]{ flex-direction:column !important; align-items:flex-start !important; gap:14px }
  .fr > .grow[style*="gap:44px"]{ flex-direction:column !important; gap:24px !important }
  .fr > .grow[style*="gap:44px"] .photo{ flex:1 1 0 !important; aspect-ratio:4/3; min-width:0 }
  .fr > .grow[style*="gap:44px"] > div > div[style*="display:flex"]{ flex-direction:row }

  /* the cover keeps air between the logo, the title block and the facts */
  .fr[style*="justify-content:space-between"] > * + *{ margin-top:30px }

  /* text that sits over a photo on the slide: photo first, text on solid ground */
  .mstack{ background:var(--espresso) }
  .mstack.jq{ background:#1f1828 }
  .mstack > .bg{ position:relative !important; display:block; aspect-ratio:4/3; inset:auto }
  .mstack > .sc{ display:none }
}

/* ── FAQ ───────────────────────────────────────────── */
.faq{ background:var(--paper); padding-block:clamp(56px,7vw,92px) }
.faq-in{
  max-width:880px; margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.faq h2{ font-size:clamp(34px,5.2vw,50px); margin-bottom:6px }
.faq .intro{ max-width:58ch; margin-top:14px }
.faq-sec{ margin-top:clamp(34px,4vw,52px) }
.faq-sec > .shead{ margin-bottom:4px }
.faq details{ border-bottom:0 }
.faq summary{
  list-style:none; cursor:pointer; display:flex; gap:15px; align-items:flex-start;
  padding-block:16px; color:var(--espresso);
  font-family:'Cormorant Garamond',Georgia,serif; font-size:20px; font-weight:400; line-height:1.34;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--brass-deep) }
.faq summary:focus-visible{ outline:2px solid var(--brass); outline-offset:3px }
.faq .chev{
  flex:0 0 auto; width:10px; height:10px; margin-top:9px;
  border-right:1.5px solid var(--brass); border-bottom:1.5px solid var(--brass);
  transform:rotate(45deg); transition:transform .22s ease;
}
.faq details[open] .chev{ transform:rotate(-135deg) }
@media (prefers-reduced-motion:reduce){ .faq .chev{transition:none} }
.faq .q{ flex:1; min-width:0 }
.faq .a{ padding:0 0 22px 25px; max-width:66ch }
.faq .a a{ color:inherit; text-decoration:underline; text-decoration-color:var(--brass, #B78B45); text-underline-offset:3px }
.faq .a p{ margin:0 0 12px; font-size:14.5px; line-height:1.78; color:var(--cacao) }
.faq .a p:last-child{ margin-bottom:0 }
.faq .a strong{ color:var(--espresso); font-weight:500 }
.faq .a ul{ margin:0 0 12px }
.faq .a li{ font-size:14px }

/* ── closing contact band ──────────────────────────── */
.sign{ background:var(--espresso); padding-block:clamp(50px,6vw,78px) }
.sign-in{
  max-width:880px; margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.sign .eyebrow{ color:var(--brass-lt) }
.sign h3{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
  font-size:clamp(30px,4.6vw,44px); line-height:1.1; color:var(--bone);
  margin:16px 0 0; text-wrap:balance;
}
.sign p{ color:rgba(241,231,215,.82); max-width:56ch; margin-top:16px }
.sign .mail{
  display:block; margin-top:22px; color:var(--bone);
  font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(20px,2.6vw,26px);
  word-break:break-word;
}
.sign .foot{
  margin-top:34px; padding-top:18px; border-top:1px solid var(--rule-dk);
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  font-size:8.5px; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(241,231,215,.46);
}

/* keep the scaled deck sane on very wide displays */
.deck{ max-width:1760px; margin:0 auto }

/* panel tone: stops the page ground showing as a seam between slides */
.panel[data-tone~="dark"],
.panel[data-tone~="on-dark"]{ background:var(--espresso) }
.panel[data-tone~="bone"]{ background:var(--bone) }
.panel[data-tone="paper"]{ background:var(--paper) }
@media (max-width:859.98px){
  .s.on-dark,.s.dark{ background:var(--espresso) }
}