/* Blocks (blueprint/blocks.js): a page in another site's own section sequence. Sizes are the ones
   measured on that site (WatchHouse at 1440 and 390 wide), set against the page's own width.
   Design variables (colour, fonts, gutters, headline sizes) come from the base design as everywhere. */

/* The design sets its measured sizes on the page's children (.bp > *), so the block sizes live there too. */
.bp.is-blocks > * {
  --g: var(--bp-pad-x, 20px);          /* side margin: 20, 10 on phones */
  --gap: 32px;                         /* between the three columns */
  --col: calc((100cqi - 2 * var(--g) - 2 * var(--gap)) / 3);
  --t-xl: var(--bp-h1-size, 48px);     /* first-screen title */
  --t-l: var(--bp-h2-size, 36px);      /* section titles, the statement */
  --t-m: 28px;                         /* a statement in a band */
  --t-s: 18px;                         /* labels, product names */
  --t-b: 14px;                         /* text */
  --t-x: 13px;                         /* facts */
  --t-c: 11px;                         /* caps actions */
  --cream: #f8f2de;
}
.bp.is-blocks { font-size: 14px; line-height: 1.17; font-weight: 300; text-align: start; }
@container bp (max-width: 960px) { .bp.is-blocks > * { --t-m: 20px; } }
@container bp (max-width: 746px) { .bp.is-blocks > * { --t-s: 14px; --gap: 10px; } }
.bp.is-blocks h1, .bp.is-blocks h2, .bp.is-blocks h3, .bp.is-blocks h4 { text-wrap: pretty; }
.bp.is-blocks :is(.bk-label, .bk-title, .bk-big, .bk-mid, .bk-small-t, .bk-prod-t, .bk-slide-t, .bk-slide-c, .bk-places-t, .bk-film-t, .bk-half-t, .bk-mega-t, .bk-word, .bk-foot-logo, .bk-foot-box p, .bk-tabs button, .bk-sheet-l a) {
  font-family: var(--bp-display); font-weight: var(--bp-display-wght, 500); letter-spacing: -0.02em; line-height: 1.1;
}
:where(.bp.is-blocks) .bk-media { position: relative; overflow: hidden; margin: 0; background: #7e7975; }
:where(.bp.is-blocks) .bk-media :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-arr { width: 14px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; flex: none; }
.bp.is-blocks a { text-decoration: none; }
.bp.is-blocks button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* A ruled action: caps, a rule above, the arrow at the right. */
.bk-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid currentColor; padding-top: 8px; min-height: 32px; font-size: var(--t-c); letter-spacing: .2em; text-transform: uppercase; }
.bk { margin-inline: var(--g); }
.bk + .bk { margin-top: 120px; }
.bk-ruled { border-top: 1px solid var(--bp-ink); padding-top: 11px; }
.bp .bk-label { font-size: var(--t-s); }
.bp .bk-title { font-size: var(--t-l); }

/* ---------- Header: announcement, bar, mega menu ---------- */
.bk-head { position: sticky; top: 0; z-index: 30; background: var(--bp-bg); }
.bk-ann { display: flex; align-items: center; height: 30px; padding-inline: var(--g); background: #000; color: #fff; font-size: 14px; }
.bk-ann-rot { position: relative; flex: 1; height: 16px; margin-left: calc(30% - var(--g) * .6); perspective: 160px; }
.bk-ann-rot p { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 50% 50% -8px; transform: rotateX(90deg); opacity: 0; backface-visibility: hidden; transition: transform .3s ease, opacity .3s ease; }
.bk-ann-rot p.is-on { transform: none; opacity: 1; }
.bk-ann-rot p.is-out { transform: rotateX(-90deg); opacity: 0; }
.bk-ann-rot i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; flex: none; }
.bk-ann-r { margin-left: 24px; white-space: nowrap; }
.bk-narrow { display: none; }
.bk-bar { position: relative; display: flex; align-items: center; height: 45px; margin-inline: var(--g); border-bottom: 1px solid transparent; transition: border-color .3s; }
.bp.is-scrolled .bk-bar { border-bottom-color: var(--bp-ink); }
.bk-logo { position: relative; width: 30%; height: 100%; display: flex; align-items: center; color: var(--bp-ink); }
.bk-word, .bk-mono { font-family: var(--bp-display); font-weight: var(--bp-display-wght, 500); line-height: 1; letter-spacing: -0.03em; transition: opacity .3s, transform .3s; }
.bk-word { font-size: 28px; }
.bk-mono { position: absolute; left: 0; font-size: 30px; letter-spacing: -0.08em; opacity: 0; transform: translateY(6px); }
.bp.is-scrolled .bk-word { opacity: 0; transform: translateY(-6px); }
.bp.is-scrolled .bk-mono { opacity: 1; transform: none; }
.bk-nav, .bk-util { display: flex; gap: 33px; align-self: stretch; }
.bk-nav a, .bk-util a { display: flex; align-items: center; padding-top: 6px; font-size: 14px; font-weight: 500; }
.bk-util { margin-left: auto; }
.bp.is-mega .bk-nav a:not(.bk-has-mega) { opacity: .4; }
.bk-mega { position: absolute; left: 0; right: 0; top: 100%; display: grid; grid-template-columns: 290px 280px 280px 280px 270px; min-height: 380px; padding: 10px var(--g) 26px; background: var(--bp-bg); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .45s cubic-bezier(.6, 0, .2, 1), visibility 0s .45s; }
.bp.is-mega .bk-mega { clip-path: inset(0); visibility: visible; transition: clip-path .5s cubic-bezier(.6, 0, .2, 1); }
.bk-mega-col { display: flex; flex-direction: column; justify-content: space-between; padding-right: 20px; border-right: 1px solid var(--bp-ink); margin-right: 20px; }
.bk-mega-col ul { list-style: none; margin: 0; padding: 0; }
.bk-mega-col li a { display: block; padding-block: 7px; font-size: var(--t-c); letter-spacing: .2em; text-transform: uppercase; }
.bp .bk-mega-t { font-size: 36px; }
.bk-mega-list { display: grid; gap: 10px; align-content: start; padding-right: 20px; }
.bk-mega-list a { display: grid; grid-template-columns: 92px 1fr; gap: 16px; height: 110px; }
.bk-mega-list img { width: 92px; height: 110px; object-fit: cover; }
.bk-mega-list a > span { display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid var(--bp-ink); padding-bottom: 8px; }
.bk-mega-list b { font-family: var(--bp-display); font-weight: var(--bp-display-wght, 500); font-size: 18px; letter-spacing: -0.02em; }
.bk-mega-feat { display: flex; flex-direction: column; gap: 8px; }
.bk-mega-feat img { width: 100%; height: 205px; object-fit: cover; }
.bk-mega-feat b { font-family: var(--bp-display); font-weight: var(--bp-display-wght, 500); font-size: 18px; letter-spacing: -0.02em; }
.bk-mega-n i { font-style: normal; opacity: .4; margin-left: 10px; }
.bk-veil { position: sticky; top: 0; height: 0; z-index: 29; }
.bk-veil::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--vh, 100vh); background: rgb(225 220 214 / .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .4s; }
.bp.is-mega .bk-veil::before { opacity: 1; pointer-events: auto; }
@container bp (max-width: 1100px) { .bk-mega { grid-template-columns: 1fr 1fr 1fr 1.2fr; } .bk-mega-feat { display: none; } }

