/* ==========================================================================
   Picksley Labs — Register (Direction C), block theme port.
   A company index on a strict 12-column grid. One accent. Hairline rules.

   Tokens: the custom properties below mirror theme.json presets 1:1. theme.json
   holds the hex equivalents (for the editor and the preset classes); this file
   keeps the design's oklch values and color-mix() rules.

   Sections
     0. Tokens and reset
     1. Primitives (frame, grid, mono, label)
     2. Header
     3. Section heads
     4. Hero and the aurora window (front page only)
     5. Index of work (details/summary entries, device frames)
     6. Workshop sub-index
     7. Principles
     8. Journal rows (home, blog, archive, search)
     9. Inner page header
    10. Prose and every pl-* class used by the page builders (scripts 08, 09)
    11. Colophon footer
    12. Focus, reduced motion
   ========================================================================== */

/* 0. Tokens and reset ===================================================== */

/* Registered so the scroll-linked keyframes can interpolate them. Browsers
   without @property ignore this and render the aurora at its initial hue. */
@property --aurora-hue {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}
@property --aurora-lift {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 0%;
}

:root {
	--paper:       oklch(0.968 0.008 95);   /* #F6F4EF */
	--paper-2:     oklch(0.938 0.010 100);  /* #ECEBE3 */
	--ink:         oklch(0.215 0.018 150);  /* #141C15 */
	--ink-2:       oklch(0.43 0.016 150);   /* #4A524B, 7.3:1 on paper */
	--ink-3:       oklch(0.53 0.014 150);   /* #666E68, 4.8:1 on paper */
	--rule:        color-mix(in oklch, var(--ink) 16%, transparent);
	--rule-strong: color-mix(in oklch, var(--ink) 85%, transparent);
	--forest:      oklch(0.355 0.065 162);  /* #144631 */
	--deep:        oklch(0.215 0.040 165);  /* #041F15 */
	--accent:      oklch(0.70 0.145 62);    /* #DD872B, marks only */
	--accent-ink:  oklch(0.50 0.12 55);     /* #964D09, accent carrying text or focus on paper */

	--au-1: 158;  /* green */
	--au-2: 185;  /* teal */
	--au-3: 142;  /* sage */
	--au-4: 70;   /* ember */

	--font-sans: var(--wp--preset--font-family--sans, "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif);
	--font-mono: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
	--step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
	--step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--step-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
	--step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
	--step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
	--step-hero: clamp(2.6rem, 1.4rem + 5.4vw, 6.4rem);
	--step-title: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem);

	--gutter: clamp(16px, 3.2vw, 48px);
	--col-gap: clamp(12px, 1.6vw, 24px);
	--max: 1440px;
	--radius: 14px;
	--radius-window: clamp(14px, 1.6vw, 22px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--accent); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* WordPress adds flow-layout margins between siblings. Structural wrappers in
   this theme carry .pr-reset to opt out; `body` lifts it above core's rule. */
body .pr-reset > * { margin-block: 0; }
body .wp-site-blocks > * { margin-block: 0; }
body .wp-site-blocks > main { min-height: 40vh; }

/* 1. Primitives ============================================================ */
.frame {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
}
.mono {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.01em;
	line-height: 1.45;
}
.label { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }

/* 2. Header ================================================================ */
.site-header { padding-block: 18px; }
.site-header .grid { align-items: center; }
.brand {
	grid-column: 1 / span 4;
	position: relative;
	display: inline-flex; align-items: center; gap: 10px;
	width: max-content;
}
.brand .wp-block-site-logo { line-height: 0; }
.brand .wp-block-site-logo img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.brand__name { margin: 0; font-weight: 650; letter-spacing: -0.015em; font-size: 1.06rem; line-height: 1.2; }
.brand__name a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
/* One target for the whole brand, as in the design: stretch the text link. */
.brand__name a::after { content: ""; position: absolute; inset: -6px; }
.brand__name small { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.02em; margin-left: 2px; line-height: 1; }
.site-nav { grid-column: 5 / -1; justify-self: end; }
.site-nav.wp-block-navigation { gap: clamp(14px, 2.4vw, 36px); font-size: 0.95rem; }
.site-nav .wp-block-navigation__container { gap: clamp(14px, 2.4vw, 36px); }
.site-nav a.wp-block-navigation-item__content { text-decoration: none; }
.site-nav a.wp-block-navigation-item__content:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.site-nav .nav-n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); margin-right: 6px; vertical-align: 1px; }
@media (max-width: 640px) {
	.brand { grid-column: 1 / -1; }
	.brand__name small { display: none; }
	.site-nav { grid-column: 1 / -1; justify-self: start; margin-top: 12px !important; }
	.site-nav .nav-n { display: none; }
	.site-nav.wp-block-navigation,
	.site-nav .wp-block-navigation__container { gap: 20px; }
}

