/* site/src/assets/css/page-journal.css
 * The journal, before it has a first issue.
 *
 * One idea carries the page: the headline is printed as four ink plates that
 * are out of register, the way a job looks when the press has been set up but
 * has not run. Colour is laid down with mix-blend-mode: multiply so the
 * overlaps make real secondary ink rather than faked transparency, and a
 * button pulls the plates into register — at which point the caption admits
 * there is still nothing to print. The joke is the honest version of the
 * page, which is why it is the page.
 */

/* ── the press ───────────────────────────────────────────────────────── */
.press {
	position: relative;
	background: var(--paper);
	/* Clears the fixed nav, which is not in the flow. */
	padding: clamp(104px, 16vh, 172px) var(--gutter) clamp(48px, 8vh, 96px);
	/* Plates translate outwards; without this they would widen the document
	   and give the whole site a horizontal scrollbar. */
	overflow: hidden;
	/* Keeps the multiply blending inside the section instead of letting it
	   reach the page background. */
	isolation: isolate;
}

/* Uncoated paper, made of two crossing rules rather than an image so the page
   stays one HTTP request lighter. */
.press__grain {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		repeating-linear-gradient(64deg, rgba(10, 10, 15, .035) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(-27deg, rgba(10, 10, 15, .028) 0 1px, transparent 1px 6px);
}

.press__inner {
	max-width: var(--wide);
	margin: 0 auto;
	display: grid;
	gap: clamp(20px, 3.5vh, 38px);
}

.press__kicker { color: #9a5a13; }

/* Every plate sits in the same grid cell, so they overprint each other. */
.press__stack {
	display: grid;
	/* The starting misregistration. JS overrides these inline while it is
	   driving; with JS off the plates simply stay parked here, which is still
	   the right picture. */
	--ox: 16px;
	--oy: -12px;
}

.press__ink {
	grid-area: 1 / 1;
	font: 800 clamp(46px, 13vw, 168px)/.84 var(--display);
	font-stretch: 94%;
	letter-spacing: -.05em;
	text-transform: uppercase;
	will-change: transform;
}

/* The three colour plates. Each is pulled a different way, as a real press
   slips a different amount on each roller. */
.press__ink--teal,
.press__ink--pink,
.press__ink--blue { mix-blend-mode: multiply; }

.press__ink--teal {
	color: var(--teal);
	transform: translate(calc(var(--ox) * -1), calc(var(--oy) * -1));
}
.press__ink--pink {
	color: var(--pink);
	transform: translate(var(--ox), var(--oy));
}
.press__ink--blue {
	color: var(--blue);
	transform: translate(calc(var(--ox) * .55), calc(var(--oy) * -1.45));
}

/* The key plate is the real heading: solid, unblended, on top, so the words
   are readable whatever the colour plates are doing behind them. */
.press__ink--key {
	color: var(--ink);
	position: relative;
	z-index: 2;
}

/* With motion reduced JS never animates, so the attribute alone is what puts
   the plates into register. */
.press__stack[data-registered] { --ox: 0px; --oy: 0px; }

.press__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px clamp(16px, 2.5vw, 32px);
}

.press__read {
	font: 500 clamp(12px, .95vw, 14px)/1.4 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6a6150;
}

.press__run {
	font: 500 13px/1 var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	border-radius: 999px;
	min-height: 48px;
	padding: 0 24px;
	cursor: pointer;
	transition: transform .2s, background .2s;
}
.press__run:hover { transform: rotate(-1.5deg) scale(1.03); background: #22222c; }
.press__run[aria-pressed="true"] { background: var(--blue); }

.press__stand {
	max-width: 56ch;
	font-size: clamp(17px, 1.35vw, 21px);
	line-height: 1.5;
	color: var(--ink-soft);
}

/* ── the list of subjects ────────────────────────────────────────────── */
.plan {
	background: var(--paper);
	border-top: 1px solid var(--line);
	padding: clamp(56px, 9vh, 110px) var(--gutter);
}

.plan__head {
	max-width: var(--wide);
	margin: 0 auto clamp(30px, 5vh, 56px);
	display: grid;
	gap: 12px;
}
.plan__head .label { color: var(--blue); }
.plan__head h2 {
	font: 800 clamp(32px, 5vw, 76px)/.95 var(--display);
	letter-spacing: -.04em;
}
.plan__lede { max-width: 58ch; color: var(--ink-soft); font-size: clamp(16px, 1.2vw, 19px); }

.plan__list {
	list-style: none;
	max-width: var(--wide);
	margin: 0 auto;
	display: grid;
	gap: clamp(14px, 2vw, 22px);
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.plan__item {
	position: relative;
	display: grid;
	gap: 8px;
	align-content: start;
	padding: clamp(20px, 2.4vw, 30px);
	background: #fff;
	border: 1px solid var(--line);
	border-left: 7px solid var(--edge, var(--ink));
	border-radius: 3px;
}
/* The rule down the side cycles the house inks, so the list reads as a set of
   colour separations rather than six identical boxes. */
.plan__item:nth-child(6n + 1) { --edge: var(--teal); }
.plan__item:nth-child(6n + 2) { --edge: var(--amber); }
.plan__item:nth-child(6n + 3) { --edge: var(--pink); }
.plan__item:nth-child(6n + 4) { --edge: var(--blue); }
.plan__item:nth-child(6n + 5) { --edge: var(--yellow); }
.plan__item:nth-child(6n + 6) { --edge: var(--ink); }

.plan__no {
	font: 700 clamp(30px, 3.4vw, 46px)/1 var(--mono);
	color: var(--edge);
	letter-spacing: -.02em;
}
.plan__item h3 {
	font: 700 clamp(19px, 1.7vw, 25px)/1.15 var(--display);
	letter-spacing: -.025em;
	max-width: 22ch;
}
.plan__item p { color: var(--ink-soft); }

.plan__tag {
	justify-self: start;
	margin-top: 4px;
	font: 500 10px/1 var(--mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #7a7264;
	border: 1px dashed rgba(10, 10, 15, .3);
	border-radius: 999px;
	padding: 7px 11px;
}

.plan__foot {
	max-width: var(--wide);
	margin: clamp(26px, 4vh, 44px) auto 0;
	color: var(--ink-soft);
}
.plan__foot a { color: var(--ink); text-underline-offset: 4px; }

/* ── the one email ───────────────────────────────────────────────────── */
.sub {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(60px, 10vh, 130px) var(--gutter);
}

.sub__inner {
	max-width: var(--wide);
	margin: 0 auto;
	display: grid;
	gap: 16px;
}
.sub__inner .label { color: var(--amber); }
.sub__inner h2 {
	font: 800 clamp(34px, 6vw, 92px)/.92 var(--display);
	letter-spacing: -.045em;
}
.sub__why {
	max-width: 52ch;
	color: rgba(251, 249, 244, .72);
	font-size: clamp(16px, 1.25vw, 20px);
}

.sub__form {
	margin-top: clamp(10px, 2vh, 20px);
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 12px 14px;
}

.sub__field { display: grid; gap: 8px; flex: 1 1 280px; }
.sub__field label {
	font: 500 11px/1 var(--mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(251, 249, 244, .6);
}
.sub__field input {
	/* 16px minimum keeps iOS from zooming the page on focus. */
	font: 400 17px/1.2 var(--display);
	color: var(--paper);
	background: transparent;
	border: 0;
	border-bottom: 2px solid rgba(251, 249, 244, .35);
	border-radius: 0;
	min-height: 52px;
	padding: 0 2px;
	width: 100%;
	transition: border-color .2s;
}
.sub__field input::placeholder { color: rgba(251, 249, 244, .34); }
.sub__field input:focus { outline: 0; border-bottom-color: var(--teal); }
.sub__field input:focus-visible { outline: 3px solid var(--teal); outline-offset: 6px; }
.sub__form[data-invalid] .sub__field input { border-bottom-color: var(--pink); }

.sub__go {
	flex: 0 0 auto;
	font: 500 13px/1 var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--teal);
	color: var(--ink);
	border: 0;
	border-radius: 999px;
	min-height: 52px;
	padding: 0 26px;
	cursor: pointer;
	transition: transform .2s, background .2s;
}
.sub__go:hover { transform: translateY(-2px); background: #5cf0dc; }
.sub__go[disabled] { opacity: .55; cursor: progress; transform: none; }

/* The honeypot: clipped rather than display:none, because some bots skip
   fields that are plainly hidden and fill the ones that are merely invisible. */
.sub__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sub__status {
	min-height: 1.4em;
	font: 500 clamp(13px, 1vw, 15px)/1.5 var(--mono);
	letter-spacing: .04em;
	max-width: 52ch;
}
.sub__status[data-state="ok"] { color: var(--teal); }
.sub__status[data-state="bad"] { color: var(--pink); }
.sub__status[data-state="busy"] { color: rgba(251, 249, 244, .7); }
.sub__status a { color: inherit; }

/* The escape route, revealed by journal.js only when the post actually
   failed. [hidden] is honoured here because the grid display below would
   otherwise beat it. */
.sub__fall {
	max-width: 52ch;
	font-size: 15px;
	color: var(--amber);
	border-left: 3px solid var(--amber);
	padding-left: 14px;
}
.sub__fall[hidden] { display: none; }
.sub__fall a { color: var(--paper); text-underline-offset: 4px; }

.sub__small {
	margin-top: 4px;
	max-width: 52ch;
	font-size: 14px;
	color: rgba(251, 249, 244, .52);
}
.sub__small a { color: rgba(251, 249, 244, .82); text-underline-offset: 4px; }

/* ── where the reading actually is ───────────────────────────────────── */
.onward {
	background: var(--paper);
	padding: clamp(56px, 9vh, 110px) var(--gutter);
}
.onward__inner { max-width: var(--wide); margin: 0 auto; display: grid; gap: 14px; }
.onward__inner h2 {
	font: 800 clamp(28px, 4vw, 56px)/1 var(--display);
	letter-spacing: -.035em;
}
.onward__lede { color: var(--ink-soft); max-width: 46ch; }

.onward__list {
	list-style: none;
	margin-top: clamp(12px, 2vh, 24px);
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
}
.onward__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 20px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.onward__list a {
	font: 700 clamp(20px, 2.2vw, 30px)/1.1 var(--display);
	letter-spacing: -.03em;
	text-decoration: none;
	flex: 0 0 auto;
	/* A full 44px hit area on a phone; the row padding absorbs it. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.onward__list a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 5px; }
.onward__list span { color: var(--ink-soft); font-size: 15px; }

.onward__cta {
	margin-top: clamp(20px, 3vh, 34px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	color: var(--ink-soft);
}
.onward__btn {
	font: 500 13px/1 var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	border-radius: 999px;
	min-height: 48px;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
}
.onward__btn:hover { background: var(--blue); }
.onward__cta a:not(.onward__btn) { color: var(--ink); text-underline-offset: 4px; }

/* ── narrow screens ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
	/* A big offset that reads as a press slip on a desktop reads as a mistake
	   on a phone, where the words are only a few hundred pixels wide. */
	.press__stack { --ox: 9px; --oy: -7px; }
	.press__bar { gap: 12px; }
	.press__run { width: 100%; }
}

/* ── motion ──────────────────────────────────────────────────────────── */
/* site.css already flattens transitions site wide when motion is reduced.
   This kills the last thing it cannot see: the drift loop is skipped in
   journal.js, and the plates are parked rather than eased. */
@media (prefers-reduced-motion: reduce) {
	.press__ink { will-change: auto; }
}