/* AspiringPeasant — page layouts.
   Every inline style from the mock pages promoted to a class, values verbatim. */

/* ---- Scenery SVG (shared by hero/band/404 partials) ---- */
.ap-scenery { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- Homepage hero (index.html) ---- */
.ap-hero { position: relative; height: 470px; overflow: hidden; background: var(--grad-sky); }
.ap-hero__header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end; padding: 20px 40px;
  /* full-width bar must not eat hovers meant for the scene behind it */
  pointer-events: none;
}
/* only the nav's real controls are interactive — the bar's box must not
   eat hovers meant for stars hanging behind it */
.ap-hero__header .ap-nav { pointer-events: none; }
.ap-hero__header .ap-nav a, .ap-hero__header .ap-nav button { pointer-events: auto; }
.ap-hero__center {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 94px;
  /* positioning wrapper only — don't eat hover/clicks meant for the scene */
  pointer-events: none;
}
.ap-hero__capsule {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--scrim-sky); padding: 38px 84px; border-radius: 50%;
}
.ap-hero__est { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--hero-fg-dim); }
.ap-hero__wordmark { font-weight: 500; font-size: var(--text-hero); line-height: 1.05; color: var(--hero-fg); margin-top: 8px; }
/* typographic header image in place of the wordmark text (hero_logo setting) */
.ap-hero__wordmark--logo img {
  display: block; margin: 0 auto;
  max-width: min(480px, 72vw); max-height: 140px;
  width: auto; height: auto;
}
.ap-hero__tagline { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hero-tagline); margin-top: 12px; }

/* ---- Little Prince hanging stars (dark hero only — prototype) ---- */
.ap-hero__stars { display: none; position: absolute; inset: 0; pointer-events: none; }
[data-theme="dark"] .ap-hero__stars { display: block; }
.ap-star { position: absolute; top: 0; overflow: visible; }
.ap-star--1 { left: 12%; width: 44px; height: 132px; }
.ap-star--2 { left: 23%; width: 44px; height: 84px; }
.ap-star--3 { left: 6%; width: 44px; height: 202px; }
.ap-star--4 { left: 88%; width: 44px; height: 172px; }
.ap-star--5 { left: 32%; width: 44px; height: 76px; }
.ap-star__string { fill: none; stroke: oklch(0.90 0.03 240 / 0.35); stroke-width: 1; }
.ap-star__shape {
  fill: oklch(0.83 0.095 90);
  stroke: oklch(0.48 0.075 72 / 0.55);
  stroke-width: 0.8;
  filter: drop-shadow(0 0 4px oklch(0.85 0.09 90 / 0.22));
  pointer-events: auto;
}
/* breeze from the right: stars lean off vertical and ride an uneven gust
   cycle (build → slack → stronger gust with flutter → die → overshoot past
   vertical → settle). Phase offsets sweep the gust right-to-left across the
   scene; --breeze-scale gives short strings a livelier flutter than long. */
.ap-star { transform-origin: 50% 0; animation: ap-star-breeze 11s ease-in-out infinite; }
.ap-star--1 { --breeze-scale: 1; animation-delay: -0.3s; }
.ap-star--2 { --breeze-scale: 1.3; animation-delay: -0.6s; }
.ap-star--3 { --breeze-scale: 0.75; animation-delay: 0s; }
.ap-star--4 { --breeze-scale: 0.9; animation-delay: -2s; }
.ap-star--5 { --breeze-scale: 1.4; animation-delay: -0.9s; }
@keyframes ap-star-breeze {
  0%   { transform: rotate(calc(var(--breeze-scale, 1) * 0.8deg)); }
  14%  { transform: rotate(calc(var(--breeze-scale, 1) * 4.6deg)); }
  26%  { transform: rotate(calc(var(--breeze-scale, 1) * 2.4deg)); }
  38%  { transform: rotate(calc(var(--breeze-scale, 1) * 6.2deg)); }
  46%  { transform: rotate(calc(var(--breeze-scale, 1) * 4.3deg)); }
  54%  { transform: rotate(calc(var(--breeze-scale, 1) * 7deg)); }
  70%  { transform: rotate(calc(var(--breeze-scale, 1) * 1.6deg)); }
  82%  { transform: rotate(calc(var(--breeze-scale, 1) * -1.1deg)); }
  100% { transform: rotate(calc(var(--breeze-scale, 1) * 0.8deg)); }
}
/* arrival layer: site.js lowers the star in from above the hero when the
   lights go out (translateY; the hero's overflow:hidden does the clipping) */