/* 3. Section heads ========================================================= */
.section { padding-block: clamp(64px, 9vw, 136px) 0; }
.section-head {
	border-top: 1px solid var(--rule-strong);
	padding-top: 14px;
	margin-bottom: clamp(28px, 4vw, 56px) !important;
	row-gap: 10px;
}
.section-head .num   { grid-column: 1 / span 2; }
.section-head h2     { grid-column: 3 / span 6; font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
.section-head .aside { grid-column: 10 / -1; color: var(--ink-2); }
@media (max-width: 760px) {
	.section-head .num, .section-head h2, .section-head .aside { grid-column: 1 / -1; }
}

/* 4. Hero and aurora window ===============================================
   Performance notes (unchanged from the approved design):
   - No filter: blur(). Softness comes from radial-gradients' own falloff.
   - Continuous motion animates `transform` only, on three oversized layers,
     which the compositor handles without repainting.
   - The scroll-linked hue shift animates a registered @property. That repaints
     the gradients, but only while scrolling, only inside this bounded panel,
     and only where scroll-driven animations exist (@supports gate).
   - Pointer parallax (assets/js/aurora.js) writes two numbers per frame,
     rAF-throttled, fine pointers only, never under reduced motion.
   - Drift pauses when the window is off screen (IntersectionObserver).
   ------------------------------------------------------------------------- */
.hero { padding-top: clamp(20px, 2.4vw, 32px); }
.hero-meta {
	border-top: 1px solid var(--rule-strong);
	padding-block: 12px 0;
	row-gap: 6px;
}
.hero-meta > :nth-child(1) { grid-column: 1 / span 3; }
.hero-meta > :nth-child(2) { grid-column: 4 / span 3; }
.hero-meta > :nth-child(3) { grid-column: 7 / span 3; }
.hero-meta > :nth-child(4) { grid-column: 10 / -1; text-align: right; }
@media (max-width: 760px) {
	.hero-meta > :nth-child(n) { grid-column: span 6; text-align: left; }
	.hero-meta > :nth-child(n+3) { display: none; }
	.hero-meta > :nth-child(1) { grid-column: span 8; }
	.hero-meta > :nth-child(2) { grid-column: span 4; text-align: right; }
}

.window {
	--mx: 0; --my: 0;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--radius-window);
	background:
		radial-gradient(120% 80% at 50% 120%, oklch(0.30 0.05 170) 0%, transparent 60%),
		var(--deep);
	color: var(--paper);
	min-height: clamp(560px, 78vh, 820px);
	display: grid;
	grid-template-rows: auto 1fr auto;
	contain: paint;
}
body .pr-reset > .window { margin-top: 14px; }
.window p, .window h1 { margin: 0; }
.aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.aurora__layer {
	position: absolute;
	inset: -25% -20%;
	will-change: transform;
	translate: calc(var(--mx) * var(--par, 0px)) calc(var(--my) * var(--par, 0px));
}
.aurora__layer--a {
	--par: 18px;
	background:
		radial-gradient(42% 34% at 62% 34%, oklch(0.78 0.17 calc(var(--au-1) + var(--aurora-hue)) / 0.85), transparent 70%),
		radial-gradient(30% 26% at 40% 26%, oklch(0.72 0.14 calc(var(--au-3) + var(--aurora-hue)) / 0.65), transparent 72%);
	-webkit-mask-image: repeating-linear-gradient(97deg, #000 0%, rgb(0 0 0 / 0.62) 2.5%, #000 5.5%, rgb(0 0 0 / 0.8) 7.5%, #000 9%);
	        mask-image: repeating-linear-gradient(97deg, #000 0%, rgb(0 0 0 / 0.62) 2.5%, #000 5.5%, rgb(0 0 0 / 0.8) 7.5%, #000 9%);
	animation: drift-a 26s ease-in-out infinite alternate;
}
.aurora__layer--b {
	--par: -26px;
	background:
		radial-gradient(55% 22% at 30% 46%, oklch(0.66 0.12 calc(var(--au-2) + var(--aurora-hue)) / 0.75), transparent 70%),
		radial-gradient(28% 30% at 82% 22%, oklch(0.60 0.12 calc(var(--au-2) + 20 + var(--aurora-hue)) / 0.6), transparent 70%);
	animation: drift-b 34s ease-in-out infinite alternate;
}
.aurora__layer--c {
	--par: 10px;
	background:
		radial-gradient(20% 10% at 84% 40%, oklch(0.78 0.11 calc(var(--au-4) + var(--aurora-hue) * 0.4) / 0.3), transparent 70%);
	animation: drift-c 22s ease-in-out infinite alternate;
}
.aurora::after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(to top, var(--deep) 0%, color-mix(in oklch, var(--deep) 82%, transparent) 30%, transparent 62%),
		linear-gradient(to right, color-mix(in oklch, var(--deep) 55%, transparent), transparent 55%);
}
@keyframes drift-a {
	0%   { transform: translate3d(-4%, 0, 0) rotate(-3deg) scale(1); }
	50%  { transform: translate3d(3%, -3%, 0) rotate(2deg) scale(1.06); }
	100% { transform: translate3d(6%, 2%, 0) rotate(-1deg) scale(1.02); }
}
@keyframes drift-b {
	0%   { transform: translate3d(5%, 2%, 0) rotate(4deg); }
	100% { transform: translate3d(-6%, -4%, 0) rotate(-3deg) scale(1.08); }
}
@keyframes drift-c {
	0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .7; }
	100% { transform: translate3d(-8%, -2%, 0) scale(1.15); opacity: 1; }
}
@supports (animation-timeline: scroll()) {
	.window {
		animation: sky linear both;
		animation-timeline: scroll(root block);
		animation-range: 0px 90vh;
	}
	.aurora { translate: 0 calc(var(--aurora-lift) * -1); }
}
@keyframes sky {
	from { --aurora-hue: 0;  --aurora-lift: 0%; }
	to   { --aurora-hue: 32; --aurora-lift: 8%; }
}

