/**
 * HQ Brands — "The Press".
 *
 * The seven rules this page is built on, all of which are load-bearing:
 *
 *   1. The chrome is monochrome. Every pixel of colour comes from the work.
 *   2. Chartreuse appears once per screen, on the action. Never decorative.
 *   3. Two condensed voices and no third — a sign-painter gothic for display,
 *      a condensed serif for everything editorial.
 *   4. Grain over everything, so the black reads as ink rather than as screen.
 *   5. Work is captioned CLIENT | what we made, with a hairline between.
 *   6. Mobile never collapses to a burger. The composition scales.
 *   7. Display type is measured and fitted, not sized from a scale.
 *
 * This file assumes nothing else is loaded — the template dequeues Ohio and
 * WPBakery — so it carries its own reset.
 */

@font-face {
	font-family: 'Big Shoulders Display';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/bigshoulders-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Noto Serif Display';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62.5% 100%;
	font-display: swap;
	src: url('fonts/notoserifdisp-var.woff2') format('woff2');
}

:root {
	--gothic: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
	--serif: 'Noto Serif Display', Georgia, serif;

	/* Not pure black. Pure black leaves the grain nothing to sit on. */
	--paper: #0B0D0F;
	--chalk: #FFFFFF;
	--dim: #8B8F94;
	--hair: rgba(255, 255, 255, 0.22);
	--lime: #B4E809;

	--margin: 40px;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur: 0.4s;
}

@media (max-width: 768px) { :root { --margin: 20px; } }

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

html { -webkit-text-size-adjust: 100%; }

body.hq-press {
	margin: 0;
	background: var(--paper);
	color: var(--chalk);
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.55;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.hq-press img,
.hq-press video { display: block; max-width: 100%; }

.hq-press a { color: inherit; text-decoration: none; }

.hq-press :where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
}

/* ---- grain ------------------------------------------------------------ */
.grain {
	position: fixed; inset: -50%; z-index: 200; pointer-events: none;
	background-image: url('media/grain.png');
	background-repeat: repeat;
	opacity: 0.055;
	animation: hqJitter 0.9s steps(3) infinite;
}
@keyframes hqJitter {
	0%   { transform: translate(0, 0); }
	33%  { transform: translate(-2%, 1%); }
	66%  { transform: translate(1%, -2%); }
	100% { transform: translate(0, 0); }
}

/* ---- shared -----------------------------------------------------------
   Wide-tracked small caps. Used for every aside on the page, which is what
   gives the whole thing its printed-ephemera register. */
.micro {
	font-family: var(--serif);
	font-size: 11px; font-weight: 500; font-stretch: 87%;
	letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
	margin: 0;
}

.gothic {
	font-family: var(--gothic);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 0.9;
	margin: 0;
}

/* ---- header: never a burger ------------------------------------------ */
.hd {
	position: absolute; inset: 0 0 auto 0; z-index: 20;
	display: flex; align-items: center; gap: 28px;
	padding: 26px var(--margin);
}
.hd__mark img { height: 34px; width: auto; }
.hd__nav { display: flex; gap: 26px; margin-left: auto; flex-wrap: wrap; }
.hd__nav a {
	font-family: var(--gothic);
	font-size: 19px; font-weight: 600; letter-spacing: 0.05em;
	text-transform: uppercase; opacity: 0.72;
	transition: opacity var(--dur) var(--ease);
}
.hd__nav a:hover, .hd__nav a[aria-current] { opacity: 1; }

/* The one piece of colour outside the work. */
.hd__cta {
	font-family: var(--gothic);
	font-size: 18px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	background: var(--lime); color: var(--paper);
	padding: 9px 16px; white-space: nowrap;
}

/* ---- hero ------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: center;
	padding: 96px var(--margin) 120px;
	overflow: hidden;
}
/**
 * The film sits behind the whole hero, held well back.
 *
 * A letterboxed band crossing the type was tried and removed. It works on the
 * site it came from because that wordmark is ONE line and the band is exactly
 * cap height, so it reads as a slot the letters sit in. Ours is two lines, so
 * the same band cut the first line at its baseline and the second through its
 * shoulder — a hard-edged grey slab across the middle of the composition, with
 * the letters crossing it losing their ground and appearing to float. The form
 * was copied without the reason that made the form work.
 */