.ap-star__drop { width: 100%; height: 100%; }
/* middle layer: absorbs the momentum swing when a star is swiped —
   site.js integrates a damped pendulum here (nothing is keyframed) */
.ap-star__poke { width: 100%; height: 100%; transform-origin: 50% 0; }
/* slow turn on the string's own axis. rotateY lives on the svg ELEMENT
   (an HTML box) — browsers flatten 3D transforms on SVG internals, which is
   why earlier attempts pinwheeled. Origin 50% = the string line, so the
   string itself doesn't appear to move while the star foreshortens. */
.ap-star__svg { display: block; width: 100%; height: 100%; overflow: visible; animation: ap-star-turn 5.5s var(--ease-drift) infinite alternate; }
.ap-star--2 .ap-star__svg { animation-duration: 6.5s; animation-delay: -2s; }
.ap-star--3 .ap-star__svg { animation-duration: 7.5s; animation-delay: -4s; }
.ap-star--4 .ap-star__svg { animation-duration: 6s; animation-delay: -1s; }
.ap-star--5 .ap-star__svg { animation-duration: 8s; animation-delay: -3s; }
@keyframes ap-star-turn {
  from { transform: perspective(500px) rotateY(-30deg); }
  to { transform: perspective(500px) rotateY(30deg); }
}

/* ---- 150px sky band (post/tag/about/subpages) ---- */
.ap-band { position: relative; height: 150px; overflow: hidden; background: var(--grad-sky-band); }
.ap-band__header {
  position: absolute; top: 0; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; padding: 0 40px;
  /* the bar must not eat hovers meant for the band stars behind it */
  pointer-events: none;
}
.ap-band__header .ap-wordmark,
.ap-band__header .ap-nav a,
.ap-band__header .ap-nav button { pointer-events: auto; }

/* two small hanging stars, dark mode only — the hero mobile's siblings.
   site.js drives their swing/arrival exactly like the hero set. */
.ap-band__stars { display: none; position: absolute; inset: 0; pointer-events: none; }
[data-theme="dark"] .ap-band__stars { display: block; }
.ap-star--b1 { left: 37%; width: 44px; height: 92px; --breeze-scale: 1.15; animation-delay: -1.4s; }
.ap-star--b2 { left: 45%; width: 44px; height: 64px; --breeze-scale: 1.35; animation-delay: -0.5s; }
.ap-star--b1 .ap-star__svg { animation-duration: 6.8s; animation-delay: -2.6s; }
.ap-star--b2 .ap-star__svg { animation-duration: 7.6s; animation-delay: -1.1s; }
.ap-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--hero-fg); text-decoration: none; }
/* band wordmark as the hero_logo image, scaled to the text's optical size */
.ap-wordmark--logo { display: inline-flex; align-items: center; }
.ap-wordmark--logo img { display: block; height: 34px; width: auto; max-width: 46vw; }
.ap-nav { display: flex; align-items: center; gap: 26px; }