.window__grid {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	padding-inline: var(--gutter);
}
.window__grid .grid { height: 100%; }
.window__grid span { border-left: 1px solid color-mix(in oklch, var(--paper) 7%, transparent); }
.window__grid span:last-child { border-right: 1px solid color-mix(in oklch, var(--paper) 7%, transparent); }
.reg { position: absolute; width: 22px; height: 22px; color: color-mix(in oklch, var(--paper) 55%, transparent); }
.reg--tl { top: 16px; left: 16px; } .reg--tr { top: 16px; right: 16px; }
.reg--bl { bottom: 16px; left: 16px; } .reg--br { bottom: 16px; right: 16px; }

.window__top, .window__body, .window__foot { padding-inline: var(--gutter); position: relative; }
.window__top { padding-top: clamp(22px, 3vw, 40px); }
.window__top .mono { grid-column: 1 / -1; color: color-mix(in oklch, var(--paper) 78%, transparent); padding-left: 26px; }
.window__body { align-self: end; padding-bottom: clamp(24px, 3vw, 44px); }
.hero-title {
	grid-column: 1 / span 10;
	font-size: var(--step-hero);
	line-height: 0.98;
	letter-spacing: -0.035em;
	font-weight: 600;
	color: var(--paper);
}
.hero-title em { font-style: normal; color: color-mix(in oklch, var(--paper) 72%, var(--deep)); font-weight: 500; }
.window__foot {
	border-top: 1px solid color-mix(in oklch, var(--paper) 18%, transparent);
	padding-block: 18px clamp(22px, 2.6vw, 34px);
	margin-inline: var(--gutter);
	padding-inline: 0;
	row-gap: 16px;
}
.window__foot p { grid-column: 1 / span 6; font-size: var(--step-1); line-height: 1.4; color: var(--paper); max-width: 40ch; }
.window__foot .caption { grid-column: 9 / -1; align-self: end; text-align: right; color: color-mix(in oklch, var(--paper) 72%, transparent); }
.window__foot .caption a { color: var(--paper); }
@media (max-width: 760px) {
	.hero-title { grid-column: 1 / -1; }
	.window__foot p, .window__foot .caption { grid-column: 1 / -1; text-align: left; }
	.window { min-height: 600px; }
	.window__foot { padding-bottom: 52px; }
	.window__top .mono { padding-right: 26px; }
}

/* 5. Index of work ========================================================= */
.index { border-bottom: 1px solid var(--rule); }
/* The aurora "lands" here: a strip of the same sky. Reused under every inner
   page title for continuity. */
.index-rule {
	height: 3px; border-radius: 3px;
	background: linear-gradient(90deg,
		oklch(0.55 0.11 calc(var(--au-2) + var(--aurora-hue))),
		oklch(0.68 0.16 calc(var(--au-1) + var(--aurora-hue))) 45%,
		oklch(0.72 0.14 calc(var(--au-3) + var(--aurora-hue))) 75%,
		var(--accent));
}
.index-cols {
	padding-block: 10px;
	border-bottom: 1px solid var(--rule);
	color: var(--ink-3);
}
.cell-no     { grid-column: 1 / span 1; }
.cell-name   { grid-column: 2 / span 4; }
.cell-desc   { grid-column: 6 / span 4; }
.cell-status { grid-column: 10 / span 2; }
.cell-toggle { grid-column: 12 / span 1; justify-self: end; }

.entry { border-bottom: 1px solid var(--rule); }
.entry summary {
	list-style: none;
	cursor: pointer;
	padding-block: clamp(18px, 2vw, 28px);
	align-items: baseline;
	row-gap: 6px;
}
.entry summary::-webkit-details-marker { display: none; }
.entry summary:hover h3.cell-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; text-decoration-color: var(--accent); }
.entry .cell-no { color: var(--ink-3); }
.entry h3 { margin: 0; font-size: var(--step-3); line-height: 1; letter-spacing: -0.03em; font-weight: 600; }
.entry h3 small { display: block; font-size: var(--step-0); font-weight: 450; letter-spacing: 0; color: var(--ink-2); margin-top: 10px; }
.entry .cell-desc { color: var(--ink-2); max-width: 44ch; }
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status--live::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); }
.status--dev::before { background: var(--forest); }
.toggle {
	width: 30px; height: 30px; border: 1px solid var(--rule-strong); border-radius: 50%;
	display: grid; place-items: center; transition: transform .3s ease, background-color .2s;
}
.toggle::before, .toggle::after { content: ""; grid-area: 1 / 1; width: 11px; height: 1.5px; background: currentColor; }
.toggle::after { transform: rotate(90deg); transition: transform .3s ease; }
details[open] .toggle::after { transform: rotate(0deg); }
.entry summary:hover .toggle { background: var(--paper-2); }