/* ---------- First screen: slides of two pictures ---------- */
.bk-slides { position: relative; aspect-ratio: calc(2 * var(--bp-hero-ratio, 1.09)); color: #fff; background: #7e7975; }
.bk-slides + .bk { margin-top: 80px; }
.bk-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; }
.bk-slide.is-on { opacity: 1; visibility: visible; transition: opacity 1s ease; }
.bk-slide > .bk-media { position: relative; height: 100%; }
.bk-slide-copy { position: absolute; left: 20px; bottom: 21px; width: calc(50% - 40px); display: grid; gap: 40px; }
.bp .bk-slide-t { font-size: var(--t-xl); max-width: 14em; }
.bk-slide-copy .bk-act { width: 247px; font-size: var(--t-b); letter-spacing: 0; text-transform: none; border-top-color: rgb(255 255 255 / .9); }
.bk-slide-c { position: absolute; left: calc(50% + 20px); bottom: 70px; width: calc(50% - 40px); max-width: 680px; font-size: var(--t-s); }
.bk-count { position: absolute; z-index: 2; left: 20px; top: 20px; display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.bk-count button { font-size: 14px; color: rgb(255 255 255 / .45); transition: color .3s; }
.bk-count button[aria-current] { color: #fff; }
@container bp (max-width: 1008px) {
  .bk-slides { aspect-ratio: var(--bp-hero-ratio, .67); }
  .bk-slide { grid-template-columns: 1fr; }
  .bk-slide-r, .bk-slide-c { display: none; }
  .bk-slide-copy { left: var(--g); width: calc(100% - 2 * var(--g)); bottom: 14px; gap: 40px; }
  .bk-count { top: auto; left: var(--g); bottom: calc(14px + 16px + 40px + 1.2 * var(--t-xl) + 12px); }
  .bk-slide-copy .bk-act { width: 100%; }
}

/* ---------- Statement ---------- */
.bk-statement { display: grid; grid-template-columns: var(--col) 1fr; column-gap: var(--gap); }
.bp .bk-big { font-size: var(--t-l); }
@container bp (max-width: 746px) { .bk-statement { grid-template-columns: 1fr; row-gap: 22px; } .bk-slides + .bk { margin-top: 50px; } }

/* ---------- Shelf: tabs and a sideways row of products ---------- */
.bk-shelf { margin-right: 0; }
.bk-shelf-h { display: flex; align-items: baseline; gap: 48px; margin-right: var(--g); margin-bottom: 24px; }
.bk-tabs { display: flex; gap: 16px; flex-wrap: wrap; }
.bk-tabs button { font-size: var(--t-s); color: color-mix(in srgb, var(--bp-ink) 40%, transparent); transition: color .2s; }
.bk-tabs button[aria-selected="true"], .bk-tabs button:hover { color: var(--bp-ink); }
.bk-all { margin-left: auto; display: flex; align-items: center; gap: 14px; font-weight: 500; white-space: nowrap; }
.bk-row { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-right: var(--g); cursor: grab; }
.bk-row::-webkit-scrollbar { display: none; }
.bk-row.is-drag { cursor: grabbing; user-select: none; }
.bk-row.is-drag * { pointer-events: none; }
.bk-prod { flex: 0 0 var(--bp-card-w, 22.2cqi); display: flex; flex-direction: column; }
.bk-prod[hidden] { display: none; }
.bk-prod-m { aspect-ratio: 320 / 380; background: #e6dccd; }
.bk-prod-m img { -webkit-user-drag: none; }
.bk-tag { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; align-items: center; font-size: 14px; }
.bk-tag::before { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.bk-tag b { font-weight: 500; }
.bk-mark { position: absolute; right: 12px; bottom: 12px; width: 12px; height: 16px; }
.bk-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.bp .bk-prod-t { font-size: 18px !important; margin-top: 11px !important; }
.bk-facts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; margin: 12px 0 0; font-size: var(--t-x); }
.bk-facts dt { font-weight: 500; }
.bk-facts dd { margin: 4px 0 0; }
.bk-add { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; margin-top: 13px; border-top: 1px solid var(--bp-ink) !important; font-weight: 500 !important; }
.bk-price { font-size: 12px; font-weight: 300; }
.bk-row:hover .bk-prod-m img { transition: transform .6s ease; }
.bk-prod:hover .bk-prod-m img { transform: scale(1.03); }
@container bp (max-width: 746px) {
  .bk-shelf-h { display: grid; grid-template-columns: 1fr auto; gap: 8px 0; margin-bottom: 24px; }
  .bk-tabs { grid-row: 2; grid-column: 1 / -1; gap: 27px; }
  .bp .bk-title { font-size: 20px; }
}

/* ---------- Offer band ---------- */
.bk-offer { display: grid; grid-template-columns: var(--col) 1fr; column-gap: var(--gap); row-gap: 24px; margin-inline: 0; padding: 20px var(--g); background: var(--bp-warm, #e1dcd6); color: var(--bp-warm-ink, inherit); }
.bk-offer .bk-label { grid-column: 1 / -1; }
.bk-offer-m { aspect-ratio: 423 / 553; margin-right: 22px; }
.bk-offer-body { display: flex; flex-direction: column; max-width: 668px; }
.bp .bk-mid { font-size: var(--t-m); line-height: 1.1; }
.bk-perks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; list-style: none; margin: 24px 0 0; padding: 0; }
.bk-perks li { display: flex; gap: 10px; align-items: flex-start; min-height: 34px; padding-top: 9px; border-top: 1px solid currentColor; }
.bk-perks li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 4px; border: 1px solid currentColor; border-radius: 50%; }
.bp .bk-small-t { font-size: var(--t-s); }
.bk-offer-body .bk-small-t { margin-top: auto !important; padding-top: 40px; }
.bk-opts { display: grid; grid-template-columns: repeat(2, 188px); margin-top: 8px; }
.bp .bk-opt { position: relative; height: 200px; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; padding: 12px 13px; color: #fff; font-size: var(--t-c); letter-spacing: .2em; text-transform: uppercase; }
.bk-opt img { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); object-fit: cover; z-index: 0; transition: transform .6s ease; }
.bk-opt:hover img { transform: scale(1.04); }
.bk-opt > :not(img) { position: relative; z-index: 1; }
.bk-opt::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 34px; border-top: 1px solid rgb(248 242 222 / .9); z-index: 1; }
.bk-offer-go { grid-column: 2; justify-self: end; align-self: end; width: 223px; }
@container bp (max-width: 746px) {
  .bk-offer { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 20px; }
  .bk-offer-body { display: contents; }
  .bk-mid { grid-column: 1 / -1; grid-row: 2; }
  .bk-perks { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; margin: 0; }
  .bk-offer-m { grid-column: 2; grid-row: 3; margin: 0; }
  .bk-offer-body .bk-small-t { grid-column: 1 / -1; padding-top: 0; }
  .bk-opts { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin: 0; }
  .bk-offer-go { grid-column: 1 / -1; width: 100%; }
}

/* ---------- Trio: label and three portrait cards ---------- */
.bk-trio { display: grid; grid-template-columns: var(--col) 1fr; column-gap: var(--gap); }
.bk-trio-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bk-tcard { display: flex; flex-direction: column; }
.bk-tcard .bk-media { aspect-ratio: 300 / 416; }
.bk-tcard .bk-media img { transition: transform .6s ease; }
.bk-tcard:hover .bk-media img { transform: scale(1.03); }
.bk-tcard-t { margin: 8px 0 12px; font-weight: 500; }
@container bp (max-width: 746px) {
  .bk-trio { grid-template-columns: 1fr; row-gap: 32px; margin-right: 0; }
  .bk-trio-row { display: flex; overflow-x: auto; scrollbar-width: none; gap: 10px; padding-right: var(--g); }
  .bk-trio-row .bk-tcard { flex: 0 0 66.4cqi; }
  .bk-trio.bk-ruled { border-top: 0; padding-top: 0; }
  .bk-trio .bk-label { border-top: 1px solid var(--bp-ink); padding-top: 11px; margin-right: var(--g) !important; }
}

/* ---------- Places: a wide picture with a list over it ---------- */
.bk-places { position: relative; height: calc((100cqi - 2 * var(--g)) * 696 / 1400); min-height: 520px; color: #fff; }
.bk-places-m, .bk-places-m figure { position: absolute; inset: 0; }
.bk-places-m figure { opacity: 0; transition: opacity .6s ease; }
.bk-places-m figure.is-on { opacity: 1; }
.bk-places::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to left, rgb(0 0 0 / .35), transparent 45%); pointer-events: none; }
.bk-places-list { position: absolute; z-index: 1; right: 20px; bottom: 20px; width: min(395px, calc(100% - 40px)); }
.bp .bk-places-t { font-size: 18px; margin-bottom: 12px !important; }
.bk-places-list ul { list-style: none; margin: 0 0 22px; padding: 0; }
.bk-places-list li a { display: flex; justify-content: space-between; padding-block: 3px; color: rgb(255 255 255 / .6); transition: color .2s; }
.bk-places-list li a[aria-current], .bk-places-list li a:hover { color: #fff; }
.bp .bk-visit { color: #fff; position: absolute; z-index: 1; left: 20px; bottom: 0; width: 179px; height: 223px; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; padding: 12px 14px; font-size: var(--t-c); letter-spacing: .2em; text-transform: uppercase; }
.bk-visit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
@container bp (max-width: 746px) {
  .bk-places { height: auto; aspect-ratio: 370 / 674; }
  .bk-places-list { left: 10px; right: 10px; width: auto; }
  .bk-visit { display: none; }
}

/* ---------- Logos running sideways ---------- */
.bk-logos { margin-inline: 0; overflow: hidden; height: 71px; display: flex; align-items: center; }
.bk + .bk-logos, .bk-logos + .bk { margin-top: 96px; }
.bk-logos-track { display: flex; width: max-content; animation: bk-run 40s linear infinite; }
.bp .fx-marquee .bk-logos-track { animation: none; }
.bk-logos-run { display: flex; align-items: center; gap: 124px; padding-right: 124px; }
.bk-logos-run span { white-space: nowrap; color: var(--bp-ink); }
.bk-logo-serif { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; letter-spacing: -0.02em; }
.bk-logo-wide { font-family: system-ui, sans-serif; font-size: 15px; letter-spacing: .35em; font-weight: 500; }
.bk-logo-italic { font-family: Georgia, serif; font-style: italic; font-size: 24px; }
.bk-logo-heavy { font-family: 'Arial Black', Impact, sans-serif; font-size: 28px; font-weight: 900; letter-spacing: .08em; }
.bk-logo-thin { font-family: 'Didot', 'Bodoni 72', Georgia, serif; font-size: 22px; letter-spacing: .25em; }
@keyframes bk-run { to { transform: translateX(-50%); } }
.bp.is-reduced .bk-logos-track { animation: none; }

/* ---------- Cards: a large title and a sideways row ---------- */
.bk-cards { display: grid; grid-template-columns: var(--col) 1fr; column-gap: var(--gap); margin-right: 0; }
.bk-cards .bk-row { padding-right: var(--g); }
.bk-cards .bk-tcard { flex: 0 0 20.1cqi; }
.bk-cards .bk-tcard .bk-media { aspect-ratio: 290 / 403; }
@container bp (max-width: 746px) {
  .bk-cards { grid-template-columns: 1fr; row-gap: 32px; }
  .bk-cards.bk-ruled { border-top: 0; padding-top: 0; }
  .bk-cards .bk-title { border-top: 1px solid var(--bp-ink); padding-top: 11px; margin-right: var(--g) !important; }
  .bk-cards .bk-tcard { flex-basis: 66.4cqi; }
  .bk-cards .bk-row { gap: 10px; }
}

/* ---------- Feature: one product ---------- */
.bk-feature { display: grid; grid-template-columns: var(--col) minmax(0, 643fr) minmax(0, 260fr); column-gap: var(--gap); padding-top: 17px; }
.bk-feature .bk-label { align-self: start; }
.bk-feature-m { aspect-ratio: 643 / 811; color: #fff; }
.bk-spots { position: absolute; z-index: 1; left: 20px; right: 20px; top: 20px; display: flex; gap: 74px; margin: 0; }
.bk-spots dt { font-weight: 500; }
.bk-spots dd { margin: 4px 0 0; }
.bk-mini { position: absolute; z-index: 1; left: 20px; bottom: 20px; width: 264px; padding: 20px; background: var(--bp-bg); color: var(--bp-ink); }
.bk-mini-p { display: grid; grid-template-columns: 50px 1fr; gap: 8px; padding-top: 3px; border-top: 1px solid var(--bp-ink); }
.bk-mini-p img { position: static !important; width: 50px !important; height: 62px !important; object-fit: contain !important; }
.bk-mini-p b { display: block; font-family: var(--bp-display); font-weight: var(--bp-display-wght, 500); font-size: 18px; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 4px; }
.bk-mini .bk-add { min-height: 32px; }
.bk-feature-side { position: sticky; top: calc(var(--bk-head-h, 75px) + 20px); align-self: start; display: flex; flex-direction: column; }
.bk-feature-p { aspect-ratio: 260 / 284; margin-top: 100px; background: #e6dccd; }
@container bp (max-width: 746px) {
  .bk-feature { grid-template-columns: 1fr; row-gap: 20px; }
  .bk-spots { left: 10px; right: 10px; top: 10px; gap: 24px; }
  .bk-mini { left: 10px; bottom: 10px; width: 188px; padding: 14px; }
  .bk-feature-side { position: static; }
  .bk-feature-p { width: 70%; margin: 20px 0 0 30%; }
}

/* ---------- Film: a dark band with a slow picture ---------- */
.bk-film { position: relative; overflow: hidden; margin-inline: 0; min-height: 802px; padding: 140px var(--g) 96px; display: flex; flex-direction: column; align-items: center; color: var(--cream); background: #111; isolation: isolate; }
.bk + .bk-film, .bk-film + .bk { margin-top: 64px; }
.bk-film-bg { position: absolute; inset: 0; z-index: -1; }
.bk-film-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); will-change: transform; }
.bk-film-bg::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .35); }
.bp .bk-film-t { font-size: 60px; line-height: 1 !important; text-align: center; max-width: 580px; }
.bk-film-m { width: min(493px, 100%); aspect-ratio: 493 / 308; margin-top: 48px !important; }
.bk-film-c, .bk-film-a { width: min(493px, 100%); }
.bk-film-c { margin-top: 24px !important; }
.bk-film-a { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-weight: 500; }
@container bp (max-width: 746px) { .bk-film { min-height: 0; padding-top: 80px; } .bp .bk-film-t { font-size: 36px; } }

/* ---------- Halves: two tall pictures with titles that stay ---------- */
.bk-halves { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bp .bk-half { position: relative; display: block; aspect-ratio: 695 / 930; color: #fff; }
.bk-half .bk-media { position: absolute; inset: 0; }
.bk-half .bk-media img { transition: transform .8s ease; }
.bk-half:hover .bk-media img { transform: scale(1.03); }
.bk-half-h { position: sticky; z-index: 1; top: calc(var(--bk-head-h, 75px) + 0px); display: grid; gap: 10px; padding: 20px; }
.bp .bk-half-t { font-size: 36px; }
.bk-half-h .bk-act { border: 0; padding: 0; min-height: 0; justify-content: flex-start; }
.bk-halves + .bk-foot { margin-top: 64px; }
@container bp (max-width: 746px) { .bk-halves { grid-template-columns: 1fr; } .bk-half { aspect-ratio: 370 / 470; } }

/* ---------- Footer: a big picture, the black box rides up with it ---------- */
.bk-foot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: max(68.75cqi, 640px); margin-top: 64px; padding: 20px var(--g); color: #f9f4ee; }
.bk-foot-bg { position: absolute; inset: 0; z-index: 0; }
.bk-foot-bg img { width: 100%; height: 100%; object-fit: cover; }
.bk-foot-box { position: sticky; z-index: 1; bottom: 20px; display: grid; grid-template-columns: 680px 300px 1fr; grid-template-rows: 1fr auto; gap: 0 0; min-height: 307px; padding: 20px; background: #000; }
.bk-foot-cols { display: grid; grid-template-columns: repeat(3, 210px); }
.bk-foot-cols ul { list-style: none; margin: 14px 0 0; padding: 0; line-height: 1.6; }
.bk-foot-box p { font-size: 18px; }
.bk-foot-logo { font-size: 22px !important; }
.bk-foot-pics { display: grid; grid-template-columns: 90px 90px; grid-auto-rows: 120px; gap: 8px; align-content: start; }
.bk-foot-pics img { width: 90px; height: 120px; object-fit: cover; }
.bk-foot-pics a { grid-column: 1 / -1; font-size: 11px; height: auto; }
.bk-foot-news span { display: block; margin-top: 12px; line-height: 1.5; max-width: 380px; }
.bk-mail { display: flex; align-items: center; gap: 8px; max-width: 380px; margin-top: 18px; padding-block: 10px; border-top: 1px solid rgb(255 255 255 / .2); font-size: var(--t-c); letter-spacing: .2em; text-transform: uppercase; }
.bk-mail span { margin: 0 !important; flex: none; }
.bk-mail input { flex: 1; min-width: 0; border: 0; background: none; color: inherit; font: inherit; outline-offset: 2px; }
.bk-foot-low { grid-column: 1 / -1; display: grid; grid-template-columns: 211px 469px 300px 1fr; align-items: end; margin-top: 20px; }
.bk-foot-low span:nth-child(2) { display: flex; gap: 12px; }
.bk-foot-low span:nth-child(3) { grid-column: 4; display: flex; gap: 40px; }
@container bp (max-width: 1200px) {
  .bk-foot-box { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .bk-foot-pics { display: none; }
  .bk-foot-low { grid-template-columns: 1fr; gap: 12px; }
  .bk-foot-low span:nth-child(3) { grid-column: auto; }
}
@container bp (max-width: 746px) {
  .bk-foot { min-height: 720px; padding: 10px; }
  .bk-foot-box { grid-template-columns: 1fr; bottom: 60px; }
  .bk-foot-news { order: -1; }
  .bk-foot-cols { grid-template-columns: 1fr; }
  .bk-foot-cols > div { border-top: 1px solid rgb(255 255 255 / .2); padding-block: 10px; }
  .bk-foot-cols ul { display: none; }
}

/* ---------- Phones: the bottom bar and its rising menu ---------- */
.bk-bottom { display: none; }
@container bp (max-width: 746px) {
  .bk-ann { font-size: 14px; }
  .bk-ann-rot { margin-left: 13px; }
  .bk-wide { display: none; }
  .bk-narrow { display: inline; }
  .bk-bar { height: 42px; }
  .bk-word { font-size: 22px; }
  .bp.is-scrolled .bk-word { opacity: 1; transform: none; }
  .bp.is-scrolled .bk-mono { opacity: 0; }
  .bp.is-scrolled .bk-bar { border-bottom-color: transparent; }
  .bk-nav, .bk-util, .bk-mega { display: none; }
  .bk-bottom { display: block; position: sticky; bottom: 0; z-index: 31; }
  .bk-bottom-bar { position: relative; z-index: 2; display: flex; justify-content: space-between; height: 50px; padding-inline: var(--g); background: var(--bp-bg); }
  .bk-bottom-bar::before { content: ''; position: absolute; left: var(--g); right: var(--g); top: 0; border-top: 1px solid var(--bp-ink); }
  .bp.is-blocks .bk-bottom-bar > * { display: flex; align-items: center; font-weight: 500; }
  .bk-sheet { position: absolute; z-index: 1; left: 0; right: 0; bottom: 100%; height: calc(var(--vh, 100vh) - 50px - var(--bk-head-h, 72px)); display: flex; flex-direction: column; justify-content: space-between; padding: 16px var(--g) 12px; background: var(--bp-bg); transform: translateY(100%); clip-path: inset(0 0 0 0); visibility: hidden; transition: transform .5s cubic-bezier(.6, 0, .2, 1), visibility 0s .5s; }
  .bk-sheet { clip-path: inset(0 0 calc(100% - 0px) 0); }
  .bp.is-sheet .bk-sheet { transform: none; clip-path: inset(0); visibility: visible; transition: transform .5s cubic-bezier(.6, 0, .2, 1), clip-path .5s cubic-bezier(.6, 0, .2, 1); }
  .bk-sheet-l { list-style: none; margin: 0; padding: 0; }
  .bk-sheet-l a { display: flex; align-items: center; height: 45px; font-size: 18px; border-bottom: 1px solid color-mix(in srgb, var(--bp-ink) 15%, transparent); }
  .bk-sheet-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--bp-ink); padding-top: 12px; }
  .bk-sheet-card img { width: 100%; aspect-ratio: 181 / 238; object-fit: cover; }
  .bk-sheet-card > span { display: flex; flex-direction: column; justify-content: space-between; }
  .bk-sheet-card b { font-family: var(--bp-display); font-weight: var(--bp-display-wght, 500); font-size: 14px; }
  .bk + .bk { margin-top: 75px; }
}

/* What the site's header and footer leave out. */
.bp.no-mono.is-scrolled .bk-word { opacity: 1; transform: none; }
.bp.no-mono .bk-mono { display: none; }
.bp.is-plain-foot .bk-foot { min-height: 0; padding: 0; }
.bp.is-plain-foot .bk-foot-bg { display: none; }
.bp.is-plain-foot .bk-foot-box { position: static; }

/* ---------- Wireframe skin ---------- */
.bp.is-blocks.is-wire .bk-media, .bp.is-blocks.is-wire .bk-film-bg, .bp.is-blocks.is-wire .bk-foot-bg { background: repeating-linear-gradient(135deg, transparent 0 9px, rgb(0 0 0 / .06) 9px 10px), #e9e6e0; }
.bp.is-blocks.is-wire img, .bp.is-blocks.is-wire video { visibility: hidden; }

/* ======================================================================================
   Blocks as on Snøhetta (header 'menu', footer 'columns'): twelve columns, 40px margin and gap,
   a light grotesk; grey labels in column one, everything else from column five. Measured at
   1440 and 390 wide; below 768 the phone sizes apply.
   ====================================================================================== */
.bp.is-menu-head > * {
  --m: 40px; --gp: 40px;
  --c: calc((100cqi - 2 * var(--m) - 11 * var(--gp)) / 12);
  --x5: calc(4 * (var(--c) + var(--gp)));                 /* from the margin to column five */
  --s4: calc(4 * var(--c) + 3 * var(--gp));
  --s6: calc(6 * var(--c) + 5 * var(--gp));
  --t-claim: 60px; --lh-claim: 62px;
  --t-list: 48px; --lh-list: 1.3;
  --t-txt: 22px; --lh-txt: 1.45;
  --t-row: 18px; --t-small: 16px; --t-cap: 18px; --lh-cap: 24px;
  --gap-y: 80px;
  --label: color-mix(in srgb, var(--bp-ink) 42%, var(--bp-bg));   /* #949494 on white */
  --soft: color-mix(in srgb, var(--bp-ink) 54%, var(--bp-bg));    /* #757575 on white */
  --area: color-mix(in srgb, var(--bp-ink) 5%, var(--bp-bg));     /* a row being pointed at */
  --line: color-mix(in srgb, var(--bp-ink) 12%, var(--bp-bg));
}
@container bp (max-width: 767px) {
  .bp.is-menu-head > * {
    --m: 24px; --gp: 24px;
    --t-claim: 24px; --lh-claim: 27px; --t-list: 24px; --lh-list: 1.2;
    --t-txt: 18px; --t-row: 16px; --t-small: 14px; --t-cap: 14px; --lh-cap: 18px;
  }
}
.bp.is-menu-head { font-family: var(--bp-body); font-weight: var(--bp-display-wght, 300); font-size: var(--t-small); line-height: 1.4; color: var(--bp-ink); background: var(--bp-bg); overflow-x: clip; }
:where(.bp.is-menu-head) :where(h1, h2, h3, p, ul) { margin: 0; font-weight: inherit; }
.bp.is-menu-head ul { list-style: none; padding: 0; }
:where(.bp.is-menu-head) a { color: inherit; }
.bp.is-menu-head .bk { margin-inline: 0; }
.bp.is-menu-head .bk + .bk { margin-top: var(--gap-y); }
.bp.is-menu-head .bk-label { font: inherit; font-size: var(--t-txt); line-height: var(--lh-txt); color: var(--label); letter-spacing: 0; }
.bp.is-menu-head .bk-media { background: var(--area); }
.bk-head-row { display: flex; align-items: baseline; justify-content: space-between; margin-inline: var(--m); }
.bp .bk-link { font-size: var(--t-txt); line-height: var(--lh-txt); color: var(--soft); }
.bk-link span { display: inline-block; margin-left: 40px; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.bk-link:hover span { transform: translateX(8px); }

/* Header: sticks at the top without taking room; the words invert over pictures. */
.bk-mhead { position: sticky; top: 0; height: 0; z-index: 50; pointer-events: none; }
.bk-mhead.is-blend { mix-blend-mode: exclusion; color: #fff; }
.bk-mhead:not(.is-blend) { color: var(--bp-ink); }
.bk-mhead-in { display: flex; align-items: center; padding: 40px var(--m) 0; font-size: var(--t-txt); line-height: var(--lh-txt); }
.bk-mname { width: var(--x5); pointer-events: auto; transition: opacity .2s; }
.bk-mbtn { pointer-events: auto; font: inherit !important; }
.bk-mbtn-c, .bp.is-menu .bk-mbtn-o { display: none; }
.bp.is-menu .bk-mbtn-c { display: inline; }
.bk-mname:hover, .bk-mbtn:hover { opacity: .6; }
.bk-msign { width: 22px; height: 20px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.2; pointer-events: auto; }
@container bp (max-width: 767px) { .bk-mhead-in { padding-top: 24px; } .bk-mname { width: 50%; } }
/* The menu: a frosted panel over the page; the same columns as the footer. */
.bk-mpanel-pin, .bk-prefs-pin { position: sticky; top: 0; height: 0; z-index: 45; }
.bk-prefs-pin { z-index: 44; }
.bk-mpanel { position: absolute; inset: 0 0 auto; height: var(--bk-vh, 100vh); display: flex; flex-direction: column; justify-content: space-between; padding: 154px var(--m) 40px calc(var(--m) + var(--x5)); background: color-mix(in srgb, var(--bp-bg) 85%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; overflow: auto; }
.bp.is-menu .bk-mpanel { opacity: 1; visibility: visible; transition: opacity .4s; }
.bk-mpanel-top ul { font-size: var(--t-txt); line-height: var(--lh-txt); }
.bk-mpanel-top .bk-search { margin-top: 64px; }
.bk-search { display: flex; justify-content: space-between; width: var(--s4); max-width: 100%; border-bottom: 1px solid var(--line); padding-bottom: 4px; color: var(--soft); }
.bk-search input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; font: inherit; color: var(--bp-ink); outline: none; }
.bk-search input::placeholder { color: var(--soft); }
.bk-mpanel-cols, .bk-cfoot-cols { display: grid; grid-template-columns: repeat(3, calc(2 * var(--c) + var(--gp))); column-gap: var(--gp); font-size: var(--t-small); line-height: 1.4; color: var(--soft); }
.bp.is-menu-head :is(.bk-mpanel-cols, .bk-cfoot-cols) h3 { font: inherit; letter-spacing: 0; color: var(--label); margin-bottom: 24px; }
.bk-mpanel-cols li:nth-child(4), .bk-cfoot-cols div:first-child li:nth-child(4) { margin-top: 24px; }
.bk-mpanel-cols a:hover, .bk-cfoot a:hover { color: var(--bp-ink); }
@container bp (max-width: 767px) {
  .bk-mpanel { padding: 120px var(--m) 24px; }
  .bk-mpanel-cols, .bk-cfoot-cols { grid-template-columns: repeat(2, 1fr); row-gap: 25px; }
}

/* The visitor's settings: a note, three switches and a frosted button in the lower left corner. */
.bk-prefs { position: absolute; left: 24px; top: calc(var(--bk-vh, 100vh) - 24px); transform: translateY(-100%); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: 14px; line-height: 1.45; }
.bk-prefs-info, .bk-prefs-panel, .bp.is-menu-head .bk-prefs-btn { background: color-mix(in srgb, color-mix(in srgb, var(--bp-ink) 5%, var(--bp-bg)) 65%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 16px; }
.bk-prefs-info { max-width: 325px; padding: 24px; }
.bp .bk-prefs-info a { display: inline-flex; gap: 16px; margin-top: 8px; color: var(--label); }
.bk-prefs-info[hidden], .bk-prefs-panel[hidden] { display: none; }
.bk-prefs-panel { display: grid; gap: 8px; padding: 24px; }
.bk-prefs-panel label { display: flex; gap: 8px; cursor: pointer; }
.bk-prefs-panel input { position: absolute; opacity: 0; pointer-events: none; }
.bk-prefs-panel b { font-weight: inherit; }
.bk-prefs-panel input:checked ~ .bk-off, .bk-prefs-panel input:not(:checked) ~ .bk-on { display: none; }
.bp.is-menu-head .bk-prefs-btn { display: grid; place-items: center; width: 48px; height: 48px; color: var(--bp-ink) !important; }
.bk-prefs-btn svg { width: 16px; height: 16px; fill: var(--bp-bg); stroke: currentColor; stroke-width: 1.2; }
@container bp (max-width: 767px) {
  .bk-prefs { left: 16px; top: calc(var(--bk-vh, 100vh) - 16px); font-size: 12px; }
  .bk-prefs-info { max-width: 265px; padding: 16px; border-radius: 8px; }
  .bp.is-menu-head .bk-prefs-btn { width: 28px; height: 28px; border-radius: 8px; }
  .bk-prefs-btn svg { width: 12px; height: 12px; }
}
.bp.is-dark { --bp-bg: #000 !important; --bp-ink: #fff !important; }
.bp.is-lowres img { filter: url(#bk-lowres); image-rendering: pixelated; }
.bp.is-simple *, .bp.is-simple *::before { transition: none !important; animation: none !important; }
.bk-filters { position: absolute; }

/* First screen: a light sentence over a stepping row of pictures. */
.bk-strip { padding-top: 160px; }
.bp.is-menu-head .bk-strip + .bk { margin-top: 64px; }
.bp .bk-claim { margin: 0 var(--m) 24px !important; max-width: calc(10 * var(--c) + 9 * var(--gp)); font: inherit; font-size: var(--t-claim) !important; line-height: var(--lh-claim) !important; letter-spacing: -0.015em; color: var(--bp-ink); text-wrap: balance; }
.bk-strip-row { position: relative; height: calc(36.04cqi / 1.5 + 80px); overflow: hidden; touch-action: pan-y; cursor: grab; }
.bk-strip-i { position: absolute; top: 0; left: 0; display: block; width: 16.04cqi; transition: transform .6s cubic-bezier(.39, .575, .565, 1), width .6s cubic-bezier(.39, .575, .565, 1); user-select: none; }
.bk-strip-i.no-move { transition: none; }
.bk-strip-i .bk-media { aspect-ratio: 3 / 2; }
.bk-strip-c { display: block; margin-top: 8px; font-size: var(--t-cap); line-height: var(--lh-cap); opacity: 0; transition: opacity .4s; }
.bk-strip-i.is-big .bk-strip-c { opacity: 1; transition-delay: .3s; }
.bk-strip-c p + p { color: var(--label); }
@container bp (max-width: 767px) {
  .bk-strip { padding-top: 96px; }
  .bp.is-menu-head .bk-strip + .bk { margin-top: 40px; }
}

/* Index: big links between thin rules; pointing greys the row and shows a picture beside the pointer. */
.bk-index, .bk-table { position: relative; }
.bk-index { display: grid; grid-template-columns: var(--x5) minmax(0, 1fr); margin-inline: var(--m) !important; }
.bk-index > .bk-label { padding-top: 31px; }
.bk-index.has-sub > .bk-label { padding-top: 23px; }
.bk-index-l { grid-column: 2; font-size: var(--t-list); line-height: var(--lh-list); letter-spacing: -0.01em; }
.bk-index-l li { border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.bk-index-l li:last-child { border-bottom: 0; }
.bk-index-l a { display: block; padding-block: 8px; transition: background-color .3s; }
.bk-index-l a:hover, .bk-table-l a:hover { background: var(--area); }
.bk-index-s { margin-left: .45em; color: var(--label); }
.bp .bk-more { grid-column: 2; display: inline-flex; gap: 40px; margin-top: 32px; font-size: var(--t-txt); color: var(--soft); }
.bk-trail { position: absolute; top: 0; left: 0; z-index: 3; width: 300px; aspect-ratio: 3 / 2; margin: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.bk-trail.is-on { opacity: 1; }
.bk-trail img { width: 100%; height: 100%; object-fit: cover; display: block; }
@container bp (max-width: 767px) {
  .bk-index { grid-template-columns: minmax(0, 1fr); }
  .bk-index > .bk-label, .bk-index.has-sub > .bk-label { padding: 0 0 24px; font-size: 18px; }
  .bk-index-l, .bp .bk-more { grid-column: 1; }
  .bk-index-l a { padding-block: 8px; }
}

/* News: dated cards, small and large in turn, stepped by arrows; a dot is the pointer over them. */
.bk-news { overflow: hidden; }
.bk-news-view { position: relative; margin: 39px var(--m) 0; cursor: none; touch-action: pan-y; }
.bk-news-track { display: flex; align-items: flex-start; gap: var(--gp); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.bk-news-i { flex: none; width: var(--s4); user-select: none; }
.bk-news-i.is-l { width: var(--s6); }
.bk-news-i .bk-media { aspect-ratio: 3 / 2; }
.bk-news-d { display: block; margin-top: 16px; font-size: var(--t-txt); line-height: var(--lh-txt); color: var(--label); }
.bk-news-t { display: block; font-size: var(--t-txt); line-height: var(--lh-txt); max-width: 30em; }
.bk-dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; mix-blend-mode: exclusion; pointer-events: none; opacity: 0; transition: opacity .3s; }
.bk-news-view.is-dot .bk-dot { opacity: 1; }
.bk-news-nav { display: flex; justify-content: space-between; margin: 17px var(--m) 0; font-size: var(--t-txt); line-height: 1.3; }
.bk-news-nav button { padding: 0; }
@container bp (max-width: 767px) {
  .bk-news-view { margin-top: 25px; cursor: auto; }
  .bk-news-i { width: 64.36cqi; }
  .bk-news-i.is-l { width: calc(100cqi - 2 * var(--m)); }
  .bk-news-d { margin-top: 34px; }
  .bk-news-t, .bk-news-d { font-size: 18px; }
  .bk-news-nav { margin-top: 40px; }
  .bk-dot { display: none; }
}

/* Table: what, where, when; ruled rows. */
.bk-table-h, .bk-table-l a { display: grid; grid-template-columns: calc(8 * var(--c) + 7 * var(--gp)) calc(2 * var(--c) + var(--gp)) 1fr; column-gap: var(--gp); }
.bk-table-h { margin: 40px var(--m) 0; font-size: var(--t-small); color: var(--label); }
.bk-table-l { margin: 20px var(--m) 0; font-size: var(--t-row); line-height: 1.4; }
.bk-table-l li { border-bottom: 1px solid var(--line); }
.bk-table-l li:last-child { border-bottom: 0; }
.bk-table-l a { align-items: center; min-height: 73px; transition: background-color .3s; }
.bk-table-t { display: flex; gap: 16px; min-width: 0; white-space: nowrap; }
.bk-table-t > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.bk-table-s { color: var(--soft); overflow: hidden; text-overflow: ellipsis; }
@container bp (max-width: 767px) {
  .bk-table-h { display: none; }
  .bk-table-l { margin-top: 28px; }
  .bk-table-l a { grid-template-columns: 1fr; min-height: 55px; }
  .bk-table-p, .bk-table-d, .bk-table-s { display: none; }
}

/* Pair: a small and a large picture (then two large), each with a title and a grey text. */
.bk-pair { display: grid; grid-template-columns: var(--s4) var(--s6); justify-content: space-between; align-items: start; margin-inline: var(--m) !important; }
.bk-pair.is-even { grid-template-columns: var(--s6) var(--s6); }
.bk-pair-i .bk-media { aspect-ratio: 3 / 2; }
.bk-pair-t { margin-top: 16px !important; font-size: var(--t-txt); line-height: var(--lh-txt); }
.bk-pair-x { max-width: 21.5em; font-size: var(--t-txt); line-height: var(--lh-txt); color: var(--soft); }
@container bp (max-width: 767px) {
  .bk-pair, .bk-pair.is-even { grid-template-columns: 1fr; row-gap: 80px; }
}

/* Footer: the mark, three columns, a search field, small print at the foot. */
.bp .bk-cfoot { display: grid; grid-template-columns: var(--x5) minmax(0, 1fr); margin: var(--gap-y) var(--m) 0; padding: 256px 0 40px; color: var(--soft); }
.bk-cfoot-mark { width: 68px; height: 62px; margin-left: -10px; fill: none; stroke: var(--bp-ink); stroke-width: .8; }
.bk-cfoot-cols { grid-column: 2; }
.bk-cfoot-cols .bk-search { grid-column: 1; margin-top: 80px; width: auto; }
.bk-cfoot-low { grid-column: 2; display: grid; grid-template-columns: repeat(4, calc(2 * var(--c) + var(--gp))); column-gap: var(--gp); align-items: end; margin-top: 160px; font-size: var(--t-small); line-height: 1.4; }
@container bp (max-width: 767px) {
  .bp .bk-cfoot { grid-template-columns: 1fr; padding: 115px 0 24px; }
  .bk-cfoot-cols, .bk-cfoot-low { grid-column: 1; }
  .bk-cfoot-cols { margin-top: 56px; }
  .bk-cfoot-cols .bk-search { grid-column: 1 / -1; grid-row: 1; margin: 0 0 56px; }
  .bk-cfoot-low { grid-template-columns: repeat(2, 1fr); row-gap: 26px; margin-top: 64px; }
  .bk-mpanel-cols li:nth-child(4), .bk-cfoot-cols div:first-child li:nth-child(4) { margin-top: 6px; }
  .bk-cfoot-low ul { order: -1; }
  .bp.is-menu-head :is(.bk-mpanel-cols, .bk-cfoot-cols) h3 { margin-bottom: 8px; }
}

/* ======================================================================================
   Blocks as on Manual (header 'burger', footer 'dial'): a serif (the headline face) for sentences
   and titles, a sans (the text face) for heads, caps and buttons; 32px margins, 12px gaps, round
   buttons; the page turns dark from the card stack on. Measured at 1440 and 390; below 768 the
   phone sizes apply.
   ====================================================================================== */
.bp.is-burger-head {
  --pg: var(--bp-bg); --ink: var(--bp-ink); --grey: #9b9c96; --hover: #ff40bf;
  --mg: 32px; --t0: 60px; --lh0: 1; --th: 45px; --t2: 30px; --p1: 18px;
  font-family: var(--bp-display); font-weight: 400; font-size: var(--p1); line-height: 1.2; letter-spacing: -0.03em;
  color: var(--ink); background: var(--pg); overflow-x: clip; transition: background-color .6s, color .6s;
}
.bp.is-burger-head.is-inverted { --pg: var(--inv-bg, #1c1c1c); --ink: var(--inv-ink, #f9f8f8); }
/* The container is the page itself, so phone sizes are set on its children. */
@container bp (max-width: 767px) {
  .bp.is-burger-head > * { --mg: 12px; --t0: 28px; --lh0: 1.1; --th: 32px; --t2: 20px; --p1: 16px; }
}
:where(.bp.is-burger-head) :where(h1, h2, h3, p, ul, figure) { margin: 0; font-weight: inherit; }
.bp.is-burger-head ul { list-style: none; padding: 0; }
:where(.bp.is-burger-head) a { color: inherit; text-decoration: none; }
.bp.is-burger-head .bk { margin-inline: 0; }
.bp.is-burger-head .bk + .bk { margin-top: 0; }
.bp.is-burger-head .bk-media { background: color-mix(in srgb, var(--ink) 10%, var(--pg)); }
.bp.is-burger-head .bk-pin { position: sticky; top: 0; height: 0; z-index: 50; }
.bp.is-burger-head .bk-bmenu-pin { z-index: 49; }
.bp.is-burger-head .bk-lb-pin { z-index: 60; }

/* A round button: caps in the sans, a thin ring, an arrow; it takes the block's colour when pointed at. */
.bp.is-burger-head .bk-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 8px; border: 1px solid currentColor; border-radius: 62px; font-family: var(--bp-body); font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; color: var(--ink); background: none; transition: color .15s, border-color .15s; }
.bp.is-burger-head .bk-pill:hover { color: var(--hover); }
.bk-ne { width: 8px; height: 8px; margin-left: 8px; fill: none; stroke: currentColor; stroke-width: 1; flex: none; }
/* A frosted label that follows the pointer. */
.bk-cur { position: absolute; left: 0; top: 0; z-index: 6; display: grid; grid-template-columns: 0fr; align-items: center; min-height: 24px; padding: 8px 16px; border-radius: 62px; background: rgba(255, 255, 255, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000; font-family: var(--bp-body); font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: opacity 60ms ease-out, grid-template-columns .3s; }
.bk-cur.is-on { opacity: 1; }
.bk-cur-in { min-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.bk-cur.has-label { grid-template-columns: 1fr; }
.bk-cur.has-label .bk-cur-in { opacity: 1; }

/* Header: the logo and a round button; it gets lower as you leave the top and slides away going down. */
.bk-bhead { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: calc(16px - var(--hp, 0) * 8px) var(--mg); background: var(--pg); transition: transform .3s, opacity .3s, background-color .6s; }
.bk-bhead.is-gone { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.bk-bhead.is-menu { background: transparent; }
.bp.is-burger-head .bk-blogo { font-family: var(--bp-body); font-weight: 600; font-size: 27px; line-height: 31px; letter-spacing: -0.045em; color: var(--ink); transition: opacity .2s; }
.bk-bhead.is-menu .bk-blogo { color: #1c1c1c; }
.bk-blogo:hover { opacity: .6; }
.bk-barea { position: relative; }
.bp.is-burger-head .bk-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 31px; height: 31px; border-radius: 50%; background: var(--ink); transition: background-color .6s; }
.bk-burger i { display: block; width: 14px; height: 1px; margin: 0 auto; background: var(--pg); transition: transform .3s; }
.bk-bhead.is-menu .bk-burger { background: #1c1c1c; }
.bk-bhead.is-menu .bk-burger i { background: #f9f8f8; }
.bk-burger[aria-expanded="true"] i:first-child { transform: translateY(2.5px) rotate(45deg); }
.bk-burger[aria-expanded="true"] i:last-child { transform: translateY(-2.5px) rotate(-45deg); }

/* The menu: a pale panel that grows out of the button; links in the serif, a new piece of work below. */
.bk-bmenu { position: absolute; top: 64px; right: var(--mg); width: 490px; max-height: calc(var(--bk-vh, 100vh) - 80px); overflow: auto; display: none; padding: 24px; border-radius: 5px; background: var(--tint, #a9efaf); color: #1c1c1c; text-align: center; transform-origin: 0 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .18s cubic-bezier(.22, 1, .36, 1); }
.bk-bmenu.is-open { display: block; }
.bk-bmenu[aria-hidden="true"] { transition-duration: .22s; }
.bk-bmenu-l { border-top: 1px solid #1c1c1c; padding: 16px 0; }
.bp.is-burger-head .bk-bmenu-l a { display: block; padding: 2.8px 0; font-family: var(--bp-display); font-size: 35px; line-height: 1.1; letter-spacing: -0.015em; color: #1c1c1c; transition: opacity .2s; }
.bk-bmenu-l:hover a { opacity: .6; }
.bp.is-burger-head .bk-bmenu-l a:hover { opacity: 1; }
.bk-bmenu-i { opacity: 0; transform: translateY(8px); transition: opacity .12s, transform .32s cubic-bezier(.22, 1, .36, 1); }
.bk-bmenu.is-in .bk-bmenu-i { opacity: 1; transform: none; transition: opacity .32s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 40ms), transform .32s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 40ms); }
.bk-bmenu-p { border-top: 1px solid #1c1c1c; padding-top: 16px; }
.bk-bmenu-s { display: none; justify-content: space-between; align-items: flex-start; gap: 16px; text-align: left; }
.bk-bmenu-s.is-on { display: flex; }
.bk-bmenu-tx { display: flex; flex-direction: column; gap: 12px; }
.bk-bmenu-st { display: flex; align-items: center; gap: 4px; font-family: var(--bp-body); font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.bk-bmenu-st::before { content: ""; width: 11px; height: 11px; margin-right: 2px; border-radius: 50%; background: #f9f8f8; }
.bk-bmenu-sn { font-size: 25px; line-height: 1.07; letter-spacing: -0.02em; }
.bk-bmenu-s .bk-media { flex: none; width: 50%; aspect-ratio: 4 / 3; border-radius: 5px; }
@container bp (max-width: 767px) {
  .bk-bmenu { top: 0; left: 0; right: 0; width: auto; height: var(--bk-vh, 100vh); max-height: none; padding: 96px var(--mg) var(--mg); border-radius: 0; }
}

/* The film's full-screen view: a dark backdrop, the picture grows out of the box, a round close button. */
.bk-lb { position: absolute; inset: 0 0 auto; height: var(--bk-vh, 100vh); display: none; }
.bk-lb.is-open { display: block; }
.bk-lb-bg { position: absolute; inset: 0; background: #1c1c1c; }
.bk-lb-stage { position: absolute; inset: 0; margin: auto !important; width: min(calc(100% - 64px), calc((var(--bk-vh, 100vh) - 128px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; transform-origin: 0 0; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.bk-lb-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp.is-burger-head .bk-lb-x { position: absolute; top: 32px; right: 32px; color: #f9f8f8; opacity: 0; transition: opacity .2s; cursor: pointer; }
.bk-lb.is-shown .bk-lb-x { opacity: 1; }

/* First screen: one serif sentence; its words rise in, then a few letters flash. */
.bk-lead { padding: 96px var(--mg) 32px; }
.bp.is-burger-head .bk-lead-t { margin: 0; font-family: var(--bp-display); font-weight: 400; font-size: var(--t0); line-height: var(--lh0); letter-spacing: -0.03em; color: var(--ink); text-wrap: pretty; }
.bk-lead.is-split .bk-w { display: inline-block; opacity: 0; translate: 0 10px; transition: opacity .4s ease-out, translate .4s ease-out; }
.bk-lead.is-in .bk-w { opacity: 1; translate: 0 0; }
@container bp (max-width: 767px) { .bk-lead { padding: 76px var(--mg) 12px; } }

/* Blocks fade in as they come into view. */
.bp.is-burger-head .bk-fade { opacity: 0; transition: opacity .8s cubic-bezier(.4, 0, .2, 1) .1s; }
.bp.is-burger-head .bk-fade.is-in, .bp.is-burger-head.is-reduced .bk-fade, .bp.is-burger-head.is-editing .bk-fade { opacity: 1; }

/* The film: a wide rounded box; pictures cut every 3 seconds, a word over each, PLAY at the corner. */
.bk-reel { padding: 32px var(--mg); }
.bp.is-burger-head .bk-reel-box { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #1c1c1c; }
.bk-reel-box figure { position: absolute !important; inset: 0; opacity: 0; }
.bk-reel-box figure.is-on { opacity: 1; }
.bk-reel-w { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; font-family: var(--bp-body); font-weight: 500; font-size: 11cqi; letter-spacing: -0.05em; line-height: 1; color: #fff; }
.bk-reel-play, .bk-reel .bk-cur { display: flex; gap: 6px; grid-template-columns: 1fr; }
.bk-reel-play { position: absolute; left: 32px; bottom: 32px; align-items: center; padding: 8px 16px; border-radius: 62px; background: rgba(255, 255, 255, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000; font-family: var(--bp-body); font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; transition: opacity .2s, background-color .15s; }
.bk-reel-play b { font-weight: inherit; font-size: 9px; }
.bk-reel-box.is-pointed .bk-reel-play { opacity: 0; }
.bk-reel .bk-cur-in { opacity: 1; }
@media (hover: hover) { .bk-reel-box:hover, .bk-rail-row:hover, .bk-dfoot-t a:hover { cursor: none; } }
@container bp (max-width: 767px) {
  .bk-reel { padding: 12px var(--mg); }
  .bp.is-burger-head .bk-reel-box { aspect-ratio: 3 / 4; }
  .bk-reel-w { font-size: 17cqi; }
  .bk-reel-play { left: auto; right: 12px; bottom: 12px; width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; }
  .bk-reel-play b { font-size: 12px; }
}

/* Rows: a rule in the block's colour, a sans title with a round button, two round arrows; landscape cards. */
.bk-rail { position: relative; padding: 48px 0; }
.bk-rail-head { display: flex; justify-content: space-between; align-items: center; margin: 0 var(--mg) 24px; padding: 16px 0; border-top: 1px solid var(--hover); }
.bk-rail-tg { display: flex; align-items: flex-end; gap: 12px; }
.bp.is-burger-head .bk-rail-t { margin: 0; font-family: var(--bp-body); font-weight: 500; font-size: var(--th); line-height: 1.1; letter-spacing: -0.03em; }
.bk-rail-tg .bk-pill { translate: 0 -8px; }
.bk-rail-nav { display: flex; gap: 4px; }
.bp.is-burger-head .bk-rail-nav button { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); transition: color .15s, border-color .15s; }
.bp.is-burger-head .bk-rail-nav button:hover { color: var(--hover); border-color: var(--hover); }
.bk-rail-nav svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1; }
.bk-rail-nav button:first-child svg { transform: rotate(180deg); }
.bk-rail-row { display: flex; gap: 12px; padding: 0 var(--mg); overflow: auto hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.bk-rail-row::-webkit-scrollbar { display: none; }
.bk-rail-i { flex: none; display: flex; flex-direction: column; width: min-content; user-select: none; }
.bp.is-burger-head .bk-rail-i .bk-media { height: 23.1cqi; aspect-ratio: 4 / 3; border-radius: 5px; }
.bk-rail-i img { -webkit-user-drag: none; }
.bk-rail-tag { margin: 16px 0 8px; font-family: var(--bp-body); font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.bp.is-burger-head :is(.bk-rail-n, .bk-rail-s) { max-width: 90%; font-family: var(--bp-display); font-size: var(--t2); line-height: 1.05; letter-spacing: -0.018em; }
.bp.is-burger-head .bk-rail-s { margin-top: 2px; color: var(--grey); text-wrap: pretty; }
.bk-rail .bk-rail-i { opacity: 0; transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1) calc(var(--i) * .2s); }
.bk-rail.is-in .bk-rail-i, .bp.is-reduced .bk-rail .bk-rail-i, .bp.is-editing .bk-rail .bk-rail-i { opacity: 1; }
.bk-rail-foot { display: none; margin: 32px var(--mg) 0; }
@container bp (max-width: 767px) {
  .bk-rail { padding: 32px 0; }
  .bk-rail-head { margin-bottom: 16px; }
  .bp.is-burger-head .bk-rail-tg .bk-pill, .bk-rail-nav, .bk-rail-tag { display: none; }
  .bk-rail-row { flex-direction: column; gap: 32px; overflow: visible; }
  .bk-rail-i { width: auto; }
  .bp.is-burger-head .bk-rail-i .bk-media { width: 100%; height: auto; margin-bottom: 12px; }
  .bp.is-burger-head :is(.bk-rail-n, .bk-rail-s) { max-width: 85%; line-height: 1.1; letter-spacing: -0.024em; }
  .bp.is-burger-head .bk-rail-s { margin-top: 0; }
  .bk-rail-foot { display: block; }
  .bk-rail .bk-cur { display: none; }
}

/* The stack: a centred sentence; then six cards fly in and land turned on a pile. */
.bk-stack { position: relative; height: var(--bk-vh, 900px); display: flex; align-items: center; justify-content: center; overflow: hidden; user-select: none; }
.bp.is-burger-head .bk-stack-t { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: .5em 1em; font-family: var(--bp-display); font-size: var(--t0); line-height: 1.1; letter-spacing: -0.03em; color: #f9f8f8; text-align: center; transition: opacity .4s, transform .4s; }
.bk-stack-t.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.bk-stack-pile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bk-stack-pile.is-on { pointer-events: auto; }
.bk-card { position: absolute; width: min(95cqi, 800px); aspect-ratio: 16 / 9; display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; background: var(--card); color: #1c1c1c; transition: transform .6s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.bp.is-burger-head .bk-card-t { padding: 24px; font-family: var(--bp-display); font-size: var(--th); line-height: 1.1; letter-spacing: -0.03em; text-wrap: pretty; }
.bk-card-a { margin-top: auto; padding: 0 24px 24px; }
.bp.is-burger-head .bk-card .bk-pill { color: var(--pg); }
@container bp (max-width: 767px) {
  .bp.is-burger-head .bk-stack-t { font-size: 38px; }
  .bk-card { width: 78cqi; aspect-ratio: 3 / 4; }
  .bp.is-burger-head .bk-card-t { padding: 16px; font-size: 28px; }
  .bk-card-a { padding: 0 16px 16px; }
}

/* Overview: a rule in the block's colour, a sans label, a serif sentence and a round button. */
.bp.is-burger-head .bk + .bk-over { margin: 160px var(--mg) 0; }
.bk-over-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 12px; padding: 32px 0; border-top: 1px solid var(--hover); }
.bp.is-burger-head .bk-over-h { grid-column: span 3; margin: 0; font-family: var(--bp-body); font-weight: 500; font-size: var(--th); line-height: 1.1; letter-spacing: -0.03em; }
.bp.is-burger-head .bk-over-x { grid-column: span 7; padding-right: 64px; font-family: var(--bp-display); font-size: var(--th); line-height: 1.1; letter-spacing: -0.03em; text-wrap: pretty; }
.bk-over-a { grid-column: span 2; display: flex; align-items: flex-start; }
@container bp (max-width: 767px) {
  .bp.is-burger-head .bk + .bk-over { margin-top: 88px; }
  .bk-over-in { grid-template-columns: 1fr; }
  .bp.is-burger-head .bk-over-h { padding-block: 16px; }
  .bp.is-burger-head .bk-over-x { padding-right: 0; font-size: 28px; margin-bottom: 20px; }
}

/* Footer: a big line whose letters flash, an oven dial that turns with the page, the newsletter line. */
.bk-dfoot { position: relative; margin-top: 255px; padding: 64px var(--mg); }
.bk-dfoot-top { position: relative; }
.bp.is-burger-head .bk-dfoot-t { margin: 0 180px 168px 0; font-family: var(--bp-display); font-size: var(--t0); line-height: 1; letter-spacing: -0.03em; }
.bp.is-burger-head .bk-dfoot-t a { color: var(--ink); }
.bp.is-burger-head .bk-dial { position: absolute; top: 0; right: 0; width: 164px; height: 164px; border-radius: 50%; overflow: hidden; user-select: none; }
.bk-dial-s { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.bk-dial-s.no-ease { transition: none; }
.bk-dial-bg { fill: var(--grey); }
.bk-dial-g rect { fill: var(--pg); transition: fill .6s; }
.bk-dial-g text { fill: var(--ink); font: 600 10px var(--bp-body); letter-spacing: -0.02em; transition: fill .6s; }
.bk-dial-g.is-on rect { fill: #f9f8f8; }
.bk-dial-g.is-on text { fill: #1c1c1c; }
.bk-dfoot-low { display: flex; align-items: flex-end; column-gap: 12px; }
.bk-letter { flex: 1 1 50%; display: flex; align-items: center; gap: 6px; color: var(--grey); font-family: var(--bp-body); font-weight: 500; font-size: var(--p1); line-height: 1.15; letter-spacing: -0.03em; transition: color .15s; }
.bk-letter[data-state="default"]:hover, .bp.is-inverted .bk-letter[data-state="default"] { color: #ff7825; }
.bp.is-inverted .bk-letter[data-state="default"] .bk-letter-b { border-color: currentColor; }
.bk-letter-st { display: grid; }
.bk-letter-st > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }
.bk-letter[data-state="default"] .bk-letter-d, .bk-letter[data-state="input"] .bk-letter-f, .bk-letter[data-state="feedback"] .bk-letter-m { opacity: 1; visibility: visible; transition: opacity .25s; }
.bk-letter-d { cursor: pointer; }
.bp.is-burger-head .bk-letter-f { min-width: 240px; padding: 0 0 2px; border: 0; outline: none; background: linear-gradient(var(--grey), var(--grey)) no-repeat 0 100% / 0% 1px; color: var(--ink); font: inherit; transition: background-size .4s cubic-bezier(.22, 1, .36, 1), opacity .25s; }
.bk-letter[data-state="input"] .bk-letter-f { background-size: 100% 1px; }
.bk-letter-f::placeholder { color: var(--grey); }
.bk-letter-m { color: var(--ink); }
.bp.is-burger-head .bk-letter-b { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid var(--grey); border-radius: 50%; color: inherit; transition: opacity .25s, color .15s, border-color .15s; }
.bk-letter-b svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1; }
.bk-letter[data-state="feedback"] .bk-letter-b { opacity: 0; pointer-events: none; }
.bk-dfoot-nav { flex: 1 1 50%; display: flex; justify-content: flex-end; gap: 16px; }
.bp.is-burger-head .bk-dfoot-nav a { font-family: var(--bp-body); font-weight: 400; font-size: 11px; line-height: 22px; letter-spacing: .01em; text-transform: uppercase; color: var(--grey); }
.bp.is-burger-head .bk-dfoot-nav a:hover { color: var(--hover); }
@container bp (max-width: 767px) {
  .bk-dfoot { margin-top: 183px; padding: 64px var(--mg) 16px; }
  .bp.is-burger-head .bk-dfoot-t { margin-right: 96px; }
  .bp.is-burger-head .bk-dial { width: 100px; height: 100px; }
  .bk-dfoot-low { flex-direction: column; align-items: stretch; }
  .bk-letter { margin-bottom: 48px; }
  .bp.is-inverted .bk-letter[data-state="default"] { color: var(--grey); }
  .bk-dfoot-nav { flex-direction: column; justify-content: flex-start; gap: 12px; }
  .bk-dfoot .bk-cur { display: none; }
}

/* ======================================================================================
   Blocks as on Collins (header 'cover', footer 'index'): a book serif for lines and sentences,
   a plain sans for labels, rows and buttons; 98px margins at 1440 (24 on phones); round buttons;
   the warm off-white turns near-black from the cards on. Measured at 1440 and 390.
   ====================================================================================== */
.bp.is-cover-head {
  --pg: var(--bp-bg); --ink: var(--bp-ink); --lab: 68%;
  --m: 6.8cqi; --t1: 72px; --t2: 36px; --t3: 28px;
  font-family: var(--bp-body); font-weight: 400; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink); background: var(--pg); overflow-x: clip; transition: background-color .6s, color .6s;
}
.bp.is-cover-head.is-inverted { --pg: var(--inv-bg, #140700); --ink: var(--inv-ink, #f8f8f7); --lab: 82%; }
.bp.is-cover-head > * { --label: color-mix(in srgb, var(--ink) var(--lab), var(--pg)); --line: color-mix(in srgb, var(--ink) 14%, var(--pg)); }
@container bp (max-width: 767px) {
  .bp.is-cover-head > * { --m: 24px; --t1: 36.8px; --t2: 29px; --t3: 24px; }
}
:where(.bp.is-cover-head) :where(h1, h2, h3, p, ul, figure, hgroup) { margin: 0; font-weight: inherit; }
.bp.is-cover-head ul { list-style: none; padding: 0; }
:where(.bp.is-cover-head) a { color: inherit; text-decoration: none; }
.bp.is-cover-head .bk { margin-inline: 0; }
.bp.is-cover-head .bk + .bk { margin-top: 0; }
.bp.is-cover-head .bk-media { background: color-mix(in srgb, var(--ink) 12%, var(--pg)); }
.bp.is-cover-head .bk-pin { position: sticky; top: 0; height: 0; z-index: 50; }
.bp.is-cover-head .bk-cmenu-pin { z-index: 49; }
.bk-go { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; flex: none; }

/* Header: the name in spaced capitals, two lines for the menu; it leaves going down and comes back going up. */
.bk-cbar { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 24px var(--m) 32px; color: var(--ink); transition: transform .45s cubic-bezier(.215, .61, .355, 1), color .6s; }
.bk-cbar.is-gone { transform: translateY(-100%); }
.bp.is-cmenu .bk-cbar { color: #f8f8f7; }
.bp.is-cover-head .bk-clogo { font-family: var(--bp-body); font-weight: 600; font-size: 19px; line-height: 18px; letter-spacing: .2em; }
.bp.is-cover-head .bk-cmenu-btn { position: relative; width: 28px; height: 18px; padding: 1px 6px; color: inherit; }
.bk-cmenu-btn i { position: absolute; left: 6px; width: 16px; height: 1.5px; background: currentColor; transition: transform .45s cubic-bezier(.645, .045, .355, 1); }
.bk-cmenu-btn i:first-child { top: 5px; }
.bk-cmenu-btn i:last-child { top: 11px; }
.bk-cmenu-btn[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
.bk-cmenu-btn[aria-expanded="true"] i:last-child { transform: translateY(-3px) rotate(-45deg); }

/* The menu: the dark colour over the whole screen; big lines left, three stories right, newsletter below. */
.bk-cmenu { position: absolute; inset: 0 0 auto; height: var(--bk-vh, 100vh); display: grid; grid-template-columns: 1fr 360px; grid-template-rows: 1fr auto; column-gap: 64px; padding: 160px 15.5cqi 48px; background: var(--inv-bg, #140700); color: #f8f8f7; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; overflow: auto; }
.bp.is-cmenu .bk-cmenu { opacity: 1; visibility: visible; transition: opacity .45s; }
.bk-cbig { display: flex; flex-direction: column; gap: 16px; font-family: var(--bp-display); font-size: var(--t1); line-height: 1; letter-spacing: -0.02em; }
.bk-cbig a { color: #fff; transition: color .7s cubic-bezier(.215, .61, .355, 1); }
.bk-cbig:hover a { color: color-mix(in srgb, #fff 45%, transparent); }
.bk-cbig a:hover { color: #fff; }
.bk-cpills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 43px; font-size: 16px; }
.bk-cpills a { color: #fff; }
.bp.is-cover-head .bk-cmail { display: grid; height: 45px; padding: 0 24px; border-radius: 96px; background: #fff; color: #140700; font-size: 14px; line-height: 45px; overflow: hidden; }
.bk-cmail > span { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.19, 1, .22, 1), opacity .3s; }
.bk-cmail-b, .bk-cmail-c { transform: translateY(100%); opacity: 0; }
.bk-cmail:hover .bk-cmail-a { transform: translateY(-100%); opacity: 0; }
.bk-cmail:hover .bk-cmail-b { transform: none; opacity: 1; }
.bk-cmail.is-copied .bk-cmail-a, .bk-cmail.is-copied .bk-cmail-b { transform: translateY(-100%); opacity: 0; }
.bk-cmail.is-copied .bk-cmail-c { transform: none; opacity: 1; }
.bk-cmenu-stories { display: flex; flex-direction: column; gap: 16px; align-self: start; font-size: 14px; }
.bk-cmenu-stories a { display: grid; grid-template-columns: 112px 1fr 12px; gap: 16px; align-items: start; }
.bk-cmenu-stories .bk-media { aspect-ratio: 1; border-radius: 8px; }
.bk-cmenu-stories small { display: block; margin-bottom: 8px; color: #d0d0c8; font-size: 12px; }
.bk-cmenu-low { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; }
@container bp (max-width: 767px) {
  .bk-cmenu { grid-template-columns: 1fr; padding: 120px var(--m) 32px; row-gap: 40px; }
  .bk-cmenu-stories { display: none; }
  .bk-cmenu-low { flex-direction: column; align-items: flex-start; gap: 32px; }
}

/* Newsletter and links, in the menu and the footer. */
.bk-cnews { position: relative; display: flex; flex-direction: column; gap: 16px; color: #fff; }
.bk-cnews label { padding-left: 10px; font-size: 16px; }
.bk-cnews-f { position: relative; display: flex; align-items: center; gap: 12px; width: 248px; height: 44px; padding: 0 16px; border: 1px solid color-mix(in srgb, #f8f8f7 26%, #140700); border-radius: 160px; color: #d0d0c8; }
.bk-cnews-f > svg { width: 17px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; flex: none; }
.bp.is-cover-head .bk-cnews input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; color: #f8f8f7; font: inherit; font-size: 16px; outline: none; }
.bk-cnews input::placeholder { color: #d0d0c8; }
.bp.is-cover-head .bk-cnews button { position: absolute; right: -44px; top: 4px; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 160px; background: #fff; color: #140700; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .8s cubic-bezier(.19, 1, .22, 1); }
.bk-cnews.has-text button { opacity: 1; transform: none; }
.bk-cnews-m { position: absolute; top: 100%; left: 10px; margin-top: 8px; font-size: 14px; color: #d0d0c8; }
.bk-csocial { display: flex; gap: 32px; color: #d0d0c8; }
.bk-csocial a:hover { color: #fff; }

/* First screen: one centred line, a grey line and awards between laurels. */
.bk-ctitle { position: relative; height: calc(var(--bk-vh, 900px) * .9); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 var(--m); text-align: center; }
.bp.is-cover-head .bk-ctitle-t { font-family: var(--bp-display); font-weight: 400; font-size: var(--t1); line-height: 1; letter-spacing: -0.02em; opacity: 0; transform: translateY(40px); transition: opacity 1s .1s, transform 2s cubic-bezier(.19, 1, .22, 1) .1s; }
.bk-ctitle.is-in .bk-ctitle-t { opacity: 1; transform: none; }
.bk-awards { position: absolute; left: 0; right: 0; bottom: 86px; display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: 12px; line-height: 1; letter-spacing: -0.05em; }
.bk-awards-l { color: var(--label); }
.bk-awards-r { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px 12px; width: 500px; }
.bk-awards-r li { display: flex; align-items: center; gap: 3px; width: 112px; justify-content: center; }
.bk-laurel { width: 9px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1; flex: none; }
.bk-laurel-r { transform: scaleX(-1); }
@container bp (max-width: 767px) {
  .bk-ctitle { height: calc(var(--bk-vh, 844px) * .9); }
  .bk-awards { bottom: 104px; flex-direction: row; justify-content: center; gap: 12px; }
  .bk-awards-r { width: auto; display: grid; }
  .bk-awards-r li { grid-area: 1 / 1; width: auto; opacity: 0; transition: opacity .5s; }
  .bk-awards-r li.is-on { opacity: 1; }
}

/* The film: rounded, 90 % wide at first, the full width once its top reaches the top of the screen. */
.bk-grow { padding: 0 var(--m); margin-bottom: 170px; }
.bk-grow-box { will-change: transform; }
.bk-grow-in { position: relative; aspect-ratio: 1244 / 700; border-radius: 12px; overflow: hidden; transform: scale(.9); will-change: transform; background: #000; }
.bk-grow-in figure { position: absolute !important; inset: 0; opacity: 0; transition: opacity .6s; }
.bk-grow-in figure.is-on { opacity: 1; }
@container bp (max-width: 767px) { .bk-grow { margin-bottom: 120px; } .bk-grow-in { aspect-ratio: 342 / 608; } }

/* Section heads: a grey label, a serif sentence, a round button (dark, or white on the dark part). */
.bk-chead { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.bk-chead hgroup { display: flex; flex-direction: column; gap: 18px; max-width: 500px; }
.bp.is-cover-head .bk-clabel { font-family: var(--bp-body); font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; color: var(--label); }
.bp.is-cover-head .bk-cline { font-family: var(--bp-display); font-size: var(--t2); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.bp.is-cover-head .bk-cbtn { display: inline-flex; align-items: center; height: 45px; padding: 0 24px; border-radius: 96px; background: var(--ink); color: var(--pg); font-size: 14px; line-height: 1; transition: transform .8s cubic-bezier(.19, 1, .22, 1), background-color .6s, color .6s; }
.bp.is-cover-head .bk-cbtn.is-light { background: #fff; color: #140700; }
.bk-cbtn:hover { transform: scale(1.04); }

/* Ruled rows: a name, a grey line, an arrow that shows where you point. */
.bk-crows { padding: 96px var(--m); }
.bk-crows-l { margin-top: 64px; }
.bk-crows-l li { border-bottom: 1px solid var(--line); transition: opacity .25s cubic-bezier(.215, .61, .355, 1); }
.bk-crows-l:hover li:not(:hover) { opacity: .45; }
.bk-crows-l a { display: grid; grid-template-columns: minmax(0, 454fr) minmax(0, 454fr) minmax(0, 303fr); gap: 16px; align-items: center; padding: 32px 0; }
.bk-crows-t { font-size: var(--t3); line-height: 1.05; letter-spacing: 0; }
.bk-crows-x { color: var(--label); }
.bk-crows-l .bk-go { justify-self: end; width: 16px; height: 16px; opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .5s cubic-bezier(.215, .61, .355, 1); }
.bk-crows-l a:hover .bk-go { opacity: 1; transform: none; }
.bk-crows-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 23px; font-size: 14px; }
@container bp (max-width: 767px) {
  .bk-crows { padding: 96px var(--m) 80px; }
  .bk-crows-l a { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
  .bk-crows-l .bk-go { display: none; }
}

/* Cards in three heights on one line; they tip up one after another; a drag moves the row. */
.bk-tiers { padding: 120px 0 80px; }
.bk-tiers .bk-chead { margin: 0 var(--m); }
.bk-tiers-row { display: flex; align-items: flex-end; gap: 16px; margin-top: 64px; padding: 0 var(--m); overflow: auto hidden; scrollbar-width: none; perspective: 1400px; cursor: grab; }
.bk-tiers-row::-webkit-scrollbar { display: none; }
.bk-tiers-row.is-drag { cursor: grabbing; }
.bk-tier { position: relative; flex: none; width: 25.14cqi; user-select: none; }
.bp.is-cover-head .bk-tier .bk-media { aspect-ratio: var(--r); border-radius: 16px; transform-origin: 50% 100%; opacity: 0; transform: rotateX(50deg); transition: transform .8s cubic-bezier(.19, 1, .22, 1) calc(var(--i) * 80ms), opacity .5s calc(var(--i) * 80ms), scale .6s cubic-bezier(.19, 1, .22, 1); }
.bk-tiers.is-in .bk-tier .bk-media { opacity: 1; transform: none; }
.bk-tier:hover .bk-media { scale: 1.03; }
.bk-tier img { -webkit-user-drag: none; }
.bk-tier-t { position: absolute; left: 12px; bottom: 12px; padding: 10px 16px; border-radius: 96px; background: rgba(255, 255, 255, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 14px; line-height: 1; opacity: 0; transition: opacity .3s; }
.bk-tier:hover .bk-tier-t { opacity: 1; }
@container bp (max-width: 767px) {
  .bk-tiers { padding: 117px 0 64px; }
  .bk-tier { width: 254px; }
  .bp.is-cover-head .bk-tier .bk-media { aspect-ratio: 4 / 5; }
}

/* Stories: a full-screen slideshow with the head at the left and bars and the story name at the foot. */
.bp.is-cover-head .bk + .bk-stories { margin-top: 80px; }
.bk-stories { position: relative; height: var(--bk-vh, 900px); overflow: hidden; color: #fff; display: flex; align-items: center; padding: 0 var(--m); }
.bk-stories-pics { position: absolute; inset: -90px 0; will-change: transform; }
.bk-stories-pics figure { position: absolute !important; inset: 0; opacity: 0; transition: opacity 1s; }
.bk-stories-pics figure.is-on { opacity: 1; }
.bk-stories-pics::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 50%); }
.bk-stories-prev, .bk-stories-next { position: absolute; top: 0; bottom: 0; width: 50%; }
.bk-stories-prev { left: 0; cursor: w-resize; } .bk-stories-next { right: 0; cursor: e-resize; }
.bk-stories .bk-chead { position: relative; pointer-events: none; }
.bk-stories .bk-chead a { pointer-events: auto; }
.bp.is-cover-head .bk-stories .bk-clabel { color: #d0d0c8; }
.bk-stories-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 32px var(--m); pointer-events: none; }
.bk-stories-bars { display: flex; gap: 16px; margin-bottom: 3px; }
.bk-sbar { position: relative; width: 64px; height: 3px; border-radius: 4px; background: rgba(255, 255, 255, .5); overflow: hidden; }
.bk-sbar i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.bk-stories-links { display: grid; pointer-events: auto; }
.bk-story { grid-area: 1 / 1; justify-self: end; display: inline-flex; white-space: nowrap; align-items: center; gap: 12px; height: 45px; padding: 0 24px; border-radius: 96px; background: rgba(255, 255, 255, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; opacity: 0; transform: translateY(8px); transition: transform .8s cubic-bezier(.19, 1, .22, 1), opacity .5s; pointer-events: none; }
.bk-story.is-on { opacity: 1; transform: none; pointer-events: auto; }
.bk-story svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; }
@container bp (max-width: 767px) {
  .bk-stories-foot { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .bk-story { justify-self: start; }
}

/* Footer: big centred lines, the round buttons, newsletter left and links right. */
.bk-cfooter { min-height: var(--bk-vh, 900px); display: flex; flex-direction: column; align-items: center; padding: 174px 15.5cqi 128px; background: var(--inv-bg, #140700); color: #fff; text-align: center; }
.bk-cfooter .bk-cpills { justify-content: center; }
.bk-cfooter-low { width: 100%; margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; text-align: left; }
.bk-cfooter-ph { display: none; }
@container bp (max-width: 767px) {
  .bk-cfooter { padding: 141px var(--m) 80px; }
  .bk-cfooter .bk-cpills { margin-top: 63px; }
  .bk-cfooter .bk-cpills a { display: none; }
  .bk-cfooter-low { margin-top: 64px; flex-direction: column; align-items: center; gap: 48px; }
  .bk-cfooter-cols { display: grid; grid-template-columns: 1fr 1fr; width: 248px; }
  .bk-cfooter-ph, .bk-cfooter-cols .bk-csocial { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .bk-cfooter-cols .bk-csocial { color: #d0d0c8; }
  .bk-cnews { align-items: center; }
  .bk-cbar { padding-top: 32px; }
  .bk-clogo { position: absolute; left: 50%; transform: translateX(-50%); }
  .bp.is-cover-head .bk-cmenu-btn { margin-left: auto; }
}

/* ======================================================================================
   Blocks as on Zendaya (header 'spread', footer 'signup'): a person's page. A condensed face in
   capitals for the name and the titles, a wide one for links and rows; a 2% margin (29px at 1440,
   8 on phones); rounded pictures; one warm paper colour throughout. Measured at 1440 and 390.
   ====================================================================================== */
.bp.is-spread-head {
  --pg: var(--bp-bg); --ink: var(--bp-ink);
  font-family: var(--bp-body); font-size: 16px; line-height: 1.3;
  color: var(--ink); background: var(--pg); overflow-x: clip;
}
/* The page is the container, so its sizes live on its children (as on Collins). */
.bp.is-spread-head > * { --m: 2cqi; --tint: #d2bb99; --text: "Geist", "Inter Variable", "Helvetica Neue", Arial, sans-serif; --zt: calc(37px + 22.3cqi); --zw: 47.6cqi; } /* the portrait's top and width */
@container bp (max-width: 767px) { .bp.is-spread-head > * { --zt: calc(37px + 30cqi); --zw: 81cqi; } }
:where(.bp.is-spread-head) :where(h1, h2, h3, p, ul, figure) { margin: 0; font-weight: inherit; }
.bp.is-spread-head ul { list-style: none; padding: 0; }
:where(.bp.is-spread-head) a { color: inherit; text-decoration: none; }
.bp.is-spread-head .bk { margin-inline: 0; }
.bp.is-spread-head .bk + .bk { margin-top: 0; }
.bp.is-spread-head .bk-media { background: color-mix(in srgb, var(--ink) 10%, var(--pg)); }
.bp.is-spread-head .bk-pin { position: sticky; top: 0; height: 0; z-index: 50; }
.bk-zfit { display: inline-block; white-space: nowrap; }
.bp.is-spread-head :is(.bk-zname-t, .bk-zbio-t, .bk-ztitle) { font-family: var(--bp-display); font-weight: var(--bp-display-wght, 700); text-transform: uppercase; letter-spacing: 0; }

/* Header: four links spread over the whole width, a dot before the current one. */
.bk-zbar { position: absolute; inset: 0 0 auto; padding: 12px calc(var(--m) + 6px); }
.bk-zbar nav { display: flex; justify-content: space-between; align-items: center; }
.bk-zbar a { font-family: var(--bp-body); display: inline-flex; align-items: center; gap: .45em; font-size: max(12px, 1.32cqi); font-weight: 700; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase; }
.bk-zbar a[aria-current]::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: currentColor; }
.bk-zbar a:hover { color: var(--tint); }

/* First screen: the name across the width stays put; the portrait scrolls up over it; the edge cuts the name. */
.bk-zname { position: relative; height: calc(var(--zt) + var(--zw) / .88 - 11.25cqi); }
.bk-zname-clip { position: absolute; inset: 0; overflow: clip; }
.bk-zname-t { padding: 37px var(--m) 0; font-size: 52cqi; line-height: .98; will-change: transform; }
.bk-zname-m { position: absolute !important; z-index: 1; left: calc(50% - var(--zw) / 2); top: var(--zt); width: var(--zw); aspect-ratio: 686 / 780; border-radius: max(20px, 3.3cqi); }

/* The list: a huge title, then wide capitals between thin rules; a picture at the right while pointing. */
.bk-zlist { position: relative; padding: 31cqi var(--m) 15cqi; }
@container bp (max-width: 767px) { .bk-zlist { padding-top: 41cqi; } }
.bp.is-spread-head .bk-ztitle { font-size: min(27cqi, 227px); line-height: .9; }
.bk-zlist-l a { display: block; padding: 36px 0 37px; border-bottom: 1px solid var(--ink); transition: color .25s; }
.bk-zlist-l li:first-child a { padding-top: 22px; }
.bp.is-spread-head .bk-zlist-l h3 { font-family: var(--bp-body); font-size: max(22px, 2.85cqi); font-weight: 700; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
.bk-zlist-l a:hover { color: var(--tint); }
.bk-zpeek { position: absolute; z-index: 2; top: 0; left: 74.3cqi; width: 17cqi; aspect-ratio: 245 / 279; border-radius: max(12px, 1.4cqi); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .3s; }
.bk-zpeek.is-on { opacity: 1; }
.bk-zpeek img { width: 100%; height: 100%; object-fit: cover; }
@container bp (min-width: 768px) { .bk-zlist-l h3::before { content: "•"; margin-right: .12em; } }
@container bp (max-width: 767px) { .bk-zlist-l a { padding: 28px 0 30px; } .bk-zpeek { display: none; } }

/* Press: a huge title, one wide rounded picture, a row of rounded covers and two thin arrows. */
.bk-zpress { padding: 0 var(--m) 21.7cqi; }
.bk-zpress-m { margin-top: 3.5cqi; aspect-ratio: 1382 / 900; border-radius: max(20px, 3.9cqi); }
.bk-zcovers { margin-top: max(16px, 1.94cqi); overflow: hidden; }
.bk-zcovers-t { display: flex; gap: max(10px, 1.94cqi); transition: transform .7s cubic-bezier(.19, 1, .22, 1); }
.bk-zcover { flex: none; width: calc((100% - 3 * max(10px, 1.94cqi)) / 4); }
.bk-zcover .bk-media { aspect-ratio: 4 / 5; border-radius: max(10px, 1.4cqi); }
.bk-zcover img { transition: scale .6s cubic-bezier(.19, 1, .22, 1); }
.bk-zcover:hover img { scale: 1.03; }
.bk-zcovers-nav { display: flex; justify-content: space-between; margin-top: 36px; padding: 0 6px; }
.bk-zcovers-nav svg { width: 12px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.2; }
@container bp (max-width: 767px) { .bk-zcover { width: 45%; } }

/* The story: the name again across the width, then three columns of small text. */
.bk-zbio { padding: 0 var(--m); }
.bk-zbio-t { font-size: 52cqi; line-height: .82; }
/* Running text: 20/28 at 1440, full ink, a touch tight. */
.bp.is-spread-head :is(.bk-zbio-cols, .bk-zsign label, .bk-zsign input, .bk-zsign-m, .bk-zlow) { font-family: var(--text); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.bk-zbio-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.36cqi; margin-top: -3.3cqi; font-size: clamp(15px, 1.39cqi, 20px); line-height: 1.4; }
.bk-zbio-cols p + p { margin-top: 1.4em; }
@container bp (max-width: 767px) { .bk-zbio-cols { grid-template-columns: 1fr; } .bk-zbio-cols > div + div { margin-top: 1.4em; } }

/* Footer: a round mark, one line, a round field and a round button; a copyright strip. */
.bk-zfoot { display: flex; flex-direction: column; padding-top: 9cqi; }
.bk-zmark { align-self: center; width: max(96px, 14.2cqi); aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.bk-zsign { margin-top: 9.4cqi; padding: 0 var(--m); }
.bk-zsign label { display: block; font-size: clamp(15px, 1.39cqi, 20px); line-height: 1.4; }
.bk-zsign-f { display: flex; justify-content: space-between; gap: 16px; margin-top: 15px; }
.bp.is-spread-head .bk-zsign input { width: max(220px, 20.9cqi); height: 60px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 80px; background: #fff; font-size: max(15px, 1.31cqi); outline: none; }
.bk-zsign input::placeholder { color: var(--ink); opacity: 1; }
.bk-zsign input:focus-visible { box-shadow: 0 0 0 2px var(--tint); }
.bp .bk-zsign button { width: max(140px, 18.3cqi); height: 60px; border-radius: 300px; background: var(--ink); color: var(--pg); font-size: max(13px, 1.31cqi); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; transition: background-color .25s; }
.bp .bk-zsign button:hover { background: color-mix(in srgb, var(--ink) 80%, var(--tint)); }
.bk-zsign-m { min-height: 1.4em; margin-top: 10px; font-size: clamp(14px, 1.07cqi, 15.5px); }
/* The strip is the paper warmed by the tint (#ddd0bd on #e3dcd0). */
.bk-zlow { display: flex; justify-content: space-between; align-items: center; min-height: 90px; margin-top: max(40px, 5.6cqi); padding: 0 var(--m); background: color-mix(in srgb, var(--tint) 35%, var(--pg)); font-size: clamp(13px, 1.07cqi, 15.5px); }
/* On a phone the field and the button share the row (216 + 138 at 390), 46px high. */
@container bp (max-width: 767px) { .bk-zsign-f { gap: 8px; } .bp.is-spread-head .bk-zsign input { flex: 1; min-width: 0; width: auto; height: 46px; } .bp .bk-zsign button { width: 35.4cqi; height: 46px; } }

/* A lead's own content in the Zendaya blocks: words in the cover's frame, phone and booking in the round field and button. */
/* Quote cards take the height of their words (the longest sets the row), not the cover's 4:5 frame. */
.bk-zquote { display: flex; }
.bk-zquote .bk-media { flex: 1; aspect-ratio: auto; overflow: visible; display: flex; flex-direction: column; justify-content: space-between; padding: max(18px, 1.94cqi); background: color-mix(in srgb, var(--tint) 35%, var(--pg)); color: var(--ink); }
.bk-zquote blockquote { margin: 0; font-family: var(--text); font-weight: 500; font-size: clamp(14px, 1.25cqi, 18px); line-height: 1.35; letter-spacing: -0.01em; }
.bk-zquote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 2.2em; font-size: clamp(12px, .97cqi, 14px); text-transform: uppercase; letter-spacing: .03em; }
.bk-zsign-l { font-family: var(--text); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(15px, 1.39cqi, 20px); line-height: 1.4; }
.bp :is(.bk-zfield, .bk-zbtn) { display: inline-flex; align-items: center; justify-content: center; width: max(260px, 22cqi); padding: 0 24px; height: 60px; white-space: nowrap; border-radius: 80px; font-size: max(13px, 1.31cqi); text-decoration: none; }
.bp .bk-zfield { border: 1px solid var(--ink); background: #fff; color: var(--ink); font-family: var(--text); font-weight: 500; }
.bp .bk-zbtn { background: var(--ink); color: var(--pg); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; transition: background-color .25s; }
.bp .bk-zbtn:hover { background: color-mix(in srgb, var(--ink) 80%, var(--tint)); }
@container bp (max-width: 767px) { .bp :is(.bk-zfield, .bk-zbtn) { flex: 1; min-width: 0; width: auto; padding: 0 12px; height: 46px; } }

/* A lead's own pictures in the WatchHouse blocks: they are not shot for white words on top, so the words get a soft shade,
   the tags a paper chip, and the action of every card sits on one line whatever the facts above it. */
.bp.is-lead .bk-slide figure::after, .bp.is-lead .bk-places-m figure::after, .bp.is-lead .bk-visit::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.bp.is-lead .bk-slide figure::after { background: linear-gradient(to bottom, rgb(0 0 0 / .32), transparent 22%, transparent 52%, rgb(0 0 0 / .5)); }
.bp.is-lead .bk-places-m figure::after { background: linear-gradient(to right, transparent 45%, rgb(0 0 0 / .6) 80%); }
.bp.is-lead .bk-visit::after { z-index: -1; background: linear-gradient(to bottom, transparent 45%, rgb(0 0 0 / .6)); }
.bp.is-lead .bk-count button { color: rgb(255 255 255 / .7); }
.bp.is-lead .bk-places-m figure { transition-duration: .9s; }
.bp.is-lead .bk-tag { padding: 4px 9px; background: var(--bp-bg); }
.bp.is-lead .bk-facts { margin-bottom: 13px; }
.bp.is-lead .bk-prod .bk-add { margin-top: auto; }
/* A lead's list rows are longer than a street name: a wider list, the year in its own column, rows a little apart. */
.bp.is-lead .bk-places-list { width: min(560px, calc(100% - 40px)); }
.bp.is-lead .bk-places-list li a { gap: 24px; padding-block: 6px; color: rgb(255 255 255 / .75); }
.bp.is-lead .bk-places-list li a span:last-child { flex: none; width: 9.5em; text-align: right; }

/* ---------- Gradogna: split first screen, project index, about, services, city chapters, contact ---------- */
.bp.is-g-head { --g-m: 1.4cqi; --g-sans: var(--bp-display); --g-serif: var(--bp-body); --g-grey: #8d8c8a; background: #000; color: #e0dfdf; font-family: var(--g-sans); letter-spacing: -.01em; }
:where(.bp.is-g-head) :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; font-weight: 400; }
.bp.is-g-head :is(p, h1, h2, h3, dd, dt, a, li, span, b) { text-align: start; }
.bp.is-g-head :is(.g-split-note, .g-split-r-foot, .g-split-r-foot *, .g-lens, .g-lens *, .g-split-cap) { text-align: center; }
.bp.is-g-head :is(ol, ul) { list-style: none; padding: 0; }
.bp.is-g-head img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp.is-g-head a { color: inherit; text-decoration: none; }
.bp.is-g-head .g-mark { font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.bp.is-g-head .g-kicker { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--g-grey); }

/* Header: the small logo and two lines; both stay on top and blend over pictures. */
.bp.is-g-head .bk-pin { position: sticky; top: 0; height: 0; z-index: 50; }
.bp.is-g-head .g-menu-pin { z-index: 49; }
.g-head { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--g-m); color: #fff; mix-blend-mode: difference; }
.g-logo { font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.g-burger { width: 34px; height: 20px; position: relative; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.g-burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s cubic-bezier(.22, 1, .36, 1), top .4s; }
.g-burger i:first-child { top: 6px; } .g-burger i:last-child { top: 13px; }
.g-menu-open .g-burger i:first-child { top: 9.5px; transform: rotate(45deg); }
.g-menu-open .g-burger i:last-child { top: 9.5px; transform: rotate(-45deg); }
.g-menu { position: absolute; inset: 0 0 auto; height: var(--bk-vh, 100vh); background: #000; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--g-m); clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.76, 0, .24, 1); }
.g-menu-open .g-menu { clip-path: inset(0); }
.g-menu ol { display: grid; gap: .4cqi; }
.g-menu li { display: flex; align-items: baseline; gap: 2cqi; border-top: 1px solid #222; padding-top: .6cqi; }
.g-menu li span { font-size: 12px; color: var(--g-grey); width: 4cqi; }
.g-menu li a { font-size: clamp(36px, 5.4cqi, 96px); letter-spacing: -.04em; line-height: 1.05; transition: color .3s; }
.g-menu li a:hover { color: var(--g-grey); }
.g-menu > p { position: absolute; left: var(--g-m); bottom: 20px; font-size: 12px; color: var(--g-grey); }

/* First screen: a card over a dark picture on the left, the city on the right. */
.g-split { display: grid; grid-template-columns: 61fr 39fr; height: var(--bk-vh, 100vh); min-height: 560px; }
.g-split-l { position: relative; overflow: hidden; display: grid; place-items: center start; padding-left: 9%; }
.g-split-bg { position: absolute; inset: 0; }
.g-split-bg img { filter: grayscale(1) brightness(.78) contrast(1.05); object-position: 56% 30%; }
.g-card { position: relative; width: clamp(240px, 24cqi, 360px); aspect-ratio: 345 / 405; background: #fff; color: #0c0c0c; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 14px 16px; margin-top: -4cqi; }
.g-card-top { display: flex; justify-content: space-between; font-size: 12px; color: #6f6f6f; }
.g-card-foot { position: relative; }
.g-card-role { font-size: 12px; color: #6f6f6f; margin-bottom: 6px; }
.g-card-t { font-size: clamp(26px, 2.75cqi, 40px); line-height: .98; letter-spacing: -.045em; max-width: 9ch; }
.g-card-foot .g-mark { position: absolute; right: 0; top: 18px; }
.g-split-note { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(80%, 520px); text-align: center; font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.g-split-note .g-mark { display: block; margin-bottom: 8px; }
.g-scroll { position: absolute; left: var(--g-m); bottom: 18px; font-size: 12px; color: var(--g-grey); }
.g-split-r { position: relative; overflow: hidden; color: #fff; }
.g-split-photo { position: absolute; inset: 0; }
.g-split-photo img { filter: brightness(.72); }
.g-split-cap { position: absolute; top: 22px; left: 0; right: 0; text-align: center; font-size: 11px; }
.g-lens { position: absolute; top: 34%; left: 0; right: 0; text-align: center; }
.g-lens .g-mark { display: block; margin-bottom: 10px; }
.g-lens-t { font-family: var(--g-serif); text-transform: uppercase; font-size: clamp(34px, 4.1cqi, 64px); line-height: .92; letter-spacing: -.02em; display: grid; justify-items: center; }
.g-lens-t > span { display: flex; align-items: center; gap: .25em; }
.g-lens-pic { display: inline-block; width: 1.9em; height: 1.25em; overflow: hidden; }
.g-split-r-foot { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-size: 13px; line-height: 1.35; display: grid; justify-items: center; gap: 4px; }
.g-split-r-foot a { margin-top: 8px; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* Project index: pictures on the left, a fixed column with the list, the number and the name on the right. */
.g-index { display: grid; grid-template-columns: 61fr 39fr; align-items: start; }
.g-proj { position: relative; height: calc(var(--bk-vh, 100vh) * 1.25); overflow: hidden; display: grid; place-items: center; }
.g-proj-bg { position: absolute; inset: 0; }
.g-proj-bg img { filter: blur(18px) brightness(.32) saturate(.8); transform: scale(1.15); }
.g-proj-m { position: relative; width: 66%; aspect-ratio: 3 / 2; will-change: transform; box-shadow: 0 30px 80px rgb(0 0 0 / .5); }
.g-index-r { position: sticky; top: 0; height: var(--bk-vh, 100vh); }
.g-index-pin { position: relative; height: 100%; padding: 70px var(--g-m) 22px; display: flex; flex-direction: column; }
.g-index-list { display: grid; gap: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.g-index-list li { display: flex; gap: 14px; color: #5d5c5a; transition: color .3s; }
.g-index-list li[aria-current] { color: #fff; }
.g-index-list li span { width: 32px; }
.g-index-n { position: absolute; right: var(--g-m); top: 58px; font-weight: 400; font-size: clamp(64px, 7.6cqi, 120px); line-height: .9; letter-spacing: -.05em; color: #fff; }
.g-index-foot { margin-top: auto; display: grid; gap: 10px; }
.g-index-foot.is-in > * { animation: g-rise .7s cubic-bezier(.22, 1, .36, 1) both; }
.g-index-foot.is-in > :nth-child(2) { animation-delay: .04s; } .g-index-foot.is-in > :nth-child(4) { animation-delay: .08s; }
@keyframes g-rise { from { opacity: 0; transform: translateY(18px); } }
.g-index-from { font-size: 11px; color: var(--g-grey); }
.g-index-line { font-size: 14px; line-height: 1.4; max-width: 34ch; color: #cfcfcf; }
.g-index-go { display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px solid #333; padding: 12px 0 10px; margin-top: 6px; }
.g-index-t { font-size: clamp(36px, 3.4cqi, 54px); line-height: .98; letter-spacing: -.04em; color: #fff; max-width: 10ch; }
.g-index-phone { display: none; }

/* About and services: grey labels, large sentences, rows between thin rules. */
.g-about, .g-serv { padding: 9cqi var(--g-m) 4cqi; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2cqi; row-gap: 2.4cqi; border-top: 1px solid #1c1c1c; }
.g-about .g-kicker, .g-serv .g-kicker { grid-column: 1 / -1; }
.g-about-t, .g-serv-t { font-size: clamp(40px, 5cqi, 82px); line-height: .96; letter-spacing: -.045em; color: #fff; grid-column: 1 / -1; max-width: 16ch; }
.g-about-p, .g-serv-p { grid-column: 2; font-size: clamp(16px, 1.45cqi, 22px); line-height: 1.38; color: #cfcfcf; max-width: 36ch; }
.g-fans { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 13px; color: var(--g-grey); text-transform: uppercase; letter-spacing: .02em; }
.g-stations { grid-column: 1 / -1; border-top: 1px solid #262626; }
.g-steps-k { grid-column: 1 / -1; margin-top: 2cqi; }
.g-steps { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; padding-top: 4px; --p: 0; }
.g-steps::before, .g-steps::after { content: ''; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: #2a2a2a; }
.g-steps::after { background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p)); }
.g-steps li { position: relative; display: grid; gap: 10px; align-content: start; color: #5d5c5a; transition: color .5s; }
.g-steps li.is-on { color: #fff; }
.g-steps-w { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.g-steps-dot { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: #000; border: 1px solid #555; margin: 4px 0 14px; transition: background .5s, border-color .5s; }
.g-steps li.is-on .g-steps-dot { background: #fff; border-color: #fff; }
.g-steps b { font-weight: 400; font-size: clamp(24px, 2.4cqi, 40px); letter-spacing: -.035em; }
.g-steps p { font-size: 15px; line-height: 1.45; color: #9a9998; max-width: 30ch; }
.g-steps li.is-on p { color: #cfcfcf; }
.g-stations li { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #262626; }
.g-stations b { font-weight: 400; font-size: clamp(22px, 2.2cqi, 36px); letter-spacing: -.03em; text-transform: uppercase; }
.g-stations span { font-size: 12px; color: var(--g-grey); white-space: nowrap; padding-left: 16px; }
.g-serv-l { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 2cqi; border-top: 1px solid #262626; }
.g-serv-l > div { padding: 18px 0 22px; border-bottom: 1px solid #262626; display: grid; gap: 10px; }
.g-serv-l > div + div { border-left: 1px solid #262626; padding-left: 2cqi; }
.g-serv-l dt { font-size: clamp(24px, 2.4cqi, 40px); letter-spacing: -.035em; color: #fff; }
.g-serv-l dd { font-size: 15px; line-height: 1.45; color: #bdbdbd; max-width: 40ch; }
.g-serv { padding-top: 5cqi; }
.g-serv-after { grid-column: 2; font-size: 15px; color: var(--g-grey); }

/* City chapters: the picture of the chapter in view fills the section behind the list. */
.g-chap { position: relative; color: #fff; }
.g-chap-bg { position: absolute; inset: 0; overflow: hidden; }
.g-chap-bg figure { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.g-chap-bg figure.is-on { opacity: 1; }
.g-chap-bg img { filter: brightness(.5); }
.g-chap-in { position: relative; padding: 12cqi var(--g-m) 6cqi; }
.g-chap-t { font-family: var(--g-serif); text-transform: uppercase; font-size: clamp(48px, 8.4cqi, 140px); line-height: .88; letter-spacing: -.02em; display: grid; margin: 1.4cqi 0 6cqi; }
.g-chap-t span:last-child { padding-left: 14cqi; }
.g-chap-l { border-top: 1px solid rgb(255 255 255 / .25); }
.g-chap-l li { display: grid; grid-template-columns: 6cqi 1fr 1fr; align-items: baseline; padding: 2.2cqi 0; border-bottom: 1px solid rgb(255 255 255 / .25); color: rgb(255 255 255 / .45); transition: color .4s; }
.g-chap-l li.is-on { color: #fff; }
.g-chap-l span { font-size: 12px; }
.g-chap-l h3 { font-size: clamp(22px, 2.6cqi, 44px); letter-spacing: -.035em; text-transform: uppercase; }
.g-chap-l p { font-family: var(--g-serif); font-size: clamp(16px, 1.5cqi, 24px); }
.g-chap-note { margin-top: 18px; font-size: 11px; color: rgb(255 255 255 / .55); }

/* Contact and footer. */
.g-contact { padding: 10cqi var(--g-m) 8cqi; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2cqi; row-gap: 2cqi; }
.g-contact .g-kicker, .g-contact-t { grid-column: 1 / -1; }
.g-contact-t { font-size: clamp(40px, 5cqi, 82px); line-height: .96; letter-spacing: -.045em; color: #fff; max-width: 14ch; }
.g-contact-p { font-size: 16px; color: #cfcfcf; grid-column: 1; grid-row: 3; align-self: start; }
.g-form { grid-row: 3; }
.g-form { grid-column: 2; display: grid; gap: 14px; }
.g-form label { display: grid; gap: 6px; font-size: 11px; text-transform: uppercase; color: var(--g-grey); letter-spacing: .03em; }
.g-form :is(input, textarea) { font: inherit; font-size: 16px; text-transform: none; letter-spacing: 0; color: #fff; background: none; border: 0; border-bottom: 1px solid #333; padding: 8px 0; outline: none; resize: vertical; }
.g-form :is(input, textarea):focus { border-color: #fff; }
.bp.is-g-head .g-form button { justify-self: start; margin-top: 8px; font: inherit; font-size: 14px; padding: 12px 22px; border: 1px solid #fff; background: #fff; color: #000; cursor: pointer; transition: background .3s, color .3s; }
.bp.is-g-head .g-form button:hover { background: none; color: #fff; }
.g-form-done { font-size: 13px; color: var(--g-grey); min-height: 1em; }
.g-form-done.is-bad { color: #e8a39b; }
.bp.is-g-head .g-form button:disabled { opacity: .5; }
.g-book { grid-column: 1 / -1; display: grid; gap: 14px; margin-top: 5cqi; padding-top: 3cqi; border-top: 1px solid #1c1c1c; }
.g-book-t { font-size: clamp(28px, 3cqi, 48px); letter-spacing: -.04em; color: #fff; }
.g-book-sub { font-size: 15px; color: #bdbdbd; }
.g-book-week { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.g-book-days, .g-book-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.bp.is-g-head :is(.g-book-prev, .g-book-next) { font: inherit; font-size: 22px; line-height: 1; width: 32px; height: 52px; background: none; border: 0; color: #8d8c8a; cursor: pointer; }
.bp.is-g-head :is(.g-book-prev, .g-book-next):disabled { opacity: .2; cursor: default; }
.bp.is-g-head .g-book-days button { font: inherit; display: grid; gap: 2px; justify-items: center; min-width: 64px; padding: 8px 10px; background: none; border: 0; border-bottom: 1px solid transparent; color: #8d8c8a; cursor: pointer; transition: color .2s, border-color .2s; }
.g-book-days small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.g-book-days span { font-size: 17px; }
.bp.is-g-head .g-book-days button:hover { color: #fff; }
.bp.is-g-head .g-book-days button[aria-checked="true"] { color: #fff; border-bottom-color: #fff; }
.bp.is-g-head .g-book-slots button { font: inherit; font-size: 15px; padding: 7px 12px; background: none; border: 0; color: #bdbdbd; cursor: pointer; transition: color .2s, background .2s; }
.bp.is-g-head .g-book-slots button:hover { color: #fff; }
.bp.is-g-head .g-book-slots button[aria-checked="true"] { background: #fff; color: #000; }
.g-book-form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 14px; align-items: end; margin-top: 10px; }
.g-book-form[hidden] { display: none; }
.g-book-pick { grid-column: 1 / -1; font-size: 15px; color: #fff; }
.g-book-form label { display: grid; gap: 6px; font-size: 11px; text-transform: uppercase; color: var(--g-grey); letter-spacing: .03em; }
.g-book-form input { font: inherit; font-size: 16px; color: #fff; background: none; border: 0; border-bottom: 1px solid #333; padding: 8px 0; outline: none; text-transform: none; letter-spacing: 0; }
.g-book-form input:focus { border-color: #fff; }
.g-book-hp { position: absolute; left: -9999px; }
.bp.is-g-head .g-book-form button { font: inherit; font-size: 14px; padding: 12px 22px; border: 1px solid #fff; background: #fff; color: #000; cursor: pointer; }
.bp.is-g-head .g-book-form button:disabled { opacity: .5; }
.g-book-status { font-size: 13px; color: var(--g-grey); min-height: 1em; }
.g-book-status.is-bad { color: #e8a39b; }
.g-contact-mail { grid-column: 2; font-size: 13px; color: var(--g-grey); }
.g-foot { padding: 0 var(--g-m) 20px; border-top: 1px solid #1c1c1c; }
.g-foot-big { font-size: 26cqi; line-height: .8; letter-spacing: -.07em; font-weight: 600; color: #fff; margin: 3cqi 0 2cqi; }
.g-foot-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--g-grey); }
.g-foot-row span:last-of-type { display: flex; gap: 18px; }

/* Phone: one column; the card first, the city under it, the projects as a list of pictures. */
@container bp (max-width: 767px) {
  .bp.is-g-head { --g-m: 20px; }
  .g-split { grid-template-columns: 1fr; height: auto; }
  .g-split-l { height: calc(var(--bk-vh, 100vh) * .92); }
  .g-split-l { place-items: end center; padding: 0 0 150px; }
  .g-split-note { bottom: 46px; }
  .g-split-bg img { object-position: 64% 20%; }
  .g-card { width: min(70%, 280px); }
  .g-split-r { height: calc(var(--bk-vh, 100vh) * .8); }
  .g-index { grid-template-columns: 1fr; }
  .g-index-l, .g-index-r { display: none; }
  .g-index-phone { display: grid; gap: 44px; padding: 56px var(--g-m); }
  .g-index-phone figure { aspect-ratio: 3 / 2; margin-bottom: 12px; }
  .g-index-phone span { font-size: 11px; color: var(--g-grey); }
  .g-index-phone h3 { font-size: 34px; letter-spacing: -.04em; line-height: 1; color: #fff; margin: 4px 0 8px; }
  .g-index-phone p { font-size: 15px; line-height: 1.4; color: #cfcfcf; }
  .g-index-phone small { display: block; margin-top: 8px; font-size: 11px; color: var(--g-grey); }
  .g-about, .g-serv, .g-contact { grid-template-columns: 1fr; padding: 64px var(--g-m) 48px; row-gap: 22px; }
  .g-about-p, .g-serv-p, .g-serv-after, .g-form, .g-contact-mail { grid-column: 1; }
  .g-book, .g-contact-p, .g-form { grid-row: auto; }
  .g-book-form { grid-template-columns: 1fr; }
  .g-serv-l { grid-template-columns: 1fr; }
  .g-serv-l > div + div { border-left: 0; padding-left: 0; }
  .g-chap-l li { grid-template-columns: 34px 1fr; }
  .bp.is-g-head .g-steps { grid-template-columns: 1fr; gap: 28px; padding-left: 26px; }
  .g-steps::before, .g-steps::after { left: 5px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .g-steps::after { transform-origin: 50% 0; transform: scaleY(var(--p)); }
  .g-steps-dot { position: absolute; left: -26px; top: 3px; margin: 0; }
  .g-chap-l p { grid-column: 2; margin-top: 4px; }
  .g-chap-t span:last-child { padding-left: 0; }
}

/* Reduced motion: no drift, no rising words, the menu just appears. */
.bp.is-g-head.is-reduced :is(.g-menu, .g-chap-bg figure) { transition: none; }
.bp.is-g-head.is-reduced .g-index-foot.is-in > * { animation: none; }
.bp.is-g-head.is-reduced :is(.g-steps li, .g-steps-dot) { transition: none; }

/* ---------- Ben, after the phone review (21.10.) ---------- */
/* Greg's block spacing (side margins, 120px between blocks) does not apply here: each section sets its own. */
.bp.is-g-head .bk { margin-inline: 0; }
.bp.is-g-head .bk + .bk { margin-top: 0; }
.bp.is-g-head { --bk-head-h: 64px; }
.bp.is-g-head [id^="bp-"] { scroll-margin-top: 72px; }

/* Card: the offer and a way to book a call. */
.g-card { aspect-ratio: auto; min-height: clamp(300px, 28cqi, 420px); }
.g-card-offer { margin-top: 12px; font-size: 14px; line-height: 1.4; color: #3c3c3c; max-width: 30ch; }
.bp.is-g-head .g-card-go { display: inline-flex; gap: 12px; align-items: center; margin-top: 14px; min-height: 44px; padding: 0 16px; background: #fff; color: #0c0c0c; border: 1px solid #0c0c0c; font-size: 14px; transition: background .25s, color .25s; }
.bp.is-g-head .g-card-go:hover { background: #0c0c0c; color: #fff; }
.g-split-bg picture { display: contents; }

/* Header: dark backing once the page has moved; away going down, back going up. */
.g-head-pin { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.g-head-pin.is-away { transform: translateY(-100%); }
.g-scrolled .g-head { mix-blend-mode: normal; background: rgb(0 0 0 / .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.g-menu-open .g-head { background: none; }
.bp.is-g-head .g-burger { width: 44px; height: 44px; margin-right: -5px; }
.bp.is-g-head .g-burger i { left: 5px; right: 5px; }
.bp.is-g-head .g-burger i:first-child { top: 18px; } .bp.is-g-head .g-burger i:last-child { top: 25px; }
.g-menu-open .g-burger i:first-child, .g-menu-open .g-burger i:last-child { top: 21.5px; }
.bp.is-g-head .g-logo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.g-head { padding-block: 10px; }

/* Bigger tap targets in the booking, the form and the footer. */
.bp.is-g-head .g-book-slots button { min-height: 44px; min-width: 64px; }
.bp.is-g-head :is(.g-book-prev, .g-book-next) { width: 44px; height: 56px; flex: none; }
.bp.is-g-head .g-book-days button { color: #cfcfcf; min-height: 56px; border-bottom-width: 2px; }
.g-form :is(input, textarea), .g-book-form input { min-height: 44px; }
.bp.is-g-head .g-foot-row a, .bp.is-g-head .g-contact-mail a { display: inline-flex; align-items: center; min-height: 44px; }
.g-foot-big { margin-top: 48px; }
.g-index-phone-h { display: none; }

@container bp (max-width: 767px) {
  /* The side margin as a variable on the children (a container query cannot style the container itself). */
  .bp.is-g-head > * { --g-m: 20px; }
  .g-head { padding-inline: 20px; }

  /* First screen: the face stays free, the card sits low and holds everything. */
  .g-split-l { height: calc(var(--bk-vh, 100vh) * .9); min-height: 560px; place-items: end center; padding: 0 20px 28px; }
  .g-split-bg img { object-position: 50% 20%; }
  .g-card { width: 100%; max-width: 420px; min-height: 0; padding: 14px 16px 18px; margin-top: 0; }
  .g-card-t { font-size: 34px; max-width: none; }
  .g-card-foot .g-mark, .g-split .g-mark, .g-scroll { display: none; }
  .g-split-r { height: auto; min-height: 0; padding: 72px 20px 56px; }
  .g-split-photo img { filter: brightness(.55); }
  .g-split-cap { top: 20px; }
  .g-lens { position: relative; top: auto; }
  .g-split-r-foot { position: relative; bottom: auto; margin-top: 20px; }

  /* Projects: a heading and the origin once. */
  .g-index-phone-h { display: grid; gap: 8px; padding: 48px 20px 0; }
  .g-index-phone-from { font-size: 14px; line-height: 1.4; color: #8d8c8a; }
  .g-index-phone { padding-top: 28px; gap: 36px; }

  /* Less empty space between the sections. */
  .g-about, .g-serv, .g-contact { padding: 44px 20px 32px; row-gap: 18px; }
  .g-chap-in { padding: 56px 20px 40px; }
  .g-chap-t { margin: 10px 0 28px; }
  .g-chap-note { color: rgb(255 255 255 / .75); }

  /* Booking: the week in one row with the arrows beside it. */
  .g-book-week { gap: 0; }
  .g-book-days { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
  .bp.is-g-head .g-book-days button { min-width: 0; padding: 6px 2px; }
  .g-book-days span { font-size: 15px; }
  .g-book-slots { gap: 4px; }
  .g-foot { padding: 0 20px 12px; }
}

/* ---------- Phone only (21.10., second round): clear section headings, projects as stacking cards ---------- */
@container bp (max-width: 767px) {
  /* Section headings: larger, lighter, with a thin rule above. */
  .bp.is-g-head .g-kicker { font-size: 13px; letter-spacing: .08em; color: #e0dfdf; padding-top: 14px; border-top: 1px solid #3a3a3a; }
  .g-card .g-kicker { border: 0; padding: 0; }
  .g-chap .g-kicker { color: #fff; border-top-color: rgb(255 255 255 / .35); }

  /* Projects: cards that stick and pile up while scrolling, little text. */
  .g-index-phone { gap: 0; padding: 24px 20px 40px; }
  .g-index-phone li { position: sticky; top: calc(70px + var(--k, 0) * 8px); display: flex; flex-direction: column; height: min(74svh, 640px); background: #0b0b0b; border: 1px solid #2a2a2a; padding: 10px 10px 18px; margin-bottom: 12vh; }
  .g-index-phone li figure { flex: 1; min-height: 0; aspect-ratio: auto; }
  .g-index-phone li figure img { height: 100%; object-fit: cover; }
  .g-index-phone li:last-child { margin-bottom: 0; }
  .g-index-phone figure { margin-bottom: 14px; }
  .g-index-phone span { display: inline-block; font-size: 12px; color: #e0dfdf; letter-spacing: .04em; }
  .g-index-phone h3 { font-size: 30px; margin: 4px 0 6px; }
  .g-index-phone p { font-size: 14px; line-height: 1.4; color: #a9a9a9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Review fixes (21.10., third round) ---------- */
/* Projects: one screen each instead of one and a quarter. */
.g-proj { height: var(--bk-vh, 100vh); }
/* City chapters: the rows not in view stay readable over the photo. */
.g-chap-l li { color: rgb(255 255 255 / .62); text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
/* Jumps land with a little air under the header. */
.bp.is-g-head [id^="bp-"] { scroll-margin-top: 84px; }
@container bp (max-width: 767px) {
  /* Menu: the number keeps its own width next to the link. */
  .g-menu li span { width: auto; min-width: 40px; flex: none; }
}