/* ---- Hero tail: dune afterimages dissolving into the body (prototype) ---- */
.ap-hero-tail {
  height: 160px;
  margin-bottom: -160px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 90%);
}
.ap-tail-svg { width: 100%; height: 100%; display: block; }
.ap-band-tail {
  height: 90px;
  margin-bottom: -90px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 90%);
}
/* content that follows a band tail must paint above it */
.ap-article, .ap-archive, .ap-subscribe { position: relative; z-index: 1; }
.ap-tail-1 { fill: var(--hero-dune-3); opacity: 0.22; }
.ap-tail-2 { fill: var(--hero-dune-2); opacity: 0.12; }
.ap-tail-3 { fill: var(--hero-dune-3); opacity: 0.07; }
[data-theme="dark"] .ap-tail-1 { opacity: 0.26; }
[data-theme="dark"] .ap-tail-2 { opacity: 0.16; }
[data-theme="dark"] .ap-tail-3 { opacity: 0.10; }

/* ---- Homepage main ---- */
.ap-main-home { padding-top: 64px; padding-bottom: 80px; position: relative; z-index: 1; }
.ap-section-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.ap-hairline { flex: 1; height: 1px; background: var(--border-soft); }
.ap-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; margin-bottom: 72px; }
.ap-featured__media { height: 330px; border-radius: var(--radius-md); overflow: hidden; }
.ap-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-featured__media .ap-placeholder { height: 100%; }
.ap-featured__title { font-size: 40px; margin: 14px 0 12px; text-wrap: pretty; }
.ap-featured__title a { color: inherit; text-decoration: none; }
.ap-featured__title a:hover { color: var(--accent-warm-strong); }
.ap-featured__standfirst { margin: 0; font-size: var(--text-lg); color: var(--text-body); line-height: 1.55; }
.ap-featured__meta { margin: 18px 0 22px; }
.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ap-home-notes { margin-top: 72px; }

/* ---- Post card ---- */
.ap-card--post { overflow: hidden; }
.ap-card__media { height: 170px; }
.ap-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-card__media .ap-placeholder { height: 100%; }
.ap-card__body { padding: 20px 22px 22px; }
.ap-card__title { font-size: var(--text-xl); margin: 11px 0 6px; }
.ap-card__excerpt {
  margin: 0; font-size: 15px; color: var(--text-muted); line-height: 1.5;
  /* clamp so a chatty excerpt can't wreck the grid's rhythm */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ap-card__meta { margin-top: 15px; }

/* ---- Post / page article ---- */
.ap-article { padding: 72px 40px 0; }
.ap-post-header { max-width: var(--measure); margin: 0 auto 40px; text-align: center; }
.ap-post-header__title { font-size: 52px; font-weight: 500; line-height: 1.12; margin: 18px 0 16px; text-wrap: pretty; }
.ap-post-header__title--page { margin: 0; }
.ap-standfirst { margin: 0; font-size: var(--text-lg); color: var(--text-muted); line-height: 1.5; font-family: var(--font-text); }
.ap-post-header__meta { margin-top: 20px; }
.ap-feature-figure { max-width: 920px; margin: 48px auto 56px; }
.ap-feature-figure--page { margin-top: 44px; }
.ap-feature-figure img { width: 100%; border-radius: var(--radius-md); display: block; }
.ap-feature-figure .ap-placeholder { height: 380px; border-radius: var(--radius-md); }
.ap-figcaption { font-family: var(--font-text); font-style: italic; font-size: 14.5px; color: var(--text-muted); text-align: center; margin-top: 10px; }
.gh-content--page { padding-bottom: 56px; }

/* Hairline / dot / hairline divider after the prose */
.ap-divider { max-width: var(--measure); margin: 56px auto 0; display: flex; align-items: center; gap: 16px; }
.ap-divider__line { flex: 1; height: 1px; background: var(--border-soft); }
.ap-divider__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-warm); }

