/* ============================================================
   Creativ Razor / Home sections
   Amber is an accent: text, rules, pills. Bone carries the two
   inversion moments (Three things, Closing CTA).
   ============================================================ */

/* ---- 01 Hero ------------------------------------------------------ */
.cr-hero {
	position: relative; overflow: clip;
	min-height: min(90svh, 54rem);
	display: flex; align-items: center;
	padding-block: calc(var(--cr-nav-h) + clamp(2.5rem, 7vw, 6rem)) clamp(3rem, 6vw, 5rem);
}
/* Amber bloom, off-centre right. Behind content, never over type. */
.cr-hero::before {
	content: ''; position: absolute; right: -14%; top: -20%;
	width: 62%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at center, var(--cr-amber-glow), transparent 64%);
	pointer-events: none; z-index: 0;
}
/* Hairline of amber closing the section. */
.cr-hero::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
	background: linear-gradient(90deg, transparent, var(--cr-amber), transparent);
}
.cr-hero__inner { position: relative; z-index: 1; width: 100%; }
.cr-hero__head { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 17ch; }
.cr-hero__lead { margin-top: clamp(1.4rem, 3vw, 2rem); }
.cr-hero__cta {
	display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem);
	margin-top: clamp(2rem, 4vw, 2.75rem); flex-wrap: wrap;
}

/* ---- 03 Selected work ------------------------------------------- */
/* Breakpoint-free: columns appear when there's room for them.
   26rem, raised from 17rem when the shell went full width. The old floor
   fitted six 275px columns across a 1900px screen, which shrinks a logo or a
   publication spread to a stamp. A wider floor spends the extra width on
   bigger artwork instead of more of it: four columns near 430px at 1900,
   three at 1440, two on a tablet, one on a phone. */
.cr-work {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
	gap: clamp(0.75rem, 1.8vw, 1.4rem);
	margin-top: clamp(2rem, 4vw, 2.75rem);
}
/* The portfolio assets are logos, covers and screenshots on white, not
   photography. Cropping them to fill a box slices the artwork, so the
   media is CONTAINED and framed on bone, and the caption sits below it
   rather than on a scrim over the top. Works for a photo too. */
.cr-tile { display: block; position: relative; }
.cr-tile__media {
	/* `minmax(0, 1fr)` not `place-items: center`, and the zero is the point.
	   A grid track will not shrink below min-content, so the row grew to each
	   image's intrinsic height and `overflow: hidden` cropped the difference:
	   8 of 19 portfolio tiles were losing up to 301px off the bottom, worst on
	   portrait artwork. That silently did the very thing `contain` is here to
	   prevent. Allowing the track to shrink gives the item a definite area, so
	   the percentages below resolve and the artwork letterboxes intact. */
	display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	/* the hover rule is an ::after pinned to THIS box, not to the whole
	   tile, which now extends past it to include the caption */
	position: relative;
	aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--cr-bone); border-radius: 3px;
	padding: clamp(0.85rem, 2vw, 1.5rem);
	transition: background var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-tile__media img {
	width: 100%; height: 100%;
	object-fit: contain;
	transition: scale 800ms var(--cr-ease-expo);
	/* The image sits above the tile's own ground, below the hover rule. */
	position: relative; z-index: 1;
}

/* ---- Tile ground, measured not assumed ----------------------------
   These thumbnails are logos, packaging and covers photographed on a
   flat studio ground, then CONTAINED inside a bone frame. So the frame
   showed its own off-white around a rectangle of the photograph's
   off-white, two near-identical tones meeting at a hard straight edge,
   and nineteen of those down a page read as grubby rather than as
   framed work.

   Same treatment as the case pages, deliberately: `cr_hero_ground()`
   measures each image's border and the tile knocks that ground out, so
   a tile and the case page it opens handle the same artwork the same
   way. `darken` keeps the per-channel minimum against a white ground,
   `lighten` keeps the maximum against a black one, and because the
   ground here is a FLAT colour rather than a blurred enlargement the
   blend is exact: min(artwork, 255) is the artwork, so nothing shifts.
   See LESSONS.md #190 and #193 for why a lifted blur was wrong.

   isolation: isolate is load bearing. Without it the blend reaches past
   the frame and mixes with the near-black page behind it, which turns
   white packaging into a hole.
   ------------------------------------------------------------------ */
