/* BoulezEye site. Same broadcast package as the game ("Le Direct"): opaque navy panels, condensed white capitals,
   ochre captions below headings, one cut edge per panel, zero radius. One red per view. No cookies, no third-party requests (one small own script only turns on the gallery buttons). */

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  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: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  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 {
  --navy: #0b1f4a;
  --navy-raised: #17336f;
  --navy-deep: #06122e;
  --white: #ffffff;
  --paper: #eef2f8;
  --red: #e1000f;
  --blue: #002395;
  --ochre: #f2c14e;
  --steel: #b4c0d8;
  --line: rgba(255, 255, 255, 0.2);
  --ink-line: rgba(11, 31, 74, 0.18);
  --font-display: 'Archivo Variable', 'Arial Narrow', sans-serif;
  --font-ui: 'Archivo Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --chamfer: 18px;
  --gutter: 16px;
  --col: 42rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font: 400 1rem/1.6 var(--font-ui);
  font-feature-settings: 'tnum' 1;
  font-synthesis: none;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; padding-bottom: 40px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
::selection { background: var(--ochre); color: var(--navy-deep); }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 10; padding: 10px 14px;
  background: var(--paper); color: var(--navy); font-weight: 800;
}
.skip:focus { top: 8px; }

/* the broadcast voice: condensed capitals */
.wordmark, .headline, .display, h2, .label, .seg a, .key, .tab {
  font-family: var(--font-display);
  font-stretch: 72%;
  text-transform: uppercase;
}

.col { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- top bar ---------- */
.bar { background: var(--navy-deep); position: sticky; top: 0; z-index: 5; }
.bar-inner {
  max-width: var(--col); margin-inline: auto; padding: 6px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
}
.wordmark { font-weight: 900; letter-spacing: 0.01em; line-height: 1; text-decoration: none; color: var(--white); }
.wordmark span { color: var(--ochre); }
.wordmark.small { font-size: 1.6rem; display: inline-flex; align-items: center; min-height: 44px; }

/* segmented control (language, sub page tabs): hairline row, the current one turns paper */
.seg { display: flex; border: 1px solid var(--line); }
.seg a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; text-decoration: none; color: var(--white);
}
.seg a + a { border-left: 1px solid var(--line); }
.seg a:hover { background: var(--navy-raised); }
.seg a[aria-current] { background: var(--paper); color: var(--navy); font-weight: 800; }
.bar .seg a { min-width: 52px; }
.tabs { margin: 24px 0 28px; }
.tabs a { flex: 1 1 auto; min-width: 0; padding: 0 6px; text-align: center; font-size: clamp(0.8rem, 3.6vw, 0.95rem); letter-spacing: 0.02em; }

/* ---------- headings ---------- */
.headline { font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 900; line-height: 1.05; letter-spacing: 0.02em; margin: 0; }
h2 { font-size: 1.5rem; font-weight: 900; line-height: 1.1; letter-spacing: 0.02em; margin: 0 0 12px; }
h3 { font-family: var(--font-display); font-stretch: 72%; text-transform: uppercase; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1.15; margin: 0 0 6px; }

/* ochre caption: hangs below its heading, never above */
.caption {
  display: inline-block; margin: 0 0 24px; padding: 4px 12px 3px; background: var(--ochre); color: var(--navy-deep);
  font-weight: 700; font-size: 0.9rem; line-height: 1.4;
}

/* ---------- legal text: soft light on a raised navy panel, one chamfered corner ---------- */
.doc {
  --doc-text: #d3dcee;
  background: var(--navy-raised); color: var(--doc-text); margin-bottom: 8px;
  padding: 28px var(--gutter) 32px;
  font-size: 1.02rem; line-height: 1.75;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
}
.doc > :first-child { margin-top: 0; }
.doc h2 {
  font-size: 1.3rem; color: var(--white); margin: 2em 0 0.55em; padding-top: 1.3em; border-top: 1px solid var(--line);
}
.doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc p, .doc li { max-width: 38rem; margin: 0 0 1em; }
.doc ul { list-style: none; padding: 0; margin: 0 0 1.1em; }
.doc li { position: relative; padding-left: 1.2em; margin-bottom: 0.55em; }
.doc li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; background: var(--ochre); }
.doc a { color: var(--ochre); text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.doc a:hover { color: var(--white); }
.doc strong { color: var(--white); font-weight: 700; }
h1.headline + .doc, h1.headline + .caption { margin-top: 16px; }

/* back to the home page */
.back-row { margin: 16px 0 0; }
.back-row.end { margin: 20px 0 0; }
.button.back { padding-left: 14px; gap: 8px; }
.button .icon { flex: none; }

/* a placeholder that has not been filled in yet (never present in a strict build) */
.ph { background: var(--ochre); color: var(--navy-deep); padding: 0 3px; font-weight: 700; }

/* ---------- home ---------- */
.ident { background: var(--navy-deep); }
.ident-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 70%; max-height: 62vh; }
.ident-plate { max-width: var(--col); margin-inline: auto; padding: 0 var(--gutter) 20px; }
.stripe { height: 4px; background: linear-gradient(90deg, var(--blue) 0 33.33%, var(--white) 33.33% 66.66%, var(--red) 66.66% 100%); }
.display { font-size: clamp(2.8rem, 15vw, 4.6rem); font-weight: 900; line-height: 1; letter-spacing: 0.01em; margin: 18px 0 0; }
.display span { color: var(--ochre); }
.subtitle {
  margin: 10px 0 0; font-family: var(--font-display); font-stretch: 72%; text-transform: uppercase;
  font-weight: 800; letter-spacing: 0.32em; font-size: 0.95rem; color: var(--steel);
}