.ap-post-tags { max-width: var(--measure); margin: 32px auto 72px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

/* ---- Keep reading / grad-haze bands ---- */
.ap-haze-band { background: var(--grad-haze); }
.ap-band-inner { max-width: var(--page-max); margin: 0 auto; padding: 56px 40px; position: relative; z-index: 1; }
.ap-keep-reading__label { margin-bottom: 24px; }
.ap-keep-reading__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.ap-card--reading { padding: 24px 26px; }
.ap-card--reading .ap-meta { margin-bottom: 10px; }
.ap-card--reading h3 { font-size: 24px; }
.ap-card--right { text-align: right; }

/* ---- Newsletter band ---- */
.ap-newsletter-inner { max-width: 560px; margin: 0 auto; padding: 72px 40px; text-align: center; position: relative; z-index: 1; }
.ap-newsletter__title { font-size: var(--text-2xl); font-weight: 500; }
.ap-newsletter__sub { margin: 12px 0 24px; color: var(--text-muted); font-size: 16px; }
.ap-newsletter__row { display: flex; gap: 10px; }
.ap-newsletter__row .ap-input { flex: 1; }
.ap-newsletter__choose { margin-top: 14px; font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); }

/* ---- Footer ---- */
/* the seam ridge paints in --dusk-0 (grad-dusk's top stop) so it merges into
   the footer with no visible boundary; the faint echo crest above it gives
   the dusk a second, softer horizon. -1px margin kills subpixel gaps. */
.ap-footer-seam { height: 64px; overflow: hidden; margin-bottom: -1px; }
.ap-footer-seam__svg { display: block; width: 100%; height: 100%; }
.ap-footer-seam__ridge { fill: var(--dusk-0); }
.ap-footer-seam__echo { fill: var(--dusk-0); opacity: 0.16; }
.ap-footer { background: var(--grad-dusk); }
.ap-footer__inner {
  max-width: var(--page-max); margin: 0 auto; padding: 46px 40px 58px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.ap-footer__wordmark { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--footer-wordmark); }
.ap-footer__meta { font-family: var(--font-ui); font-size: 12px; color: var(--footer-meta); margin-top: 5px; }
.ap-footer__nav { display: flex; gap: 24px; font-family: var(--font-ui); font-size: 13.5px; }

/* ---- Archives (tag.html geometry; also notes/essays/search/subscribe) ---- */
.ap-archive { max-width: 840px; margin: 0 auto; padding: 64px 40px 80px; }
.ap-archive--wide { max-width: var(--page-max); }
.ap-archive__title { font-size: 48px; font-weight: 500; margin-top: 10px; }
.ap-archive__count { margin: 10px 0 0; color: var(--text-muted); font-size: 16px; }
.ap-archive .ap-grid { margin-top: 36px; }
.ap-archive .ap-pagination { margin-top: 36px; }
.ap-rows { margin-top: 36px; border-top: 1px solid var(--border-soft); }
.ap-row {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 24px; align-items: baseline;
  padding: 20px 4px; border-bottom: 1px solid var(--border-soft);
  text-decoration: none; color: inherit;
}
.ap-row__title { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: var(--text-display); }
.ap-row:hover .ap-row__title { color: var(--accent-warm-strong); }
/* field-notes stream runs cool: sky-tinted dates + hover (net-new) */
.ap-meta--cool { color: var(--accent-cool-text); }
.ap-meta--warm { color: var(--accent-warm-text); } /* essays eyebrow, cool's twin */
.ap-row--cool .ap-row__date { color: var(--accent-cool-text); }
.ap-row--cool:hover .ap-row__title { color: var(--accent-cool-text); }

/* field-note POST pages run cool: the stream identity carries through the
   click. Essays keep every warm accent as designed. (net-new)
   (A "day-sky paper" background flip for notes surfaces was prototyped and
   rejected by the author — cream paper stays everywhere.) */
.ap-post--note .ap-post-header__meta { color: var(--accent-cool-text); }
.ap-post--note .ap-tag {
  background: var(--tag-cool-bg);
  color: var(--tag-cool-fg);
  border-color: var(--tag-cool-border);
}
.ap-post--note a.ap-tag:hover { background: var(--tag-cool-bg); color: var(--tag-cool-fg); }
.ap-post--note .gh-content a { color: var(--accent-cool-text); text-decoration-color: var(--link-underline-cool); }
.ap-post--note .gh-content a:hover { color: var(--accent-cool-text-strong); text-decoration-color: currentColor; }
.ap-post--note .gh-content hr::after,
.ap-post--note .gh-content blockquote::after,
.ap-post--note .ap-divider__dot { background: var(--accent-cool); }
.ap-home-notes .ap-rows { margin-top: 0; }

