/*
 * Home page styles for timothyjordan.com.
 * Tokens (color, type, spacing) live in tokens.css.
 *
 * Layout: chrome → bio block (with journal-tipped photograph) on a
 * paper-tinted dot-grid substrate, contact line at the bottom.
 * Reference: PRODUCT.md, DESIGN.md.
 */

/* ----------------------------------------------------------- Base */

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html { height: 100%; }

body {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Flex column so .home (the main element) can stretch to fill the
   * remaining viewport, which lets the dot-grid run all the way to
   * the bottom of the window even when content is short. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.home { flex: 1; }

p { margin: 0 0 var(--space-5); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
  line-height: 1.15;
  font-weight: 500;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover, a:focus {
  color: var(--accent-deep);
  text-decoration-thickness: 2px;
}

em, i { font-style: italic; }
strong, b { font-weight: 600; }

::selection {
  background: var(--accent-wash);
  color: var(--ink);
}

/* Global focus ring per DESIGN.md: 2px solid --accent at 2px offset
 * on every interactive element. Uses :focus-visible so it appears for
 * keyboard nav but not for mouse clicks (modern browsers handle this). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

/* ----------------------------------------------------------- Chrome */

.tj-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-3) 0;
  font-family: var(--font-sans);
}

.tj-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
}

/* Home page omits the wordmark (the masthead name in the page body
 * already establishes identity). Push the nav to the right edge so
 * its position is consistent with other pages. */
.tj-header--no-wordmark .tj-header-inner {
  justify-content: flex-end;
}

.tj-wordmark {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.005em;
}

.tj-wordmark:hover, .tj-wordmark:focus { color: var(--accent); }

.tj-nav {
  display: flex;
  gap: var(--space-5);
}

.tj-nav-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
}

.tj-nav-link:hover, .tj-nav-link:focus { color: var(--accent); }
.tj-nav-link.is-active { color: var(--accent); }

@media (max-width: 480px) {
  .tj-header-inner { flex-wrap: wrap; gap: var(--space-3); }
  .tj-nav { gap: var(--space-4); }
}

/* ----------------------------------------------------------- Skip */

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--paper);
  color: var(--accent);
  text-decoration: underline;
  border-bottom: 1px solid var(--accent);
}

.skip-to-content:focus {
  left: 8px;
  top: 8px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------- Home main */

.home {
  position: relative;
  padding: var(--space-8) 0 var(--space-9);
  background: var(--paper);
}

/* Dot-grid substrate. Pure CSS via radial-gradient; the dot is
 * --rule color at ~0.4 opacity baked into the gradient. The grid
 * covers the entire .home surface so it reads as a continuous
 * paper substrate with no blank gutters above or below the content.
 * Fades in over 600ms once on first paint; reduced-motion users
 * skip the animation. */

.home::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 1px 1px,
    oklch(78% 0.014 85 / 0.45) 1px,
    transparent 1.6px
  );
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  animation: home-grid-fade-in 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes home-grid-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .home::before { animation: none; }
}

/* Cursor warp. The gradient above is never replaced: it stays in the
 * scrolling content so it scrolls and rubber-bands with the page like part of
 * the paper. /js/dot-warp.b0d9edd7.js rides a small canvas above it, following the
 * pointer and repainting only the dots that actually move. Positioned inside
 * .home so the host's own paper background does not cover it, and clipped to
 * the host at draw time to keep dots off the header and footer. */

/* Exactly the host's box, so it adds no scrollable overflow, and it clips the
 * canvas so the canvas cannot either. Without this the canvas hangs past the
 * edge when the cursor is near one, raising scrollbars and then running away
 * as scrolling drags it further out. */
.dot-warp-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  animation: home-grid-fade-in 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dot-warp-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .dot-warp-layer { display: none; }
}

@media print {
  .dot-warp-layer { display: none; }
}

.home-grid {
  position: relative;
  z-index: 1;
}

.home-grid-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ----------------------------------------------------------- Intro */

/* The name sits at the top of the right-hand column, beside the floated
 * portrait and above the masthead statement, left-aligned to lock to it. */
.home-intro {
  margin: 0;
  text-align: left;
}

.home-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(44px, 5.6vw, 64px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

/* ----------------------------------------------------------- Lead (figure + quote)
 *
 * The home page leads with the journal-tipped photograph floated left and a
 * short mission quote flowing to its right, the same shape the bio used to
 * have. The long bio now lives on /about/. */

.home-lead {
  max-width: var(--measure);
  margin: 0 auto;
}

.journal-figure {
  margin: 0;
  padding: 0;
}

.journal-figure picture,
.journal-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.journal-figure img {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}

/* Mobile (<640px): full-width above the quote. */
@media (max-width: 639px) {
  .journal-figure {
    max-width: 320px;
    margin: 0 auto var(--space-6);
  }
}

/* Tablet (640–959px): left-aligned block, ~240px. */
@media (min-width: 640px) and (max-width: 959px) {
  .journal-figure {
    float: left;
    width: 240px;
    margin: 0 var(--space-5) var(--space-5) 0;
    shape-outside: margin-box;
  }
}

/* Desktop (≥960px): floated left alongside the quote, ~280px. */
@media (min-width: 960px) {
  .journal-figure {
    float: left;
    width: 280px;
    margin: 0 var(--space-7) var(--space-6) 0;
    shape-outside: margin-box;
  }
  .home-lead { max-width: 960px; }
}

/* Clearfix so the featured/contact blocks sit cleanly below the float. */
.home-lead::after {
  content: "";
  display: block;
  clear: both;
}

/* ----------------------------------------------------------- Quote */

.home-quote {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
  margin: var(--space-5) 0 0;
  padding: 0;
  border: 0;
}

.home-quote p { margin: 0 0 var(--space-4); }
.home-quote p:last-child { margin-bottom: 0; }

.home-quote-link {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: var(--space-4) 0 0;
}

/* Stacked masthead links sit close together. */
.home-quote-link + .home-quote-link {
  margin-top: var(--space-2);
}

.home-quote-link a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}

