/* =========================================================
   Digital Axon Studio
   Mobile-first: base styles are for phones, the 48rem (768px)
   media queries add the wider layouts. Colors, type and spacing
   all live in :root so they can be changed in one place.
   ========================================================= */

:root {
  /* Light colors. Ratios are contrast against the background
     (WCAG AA needs 4.5:1 for text). Button text uses the background
     color, so it gets the same ratio as the accent. */
  --light-bg: #ffffff;
  --light-ink: #1c1915;            /* 17.5:1  main text, borders */
  --light-ink-soft: #5a524a;       /*  7.7:1  secondary text */
  --light-accent: #b3301c;         /*  6.3:1  links, buttons */
  --light-accent-strong: #8f2412;  /*  8.7:1  hover */
  --light-rule-soft: #d8d3cc;      /* thin dividers only, never text */

  /* Dark colors */
  --dark-bg: #171513;
  --dark-ink: #f0ebe3;             /* 15.4:1 */
  --dark-ink-soft: #b3aa9f;        /*  8.0:1 */
  --dark-accent: #ff7a63;          /*  7.1:1 */
  --dark-accent-strong: #ffa08f;   /*  9.3:1 */
  --dark-rule-soft: #3a352f;

  /* Colors in use: light by default, switched to dark further down */
  color-scheme: light;
  --bg: var(--light-bg);
  --ink: var(--light-ink);
  --ink-soft: var(--light-ink-soft);
  --accent: var(--light-accent);
  --accent-strong: var(--light-accent-strong);
  --rule-soft: var(--light-rule-soft);
  --on-accent: var(--bg);

  /* Type */
  --font-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-h3: 1.375rem;
  --text-h2: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  --text-h1: clamp(3rem, 1.6rem + 7vw, 6.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* Layout */
  --gutter: 1.25rem;
  --max-width: 68rem;
  --header-h: 4.25rem;
  --border: 2px solid var(--ink);
  --ease: 160ms ease-out;
}

/* Dark mode: the toggle sets data-theme on <html>.
   With no choice saved, follow the device's setting. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--dark-bg);
  --ink: var(--dark-ink);
  --ink-soft: var(--dark-ink-soft);
  --accent: var(--dark-accent);
  --accent-strong: var(--dark-accent-strong);
  --rule-soft: var(--dark-rule-soft);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--dark-bg);
    --ink: var(--dark-ink);
    --ink-soft: var(--dark-ink-soft);
    --accent: var(--dark-accent);
    --accent-strong: var(--dark-accent-strong);
    --rule-soft: var(--dark-rule-soft);
  }
}


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

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-wrap: break-word;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { max-width: 62ch; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--ease), text-decoration-color var(--ease);
}

a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }

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

::selection { background: var(--accent); color: var(--on-accent); }

section[id] { scroll-margin-top: var(--header-h); }

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  top: -10rem;
  left: var(--gutter);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { top: var(--space-2); color: var(--bg); }

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}


/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--ease), border-color var(--ease);
}

.btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}

.btn .icon { transition: transform var(--ease); }
.btn:hover .icon-down { transform: translateY(3px); }

.btn-small {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}


/* ---------- Header + nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: var(--border);
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin-right: auto;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand:hover { color: var(--accent); }

.brand-avatar {
  width: 40px;
  height: 40px;
  border: var(--border);
  object-fit: cover;
}

/* Without JS both buttons stay hidden and the links just sit on their own row */
.nav-toggle,
.theme-toggle { display: none; }

.site-nav { width: 100%; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* With JS: dark mode button everywhere, plus hamburger + drop-down panel on small screens.
   The header stays one row; on very narrow phones the site name wraps instead. */
.js .header-bar { flex-wrap: nowrap; }

.js .nav-toggle,
.js .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  border: var(--border);
  cursor: pointer;
}

.js .nav-toggle:hover,
.js .theme-toggle:hover { color: var(--accent); }

.nav-toggle .icon,
.theme-toggle .icon { width: 24px; height: 24px; }

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline; }

/* moon while light, sun while dark */
.theme-toggle .icon-sun,
.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: inline; }

.js .site-nav {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: var(--border);
}

