/* ============================================================
   AMARIMA Research — inner pages shared layout
   Used by about / research / contact (non-homepage).
   Depends on /css/main.css for tokens + site-header/footer.

   Design principle here: clarity first, prettiness follows.
   Each page is a stack of scannable .content-section blocks,
   separated by hairline rules. Each section opens with a
   .section-head — an h2 paired with a small teal dot that
   mirrors the AMARIMA logomark, giving the reader an instant
   "this is a new section" signal without loud decoration.
   ============================================================ */

main {
	position: relative;
	z-index: 1; /* above the body::before day-sky gradient */
}

/* =========================================================
   Page hero — the top band on every inner page.
   Three pieces: eyebrow (small tracked context), h1 (page
   name), lede (one sentence orienting the reader).
   ========================================================= */
.page-hero {
	padding: 8rem 2rem 3rem;
}
.page-hero .wrap {
	max-width: 900px;
}
.page-hero .eyebrow {
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 1.25rem;
}
.page-hero h1 {
	font-size: clamp(36px, 5.5vw, 64px);
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.1;
	margin-bottom: 1.5rem;
	color: var(--text-primary);
}
.page-hero .lead {
	font-size: clamp(17px, 1.8vw, 20px);
	line-height: 1.55;
	color: var(--text-body);
	max-width: 540px;
}

/* =========================================================
   Content section — the base container for each scannable
   block. Hairline border-top between sections. Consistent
   padding so the visual rhythm is predictable.
   ========================================================= */
.content-section {
	padding: 4.5rem 2rem;
	border-top: 1px solid var(--border);
	position: relative;
}
.content-section p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--text-body);
	max-width: 600px;
}
.content-section p + p {
	margin-top: 1em;
}

/* .section-head — the recurring h2 marker.
   A small teal dot (echoing the AMARIMA logomark) sits
   before each section title, giving the reader an instant
   visual cue for "new section" without shouting. */
.section-head {
	font-size: clamp(22px, 2.5vw, 30px);
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.15;
	color: var(--text-primary);
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.8em;
}
.section-head::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	background: var(--teal-flash);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(32, 184, 160, 0.6);
	flex-shrink: 0;
}

/* Section-note — a small muted caption that sits BELOW
   the .section-head and introduces the block before the
   main content starts. Used on research.html. */
.section-note {
	font-size: 14px;
	color: var(--text-muted);
	margin-bottom: 2.25rem !important;
	max-width: 540px;
}

/* Principle callout — rose-rule emphasis for the key line
   in About's "why this exists" block. Uses the interactive
   accent so it reads as "this is emphasized" in the same
   register as links and CTAs. */
.principle {
	border-left: 3px solid var(--accent-blue);
	padding: 0.6rem 0 0.6rem 1.35rem;
	margin: 2rem 0 !important;
	font-size: 17px !important;
	line-height: 1.65;
	color: var(--text-primary) !important;
	font-weight: 400;
	max-width: 560px;
}

/* Contact lines (About page bottom) */
.contact-lines {
	font-size: 17px !important;
	line-height: 2;
}
.contact-lines a {
	color: var(--accent-blue);
	font-weight: 500;
}
.contact-lines .location-line {
	color: var(--text-muted);
}

/* =========================================================
   About — one person per viewport, HORIZONTAL carousel.
   Each pane = 100vw × 100vh. Scroll-snap gives smooth sideways
   slide between people; ↓/→ anchor links give keyboard/click nav.
   ========================================================= */
html { scroll-behavior: smooth; }

.about-people {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	height: 100vh;
	width: 100vw;
	/* Hide scrollbar visually — keep scroll functionality */
	scrollbar-width: none;
}
.about-people::-webkit-scrollbar { display: none; }

.person-pane {
	flex: 0 0 100vw;
	width: 100vw;
	height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: grid;
	grid-template-columns: minmax(360px, 1.1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: stretch;
	/* No padding on left or bottom — the photo anchors flush to
	   those edges. Top padding clears the fixed header; right
	   padding is applied to .person-body instead. */
	padding: 0;
	position: relative;
	box-sizing: border-box;
}

.person-media {
	margin: 0;
	height: 100%;
	overflow: hidden;
}
.person-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
	/* Editorial / print-magazine look: pull saturation way down,
	   nudge toward grayscale, soften contrast slightly so the
	   skin tones and background don't compete for attention. */
	filter: grayscale(0.25) saturate(0.65) contrast(0.95) brightness(0.98);
}

.person-body {
	max-width: 560px;
	align-self: center;
	padding: 7rem clamp(2rem, 6vw, 7rem) 4rem 0;
}
.person-body .person-eyebrow {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 1.25rem;
}
.person-body .person-name {
	font-family: var(--sans);
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--text-primary);
	margin: 0 0 1.75rem;
}
.person-body .person-bio {
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.6;
	color: var(--text-body);
	margin: 0 0 1.5rem;
}
.person-body .person-bio strong {
	font-weight: 500;
	color: var(--text-primary);
}
.person-body .person-email {
	display: inline-block;
	font-size: 14px;
	color: var(--accent-blue);
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease;
}
.person-body .person-email:hover {
	border-bottom-color: var(--accent-blue);
}

