/* nilesportsgroup.com. Black and white, Schibsted Grotesk only (Deng, 13 Nov 2026).
   The brand lives in the NILE word with the river cut and in real photos, so the
   page itself carries no colour, no decoration and no effects.
   What moves: the headline once when the page opens, a picture that is still loading
   fades in, links and buttons on hover. Reduced motion turns all three off.
   The font is self-hosted (SIL Open Font License, assets/fonts/SchibstedGrotesk-OFL.txt),
   so no visitor data goes to a font host. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --black: #0B0B0B; --white: #FFFFFF;
  --grey: #5C5C5C;            /* second lines on white */
  --grey-k: #A3A3A3;          /* second lines on black */
  --line: #E2E2E2; --mist: #F4F4F4;
  --line-k: rgba(255, 255, 255, .18);
  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --r: 6px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--black); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
b, strong { font-weight: 600; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--black); color: var(--white); }
.k ::selection { background: var(--white); color: var(--black); }
[id] { scroll-margin-top: 96px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: clamp(72px, 10vw, 136px); }
.sec.tight { padding-block: clamp(48px, 6vw, 80px); }
.k { background: var(--black); color: var(--white); }
.m { background: var(--mist); }

/* Type: one face, 600 for headlines, 400 for text. */
.h-xl { font-size: clamp(40px, 7.4vw, 104px); font-weight: 600; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.h-lg { font-size: clamp(34px, 5.4vw, 76px); font-weight: 600; line-height: 1.03; letter-spacing: -.02em; text-wrap: balance; }
.h-md { font-size: clamp(28px, 3.6vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -.016em; text-wrap: balance; }
.h-sm { font-size: clamp(21px, 2vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--grey); max-width: 34em; text-wrap: pretty; }
.k .lede { color: var(--grey-k); }
.lede b { color: var(--black); font-weight: 400; }
.k .lede b { color: var(--white); }

/* Links are plain underlined text. */
.link, .prose a, .facts a, .steps p a, .lede a, .fine a, .wait a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: opacity .2s; }
.link { font-weight: 600; font-size: 16px; }
.link:hover, .prose a:hover, .facts a:hover, .steps p a:hover, .lede a:hover, .fine a:hover { opacity: .6; }

/* The one button: Talk to Deng. Black on white pages, white on black bands. */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: var(--r); border: 1px solid var(--black); background: var(--black); color: var(--white); font-weight: 600; font-size: 16.5px; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.btn:hover { background: #2B2B2B; border-color: #2B2B2B; }
.k .btn { background: var(--white); color: var(--black); border-color: var(--white); }
.k .btn:hover { background: #D9D9D9; border-color: #D9D9D9; }
.btn.btn-sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
/* In the header the button is an outline, so each screen has one filled button. */
.k .btn.btn-line { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .5); }
.k .btn.btn-line:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* Preview strip: only while the site is a private preview. */
.pre { background: var(--mist); color: var(--grey); font-size: 13.5px; line-height: 1.4; padding: 8px 0; }

/* Header: black on every page, the word mark on the left. */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--black); color: var(--white); border-bottom: 1px solid var(--line-k); }
.hdr > .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; margin-right: auto; padding: 8px 0; }
.brand img { height: 20px; width: auto; }
.nav { display: flex; gap: 24px; }
.nav a { padding: 8px 0; font-size: 15px; color: var(--grey-k); text-decoration: none; transition: color .2s; }
.nav a:hover { color: var(--white); }
.nav a[aria-current] { color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; }
.burger { display: none; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: transform .3s var(--ease); }
.burger span + span { margin-top: 6px; }
.menu-open .burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 40; background: var(--black); color: var(--white); padding: 120px var(--gut) 32px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; overflow-y: auto; }
.menu-open .menu { opacity: 1; visibility: visible; }
html.menu-open { overflow: hidden; }
.menu a.big { display: block; padding: 13px 0; border-bottom: 1px solid var(--line-k); font-size: 28px; font-weight: 600; letter-spacing: -.015em; text-decoration: none; }
.menu .btn { margin-top: 28px; align-self: flex-start; }
@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: flex; }
  .hdr > .wrap { height: 60px; gap: 14px; }
}
@media (min-width: 981px) { .menu { display: none; } }

