/* ==========================================================================
   PHOTOLICIOUS — TOKENS
   The ground is the brand. Instead of a white page wearing coloured sections,
   the whole surface is lime (summer) or violet (winter) and everything else —
   cards, mounts, the nav — is near-black sitting on top of it.

   Two seasons, one switch: html[data-season] repoints every semantic token.
   ========================================================================== */

/* --- Faces --------------------------------------------------------------- */
/* Display: PolySans Bulky, the brand face. Body: Onest, self-hosted so the
   page never blocks on a third-party font server. */
@font-face {
	font-family: "PolySans Bulky";
	src: url("../fonts/PolySans-Bulky.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Onest";
	src: url("../fonts/Onest.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	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;
}
@font-face {
	font-family: "Onest";
	src: url("../fonts/Onest-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	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;
}
/* Neither PolySans nor Onest draws Arabic. The RTL faces are declared in
   arabic.css, which is enqueued only on that side — PolySans Arabic Bulky for
   display and IBM Plex Sans Arabic for body. Cairo used to stand in here and
   was left declared but unreferenced after that switch. */

:root {
	/* :root carries the summer palette, which is a bright ground with dark
	   ink — so it declares light. The winter block below declares dark, and
	   winter is what a first-time visitor now lands on. Declaring this at all
	   is what keeps native selects, textareas, scrollbars and autofill from
	   rendering light on a dark page. */
	color-scheme: light;

	/* L1 — the exact brand palette. Never alter these. */
	--lime: #c6ff33;
	--violet: #7d39eb;
	--black: #000;
	--summer: #f4ffd6;
	--white: #fff;
	--lavender: #e5d7fb;
	--mount: #0d0c0a;

	/* L2 — semantic roles, repointed per season. Summer is the default. */
	--ground: var(--lime);
	--ink: var(--black);
	--soft: var(--summer);
	--on-soft: var(--black);
	--card: #0b0b0a;
	--card-ink: var(--white);
	--accent: var(--lime);

	--btn-bg: var(--black);
	--btn-ink: var(--lime);
	--btn-hov-bg: var(--white);
	--btn-hov-ink: var(--black);

	--glass-bg: rgb(255 255 255 / 0.16);
	--glass-brd: rgb(255 255 255 / 0.42);
	--nav-glass: rgb(12 12 8 / 0.55);
	--nav-ink: var(--lime);

	/* The symbol's mark is knocked out of the disc, so it needs a colour that
	   contrasts with --ink rather than sitting near it. --soft cannot do this
	   job in both seasons: it is cream against a black disc in summer, but
	   lavender against a WHITE disc in winter, which is near-invisible. */
	--sym-mark: var(--summer);

	/* Hairlines inside dark cards, so the value is set once. */
	--card-line: rgb(255 255 255 / 0.16);
	--card-line-soft: rgb(255 255 255 / 0.22);

	/* Foreground for anything painted on --accent. Written as a role so a
	   season is free to choose a mid or dark accent without turning seven
	   rules of black-on-dark text invisible. */
	--on-accent: var(--black);

	/* Opaque chrome that reads as an object against the ground: the eyebrow
	   pill, the client marquee, the fixed season switch, the skip link. In
	   summer the ground is lime, so black does the job; on a dark ground
	   these have to lift instead. */
	--chip-bg: var(--black);
	--overlay-bg: var(--black);

	/* Behind an image while it decodes. Was three near-identical literals
	   (#191512, #191512, #15130f) doing one job. */
	--media-placeholder: #191512;

	/* Body copy inside a card. Used by .form-done__msg, which referenced an
	   undefined --paper and only looked right because the invalid value fell
	   back to the inherited card colour. */
	--paper: var(--card-ink);

	/* Form feedback tints. */
	--ok-tint: rgb(198 255 51 / 0.14);
	--ok-line: rgb(198 255 51 / 0.5);
	--danger-tint: rgb(255 107 107 / 0.12);
	--danger-line: rgb(255 107 107 / 0.5);

	/* Nav bar when backdrop-filter is unavailable. */
	--nav-solid: rgb(10 10 8 / 0.92);

	--wide: min(1500px, 94vw);
	--r: 24px;

	--font-display: "PolySans Bulky", "Onest", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Onest", "Helvetica Neue", Arial, sans-serif;
}

/* Winter — the dark season, and the one the site now opens in.
   The brand's violet survives as the accent and as a bias in the neutrals
   rather than as a full violet field, so the studio's photography is the
   brightest thing on the page. Cards LIFT off the ground here instead of
   sinking below it: on a bright ground a near-black card separates by
   contrast, on a dark ground it would dissolve, so separation comes from
   elevation instead. */
html[data-season="winter"] {
	color-scheme: dark;

	--ground: #0d0b12;
	--ink: #f3f1f8;
	--soft: #1a1622;
	--on-soft: #f3f1f8;
	--accent: var(--lavender);
	--on-accent: var(--black);

	/* Lifted surfaces, each a step above the ground. */
	--card: #191526;
	--card-ink: #f3f1f8;
	--mount: #120f1a;
	--card-line: rgb(255 255 255 / 0.12);
	--card-line-soft: rgb(255 255 255 / 0.2);

	--chip-bg: #241d33;
	--overlay-bg: #241d33;
	--media-placeholder: #17131f;

	--btn-bg: var(--accent);
	--btn-ink: var(--black);
	--btn-hov-bg: var(--white);
	--btn-hov-ink: var(--black);

	/* Less white in the glass: on a dark ground the same alpha that read as
	   frosted over lime reads as a grey smear. */
	--glass-bg: rgb(255 255 255 / 0.07);
	--glass-brd: rgb(255 255 255 / 0.18);
	--nav-glass: rgb(13 11 18 / 0.72);
	--nav-solid: rgb(13 11 18 / 0.94);
	--nav-ink: var(--lavender);

	/* The mark is knocked out of the disc, and the disc is --ink, which is
	   near-white in this season — so the mark stays violet for contrast. */
	--sym-mark: var(--violet);
}

/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: clamp(15px, 1vw, 17px);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	transition: background 0.45s ease, color 0.45s ease;
}

h1, h2, h3, h4, .bulky {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.92;
	margin: 0;
}

a { color: inherit; }
img { display: block; }
[hidden] { display: none !important; }

:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 4px;
}

/* --- Layout -------------------------------------------------------------- */
.wide { width: var(--wide); margin-inline: auto; }
.sec { padding: clamp(44px, 6vw, 96px) 0; }

/* Full-bleed out of the .wide container. Both inline margins carry the same
   negative pull, so the element lands flush to the viewport in either
   direction — an LTR-only `margin-left` would shove it off-screen under RTL. */
.bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 200;
	background: var(--overlay-bg);
	color: var(--accent);
	padding: 0.9em 1.4em;
	border-radius: 0 0 100px 0;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.8rem;
}
.skip-link:focus {
	inset-inline-start: 0;
}

/* --- Honeypot ------------------------------------------------------------- */
/* Hidden without display:none or visibility:hidden — a bot that skips those
   still fills this one.
   Clipped in place rather than parked off-screen, because a 9999px offset is
   direction-sensitive: physical `left` overhangs every RTL page, logical
   `inset-inline-start` overhangs every LTR one, and either way the page only
   stays put because body carries overflow-x: hidden. Zero offset, zero
   overhang, nothing load-bearing. */
.pl-hp {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Screen-reader only --------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Arabic lives in its own sheet (assets/css/arabic.css), enqueued last and only
   on RTL, the way the comps are built — it swaps the typefaces, resets the
   tracking, and flips the handful of physical values this sheet relies on. */

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