/* Layout · Editorial (round 33): the page reads like a magazine. Left-aligned, every section numbered (01, 02…) under
   a heavy rule, timetables ruled like a contents page, venues as text blocks, no boxes or rounded cards. On wide
   screens the heading sits in its own column and stays put while the section scrolls. Any design can wear it: colours
   and fonts stay the design's (--ink, --accent, --display…). Loaded after the design's CSS. */
html.l-editorial { --ed-rule: color-mix(in srgb, var(--ink) 16%, transparent); }
html.l-editorial .inv { counter-reset: ed; }
html.l-editorial .inv > .s:not(.s-hero):not(.s-photo):not(.s-closing) { counter-increment: ed; padding: 60px var(--gutter) 52px; text-align: left; }

/* heading: big number, kicker, title */
html.l-editorial .inv .sh { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: end; text-align: left; margin-bottom: 30px; padding-top: 14px; border-top: 2px solid var(--ink); }
html.l-editorial .inv .sh > :not(.sh-k):not(.sh-t) { display: none; }
html.l-editorial .inv .sh::before { content: counter(ed, decimal-leading-zero); position: static; display: block; grid-row: 1 / span 2; align-self: start; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; transform: none; opacity: 1;
  font-family: var(--display); font-size: clamp(3.4rem, 17vw, 5rem); line-height: .78; letter-spacing: -.02em; color: var(--accent); }
html.l-editorial .inv .sh::after { content: none; display: none; }
html.l-editorial .inv .sh-k { grid-column: 2; margin: 0 0 6px; font-size: .7rem; letter-spacing: .26em; text-align: left; }
html.l-editorial .inv .sh-t { grid-column: 2; text-align: left; font-size: clamp(1.9rem, 7.6vw, 2.7rem); line-height: 1.02; }
html.l-editorial .inv .sh-t::before, html.l-editorial .inv .sh-t::after { content: none; display: none; }

/* buttons: square, small capitals */
html.l-editorial .inv .btn-line { border-radius: 0; min-height: 44px; padding: 10px 18px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; }

/* countdown: one big number, the rest small */
html.l-editorial .inv .cd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; text-align: left; padding-bottom: 18px; border-bottom: 1px solid var(--ed-rule); }
html.l-editorial .inv .cd-u { display: flex; flex-direction: column; padding: 0; border: 0; background: none; box-shadow: none; min-width: 0; }
html.l-editorial .inv .cd-u b { font-size: 1.7rem; line-height: 1; }
html.l-editorial .inv .cd-u:first-child { flex-basis: 100%; flex-direction: row; align-items: baseline; gap: 12px; }
html.l-editorial .inv .cd-u:first-child b { font-size: clamp(5rem, 28vw, 8rem); line-height: .85; letter-spacing: -.03em; color: var(--accent); }
html.l-editorial .inv .cd-u span { font-size: .66rem; letter-spacing: .2em; margin-top: 4px; }
html.l-editorial .inv .cd-done { text-align: left; }
html.l-editorial .inv .cal { justify-content: flex-start; margin-top: 20px; }

/* programme: a ruled timetable */
html.l-editorial .inv:not([class*="dz-s-"]) .tl { border-top: 1px solid var(--ed-rule); padding: 0; margin: 0; background: none; }
html.l-editorial .inv:not([class*="dz-s-"]) .tl::before, html.l-editorial .inv:not([class*="dz-s-"]) .tl::after { content: none; display: none; }
html.l-editorial .inv:not([class*="dz-s-"]) .tl-i { display: grid; grid-template-columns: 6.6em 1fr; gap: 14px; padding: 15px 0; margin: 0; border: 0; border-bottom: 1px solid var(--ed-rule); background: none; box-shadow: none; text-align: left; }
html.l-editorial .inv:not([class*="dz-s-"]) .tl-i::before, html.l-editorial .inv:not([class*="dz-s-"]) .tl-i::after, html.l-editorial .inv:not([class*="dz-s-"]) .tl-i .dz-dot { display: none; }
html.l-editorial .inv:not([class*="dz-s-"]) .tl-time { padding-top: 5px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-align: left; }
html.l-editorial .inv:not([class*="dz-s-"]) .tl-title { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }

/* venues & events & hotels: text blocks between rules */
html.l-editorial .inv .vn { display: grid; gap: 0; border-top: 1px solid var(--ed-rule); }
html.l-editorial .inv .vn-c { padding: 22px 0 24px; margin: 0; border: 0; border-bottom: 1px solid var(--ed-rule); border-radius: 0; background: none; box-shadow: none; text-align: left; transform: none; }
html.l-editorial .inv .vn-c::before, html.l-editorial .inv .vn-c::after { display: none; }
html.l-editorial .inv .vn-c > svg, html.l-editorial .inv .vn-c > .dz-mark { display: none; }
html.l-editorial .inv .vn-l { text-align: left; }
html.l-editorial .inv .vn-n { font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1.08; text-align: left; }
html.l-editorial .inv .vn-c .btn-line, html.l-editorial .inv .tr-acts .btn-line { min-height: 44px; padding: 8px 0; margin-right: 18px; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--ink); }
html.l-editorial .inv .vn-c .btn-line::after { content: " →"; white-space: pre; }

