/* ============================================================================
   gusarov.com design system — product-grade, engineered in behaviour.
   Tokens: bare :root is light; dark is served by system preference or the switch.
   An entity's Brand may override --accent inside .brand-scope.
   ========================================================================== */

/* Gradients do not interpolate and a plain custom property flips discretely, so the scrim
   would snap on a theme change however the transition is written. Registering the tokens
   gives them a type the engine can tween; the transition then lives on :root, where the
   values actually change, and the veil and its labels cross-fade with the switch. */
@property --scrim-1 { syntax: "<color>"; inherits: true; initial-value: rgba(8, 11, 15, 0); }
@property --scrim-2 { syntax: "<color>"; inherits: true; initial-value: rgba(8, 11, 15, 0); }
@property --card-tag-ink { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
/* The card's entrance. Three separately animated properties rather than one keyframe list, so the
   spin, the lean and the path the contact corner traces each keep their own timing and can be tuned
   without unpicking the others. Angles and lengths have to be registered to interpolate at all. */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --lean { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --sway { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --walk-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --walk-y { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --rise-x { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --rise-y { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --shrink { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --card-tag-shadow { syntax: "<color>"; inherits: true; initial-value: rgba(8, 11, 15, 0); }

html { overflow-x: clip; }

:root {
	--bg: #ffffff; --bg-2: #f5f7fa; --bg-3: #eaeef3;
	--ink: #101418; --ink-2: #5b6470; --ink-3: #8b94a0; --line: #e6e9ed; --line-2: #d5dae1;
	--accent: #0a5bff; --accent-2: #e8efff; --on: #17a34a; --on-glow: rgba(23, 163, 74, .35);
	--warn: #b45f00; --warn-2: #fff4e5;
	--shadow: 0 18px 44px rgba(16, 20, 24, .12);
	--glare: rgba(255, 255, 255, .7); --glare-tint: color-mix(in srgb, var(--accent) 18%, white);
	--scrim-1: rgba(255, 255, 255, .62); --scrim-2: rgba(8, 11, 15, .22); --card-tag-ink: #101418; --card-tag-shadow: rgba(255, 255, 255, .55);
	--display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
	/* matches the .55s spin of the theme disc, so veil and button settle together */
	transition: --scrim-1 .5s ease, --scrim-2 .5s ease, --card-tag-ink .5s ease, --card-tag-shadow .5s ease;
	--radius: 14px;
	--gutter: clamp(16px, 5vw, 64px);
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0e1116; --bg-2: #141920; --bg-3: #1b222c;
		--ink: #eef1f5; --ink-2: #a3acb8; --ink-3: #6f7a87; --line: #232a34; --line-2: #2f3843;
		--accent: #4d8bff; --accent-2: #13223f; --on: #2fd36a; --on-glow: rgba(47, 211, 106, .35);
		--warn: #f0a24b; --warn-2: #2b1f0e;
		--shadow: 0 18px 44px rgba(0, 0, 0, .5);
		--glare: rgba(255, 255, 255, .09); --glare-tint: color-mix(in srgb, var(--accent) 14%, transparent);
		--scrim-1: rgba(8, 11, 15, .52); --scrim-2: rgba(8, 11, 15, .3); --card-tag-ink: #fff; --card-tag-shadow: rgba(8, 11, 15, .6);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--bg: #0e1116; --bg-2: #141920; --bg-3: #1b222c;
	--ink: #eef1f5; --ink-2: #a3acb8; --ink-3: #6f7a87; --line: #232a34; --line-2: #2f3843;
	--accent: #4d8bff; --accent-2: #13223f; --on: #2fd36a; --on-glow: rgba(47, 211, 106, .35);
	--warn: #f0a24b; --warn-2: #2b1f0e;
	--shadow: 0 18px 44px rgba(0, 0, 0, .5);
	--glare: rgba(255, 255, 255, .09); --glare-tint: color-mix(in srgb, var(--accent) 14%, transparent);
	--scrim-1: rgba(8, 11, 15, .52); --scrim-2: rgba(8, 11, 15, .3); --card-tag-ink: #fff; --card-tag-shadow: rgba(8, 11, 15, .6);
	color-scheme: dark;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; min-height: 100vh; display: flex; flex-direction: column;
	background: var(--bg); color: var(--ink);
	font: 17px/1.55 var(--body);
	padding-inline: var(--gutter); overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.02em; text-wrap: balance; line-height: 1.1; }
img { max-width: 100%; height: auto; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; }
.mono { font-family: var(--mono); font-size: .76rem; letter-spacing: .01em; }
.muted { color: var(--ink-3); }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: 1rem; top: 1rem; background: var(--bg-2); padding: .5rem 1rem; z-index: 10; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@view-transition { navigation: auto; }

.led { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); box-shadow: 0 0 0 0 var(--on-glow); transition: background .25s, box-shadow .4s; flex: none; display: inline-block; }
.led.on { background: var(--on); box-shadow: 0 0 0 4px var(--on-glow); }

/* ---------- top bar ---------- */

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; perspective: 400px; }
.logo .cube { width: 26px; height: 26px; position: relative; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.logo:hover .cube { transform: rotateX(-180deg) rotateY(180deg); }
.logo .cube i { position: absolute; inset: 0; border-radius: 6px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-style: normal; font-size: .9rem; backface-visibility: hidden; }
.logo .cube i:nth-child(2) { transform: rotateY(180deg); background: var(--accent); color: #fff; }
.bar__nav { display: flex; gap: 26px; font-weight: 500; color: var(--ink-2); }
.bar__nav a { position: relative; padding: 4px 0; }
.bar__nav a::after { content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 100%; bottom: 0; height: 2px; background: var(--accent); transition: inset-inline-end .25s cubic-bezier(.2, .8, .2, 1); }
.bar__nav a:hover::after, .bar__nav a.is-active::after { inset-inline-end: 0; }
.bar__nav a:hover, .bar__nav a.is-active { color: var(--ink); }
.bar__tools { display: flex; align-items: center; gap: 14px; }

.fan { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; position: relative; background: none; border: 0; padding: 0; }
.fan svg { width: 20px; height: 20px; fill: currentColor; }
.fan:hover { color: var(--ink); }
.fan__rpm { position: absolute; top: 26px; inset-inline-start: 50%; transform: translateX(-50%); color: var(--ink-3); opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.fan.live .fan__rpm { opacity: 1; }

/* One disc cut on the diagonal: light half carries the sun, dark half the moon.
   The button spins 180deg on toggle so the half that is in force ends up on top. */
/* Language selector. A details/summary menu so it needs no script, and each option is a real link
   to the same page in that language. The slug is the identifier; the flag is only recognition. */
.lang { position: relative; flex: none; }
.lang__current { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 6px; border-radius: 8px; color: var(--ink-2); border: 1px solid transparent; }
.lang__current::-webkit-details-marker { display: none; }
.lang__current:hover, .lang[open] .lang__current { color: var(--ink); border-color: var(--line-2); background: var(--bg-2); }
.lang__slug { font-size: .72rem; font-weight: 500; letter-spacing: .04em; }
.flag { width: 18px; height: 12px; border-radius: 2px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(16, 20, 24, .18) inset; }
.lang__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40; background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 330px; }
.lang__item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--ink-2); font-size: .88rem; white-space: nowrap; }
.lang__item:hover { background: var(--bg-2); color: var(--ink); }
.lang__item.is-active { background: var(--accent-2); color: var(--accent); font-weight: 600; }
.lang__name { overflow: hidden; text-overflow: ellipsis; }
.lang__pin { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.lang__pin a { display: flex; align-items: flex-start; gap: 9px; padding: 8px 9px; border-radius: 8px; color: var(--ink-2); }
.lang__pin a:hover { background: var(--bg-2); }
.lang__pin-box { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: .7rem; color: var(--bg); flex: none; margin-top: 2px; }
.lang[data-pinned] .lang__pin-box { background: var(--accent); border-color: var(--accent); }
.lang__pin b { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); }
.lang__pin small { display: block; font-size: .76rem; color: var(--ink-3); margin-top: 1px; max-width: 34ch; }
@media (max-width: 900px) { .lang__menu { position: fixed; inset-inline: 12px; inset-inline-end: 12px; top: 64px; min-width: 0; } }

.sw { width: 26px; height: 26px; border-radius: 50%; background: none; border: 0; padding: 0; flex: none; cursor: pointer; display: grid; place-items: center; transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.sw:hover, .sw:focus-visible { transform: scale(1.16); }
.sw:active { transform: scale(1.04); }
.sw svg { width: 26px; height: 26px; display: block; overflow: visible; }
.sw__disc { transform-origin: 20px 20px; transition: transform .55s cubic-bezier(.35, 1.45, .45, 1); }
.sw.on .sw__disc { transform: rotate(180deg); }
.sw__day { fill: #eef1f6; }
.sw__night { fill: #171c24; }
.sw__sun { fill: #171c24; stroke: #171c24; }
.sw__rays { stroke-width: 1.7; stroke-linecap: round; }
.sw__moon { fill: #eef1f6; }
.sw__edge { fill: none; stroke: var(--line-2); stroke-width: 1.5; transition: stroke .25s; }
.sw:hover .sw__edge, .sw:focus-visible .sw__edge { stroke: var(--accent); }
.sw:focus-visible { outline: none; }

/* The theme change itself: the browser holds the old frame while the new one is revealed by a
   circle opening from the switch. The default cross-fade is turned off so the two do not blur
   into each other, and the old frame simply waits underneath. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; animation: theme-wipe .6s cubic-bezier(.3, .75, .25, 1); }

@keyframes theme-wipe {
	from { clip-path: circle(0 at var(--wipe-x, 50%) var(--wipe-y, 0)); }
	to { clip-path: circle(var(--wipe-r, 150vmax) at var(--wipe-x, 50%) var(--wipe-y, 0)); }
}

.cta { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: .95rem; position: relative; overflow: hidden; border: 0; font-family: inherit; cursor: pointer; }
.cta span { display: inline-block; transition: transform .25s; }
.cta b { position: absolute; inset-inline: 0; top: 9px; text-align: center; font-weight: 600; transform: translateY(140%); transition: transform .25s; }
.cta.done span { transform: translateY(-140%); }
.cta.done b { transform: none; }

/* ---------- main / footer ---------- */

main { flex: 1; }
.page { padding-block: 24px 16px; }
.page--narrow { max-width: 760px; }

.foot { margin-top: 56px; padding-block: 22px 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; color: var(--ink-3); font-size: .9rem; }
.foot a:hover { color: var(--ink); }
.foot__status { display: inline-flex; align-items: center; gap: 8px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.crumbs { display: flex; gap: 8px; color: var(--ink-3); font-size: .85rem; margin-bottom: 18px; }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: var(--line-2); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }

/* ---------- hero ---------- */

.hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; padding-block: 64px 40px; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 800; line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead { font-size: 1.15rem; color: var(--ink-2); max-width: 34em; margin: 20px 0 28px; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; font-weight: 600; border: 1px solid var(--line-2); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* photo card */
.stage { perspective: 1100px; touch-action: none; }
.card {
	position: relative; aspect-ratio: 3 / 4; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow);
	transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out; overflow: hidden; display: block;
}
.card.rest { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }

/* Pivoting on the bottom-left corner: that corner is the point of contact and stays on the ground
   while the card turns five times above it, leaning and swaying, and the contact point itself walks
   a small closed path. One turn per cycle of lean and walk, so the dance stays in step with itself.
   The transition is suppressed during the dance, or it would fight the animation frame by frame. */
.card.dance {
	transform-origin: 0% 100%;
	transition: none;
	transform:
		translate3d(calc(var(--walk-x) + var(--rise-x)), calc(var(--walk-y) + var(--rise-y)), 0)
		scale(var(--shrink))
		rotateZ(var(--lean))
		rotateX(var(--sway))
		rotate3d(3, -4, 0, var(--spin));
	animation:
		card-spin 2.6s linear forwards,
		card-lean 2.6s ease-in-out,
		card-rise 2.6s ease-in-out,
		card-sway .52s ease-in-out 5,
		card-walk .52s ease-in-out 5;
	will-change: transform;
}

/*
 * Why rotate3d and not rotateY: a card balanced on a corner turns about the diagonal running through
 * that corner, not about its own vertical. rotateY would pivot it around its left edge, which is a
 * different object entirely - a card swinging on a hinge rather than one spinning on a point.
 *
 * With the origin at the bottom-left corner, the diagonal to the opposite corner points (w, -h). The
 * card is 3 by 4, so that axis is exactly (3, -4, 0), and it costs nothing to say so.
 *
 * The lean sits outside the spin, so it tips the whole spinning card until that diagonal stands
 * vertical. Inside it, the spin leaves the axis where it is - which is the point.
 */

@keyframes card-spin { to { --spin: 1800deg; } }

/* The card is 3 by 4, so the diagonal from the contact corner to the opposite one stands about 37
   degrees off vertical. Leaning by roughly that much stands the card up on that corner with the far
   corner pointing at the sky, which is the only angle at which spinning on a corner reads as such.
   It is deliberately never exactly 37: the lean wanders either side of it, because a real card
   balanced on a corner hunts for its axis rather than holding a perfect line. It rises onto the
   corner at the start and settles flat again at the end, so the hero card is left as it was. */
@keyframes card-lean {
	0% { --lean: 0deg; }
	6% { --lean: -35deg; }
	20% { --lean: -29deg; }
	34% { --lean: -36deg; }
	48% { --lean: -30deg; }
	62% { --lean: -35.5deg; }
	80% { --lean: -31deg; }
	/* From here the card comes down through its fifth turn and is flat the moment that turn ends,
	   rather than finishing the spin and then rotating back upright as a separate movement. The spin
	   is linear precisely so this window is one whole turn: it lands square because 1800 degrees is
	   a multiple of 360, so the face is front-on at the same instant the lean reaches zero. */
	100% { --lean: 0deg; }
}

/* Tipping a 300 by 400 card onto its bottom-left corner sweeps its far edge some 250px to the left
   of that corner, straight through the headline. This is the compensation: the card gives ground to
   the right and shrinks a little while it is up on the corner, so the whole dance stays inside the
   column it occupies at rest. Percentages here resolve against the card's own box, so it holds at
   any size, and scaling shares the same origin so the contact corner never moves. */
/* How much the card gives up while it is on its corner, and why it is exactly this much.
 *
 * Standing a card on its corner puts its diagonal vertical, so the diagonal takes over the height
 * the card used to occupy, and the reduction needed is height over diagonal - nothing more.
 *
 * Rendered, this card is 380 by 507. On the nominal 3:4 that is a 3-4-5 triangle and the answer is
 * exactly 4/5, but the rendered height is a rounded 506.67, and measuring on screen moves it a point
 * or two either way. It is a fifth give or take, not the two fifths this once took: anything beyond
 * that is not geometry, it is just making the card small.
 *
 * A card standing on a corner sweeps its diagonal, not its width. At full size that is about 650px
 * across on a 1100px viewport, where only 491px is free between the hero text and the right edge -
 * so at full size it cannot avoid covering the headline. Measured, not guessed: the sweep is sampled
 * densely enough to catch the card face-on, which is its widest moment, and checked against the h1.
 *
 * The reduction is only for the duration of the dance. The card returns to full size as it lands,
 * so nothing about how large it looks at rest is affected by this number. */
@keyframes card-rise {
	0% { --rise-x: 0%; --rise-y: 0%; --shrink: 1; }
	6% { --rise-x: 15%; --rise-y: 4%; --shrink: .82; }
	80% { --rise-x: 14%; --rise-y: 3%; --shrink: .83; }
	/* Unwinds over the same final turn, so the card returns to its resting place as part of landing.
	   It has to track the lean rather than race it: the compensation exists because the card is
	   tilted, so releasing it while the card is still at twenty degrees puts the corner straight back
	   through the paragraph. These two steps keep it roughly proportional to how far over it still is. */
	88% { --rise-x: 5%; --rise-y: 2%; --shrink: .89; }
	95% { --rise-x: 1%; --rise-y: 1%; --shrink: .95; }
	100% { --rise-x: 0%; --rise-y: 0%; --shrink: 1; }
}

@keyframes card-sway {
	0%, 100% { --sway: 0deg; }
	50% { --sway: 5deg; }
}

/* The contact corner traces a closed loop, flattened because the ground is seen at an angle. */
@keyframes card-walk {
	0%, 100% { --walk-x: 0px; --walk-y: 0px; }
	25% { --walk-x: -11px; --walk-y: -3px; }
	50% { --walk-x: 0px; --walk-y: -5px; }
	75% { --walk-x: 11px; --walk-y: -3px; }
}

.card__photo { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, #c9d3df 0, #9aa7b7 45%, #5b6878 100%); display: grid; place-items: center; color: #fff; text-align: center; }
.card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A scrim under the labels. The photo is the same in either theme and its top is bright sky,
   where white text measures 1.6:1, so a veil there is not optional. Which way it veils is a
   theme token: dark pages get a dark band that reads as the page continuing over the photo,
   light pages a bright one with the tag set in ink. The foot of the photo is already dark
   (6.6:1 under the name), so --scrim-2 only seats the chips and never flips. */
.card__photo::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(to bottom, var(--scrim-1) 0, transparent 26%),
		linear-gradient(to top, var(--scrim-2) 0, transparent 34%);
}
.card__slot { font-family: var(--mono); font-size: .72rem; opacity: .85; border: 1px dashed rgba(255, 255, 255, .7); padding: 10px 14px; border-radius: 10px; letter-spacing: .06em; }
/* The highlight is the cursor's, not the photo's: it only exists while a pointer is on the card.
   Gyroscope tilt deliberately does not light it, so a phone at rest shows a clean photo. */
.card__glare { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--glare), rgba(255, 255, 255, 0) 55%); mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.card.on .card__glare { opacity: 1; }
.card__layer { position: absolute; inset-inline: 22px; transform: translateZ(var(--z)); }
.card__layer { text-shadow: 0 1px 2px rgba(8, 11, 15, .55), 0 6px 20px rgba(8, 11, 15, .4); }
.card__tag { top: 20px; --z: 34px; display: flex; justify-content: space-between; align-items: center; color: var(--card-tag-ink); text-shadow: 0 1px 2px var(--card-tag-shadow); }
.card__tag .mono { opacity: .92; }
.card__name { bottom: 74px; --z: 46px; color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.05; }
.card__name small { display: block; font-family: var(--body); font-weight: 500; font-size: .95rem; opacity: .9; margin-top: 4px; }
.card__chips { bottom: 22px; --z: 70px; display: flex; gap: 6px; flex-wrap: wrap; }
.card__chips span { background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255, 255, 255, .35); padding: 4px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.card__hole { position: absolute; top: 0; inset-inline-start: 50%; transform: translate(-50%, -50%) translateZ(20px); width: 44px; height: 18px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
.stage__hint { margin-top: 12px; color: var(--ink-3); text-align: center; }

/* ---------- sections and tiles ---------- */

.section { padding-block: 26px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section__head h2 { font-size: 1.5rem; font-weight: 800; }
.section__lead { color: var(--ink-3); font-size: .95rem; margin-inline-start: 10px; }
.section__more { color: var(--accent); font-weight: 600; white-space: nowrap; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; perspective: 1200px; }

.tile {
	position: relative; display: flex; flex-direction: column; min-height: 214px; padding: 22px; border-radius: var(--radius);
	background: var(--bg-2); border: 1px solid transparent; transform-style: preserve-3d;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
	transition: transform .12s ease-out, box-shadow .2s, border-color .2s, background .2s; overflow: hidden;
}
.tile.rest { transition: transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s, background .2s; }
.tile:hover, .tile:focus-within, .tile.on { box-shadow: var(--shadow); border-color: var(--line-2); background: var(--bg); }
.tile__glare {
	position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
	background:
		radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--glare) 0, rgba(255, 255, 255, 0) 38%),
		radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--glare-tint) 0, transparent 62%);
}
.tile:hover .tile__glare, .tile.on .tile__glare { opacity: 1; }
.tile__kind { color: var(--ink-3); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tile__mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin: 16px 0 14px; background: var(--accent-2); color: var(--accent); transform: translateZ(28px); }
.tile__mark svg { width: 24px; height: 24px; }
.tile__mark img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.tile--business .tile__mark { background: var(--warn-2); color: var(--warn); }
.tile--person .tile__mark { border-radius: 50%; background: var(--bg-3); color: var(--ink-2); }
.tile h3 { font-size: 1.18rem; font-weight: 700; transform: translateZ(18px); }
.tile__desc { margin: 6px 0 0; color: var(--ink-2); font-size: .96rem; flex: 1; }
.tile__tele { margin-top: 14px; color: var(--ink-3); min-height: 1.2em; white-space: nowrap; overflow: hidden; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.tile:hover .tile__tele, .tile:focus-within .tile__tele, .tile.on .tile__tele { opacity: 1; transform: none; }
.tile__arrow { position: absolute; inset-inline-end: 20px; top: 20px; color: var(--ink-3); transition: transform .18s, color .18s; }
.tile:hover .tile__arrow { transform: translate(2px, -2px); color: var(--ink); }
.tile__link::after { content: ""; position: absolute; inset: 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.fact b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fact span { color: var(--ink-2); }

/* ---------- detail pages ---------- */

.head { margin: 8px 0 28px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.head--plain { grid-template-columns: 1fr; }
.head__mark { width: 72px; height: 72px; border-radius: 18px; background: var(--accent-2); color: var(--accent); display: grid; place-items: center; }
.head__mark svg { width: 36px; height: 36px; }
.head__mark img { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; }
.head h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; }
.head__sub { margin: 8px 0 0; font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; }
.head__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

.badge { display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.badge--status { background: var(--warn-2); border-color: transparent; color: var(--warn); }

.prose { max-width: 66ch; }
.prose p { margin: 0 0 1rem; }
.lead { font-size: 1.1rem; color: var(--ink-2); }

.cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); gap: 48px; align-items: start; }
.aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 18px 20px; }
.panel__title { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 10px; }

.block { margin-top: 34px; }
.block__title { font-size: 1.25rem; font-weight: 800; margin-bottom: 14px; }

.facts-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: .95rem; }
.facts-list dt { color: var(--ink-3); }
.facts-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: .95rem; }
.link-list__kind { display: inline-block; min-width: 5rem; color: var(--ink-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.link-list a:hover { color: var(--accent); }

.focus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.focus li { padding: 16px 18px; border-radius: var(--radius); background: var(--bg-2); }
.focus b { display: block; font-weight: 700; margin-bottom: 4px; }
.focus span { color: var(--ink-2); font-size: .95rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 8rem 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline__years { color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.timeline__role { font-weight: 700; }
.timeline__where { color: var(--ink-2); margin: 2px 0 0; }
.timeline__product::before { content: " · "; color: var(--ink-3); }
.timeline details { margin-top: 8px; }
.timeline summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .9rem; }
.timeline ul { margin: 8px 0 0; padding-inline-start: 18px; color: var(--ink-2); font-size: .95rem; }
.timeline ul li { display: list-item; padding: 0; border: 0; margin-bottom: 4px; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: .9rem; font-weight: 500; }

.dl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dl__meta { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; font-size: .8rem; color: var(--ink-3); }
.dl__meta div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 8px; }
.dl__meta dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

.releases { list-style: none; margin: 0; padding: 0; }
.release { padding: 14px 0; border-top: 1px solid var(--line); }
.release:first-child { border-top: 0; padding-top: 0; }
.release__head { display: flex; gap: 12px; align-items: baseline; font-weight: 700; }
.release__head time { color: var(--ink-3); font-weight: 400; font-size: .9rem; }
.release ul { margin: 6px 0 0; padding-inline-start: 18px; color: var(--ink-2); font-size: .95rem; }

.figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.figs figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.figs figcaption { padding: 8px 12px; font-size: .85rem; color: var(--ink-3); }

.personal { max-width: 620px; margin: 40px auto 0; text-align: center; }
.personal__image { width: 148px; height: 148px; object-fit: cover; border-radius: 50%; margin-bottom: 18px; }
.personal h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; }
.personal__headline { margin: 6px 0 0; color: var(--ink-2); }
.personal .prose { margin: 20px auto; }
.personal .link-list { align-items: center; }
.personal .link-list__kind { display: none; }

.brand-page__head { margin: 16px 0 28px; padding: 28px 0; border-top: 3px solid var(--accent); border-bottom: 1px solid var(--line); }
.brand-page__logo { max-height: 56px; width: auto; margin-bottom: 12px; }
.brand-page__name { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; }
.brand-page__tagline { margin: 10px 0 0; font-size: 1.2rem; color: var(--ink-2); }
.attribution { margin-top: 40px; font-size: .85rem; color: var(--ink-3); }

.contact__email { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 4vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 28px; }
.contact__email a:hover { color: var(--accent); }

/* ---------- responsive / motion ---------- */

@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; gap: 36px; padding-block: 36px 20px; }
	.stage { max-width: 320px; margin-inline: auto; width: 100%; }
	.bar__nav, .bar .cta { display: none; }
	.cols { grid-template-columns: 1fr; gap: 28px; }
	.aside { position: static; }
	.timeline li { grid-template-columns: 1fr; gap: 4px; }
	.head { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.bar { height: auto; flex-wrap: wrap; padding-block: 12px; }
	.bar__nav--mobile { display: flex; width: 100%; gap: 18px; order: 3; font-size: .95rem; }
}
@media (min-width: 901px) { .bar__nav--mobile { display: none; } }
@media (hover: none) { .stage__hint::before { content: "tilt your phone or drag the card · "; } .fan__rpm { display: none; } }
/* Right-to-left. The layout mirrors itself through logical properties; what is left here are the
   things that must NOT mirror: the arrow glyphs point the other way, and the breadcrumb slash and
   the 3D tilt keep their own geometry because they are drawings, not text flow. */
[dir="rtl"] .tile__arrow, [dir="rtl"] .section__more { transform: scaleX(-1); }
[dir="rtl"] .tile:hover .tile__arrow { transform: scaleX(-1) translate(3px, -3px); }
[dir="rtl"] .crumbs li + li::before { content: "\\"; }
[dir="rtl"] .mono { direction: ltr; unicode-bidi: isolate; }

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