/* news-event / magazine-cover
   The event made the cover story of a glossy magazine. The first screen IS the cover:
   the hero art full-bleed, the name as a towering Didone masthead, the issue line
   (the brief's newest month, "The <name> issue", ticker and network), the headline as
   the main cover line with its deck, the sections as "Inside" cover lines, a roundel
   and a barcode drawn from the contract address. Turn the page and the brief becomes
   the inside spreads: the feature story beside its opening photograph (scene-1), then
   pages paired into two-page spreads with a fold, folios and running heads; the post
   as a quote page, the timeline hour by hour, reactions as pull quotes, a photo essay,
   an interview Q&A and the back page. White glossy type on the photo, black on paper. */

:root {
  --mc-paper: #fbf9f4;
  --mc-ink: #121212;
  --mc-ink-2: #4a4845;
  --mc-rule: rgb(18 18 18 / 0.14);
  --mc-didone: "Didot", "Bodoni 72", "Bodoni MT", "Bodoni Moda", "Playfair Display", "Libre Bodoni", "Noto Serif Display", "Liberation Serif", "Times New Roman", serif;
  --mc-serif: Georgia, "Iowan Old Style", "Charter", "Bitstream Charter", "Liberation Serif", "Times New Roman", serif;
  --mc-sans: "Futura", "Futura PT", "Avenir Next", "Helvetica Neue", "Segoe UI", "Liberation Sans", Arial, sans-serif;

  --v-bg: #e9e6df;
  --v-fg: var(--mc-ink);
  --v-soft: var(--mc-ink-2);
  --v-faint: #8a8781;
  --v-line: var(--mc-rule);
  --v-line-strong: rgb(18 18 18 / 0.3);
  --v-surface: #f3f0e9;
  --v-surface-2: #e8e3d9;
  --v-card-bg: var(--mc-paper);
  --v-accent: var(--wl-accent);
  --v-accent-text: var(--wl-accent-on-light);
  --v-on-accent: var(--wl-on-accent);
  --v-secondary: var(--wl-secondary);
  --v-seg-1: var(--wl-accent);
  --v-seg-2: var(--mc-ink);
  --v-seg-3: var(--wl-secondary);
  --v-seg-4: #b9b3a7;
  --v-seg-5: color-mix(in srgb, var(--wl-accent) 45%, #fff);
  --v-seg-6: #6d6a64;
  --v-font-body: var(--mc-serif);
  --v-font-display: var(--mc-didone);
  --v-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --v-display-weight: 700;
  --v-display-tracking: -0.02em;
  --v-display-case: none;
  --v-display-lh: 0.98;
  --v-title-size: clamp(2.3rem, 4.6vw, 4.2rem);
  --v-body-size: clamp(1.02rem, 0.3vw + 0.96rem, 1.12rem);
  --v-radius: 0px;
  --v-radius-sm: 0px;
  --v-radius-lg: 0px;
  --v-border: 1px solid var(--mc-rule);
  --v-shadow: none;
  --v-card-pad: 20px;
  --v-maxw: none;
  --v-pad-x: clamp(16px, 4vw, 52px);
  --v-sec-gap: 0px;
  --v-ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  --wl-label-lore: "Cover story";
  --wl-label-features: "The guide";
  --wl-label-supply: "By the numbers";
  --wl-label-flow: "How it works";
  --wl-label-timeline: "Hour by hour";
  --wl-label-comparison: "Compared";
  --wl-label-stats: "By the numbers";
  --wl-label-tweet: "The post";
  --wl-label-gallery: "Photo essay";
  --wl-label-facts: "Fact file";
  --wl-label-quotes: "Overheard";
  --wl-label-faq: "Q&A";
  --wl-label-access: "Back page";
}

html { background: var(--v-bg); }
body { background: var(--v-bg); color: var(--mc-ink); }
::selection { background: var(--wl-accent); color: var(--wl-on-accent); }

/* ------------------------------------------------------------ the bar (after the cover) */
.mc-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 54px;
  display: flex; align-items: center; gap: 22px;
  padding: 0 var(--v-pad-x);
  background: rgb(251 249 244 / 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mc-rule);
  transform: translateY(-101%);
  transition: transform 0.35s var(--v-ease);
}
.mc-past-cover .mc-bar { transform: none; }
.mc-bar__name { flex: none; font-family: var(--mc-didone); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; text-transform: uppercase; color: var(--mc-ink); text-decoration: none; }
.mc-bar__nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mc-bar__nav::-webkit-scrollbar { display: none; }
.mc-bar__nav .wl-nav__link { flex: none; padding: 6px 10px; font-family: var(--mc-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mc-ink-2); text-decoration: none; white-space: nowrap; }
.mc-bar__nav .wl-nav__link:hover, .mc-bar__nav .wl-nav__link.is-active { color: var(--wl-accent-on-light); }
.mc-bar__cta { margin-left: auto; display: flex; flex: none; }
.mc-bar__cta .wl-btn:not(.wl-btn--primary) { display: none; }
.mc-bar__cta .wl-btn { padding: 8px 14px; border-radius: 0; font-family: var(--mc-sans); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mc-bar__cta .wl-btn__ca { display: none; }

/* ------------------------------------------------------------ the cover */
.mc-cover {
  position: relative;
  height: 100vh; height: 100svh; min-height: 640px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, var(--wl-accent), color-mix(in srgb, var(--wl-secondary) 60%, #000));
  isolation: isolate;
}
.mc-cover__photo { position: absolute; inset: 0; z-index: -2; }
.mc-cover__photo .wl-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.mc-cover__photo.wl-media--post { display: grid; place-items: center; padding: 20vh 20vw 10vh; }
.mc-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.12) 32%, transparent 48%),
    radial-gradient(90% 70% at 0% 100%, rgb(0 0 0 / 0.62), transparent 62%),
    radial-gradient(50% 60% at 100% 70%, rgb(0 0 0 / 0.38), transparent 70%);
}
/* the gloss: a soft sheen across the paper */
.mc-cover__gloss { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.1) 42%, transparent 52%, transparent 70%, rgb(255 255 255 / 0.06) 78%, transparent 86%); }

