/**
 * @fileoverview Field-notes design system for lunalabs.studio.
 * Rubber-stamp print aesthetic: warm paper ground, brick spot ink,
 * typewriter marginalia (Courier Prime) with Instrument Serif display.
 * Classic edition: light mode only. The artwork's grounds are normalized to
 * the exact page color, so every print sits seamlessly on the paper.
 */

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
	--paper: #F2EDE2;
	--ink: #37322A;
	--ink-soft: rgba(55, 50, 42, 0.85);
	--ink-mute: rgba(55, 50, 42, 0.7);
	--dim: #6E6656;
	--accent: #A5503C;
	--status: #A5503C;
	--strike: #6E6656;
	--rule: rgba(55, 50, 42, 0.35);
	--rule-soft: rgba(55, 50, 42, 0.3);
	--stamp-detail: #2B2A26;
	--stamp-keyhole: #2B2A26;
	--stamp-wave: #5C6B54;
	--stamp-spark: #A34A34;
	--cta-ink: #A5503C;
	--underline: rgba(165, 80, 60, 0.75);
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Courier Prime', 'Courier New', monospace;
	font-size: 16px;
}

a {
	color: var(--ink);
	text-decoration-color: rgba(165, 80, 60, 0.7);
	text-underline-offset: 4px;
}

a:hover { color: var(--accent); }

.display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }

.label {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.wrap { max-width: 1440px; margin: 0 auto; }

/* Paper texture: real fiber lifted from the prints, tiled above all content
   so one sheet unifies the page, the artwork, and the type. */
.grain {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9;
	background-repeat: repeat;
}

.grain-day {
	background-image: url('../img/paper-day.webp');
	mix-blend-mode: multiply;
	opacity: 0.45;
}


/* ==========================================================================
   MARGINALIA (header / section footers)
   ========================================================================== */
.marginalia {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 32px;
	padding: 30px 56px 0 56px;
}

.marginalia--foot { padding: 0 56px 34px 56px; }
.marginalia--foot .label { color: var(--dim); }

.coords { text-align: center; line-height: 1.9; }



/* ==========================================================================
   HERO (entry 01)
   ========================================================================== */
.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 26px;
	padding: 56px 24px 0 24px;
}

/* Desktop: layout-transparent wrapper; phones turn it into a full-viewport
   lead (wordmark, print, tagline) so the copy starts on the second screen */
.hero-lead { display: contents; }

.hero h1 {
	margin: 0;
	font-size: clamp(56px, 9vw, 124px);
	line-height: 0.92;
	letter-spacing: -0.01em;
	position: relative;
	z-index: 2;
	/* the promised misregistration: a brick ghost pass, 2px off-register */
	text-shadow: 2px 2px 0 rgba(165, 80, 60, 0.16);
}


/* The prints' backgrounds match the page exactly and edges are feathered
   to transparency, so the wordmark and tagline overlap them. */
.hero-art {
	display: block;
	width: min(960px, 94vw);
	height: auto;
	margin-top: clamp(-58px, -5.5vw, -16px);
}

.hero-art--day-mobile { display: none; }

/* Phones get tighter portrait crops of the same prints, one per theme */
@media (max-width: 700px) {
	.hero-art--day { display: none; }
	.hero-art--day-mobile { display: block; width: min(440px, 92vw); margin-top: -10px; }
}

.tagline {
	margin: clamp(-36px, -3vw, -8px) 0 0 0;
	font-size: 18px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	position: relative;
	z-index: 2;
}

/* Prose reads in the serif, left-aligned; mono stays for the "typed" parts
   (labels, coordinates, status, colophon) */
.hero-copy {
	margin: 0;
	max-width: 560px;
	font-family: 'Newsreader', Georgia, serif;
	font-size: 18px;
	line-height: 1.75;
	text-align: left;
	color: var(--ink-soft);
}

.cta {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 34px;
	border: 2px dotted #A5503C;
	color: var(--cta-ink);
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transform: rotate(-1deg);
}

/* ==========================================================================
   CREW
   ========================================================================== */
.crew {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 40px;
	padding: 72px 24px 56px 24px;
}

.crew-heading { margin: 0; font-size: 34px; line-height: 1.2; font-weight: 400; }

/* Flex so a wrapped final row centers itself — five names never orphan */
.crew-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 44px 40px;
	max-width: 1100px;
	width: 100%;
}

.crew-grid .crew-member { flex: 0 0 160px; }

.crew-member { display: flex; flex-direction: column; gap: 8px; }
.crew-member .display { font-size: 28px; font-style: italic; }
.crew-member .label { color: var(--dim); }

/* ==========================================================================
   WHAT WE DO (entry 02)
   ========================================================================== */
.entry-two {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 24px;
	min-height: min(92svh, 800px);
	padding: 88px 24px 0 24px;
}