/* lower third: the "coming soon" line (the one red on the page) */
.lower-third {
  display: flex; align-items: stretch; width: min(100%, 26rem); margin: 22px 0 0; background: var(--navy);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.lower-third .key { background: var(--red); color: var(--white); font-weight: 900; letter-spacing: 0.06em; padding: 9px 14px 7px; font-size: 1.15rem; display: flex; align-items: center; }
.lower-third .text { padding: 9px 22px 7px 12px; font-family: var(--font-display); font-stretch: 72%; text-transform: uppercase; font-weight: 800; letter-spacing: 0.02em; font-size: 1.15rem; display: flex; align-items: center; }
.soon-note { color: var(--steel); font-size: 0.9rem; margin: 10px 0 0; }

.section { padding-top: 40px; }
.section p { margin: 0 0 1em; max-width: 38rem; color: var(--white); }
.lead { font-size: 1.12rem; }
.section .muted, .muted { color: var(--steel); }

.cards { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.card {
  background: var(--navy-raised); padding: 16px var(--gutter) 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
}
.card p { margin: 0; font-size: 0.97rem; color: var(--steel); max-width: none; }


.button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 24px 10px 20px; background: var(--navy-raised);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--white); text-decoration: none;
  font-family: var(--font-display); font-stretch: 72%; text-transform: uppercase; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em;
}
.button:hover { background: var(--navy-deep); }

/* ---------- footer ---------- */
.foot { background: var(--navy-deep); margin-top: 24px; border-top: 1px solid var(--line); }
.foot-inner {
  max-width: var(--col); margin-inline: auto; padding: 36px var(--gutter) 28px; display: grid; gap: 28px;
}
.foot .wordmark { font-size: 2rem; display: inline-block; }
.foot-tag { margin: 8px 0 0; font-family: var(--font-display); font-stretch: 72%; text-transform: uppercase; font-weight: 800; letter-spacing: 0.28em; font-size: 0.85rem; color: var(--steel); }
.foot .label { margin: 0 0 6px; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.08em; color: var(--ochre); }
.foot-links { display: grid; gap: 0; align-content: start; }
.foot-links a {
  display: flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-stretch: 72%;
  text-transform: uppercase; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.04em; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.foot-links a:first-child { border-top: 1px solid var(--line); }
.foot-links a:hover { color: var(--ochre); }
.foot-contact p { margin: 0; color: var(--white); overflow-wrap: break-word; }
.foot-contact a { color: var(--white); }

/* ---------- screenshot gallery: a row of portrait screenshots as wide as the text, buttons at the edges ---------- */
.gallery { position: relative; --gap: 12px; --per: 2.2; }
.gallery-track {
  display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item { flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); scroll-snap-align: start; }
.gallery-item a { display: block; cursor: zoom-in; }
.gallery-item img { width: 100%; height: auto; aspect-ratio: 732 / 1300; background: var(--navy-deep); box-shadow: 0 0 0 1px var(--line); }
.gallery-btn {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1; width: 44px; height: 56px; padding: 0; display: flex;
  align-items: center; justify-content: center; border: 0; cursor: pointer; color: var(--white); background: var(--navy);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--line);
}
.gallery-btn[hidden] { display: none; }
.gallery-btn:hover:not(:disabled) { background: var(--navy-raised); }
.gallery-btn:disabled { opacity: 0; pointer-events: none; }
.gallery-prev { left: 0; }
.gallery-next { right: 0; }

/* enlarged screenshot */
.lightbox { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100%; height: 100%; background: transparent; color: var(--white); overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(6, 18, 46, 0.86); }
.lightbox > img { width: auto; height: auto; max-width: min(92vw, 30rem); max-height: 88dvh; aspect-ratio: 732 / 1300; object-fit: contain; background: var(--navy-deep); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line); }
.lightbox .gallery-btn { position: fixed; }
.lightbox-close { top: 12px; right: 12px; translate: none; height: 44px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
html:has(dialog[open]) { overflow: hidden; }

@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .gallery { --per: 3.2; --gap: 16px; }
  .tabs a { font-size: 1.05rem; }
  .doc { padding: 36px 36px 40px; }
  .foot-inner { grid-template-columns: 1.1fr 1fr 1.3fr; align-items: start; gap: 32px; }
  .ident-photo { max-height: 440px; }
}

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