@supports (interpolate-size: allow-keywords) {
	.entry { interpolate-size: allow-keywords; }
	.entry::details-content {
		block-size: 0; overflow: clip;
		transition: block-size .45s cubic-bezier(.2,.7,.2,1), content-visibility .45s allow-discrete;
	}
	.entry[open]::details-content { block-size: auto; }
}

.entry__body {
	padding-bottom: clamp(32px, 4vw, 64px);
	row-gap: 28px;
	align-items: start;
}
.entry__body p, .entry__body dl, .entry__body figure { margin: 0; }
.entry__lede { font-size: var(--step-1); line-height: 1.38; letter-spacing: -0.01em; }
.entry__text { grid-column: 2 / span 5; }
.entry__media { grid-column: 8 / -1; margin: 0; }
.pull {
	font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.02em; font-weight: 550;
	margin-top: 32px !important; color: var(--forest);
}
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; border-top: 1px solid var(--rule); }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.facts dt { padding-right: 24px; color: var(--ink-3); }
.facts dd { font-size: 0.95rem; }
.entry__text .facts { margin-top: 28px !important; }
.entry__links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.text-link { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 24px; font-weight: 550; }
.text-link .mono { color: var(--ink-3); }

.entry--featured h3 { font-size: var(--step-title); }
.entry--featured summary { padding-block: clamp(26px, 3vw, 44px); }

/* Device frames. Placeholder = obviously a placeholder, not a fake UI.
   Real screenshots sit inside the same frame (.device--shot). */
.device-row { display: flex; gap: var(--col-gap); justify-content: flex-end; }
.device {
	flex: 0 1 260px;
	aspect-ratio: 9 / 19.5;
	border-radius: 34px;
	border: 1.5px solid var(--rule-strong);
	padding: 8px;
	background: var(--paper);
	position: relative;
}
.device--secondary { flex-basis: 220px; margin-top: 56px; }
.device__screen {
	height: 100%;
	border-radius: 26px;
	background:
		repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in oklch, var(--ink) 5%, transparent) 10px 11px),
		var(--paper-2);
	display: grid; place-items: center; text-align: center;
	padding: 16px;
	color: var(--ink-2); /* ink-3 is 4.4:1 on paper-2; ink-2 keeps AA */
}
.device__screen .mono { max-width: 18ch; }
.device::before {
	content: ""; position: absolute; top: 18px; left: 50%; translate: -50% 0;
	width: 26%; height: 14px; border-radius: 10px; border: 1px solid var(--rule);
	background: var(--paper);
}
.device--shot::before { display: none; }
/* The frame follows the screenshot's own proportions, so cover never crops UI. */
.device--shot { aspect-ratio: auto; }
.device--shot .device__screen { height: auto; aspect-ratio: 640 / 1391; padding: 0; overflow: hidden; background: var(--paper-2); }
.device--shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.entry:not(.entry--featured) .device { flex-basis: 200px; }
.media-caption { margin-top: 12px !important; text-align: right; color: var(--ink-3); }

@media (max-width: 860px) {
	.cell-no     { grid-column: 1 / span 2; }
	.cell-name   { grid-column: 3 / span 10; }
	.cell-desc   { grid-column: 3 / span 10; }
	.cell-status { grid-column: 3 / span 8; }
	.cell-toggle { grid-column: 11 / span 2; grid-row: 1; }
	.index-cols  { display: none; }
	.entry__text { grid-column: 3 / -1; }
	.entry__media { grid-column: 1 / -1; }
	.device-row { justify-content: center; }
	.media-caption { text-align: center; }
}
@media (max-width: 480px) {
	.device { border-radius: 26px; padding: 6px; }
	.device__screen { border-radius: 20px; }
	.device--secondary { display: none; }
	.device { flex-basis: 220px; }
	.entry:not(.entry--featured) .device { flex-basis: 220px; }
}

