/* 499 Group identity since 2026-09-24 (Kamil waived HOUSE restraint for this site). Since the evening of 2026-09-24:
   a premium fashion-house register after Kamil's Victoria Beckham reference - light grey ground (#E2E0E1), black
   type, Newsreader serif for headlines, tracked caps (Glacial) for labels and navigation, Tiffany as the only colour.
   Square geometry, nothing rotated, no decorative shadows.
   Loads after tokens.css and site.css on every page. Rewritten 2026-09-24: only rules for markup that still exists;
   the old homepage layer (cover, connection story, media reach, work spread) was removed with that homepage. */

/* Tokens */
:root { --paper: #e2e0e1; --paper-soft: #ecebeb; --surface: #d8d5d6; --ink: #111; --muted: #4f4f4f; --line: #c6c3c4; --line-strong: #767676; --font-serif: 'Newsreader', 'Times New Roman', Georgia, serif;
  --accent: #81d8d0; --accent-hover: #a3e3dd; --button-text: #171717; --focus: #81d8d0; --tiffany: #81d8d0; --tiffany-hover: #a3e3dd; --radius: 0 }
:root[data-theme=dark] { --paper: #171717; --paper-soft: #1f1f1f; --surface: #242424; --ink: #f7f7f7; --muted: #c2c2c2; --line: #454545; --line-strong: #858585; --accent: #81d8d0; --accent-hover: #a3e3dd; --focus: #81d8d0 }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --paper: #171717; --paper-soft: #1f1f1f; --surface: #242424; --ink: #f7f7f7; --muted: #c2c2c2; --line: #454545; --line-strong: #858585; --accent: #81d8d0; --accent-hover: #a3e3dd; --focus: #81d8d0 } }
html.theme-changing *, html.theme-changing *::before, html.theme-changing *::after { transition: none !important }

/* Browser surfaces carry the palette too */
::selection { background: var(--tiffany); color: #171717 }
html { accent-color: #81d8d0; caret-color: var(--ink) }
a { text-underline-offset: 4px }

/* Type: serif headlines, tracked caps for labels */
h1, h2, h3 { text-wrap: balance; font-family: var(--font-serif); font-weight: 400; letter-spacing: -.012em }
.page-hero h1, .publisher-heading h1, .buyer-hero h1, .about-intro h1 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.04 }
.page-hero h1 { font-size: clamp(48px, 6.2vw, 92px) }
.kicker, .hc-kicker { font: 500 14px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--ink) }
.page-hero h1 span, .publisher-heading h1 span, .buyer-hero h1 span, .about-intro h1 span, body:not([data-page=home]) .page-hero h1 > span { color: var(--ink) }
.brand-caption h2 { font-weight: 400 }
.brand-meta { font-size: 13px; color: var(--muted); margin: -6px 0 12px }

/* Header: centred wordmark, tracked-caps navigation beneath it (fashion-house masthead) */
.site-header { border-bottom: 0; height: 96px }
#main-nav .nav-contact, .site-header .nav-contact { border: 0; border-radius: 0; background: var(--ink); color: var(--paper); padding: 12px 20px }
@media (min-width: 901px) {
  .site-header { flex-direction: column; justify-content: center; height: auto; padding-block: 30px 12px; gap: 16px; max-width: none }
  .site-header .home-logo { flex: none; width: 196px }
  #main-nav { gap: 38px; font: 500 12px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .16em }
  #main-nav > a { padding-block: 10px }
  #main-nav .nav-contact, #main-nav .nav-contact:hover, #main-nav .nav-contact[aria-current=page] { background: transparent; color: var(--ink); padding: 10px 0; margin-left: 0; border-bottom: 1px solid var(--ink) }
  #main-nav .nav-contact .arrow { display: none }
}
#main-nav > a[aria-current=page]:not(.nav-contact), #main-nav > a:not(.nav-contact):hover, #main-nav > a:not(.nav-contact):active, #main-nav > a:not(.nav-contact):focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--tiffany); text-decoration-thickness: 2px; text-underline-offset: 8px }
/* Menu links never take the old dark teal (--accent): hover and tap show ink with the Tiffany underline, like the current page (Kamil 2026-10-05). */
#main-nav .nav-contact:hover { border-color: var(--tiffany) }

/* Icons: one drawn arrow, never inside a circle */
.arrow { display: inline-block; vertical-align: -1px; flex-shrink: 0 }
.text-link .arrow, .showcase-copy .text-link .arrow { border: 0; border-radius: 0; width: 14px; height: 14px; margin-left: 0 }
/* Phone and tablet menu: the Contact block stays black, its label and arrow in Tiffany (Kamil 2026-10-05). */
@media (max-width: 900px) { #main-nav .nav-contact, #main-nav .nav-contact[aria-current=page], #main-nav .nav-contact:hover { background: var(--ink); color: #81d8d0 } }
.brand-anchor { padding-top: 24px }

/* Actions: primary is Tiffany with black text; square; no shadow */
.button { border-radius: 0; box-shadow: none; background: var(--tiffany); color: #111; padding: 17px 26px; font: 500 13px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .14em; transition: background-color .15s, transform .16s cubic-bezier(.23, 1, .32, 1) }
.button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-strong) }
.button:active, .nav-contact:active { transform: scale(.98) }
.button:disabled { transform: none }
body:not([data-page=home]) .closing .button { background: var(--tiffany); color: #171717 }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--tiffany-hover); color: #171717 } .button.secondary:hover { background: var(--surface) } }

/* Brand key visuals on /brands/: shown whole at 3:2, never zoomed or cropped */
.brand-visual { aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line); background: var(--surface) }
.brand-visual img { display: block; width: 100%; height: 100%; object-fit: cover }

/* Planes: square, hairlines instead of shadows */
.brand-art { border: 1px solid var(--line); border-radius: 0; box-shadow: none; outline: 0 }
.audience-item { padding: 30px; border: 1px solid var(--line); border-radius: 0; background: transparent }
.filters button { border-radius: 0; padding: 10px 15px; transition: background-color .15s, color .15s }
.filters button[aria-pressed=true] { background: var(--ink); color: #81d8d0; border-bottom-color: transparent }
input:not([type=checkbox]), select, textarea { border-radius: 0 }
.inner-close, body:not([data-page=home]) .closing { background: var(--surface); color: var(--ink) }
.inner-close p, body:not([data-page=home]) .closing p { color: var(--muted) }

/* Dark bands on inner pages */
.outcome-spread, .ownership-spread, .partner-agreement, .publisher-stage { background: #171717; --focus: #81d8d0 }
.outcome-options h3, .partner-agreement h2 span, .ownership-spread h2 span, .partner-agreement ul, .stage-note > span { color: #fff }
.ownership-brands .text-link, .ownership-brands h3 .arrow { color: var(--tiffany) }
.publisher-stage { border-radius: 0; box-shadow: none }

/* Example creative on /partners/ */
.edition-placement, .sample-display { background: #f0f0f0 }
.sample-action { background: #171717; color: #fff }
.sample-email-letter .sample-action { color: #81d8d0 }
/* The partner film is an ordinary figure in the flow (the old homepage positioned .cover-film absolutely). */
.partner-film { position: relative; inset: auto; width: 100%; max-width: 560px; margin: 0; border: 1px solid var(--line); border-radius: 0; box-shadow: none; transform: none; background: var(--surface) }
.partner-film img, .partner-film video { display: block; width: 100%; height: auto; border-radius: 0; filter: grayscale(1) }

.site-footer { max-width: none; background: var(--paper-soft); padding-top: 64px }
/* Footer address: stays in the right-hand column under Contact, set apart by the letter - serif italic in ink, a touch
   larger than the links; Tiffany blue #81D8D0 on hover and focus (Kamil 2026-09-26). */
.site-footer .footer-top > div a.footer-mail { font: italic 400 17px/1.4 var(--font-serif); color: var(--ink); transition: color .2s }
.site-footer .footer-top > div a.footer-mail:hover, .site-footer .footer-top > div a.footer-mail:focus-visible { color: #81d8d0; text-decoration: none }
/* Social marks under the email: small, muted, Tiffany on hover (Kamil 2026-10-05). */
.site-footer .footer-social { display: flex; gap: 14px; margin-top: 10px }
.site-footer .footer-top > div .footer-social a { display: inline-flex; padding: 4px 0; margin: 0; color: var(--muted); transition: color .2s }
.site-footer .footer-top > div .footer-social a:hover, .site-footer .footer-top > div .footer-social a:focus-visible { color: #81d8d0; text-decoration: none }
/* Footer links and the footer buttons (cookie settings, appearance): the hover underline is Tiffany, like the active navigation item (Kamil 2026-09-26). */
.footer-top a:hover, .footer-bottom a:hover, .footer-button:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--tiffany); text-decoration-thickness: 2px; text-underline-offset: 6px }

@media (max-width: 1000px) { .page-hero h1 { font-size: clamp(46px, 8.5vw, 68px) } }
@media (prefers-reduced-motion: reduce) { .button, .nav-contact { transition: none; transform: none !important } }

/* Desktop: narrow enough to stay clear of the centred hero buttons down to 1280px wide. */
@media (min-width: 701px) { .consent { max-width: 360px; padding: 18px 20px } .consent p { font-size: 13px } }
/* Phones: the cookie notice is a slim bar at the bottom, so it does not sit on top of the hero buttons. */
@media (max-width: 700px) {
  .consent { left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 10px; border-width: 1px 0 0; border-radius: 0 }
  .consent p { font-size: 13px; line-height: 1.45 }
  .consent .button { min-height: 40px; padding: 8px 16px }
}