/* levhicks.com — shared base styles
 *
 * Tokens, reset, typography, and common components used across the site.
 * Page-specific layout stays inline in each page's <style>.
 */

/* Self-hosted Atkinson Hyperlegible Next — variable font, regular + bold
 * served from the same file via font-weight axis. Latin + latin-ext subsets. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/ahn-upright-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/ahn-upright-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ahn-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ahn-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display — display serif for headings (upright + italic, latin) */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/playfair-upright-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/playfair-italic-latin.woff2') format('woff2');
}

/* Maple Mono — monospace for code blocks (regular + bold) */
@font-face {
  font-family: 'Maple Mono NF';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/maple-mono-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Maple Mono NF';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/maple-mono-bold.woff2') format('woff2');
}

:root {
  --bg:      #F5F0E8;
  --fg:      #2B241B;
  --muted:   #5A5347;
  --green:    #3D6B3E;
  --gold:     #7A6020;
  --gold-hi:  #B8922E;

  --font-sans:  'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono:  'Maple Mono NF', ui-monospace, 'SF Mono', Menlo, monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10vw 2rem 8rem 10%;
}

main {
  max-width: 640px;
  width: 100%;
}

/* Short, deliberate, left-anchored accent rule */
.rule {
  width: 2rem;
  height: 2px;
  background: var(--green);
  margin-bottom: 1.75rem;
}

/* "← Home" style back link (muted, underline-on-hover) */
.back-link {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  margin-bottom: 2rem;
  background-image: linear-gradient(var(--muted), var(--muted));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease;
}

.back-link:hover,
.back-link:focus-visible {
  background-size: 100% 1px;
  outline: none;
}

.back-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Gold uppercase nav-style links (landing + project links) */
.links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.links a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  display: inline-block;
  padding: 0.2rem 0;
  background-image: linear-gradient(var(--gold-hi), var(--gold-hi));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease, color 0.15s ease;
}

.links a + a { margin-top: 0.5rem; }

.links a:hover,
.links a:focus-visible {
  color: var(--gold-hi);
  background-size: 100% 1.5px;
  outline: none;
}

.links a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Tagline: muted subhead under h1 */
.tagline {
  color: var(--muted);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  margin-bottom: 2.5rem;
}

/* h1 — used on every page */
h1 {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

/* .display — opt-in serif heading (landing + post titles) */
.display {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Inline + block monospace — Maple Mono, globally applied */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

pre {
  font-family: var(--font-mono);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* Threshold mark — landing page only, above h1 */
.site-mark {
  display: block;
  width: 48px;
  height: 72px;
  margin-bottom: 1.5rem;
  animation: mark-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mark-in {
  from {
    opacity: 0;
    transform: scaleX(0.92);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.site-mark { transform-origin: left center; }

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

/* ─── Dark mode ─────────────────────────────────────────────────── */
/* Near-monochrome. Accents desaturate to cream so links read by weight
   and underline, not chroma. Avoids the mid-century black+yellow trap. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14110D;
    --fg:        #E8E1D2;
    --muted:     #8A8578;
    --green:     #4F6B4F;
    --gold:      #C9BE9E;
    --gold-hi:   #F0E6C8;
  }
}