/* 6. Workshop sub-index ==================================================== */
.workshop {
	padding-block: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 28px);
	row-gap: 18px;
}
.workshop h3, .workshop p, .workshop ul { margin: 0; }
.workshop__head { grid-column: 2 / span 4; }
.workshop__head h3 { font-size: var(--step-1); letter-spacing: -0.01em; font-weight: 600; }
.workshop__head p { color: var(--ink-2); margin-top: 6px; font-size: 0.95rem; max-width: 32ch; }
.workshop__list { grid-column: 6 / -1; list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.workshop__list li {
	display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; column-gap: 16px;
	padding-block: 12px; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.workshop__list li:last-child { border-bottom: 0; }
.workshop__list .n { color: var(--ink-3); }
.workshop__list .name { font-weight: 550; }
.workshop__list a.name { text-decoration: none; }
.workshop__list a.name:hover .name__t { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.15em; }
.workshop__list .note { display: block; font-weight: 400; color: var(--ink-2); font-size: 0.92rem; margin-top: 2px; }
.workshop__list .tag { color: var(--ink-3); }
@media (max-width: 860px) {
	.workshop__head, .workshop__list { grid-column: 3 / -1; }
}
@media (max-width: 480px) {
	.workshop__head, .workshop__list { grid-column: 1 / -1; }
	.workshop__list li { grid-template-columns: 2.4em minmax(0, 1fr); }
	.workshop__list .tag { grid-column: 2; }
}

/* 7. Principles ============================================================ */
.principles { row-gap: 40px; }
.principle { grid-column: span 4; border-top: 1px solid var(--rule); padding-top: 16px; }
.principle .mono { color: var(--ink-3); }
body .principle > h3 { font-size: var(--step-2); line-height: 1.08; margin-top: 28px; letter-spacing: -0.02em; }
body .principle > p:not(.mono) { color: var(--ink-2); margin-top: 14px; max-width: 34ch; }
@media (max-width: 860px) { .principle { grid-column: 1 / -1; } body .principle > h3 { margin-top: 12px; } }

/* 8. Journal rows ========================================================== */
.journal { border-top: 1px solid var(--rule); }
.journal .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.journal .wp-block-post-template > li { margin: 0; }
.journal-row {
	position: relative;
	border-bottom: 1px solid var(--rule);
	padding-block: 22px;
	align-items: baseline;
	row-gap: 6px;
}
.journal-row .date { grid-column: 1 / span 2; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--step--1); }
.journal-row .wp-block-post-title { grid-column: 3 / span 6; font-size: var(--step-1); font-weight: 550; letter-spacing: -0.01em; line-height: 1.25; }
.journal-row .wp-block-post-title a { text-decoration: none; }
.journal-row .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } /* whole row is the link */
.journal-row .topic { grid-column: 10 / span 2; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; }
.journal-row .topic a { text-decoration: none; position: relative; z-index: 1; }
.journal-row::after { content: "\2192"; grid-column: 12; grid-row: 1; justify-self: end; transition: translate .2s; }
.journal-row:hover .wp-block-post-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; text-decoration-color: var(--accent); }
.journal-row:hover::after { translate: 4px 0; }
.journal-row .wp-block-post-excerpt { grid-column: 3 / span 6; color: var(--ink-2); font-size: 0.95rem; }
.journal-row .wp-block-post-excerpt p { margin: 0; }
.journal-more { margin-top: 20px !important; }
.journal-row.is-empty::after { content: none; }
.journal-row .journal-empty { grid-column: 3 / span 8; color: var(--ink-2); }
.pr-search { max-width: 520px; margin-bottom: clamp(28px, 4vw, 48px) !important; }
.pr-postfoot { border-top: 1px solid var(--rule); margin-top: clamp(48px, 6vw, 88px) !important; padding-top: 14px; row-gap: 10px; }
.pr-postfoot__terms { grid-column: 3 / span 6; }
.pr-postfoot__terms a { color: var(--ink-2); }
.pr-postfoot__back { grid-column: 10 / -1; justify-self: end; }
@media (max-width: 760px) { .pr-postfoot__terms, .pr-postfoot__back { grid-column: 1 / -1; justify-self: start; } }
.journal .wp-block-query-pagination { margin-top: 28px; font-family: var(--font-mono); font-size: var(--step--1); }
@media (max-width: 760px) {
	.journal-row .date { grid-column: 1 / -1; }
	.journal-row .wp-block-post-title { grid-column: 1 / span 11; }
	.journal-row .topic { grid-column: 1 / span 10; }
	.journal-row .wp-block-post-excerpt { grid-column: 1 / -1; }
	.journal-row::after { grid-row: 2; }
	.journal-row .journal-empty { grid-column: 1 / -1; }
}

/* 9. Inner page header ===================================================== */
.pagehead { padding-top: clamp(20px, 2.4vw, 32px); }
.pagehead__grid {
	border-top: 1px solid var(--rule-strong);
	padding-block: 14px clamp(28px, 4vw, 56px);
	row-gap: 14px;
	align-items: baseline;
}
.pagehead__label { grid-column: 1 / span 2; }
.pagehead__title,
.pagehead__grid h1 {
	grid-column: 3 / -1;
	font-size: var(--step-title);
	line-height: 0.98;
	letter-spacing: -0.035em;
	font-weight: 600;
	max-width: 18ch;
}
.pagehead__lede { grid-column: 3 / span 7; color: var(--ink-2); font-size: var(--step-1); line-height: 1.38; }
@media (max-width: 760px) {
	.pagehead__label, .pagehead__title, .pagehead__grid h1, .pagehead__lede { grid-column: 1 / -1; }
}
/* Products: the index sits straight under the title and brings its own strip. */
.pagehead + .products-index { margin-top: 0; }
.products-index .index { border-bottom: 0; }