.hero__bed { position: absolute; inset: 0; z-index: 0; background: var(--paper); }
/**
 * No `grayscale()` filter here, deliberately.
 *
 * The hero clip is graded monochrome at source except for one chartreuse
 * element — which is the entire signature. A blanket desaturation in CSS would
 * strip exactly the thing the film was made for. If a future clip arrives in
 * full colour, grade it on the way in; do not filter it here.
 */
.hero__bed img,
.hero__bed video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	/* Full opacity, and this is not a matter of taste.
	   The dimming here (0.62, then 0.8) existed to tame an earlier clip that was
	   a brightly lit car filling the frame. The film now in place is graded at
	   source: measured across its length it never exceeds 6% of pixels above
	   150 luminance, and it ends on pure black. There is nothing left to tame,
	   and every point of opacity taken off it is taken off the one lime element
	   the film exists for. Dim the asset, not the layer. */
	opacity: 1;
}
.hero__bed video { opacity: 0; transition: opacity 1s var(--ease); }
.hero__bed video.is-on { opacity: 1; }
/* Two translucent layers composite to more than either alone, so the poster
   retires the moment the clip is actually painting. */
.hero__bed.is-live img { opacity: 0; transition: opacity 1s var(--ease); }
/* The scrim, sized to the film rather than to a habit.
   At 0.25 → 0.9 this was compounding with a dimmed video layer and crushing an
   already-dark film into a grey smear: on a 1440 screen the lime line simply
   was not visible. It now clears the centre entirely and only closes the
   corners, which is all a vignette is for — holding the eye off the edges. */
.hero__bed::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(125% 90% at 50% 58%, rgba(11,13,15,0), rgba(11,13,15,0.55));
}

.hero__in { position: relative; z-index: 3; }
.hero__in .micro { margin-bottom: 22px; }

.ln {
	display: block;
	font-family: var(--gothic);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 0.82;
	letter-spacing: 0.005em;
	white-space: nowrap;
	/* Replaced by the fitter; this is only what shows if the script never runs. */
	font-size: 18vw;
}
.hero h1 { margin: 0; }

.hero__foot {
	position: absolute; z-index: 4; left: var(--margin); right: var(--margin); bottom: 34px;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}

/* Type on a circle — a letterpress convention, and a cheaper way to say
   "keep going" than an arrow borrowed from a UI kit. */
.seal { width: 92px; height: 92px; flex: none; }
.seal text {
	font-family: var(--serif); font-size: 9.4px; letter-spacing: 0.24em;
	fill: var(--chalk); text-transform: uppercase;
}
.seal .arrow { stroke: var(--chalk); stroke-width: 1.4; fill: none; }
.seal--spin { animation: hqSpin 22s linear infinite; transform-origin: 50% 50%; }
@keyframes hqSpin { to { transform: rotate(360deg); } }

/* ---- rule band -------------------------------------------------------- */
.band { padding: 64px var(--margin); }
.band__rules { border-top: 1px solid var(--chalk); border-bottom: 1px solid var(--chalk); padding: 4px 0; }
.band__rules > div { border-top: 1px solid var(--chalk); border-bottom: 1px solid var(--chalk); padding: 30px 0; }
.band__grid { display: grid; grid-template-columns: 210px 1fr; gap: 40px; align-items: center; }
.band__lab { font-size: 46px; }
.band__items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.band__items p {
	margin: 0; font-family: var(--serif); font-stretch: 75%;
	font-size: 21px; font-weight: 700; line-height: 1.15;
	letter-spacing: 0.03em; text-transform: uppercase;
}

/* ---- section heads ---------------------------------------------------- */
.head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
	padding: 0 var(--margin) 26px;
}
.head h2 { font-size: clamp(34px, 4.4vw, 62px); }

