/* Shared look for every page on the site (homepage design, CV, case studies, popups):
   colours for the light and dark themes, the rainy office window behind the page, the blinds,
   frosted panels and the header controls. Load after tokens.css and the page's own stylesheet.

   Panels: --panel-alpha (how solid, 0-1) and --panel-blur are set globally by assets/js/window-bg.js
   from data-panel-opacity / data-panel-blur on #window-bg (or ?wb-panel-opacity= in the address bar).
   Body text and grey labels pass WCAG AA at 0.8 and above even with pure black (light) or pure white (dark) behind a panel.
   The red (#c80000 light, #ff7070 dark) passes AA for large text everywhere; for small text it passes on the light and
   mid-tone parts of the photo (5.6:1 on plain paper) but drops to about 3.5:1 if a panel sits over near-black. */

/* ---------- theme colours ---------- */
:root {
  --paper: #f7f6f3; --card: #fdfcfa; --sunk: #efede8;
  --ink: #141518; --ink-2: #2b2e33; --muted: #3d4248; --line: #cfccc5;
  --red: #c80000; --red-text: #a80000; --red-large: #c80000; --red-soft: #fbeaea;
  --display: Oswald, "Arial Narrow", sans-serif; --body: "Open Sans", system-ui, sans-serif;
  --panel-alpha: .8; --panel-blur: 18px;
  --glass-panel: color-mix(in srgb, var(--paper) calc(var(--panel-alpha) * 100%), transparent);
  --glass-card: color-mix(in srgb, var(--card) calc(min(1, var(--panel-alpha) + .08) * 100%), transparent);
  --glass-edge: rgba(255, 255, 255, .6);
  --glass-shadow: 0 24px 60px -36px rgba(20, 22, 26, .35);
  --veil: rgba(239, 237, 232, .42);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #141619; --card: #1a1d21; --sunk: #101215;
  --ink: #f0eeea; --ink-2: #dad7d2; --muted: #c9ccd1; --line: #3a3e44;
  --red: #ff7070; --red-text: #ff7070; --red-large: #ff7070; --red-soft: #2a1a1b;
  --glass-edge: rgba(255, 255, 255, .08);
  --glass-shadow: 0 30px 70px -36px rgba(0, 0, 0, .8);
  --veil: rgba(10, 11, 13, .45);
  color-scheme: dark;
}
/* the design-system names used by the CV and case study stylesheets follow the same colours */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --ink-muted: var(--muted); --surface-sunk: var(--sunk); --canvas: var(--sunk); --surface: var(--paper);
  --rule: var(--line); --accent-soft: var(--red-soft);
}
html { background: var(--paper); }
body.glass-page { background: transparent !important; color: var(--ink); font-weight: 400; }

/* ---------- frosted panel (any element) ---------- */
.glass-panel {
  background: var(--glass-panel) !important;
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.1); backdrop-filter: blur(var(--panel-blur)) saturate(1.1);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
}

/* ---------- the window: city behind sanded glass, water, blinds ---------- */
#window-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--paper); pointer-events: none; }
#window-bg > * { position: absolute; inset: 0; width: 100%; height: 100%; }
#window-bg > .win-city { inset: auto; left: -5vw; top: 0; width: 110vw; height: 145vh;
  transform: translate3d(0, var(--city-y, 0px), 0); filter: blur(var(--wb-blur, 9px)) brightness(1); opacity: 0; will-change: transform; }
#window-bg.ready .win-city { opacity: 1; }
.win-veil { background: var(--paper); opacity: min(1, calc(var(--wb-veil, .2) + var(--frost, 0) * var(--wb-veil-scroll, .5))); }
.win-patch { opacity: var(--wb-texture, .55); }
.win-grain { opacity: var(--wb-grain, .4); mix-blend-mode: overlay; background-repeat: repeat; }
.win-clear { filter: blur(.4px); }
.win-glare { opacity: var(--wb-glare, .5); background: linear-gradient(112deg, rgba(255,255,255,.4), rgba(255,255,255,0) 34%, rgba(255,255,255,0) 72%, rgba(255,255,255,.14)); }
:root[data-theme="dark"] .win-glare { background: linear-gradient(112deg, rgba(255,255,255,.1), rgba(255,255,255,0) 40%); }
/* wiped clean */
.win-city, .win-patch, .win-grain, .win-clear, .win-rain { transition: filter 1.4s ease, opacity 1.1s ease; }
#window-bg.wiped > .win-city { filter: blur(0px) brightness(1.02); }
#window-bg.wiped .win-patch, #window-bg.wiped .win-grain, #window-bg.wiped .win-clear, #window-bg.wiped .win-rain { opacity: 0; }
/* venetian blinds: --blinds 0 (open) to 1 (closed) */
@property --blinds { syntax: '<number>'; inherits: true; initial-value: 0; }
html { transition: --blinds .2s linear; }
html.blinds-anim { transition: --blinds .9s cubic-bezier(.4,0,.2,1); }
#window-bg:not(.blinds-on) .win-blinds { display: none; }
.win-blinds { --cover: calc(var(--slat, 34px) * (0.06 + var(--blinds, 0) * 0.96));
  opacity: min(1, calc(var(--blinds, 0) * 5));
  background:
    linear-gradient(to right, transparent calc(16% - 1px), rgba(20,20,22,.9) calc(16% - 1px), rgba(20,20,22,.9) calc(16% + 1px), transparent calc(16% + 1px),
                    transparent calc(84% - 1px), rgba(20,20,22,.9) calc(84% - 1px), rgba(20,20,22,.9) calc(84% + 1px), transparent calc(84% + 1px)),
    repeating-linear-gradient(to bottom, #45464a 0, #2a2b2e calc(var(--cover) * .35), #151618 calc(var(--cover) * .85), #0a0a0b var(--cover),
                              rgba(0,0,0,.35) var(--cover), transparent calc(var(--cover) + 2px), transparent var(--slat, 34px));
  box-shadow: inset 0 18px 0 #111214, inset 0 21px 0 #2c2d30; }

/* ---------- one-time hint ---------- */
.wipe-hint { position: fixed; left: 50%; bottom: 96px; z-index: 50; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 12px 20px; border: 1px solid var(--line); background: var(--glass-card);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink);
  font: 400 14px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; transition: opacity .5s ease, transform .5s ease; }