/* 10. Prose, and the pl-* vocabulary from scripts 08 and 09 ================
   Post content sits on the same 12-column grid: text starts at column 3,
   exactly under the page title, and section heads span the full row with
   a two-digit number in columns 1-2, like the index rows. */
.pr-content { padding-top: clamp(32px, 4vw, 56px); }
.pr-prose {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
	counter-reset: pl-sec;
	align-items: start;
}
.pr-prose > * { grid-column: 3 / span 7; min-width: 0; }
.pr-prose > :first-child { margin-top: 0 !important; }
.pr-prose > p, .pr-prose > ul, .pr-prose > ol { max-width: 66ch; }
.pr-prose > .alignwide,
.pr-prose > .wp-block-columns,
.pr-prose > .wp-block-table,
.pr-prose > .wp-block-gallery { grid-column: 3 / -1; }
.pr-prose > .alignfull,
.pr-prose > .pl-shead,
.pr-prose > .workshop,
.pr-prose > .pl-wash { grid-column: 1 / -1; }
@media (max-width: 860px) {
	.pr-prose > * { grid-column: 1 / -1 !important; }
}
.pr-prose a:hover { text-decoration-color: var(--accent); }
.pr-prose strong { font-weight: 600; }

/* Plain headings (legal pages, posts): a hairline above, no shouting. */
.pr-prose > h2 {
	font-size: var(--step-1);
	letter-spacing: -0.01em;
	line-height: 1.25;
	border-top: 1px solid var(--rule);
	padding-top: 14px;
	margin-top: clamp(36px, 4vw, 56px);
}
.pr-prose > h2:first-child { border-top: 0; padding-top: 0; }
.pr-prose > h3 { font-size: 1.08rem; letter-spacing: -0.005em; line-height: 1.3; margin-top: 2em; }
.pr-prose > h2 + *, .pr-prose > h3 + * { margin-top: 10px; }
.pr-prose ul.wp-block-list, .pr-prose ol.wp-block-list { padding-left: 1.2em; }
.pr-prose li { margin-block: 4px; }
.pr-prose li::marker { color: var(--ink-3); }
.pr-prose .wp-block-separator { border: 0; border-top: 1px solid var(--rule); width: 100%; }
.pr-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 4px; }
.pr-prose pre { font-family: var(--font-mono); font-size: var(--step--1); background: var(--paper-2); padding: 16px 18px; border-radius: 8px; overflow-x: auto; }
.pr-prose .wp-block-image img { border-radius: 8px; }
.pr-prose figcaption { margin-top: 8px; }
.pr-prose .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.pr-prose .wp-block-table th,
.pr-prose .wp-block-table td { border: 0; border-bottom: 1px solid var(--rule); padding: 10px 12px 10px 0; text-align: left; }
.pr-prose .wp-block-table thead { border-bottom: 1px solid var(--rule-strong); }
.pr-prose .wp-block-table th { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }

/* Quote: the design's pull-quote voice, in forest, with a hairline. */
.pr-prose .wp-block-quote {
	margin-inline: 0;
	margin-bottom: 0;
	padding: 2px 0 2px 22px;
	border-left: 1px solid var(--rule-strong);
	color: var(--forest);
	font-size: var(--step-1);
	line-height: 1.38;
	letter-spacing: -0.01em;
}
.pr-prose .wp-block-quote p { margin: 0; }
.pr-prose .wp-block-quote cite { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-3); font-style: normal; }

/* Buttons: ink pills; outline = hairline. */
.wp-block-buttons { gap: 10px; }
.wp-block-button__link { text-decoration: none; }
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--rule-strong);
	padding: 0.7em 1.25em;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }

/* pl-shead: the C section head. A full-width rule, a mono number in
   columns 1-2 (CSS counter, so content needs no change), title from column 3. */
.pr-prose > .pl-shead {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
	align-items: baseline !important;
	border-top: 1px solid var(--rule-strong);
	padding-top: 14px;
	margin-top: clamp(56px, 7vw, 104px) !important;
	margin-bottom: clamp(4px, 1vw, 12px);
	counter-increment: pl-sec;
}
.pr-prose > .pl-shead::before {
	content: counter(pl-sec, decimal-leading-zero);
	grid-column: 1 / span 2;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	color: var(--ink-3);
	line-height: 1.45;
}
.pr-prose > .pl-shead > * { grid-column: 3 / span 8; margin: 0 !important; }
.pr-prose > .pl-shead h2,
.pr-prose > .pl-shead .has-medium-font-size {
	font-size: var(--step-2) !important;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 600;
}
/* .is-alt marks the "What it will not do" head: same rule, the number in amber ink. */
.pr-prose > .pl-shead.is-alt::before { color: var(--accent-ink); }
.pr-prose > .pl-shead + * { margin-top: 24px !important; }
@media (max-width: 760px) {
	.pr-prose > .pl-shead { row-gap: 10px; }
	.pr-prose > .pl-shead::before, .pr-prose > .pl-shead > * { grid-column: 1 / -1; }
}

