/* Porch landing page: the private salon and the print archive.
   Palette and type from the landing spec. Sub-pages keep styles.css. */

:root {
  --linen: #F6F3ED;       /* warm oatmeal linen: page backdrop */
  --vellum: #EBE6DC;      /* deep archive vellum: mats and placeholders */
  --card: #FBF9F5;        /* ivory card face */
  --ink: #1C1A18;         /* carbon black */
  --lead: #5A5650;        /* cold lead gray */
  --rule: #D8D3C8;        /* hairline rules */
  --mat-border: #DDD8CD;  /* photographic mat border */
  --vermilion: #D64527;
  --vermilion-text: #C43B1F; /* vermilion at a contrast that holds for small type */
  --gold: #DCA838;
  --charcoal: #1A1816;    /* the Sunday hour */
  --ivory: #F3EFE6;
  --ivory-2: #B9B2A6;
  --ochre: #C9A24E;
  --charcoal-rule: #2E2B27;
  --lamp: #E0A23A;
  --lamp-glow: rgba(224, 162, 58, 0.45);

  --font-display: 'Libre Caslon Display', 'Libre Caslon Text', 'Times New Roman', serif;
  --font-serif: 'Libre Caslon Text', Georgia, serif;
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --gutter: 20px;
  --measure: none; /* the page runs the full width of the screen; gutters set the margins */
  --tap: 48px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--linen); color-scheme: light; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  background: var(--linen); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
/* Short pages keep the footer at the bottom of the window. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
button, input { font: inherit; color: inherit; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
[hidden] { display: none !important; }

/* Type roles. Display serif for what Porch says, sans for how it works, mono for chronology and origin notes. */
.display {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  letter-spacing: -0.012em; line-height: 1.08; color: var(--ink); text-wrap: balance;
}
.lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--lead); max-width: 52ch; text-wrap: pretty; }
.mono {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--lead);
}
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 1440px) { :root { --gutter: 64px; } }
.section { padding-block: 56px; }
.section + .section { border-top: 1px solid var(--rule); }

/* Masthead. The wordmark is typed, never an image. */
.masthead { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--linen) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.wordmark { display: inline-flex; align-items: flex-start; gap: 0.08em; font-family: var(--font-serif); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; line-height: 1; }
/* The porch light: the one mark Porch carries everywhere. */
.wordmark .lamp { width: 0.26em; height: 0.26em; margin-top: 0.1em; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0.45em var(--lamp-glow); }
.masthead-link { font-size: 14px; color: var(--ink); text-decoration: none; padding: 10px 0; }
.masthead-link:hover { color: var(--vermilion); }
.masthead-link:focus-visible, .footer-links a:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }

/* Placeholders. A flat vellum plate with the brief for the asset to come. Replace the whole element with the real print. */
.plate {
  position: relative; width: 100%; background: var(--vellum); overflow: hidden;
  display: flex; align-items: flex-end; padding: 16px;
}
.plate::before { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); pointer-events: none; }
.plate-note { display: grid; gap: 6px; }
.plate-note .mono { color: var(--ink); opacity: 0.55; }
.plate-note p { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 1.45; color: var(--lead); max-width: 34ch; }
.plate-4x5 { aspect-ratio: 4 / 5; }
.plate-3x2 { aspect-ratio: 3 / 2; }
.plate-16x9 { aspect-ratio: 16 / 9; }
.plate-square { aspect-ratio: 1; }

/* Prints. A photograph sits flat in its frame, cropped to the plate's ratio, no shadow, no tilt. */
.print { width: 100%; height: auto; object-fit: cover; background: var(--vellum); }
.print-4x5 { aspect-ratio: 4 / 5; }
.print-3x2 { aspect-ratio: 3 / 2; }
.print-16x9 { aspect-ratio: 16 / 9; }
.artifact-figure { margin: 0; display: grid; gap: 12px; }
/* Credit: one light line under a print, linking to the archive page. */
.credit { margin: 0; }
.credit a { text-decoration: none; color: var(--lead); }
.credit a:hover { color: var(--vermilion); }
.credit a:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }
.mat .credit { padding-top: 14px; }
.reel-credit { margin-top: 12px; }

