/* The blog after getartcraft.com's homepage (owner's reference): its two
   palettes (a light :root and a dark set under html[data-theme="dark"],
   switched from the bar and stored with the site's `theme`), 49px ruled
   navigation, Archivo wordmark, Geist Mono "HUD" labels, a ticker, ruled
   1280px frames with corner ticks, sticky section eyebrows and a ruled
   footer grid. Surfaces are tokens, so a hard-coded colour is what breaks
   a palette: shadows and translucent fills mix from --bg. */
:root {
  color-scheme: light;
  --bg: #f2f1ee;
  --bg-raised: #faf9f7;
  --bg-sunken: #e9e8e4;
  --ink: #101014;
  --ink-strong: #000;
  --muted: rgba(16, 16, 20, 0.62);
  --faint: rgba(16, 16, 20, 0.42);
  --line: rgba(16, 16, 20, 0.16);
  --line-strong: rgba(16, 16, 20, 0.4);
  --accent: #2d81ff;
  --accent-ink: #1659c4;
  --invert-bg: #101014;
  --invert-fg: #f2f1ee;
  /* Light turntables share the page tone; dark keeps its separate plate.
     render-clips.mjs uses these exact values. */
  --card: #f2f1ee;
  --nav-h: 48px; /* the reference's h-12 bar, its rule below */
  --frame: 1280px;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121316;
  --bg-raised: #101014;
  --bg-sunken: #060607;
  --ink: #f2f1ee;
  --ink-strong: #fff;
  --muted: rgba(242, 241, 238, 0.6);
  --faint: rgba(242, 241, 238, 0.38);
  --line: rgba(242, 241, 238, 0.15);
  --line-strong: rgba(242, 241, 238, 0.4);
  --accent: #2d81ff;
  --accent-ink: #74aaff;
  --invert-bg: #fff;
  --invert-fg: #0b0b0c;
  --card: #28292c;
}
/* A switch crossfades the surfaces for 400ms (blog.js sets the class). */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 400ms, color 400ms, border-color 400ms, fill 400ms, stroke 400ms !important;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* The reference's label style, used for every small caption. */
.hud-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Navigation: one ruled row, each item a cell. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; height: var(--nav-h); align-items: stretch; }
.nav-left, .nav-links { display: flex; align-items: stretch; min-width: 0; }
.nav-logo {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-right: 1px solid var(--line);
}
.nav-logo:hover { opacity: 0.7; }
.brand-mark { display: block; flex: none; color: var(--ink); overflow: visible; }
.nav-links a {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--muted);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.nav-links a span { padding: 2px 6px; }
.nav-links a:hover { color: var(--ink); }
.nav-links a span, .nav-menu summary span, .theme-toggle, .nav-mobile summary { transition: background-color 120ms linear, color 120ms linear; } /* the reference's invert-block */
.nav-links a:hover span, .nav-links a[aria-current="page"] span { background: var(--invert-bg); color: var(--invert-fg); }
.nav-links a[aria-current="page"] { color: var(--ink); }
/* Navigation menus: the summary is drawn as a link; the panel hangs under the
   bar as a ruled column of the same labels. */
.nav-menu { position: relative; display: flex; }
.nav-menu summary {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span { display: flex; align-items: center; gap: 6px; padding: 2px 6px; }
.nav-menu summary:hover, .nav-menu[open] summary, .nav-menu summary[aria-current="location"] { color: var(--ink); }
.nav-menu summary:hover span, .nav-menu[open] summary span, .nav-menu summary[aria-current="location"] span { background: var(--invert-bg); color: var(--invert-fg); }
.nav-menu summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.nav-chevron { transition: transform 150ms; }
.nav-menu[open] .nav-chevron { transform: rotate(180deg); }
.nav-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top: 0;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nav-links .nav-menu-panel a { padding: 12px 16px; border-top: 1px solid var(--line); }
.nav-links .nav-menu-panel a:first-child { border-top: 0; }
/* The appearance switch: the reference's icon cell at the bar's right. */
.nav-right { display: flex; align-items: stretch; margin-left: auto; }
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--invert-bg); color: var(--invert-fg); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* The menu cell for narrow bars: the reference's hamburger, a native
   disclosure whose panel hangs under the bar with the same links. */