.wipe-hint::before { content: "\2194"; margin-right: 10px; color: var(--red-large); }
.wipe-hint.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) { .wipe-hint { bottom: 150px; font-size: 12px; white-space: nowrap; padding: 10px 14px; } }

/* ---------- header controls: blinds and theme ---------- */
.site-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.site-controls .rain-toggle, .blinds-toggle { flex: none; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 50px;
  background: var(--glass-card); color: var(--ink); cursor: pointer;
  font: 400 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: border-color .2s; }
.blinds-toggle:hover, .site-controls .rain-toggle:hover { border-color: var(--red); }
@media (max-width: 900px) { .site-controls .rain-toggle { display: none; } }
.theme-toggle { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--glass-card); color: var(--ink); cursor: pointer; transition: border-color .2s, transform .3s; }
.theme-toggle:hover { border-color: var(--red); transform: rotate(-15deg); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; display: none; }
.theme-toggle .i-moon { fill: currentColor; stroke: none; }
:root[data-theme-mode="auto"] .theme-toggle .i-auto, :root[data-theme-mode="light"] .theme-toggle .i-sun, :root[data-theme-mode="dark"] .theme-toggle .i-moon { display: block; }
.blinds-toggle:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- homepage type on the CV and case study pages ----------
   Oswald light (300) for big titles, regular (400) with wide tracking for labels and small titles,
   the red-line eyebrow, and the homepage's brand and nav style in the top bar. */
body.glass-page .cs-top { align-items: center; font: 400 14px/1 var(--display); letter-spacing: .12em; }
body.glass-page .cs-home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap;
  font: 400 17px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
body.glass-page .cs-home::before { content: ""; width: 9px; height: 9px; background: var(--red); }
body.glass-page .cs-home small { font: inherit; color: var(--muted); letter-spacing: .1em; }
body.glass-page .cs-nav { display: flex; gap: 22px; font: 400 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
body.glass-page .cs-nav a { color: var(--ink-2); text-decoration: none; }
body.glass-page .cs-nav a:hover { color: var(--ink); }
@media (max-width: 720px) { body.glass-page .cs-home small { display: none; } }
body.glass-page .cs-nav a { white-space: nowrap; }
body.glass-page .topbar .cs-home small { display: none; }
body.glass-page .topbar .btn { height: 40px; min-height: 0; padding: 0 16px; border-radius: 50px; white-space: nowrap;
  font: 400 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
body.glass-page .cs-client, body.glass-page .eyebrow { gap: 12px; font: 400 13px/1.2 var(--display); letter-spacing: .22em; color: var(--muted); }
body.glass-page .cs-client::before, body.glass-page .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--red); flex: none; }
body.glass-page .cs-head h1, body.glass-page .mast h1 { font-weight: 300; line-height: 1.08; letter-spacing: .01em; }
body.glass-page .read h2, body.glass-page .gal-head h2, body.glass-page .cs-more h2 { font-weight: 300; letter-spacing: .02em; }
body.glass-page .rail-h, body.glass-page .cv-section h2 { font-weight: 400; letter-spacing: .08em; border-bottom-width: 1px; }
body.glass-page .decisions h3, body.glass-page .ev span, body.glass-page .ix-title, body.glass-page .cs-more strong { font-weight: 400; letter-spacing: .03em; }
body.glass-page .ix-client { font: 400 12px/1.4 var(--display); letter-spacing: .18em; }
body.glass-page .track time { font-weight: 400; letter-spacing: .03em; }
body.glass-page .decisions time, body.glass-page .cmp-tag, body.glass-page .orgs li { font-weight: 400; letter-spacing: .08em; }
body.glass-page .results dt, body.glass-page .stat dd { font-weight: 300; }
body.glass-page .facts dt { font: 400 12px/1.4 var(--display); letter-spacing: .16em; }

/* ---------- links and hover: one behaviour on every page ----------
   Hover turns the text red and removes any underline. Links that are underlined at rest show a thin 1px red line.
   One red everywhere: #c80000 (light), #ff7070 (dark). */
a { text-decoration-thickness: 1px !important; }
a:hover, a:hover :is(span, strong, b, small, time, em, p, h2, h3, h4) { color: var(--red) !important; }
a:hover, a:hover * { text-decoration-line: none !important; }
:is(.site-controls button, .qs-btn, .gal-prev, .gal-next, .inline-popup-close, .inline-popup .btn):hover { color: var(--red) !important; border-color: var(--red) !important; }

/* ---------- inside a popup frame: the popup provides the glass ---------- */
.cs-embed #window-bg, .cs-embed .site-controls, .cs-embed .wipe-hint { display: none !important; }

@media print {
  #window-bg, .site-controls, .wipe-hint { display: none !important; }
  .glass-panel { background: #fff !important; backdrop-filter: none !important; box-shadow: none !important; }
}