/* ---- work index ------------------------------------------------------- */
.work { padding: 0 var(--margin) 90px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tile { position: relative; overflow: hidden; grid-column: span 1; background: #16191d; }
.tile--full { grid-column: span 2; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
.tile video { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.tile video.is-on { opacity: 1; }
.tile::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(transparent 52%, rgba(11,13,15,0.78));
}

/* The lockup. Client in the gothic, a hairline, then what we actually made. */
.lock {
	position: absolute; z-index: 2; left: 30px; bottom: 26px; right: 30px;
	display: flex; align-items: center; gap: 18px;
}
.lock__who { font-family: var(--gothic); font-weight: 700; font-size: clamp(26px, 3vw, 46px); line-height: 0.9; text-transform: uppercase; margin: 0; }
.lock__rule { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.55); }
.lock__what {
	font-family: var(--serif); font-stretch: 75%;
	font-size: 15px; font-weight: 700; line-height: 1.2;
	letter-spacing: 0.05em; text-transform: uppercase; margin: 0;
	max-width: 12ch;
}

/* ---- story ------------------------------------------------------------
   An editorial spread, not a centred block: the statement holds the left,
   the body sets in two narrow columns on the right. Stacking the two instead
   left roughly a third of the row empty, which reads as an unfinished page
   rather than as space. */
.story {
	padding: 20px var(--margin) 96px;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 60px; align-items: start;
}
.story__lead {
	font-family: var(--serif); font-stretch: 75%;
	font-size: clamp(26px, 3.9vw, 58px); font-weight: 700;
	line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase;
	margin: 0; max-width: 15ch;
}
.story__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.story__cols p { margin: 0 0 16px; color: #D5D8DB; font-size: 16px; }

/* ---- clients ---------------------------------------------------------- */
.clients { padding: 0 0 96px; }
.clients__rules { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; padding: 18px 0; }
.clients__row { display: flex; width: max-content; animation: hqSlide 46s linear infinite; }
.clients ul { display: flex; margin: 0; padding: 0; list-style: none; }
.clients li {
	font-family: var(--gothic); font-size: 30px; font-weight: 600;
	letter-spacing: 0.03em; text-transform: uppercase;
	padding: 0 26px; white-space: nowrap; opacity: 0.82;
}
@keyframes hqSlide { to { transform: translateX(-50%); } }

/* ---- contact ---------------------------------------------------------- */
.contact { padding: 0 var(--margin) 90px; }
.contact__big { font-size: clamp(46px, 9vw, 150px); line-height: 0.86; margin-bottom: 34px; }
.contact__big a { display: inline-block; }
.contact__big a:hover { color: var(--lime); }
.contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; border-top: 1px solid var(--hair); padding-top: 26px; }
.contact__grid h3 { font-family: var(--gothic); font-size: 24px; font-weight: 700; text-transform: uppercase; margin: 0 0 8px; }
.contact__grid p { margin: 0; color: #D5D8DB; font-size: 16px; }

/* ---- footer ----------------------------------------------------------- */
.foot { padding: 30px var(--margin) 40px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot__soc { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---- contact page -----------------------------------------------------
   Same chrome, same two voices, one job: get the visitor into a conversation.
   The page is ordered by how people actually behave rather than by how a
   contact page is usually drawn — the fast channel first at full size, the
   written fallback beside it, and the addresses last, because someone looking
   for the office already knows who we are. */

/* Off the hero, the header sits IN the flow. It is absolute on the homepage
   only because the film runs underneath it. */
.hd--solid { position: static; background: var(--paper); }

.cx { display: block; }

.cx__top { padding: 34px var(--margin) 0; }
.cx__top .micro { margin-bottom: 20px; }
.cx__h1 { margin: 0; }

.cx__act {
	padding: 40px var(--margin) 30px;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 60px; align-items: start;
}

.cx__say {
	font-family: var(--serif); font-stretch: 87%;
	font-size: clamp(19px, 2vw, 26px); line-height: 1.4;
	margin: 0 0 30px; max-width: 30ch; color: #D5D8DB;
}

/* The one piece of colour on this screen. It is a block, not a pill: at this
   size the shape reads as a door rather than as a button in a UI kit. */
.cx__wa {
	display: flex; flex-direction: column; gap: 4px;
	background: var(--lime); color: var(--paper);
	padding: 18px 24px; min-height: 56px;
	max-width: 460px;
	transition: transform var(--dur) var(--ease);
}
.cx__wa:hover { transform: translateX(6px); }
.cx__wa-say {
	font-family: var(--gothic); font-weight: 700;
	font-size: clamp(26px, 3.4vw, 40px); line-height: 1;
	letter-spacing: 0.02em; text-transform: uppercase;
}
.cx__wa-sub {
	font-family: var(--serif); font-stretch: 75%;
	font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
	text-transform: uppercase; opacity: 0.72;
}

.cx__hours { margin-top: 14px; }
.cx__alt { margin: 26px 0 0; color: #D5D8DB; font-size: 16px; }
.cx__alt a { border-bottom: 1px solid var(--hair); }
.cx__alt a:hover { border-bottom-color: var(--chalk); }

/* ---- the written fallback --------------------------------------------- */
.cx__form { border-top: 1px solid var(--hair); padding-top: 26px; }
.cx__form-t, .cx__state-t { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 20px; }

.cx__f { margin: 0; }
.cx__row { display: block; margin: 0 0 18px; }
.cx__row .micro { display: block; margin-bottom: 8px; }

.cx__f input,
.cx__f textarea {
	display: block; width: 100%; min-height: 44px;
	background: transparent; color: var(--chalk);
	border: 0; border-bottom: 1px solid var(--hair);
	padding: 10px 2px;
	font-family: var(--serif); font-size: 17px; line-height: 1.4;
	transition: border-color var(--dur) var(--ease);
}
.cx__f textarea { resize: vertical; }
.cx__f input:hover, .cx__f textarea:hover { border-bottom-color: rgba(255, 255, 255, 0.45); }
.cx__f input:focus, .cx__f textarea:focus { outline: none; border-bottom-color: var(--lime); }

/* Not lime. Lime is spent on WhatsApp above, and two green blocks on one
   screen would make the page argue with itself about which one to press. */
.cx__send {
	appearance: none; cursor: pointer;
	min-height: 48px; padding: 10px 26px; margin-top: 6px;
	background: transparent; color: var(--chalk);
	border: 1px solid var(--chalk);
	font-family: var(--gothic); font-weight: 700; font-size: 20px;
	letter-spacing: 0.06em; text-transform: uppercase;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cx__send:hover { background: var(--chalk); color: var(--paper); }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and skipping it is exactly what we want a human's browser to do. */
.cx__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Every outcome is a designed state, including the ones nobody plans for. */
.cx__err, .cx__state {
	border-left: 2px solid var(--chalk);
	background: #16191D;
	padding: 16px 18px; margin: 0 0 22px;
	font-size: 16px; line-height: 1.5; color: #D5D8DB;
}
.cx__state { margin: 0; }
.cx__state p { margin: 0; }
.cx__state-t { color: var(--chalk); }

.cx__where { padding: 20px var(--margin) 80px; }

@media (max-width: 900px) {
	.cx__act { grid-template-columns: 1fr; gap: 34px; padding-top: 28px; }
	.cx__say { max-width: none; }
	.cx__wa { max-width: none; }
}

@media (max-width: 900px) {
	/* Every link stays. Eight words of condensed gothic cost less height than
	   a menu button costs in personality. */
	.hd { flex-wrap: wrap; gap: 14px 20px; padding-top: 20px; }
	.hd__nav { width: 100%; margin-left: 0; gap: 16px; order: 3; }
	.hd__nav a { font-size: 16px; }
	.hd__cta { font-size: 15px; padding: 7px 12px; margin-left: auto; }

	/* The strapline wraps to two lines here, so the hero reserves that much
	   more at the foot — the fitter reads this padding and pulls the headline
	   down to suit rather than letting the two meet. */
	.hero { padding-top: 150px; padding-bottom: 200px; }
	.hero__foot { bottom: 82px; align-items: center; }
	.hero__foot .micro { max-width: 58%; letter-spacing: 0.16em; line-height: 1.7; }
	.hero__in .micro { letter-spacing: 0.15em; line-height: 1.7; }
	.seal { width: 74px; height: 74px; }

	.band { padding: 40px var(--margin); }
	.band__grid { grid-template-columns: 1fr; gap: 22px; }
	.band__lab { font-size: 34px; }
	.band__items { grid-template-columns: repeat(2, 1fr); gap: 18px; text-align: left; }
	.band__items p { font-size: 17px; }

	.work { grid-template-columns: 1fr; gap: 14px; }
	.tile, .tile--full { grid-column: span 1; }
	.lock { left: 18px; right: 18px; bottom: 18px; gap: 12px; }
	.lock__what { font-size: 12px; max-width: 10ch; }

	.story { grid-template-columns: 1fr; gap: 28px; }
	.story__lead { max-width: none; }
	.story__cols { grid-template-columns: 1fr; gap: 0; }
	.clients li { font-size: 22px; padding: 0 18px; }
	.contact__grid { grid-template-columns: 1fr; gap: 22px; }
	.head { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ---- work index -------------------------------------------------------
   Not a second mosaic. The homepage already shows selected work as tiles, so
   the record itself takes the other printed form: a contents page. The type is
   the design and the still is the only colour — which is the whole rule of this
   site expressed as a layout rather than as a restriction. */
.wx__top { padding: 34px var(--margin) 0; }
.wx__top .micro { margin-bottom: 20px; }
.wx__h1 { margin: 0; }

.wx__index {
	display: grid; grid-template-columns: minmax(0, 1fr) 38%;
	gap: 48px; align-items: start;
	padding: 44px var(--margin) 90px;
}

/* The plate. Sticky, not fixed: it belongs to this section and has to stop
   with it, or it hangs over the footer with nothing to illustrate. */
.wx__plate { position: sticky; top: 96px; order: 2; }
.wx__plate-in { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #16191D; }
.wx__plate-in img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 1; transition: opacity 0.45s var(--ease);
}
.wx__plate-in img.is-out { opacity: 0; }

.wx__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.wx__row { border-bottom: 1px solid var(--hair); }

.wx__link {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto 22px;
	align-items: center; gap: 20px;
	padding: 20px 0; min-height: 64px;
	transition: padding-left var(--dur) var(--ease);
}
a.wx__link:hover, a.wx__link:focus-visible { padding-left: 14px; }
.wx__no { color: var(--dim); }
.wx__thumb { display: none; }
.wx__said { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.wx__who { font-size: clamp(26px, 3.4vw, 52px); transition: opacity var(--dur) var(--ease); }
.wx__made { font-size: 15px; color: #D5D8DB; }
.wx__meta { white-space: nowrap; }

/* The row being read is the one that is lit. Pure CSS, so it works from the
   keyboard as well as the mouse — and it stays at 50% white (about 5:1 on this
   ground), which is dimmed, not hidden. */
.wx__rows:hover .wx__who,
.wx__rows:focus-within .wx__who { opacity: 0.5; }
.wx__row:hover .wx__who,
.wx__row:focus-within .wx__who { opacity: 1; }

/* The arrow is the promise of a page, so it exists only where there is one —
   and it is PRINTED rather than revealed on hover. Eight of these rows have no
   case behind them yet; if the difference only appeared under the cursor, the
   visitor would have to hunt row by row for the ones that open. */
.wx__go { font-size: 20px; opacity: 0.45; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.wx__link:hover .wx__go, a.wx__link:focus-visible .wx__go { opacity: 1; transform: translateX(4px); }
.wx__row.is-inert .wx__link { cursor: default; }

.wx__empty { padding: 30px var(--margin) 80px; max-width: 62ch; color: #D5D8DB; }
.wx__empty a { border-bottom: 1px solid var(--hair); }
.wx__empty a:hover { border-bottom-color: var(--chalk); }

.wx__end { padding: 20px var(--margin) 90px; border-top: 1px solid var(--hair); }
.wx__end-t { font-size: clamp(40px, 8vw, 120px); }
.wx__end-t a:hover { color: var(--lime); }

/* ---- one project ------------------------------------------------------
   A spread: masthead, opening frame, a short brief in columns, then the work
   at the size it was made for. Every block is conditional — see the template. */
.sp__top { padding: 26px var(--margin) 0; }
.sp__back { margin-bottom: 18px; }
.sp__back a { border-bottom: 1px solid var(--hair); padding-bottom: 3px; }
.sp__back a:hover { border-bottom-color: var(--chalk); color: var(--chalk); }
.sp__h1 { margin: 0 0 20px; }
.sp__rail {
	display: flex; align-items: baseline; gap: 12px 26px; flex-wrap: wrap;
	border-top: 1px solid var(--hair); padding-top: 14px;
}
.sp__made { margin: 0; font-size: 18px; }

/* The frame. Same object on the opening shot and in the sequence, so a clip
   behaves identically wherever it appears. */
.fr { position: relative; overflow: hidden; background: #16191D; }
.fr img { width: 100%; height: auto; }
.fr video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 0.8s var(--ease);
}
.fr video.is-on { opacity: 1; }
/* The opening frame is capped by the SCREEN, not by the column.
   Most of this work is portrait — a 1080x1350 social post printed at the full
   content width is 1,700px tall, which pushes the brief, the sequence and the
   next project so far down that the page reads as one picture. Capped at 80vh
   and centred, the frame is a plate on ink; and it is capped rather than
   cropped, because on a piece of social work the crop IS the work. */
.fr--open {
	width: fit-content; max-width: calc(100% - (var(--margin) * 2));
	margin: 30px auto 0; background: transparent;
}
.fr--open img { max-height: 80vh; width: auto; }

.sp__brief {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 34px; padding: 56px var(--margin);
	border-bottom: 1px solid var(--hair);
}
.sp__block h2 { margin: 0 0 12px; }
.sp__block p { margin: 0 0 14px; color: #D5D8DB; font-size: 16px; }
.sp__num { font-size: clamp(38px, 5vw, 76px); margin: 0 0 8px; }
.sp__src { color: var(--dim); }

.sp__frames { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 56px var(--margin) 24px; }
.sp__fig { margin: 0; grid-column: span 1; }
.sp__fig--full { grid-column: span 2; }
.sp__cap { margin-top: 10px; }

.sp__on { padding: 44px var(--margin) 90px; border-top: 1px solid var(--hair); }
.sp__on-t { font-size: clamp(40px, 8vw, 120px); margin-top: 10px; }
.sp__on-t a:hover { color: var(--lime); }

@media (max-width: 900px) {
	/* No hover on a phone, so the plate has nothing to react to: every row
	   carries its own frame instead. The list stays a list — it does not
	   reorganise into the tile grid this page exists to be different from. */
	.wx__index { grid-template-columns: 1fr; gap: 0; padding-top: 30px; }
	.wx__plate { display: none; }
	.wx__link {
		grid-template-columns: 64px minmax(0, 1fr) 22px;
		grid-template-areas:
			'thumb no   go'
			'thumb said said'
			'thumb meta meta';
		align-items: start; gap: 8px 16px; padding: 18px 0;
	}
	.wx__no { grid-area: no; }
	.wx__thumb { grid-area: thumb; display: block; align-self: start; }
	.wx__thumb img { width: 64px; height: 84px; object-fit: cover; }
	.wx__said { grid-area: said; }
	.wx__meta { grid-area: meta; white-space: normal; }
	/* Nothing hovers here, so the arrow cannot be a hover state — it is either
	   printed or the row does not lead anywhere. */
	.wx__go { grid-area: go; opacity: 1; justify-self: end; }
	a.wx__link:hover, a.wx__link:focus-visible { padding-left: 0; }
	.wx__rows:hover .wx__who, .wx__rows:focus-within .wx__who { opacity: 1; }

	/**
	 * Touch targets. On a pointer device a 17px-tall text link is fine; on a
	 * phone it is a miss waiting to happen, so every link that a thumb has to
	 * find gets padded to 44px. Padding rather than font-size — the type sizes
	 * are the composition and they do not change between devices.
	 */
	.hd__cta { min-height: 44px; display: inline-flex; align-items: center; }
	.foot__soc a { display: inline-block; padding: 14px 0; }
	.hd__nav a { padding: 10px 0; }
	.sp__back { margin-bottom: 2px; }
	.sp__back a { display: inline-block; padding: 21px 0 6px; }

	.sp__brief { padding: 40px var(--margin); gap: 26px; }
	.sp__frames { grid-template-columns: 1fr; gap: 14px; padding-top: 40px; }
	.sp__fig, .sp__fig--full { grid-column: span 1; }
	.sp__rail { gap: 8px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.hq-press *, .hq-press *::before, .hq-press *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}