.js .site-nav.is-open { display: block; }

.js .site-nav ul {
  flex-direction: column;
  gap: 0;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-2) var(--gutter) var(--space-4);
}

.js .site-nav li + li { border-top: 1px solid var(--rule-soft); }
.js .site-nav a { min-height: 52px; font-size: var(--text-lg); }

@media (min-width: 48rem) {
  .header-bar { flex-wrap: nowrap; }
  .brand { font-size: 1.125rem; }

  .js .nav-toggle { display: none; }

  .site-nav,
  .js .site-nav {
    display: block;
    position: static;
    width: auto;
    margin-right: var(--space-4);
    background: none;
    border: 0;
  }

  .site-nav ul,
  .js .site-nav ul {
    flex-direction: row;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
  }

  .js .site-nav li + li { border: 0; }
  .js .site-nav a { min-height: 44px; font-size: inherit; }
}


/* ---------- Intro / hero ---------- */

.hero { padding-block: var(--space-7) var(--space-8); }

.hero-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hero h1 { font-size: var(--text-h1); }

.hero-aside {
  display: block;
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}

.hero-intro {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
}

.hero .btn { margin-top: var(--space-6); }

.hero-photo {
  justify-self: start;
  width: min(14rem, 70%);
  transform: rotate(-2deg);
  transition: transform 240ms ease-out;
}

.hero-photo:hover { transform: rotate(0deg); }

.hero-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--border);
}

.hero-photo figcaption,
.error-code {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.error-code { margin: 0 0 var(--space-3); }

@media (min-width: 48rem) {
  .hero { padding-block: var(--space-9); }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
  }

  .hero-photo {
    justify-self: end;
    width: clamp(14rem, 26vw, 20rem);
  }
}


/* ---------- Sections ---------- */

.section {
  padding-block: var(--space-8);
  border-top: var(--border);
}

.section-title {
  margin-bottom: var(--space-6);
  font-size: var(--text-h2);
}

/* "Nothing here yet" lines, shown until real items are added */
.empty {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}


/* ---------- Stuff (project list) ---------- */

.entries {
  padding: 0;
  list-style: none;
  counter-reset: entry;
}

.entry {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule-soft);
  counter-increment: entry;
}

.entry:first-child {
  padding-top: 0;
  border-top: 0;
}

.entry-media img,
.entry-media video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: var(--border);
}

.entry-meta {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Auto-numbering: 01 / , 02 / ... (second line hides it from screen readers where supported) */
.entry-meta::before {
  content: counter(entry, decimal-leading-zero) " / ";
  content: counter(entry, decimal-leading-zero) " / " / "";
  color: var(--accent);
}

.entry-title {
  margin-block: var(--space-2) var(--space-3);
  font-size: var(--text-h3);
}

.entry-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-2);
  font-weight: 700;
}

@media (min-width: 48rem) {
  .entry {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-7);
    align-items: start;
  }
}


/* ---------- Downloads (file list) ---------- */

.files {
  padding: 0;
  list-style: none;
}

.file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "info info"
    "meta action";
  gap: var(--space-3) var(--space-5);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule-soft);
}

.file:first-child { border-top: var(--border); }

.file-info { grid-area: info; }
.file-name { font-size: var(--text-h3); }
.file-desc { margin-top: var(--space-1); }

.file-meta {
  grid-area: meta;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.file .btn { grid-area: action; }

@media (min-width: 48rem) {
  .file {
    grid-template-columns: minmax(0, 1fr) 10rem auto;
    grid-template-areas: "info meta action";
  }
}


/* ---------- About ---------- */

.about-grid {
  display: grid;
  gap: var(--space-6);
}

.about-text p + p { margin-top: var(--space-4); }

.fact {
  align-self: start;
  padding: var(--space-5);
  border: var(--border);
}

.fact-label {
  margin-bottom: var(--space-2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .about-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-8);
  }

  /* line the box up with the first paragraph instead of the heading */
  .fact { margin-top: calc(var(--text-h2) * 1.05 + var(--space-6)); }
}


/* ---------- Contact ---------- */

.contact-lead { font-size: var(--text-lg); }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 700;
}


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