/* pl-tag: the mono status dot from the index. */
.pl-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 18px;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.01em;
	line-height: 1.45;
	color: var(--ink);
	white-space: nowrap;
}
.pl-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.pl-tag.is-live::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); }
.pl-tag.is-wip::before  { background: var(--forest); }
.pl-tag.is-sale::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
/* Any other variant (is-shelf, future ones) keeps the neutral grey dot. */

/* Lede (has-large-font-size) under the tags */
.pr-prose > p.has-large-font-size { line-height: 1.38; letter-spacing: -0.01em; max-width: 36ch; }

/* pl-step / pl-n / pl-shot: how-it-works columns */
.pr-prose .wp-block-columns { gap: var(--col-gap) clamp(16px, 2.4vw, 36px); margin-top: 24px; }
.pl-step > * { margin-block: 0; }
.pl-step .pl-n {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
	border-top: 1px solid var(--rule);
	padding-top: 12px;
	margin-top: 22px !important;
}
.pl-step h3,
.pl-step .has-small-font-size {
	font-size: var(--step-1) !important;
	letter-spacing: -0.01em;
	line-height: 1.2;
	font-weight: 600;
	margin-top: 14px !important;
}
.pl-step p:not(.pl-n),
.pl-step .has-x-small-font-size { font-size: 0.95rem !important; margin-top: 8px !important; max-width: 34ch; }

.pl-shot { margin: 0; max-width: 248px; }
.pl-shot img,
.pl-shot .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	padding: 7px;
	border: 1.5px solid var(--rule-strong);
	border-radius: 32px;
	background: var(--paper);
	clip-path: none;
}
/* Beat the generic prose image radius: the frame is a device, not a photo. */
.pr-prose .pl-shot img, .pl-shot img { border-radius: 32px; }
.pl-shot.wp-block-image img { box-sizing: border-box; }
/* Empty state: the hatched device placeholder from the design. The old theme's
   mascot is hidden; the caption becomes the placeholder label. */
.pl-shot.is-empty {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 9 / 19.5;
	max-width: 200px;
	padding: 8px;
	border: 1.5px solid var(--rule-strong);
	border-radius: 32px;
	background:
		linear-gradient(var(--paper), var(--paper)) padding-box;
}
.pl-shot.is-empty::after {
	content: "";
	position: absolute; inset: 8px;
	border-radius: 24px;
	background:
		repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in oklch, var(--ink) 5%, transparent) 10px 11px),
		var(--paper-2);
	z-index: 0;
}
.pl-shot.is-empty::before {
	content: ""; position: absolute; top: 18px; left: 50%; translate: -50% 0; z-index: 1;
	width: 26%; height: 14px; border-radius: 10px; border: 1px solid var(--rule);
	background: var(--paper);
}
.pl-shot.is-empty img { display: none !important; }
.pl-shot.is-empty figcaption,
.pl-shot.is-empty p {
	position: relative; z-index: 1;
	margin: 0;
	padding: 16px;
	max-width: 16ch;
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--ink-2);
}
@media (max-width: 781px) {
	/* Core stacks columns here; keep frames a sensible size and centred-left. */
	.pl-shot { max-width: 220px; }
}

/* pl-demo: a short product clip, framed like the device shots but tablet-shaped */
.pl-demo { margin: 24px 0 0; max-width: 420px; }
.pl-demo video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2006 / 2852;
	box-sizing: border-box;
	padding: 7px;
	border: 1.5px solid var(--rule-strong);
	border-radius: 24px;
	background: var(--paper);
}
.pl-demo figcaption {
	margin-top: 12px;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--ink-3);
	max-width: 36ch;
}
.pl-demo figcaption a { color: var(--ink-2); }
@media (max-width: 781px) {
	.pl-demo { max-width: 340px; }
}

/* pl-gallery: a row of phone shots under the demo, same device frame as pl-shot */
.pl-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 36px);
	margin-top: clamp(32px, 4vw, 48px);
}
.pl-gallery figure { margin: 0; }
.pl-gallery img {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 7px;
	border: 1.5px solid var(--rule-strong);
	border-radius: 32px;
	background: var(--paper);
}
.pr-prose .pl-gallery img { border-radius: 32px; }
.pl-gallery figcaption {
	margin-top: 12px;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	line-height: 1.45;
	color: var(--ink-3);
}
@media (max-width: 781px) {
	.pl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* pl-nots: a ruled list, mono marks in the number column */
.pl-nots {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
	counter-reset: pl-not;
}
.pl-nots li {
	display: grid;
	grid-template-columns: 3.2em minmax(0, 1fr);
	column-gap: 16px;
	align-items: baseline;
	padding-block: 12px;
	margin: 0;
	border-bottom: 1px solid var(--rule);
	color: var(--ink);
	counter-increment: pl-not;
}
.pl-nots li::before {
	content: "\00D7\00A0" counter(pl-not);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--accent-ink);
}

