/* ==========================================================================
   site.css - design tokens + the Coming Soon composition.

   TOKENS ........ line ~14   (colors, type scale, spacing - edit here)
   LAYOUT ........ line ~95   (the page composition)
   MOTION ........ line ~165  (subtle, CSS-only, reduced-motion aware)
   FUTURE ........ line ~195  (ready-made styles for prose, links, media)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Type - system/local fonts only, so no third-party requests are made.
     To self-host a real webfont later, see CONTENT.md → "Changing the font". */
  --font-body:
    system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* Fluid type scale (12px floor) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12 → 14 */
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); /* 14 → 16 */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 */
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); /* 18 → 24 */
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); /* 24 → 36 */
  --text-headline: clamp(1.0625rem, 0.9rem + 0.9vw, 1.625rem); /* 17 → 26 */

  /* Spacing - 4px base unit */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Composition */
  --gutter: clamp(1.5rem, 6vw, 5rem); /* page margin + where the vertical rule sits */
  --plate-indent: clamp(1rem, 3vw, 2rem); /* distance from the vertical rule to the text */
  --content-narrow: 40rem;
  --radius-sm: 0.25rem;
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);

  /* Color - light mode (warm paper / ink, one restrained brass accent) */
  --color-bg: #f6f4f0;
  --color-text: #1a1917;
  --color-text-muted: #6b675f;
  --color-hairline: rgb(26 25 23 / 14%);
  --color-accent: #8a6a3c;
  --color-selection: rgb(138 106 60 / 18%);
}

/* Color - dark mode. Follows the visitor's OS setting; no JavaScript toggle,
   because this site intentionally ships zero JavaScript. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #131211;
    --color-text: #ece8e1;
    --color-text-muted: #97928a;
    --color-hairline: rgb(236 232 225 / 16%);
    --color-accent: #c9a878;
    --color-selection: rgb(201 168 120 / 22%);
  }
}

/* --------------------------------------------------------------------------
   2. LAYOUT: one screen, two words, a drawn grid.
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  /* The bottom row is heavier than the top so the content sits slightly
     above true center - the optical center of the viewport. */
  grid-template-rows: 1fr auto auto 1.14fr;
  padding: var(--gutter);
  overflow: hidden;
}

.plate {
  grid-row: 2;
  padding-left: var(--plate-indent);
}

.headline {
  font-size: var(--text-headline);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Drawn grid: a vertical rule on the page margin and a full-bleed horizontal
   rule under the headline. They meet at the text - the whole composition. */
.grid-line {
  background: var(--color-hairline);
}

.grid-line--vertical {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gutter);
  width: 1px;
  transform-origin: top center;
}

/* The closing margin. Fainter than the left rule, so the eye still starts left. */
.grid-line--vertical-end {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--gutter);
  width: 1px;
  background: var(--color-hairline);
  opacity: 0.55;
  transform-origin: bottom center;
}

.grid-line--horizontal {
  position: relative;
  grid-row: 3;
  height: 1px;
  /* full-bleed: cancel the stage padding on both sides */
  margin-inline: calc(-1 * var(--gutter));
  margin-top: clamp(var(--space-6), 3vw, var(--space-10));
  transform-origin: left center;
}

/* The single accent in the design: a short brass segment of the horizontal
   rule, aligned to the text above it. */
.grid-line--horizontal::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--gutter) + var(--plate-indent));
  width: clamp(2rem, 7vw, 3.5rem);
  height: 1px;
  background: var(--color-accent);
}

/* Anything placed below the horizontal rule (used by 404.html only). */
.postscript {
  grid-row: 4;
  align-self: start;
  padding-left: var(--plate-indent);
  margin-top: clamp(var(--space-5), 2.5vw, var(--space-8));
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  animation: rise 900ms var(--ease-out-quint) 420ms both;
}

.postscript a {
  display: inline-block;
  /* padding, not min-height, so the underline stays tight to the text while the
     tap target still clears 44px */
  padding-block: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-hairline);
  text-underline-offset: 0.4em;
}

.postscript a:hover,
.postscript a:focus-visible {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
}

@media (max-width: 30rem) {
  .headline {
    letter-spacing: 0.24em;
  }
}

/* Very short viewports (landscape phones): keep the composition breathing. */
@media (max-height: 26rem) {
  .stage {
    grid-template-rows: 1fr auto auto 1fr;
  }
}

/* --------------------------------------------------------------------------
   3. FUTURE - unused today, ready for when the site grows.
   Nothing below renders on the current page. See CONTENT.md.
   -------------------------------------------------------------------------- */

/* Body copy blocks (paragraphs about the owner, notes, an about page) */
.prose {
  max-width: 60ch;
  font-size: var(--text-base);
  color: var(--color-text);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin-top: var(--space-10);
}

/* Text links */
.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-hairline);
  text-underline-offset: 0.25em;
}

.link:hover,
.link:focus-visible {
  text-decoration-color: var(--color-accent);
}

/* Social / contact row - small caps, wide tracking, generous tap targets */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  list-style: none;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.links a {
  display: inline-block;
  padding-block: 0.85rem; /* keeps the tap target above 44px */
  color: var(--color-text-muted);
  text-decoration: none;
}

.links a:hover,
.links a:focus-visible {
  color: var(--color-text);
}

/* Images and GIFs: always set width/height in the HTML to avoid layout shift */
.media {
  margin-top: var(--space-8);
}

.media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--color-hairline);
}

.media figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}