/* La Vita Nova · refresh.css (Oct 2026)
   A calmer, more consistent finish on top of style.css and lift.css.
   Loaded last on every page. Nothing here changes colours or typefaces. */

/* 1. Header: one clean line. The second row of labels under the menu is gone. */
header .metarow{display:none}

/* 2. One headline style. Display headings set in Cormorant read in sentence
   case, as the Sundays page already does, instead of switching between
   capitals and sentence case from page to page. Small sans labels keep their
   capitals. */
.phead h1,.ph-lead h1,.article h1,.article h2,.wo-hero h1,.annc-say h2,
.duo h3,.cta h3,.steps .s,.ben h3,.tr h3,.frontdoor h1,.hero h1{
  text-transform:none;letter-spacing:-.005em}
.ph-lead h1,.phead h1,.wo-hero h1,.frontdoor h1,.article h1{font-weight:500;line-height:1.02}
.article h2{font-weight:500}
.duo h3,.cta h3,.annc-say h2,.ben h3,.tr h3{font-weight:500;line-height:1.08}

/* 4. Sundays on a phone: the headline sits on a busy photograph, so it gets a
   deeper shade underneath and a slightly smaller paragraph. */
@media (max-width:760px){
  .cx-hero::after{background:linear-gradient(180deg,rgba(20,17,12,.25) 0%,rgba(20,17,12,.55) 40%,rgba(20,17,12,.82) 100%)!important}
  .cx-hero p{font-size:16px!important;margin:16px 0 24px!important}
}

/* 5. Question lists use the full width of the page on a laptop, rather than
   stopping halfway across. */
@media (min-width:1025px){
  .faq,.qa,.cx-faq{max-width:none}
}

/* 6. Tighter spacing on What's on: the gap between the featured Sunday and
   the calendar, and above the page title, was close to a full screen on a
   phone. */
.v2 main > section.band:first-child{padding-top:64px}
.v2 main > section.band:first-child .phead{padding-top:0}
.v2 #calendar.band--air{padding-top:40px}
@media (max-width:760px){
  .v2 main > section.band:first-child{padding-top:36px}
  .v2 #calendar.band--air{padding-top:24px;padding-bottom:64px}
  .wo-feature{gap:22px}
}

/* 7. Feature headings in the same sentence case as the rest of the site */
.feat h3{text-transform:none;letter-spacing:-.005em}

/* 8. "Show all dates" under a long calendar */
.ev-list.is-clipped .ev-extra{display:none!important}
.ev-more{margin-top:26px;cursor:pointer;background:transparent}
.p-whatson .wo-feature{margin-bottom:0}
.p-whatson section.band:has(> .wrap > .wo-feature){padding-bottom:48px}
@media (max-width:760px){.p-whatson section.band:has(> .wrap > .wo-feature){padding-bottom:28px}}

/* 9. Phone: event cards on the homepage become one tidy swipeable row
   instead of two cramped columns. */
@media (max-width:760px){
  .ev-scroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .ev-scroll::-webkit-scrollbar{display:none}
  .ev-scroll > .ev-card{flex:0 0 76%;scroll-snap-align:start}
  .ev-card:hover{transform:none;box-shadow:none}
  .ev-card .cbody{padding:14px 16px 16px;gap:6px}
  .ev-card h4{font-size:22px;line-height:1.1}
  .ev-card .ctag{font-size:11px}
  .ev-card .cbook{margin-top:10px}
}

/* 10. Phone: the What's on calendar reads as a clean list. Square picture,
   date, name, one line about it, then the price and the booking link on a
   single line. */
@media (max-width:760px){
  .ev-row,.v2 .ev-row{grid-template-columns:72px 1fr;column-gap:14px;row-gap:2px;align-items:start;padding:18px 0}
  .ev-row:hover{padding-left:0}
  .ev-thumb{grid-row:1/4;aspect-ratio:1/1;margin-top:2px;border:0}
  .ev-date{grid-column:2;grid-row:1;font-size:11px;letter-spacing:.12em;color:var(--muted)}
  .ev-date b{display:inline;font-family:inherit;font-weight:500;font-size:11px;letter-spacing:.12em;margin:0 3px;color:var(--muted)}
  .ev-main{grid-column:2;grid-row:2}
  .ev-main .t{font-family:var(--disp);font-weight:500;font-size:20px;line-height:1.15;letter-spacing:0}
  .ev-main .m{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;line-height:1.45;color:var(--muted);margin-top:4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ev-acts,.v2 .ev-acts{grid-column:2;grid-row:3;flex-direction:row-reverse;justify-content:space-between;align-items:center;
    justify-self:stretch;margin-top:10px;gap:10px;flex-wrap:nowrap}
  .ev-go,.v2 .ev-go{font-size:11px;letter-spacing:.1em;padding:0 0 2px;background:none;color:var(--ink);border-bottom:1px solid var(--ink);white-space:nowrap}
  .ev-see{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted);white-space:normal}
  .ev-book{grid-column:2;grid-row:3;margin-top:10px;font-size:11px}
  .ev-badge{margin-bottom:4px}
}
.wo-feature .fe-media img[src*="story-home"]{object-position:center 18%}
.wo-feature .fe-media img[src*="story-wild"]{object-position:center 40%}