/* people: two columns of small-caps headings */
html.l-editorial .inv .pp-intro, html.l-editorial .inv .pp-l, html.l-editorial .inv .pp-h { text-align: left; }
html.l-editorial .inv .pp { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
html.l-editorial .inv .pp-g { padding: 0; border: 0; background: none; box-shadow: none; }
html.l-editorial .inv .pp-h { font-family: var(--text); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--ed-rule); }
html.l-editorial .inv .pp-l li { padding: 2px 0; }
html.l-editorial .inv .bio { justify-content: start; text-align: left; }
html.l-editorial .inv .bio-c { justify-items: start; }
html.l-editorial .inv .bio-ph { border-radius: 0; width: min(132px, 36vw); aspect-ratio: 4 / 5; }
html.l-editorial .inv .bio-ph .ph-slot { border-radius: 0; }

/* story: a drop cap, the timeline in the margin */
html.l-editorial .inv .story-body { text-align: left; }
html.l-editorial .inv .story-body p:first-child::first-letter { float: left; margin: 4px 10px 0 0; font-family: var(--display); font-size: 4.3em; line-height: .78; color: var(--accent); }
html.l-editorial .inv .miles li { text-align: left; }
html.l-editorial .inv .tml { margin-left: 0; padding-left: 0; }
html.l-editorial .inv .tml::before, html.l-editorial .inv .tml-dot { display: none; }
html.l-editorial .inv .tml-i { padding: 18px 0 20px; border-top: 1px solid var(--ed-rule); text-align: left; }
html.l-editorial .inv .tml-img, html.l-editorial .inv .tml-img img, html.l-editorial .inv .tml-img .ph-slot { border-radius: 0; }

/* dress code & gifts & questions: square corners */
html.l-editorial .inv .dr-roles { margin-left: 0; }
html.l-editorial .inv .dr-roles > div, html.l-editorial .inv .gl-it, html.l-editorial .inv .gl-c, html.l-editorial .inv .rs-done { border-radius: 0; box-shadow: none; }
html.l-editorial .inv .dr-text, html.l-editorial .inv .dr-note, html.l-editorial .inv .s-dress .sw { text-align: left; justify-content: flex-start; }
html.l-editorial .inv .faq { border-top: 1px solid var(--ed-rule); }
html.l-editorial .inv .faq summary { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }

/* gallery: one wide, two tall, repeat */
html.l-editorial .inv .gal { grid-template-columns: repeat(6, 1fr); gap: 8px; }
html.l-editorial .inv .gal-i { grid-column: span 3; }
html.l-editorial .inv .gal-i:nth-child(3n+1) { grid-column: 1 / -1; }
html.l-editorial .inv .gal-i:nth-child(3n+1) .gal-f, html.l-editorial .inv .gal-i:nth-child(3n+1) img { aspect-ratio: 3 / 2; }
html.l-editorial .inv .gal-i img, html.l-editorial .inv .gal-f, html.l-editorial .inv .gal-ph { border-radius: 0; }
html.l-editorial .inv .gal-i figcaption { text-align: left; }

/* reply: underlined fields, a square button */
html.l-editorial .inv .rs-by { text-align: left; }
html.l-editorial .inv .rs { padding: 22px 0 0; border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: none; box-shadow: none; }
html.l-editorial .inv .f-in { padding-left: 0; padding-right: 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; }
html.l-editorial .inv .f-in:focus { box-shadow: 0 2px 0 var(--accent); }
html.l-editorial .inv .ch span { border-radius: 0; }
html.l-editorial .inv .rs-btn { border-radius: 0; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; }

/* wide screens: heading in its own column, sticky */
@media (min-width: 900px) {
  html.l-editorial .inv > .s:not(.s-hero):not(.s-photo):not(.s-closing) { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 64px; max-width: 1080px; margin: 0 auto; padding: 80px 40px; align-items: start; }
  html.l-editorial .inv > .s:not(.s-hero):not(.s-photo):not(.s-closing) > * { grid-column: 2; max-width: 640px; margin-left: 0; margin-right: 0; }
  html.l-editorial .inv > .s:not(.s-hero):not(.s-photo):not(.s-closing) > .sh { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 28px; grid-template-columns: 1fr; margin: 0; }
  html.l-editorial .inv > .s > .sh::before, html.l-editorial .inv > .s > .sh .sh-k, html.l-editorial .inv > .s > .sh .sh-t { grid-column: 1; grid-row: auto; }
  html.l-editorial .inv > .s > .sh::before { margin-bottom: 14px; }
  html.l-editorial .inv > .s.has-sp > .sp { grid-column: 1 / -1; }
}

html.l-editorial .inv:not([class*="dz-s-"]) .tl-i > .tl-time { grid-column: 1; grid-row: 1; order: 0; }
html.l-editorial .inv:not([class*="dz-s-"]) .tl-i > .tl-body { grid-column: 2; grid-row: 1; order: 0; }

html.l-editorial .inv .vn-c .dz-pin, html.l-editorial .inv .vn-c .dz-tab { display: none; }

/* the design may colour its countdown digits for its own boxes; the layout's countdown has none */
html.l-editorial .inv .cd-u b { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; text-shadow: none; }
html.l-editorial .inv .cd-u span { color: var(--muted); }
html.l-editorial .inv .cd { background: none; border: 0; box-shadow: none; }

html.l-editorial .inv .vn-c :is(.vn-n, .vn-a, .vn-t), html.l-editorial .inv:not([class*="dz-s-"]) .tl-title, html.l-editorial .inv .pp-l { color: var(--ink); -webkit-text-fill-color: currentColor; }
html.l-editorial .inv .vn-c :is(.vn-a, .vn-t, .vn-note) { color: var(--muted); }