.home-quote-link a:hover, .home-quote-link a:focus {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ----------------------------------------------------------- Columns
 *
 * Below the lead, two columns: featured writing on the left, contact
 * links on the right. A single hairline rule separates the pair from the
 * quote above. They stack to one column on narrow screens. */

.home-columns {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  max-width: var(--measure);
  margin: var(--space-7) auto 0;
}

@media (min-width: 960px) {
  .home-columns { max-width: 960px; }
}

@media (max-width: 539px) {
  .home-columns {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Quiet column captions, in the metadata register (sentence case, not a
 * shouty all-caps eyebrow). */
.home-col-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin: 0 0 var(--space-4);
}

/* Left column: featured writing (serif titles, no dek). */
.home-featured-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-featured-list li {
  margin: 0 0 var(--space-3);
}

.home-featured-list li:last-child {
  margin-bottom: 0;
}

.home-featured-list a {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.home-featured-list a:hover, .home-featured-list a:focus {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Right column: contact links, stacked one per line. Quiet by default,
 * accent underline on hover (no five persistent rules). */
.home-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-social-list li {
  margin: 0 0 var(--space-3);
}

.home-social-list li:last-child {
  margin-bottom: 0;
}

.home-social-list a {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.home-social-list a:hover, .home-social-list a:focus {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ----------------------------------------------------------- About page
 *
 * The About page renders through the content-page template. A portrait
 * floats beside the opening bio, and the press kit is a quiet disclosure. */

.about-portrait {
  float: right;
  width: 200px;
  max-width: 40%;
  margin: 0 0 var(--space-5) var(--space-6);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}

@media (max-width: 539px) {
  .about-portrait {
    float: none;
    display: block;
    margin: 0 auto var(--space-5);
    max-width: 60%;
  }
}

.press-kit {
  clear: both;
  margin: var(--space-7) 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--rule);
}

.press-kit > summary {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
}

.press-kit > summary:hover {
  color: var(--accent);
}

.press-kit[open] > summary {
  margin-bottom: var(--space-4);
}

/* ----------------------------------------------------------- Content pages
 *
 * Long-form pages (e.g. /glossary/) rendered from src/*.md through the
 * page template. They live in the same paper-tinted dot-grid substrate
 * as the home page (.home + .home-grid + .home-grid-inner), so the
 * visual language reads continuous between Home and any secondary page.
 * Distinct from the home page only via the .home--content modifier
 * (slightly tighter padding) and a different intro block. */

.home--content {
  padding: var(--space-7) 0 var(--space-8);
}

/* The page intro is the masthead for content pages — kicker, oversized
 * serif title, italic lede. Sits inside .home-grid-inner. Capped at
 * --measure so it aligns with the article body that follows. Title is
 * intentionally one notch smaller than the home-page name so the home
 * hero remains the visual anchor across the site. */
.page-intro {
  max-width: var(--measure);
  margin: 0 auto var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

/* Bare intro: just the page title, no lede and no dividing rule. */
.page-intro--bare {
  margin-bottom: var(--space-6);
  padding-bottom: 0;
  border-bottom: 0;
}

.page-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  color: var(--ink);
}

.page-lede {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
}

/* Body type for content pages — same reading-column treatment as
 * .home-bio (serif, --measure cap), with section h2s carrying a
 * hairline rule above so long entries (like the glossary) read like a
 * proper outline rather than a wall of definitions. */
.page-article {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure);
  margin: 0 auto;
}

.page-article h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.005em;
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  color: var(--ink);
}

.page-article h2:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.page-article h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  margin: var(--space-5) 0 var(--space-2);
  color: var(--ink);
}

.page-article p {
  margin: 0 0 var(--space-4);
}

.page-article ul,
.page-article ol {
  margin: 0 0 var(--space-4) var(--space-5);
  padding: 0;
}

.page-article li {
  margin-bottom: var(--space-2);
}

.page-article code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-deep);
  padding: 1px 4px;
  border-radius: var(--radius-1);
}

.page-article pre {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  padding: var(--space-4);
  overflow-x: auto;
  margin: 0 0 var(--space-5);
}

.page-article pre code {
  background: transparent;
  padding: 0;
}

.page-article blockquote {
  border-left: 2px solid var(--rule-strong);
  padding-left: var(--space-4);
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 var(--space-5);
}

/* ------------------------------------------------------------ Footer
 *
 * Footer for content pages (and any future surface that needs a unified
 * footer). Mirrors the .home-contact treatment from the home page —
 * sans-serif, soft ink, hairline-underlined links separated by middle
 * dots — but stacked into two rows: primary nav, then a quieter "for
 * agents" row. */

.tj-footer {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-align: center;
  padding: var(--space-7) var(--space-5) var(--space-6);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.tj-footer p {
  margin: 0 auto;
  max-width: var(--measure);
}

.tj-footer-links {
  margin-bottom: var(--space-3) !important;
}

.tj-footer-meta {
  color: var(--ink-faint);
  font-size: 12px;
}

.tj-footer-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: var(--space-2);
}

.tj-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}

.tj-footer a:hover,
.tj-footer a:focus {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tj-footer-meta a {
  color: var(--ink-faint);
}

.tj-footer span[aria-hidden="true"] {
  margin: 0 var(--space-2);
  color: var(--ink-faint);
}

@media (min-width: 960px) {
  .tj-footer p { max-width: 960px; }
}