.nav-mobile { display: none; position: relative; }
.nav-mobile summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 100%;
  border-left: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary:hover, .nav-mobile[open] summary { background: var(--invert-bg); color: var(--invert-fg); }
.nav-mobile summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.nav-mobile summary svg { width: 20px; height: 20px; }
.nav-mobile-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nav-mobile-panel a {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.nav-mobile-panel a:first-child { border-top: 0; }
.nav-mobile-panel a:hover, .nav-mobile-panel a[aria-current="page"] { color: var(--ink); }

/* Reveal: with JavaScript, marked blocks rise as they enter the view, as
   the reference's do; blog.js adds .is-revealed, and after 3s to everything
   still pending. Without JavaScript nothing is hidden. */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Hero: the wordmark alone, a viewport tall minus the bar. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--nav-h));
  padding: 40px 24px;
  text-align: center;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 42rem; container-type: inline-size; }
/* Sized to the text block (a container), one line at every width. */
.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 125%;
  font-size: 17.8cqw;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink-strong);
  text-transform: uppercase;
  text-shadow: 0 0 0.6vw color-mix(in srgb, var(--bg) 92%, transparent), 0 0.25vw 2.4vw color-mix(in srgb, var(--bg) 78%, transparent), 0 0.4vw 5vw color-mix(in srgb, var(--bg) 55%, transparent);
}
.hero-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 28px 0 0; color: var(--faint); }
/* The featured article on the cover: a framed post card under the notes. */
.hero-feature { width: 100%; margin-top: 56px; border: 1px solid var(--line); text-align: left; animation: rise 420ms 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-feature video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.hero-feature h2 { margin: 0; font-family: var(--font-display); font-weight: 620; font-stretch: 118%; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink-strong); }
/* The reference's right-hand section index: a ruler of ticks numbered by
   fives, the section names beneath it. */
.hero-index {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 41;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  margin: 0;
  text-align: right;
  color: var(--faint);
}
.hero-index span { display: block; line-height: 1.6; }
.hero-ruler { display: block; width: 28px; height: 180px; color: var(--line-strong); }
.hero-ruler line { stroke: currentColor; stroke-width: 1; }
.hero-ruler text { fill: var(--faint); font-family: var(--font-mono); font-size: 9px; }

/* The wordmark forms letter by letter on load (blog.js wraps the letters):
   each rises over 520ms, 45ms after the one before, and without JavaScript
   the word simply stands. */
.wm-letter { display: inline-block; }
.js .wordmark.is-forming .wm-letter { animation: wm-in 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes wm-in { from { opacity: 0; transform: translateY(0.18em); } }

/* Ticker: identical tracks, each at least the window's width, all slid by
   one track width so the loop is seamless. */
.marquee { display: flex; overflow-x: auto; border-top: 1px solid var(--line); }
.marquee-track {
  min-width: 100%;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
}
.marquee.is-ready { overflow: hidden; }
.marquee.is-ready .marquee-track { animation: marquee-scroll 36s linear infinite; }
.marquee:focus-within { overflow-x: auto; }
.marquee:focus-within .marquee-track { animation: none; }
.marquee:focus-within .marquee-track[aria-hidden="true"] { display: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { display: flex; }
.marquee-track a {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-track a::before { content: '\25AA'; margin-right: 24px; color: var(--accent-ink); }
.marquee-track a:hover { color: var(--ink); }
@keyframes marquee-scroll { to { transform: translateX(-100%); } }

/* Ruled frame with the corner ticks the reference draws at each section. */
.section { position: relative; border-top: 1px solid var(--line); }
.frame { position: relative; max-width: var(--frame); margin: 0 auto; border-inline: 1px solid var(--line); }
.tick { position: absolute; top: -5px; width: 11px; height: 11px; pointer-events: none; z-index: 31; }
.tick-left { left: -6px; }
.tick-right { right: -5px; }
.tick::before, .tick::after { content: ''; position: absolute; background: var(--line-strong); }
.tick::before { top: 5px; bottom: 0; left: 5px; width: 1px; }
.tick::after { top: 5px; left: 0; right: 0; height: 1px; }

/* Section eyebrow: numbered label on the left, a note on the right, stuck
   under the bar while the section scrolls. */
.eyebrow {
  position: sticky;
  top: var(--nav-h);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 40px;
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--muted);
}
.eyebrow p { margin: 0; }
.eyebrow-slash { margin: 0 8px; }
.section-head { padding: 80px 40px; }
.display {
  margin: 0;
  max-width: 48rem;
  font-family: var(--font-display);
  font-weight: 620;
  font-stretch: 118%;
  font-size: 3.75rem;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink-strong);
}
.display em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; }