.mc-issue {
  position: absolute; left: var(--v-pad-x); right: var(--v-pad-x); top: 16px; margin: 0;
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--mc-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.4);
}
.mc-issue__title { font-family: var(--mc-didone); font-style: italic; font-weight: 400; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: none; }

.mc-mast {
  position: absolute; left: var(--v-pad-x); right: var(--v-pad-x); top: 30px; margin: 0;
  font-family: var(--mc-didone); font-weight: 700;
  font-size: min(15.5rem, 20vw, 30vh); line-height: 0.84; letter-spacing: -0.035em;
  text-transform: uppercase; text-align: center;
  color: #fff;
  text-shadow: 0 4px 30px rgb(0 0 0 / 0.25);
}

.mc-lines {
  position: absolute; left: var(--v-pad-x); bottom: clamp(28px, 6vh, 56px);
  width: min(600px, 48%);
  display: grid; gap: 12px;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}
.mc-lines__kicker { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--mc-sans); font-size: 0.86rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; }
.mc-lines__kicker::before { content: ""; flex: none; width: 34px; height: 6px; background: var(--wl-secondary); }
.mc-lines__headline {
  margin: 0;
  font-family: var(--mc-sans); font-weight: 800;
  font-size: clamp(2.1rem, 3.9vw, 3.6rem); line-height: 0.96; letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
.mc-lines__deck { margin: 0; max-width: 32rem; font-family: var(--mc-didone); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.3; }
.mc-lines__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; text-shadow: none; }
.mc-lines__cta .wl-btn { padding: 10px 16px; border: 1.5px solid #fff; border-radius: 0; color: #fff; font-family: var(--mc-sans); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.mc-lines__cta .wl-btn:hover { background: #fff; color: var(--mc-ink); border-color: #fff; }
.mc-lines__cta .wl-btn--primary { background: #fff; color: var(--mc-ink); border-color: #fff; }
.mc-lines__cta .wl-btn--primary:hover { background: var(--wl-accent); border-color: var(--wl-accent); color: var(--wl-on-accent); box-shadow: none; }
.mc-lines__cta .wl-btn__ca { font-size: 0.86em; }

.mc-inside {
  position: absolute; right: var(--v-pad-x); bottom: clamp(132px, 19vh, 160px);
  width: min(300px, 30%);
  text-align: right;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.5);
}
.mc-inside__label { margin: 0 0 10px; font-family: var(--mc-didone); font-style: italic; font-size: 1.3rem; color: #fff; }
.mc-inside__list { display: grid; gap: 10px; counter-reset: mc-line; }
.mc-inside__list .wl-nav__link {
  counter-increment: mc-line;
  display: block; color: #fff; text-decoration: none;
  font-family: var(--mc-sans); font-size: 0.98rem; font-weight: 800; line-height: 1.12; letter-spacing: 0.02em; text-transform: uppercase;
}
.mc-inside__list .wl-nav__link::before { content: counter(mc-line, decimal-leading-zero); display: block; margin-bottom: 1px; font-family: var(--mc-didone); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.1em; color: rgb(255 255 255 / 0.72); }
.mc-inside__list .wl-nav__link:hover { color: var(--wl-accent-on-dark); }
.mc-inside__list .wl-nav__link:nth-child(n+5) { display: none; }

.mc-roundel {
  position: absolute; right: calc(var(--v-pad-x) + 16px); top: calc(min(15.5rem, 20vw, 30vh) * 0.84 + 44px);
  width: 136px; height: 136px; margin: 0; padding: 16px;
  display: grid; place-content: center; gap: 4px; text-align: center;
  border-radius: 50%;
  background: var(--wl-secondary); color: var(--wl-on-secondary);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6);
  rotate: -9deg;
  font-family: var(--mc-sans);
}
.mc-roundel__tick { font-weight: 900; font-size: 1.28rem; letter-spacing: -0.01em; line-height: 1; overflow-wrap: anywhere; }
.mc-roundel__slogan { font-family: var(--mc-didone); font-style: italic; font-size: 0.86rem; line-height: 1.15; }

.mc-code { position: absolute; right: var(--v-pad-x); bottom: clamp(24px, 5vh, 44px); padding: 8px 10px 6px; background: #fff; color: #000; box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.6); }
.mc-code__bars { display: block; padding: 0; border: 0; background: none; cursor: copy; }
.mc-code__bars svg { display: block; width: 168px; height: 54px; }
.mc-code__bars rect { fill: #000; }
.mc-code__num { margin: 3px 0 0; display: flex; justify-content: space-between; gap: 8px; font-family: var(--v-font-mono); font-size: 0.66rem; letter-spacing: 0.04em; }
.mc-code__label { font-family: var(--mc-sans); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.mc-code.mc-copied .mc-code__label::after { content: " \2713"; }

/* ------------------------------------------------------------ inside: the feature spread */
.mc-feature, .mc-spread {
  position: relative;
  max-width: 1240px; margin: clamp(40px, 7vw, 90px) auto 0;
  width: calc(100% - 2 * var(--v-pad-x));
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--mc-paper);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 30px 60px -30px rgb(0 0 0 / 0.45);
}
/* the fold */
.mc-feature::after, .mc-spread::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 90px; margin-left: -45px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.05) 40%, rgb(0 0 0 / 0.16) 50%, rgb(255 255 255 / 0.4) 51%, rgb(0 0 0 / 0.04) 60%, transparent);
}
.mc-feature:not(:has(.wl-sec)) { display: none; }
.mc-feature__photo { position: relative; margin: 0; min-height: 640px; overflow: hidden; background: var(--v-surface-2); }
.mc-feature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-feature__cap { position: absolute; left: 28px; right: 28px; bottom: 22px; font-family: var(--mc-sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); }
.mc-feature__photo:not(:has(img)) { display: none; }
.mc-feature:not(:has(.mc-feature__img)) { grid-template-columns: 1fr; }
.mc-feature__story .wl-sec { padding: clamp(40px, 5vw, 72px) clamp(28px, 4.4vw, 64px) 70px; }
.mc-feature__story .wl-sec__title { font-size: clamp(2.6rem, 4.8vw, 4.6rem); line-height: 0.94; }
.mc-feature__story .wl-lore__lead::first-letter {
  float: left; margin: 0.06em 0.1em 0 0;
  font-family: var(--mc-didone); font-weight: 700; font-size: 4.2em; line-height: 0.78;
  color: var(--wl-accent-on-light);
}

