/* =========================================================
   kebrvr.com
   Same look as digitalaxonstudio.com, trimmed down to a
   one-page bio. Mobile-first; colors, type and spacing 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, hover fill */
  --light-accent-strong: #8f2412;  /*  8.7:1 */

  /* 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 */

  /* 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);
  --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;

  /* 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;

  /* 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);
}

@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);
  }
}


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

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  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, svg { display: block; max-width: 100%; }
img { height: auto; }

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: 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); }

.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;
}

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


/* ---------- Header ---------- */

.site-header {
  background: var(--bg);
  border-bottom: var(--border);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

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

/* Without JS the dark mode button can't work, so it stays hidden */
.theme-toggle { display: none; }

.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 .theme-toggle:hover { color: var(--accent); }
.theme-toggle .icon { width: 24px; height: 24px; }

/* 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; }


/* ---------- Profile ---------- */

.profile {
  flex: 1;
  max-width: 34rem;
  padding-block: var(--space-7) var(--space-8);
  text-align: center;
}

.avatar {
  width: 12rem;
  margin-inline: auto;
  transform: rotate(-2deg);
  transition: transform 240ms ease-out;
}

.avatar:hover { transform: rotate(0deg); }

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

.avatar 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); }

.handle {
  margin-top: var(--space-5);
  font-size: clamp(3rem, 2rem + 6vw, 4.5rem);
}

.bio {
  max-width: 26ch;
  margin: var(--space-3) auto 0;
  font-size: var(--text-lg);
  line-height: 1.4;
}

@media (min-width: 48rem) {
  .profile { padding-block: var(--space-8); }
  .avatar { width: 14rem; }
}


/* ---------- Links ---------- */

.links {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
  text-align: left;
}

.link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  border: var(--border);
  text-decoration: none;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}

.link-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
}

.link-handle {
  margin-left: auto;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition: color var(--ease);
}

a.link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

a.link:hover .link-handle { color: var(--on-accent); }


/* ---------- Button (404 page) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent);
  font-weight: 700;
  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);
}


/* ---------- 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";
}

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

[data-holiday="aprilfools"] .avatar img { 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 ---------- */

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