/* Hero: the headline on plain black. */
.hero { padding: clamp(56px, 9vw, 128px) 0 clamp(40px, 5vw, 72px); }
.hero h1 { max-width: 11.5em; }
.hero .lede { margin-top: clamp(24px, 3vw, 40px); }
.hero .acts { margin-top: clamp(28px, 3vw, 40px); }
.hero .slot { margin-top: clamp(48px, 6vw, 88px); }
.phero { padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 88px); }
.phero h1 { max-width: 13em; }
.phero .lede { margin-top: clamp(20px, 2.4vw, 32px); }
.phero .acts { margin-top: clamp(28px, 3vw, 40px); }

/* The headline comes in once when the page opens. Nothing else moves on its own. */
.js .hero h1, .js .phero h1 { animation: rise .9s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

/* Heading on the left, content on the right. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(28px, 6vw, 96px); align-items: start; }
.split > .side { display: grid; gap: 18px; justify-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }

/* Home: the four things we sell, one row each. The whole row is the link. */
.doors { border-top: 1px solid var(--black); }
.doors a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 8px clamp(24px, 4vw, 64px); align-items: baseline; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.doors h3 { font-size: clamp(28px, 3.8vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -.018em; }
.doors p { color: var(--grey); max-width: 30em; }
.doors .go { justify-self: end; font-size: 15.5px; font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: transparent; transition: text-decoration-color .2s; }
.doors a:hover .go, .doors a:focus-visible .go { text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .doors a { grid-template-columns: 1fr; }
  .doors .go { justify-self: start; margin-top: 6px; text-decoration-color: currentColor; }
}

/* Steps: an ordinary numbered list, one row each. */
.steps { counter-reset: s; border-top: 1px solid var(--black); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.2em minmax(0, 5fr) minmax(0, 6fr); gap: 6px clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s) "."; font-size: clamp(20px, 2vw, 26px); font-weight: 600; color: var(--grey); }
.steps h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.steps p { color: var(--grey); max-width: 32em; }
.k .steps { border-top-color: var(--white); }
.k .steps li { border-bottom-color: var(--line-k); }
.k .steps li::before, .k .steps p { color: var(--grey-k); }
@media (max-width: 760px) {
  .steps li { grid-template-columns: 2em minmax(0, 1fr); }
  .steps p { grid-column: 2; }
}
/* Home: three steps side by side. */
.steps.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); border-top: 0; }
.steps.three li { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; padding: 20px 0 0; border-bottom: 0; border-top: 1px solid var(--black); }
.steps.three p { grid-column: auto; }
@media (max-width: 760px) { .steps.three { grid-template-columns: 1fr; gap: 32px; } }

/* Facts: what a family can count on. A bold first sentence, grey after it. */
.facts { border-top: 1px solid var(--black); }
.facts li { padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--grey); line-height: 1.55; }
.facts b { color: var(--black); }
.k .facts { border-top-color: var(--white); }
.k .facts li { border-bottom-color: var(--line-k); color: var(--grey-k); }
.k .facts b { color: var(--white); }

/* Places: a short list of countries, two columns of text. */
.places { border-top: 1px solid var(--black); }
.places li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 4px 32px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.places h3 { font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; letter-spacing: -.01em; }
.places p { color: var(--grey); }
@media (max-width: 560px) { .places li { grid-template-columns: 1fr; } }

/* Deng: the person you talk to. */
.person { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(28px, 6vw, 96px); align-items: start; }
.person .slot { aspect-ratio: 4 / 5; }
.person-copy { display: grid; gap: 18px; justify-items: start; }
.person-copy .role { color: var(--grey); margin-top: -10px; }
.person-copy p { max-width: 34em; }
.person-copy .sign { font-weight: 600; }
@media (max-width: 760px) { .person { grid-template-columns: 1fr; } .person .slot { max-width: 320px; } }