/* Post card: a bar of labels over the body (the cover's featured card). */
.post-card { background: var(--bg); }
.post-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 32px; border-bottom: 1px solid var(--line); color: var(--muted); }
.post-bar p { margin: 0; }
.post-body { padding: 24px 32px; }
.post-body p { margin: 8px 0 0; max-width: 36rem; line-height: 1.6; }
.post-body a:hover { color: var(--muted); }

/* Footer: a ruled grid of columns, then the copyright bar. */
.site-footer { border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1px; background: var(--line); }
.footer-grid > * { background: var(--bg); padding: 32px; }
.footer-brand { padding: 40px; }
.footer-brand p { margin: 16px 0 0; max-width: 20rem; line-height: 1.6; }
.footer-brand a { display: inline-block; margin-top: 24px; }
.footer-brand a:hover, .footer-col a:hover { color: var(--ink); }
.footer-col p { margin: 0; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.footer-col a { color: var(--muted); }
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  border-top: 1px solid var(--line);
}
.footer-bar p { margin: 0; }

/* Entrance: the hero's lines rise as the reference's do; nothing is hidden
   without the animation, so a JS-off or reduced-motion page is complete. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.wordmark { animation: rise 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-notes { animation: rise 420ms 120ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .wordmark, .hero-notes, .hero-feature { animation: none; }
  .js .wordmark.is-forming .wm-letter { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .marquee.is-ready .marquee-track { animation: none; }
  .marquee.is-ready { overflow-x: auto; }
  .marquee-track[aria-hidden="true"] { display: none; }
}

/* The ticks mark the frame's corners; once the frame meets the window edge
   they would only poke past it. */
@media (max-width: 1292px) { .tick { display: none; } }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Narrow bars: the links fold into the menu cell, as the reference's do. */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-mobile { display: flex; }
  .nav-right { flex: none; }
  .theme-toggle { width: 44px; }
  .hero-index { right: 16px; bottom: 24px; }
}
@media (max-width: 640px) {
  .nav-logo { padding: 0 16px; }
  .nav-links a, .nav-menu summary { padding: 0 6px; font-size: 0.625rem; }
  .nav-links .nav-menu-panel a { padding: 12px 16px; }
  .hero { padding: 40px 16px 72px; }
  .eyebrow-right { display: none; }
  .post-bar, .post-body { padding-inline: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > * { padding: 24px; }
  .footer-bar { padding: 16px 24px; }
}

@media print {
  /* html[data-theme="dark"] too: its tokens outrank :root, so the dark page
     would otherwise print dark. Every token the dark block sets is reset. */
  :root, html[data-theme="dark"] { color-scheme: light; --bg: #fff; --bg-raised: #fff; --bg-sunken: #fff; --ink: #000; --ink-strong: #000; --muted: #444; --faint: #666; --line: #ccc; --line-strong: #999; --accent: #2d81ff; --accent-ink: #1659c4; --invert-bg: #101014; --invert-fg: #f2f1ee; --card: #fff; }
  .site-nav, .marquee, .hero-index, .tick { display: none; }
  .hero { min-height: 0; padding: 40px 24px; }
  .wordmark { text-shadow: none; animation: none; }
  .hero-notes, .hero-feature { animation: none; }
  .hero-feature video { display: none; }
  .eyebrow { position: static; backdrop-filter: none; background: none; }
}

/* Reference breakpoints: 36 / 48 / 60px display, 24 / 40px frame insets. */
@media (max-width: 767px) {
  .display { font-size: 3rem; }
  .section-head { padding: 56px 24px; }
  .eyebrow { padding-inline: 24px; }
}
@media (max-width: 639px) { .display { font-size: 2.25rem; } }