/* 11. Phone polish across the site */
@media (max-width:760px){
  /* newsletter: input and button share one full-width line */
  .subwrap{max-width:none;width:100%}
  .subwrap input{min-width:0}
  .subwrap button{white-space:nowrap;padding:0 16px}

  /* homepage "Coming up" label and the summer note stack neatly */
  .wo-strip-head{flex-direction:column;align-items:flex-start;gap:6px}
  .wo-strip-head .r{text-align:left!important}

  /* featured facts: one per line, no dividers left hanging */
  .wo-feature .fe-specs{flex-direction:column;align-items:flex-start;gap:4px}
  .wo-feature .fe-specs li::after{display:none!important}

  /* hire page facts under the photo: one per line */
  .specline{flex-direction:column;align-items:flex-start;gap:6px;font-size:12px}
  .specline span::after{display:none!important}

  /* hire page rooms: swipe sideways instead of five full-height cards */
  .rooms{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;background:none;border:0;
    margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .rooms::-webkit-scrollbar{display:none}
  .rooms > .room{flex:0 0 78%;scroll-snap-align:start;border:1px solid var(--line)}
  .rooms .room h3{font-size:17px}

  /* Sundays: class pictures a little shorter so the details come sooner */
  .cx-card .ph{aspect-ratio:4/3}
  .cx-card .ph.ill img{width:42%}
  .cx-sec.alt[style*="padding:90px"]{padding:48px 0!important}
}

/* 12. Phone and consistency pass */
/* headings that still switched to capitals or a bold sans */
.book-panel h3{font-family:var(--disp);font-weight:500;text-transform:none;letter-spacing:-.005em;line-height:1.1}
.v2 .door h3{font-family:var(--disp);font-weight:500;font-size:var(--t-d4);line-height:1.08;letter-spacing:var(--ls-tight);text-transform:none;margin:12px 0 10px}

/* event pages: date, level and price sit right under the introduction */
.article .ev-facts{margin-top:28px;font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:var(--ink)}
@media (max-width:760px){.article .ev-facts{gap:8px;padding-top:18px}}

@media (max-width:760px){
  /* repeated illustrations are shown once on a phone */
  .m-hide{display:none!important}

  /* portfolio wall and exhibition photos: swipe sideways instead of a very long scroll */
  .gx{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .gx::-webkit-scrollbar,.gallery::-webkit-scrollbar{display:none}
  .gx > .gx-f{flex:0 0 62%;scroll-snap-align:start}
  .gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .gallery > .plate,.gallery > .plate.wide,.gallery > .plate.wide.nearsq{flex:0 0 78%;aspect-ratio:4/5;scroll-snap-align:start;margin:0}

  /* file pickers on the exhibit form */
  input[type=file]{font-size:13px;color:var(--muted);padding:10px 12px}
  input[type=file]::file-selector-button{font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
    background:transparent;border:1px solid var(--ink);padding:8px 12px;margin-right:12px;border-radius:0;cursor:pointer}
}


/* 13. Design principles pass (consistency, Fitts's law, emphasis)
   One type scale. Display headings snap to four steps instead of drifting
   between near-identical sizes from page to page:
     section  60 desktop / 34 phone
     feature  46 / 27
     card     31 / 22
     small    26 / 22                                                     */
html body .cx-h,html body .cx-end h2{font-size:clamp(34px,4.2vw,60px)}
html body .guide-h,html body .article h2{font-size:clamp(27px,3.2vw,46px)}
html body :is(.door h3,.door h4,.hire-way h3,.pbody h3,.pg-sub h3,.bd h3,.cx-card h3,.book-panel h3){font-size:clamp(22px,2.2vw,31px)}
html body :is(.jcard h3,.ch-h h3,.ch-m h3,.wstage h3,.pg-pass h3,.cbody h4,.ev-card h4,.cx-card h4,.member .wall h3){font-size:clamp(22px,1.8vw,26px)}
/* card headings that were set in the sans or in capitals now match the rest */
html body :is(.duo-card h3,.rooms .room h3){font-family:var(--disp);font-weight:500;text-transform:none;letter-spacing:-.005em;font-size:clamp(22px,2.2vw,31px);line-height:1.1}
html body .esec > h2{font-family:var(--disp);font-weight:500;font-size:clamp(27px,2.2vw,31px);letter-spacing:-.005em;text-transform:none}

/* Buttons keep to one height on a laptop; a label never breaks onto two lines */
@media (min-width:761px){.btn{white-space:nowrap}}

/* Fitts's law: small text links get a 44px-tall tap area on a phone without
   moving anything on the page */
@media (max-width:760px){
  .ev-go,.shead .r,.shead a,.more,.link,.cx-card .book,.cx-card .pass a,.cx-links a,.sd-more,.ev-see a,.pg-card a:not(.btn),header .wm{position:relative}
  .ev-go::before,.shead .r::before,.shead a::before,.more::before,.link::before,.cx-card .book::before,.cx-card .pass a::before,.cx-links a::before,.ev-see a::before,header .wm::before{
    content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .faq summary,.cx-faq summary,.qa summary{min-height:48px;display:flex;align-items:center}
  .ev-filters button{min-height:44px}
}

/* 14. Package pages (private events, Christmas, Pilates, kids parties) */
.tier .tu{font-family:var(--sans);font-size:13px;letter-spacing:.02em;color:var(--muted);font-weight:400}
.addons{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.addons > div{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px 0;border-bottom:1px solid var(--line)}
.addons > div + div{padding-left:24px;border-left:1px solid var(--line)}
.addons .t{font-family:var(--disp);font-weight:500;font-size:clamp(22px,1.8vw,26px);line-height:1.1}
.addons .d{font-size:var(--t-small);color:var(--ink2);line-height:1.55}
.addons .p{margin-top:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.rels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rels .rel{display:flex;flex-direction:column;gap:10px;padding:22px 22px 26px;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s}
.rels .rel:hover{border-color:var(--ink)}
.rels .rel .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rels .rel .t{font-family:var(--disp);font-weight:500;font-size:clamp(22px,1.8vw,26px);line-height:1.1}
.rels .rel .t::after{content:" \2192";font-family:var(--sans);font-size:.7em}
@media (max-width:860px){
  .addons{grid-template-columns:1fr}
  .addons > div + div{padding-left:0;border-left:0}
  .rels{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.rels{grid-template-columns:1fr}}

/* 15. Whole-site polish, Oct 2026
   Same tokens as everything above: no new colour, size or typeface. */

/* Every small uppercase line on the site is now the one sans label. A few
   were still set in the display serif at 12 to 13px, where its thin strokes
   fade, most of all on the dark bands. */
html body :is(.specline,.annc-meta,.feat .meta,.pstrip .meta,.bk-eye){
  font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.band--ink .feat .meta{color:#a49c88}

/* Prices, dates and times read at full height in the serif too, so $320
   sits level with $600 instead of dipping below the line. */
html{font-variant-numeric:lining-nums}

/* Headings break into even lines rather than leaving one word hanging
   (What's on at La Vita / Nova), and paragraphs avoid a lone last word. */
h1,h2,h3,h4{text-wrap:balance}
p,li,dd{text-wrap:pretty}
/* the arrow on a link card stays with the last word */
.rels .rel .t::after{content:"\00a0\2192"}
.rels .rel .t,.ch-h h3,.pg-pass h3{text-wrap:balance}

/* Footer: the sign-up button keeps its words on one line, and the small
   print sits on one level either side of the rule */
.subwrap button{white-space:nowrap}
.subwrap input{min-width:0}
.fbase{align-items:center}

/* Dash markers centred on the first line of text, whatever its size */
.stack-lbl li::before{top:calc(12px + .75em)}

/* Team on a phone: the bio starts on the same line as the name above it */
@media(max-width:620px){
  html body .member .wall{padding-left:16px;padding-right:16px}
  html body .member p,html body .member:first-child p,html body .member:last-child p{padding-left:16px;padding-right:16px}
}

/* Workshop pages: five pictures, the first one large, so the grid closes up */
.sgal .plate:first-child{grid-row:span 2;aspect-ratio:auto}
@media(max-width:900px){
  .sgal .plate:first-child{grid-row:auto;grid-column:1 / -1;aspect-ratio:4/3}
}