/* Real photos: a plain frame, no effects. */
picture { display: block; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; border-radius: var(--r); background: var(--mist); }
@media (max-width: 760px) { .person .portrait { max-width: 320px; } }
.aside .portrait { max-width: 320px; }
.shot { width: 100%; max-width: 420px; }
.shot img { width: 100%; object-fit: cover; border-radius: var(--r); background: var(--mist); }
.shot.tall img { aspect-ratio: 4 / 5; }
.side .shot { margin-top: 10px; }
@media (max-width: 900px) { .side .shot { max-width: 320px; } }
/* Three small photos in a row, on every screen. The Malmö files are small, so they stay small. */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: #DCDCDC; }
/* A wide real photo with one plain line under it. Each has its own phone cut (4:3). */
.photo img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r); background: var(--mist); }
.photo figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--grey); }
.k .photo img { background: #151515; }
.k .photo figcaption { color: var(--grey-k); }
.hero .photo { margin-top: clamp(48px, 6vw, 88px); }
.photo.narrow { max-width: 760px; }
.photo.narrow img { aspect-ratio: 1063 / 692; }
@media (max-width: 760px) { .photo img { aspect-ratio: 4 / 3; } .photo.narrow img { aspect-ratio: 800 / 521; } }
/* A picture that is still loading fades in when it arrives. Ones already there do not move. */
.js img.arriving { opacity: 0; }
img { transition: opacity .4s var(--ease); }

/* Experience: where Deng has played and coached. Place on the left, the rest on the right. */
.cv { border-top: 1px solid var(--black); }
.cv li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) 7.5em; gap: 2px 24px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.cv b { font-weight: 600; }
.cv span { color: var(--grey); }
.cv .yr { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .cv li { grid-template-columns: 1fr; } .cv .yr { text-align: left; } }
.creds { border-top: 1px solid var(--black); width: 100%; }
.creds li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.m .creds li, .m .cv li, .m .facts li, .m .places li { border-bottom-color: #D6D6D6; }

/* Crests: clubs, schools and programs. Shown in grey so the page stays black and white. */
.crests { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(16px, 2.4vw, 32px); }
.crests li { display: grid; gap: 14px; justify-items: center; align-content: start; text-align: center; }
.crests img { width: auto; height: clamp(60px, 6.4vw, 84px); object-fit: contain; filter: grayscale(1); }
.crests span { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.35; color: var(--grey); }
.crests b { font-size: 14.5px; color: var(--black); }
.crests img { max-width: min(100%, 136px); }
.crests picture { display: grid; justify-items: center; width: 100%; }
.crests + .fine { margin-top: clamp(28px, 3vw, 40px); }
.crests.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* The launch build until each school or club has said yes: names in type, hairlines, no crest. */
.crests.names { row-gap: 0; }
.crests.names li { justify-items: start; text-align: left; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.k .crests.names li { border-top-color: var(--line-k); }
.crests.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crests.four img { height: clamp(64px, 7vw, 96px); max-width: min(100%, 168px); }
@media (max-width: 900px) { .crests, .crests.five { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .crests, .crests.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crests.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.more { margin-top: 20px; }
/* About: everyone, one row per country. The country on the left, its crests on the right. */
.groups { border-top: 1px solid var(--black); }
.group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px clamp(28px, 6vw, 96px); align-items: start; padding: clamp(28px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.group h3 { font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.groups + .fine { margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 900px) { .group { grid-template-columns: 1fr; } }
.went { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--black); }
.went li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.went img { width: 96px; height: 96px; object-fit: contain; filter: grayscale(1); }
.went .ty { display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid var(--black); border-radius: 50%; font-size: 12.5px; font-weight: 600; line-height: 1.15; text-align: center; }
.went span { display: grid; gap: 2px; color: var(--grey); }
.went b { color: var(--black); font-size: 19px; }
.went + .fine { margin-top: 20px; }
@media (max-width: 700px) { .went { grid-template-columns: 1fr; } }

/* Photo slots and waiting notes. Both are for the preview only and go before launch.
   A slot holds the place of a real photo. A note names a fact we cannot print yet. */
.slot { display: grid; place-content: center; gap: 4px; padding: 24px; aspect-ratio: 16 / 9; border: 1px dashed #9A9A9A; border-radius: var(--r); background: var(--mist); color: var(--grey); font-size: 14.5px; line-height: 1.45; text-align: center; }
.slot b { font-weight: 600; color: var(--black); }
.k .slot { background: #151515; border-color: rgba(255, 255, 255, .34); color: var(--grey-k); }
.k .slot b { color: var(--white); }
.slot.wide { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .hero .slot, .slot.wide { aspect-ratio: 4 / 3; } }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.slots .slot { aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .slots { grid-template-columns: minmax(0, 1fr); } .slots .slot { aspect-ratio: 4 / 3; } }
.wait { padding: 14px 16px; border-left: 2px solid var(--black); background: var(--mist); color: var(--grey); font-size: 14.5px; line-height: 1.5; max-width: 46em; }
.wait b { color: var(--black); }
.k .wait { border-left-color: var(--white); background: #151515; color: var(--grey-k); }
.k .wait b { color: var(--white); }
.wait.gap { margin-top: 40px; }
.phero.tall { min-height: 60vh; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 28px); }

/* Talk to Deng: the last band on every page. */
.cta .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(28px, 6vw, 96px); align-items: end; }
.cta .lede { margin-top: 20px; }
.cta .acts { margin-top: 32px; }
.reach { display: grid; gap: 6px; font-size: 16px; color: var(--grey-k); }
.reach a { color: var(--white); }
.reach .clock { margin-top: 10px; }
@media (max-width: 900px) { .cta .wrap { grid-template-columns: 1fr; } }

/* Contact form */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px clamp(28px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; }
.field .hint { font-weight: 400; color: var(--grey); }
.field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: 14px 14px; border: 1px solid #8A8A8A; border-radius: var(--r); background: var(--white); font-size: 17px; line-height: 1.4; transition: border-color .2s; -webkit-appearance: none; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230B0B0B' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field textarea { min-height: 132px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--black); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { grid-column: 1 / -1; padding: 14px 16px; border-left: 2px solid var(--black); background: var(--mist); font-size: 15.5px; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } .form .btn { width: 100%; } }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(24px, 4vw, 56px); padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.contact .h-md { font-size: clamp(22px, 2.2vw, 28px); }
.ways .h-md { margin-bottom: 10px; }
.ways .fine { margin-top: 8px; }
.big-link { font-size: clamp(19px, 2vw, 24px); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ways { grid-template-columns: 1fr; } }
.aside { display: grid; gap: 20px; }
.aside .slot { aspect-ratio: 4 / 5; max-width: 320px; }
.aside .reach { color: var(--grey); }
.aside .reach a { color: var(--black); }
.fine { font-size: 14.5px; color: var(--grey); max-width: 46em; }

/* Long text: About and Privacy. */
.prose { display: grid; gap: 18px; max-width: 44em; }
.prose h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin-top: 24px; }
.prose ul { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; }
.prose .date { color: var(--grey); }

/* Footer: the links, the company line, then the word mark across the page. */
.ftr { border-top: 1px solid var(--line-k); padding: clamp(48px, 6vw, 80px) 0 28px; }
.ftr-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 48px); }
.ftr-h { font-size: 14.5px; color: var(--grey-k); margin-bottom: 12px; }
.ftr-cols li { padding: 4px 0; font-size: 16px; overflow-wrap: anywhere; }
.ftr-cols a { text-decoration: none; }
.ftr-cols a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.ftr-cols .q { color: var(--grey-k); }
@media (max-width: 760px) { .ftr-cols { grid-template-columns: 1fr 1fr; } }
.ftr-mark { margin-top: clamp(56px, 8vw, 112px); container-type: inline-size; }
.ftr-mark img { width: 100%; }
.ftr-mark span { display: block; margin-top: 4.4cqw; padding-left: .556em; font-size: 6.4cqw; font-weight: 500; line-height: 1; letter-spacing: .556em; text-align: center; white-space: nowrap; color: var(--grey-k); }
.ftr-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--line-k); font-size: 14px; color: var(--grey-k); }
.ftr-end a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}