/* Scroll cue — right edge, vertically centered. Bobs sideways
   to hint the carousel direction. Clicking smooth-scrolls via
   html { scroll-behavior: smooth }. */
.scroll-cue {
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: 22px;
	text-decoration: none;
	border-radius: 50%;
	border: 1px solid rgba(26, 16, 32, 0.1);
	transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
	animation: scrollCueBobX 2.4s ease-in-out infinite;
	z-index: 4;
}
.scroll-cue:hover {
	color: var(--text-primary);
	background: rgba(255, 255, 255, 0.85);
	transform: translateY(-50%) translateX(4px);
}
/* Back cue — flip direction, sit on the left edge */
.scroll-cue--back {
	right: auto;
	left: 2rem;
	animation: scrollCueBobXReverse 2.4s ease-in-out infinite;
}
.scroll-cue--back:hover {
	transform: translateY(-50%) translateX(-4px);
}
@keyframes scrollCueBobX {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(6px); }
}
@keyframes scrollCueBobXReverse {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(-6px); }
}

@media (max-width: 820px) {
	.person-pane {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
		padding: 0;
		gap: 1.5rem;
	}
	.person-media {
		height: min(55vh, 420px);
	}
	.person-media img {
		object-position: left bottom;
	}
	.person-body {
		padding: 0 1.5rem 4rem 1.5rem;
	}
	.scroll-cue {
		right: 1rem;
		width: 44px;
		height: 44px;
		font-size: 18px;
	}
	.scroll-cue--back {
		right: auto;
		left: 1rem;
	}
}
.person-card .person-email:hover {
	border-bottom-color: var(--accent-blue);
}

/* =========================================================
   Report card (Research) — each published / scheduled report
   is a card in a vertical stack. Dense metadata up top
   (date), headline + description in the middle, method + CTA
   at the bottom. Hover lights the border teal.
   ========================================================= */
.report-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 640px;
	margin-top: 1rem;
}
.report-card {
	display: block;
	padding: 2rem 0;
	border-top: 1px solid var(--border);
}
.report-card:first-child {
	border-top: 0;
	padding-top: 0.5rem;
}
/* Metadata strip — the report's index + date in a single horizontal
   row of small tracked caps. Puts date in context with the report
   instead of floating it far-right in its own column. */
.report-card .report-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 1rem !important;
	font-weight: 500;
}
.report-card .report-meta .report-index {
	color: var(--accent-blue);
}
.report-card .report-meta .report-sep {
	color: var(--text-faint);
	letter-spacing: 0;
}
.report-card .report-meta .report-date {
	color: var(--text-muted);
	white-space: nowrap;
}
/* Title — sits BELOW the section heading, so the scale must too.
   Previously was clamp(22, 3vw, 32) which made it larger than
   the section-head (22-30). Now a clean subordinate scale. */
.report-card .report-title {
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.25;
	margin: 0 0 0.75rem !important;
	color: var(--text-primary);
}
.report-card .report-title a {
	color: var(--text-primary);
	text-decoration: none;
	transition: color 0.3s ease;
}
.report-card .report-title a:hover {
	color: var(--accent-blue);
}
.report-card .report-desc {
	font-size: 15px !important;
	line-height: 1.65;
	color: var(--text-body);
	max-width: 560px;
	margin: 0 0 1.25rem !important;
}
.report-card .report-method {
	font-size: 12px;
	line-height: 1.55;
	color: var(--text-muted);
	padding: 0.75rem 0;
	border-top: 1px solid var(--border);
	max-width: 560px;
	margin-bottom: 1.25rem !important;
}
.report-card .report-method span {
	color: var(--text-faint);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 10px;
	display: block;
	margin-bottom: 0.3rem;
}
/* Read-the-report link — understated text arrow, not a pill.
   Matches the airy editorial register; keeps the title as the
   visual anchor of the card. */
.report-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--accent-blue);
	text-decoration: none;
	padding: 0;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color 0.25s ease, color 0.25s ease;
}
.report-cta:hover {
	border-bottom-color: var(--accent-blue);
	color: var(--accent-glow);
	box-shadow: none;
}

/* Future / in-progress grid (Research) */
.future-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	max-width: 960px;
}
.future-item {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 1.5rem 1.5rem 1.75rem;
	transition: border-color 0.3s ease;
}
.future-item:hover {
	border-color: var(--border-strong);
}
.future-item .topic-label {
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 0.9rem !important;
	font-weight: 500;
}
.future-item p {
	font-size: 15px !important;
	line-height: 1.6;
	color: var(--text-body);
}
.future-note {
	font-size: 13px !important;
	color: var(--text-muted) !important;
	margin-top: 2rem !important;
	font-style: italic;
	max-width: 560px;
}