/* ------------------------------------------------------------ inside: the pages */
.mc-spreads { padding: 0 var(--v-pad-x) clamp(60px, 8vw, 110px); }
.mc-spreads > .wl-sec { max-width: 1240px; margin: clamp(40px, 7vw, 90px) auto 0; background: var(--mc-paper); }
.mc-spread { width: auto; margin-left: auto; margin-right: auto; }
.mc-spread .wl-sec, .mc-spreads > .wl-sec { position: relative; padding: clamp(40px, 4.6vw, 64px) clamp(26px, 4.4vw, 60px) 76px; }
.mc-spread--full .wl-sec, .mc-spread--solo .wl-sec { grid-column: 1 / -1; }
.mc-spread--solo::after { content: none; }
.mc-spread--solo .wl-sec__body { columns: 2; column-gap: 70px; }
.mc-spread--solo .wl-sec__body > * { break-inside: avoid; }
.wl-sec__inner { max-width: none; }

/* running head and folio */
.mc-spreads .wl-sec::before, .mc-feature__story .wl-sec::before {
  content: attr(data-mc-run);
  position: absolute; top: 22px; left: clamp(26px, 4.4vw, 60px); right: clamp(26px, 4.4vw, 60px);
  padding-bottom: 8px; border-bottom: 1px solid var(--mc-rule);
  font-family: var(--mc-sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--v-faint);
}
.wl-kicker { margin: 0 0 14px; gap: 10px; font-family: var(--mc-sans); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.24em; color: var(--wl-accent-on-light); }
.wl-kicker .wl-ord {
  position: absolute; bottom: 26px; left: clamp(26px, 4.4vw, 60px);
  font-family: var(--mc-didone); font-size: 1rem; letter-spacing: 0.06em; opacity: 1; color: var(--mc-ink);
}
.mc-page--right .wl-kicker .wl-ord { left: auto; right: clamp(26px, 4.4vw, 60px); }
.wl-sec__head { margin-top: 18px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.wl-sec__title { text-wrap: balance; }

/* the feature text */
.wl-lore { max-width: 40rem; }
.wl-lore__lead { font-size: clamp(1.18rem, 1.5vw, 1.34rem); line-height: 1.55; font-weight: 400; }
.wl-lore__p { color: var(--mc-ink); line-height: 1.7; max-width: none; }

/* the post: a page in the brand colour, the words set as a quotation */
.mc-spreads .wl-sec--tweet { background: var(--wl-accent); color: var(--wl-on-accent); }
.mc-spreads .wl-sec--tweet::before, .mc-spreads .wl-sec--tweet .wl-kicker, .mc-spreads .wl-sec--tweet .wl-kicker .wl-ord { color: inherit; border-color: color-mix(in srgb, var(--wl-on-accent) 30%, transparent); }
.mc-spreads .wl-sec--tweet .wl-post { max-width: none; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; display: flex; flex-direction: column; }
.wl-sec--tweet .wl-post__text { order: -1; margin-bottom: 26px; font-family: var(--mc-didone); font-style: italic; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.16; letter-spacing: -0.01em; }
.wl-sec--tweet .wl-post__text::before { content: "\201C"; display: block; height: 0.5em; font-size: 2.6em; line-height: 0.8; font-style: normal; }
.wl-sec--tweet .wl-post__head { margin: 0 0 8px; }
.wl-sec--tweet .wl-post__avatar { width: 40px; height: 40px; }
.wl-sec--tweet .wl-post__avatar--initial { background: var(--wl-on-accent); color: var(--wl-accent); }
.wl-sec--tweet .wl-post__author { font-family: var(--mc-sans); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.86rem; }
.wl-sec--tweet .wl-post__handle, .wl-sec--tweet .wl-post__meta, .wl-sec--tweet .wl-post__brand { color: inherit; opacity: 0.85; }
.wl-sec--tweet .wl-post__meta { border-top-color: color-mix(in srgb, var(--wl-on-accent) 25%, transparent); font-family: var(--mc-sans); font-size: 0.8rem; }
.wl-sec--tweet .wl-post__link { color: inherit; }
.wl-sec--tweet .wl-sec__title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }

