/* Absolute paths: Trunk emits this file hashed at the root (/main-<hash>.css)
   while assets/ is copied verbatim, so relative imports would not resolve. */
@import "/assets/css/tokens.css";
@import "/assets/css/fonts.css";
@import "/assets/css/nav.css";
@import "/assets/css/custom.css";

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

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

html {
  font-family: var(--font-sans);
  /* Derive the root size from the cap height so one variable scales the page */
  font-size: calc(var(--cap-height) * 16 / 12.5);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
  line-height: var(--line-height);
  overflow-wrap: break-word;
}

/* Skip link — first tab stop, visible only when focused */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--field-inverse);
  color: var(--ink-inverse);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--step);
}

/* A single, consistent focus ring everywhere. Never remove it. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

main {
  flex: 1;
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: calc(var(--step) * 5) calc(var(--step) * 8);
}

/* Every page is a section; they are routed now, not toggled with :target */
section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 3.5);
}

/* ---------------------------------------------------------------------------
   Type
   --------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.1;
  text-wrap: balance;
  letter-spacing: -0.022em;
}

h1 {
  font-size: calc(var(--cap-height) * 3.2);
  font-weight: 700;
}

h2 {
  font-size: calc(var(--cap-height) * 2);
  font-weight: 600;
  margin-top: calc(var(--step) * 3);
}

h3 {
  font-size: calc(var(--cap-height) * 1.5);
  font-weight: 600;
}

h4 {
  font-size: calc(var(--cap-height) * 1.2);
  font-weight: 600;
}

p {
  margin: 0;
  max-width: 34rem;
  text-wrap: pretty;
}

/* Lead paragraph: the sentence right after the h1 */
h1 + p,
h1 + h3 {
  font-size: calc(var(--cap-height) * 1.35);
  font-weight: 400;
  line-height: 1.4;
}

strong {
  font-weight: 600;
}

small,
.meta {
  font-family: var(--font-mono);
  font-size: calc(var(--cap-height) * 0.95);
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Links — no blue, no underline-by-default. A border carries the affordance,
   matching the flat structural stance.
   --------------------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--rule);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

a:hover {
  border-bottom-color: var(--ink);
}

/* Anything that is a block or a control should not inherit the text border */
a:has(> img),
a:has(> iframe),
a.button,
.nav-link,
.social-link {
  border-bottom: none;
}

/* ---------------------------------------------------------------------------
   Buttons / calls to action — the field/ink pair, inverted.
   --------------------------------------------------------------------------- */

.button,
button,
[role="button"],
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--rule-strong);
  border-radius: 0;
  background: var(--field-inverse);
  color: var(--ink-inverse);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.button:hover,
button:hover,
[role="button"]:hover {
  opacity: 0.85;
}

/* Secondary: outline only, sits on the field */
.button--ghost {
  background: transparent;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Lists
   --------------------------------------------------------------------------- */

ul,
ol {
  margin: 0;
  padding-left: 1.25rem;
}

li {
  margin-block: 0.35rem;
}

/* Unstyled list used for link indexes (talks, goals) */
.list-unstyled {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.list-unstyled > li {
  margin: 0;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.list-unstyled > li:last-child {
  border-bottom: none;
}

/* Link rows need the full tap target */
.list-unstyled > li > a {
  display: block;
  min-height: var(--target);
  display: flex;
  align-items: center;
  border-bottom: none;
}

.list-unstyled > li > a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---------------------------------------------------------------------------
   Timeline — the "what have I been doing" year list
   --------------------------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.timeline > li {
  display: flex;
  gap: 0.875rem;
  margin: 0;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.timeline > li:last-child {
  border-bottom: none;
}

.timeline .year {
  flex-shrink: 0;
  width: 2.5rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--cap-height) * 1.05);
}

/* ---------------------------------------------------------------------------
   Media
   --------------------------------------------------------------------------- */

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

img,
iframe,
embed,
video {
  display: block;
  max-width: 100%;
  height: auto;
  border: 2px solid var(--rule-strong);
}

/* Video embeds keep their ratio without a fixed pixel height */
.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

figcaption {
  font-family: var(--font-mono);
  font-size: calc(var(--cap-height) * 0.95);
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Code
   --------------------------------------------------------------------------- */

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  border: 2px solid var(--rule-strong);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

footer {
  border-top: 2px solid var(--rule-strong);
  padding: calc(var(--step) * 4) var(--gutter);
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--target);
  padding-inline: 0.875rem;
  border: 2px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: calc(var(--cap-height) * 0.95);
}

.social-link:hover {
  background: var(--field-inverse);
  color: var(--ink-inverse);
}

.social-link svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.colophon {
  font-family: var(--font-mono);
  font-size: calc(var(--cap-height) * 0.9);
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------------- */

/* Visually hidden but reachable by assistive tech. The old .sr-only used
   opacity/pointer-events, which leaves the text in the layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}