.site-footer { border-top: var(--border); }

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.footer-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* =========================================================
   HOLIDAYS
   js/theme.js sets data-holiday="..." on <html> on the right
   dates. Each holiday below can swap the accent colors (light
   and dark versions), add text to the photo caption and show
   one of the hats drawn in index.html.
   Preview one with ?holiday=halloween at the end of the URL.
   ========================================================= */

:root[data-holiday="halloween"] {
  --light-accent: #b03f0a;  --light-accent-strong: #8a3107;   /* 5.9:1 / 8.3:1 */
  --dark-accent: #ff8f3f;   --dark-accent-strong: #ffb27a;    /* 8.0:1 / 10.3:1 */
  --caption: "spooky edition";
}

:root[data-holiday="christmas"] {
  --light-accent: #1e6b44;  --light-accent-strong: #154f32;   /* 6.5:1 / 9.6:1 */
  --dark-accent: #5ccb8b;   --dark-accent-strong: #8fddb0;    /* 9.0:1 / 11.4:1 */
  --caption: "festive edition";
}

:root[data-holiday="newyear"] {
  --light-accent: #866000;  --light-accent-strong: #684a00;   /* 5.7:1 / 8.2:1 */
  --dark-accent: #e9bc4c;   --dark-accent-strong: #f3d488;    /* 10.2:1 / 12.7:1 */
  --caption: "new year edition";
}

:root[data-holiday="valentines"] {
  --light-accent: #c0215f;  --light-accent-strong: #961849;   /* 5.8:1 / 8.3:1 */
  --dark-accent: #ff7fae;   --dark-accent-strong: #ffa8c9;    /* 7.7:1 / 10.1:1 */
  --caption: "valentine edition";
}

:root[data-holiday="stpatricks"] {
  --light-accent: #167a3b;  --light-accent-strong: #10602e;   /* 5.4:1 / 7.7:1 */
  --dark-accent: #62d38d;   --dark-accent-strong: #98e2b3;    /* 9.7:1 / 12.0:1 */
  --caption: "lucky edition";
}

:root[data-holiday="aprilfools"] {
  --caption: "upside-down edition";
}

.hero-photo figcaption::after { content: var(--caption, ""); display: block; }

[data-holiday="aprilfools"] .photo-frame img,
[data-holiday="aprilfools"] .brand-avatar { transform: rotate(180deg); }

/* Hats: drawn in index.html, hidden until their holiday */
.photo-frame { position: relative; }

.hat {
  display: none;
  position: absolute;
  top: var(--hat-top);
  left: var(--hat-left, 50%);
  width: var(--hat-size);
  height: auto;
  overflow: visible;
  transform: translateX(-50%) rotate(var(--hat-tilt, 8deg));
  pointer-events: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.hat * { vector-effect: non-scaling-stroke; }
.hat-accent { fill: var(--accent); }

.hat-witch  { --hat-size: 60%; --hat-top: -43%; --hat-left: 56%; --hat-tilt: 10deg; }
.hat-santa  { --hat-size: 58%; --hat-top: -42%; --hat-left: 50%; --hat-tilt: -6deg; }
.hat-party  { --hat-size: 46%; --hat-top: -33%; --hat-left: 58%; --hat-tilt: 12deg; }
.hat-tophat { --hat-size: 52%; --hat-top: -36%; --hat-left: 48%; --hat-tilt: -8deg; }
.hat-heart  { --hat-size: 30%; --hat-top: -9%;  --hat-left: 88%; --hat-tilt: 14deg; }

[data-holiday="halloween"] .hat-witch,
[data-holiday="christmas"] .hat-santa,
[data-holiday="newyear"] .hat-party,
[data-holiday="stpatricks"] .hat-tophat,
[data-holiday="valentines"] .hat-heart { display: block; }

/* the tall hats need room above the photo */
[data-holiday="halloween"] .photo-frame,
[data-holiday="christmas"] .photo-frame,
[data-holiday="newyear"] .photo-frame,
[data-holiday="stpatricks"] .photo-frame { margin-top: 38%; }


/* ---------- Reduced motion: no transitions, no smooth scrolling ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn:hover .icon-down { transform: none; }
}