/* ---- 404 / error ---- */
.ap-404 { position: relative; height: calc(100vh - 120px); min-height: 520px; overflow: hidden; background: var(--grad-sky); }
.ap-404__header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; padding: 20px 40px;
}
.ap-404__center {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding-bottom: 60px;
}
.ap-404__label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--hero-fg-dim); }
.ap-404__title { font-size: 52px; font-weight: 500; color: var(--hero-fg); margin-top: 10px; }
.ap-404__sub { margin: 14px 0 28px; font-size: 17px; color: var(--hero-fg-soft); font-family: var(--font-text); font-style: italic; }

/* ---- Search page (net-new design — archive geometry; flag for review) ---- */
.ap-search__input { width: 100%; margin-top: 28px; font-size: 18px; padding: 14px 16px; }
.ap-search__filters { display: flex; gap: 8px; margin-top: 16px; }
button.ap-tag { cursor: pointer; }
button.ap-tag[aria-pressed="true"] { background: var(--tag-bg-hover); color: var(--tag-fg-hover); border-color: var(--tag-fg); }
button.ap-tag[data-stream="notes"][aria-pressed="true"] { background: var(--tag-cool-bg); color: var(--tag-cool-fg); border-color: var(--tag-cool-border); }
.ap-search__status { margin-top: 28px; }
.ap-search__results.ap-rows { margin-top: 12px; }
.ap-search__noscript { margin-top: 28px; font-size: 16px; color: var(--text-muted); }

/* ---- Subscribe page (net-new design — flag for review) ---- */
.ap-subscribe { max-width: 620px; margin: 0 auto; padding: 64px 24px 110px; text-align: center; }
.ap-subscribe__card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 48px 48px 44px;
}
.ap-subscribe__title { font-family: var(--font-display); font-weight: 500; font-size: 38px; letter-spacing: -0.01em; margin: 10px 0 0; }
.ap-subscribe__sub { font-family: var(--font-body); font-size: 16.5px; color: var(--text-muted); margin: 12px 0 0; }
.ap-subscribe__form { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; text-align: left; }
.ap-subscribe__choices { display: flex; flex-direction: column; gap: 10px; margin: 2px 0; }
/* newsletter choice rows: bordered, checkable, whole row is the target.
   Row 1 = the essays letter (warm), row 2 = field notes (cool). */
.ap-choice {
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 15px 17px; cursor: pointer; background: var(--bg-page);
  transition: border-color 0.16s ease, background 0.16s ease;
  --choice-accent: var(--accent-warm-strong);
}
.ap-choice:nth-child(2) { --choice-accent: var(--accent-cool-text); }
.ap-choice:hover { border-color: var(--choice-accent); }
.ap-choice input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ap-choice__box {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px;
  border: 1.5px solid var(--input-border); border-radius: 6px;
  display: grid; place-items: center;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.ap-choice__box::after {
  content: ''; width: 10px; height: 10px; opacity: 0;
  background: currentColor; color: var(--bg-card);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5 L4.5 9.5 L10.5 2.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5 L4.5 9.5 L10.5 2.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ap-choice input:checked ~ .ap-choice__box { background: var(--choice-accent); border-color: var(--choice-accent); }
.ap-choice input:checked ~ .ap-choice__box::after { opacity: 1; }
.ap-choice input:focus-visible ~ .ap-choice__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ap-choice__text { display: flex; flex-direction: column; gap: 3px; }
.ap-choice__name { font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.ap-choice__desc { font-family: var(--font-body); font-size: 14.5px; color: var(--text-muted); }
.ap-subscribe__btn { width: 100%; margin-top: 8px; padding: 13px 24px; font-size: 15px; }