/* =========================================================================
   Mike Garrity, portfolio
   One centered column. Typography is the design.
   Two deliberate themes sharing one custom-property system.
   ========================================================================= */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --measure: 60ch;          /* max line length */
  --step: 1.6rem;           /* base rhythm unit  */

  /* Hue shared by both themes; only luminance shifts. */
  --accent-h: 222;
}

/* Light: cool neutral gray (matches blog #e7e7e7), near-black ink */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e7e7e7;
  --ink: #1a1a1c;
  --ink-soft: #55565a;
  --rule: #cbcbcd;
  --accent: hsl(var(--accent-h) 58% 44%);
  --accent-soft: hsl(var(--accent-h) 58% 44% / 0.32);
  --selection: hsl(var(--accent-h) 58% 44% / 0.14);
  --body-weight: 400;
  --body-tracking: 0;
}

/* Dark: cool neutral charcoal, off-white text (not an inversion) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161618;
  --ink: #e8e8ea;
  --ink-soft: #93959b;
  --rule: #2e2e32;
  --accent: hsl(var(--accent-h) 66% 71%);
  --accent-soft: hsl(var(--accent-h) 66% 71% / 0.40);
  --selection: hsl(var(--accent-h) 66% 71% / 0.18);
  /* Keep body weight/tracking identical to light so toggling never reflows */
  --body-weight: 400;
  --body-tracking: 0;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Vertically center the content block in the viewport; on overflow the
     flex item's auto margins collapse and it falls back to top-aligned flow. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1.5rem, 5vw, 3rem);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-tracking);
  line-height: 1.7;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.4s ease, color 0.4s ease;
}

::selection { background: var(--selection); }

/* ---- Layout ------------------------------------------------------------- */
.page {
  max-width: var(--measure);
  width: 100%;
  /* Centered both ways: horizontal via auto inline margins, vertical via
     auto block margins on the flex column. If content ever exceeds the
     viewport, the auto margins collapse and it falls back to normal flow. */
  margin-inline: auto;
  margin-block: auto;
}

/* ---- Intro -------------------------------------------------------------- */
.name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(2.75rem, 1.9rem + 4.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0;
}

.role {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.3;
  margin: 0.75rem 0 0;
}

.lede {
  margin: calc(var(--step) * 1.5) 0 0;
  max-width: 56ch;
}

/* ---- Links list --------------------------------------------------------- */
.links { margin-top: calc(var(--step) * 2.4); }
.links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.links li {
  display: flex;
  gap: 1.25rem;
  padding: 0.28rem 0;
}
.link-key {
  flex: 0 0 5.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

/* ---- Selected work ------------------------------------------------------ */
.work { margin-top: calc(var(--step) * 2.4); }
.work-soon {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.125rem;
  margin: 0;
}

/* Styling reserved for future project entries (see index.html comment) */
.projects { list-style: none; margin: 0; padding: 0; }
.project { padding: 0.4rem 0; }
.project a { font-weight: 500; }
.project-desc { display: block; color: var(--ink-soft); font-size: 0.9375rem; }

/* ---- The one signature interaction: link underline wipe ----------------- */
/* Two stacked underlines: a resting muted rule, and an accent rule that
   wipes in left-to-right on hover/focus as the text shifts to the accent. */
a {
  color: inherit;
  text-decoration: none;
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--ink-soft), var(--ink-soft));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: background-size 250ms ease-out, color 250ms ease-out;
}
a:hover,
a:focus-visible {
  color: var(--accent);
  background-size: 100% 1px, 100% 1px;
}

/* External-link arrow: follows the link's color, no motion of its own */
.ext-arrow {
  display: inline-block;
  margin-left: 0.18em;
  font-size: 0.72em;
  color: var(--ink-soft);
  vertical-align: 0.28em;
  transition: color 250ms ease-out;
}
a.external:hover .ext-arrow,
a.external:focus-visible .ext-arrow {
  color: var(--accent);
}

/* ---- Theme toggle ------------------------------------------------------- */
.theme-toggle-wrap {
  position: fixed;
  top: clamp(1.1rem, 3vw, 1.75rem);
  right: clamp(1.1rem, 3vw, 1.75rem);
  z-index: 10;
}
.theme-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0.35rem 0.15rem;
  transition: color 0.3s ease;
}
.theme-toggle:hover { color: var(--accent); }

/* ---- Focus -------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Links already carry a clear hover/focus underline; keep outline tight */
a:focus-visible { outline-offset: 4px; }

/* ---- Signature reveal on load ------------------------------------------- */
/* Children rise and sharpen in sequence rather than the block blurring in
   as one piece; small stagger reads as deliberate, not decorative. */
.reveal > * {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(8px);
  animation: reveal 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.reveal > *:nth-child(1) { animation-delay: 40ms; }
.reveal > *:nth-child(2) { animation-delay: 140ms; }
.reveal > *:nth-child(3) { animation-delay: 240ms; }
@keyframes reveal {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ---- Motion & small screens -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal > * { opacity: 1; filter: none; transform: none; animation: none; }
}

@media (max-width: 460px) {
  .links li { flex-direction: column; gap: 0.05rem; padding: 0.45rem 0; }
  .link-key { flex-basis: auto; }
}