/* hour by hour */
.wl-milestones { max-width: none; gap: 0; }
.wl-milestones::before { content: none; }
.wl-ms { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; column-gap: 18px; row-gap: 4px; padding: 14px 0; border-top: 1px solid var(--mc-rule); }
.wl-ms__dot { display: none; }
.wl-ms__body { display: contents; }
.wl-ms__when { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-family: var(--mc-sans); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--v-faint); }
.mc-t__hm { display: block; font-family: var(--mc-didone); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--wl-accent-on-light); }
.wl-ms__title { grid-column: 2; margin: 0 0 3px; font-family: var(--mc-sans); font-size: 0.98rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.wl-ms__text { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.5; color: var(--mc-ink-2); }

/* overheard: pull quotes across the spread */
.wl-quotes { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0; }
.wl-quote { padding: 8px 28px 0 0; background: none; border: 0; border-radius: 0; }
.wl-quote + .wl-quote { padding-left: 28px; border-left: 1px solid var(--mc-rule); }
.wl-quote::before { position: static; display: block; height: 0.55em; font-family: var(--mc-didone); font-size: 5rem; line-height: 0.9; color: var(--wl-accent-on-light); }
.wl-quote__text { font-family: var(--mc-didone); font-style: italic; font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 400; line-height: 1.2; }
.wl-quote__who { font-family: var(--mc-sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mc-ink-2); }

/* the fact file */
.wl-facts { max-width: none; gap: 0; counter-reset: mc-fact; }
.wl-fact { counter-increment: mc-fact; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 0; border: 0; border-top: 1px solid var(--mc-rule); border-radius: 0; background: none; font-family: var(--mc-sans); font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.wl-fact__mark { width: 44px; height: auto; border-radius: 0; background: none; color: var(--wl-accent-on-light); font-family: var(--mc-didone); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.wl-fact__mark .wl-glyph { display: none; }
.wl-fact__mark::before { content: counter(mc-fact, decimal-leading-zero); }

/* the photo essay */
.wl-gallery { gap: 10px; }
.wl-gallery[data-count="3"] { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
.wl-gallery[data-count="3"] .wl-shot:first-child { grid-column: 1; grid-row: 1 / span 2; }
.wl-shot { border-radius: 0; background: none; overflow: visible; }
.wl-shot img { aspect-ratio: 3 / 2; }
.wl-gallery[data-count="3"] .wl-shot:first-child img { aspect-ratio: auto; height: calc(100% - 30px); }
.wl-shot:hover img { transform: none; }
.wl-shot__caption { position: static; margin-top: 8px; padding: 0; background: none; color: var(--mc-ink-2); backdrop-filter: none; font-family: var(--mc-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* the interview */
.wl-faq { max-width: none; gap: 0; }
.wl-qa { border: 0; border-top: 1px solid var(--mc-rule); border-radius: 0; background: none; }
.wl-qa__q { padding: 16px 0 8px; font-family: var(--mc-sans); font-size: 1rem; font-weight: 800; line-height: 1.35; }
.wl-qa__q > span:first-child::before { content: "Q. "; color: var(--wl-accent-on-light); }
.wl-qa__sign { display: none; }
.wl-qa__a { padding: 0 0 16px; font-size: 1.04rem; line-height: 1.6; color: var(--mc-ink); }
.wl-qa__a::before { content: "A. "; font-family: var(--mc-sans); font-weight: 800; color: var(--wl-accent-on-light); }

/* the back page */
.mc-spreads .wl-sec--access { background: var(--mc-ink); color: #fff; }
.mc-spreads .wl-sec--access::before { color: #9b978f; border-color: rgb(255 255 255 / 0.18); }
.wl-sec--access .wl-kicker, .wl-sec--access .wl-kicker .wl-ord { color: var(--wl-accent-on-dark); }
.wl-sec--access .wl-sec__title { color: #fff; }
.wl-access { max-width: none; gap: 18px; }
.wl-access__net { color: #b8b4ab; font-family: var(--mc-sans); letter-spacing: 0.2em; }
.wl-ca { border: 1px solid rgb(255 255 255 / 0.3); border-radius: 0; background: transparent; color: #fff; }
.wl-ca__label { color: #b8b4ab; font-family: var(--mc-sans); }
.wl-ca__value { font-size: clamp(0.76rem, 1.2vw, 0.92rem); }
.wl-copy { border-radius: 0; background: #fff; color: var(--mc-ink); font-family: var(--mc-sans); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.wl-copy:hover { background: var(--wl-accent); color: var(--wl-on-accent); }
.wl-link { border-radius: 0; font-family: var(--mc-sans); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.wl-sec--access .wl-link { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.3); }
.wl-sec--access .wl-link:hover { border-color: #fff; }

/* anything else a brief may bring */
.wl-features { grid-template-columns: minmax(0, 1fr); gap: 0; }
.wl-feature { padding: 18px 0; background: none; border: 0; border-top: 1px solid var(--mc-rule); border-radius: 0; }
.wl-feature:hover { transform: none; }
.wl-feature__icon { float: left; width: 52px; height: 52px; margin: 0 16px 0 0; border-radius: 50%; }
.wl-feature .wl-ord { position: static; float: right; font-family: var(--mc-didone); font-size: 1.1rem; color: var(--wl-accent-on-light); }
.wl-feature__title { font-family: var(--mc-sans); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.wl-stats { border-radius: 0; }
.wl-node__card { background: none; border-radius: 0; }
.wl-table-wrap { border-radius: 0; }

.mc-foot { max-width: 1240px; margin: 0 auto; padding: 0 var(--v-pad-x) 56px; font-family: var(--mc-sans); }
.mc-foot .wl-foot__name { font-family: var(--mc-didone); font-size: 1.5rem; text-transform: uppercase; }
.mc-foot .wl-link { background: transparent; }

/* ------------------------------------------------------------ motion */
.mc-cover__photo .wl-hero-img { animation: mc-settle 1.6s var(--v-ease) both; }
@keyframes mc-settle { from { transform: scale(1.06); filter: brightness(0.8); } }
.mc-mast { animation: mc-drop 1s var(--v-ease) 0.1s both; }
@keyframes mc-drop { from { opacity: 0; transform: translateY(-18px); letter-spacing: 0.02em; } }
.mc-lines__headline .wl-w { animation: mc-up 0.7s var(--v-ease) both; animation-delay: calc(var(--i, 0) * 50ms + 0.25s); }
@keyframes mc-up { from { opacity: 0; transform: translateY(0.35em); } }
.mc-roundel { animation: mc-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.6s both; }
@keyframes mc-pop { from { opacity: 0; scale: 0.6; } }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 980px) {
  .mc-inside { display: none; }
  .mc-lines { width: auto; right: var(--v-pad-x); bottom: 110px; }
  .mc-roundel { width: 118px; height: 118px; padding: 12px; top: auto; bottom: 46%; }
  .mc-roundel__tick { font-size: 1.05rem; }
  .mc-roundel__slogan { font-size: 0.72rem; }
  .mc-bar__nav { display: none; }
  .mc-feature, .mc-spread { grid-template-columns: minmax(0, 1fr); }
  .mc-feature::after, .mc-spread::after { content: none; }
  .mc-feature__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .mc-spread--solo .wl-sec__body { columns: 1; }
  .mc-page--right .wl-kicker .wl-ord { left: clamp(26px, 4.4vw, 60px); right: auto; }
  .mc-spread + .mc-spread, .mc-spread .wl-sec + .wl-sec { border-top: 1px solid var(--mc-rule); }
}
@media (max-width: 640px) {
  .mc-issue { font-size: 0.6rem; letter-spacing: 0.16em; }
  .mc-issue__title { display: none; }
  .mc-mast { top: 34px; font-size: 26vw; }
  .mc-lines { bottom: 96px; gap: 10px; }
  .mc-lines__headline { font-size: 2rem; }
  .mc-lines__deck { font-size: 1.02rem; }
  .mc-lines__cta .wl-btn { padding: 8px 12px; font-size: 0.7rem; }
  .mc-roundel { display: none; }
  .mc-code { right: 16px; bottom: 16px; padding: 5px 7px 4px; }
  .mc-code__bars svg { width: 120px; height: 34px; }
  .mc-code__label { display: none; }
  .mc-spreads { padding: 0 8px 60px; }
  .mc-feature { width: calc(100% - 16px); margin: 24px 8px 0; }
  .mc-cover::before { background: linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, transparent 26%, transparent 38%, rgb(0 0 0 / 0.55) 56%, rgb(0 0 0 / 0.86) 100%); }
  .mc-lines__kicker { color: #fff; }
  .wl-quote + .wl-quote { padding-left: 0; border-left: 0; border-top: 1px solid var(--mc-rule); padding-top: 18px; }
  .wl-gallery[data-count="3"] { grid-template-columns: minmax(0, 1fr); }
  .wl-gallery[data-count="3"] .wl-shot:first-child { grid-row: auto; }
  .wl-gallery[data-count="3"] .wl-shot:first-child img { aspect-ratio: 3 / 2; height: auto; }
}