/* Hallmark · pages · theme: Cobalt (inherited)
 * Sub-pages: /oneark and /apps. Every colour, font and step here is a token
 * from tokens.css — this file adds layout, never a new theme. main.css is
 * untouched so the homepage cannot be affected by anything below.
 *
 * Mobile first: /apps is a phone bio-link target, so its rows are sized as
 * tap targets before they are sized as type.
 */

/* ─── Shared sub-page furniture ───────────────────────────────────────────── */

/* The homepage hero is a two-column split. A sub-page has one thing to say, so
   it says it in one column and lets the measure do the restraining. */
.phero {
	padding-block: var(--space-xl) var(--space-lg);
}
.phero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-display);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-display);
	color: var(--color-ink);
	margin: 0 0 var(--space-md);
	/* Long words break inside rather than pushing the page sideways at 320px. */
	overflow-wrap: anywhere;
	min-width: 0;
}
.phero__lede {
	max-width: var(--measure);
	font-size: var(--text-lg);
	line-height: var(--leading-body);
	color: var(--color-ink-2);
	margin: 0;
}
.phero__lede + .phero__lede { margin-top: var(--space-sm); }

.psection {
	padding-block: var(--space-lg);
	border-top: var(--rule-hair) solid var(--color-rule);
}
.psection__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-2xl);
	letter-spacing: var(--tracking-display);
	color: var(--color-ink);
	margin: 0 0 var(--space-md);
}

/* ─── Store buttons ───────────────────────────────────────────────────────── */

/* .btn is the site's small, quiet control. A store link is the one thing this
   page is for, so it gets a size a thumb can hit — 48px of height, which is the
   floor for a touch target, not a style choice. */
.stores {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
}
.btn--store {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding-inline: var(--space-md);
	font-size: var(--text-base);
	font-weight: 500;
	white-space: nowrap;
}
/* One signal per page: the primary store button carries the accent as fill, the
   second stays a hairline, so the pair reads as primary + secondary. */
.btn--store.btn--fill {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-paper);
}
.btn--store.btn--fill:hover,
.btn--store.btn--fill:focus-visible {
	background: var(--color-accent-ink);
	border-color: var(--color-accent-ink);
	color: var(--color-paper);
}

/* ─── What it does — a short ruled index, not a feature grid ──────────────── */

.points {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--measure);
}
.points li {
	padding-block: var(--space-sm);
	border-top: var(--rule-hair) solid var(--color-rule);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	color: var(--color-ink-2);
}
.points li:first-child { border-top: 0; padding-top: 0; }
.points b {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-ink);
	letter-spacing: var(--tracking-display);
}

/* ─── Screenshots ─────────────────────────────────────────────────────────── */

/* A scroll strip on a phone, a row on a desk. Scrolling sideways is the point
   here and is contained to this element, so the page body never does it. */
.shots {
	display: grid;
	grid-auto-flow: column;
	/* A FIXED track, not minmax(0,…): with a 0 minimum the four shots shrink to
	   fit the viewport and become unreadable thumbnails instead of overflowing
	   into the scroll this element exists to provide. */
	grid-auto-columns: 210px;
	gap: var(--space-sm);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: var(--space-sm);
	margin: 0;
	-webkit-overflow-scrolling: touch;
}
.shots figure {
	margin: 0;
	scroll-snap-align: start;
	border: var(--rule-hair) solid var(--color-rule);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-paper-2);
}
.shots img {
	display: block;
	width: 100%;
	height: auto;
}
.shots figcaption {
	padding: var(--space-2xs) var(--space-xs) var(--space-xs);
	border-top: var(--rule-hair) solid var(--color-rule);
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
	color: var(--color-muted);
}

/* The availability line and the closing tagline: quiet, and never competing
   with the store buttons directly above them. */
.note {
	margin: var(--space-sm) 0 0;
	font-size: var(--text-sm);
	color: var(--color-muted);
}
.tagline {
	margin: 0;
	max-width: var(--measure);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-style: normal;
	letter-spacing: var(--tracking-display);
	line-height: var(--leading-snug);
	color: var(--color-ink-2);
}

/* ─── /apps — the link hub ────────────────────────────────────────────────── */

.hub {
	list-style: none;
	margin: var(--space-lg) 0 0;
	padding: 0;
	border-top: var(--rule-hair) solid var(--color-rule);
}
.hub__row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	/* The whole row is the target, not the app name inside it. */
	min-height: 76px;
	padding: var(--space-sm) var(--space-2xs);
	border-bottom: var(--rule-hair) solid var(--color-rule);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--dur-base) var(--ease-out),
		padding-inline var(--dur-base) var(--ease-out);
}
.hub__row:hover,
.hub__row:focus-visible {
	background: var(--color-accent-wash);
	padding-inline: var(--space-sm) var(--space-2xs);
}
.hub__row:active { background: var(--color-paper-3); }
.hub__text { min-width: 0; }
.hub__name {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-xl);
	letter-spacing: var(--tracking-display);
	color: var(--color-ink);
	overflow-wrap: anywhere;
}
.hub__note {
	display: block;
	margin-top: var(--space-4xs);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-muted);
}
/* The arrow is the affordance; it moves on hover so the row feels like a door. */
.hub__go {
	margin-left: auto;
	flex: none;
	font-family: var(--font-mono);
	color: var(--color-accent-ink);
	transition: transform var(--dur-base) var(--ease-out);
}
.hub__row:hover .hub__go,
.hub__row:focus-visible .hub__go { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.hub__row,
	.hub__go { transition: none; }
}

/* ─── /field-notes: dated entries and the reading page ────────────────────── */

/* The index reuses the hub rows; the date sits above the title in mono, the
   way a log line does. */
.hub__date {
	display: block;
	margin-bottom: var(--space-4xs);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-mono);
	color: var(--color-muted);
}

/* One column of reading type at the site's measure. Nothing here is new: the
   sizes, colours and rhythm are the body tokens, given room. */
.prose {
	max-width: var(--measure);
	padding-block: var(--space-md) var(--space-xl);
	font-size: var(--text-lg);
	line-height: var(--leading-body);
	color: var(--color-ink-2);
}
.prose p { margin: 0 0 var(--space-sm); overflow-wrap: break-word; }
.prose p:last-child { margin-bottom: 0; }
.prose .link { overflow-wrap: anywhere; }

.entry__meta {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-mono);
	color: var(--color-muted);
}

@media (max-width: 520px) {
	.phero { padding-block: var(--space-lg) var(--space-md); }
	.psection { padding-block: var(--space-md); }
	/* Full-width store buttons: at 320px two side by side are too narrow to
	   read and too narrow to hit. */
	.stores { flex-direction: column; align-items: stretch; }
	.btn--store { justify-content: center; }
	.shots { grid-auto-columns: 168px; }
}