/* The hall: intact column floor-to-ceiling at the left edge, the broken
   stump grounded at the right — the statement stands between them */
.entry-pillar { position: absolute; pointer-events: none; width: auto; }
.entry-pillar--left { left: 0; top: 0; height: 100%; }
.entry-pillar--right { right: 0; bottom: 0; height: 54%; }

@media (max-width: 980px) {
	.entry-pillar { display: none; }
	.entry-two { min-height: 0; }
}

.entry-two h2 { margin: 0; font-size: clamp(36px, 4.5vw, 60px); line-height: 1.12; }

.entry-two > p {
	margin: 0;
	max-width: 640px;
	font-family: 'Newsreader', Georgia, serif;
	font-size: 18px;
	line-height: 1.75;
	text-align: left;
	color: var(--ink-soft);
}

/* ==========================================================================
   COMPANIES
   ========================================================================== */
.companies { margin: 0 auto; padding: 72px 120px 0 120px; max-width: 1440px; }
.companies > .label { display: block; padding-bottom: 18px; }

.rule { border: none; border-top: 1px dashed var(--rule); margin: 0; }

.co-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	padding: 20px 4px;
	border-bottom: 1px dashed var(--rule-soft);
}

.co-left { display: flex; align-items: center; gap: 28px; }
.co-name { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }

.co-meta {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--ink-mute);
	text-align: right;
	line-height: 2;
}

.co-status { color: var(--status); }
.co-struck { color: var(--strike); text-decoration: line-through; }

/* Archive tags whisper: hairline border in the muted ink, not the accent —
   the dead entries must never outrank the live ones */
.tag-stamp {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	border: 1px solid var(--dim);
	color: var(--dim);
	font-size: 10px;
	letter-spacing: 0.12em;
}

/* Archive rows are simply dim — hovering them changes nothing */
.co-row--archive { opacity: 0.5; }