/* Citation box (Research / About bottom sections) */
.citation-box {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 1.5rem 2rem;
	font-size: 14px !important;
	line-height: 1.65;
	color: var(--text-body);
	max-width: 560px;
}
.citation-box a {
	color: var(--accent-blue);
	font-weight: 500;
}

/* =========================================================
   Contact page — stacked single-column blocks
   ========================================================= */
.contact-blocks {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	max-width: 540px;
}
.contact-email {
	display: inline-block;
	font-size: 19px;
	font-weight: 500;
	color: var(--accent-blue);
	letter-spacing: 0.005em;
	text-decoration: none;
	transition: color 0.3s ease;
}
.contact-email:hover {
	color: var(--accent-glow);
}
.location-text {
	font-size: 17px;
	color: var(--text-primary);
	margin: 0;
}
.consulting-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-blue);
	text-decoration: none;
	padding: 0.65rem 1.35rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	transition: all 0.3s ease;
	margin-top: 0.5rem;
}
.consulting-link:hover {
	border-color: var(--accent-blue);
	box-shadow: 0 0 20px var(--glow-teal);
	color: var(--accent-glow);
}

/* =========================================================
   CONTACT PAGE — centered card, compact + organized
   ---------------------------------------------------------
   Main becomes a vertical flex centered in the viewport.
   The entire card (hero + three blocks) sits mid-page,
   centered horizontally, all text centered. Small scale.
   ========================================================= */
.page-contact main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 6rem 1.5rem 3rem;
}
.page-contact .contact-card {
	width: 100%;
	max-width: 460px;
	text-align: center;
}

/* Hero — compact, subtitle reads larger than before. */
.page-contact .page-hero {
	padding: 0 0 2.25rem;
}
.page-contact .page-hero .wrap {
	max-width: 460px;
	margin: 0 auto;
	padding: 0;
}
.page-contact .page-hero .eyebrow {
	color: var(--text-muted);
	font-size: 10px;
	letter-spacing: 0.28em;
	margin-bottom: 0.85rem;
}
.page-contact .page-hero h1 {
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 40px);
	letter-spacing: -0.018em;
	line-height: 1.05;
	margin: 0 0 1rem;
}
.page-contact .page-hero .lead {
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.5;
	color: var(--text-body);
	max-width: 400px;
	margin: 0 auto;
	font-weight: 400;
}

/* Three blocks — stacked tight, centered. Each:
     label (small tracked caps)
     description
     (gap)
     value (email / link / location)
   Location is reordered in HTML so value comes first. */
.page-contact .content-section {
	border-top: none;
	padding: 1.4rem 0 0;
}
.page-contact .content-section .wrap-narrow {
	max-width: 460px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.page-contact .section-head {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 0.4rem;
	justify-content: center;
	gap: 0;
}
.page-contact .section-head::before { display: none; }

.page-contact .section-note {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-body);
	margin: 0 auto 0.85rem !important;
	max-width: 380px;
}

/* Standardized "value" line — same size/weight/case across
   email, consulting link, and location. Reads as a caption-
   weight statement, not a heading. */
.page-contact .contact-email,
.page-contact .consulting-link,
.page-contact .location-text {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-transform: none;
	color: var(--text-primary);
	margin: 0;
}

.page-contact .contact-email,
.page-contact .consulting-link {
	display: inline-block;
	border: none;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	padding: 0 0 1px;
	background: transparent;
	box-shadow: none;
	text-decoration: none;
	transition: border-color 0.3s ease, color 0.3s ease;
}
.page-contact .contact-email:hover,
.page-contact .consulting-link:hover {
	color: var(--accent-blue);
	border-bottom-color: var(--accent-blue);
	box-shadow: none;
}

.page-contact .consulting-link {
	gap: 0.3rem;
}

.page-contact .location-text {
	margin: 0 0 0.85rem;
}
.page-contact .location-text + .section-note {
	margin: 0 auto !important;
	font-size: 12px;
}

@media (max-width: 720px) {
	.page-contact main { padding: 5rem 1.25rem 2.5rem; }
	.page-contact .content-section { padding-top: 1.1rem; }
}

/* =========================================================
   Reveal animation — consistent across all inner pages
   ========================================================= */
[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.75s ease-out, transform 0.75s ease-out;
}
[data-reveal].visible {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 720px) {
	.page-hero {
		padding: 7rem 1.5rem 2.5rem;
	}
	.content-section {
		padding: 3.5rem 1.5rem;
	}
	.report-card {
		padding: 1.5rem 0;
	}
	.report-card .report-meta {
		flex-wrap: wrap;
		gap: 0.4rem 0.6rem;
	}
}