/* Page shell shared by every page: base styles, navigation bar, footer.
   Tokens come from tokens.css. Rules: site-design-system.md §2, §3, §8. */

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

html {
  overflow-x: clip;                     /* never a sideways scroll (Hallmark Floor 34) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
  background: var(--bg);
}

body {
  overflow-x: clip;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--nav-h);            /* room for the fixed navigation bar */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-weight);
  letter-spacing: var(--tracking-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3 { margin: 0; }
strong { font-weight: var(--emphasis-weight); color: var(--ink); }
img, svg, video { display: block; max-width: 100%; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Content column: max 1280 including the side gutters, centred. */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The first section of every page fills the first screen (viewport minus the nav). */
.page {
  flex: 1 0 auto;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}

/* Page entrance (§3): hidden before the first paint while page-enter.js prepares the fade. */
html.pe [data-page-enter] { opacity: 0; }

/* ---------- Squircle shapes (drawn by /assets/js/squircle.js) ---------- */
.sq { position: relative; isolation: isolate; }
.sq > svg.sq-shape {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}
.sq > svg.sq-shape path { fill: none; }

/* ---------- Skip link (keyboard only) ---------- */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--button-size);
  line-height: var(--button-lh);
  font-weight: var(--button-weight);
  transform: translateY(-64px);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Navigation bar ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--bg);               /* solid; no glass */
}
/* No line at the top of the page; a 1px rule fades in once the page is scrolled. */
.site-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity 200ms ease;
}
.site-nav.is-scrolled::after { opacity: 1; }
.site-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
}
.site-nav__name {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: var(--name-size);
  line-height: var(--name-lh);
  font-weight: var(--name-weight);
  letter-spacing: var(--tracking-display-small);
  color: var(--ink);
  white-space: nowrap;
  border-radius: 4px;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav__link {
  position: relative;
  display: block;
  padding: 6.5px 14px;                 /* 36px tall pill */
  border-radius: 999px;                /* full pill: stays a plain radius */
  font-size: var(--nav-size);
  line-height: var(--nav-lh);
  font-weight: var(--nav-weight);
  letter-spacing: var(--tracking-small);
  color: var(--ink-2);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--spring-press-dur) var(--spring-press);
}
/* Taller hit area for fingers without changing the pill. */
.site-nav__link::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}
.site-nav__link[aria-current="page"] {
  background: var(--nav-selected);
  color: var(--ink);
  font-weight: var(--nav-weight-selected);
}
@media (hover: hover) {
  .site-nav__link:hover { color: var(--ink); }
}
.site-nav__link:active,
.theme-toggle:active {
  transform: scale(.96);
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}

/* Theme toggle: 40×40 icon button, radius 12 squircle. */
.theme-toggle {
  flex: none;
  width: 40px; height: 40px;
  margin: 0 -10px 0 4px;               /* the icon, not the button edge, lines up with the content edge */
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--spring-press-dur) var(--spring-press);
}
.theme-toggle:focus-visible { outline: none; }      /* ring is drawn on the squircle path */
.theme-toggle > svg.sq-shape .hover { fill: var(--surface); opacity: 0; transition: opacity 120ms ease; }
.theme-toggle > svg.sq-shape .ring  { stroke: var(--accent); stroke-width: 4; opacity: 0; }
.theme-toggle:focus-visible > svg.sq-shape .ring { opacity: 1; }
@media (hover: hover) {
  .theme-toggle:hover { color: var(--ink); }
  .theme-toggle:hover > svg.sq-shape .hover { opacity: 1; }
}

/* Sun ⇄ moon morph, driven by --is-dark (0 light, 1 dark) on the state spring:
   the rays retract, the disc grows, and a crescent cut slides in from the top right. */
.theme-toggle__icon { width: 20px; height: 20px; overflow: visible; }
.theme-toggle__disc,
.theme-toggle__rays,
.theme-toggle__cut {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition:
    transform var(--spring-state-dur) var(--spring-state),
    opacity var(--spring-state-dur) var(--spring-state);
}
.theme-toggle__disc { fill: currentColor; transform: scale(calc(1 + .7 * var(--is-dark))); }
.theme-toggle__rays {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(calc(var(--is-dark) * -45deg)) scale(calc(1 - .65 * var(--is-dark)));
  opacity: calc(1 - var(--is-dark));
}
.theme-toggle__cut {
  transform: translate(calc((1 - var(--is-dark)) * 12px), calc((1 - var(--is-dark)) * -10px));
}

/* ---------- Back link "← All Work": project pages and the 404 page (§5) ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-radius: 4px;
  font-size: var(--meta-size);
  line-height: 24px;
  font-weight: var(--meta-weight-strong);
  letter-spacing: var(--tracking-small);
  color: var(--ink-2);
}
.back-link svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--spring-press-dur) var(--spring-press);
}
@media (hover: hover) {
  .back-link:hover { color: var(--ink); }
  .back-link:hover svg { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .back-link svg { transition: none; }
  .back-link:hover svg { transform: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  flex: none;
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  color: var(--ink-3);
  font-size: var(--meta-size);
  line-height: var(--meta-lh);
  font-weight: var(--meta-weight);
  letter-spacing: var(--tracking-small);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.site-footer__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-footer__link {
  position: relative;
  display: block;
  border-radius: 4px;
}
.site-footer__link::after {           /* taller hit area */
  content: "";
  position: absolute;
  inset: -10px -8px;
}
@media (hover: hover) {
  .site-footer__link:hover { color: var(--ink); }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 639.98px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__links { gap: 24px; }
}
@media (max-width: 479.98px) {
  .site-nav__list { gap: 0; }
  .site-nav__link { padding-inline: 10px; }
  .theme-toggle { margin-left: 0; }
}
/* Guard for very small phones (under 360 wide), so the bar never overflows. */
@media (max-width: 359.98px) {
  :root { --gutter: 16px; --name-size: 20px; }
  .site-nav__link { padding-inline: 8px; }
}

/* ---------- Reduce motion: no morph travel or press scale, a short fade instead ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-nav__link, .theme-toggle { transition: none; }
  .site-nav__link:active, .theme-toggle:active { transform: none; }
  .theme-toggle__disc, .theme-toggle__cut { transition: none; }
  .theme-toggle__rays { transition: opacity 200ms ease; transform: none; }
}