/* Timeline view: the register condensed to years and signatures */
.tl-group {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	padding: 36px 4px;
	border-bottom: 1px dashed var(--rule-soft);
}
.tl-year {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.22em;
	color: var(--accent);
	padding-top: 14px;
}
.tl-names { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.companies-intro {
	margin: 26px 0 6px 0;
	max-width: 640px;
	font-family: 'Newsreader', Georgia, serif;
	font-size: 18px;
	line-height: 1.75;
	color: var(--ink-soft);
}
.tl-names { width: 100%; }
.tl-entry { display: flex; align-items: center; gap: 20px; width: 100%; }
.tl-entry .co-meta { margin-left: auto; }
.tl-entry .stamp-glyph { width: 44px; height: 44px; flex-shrink: 0; }
.tl-entry--archive { opacity: 0.5; }
.co-name--archive { opacity: 0.5; }

/* The running total leads to the full register */
.still-counting {
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}
.still-counting:hover { color: var(--accent); }
.tl-entry--archive .co-name--archive { opacity: 1; }

/* Stamp glyphs: spot inks stay literal; theme-dependent details use tokens. */
.stamp { mix-blend-mode: multiply; flex-shrink: 0; }
.stamp .detail-stroke { stroke: var(--stamp-detail); }
.stamp .detail-fill { fill: var(--stamp-detail); }
.stamp .keyhole { fill: var(--stamp-keyhole); }
.stamp .wave { stroke: var(--stamp-wave); }
.stamp .spark { stroke: var(--stamp-spark); }

/* ==========================================================================
   LEDGER
   ========================================================================== */
/* Borderless: the companies' last row rules it off above, the footer's
   rule closes it below — keeps the stretch to two dashed lines, not four. */
.ledger {
	margin: 0 120px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 32px;
	padding: 44px 8px 0 8px;
	font-size: 14px;
	letter-spacing: 0.12em;
}

.ledger .dim { color: var(--dim); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	margin: 56px 120px 0 120px;
	border-top: 1px dashed var(--rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px;
	padding: 64px 8px 48px 8px;
}

.site-footer .email { font-size: 22px; letter-spacing: 0.04em; }
.footer-left { display: flex; flex-direction: column; gap: 12px; }
.colophon { text-align: center; padding: 0 24px 44px 24px; color: var(--dim); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
	.coords { display: none; }
	.companies { padding: 56px 24px 0 24px; }
	/* Small screens: the ledger reads as a column, one entry per line */
	.ledger {
		margin: 0 24px;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 14px;
		padding-top: 36px;
	}
	.site-footer .email { font-size: 17px; letter-spacing: 0.02em; }
	.site-footer { margin: 48px 24px 0 24px; justify-content: center; text-align: center; }
	.footer-left { align-items: center; }
}

@media (max-width: 700px) {
	.marginalia { gap: 10px 24px; padding: 22px 20px 0 20px; }
	.marginalia .label { font-size: 10px; }
	.marginalia { flex-wrap: nowrap; align-items: center; }
	.back-btn { padding: 5px 9px; white-space: nowrap; }
	.label-extra { display: none; }
	.pf-hero h1 { font-size: clamp(32px, 10vw, 44px); padding: 0 24px; }
	.marginalia--foot { flex-wrap: wrap; padding: 0 20px 28px 20px; justify-content: center; gap: 8px 20px; }
	.hero { padding: 0 20px; gap: 28px; }
	.hero-lead {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
		min-height: calc(100svh - 64px);
	}
	.crew { padding: 56px 20px 40px 20px; }
	/* Crew as a signature ledger: name left, role right, one line each */
	.crew-grid {
		flex-direction: column;
		width: min(360px, 88vw);
		gap: 14px;
	}
	.crew-grid .crew-member {
		flex: none;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
	}
	.crew-member .display { font-size: 24px; }
	.crew-member .label { font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; }

	.tl-group { grid-template-columns: 1fr; gap: 16px; padding: 28px 4px; }
	.tl-year { padding-top: 0; }

	/* Iconless register rows stack: name above, meta beneath */
	.co-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.co-meta { text-align: left; line-height: 2.2; }
	.tl-entry .stamp-glyph { width: 36px; height: 36px; }
	.tl-entry { gap: 8px 16px; flex-wrap: wrap; }
	.tl-entry .co-meta { flex-basis: 100%; margin-left: 52px; text-align: left; line-height: 1.9; }
}

@media (max-width: 360px) {
	.crew-member .display { font-size: 21px; }
	.crew-member .label { font-size: 9px; letter-spacing: 0.1em; }
}


/* ==========================================================================
   THE ROTUNDA — a plain plate before the seal; rests after dark
   ========================================================================== */
.home-link:hover { color: var(--accent); }

/* Portfolio back button, in the CTA's dotted language */
.back-btn {
	text-decoration: none;
	color: var(--accent);
	border: 2px dotted var(--accent);
	padding: 8px 14px;
	transition: background-color 160ms ease, color 160ms ease;
}
.back-btn:hover,
.back-btn:focus-visible { background: var(--accent); color: #F2EDE2; }

.pf-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	min-height: calc(100svh - 90px);
	padding: 16px 24px;
	box-sizing: border-box;
}
.pf-temple {
	display: block;
	width: min(1360px, 94vw);
	height: auto;
	max-height: 72svh;
	object-fit: contain;
}
.pf-hero h1 {
	margin: 0 -24px;
	width: calc(100% + 48px);
	max-width: 1440px;
	padding: 0 120px;
	text-align: left;
	transform: translateY(clamp(10px, 2vw, 28px));
	font-size: clamp(48px, 7vw, 96px);
	line-height: 0.92;
	letter-spacing: -0.01em;
	text-shadow: 2px 2px 0 rgba(165, 80, 60, 0.16);
}

/* Portfolio entries: the register expanded — each venture gets its account */
.pf-entries { display: flex; flex-direction: column; gap: 44px; width: 100%; }
.pf-entry { border-bottom: 1px dashed var(--rule-soft); padding-bottom: 40px; }
.pf-entry:last-child { border-bottom: none; padding-bottom: 8px; }
.pf-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.pf-entry-prose {
	margin: 14px 0 0 0;
	max-width: 620px;
	font-family: 'Newsreader', Georgia, serif;
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink-soft);
}
.pf-entry-prose:empty { display: none; }
.pf-entry--archive { opacity: 0.55; }
@media (max-width: 700px) {
	.pf-entry-head { flex-direction: column; align-items: flex-start; gap: 6px; }
	.pf-entry-head .co-meta { text-align: left; }
}

/* Small screens: the portrait printing takes the hero; the landscape rests */
.pf-temple.pf-temple--mobile { display: none; }
@media (max-width: 700px) {
	.pf-temple:not(.pf-temple--mobile) { display: none; }
	.pf-temple.pf-temple--mobile { display: block; width: auto; max-width: 92vw; max-height: calc(100svh - 240px); }
}

/* Harbor passage: a study at the journal's end; the direct line rides
   the water below — hop on. */
.harbor {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 24px;
	margin-top: 4px;
	position: relative;
	z-index: 2;
	pointer-events: none;
}
.harbor-plate { display: block; width: min(720px, 90vw); height: auto; }
.harbor-line { color: var(--dim); margin-top: -8px; }
.harbor ~ .site-footer {
	border-top: none;
	margin-top: 0;
	padding-top: 18px;
	position: relative;
	z-index: 3;
}
/* Small screens: the harbor rests, like the pillars */
@media (max-width: 900px) {
	.harbor { display: none; }
	.harbor ~ .site-footer { margin-top: 40px; padding-top: 0; }
}