.cr-tile__media--paper,
.cr-tile__media--ink { isolation: isolate; }
.cr-tile__media--paper { background: #fff; }
.cr-tile__media--paper img { mix-blend-mode: darken; }
/* Not pure black: the page itself is near-black, so a #000 ground would
   make the frame vanish and the tile would lose its edge entirely. The
   raised surface keeps the frame readable while still sitting below
   every tone in the artwork, which is what `lighten` needs. */
.cr-tile__media--ink { background: var(--cr-ink-2); }
.cr-tile__media--ink img { mix-blend-mode: lighten; }
/* A restrained lift, not a zoom: these are marks, and enlarging a
   logo on hover looks like a mistake. */
.cr-tile:hover .cr-tile__media img,
.cr-tile:focus-visible .cr-tile__media img { scale: 1.03; }
.cr-tile:hover .cr-tile__media { background: var(--cr-bone-2); }
/*
 * These two MUST come after the bone hover tint above, not before it.
 * `.cr-tile:hover .cr-tile__media` and `.cr-tile:hover .cr-tile__media--paper`
 * have identical specificity (0,3,0), so the winner is decided purely by source
 * order. Written above the generic rule, the tint won on hover, moved the
 * knockout ground off white, and every paper tile flashed grey under the cursor.
 */
.cr-tile:hover .cr-tile__media--paper,
.cr-tile:focus-visible .cr-tile__media--paper { background: #fff; }
.cr-tile:hover .cr-tile__media--ink,
.cr-tile:focus-visible .cr-tile__media--ink { background: var(--cr-ink-2); }

.cr-tile__cap { display: block; padding-top: 1rem; }
.cr-tile__cap .cr-label { color: var(--cr-amber); }
.cr-tile__cap h2, .cr-tile__cap h3 {
	color: var(--cr-white); margin-top: 0.45rem;
	transition: color var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-tile:hover .cr-tile__cap h2, .cr-tile:hover .cr-tile__cap h3 { color: var(--cr-amber); }
.cr-tile__cap p { color: var(--cr-mute-ink); font-size: 0.92rem; margin-top: 0.45rem; }
/* Amber rule draws along the foot of the media box on hover. */
.cr-tile__media::after {
	content: ''; position: absolute; z-index: 2;
	left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--cr-amber);
	scale: 0 1; transform-origin: left;
	transition: scale 460ms var(--cr-ease-expo);
}
.cr-tile:hover .cr-tile__media::after,
.cr-tile:focus-visible .cr-tile__media::after { scale: 1 1; }
.cr-work__all { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ---- 04 Three things (bone) ------------------------------------- */
.cr-pillars {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: clamp(1.75rem, 4vw, 3.25rem);
	margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
.cr-pillar { padding-top: 1.4rem; border-top: 2px solid var(--cr-ink); }
.cr-pillar__no {
	font-weight: 800; font-size: 0.78rem; letter-spacing: 0.18em;
	color: var(--cr-ember); display: block; margin-bottom: 0.9rem;
}
.cr-pillar h3 { margin-bottom: 0.75rem; }
.cr-pillar p { color: var(--cr-mute-bone); }

/* ---- 05 How we engage: numbered rows ---------------------------- */
.cr-ways { margin-top: clamp(2.25rem, 4vw, 2.75rem); border-top: 2px solid var(--cr-amber); }
.cr-way {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: 'num body' '.   link';
	gap: clamp(1rem, 3vw, 1.75rem);
	align-items: start;
	padding-block: clamp(1.5rem, 3vw, 2rem);
	border-bottom: 1px solid var(--cr-hair);
	transition: background var(--cr-dur-state) var(--cr-ease-quart),
	            padding-inline var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-way:hover { background: var(--cr-amber-wash); padding-inline: clamp(0.75rem, 2vw, 1.25rem); }
.cr-way__num {
	grid-area: num;
	font-weight: 800; font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	color: var(--cr-amber); line-height: 0.9;
}
.cr-way__body { grid-area: body; }
.cr-way .cr-link { grid-area: link; justify-self: start; }
.cr-way__meta {
	font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--cr-mute-ink);
	display: block; margin-bottom: 0.45rem;
}
.cr-way p { margin-top: 0.55rem; max-width: 60ch; color: var(--cr-fg-mute); }
.cr-ways__all { margin-top: clamp(2rem, 4vw, 2.75rem); }

@media (min-width: 48rem) {
	.cr-way {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: 'num body link';
		align-items: center;
	}
}

/* ---- 06 Testimonial (panel) ------------------------------------- */
/* No max-width here: this element is also .cr-container, and narrowing
   it would re-centre the whole block out of alignment. The measure
   lives on the quote text instead. */
.cr-quote__mark {
	font-weight: 800; font-size: clamp(3rem, 8vw, 6rem);
	line-height: 0.5; color: var(--cr-amber); display: block;
	opacity: .5;
}
.cr-quote__text {
	max-width: 50rem;
	font-weight: 500; font-size: clamp(1.4rem, 1rem + 2.6vw, 2.7rem);
	line-height: 1.18; letter-spacing: -0.015em;
	margin-top: clamp(0.75rem, 2vw, 1.1rem); text-wrap: pretty;
}
.cr-quote__cite { margin-top: clamp(1.6rem, 3vw, 2.25rem); }

/* ---- 07 Journal ------------------------------------------------- */
.cr-journal__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: clamp(1.5rem, 4vw, 2.75rem);
	margin-top: clamp(2.25rem, 4vw, 2.75rem);
}
.cr-journal__item {
	display: block; padding-top: 1.4rem;
	border-top: 2px solid var(--cr-amber);
}
.cr-journal__item h3 { margin-block: 0.65rem 0.9rem; transition: color var(--cr-dur-state) var(--cr-ease-quart); }
.cr-journal__item p { color: var(--cr-fg-mute); margin-bottom: 1.1rem; max-width: 46ch; }
.cr-journal__item:hover h3 { color: var(--cr-amber); }

/* ---- 08 Closing (bone) ------------------------------------------ */

.cr-closing__head { max-width: 20ch; }
.cr-closing__lead { margin-top: clamp(1.4rem, 3vw, 1.85rem); }
.cr-closing__cta {
	display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem);
	margin-top: clamp(2rem, 4vw, 2.75rem); flex-wrap: wrap;
}

/* ---- Marketing section -------------------------------------------
   Copy left, the featured read as an editorial margin note on the
   right. Same two-column idiom as the services tiers and the case
   setup, so the page keeps one layout grammar rather than inventing a
   third.

   The channel list is the substance here: a visitor who assumes a brand
   studio only draws logos needs to see the media named. It is a real
   `ul`, not a comma run, because six items scan and a sentence of six
   does not.
   ------------------------------------------------------------------ */
.cr-mkt { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.cr-mkt__intro .cr-lead { margin-top: clamp(1rem, 2.5vw, 1.5rem); max-width: var(--cr-measure); }
.cr-mkt__chan {
	list-style: none; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0;
	display: grid; gap: 0.65rem;
	max-width: 34rem;
}
.cr-mkt__chan li {
	position: relative; padding-left: 1.5rem;
	color: var(--cr-fg-mute); line-height: 1.5;
}
/* An en-rule marker rather than a bullet: the site uses hairlines for
   this job everywhere else and a round dot would read as imported. */
.cr-mkt__chan li::before {
	content: ''; position: absolute; left: 0; top: 0.7em;
	width: 0.7rem; height: 1px; background: var(--cr-accent);
}

/* The featured read: a margin note, NOT a card.
   It used to be a filled, bordered, radiused box with an amber top rule,
   a 3px lift and a box-shadow that a near-black ground cannot show. Six
   devices for one link, which is the identical-card-grid reflex applied
   to a single item, and it read as bolted on rather than placed.

   Everything below reuses vocabulary the site already owns: the eyebrow
   rule, one hairline, `.cr-link`'s amber underline, `.cr-link`'s arrow.
   No new device is introduced, and nothing is boxed.

   Its label is a `.cr-eyebrow`, same as the section's own, and both
   columns start at the same y (`align-items: start`), so the two rules
   land on ONE line broken by the gutter. That alignment is the whole
   reason this block is not sticky: sticky slides one rule away from its
   partner. If the empty rail below ever reads as dead rather than as
   margin, `align-self: end` moves the note down instead. */
.cr-mkt__readlbl { color: var(--cr-accent); }

.cr-mkt__teaser { display: grid; gap: 0.85rem; }

/* Specificity ties with `.cr-h3` (both 0,1,0), so this wins on source
   order alone: home.css is enqueued after base.css. Keep it here, below
   the base rule, and do not hoist it. See LESSONS #194. */
.cr-mkt__title {
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
	font-weight: 800;
	color: var(--cr-fg);
	padding-bottom: 0.6rem;
	/* `.cr-link`'s underline, wiped in from zero width instead of always
	   drawn: on a block this reads as a rule rather than an underline,
	   which is the device the rest of the page uses. */
	background-image: linear-gradient(var(--cr-accent), var(--cr-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size var(--cr-dur-state) var(--cr-ease-quart),
	            color var(--cr-dur-state) var(--cr-ease-quart);
}
.cr-mkt__dek {
	color: var(--cr-fg-mute);
	font-size: 0.9rem; line-height: 1.6;
}
/* The arrow is `.cr-link`'s, so the whole note reads as one link without
   a second affordance. `letter-spacing: 0` on the glyph kills the
   trailing 0.16em the tracking would otherwise leave after it. */
.cr-mkt__meta {
	justify-self: start;
	display: inline-flex; align-items: center; gap: 0.5em;
	font-weight: 700; font-size: 0.66rem; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--cr-accent-quiet);
}
.cr-mkt__meta::after {
	content: '\2192'; font-size: 1.15em; letter-spacing: 0;
	transition: translate var(--cr-dur-state) var(--cr-ease-quart);
}

.cr-mkt__teaser:hover .cr-mkt__title,
.cr-mkt__teaser:focus-visible .cr-mkt__title {
	color: var(--cr-accent); background-size: 100% 2px;
}
.cr-mkt__teaser:hover .cr-mkt__meta::after,
.cr-mkt__teaser:focus-visible .cr-mkt__meta::after { translate: 3px 0; }

@media (min-width: 62rem) {
	.cr-mkt {
		grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
		column-gap: clamp(2.5rem, 6vw, 5rem);
		align-items: start;
	}
	/* A 1px neutral hairline, not an accent stripe: it defines the margin
	   column so the space under a short note reads as margin. Only where
	   the second column exists; stacked on mobile the eyebrow rule is
	   already the separator.

	   `align-self: stretch` overrides the container's `start` so the rule
	   runs the full height of the row instead of ending in mid-air under
	   the note. The note itself still sits at the top. */
	.cr-mkt__read {
		align-self: stretch;
		border-inline-start: 1px solid var(--cr-hair);
		padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cr-mkt__title, .cr-mkt__meta::after { transition: none; }
}

/* ---- Missing-image tile ------------------------------------------
   A single letter on the frame, for a real post that has no featured
   image yet. It replaces an `<img src="">`, which is not a harmless
   empty attribute: an empty src resolves against the current document
   URL, so the browser fetches the whole HTML page again as an image and
   logs a console error for it.
   ------------------------------------------------------------------ */
.cr-tile__none {
	display: grid; place-items: center;
	font-weight: 900; line-height: 1;
	font-size: clamp(3rem, 8vw, 5.5rem);
	color: var(--cr-ink); opacity: 0.16;
	user-select: none;
}

/* ---- The record: real counts, in place of a testimonial ----------
   Shown until a genuine client quote exists. Numbers are queried from
   the portfolio so they cannot drift from what is published.
   ------------------------------------------------------------------ */
.cr-proof__head { max-width: 26ch; }
.cr-proof {
	display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}
.cr-proof__it { border-top: 2px solid var(--cr-amber); padding-top: 1.1rem; }
.cr-proof__it dt {
	font-weight: 900; line-height: 0.9;
	font-size: clamp(2.5rem, 6vw, 4rem);
	color: var(--cr-amber);
	font-variant-numeric: tabular-nums;
}
.cr-proof__it dd {
	margin: 0.75rem 0 0; color: var(--cr-fg-mute);
	font-size: 0.95rem; line-height: 1.55;
}
.cr-proof__note { margin-top: clamp(1.75rem, 4vw, 2.5rem); }