/* Section 1: the hero. The copy sits in the gutter; the photograph stands on its own and runs to the edge of the screen. */
.hero { padding-block: 40px 0; }
.hero .wrap { display: grid; gap: 36px; padding-inline: 0; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; padding-inline: var(--gutter); }
.hero-title { font-size: clamp(42px, 11.5vw, 112px); line-height: 1.02; letter-spacing: -0.02em; }
.hero-note { margin: 0; }
.hero-figure { margin: 0; display: grid; gap: 12px; }
.hero-print { aspect-ratio: 4 / 5; width: 100%; }
.hero-figure .credit { padding: 0 var(--gutter) 24px; }
.mat { margin: 0; background: #FAF8F3; padding: 24px; }
.mat .plate, .mat img { width: 100%; }

/* Forms. TextInput plus one carbon button. */
.signup { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .mono { color: var(--lead); }
.field input {
  width: 100%; height: var(--tap); padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 0; background: #FFFFFF; color: var(--ink);
  outline: none; transition: border-color 120ms ease;
}
.field input::placeholder { color: var(--lead); opacity: 1; }
.field input:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px #fff inset; }
.button {
  height: var(--tap); padding: 0 24px; border: 1px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--ivory); font-weight: 500; font-size: 15px; letter-spacing: 0.01em;
  cursor: pointer; transition: background 120ms ease;
}
.button:hover { background: #2A2724; }
.button:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
.button[disabled] { opacity: 0.6; cursor: default; }
.signup-note, .signup-done, .signup-error, .signup-invalid { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--lead); }
.signup-done { color: var(--ink); }
.signup-error, .signup-invalid { color: var(--vermilion-text); }
.field input[aria-invalid="true"] { border-color: var(--vermilion); }

/* Section 2: the reel. A museum mat around a 16:9 archival frame. */
.reel-mat { background: var(--vellum); padding: 16px; }
.reel-frame { position: relative; aspect-ratio: 16 / 9; background: #DED8CC; overflow: hidden; }
.reel-frame video { width: 100%; height: 100%; object-fit: cover; }
.reel-frame .plate { position: absolute; inset: 0; }
/* The stills reel: every image stacked, one shown at a time, swapped by landing.js with no transition. */
.reel-stills { position: absolute; inset: 0; }
.reel-stills img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.reel-stills img.is-on { opacity: 1; }
.reel-caption { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.reel-caption .display { font-size: clamp(26px, 3.4vw, 36px); }

/* Section 3: the cadence. Sticky index on the left, three cards on the right. */
.cadence .wrap { display: grid; gap: 40px; }
.cadence-index { display: flex; flex-direction: column; gap: 12px; }
.cadence-index .display { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; }
.cadence-index .display + .display { color: var(--lead); }
.cadence-stages { display: flex; flex-direction: column; background: var(--card); }
.card { border-top: 1px solid var(--rule); padding: 28px 24px; display: grid; gap: 20px; }
.card:first-child { border-top: 0; }
.card-body { display: grid; gap: 12px; align-content: start; }
.card-title { font-size: clamp(24px, 2.6vw, 30px); }
.card p { margin: 0; color: var(--lead); line-height: 1.6; text-wrap: pretty; }
.artifact { display: grid; gap: 12px; }
.artifact-caption { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 720px) { .artifact-caption { flex-direction: row; justify-content: space-between; gap: 12px; } }

/* Waveform: clean black lines, no chrome. */
.wave { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.wave-play {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink); background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
.wave-play:hover, .wave-play:focus-visible { background: var(--ink); color: var(--card); outline: none; }
.wave-body { display: grid; gap: 8px; min-width: 0; }
.wave-bars { display: flex; align-items: center; gap: 3px; height: 36px; }
.wave-bars i { flex: 1 0 2px; max-width: 3px; height: var(--h, 40%); background: var(--ink); opacity: 0.85; }
.wave-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.wave-label span:first-child { font-family: var(--font-serif); font-size: 15px; color: var(--ink); }
.ledger { display: grid; gap: 0; }
.ledger div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.ledger div:last-child { border-bottom: 1px solid var(--rule); }
.ledger .mono { color: var(--ink); }

/* The strip: three frames on black inside a museum mat. */
.strip-mat { background: var(--vellum); padding: 20px; }
.strip-film { background: #0E0D0C; padding: 12px; display: grid; gap: 12px; }
.strip-film img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #1A1816; }
.strip-credits { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
@media (min-width: 720px) {
  .strip-mat { padding: 40px 48px; }
  .strip-film { grid-template-columns: repeat(3, 1fr); padding: 18px; gap: 18px; }
}

/* Section 4: the live hour. An evening room: copy on the left, the hour's timeline on the right. */
.sunday { background: var(--charcoal); color: var(--ivory); border-top: 0; padding-block: 64px; }
@media (min-width: 720px) { .sunday { padding-block: 96px; } }
.sunday .wrap { display: grid; gap: 48px; }
.sunday .display { color: var(--ivory); }
.sunday .lede { color: var(--ivory-2); }
.sunday .mono { color: var(--ochre); }
.sunday-head { display: grid; gap: 24px; max-width: 640px; align-content: start; }
.sunday-head > .mono { color: var(--vermilion); }
.sunday-head .display { font-size: clamp(32px, 3.6vw, 52px); }
.hour { min-width: 0; }
.hour-ruler { position: relative; height: 66px; margin-bottom: 6px; }
.hour-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(to right, #4A4540 0 1px, transparent 1px 9px); }
.hour-days { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 18px; display: grid; grid-template-columns: repeat(7, 1fr); }
.hour-days li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory-2); opacity: 0.7; }
.hour-days li:last-child { color: var(--ivory); opacity: 1; }
.hour-mark { position: absolute; right: 0; bottom: 0; display: grid; justify-items: end; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vermilion); white-space: nowrap; }
.hour-mark::after { content: ""; width: 2px; height: 34px; background: var(--vermilion); }
.hour-days li:last-child { padding-right: 14px; text-align: right; }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--charcoal-rule); }
.entry { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--charcoal-rule); }
.entry .time { color: var(--vermilion); padding-top: 3px; }
.entry-body { display: grid; gap: 14px; min-width: 0; }
.entry-line { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ivory); text-wrap: pretty; }
.entry-line .who { color: var(--ivory-2); }
.entry-photo { gap: 16px; }
.entry-photo .print { width: 100%; max-width: 320px; aspect-ratio: 3 / 2; background: #262320; }
.entry-side { display: grid; gap: 8px; align-content: center; }
.entry .credit a { color: var(--ivory-2); }
.entry .credit a:hover { color: var(--ochre); }
.wave-boxed { background: #221F1C; border: 1px solid var(--charcoal-rule); padding: 12px 16px; }
.entry .wave-play { border-color: var(--ivory); color: var(--ivory); width: 40px; height: 40px; }
.entry .wave-play:hover, .entry .wave-play:focus-visible { background: var(--ivory); color: var(--charcoal); }
.entry .wave-bars i { background: var(--ivory); opacity: 0.7; }
.entry .wave-label .mono { color: var(--ivory-2); font-size: 10.5px; }

/* Section 5: the bound volume. */
.volume .wrap { display: grid; gap: 40px; }
.volume-copy { display: grid; gap: 20px; align-content: center; }
.volume-copy .display { font-size: clamp(32px, 4.4vw, 50px); }

/* Footer. */
.site-footer { border-top: 1px solid var(--rule); padding-block: 32px 40px; }
.site-footer .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
@media (min-width: 720px) { .site-footer .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } }
.footer-links a { font-size: 13.5px; color: var(--lead); text-decoration: none; }
.footer-links a:hover { color: var(--vermilion); }
.site-footer .mono { font-size: 11px; }

/* Wider rooms. */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .section { padding-block: 96px; }
  .card { padding: 32px; grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); column-gap: 40px; align-items: start; }
  .card-body { grid-column: 1; }
  .artifact { grid-column: 2; }
  .card-wide .artifact { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 24px; }
  .reel-mat { padding: 24px; }
  .reel-caption { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
}
@media (min-width: 960px) {
  :root { --gutter: 48px; }
  .hero { padding-block: 0; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: stretch; }
  .hero-copy { gap: 28px; justify-content: center; padding: 64px 0 64px var(--gutter); }
  .hero-title { font-size: clamp(56px, 5.8vw, 112px); }
  .hero-copy .lede { font-size: 19px; max-width: 46ch; }
  .hero-print { aspect-ratio: auto; height: clamp(560px, 90vh, 1000px); }
  .hero-figure { padding-top: 0; }
  .hero-figure .credit { padding: 0 var(--gutter) 20px 0; text-align: right; }
  .cadence .wrap { grid-template-columns: 1fr 1.35fr; gap: 72px; align-items: start; }
  .cadence-index { position: sticky; top: 108px; }
  .sunday .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 72px; align-items: start; }
  .hour { border-left: 1px solid var(--charcoal-rule); padding-left: 40px; }
  .entry-photo { grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 24px; }
  .volume .wrap { grid-template-columns: 1.15fr 1fr; gap: 72px; }
}