/* pl-panel + pl-spec: the facts table */
.pl-panel { margin: 0; padding: 0; background: none; border: 0; }
.pl-spec dl {
	margin: 0;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	border-top: 1px solid var(--rule);
}
.pl-spec dt, .pl-spec dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.pl-spec dt {
	padding-right: 24px;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-3);
	line-height: 1.7;
}
.pl-spec dd { font-size: 0.95rem; }
@media (max-width: 480px) {
	.pl-spec dl { grid-template-columns: minmax(0, 1fr); }
	.pl-spec dt { padding-bottom: 0; border-bottom: 0; }
	.pl-spec dd { padding-top: 2px; }
}
.pl-veil {
	margin: 16px 0 0;
	color: var(--ink-2);
	font-size: 0.95rem;
	max-width: 62ch;
}

/* pl-line: mono link row */
.pl-line {
	font-family: var(--font-mono);
	font-size: var(--step--1) !important;
	letter-spacing: 0.01em;
	color: var(--ink-3);
	border-top: 1px solid var(--rule);
	padding-top: 14px;
	margin-top: clamp(40px, 5vw, 64px) !important;
}
.pl-line a { color: var(--ink); }

/* Legacy classes from the old homepage content (not rendered by front-page.html,
   styled so nothing looks broken if that content is ever shown). */
.pl-edge { height: 3px; border-radius: 3px; background: linear-gradient(90deg, oklch(0.55 0.11 185), oklch(0.68 0.16 158) 45%, oklch(0.72 0.14 142) 75%, var(--accent)); }
.pl-prod { border-top: 1px solid var(--rule); padding-top: 16px; }
.pl-prod p { color: var(--ink-2); }
.pl-hero-mascot img { max-width: 96px; height: auto; }
.pl-wash { border-top: 1px solid var(--rule); padding-top: 16px; }

/* Contact aside (picksley-labs/rail) */
.pr-rail { border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.pr-rail > * { margin: 0; }
.pr-rail h2 { font-size: var(--step-1); margin-top: 10px; }
.pr-rail p:not(.mono) { color: var(--ink-2); margin-top: 8px; max-width: 34ch; }

/* Search form, 404 */
.wp-block-search__inside-wrapper { border: 1px solid var(--rule-strong); border-radius: 999px; padding: 4px; background: var(--paper); }
.wp-block-search__input { border: 0; background: transparent; padding: 8px 14px; font: inherit; color: var(--ink); }
.wp-block-search__button { border-radius: 999px; margin-left: 4px; }
.wp-block-search__label { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }

/* 11. Colophon footer ====================================================== */
.colophon {
	margin-top: clamp(80px, 11vw, 168px) !important;
	background: var(--ink);
	color: var(--paper);
	padding-block: clamp(48px, 6vw, 88px) 28px;
}
.colophon p, .colophon dl, .colophon ul { margin: 0; }
.colophon a { color: var(--paper); }
.colophon .label { color: color-mix(in oklch, var(--paper) 62%, var(--ink)); }
.colophon__mark {
	grid-column: 1 / -1;
	font-size: clamp(3rem, 1rem + 9vw, 10.5rem);
	font-weight: 650; letter-spacing: -0.05em; line-height: 0.85;
	padding-bottom: clamp(32px, 4vw, 56px);
	border-bottom: 1px solid color-mix(in oklch, var(--paper) 22%, transparent);
	margin-bottom: 28px !important;
}
.colophon__mark span { color: var(--accent); }
.register {
	grid-column: 1 / span 8;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	column-gap: var(--col-gap);
}
.register > div { grid-column: span 4; padding-block: 12px; border-bottom: 1px solid color-mix(in oklch, var(--paper) 14%, transparent); }
.register dt { margin-bottom: 4px; }
.register dd { margin: 0; font-size: 1rem; line-height: 1.4; }
.register .mono-val { font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.02em; }
.colophon__aside { grid-column: 10 / -1; }
.colophon__aside p { color: color-mix(in oklch, var(--paper) 78%, var(--ink)); font-size: 0.95rem; max-width: 30ch; }
.colophon__aside ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 6px; }
.colophon__base {
	grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 72px) !important;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
	color: color-mix(in oklch, var(--paper) 62%, var(--ink));
}
.colophon__base > * { margin: 0 !important; }
@media (max-width: 860px) {
	.register, .colophon__aside { grid-column: 1 / -1; }
	.colophon__aside { margin-top: 32px; }
}
@media (max-width: 560px) {
	.register > div { grid-column: 1 / -1; }
}

/* 12. Focus and reduced motion ============================================
   The design's amber ring is 2.5:1 on paper, below the 3:1 non-text minimum,
   so on paper the ring uses accent-ink (5.7:1). On the dark grounds (aurora
   window, colophon) the brighter amber passes and is kept. */
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; }
.window :focus-visible,
.colophon :focus-visible { outline-color: var(--accent); }
.skip-link.screen-reader-text:focus { background: var(--paper); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.aurora__layer { animation: none !important; translate: none !important; }
	.aurora__layer--a { transform: translate3d(2%, -2%, 0) rotate(1deg) scale(1.04); }
	.aurora__layer--b { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
	.window { animation: none !important; }
	.aurora { translate: none !important; }
	.entry::details-content { transition: none !important; }
	.toggle, .toggle::after, .journal-row::after { transition: none !important; }
}
.window.is-idle .aurora__layer { animation-play-state: paused; }