/* The Porch Archive: where the photographs come from. */
.archive-head { display: grid; gap: 20px; max-width: 720px; }
.archive-head .display { font-size: clamp(34px, 5vw, 56px); }
.archive-head .lede p { margin: 0 0 12px; }
.archive-grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 40px 32px; }
.archive-item { margin: 0; display: grid; gap: 14px; scroll-margin-top: 80px; }
.archive-item figcaption { display: grid; gap: 4px; }
.archive-title { font-family: var(--font-serif); font-size: 17px; color: var(--ink); }
.archive-meta { font-size: 14px; color: var(--lead); }
.archive-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.archive-links a { text-decoration: none; color: var(--lead); }
.archive-links a:hover { color: var(--vermilion); }
.archive-links a:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }
.archive-note { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); max-width: 62ch; font-size: 14.5px; line-height: 1.6; color: var(--lead); }
.archive-note a { color: var(--ink); }
@media (min-width: 720px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }

/* Document pages: what is a porch, support, privacy. One column of reading. */
.doc .wrap { max-width: 720px; margin: 0; padding-block: 56px 80px; }
.doc h1.display { font-size: clamp(36px, 5vw, 56px); margin-bottom: 20px; }
.doc h2 { margin: 36px 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); }
.doc p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; color: var(--lead); text-wrap: pretty; }
.doc ul { margin: 0 0 14px; padding-left: 20px; }
.doc li { margin: 0 0 8px; font-size: 16.5px; line-height: 1.6; color: var(--lead); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .meta { font-size: 14px; color: var(--lead); }
.doc .doc-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 32px; }
.support-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.support-link:hover { text-decoration-color: var(--vermilion); }
.philosophy { display: flex; flex-direction: column; gap: 40px; }
.philosophy-block { margin: 0; }
.philosophy h1, .philosophy h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -0.012em; color: var(--ink); }
.philosophy p { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.65; color: var(--lead); text-wrap: pretty; }
@media (min-width: 720px) { .doc .wrap { padding-block: 80px 112px; } .philosophy { gap: 56px; } }