/* ------------------------------------------------------------
   Paige Timmeny — personal site
   Black and white base, one flat orange accent, glass where it matters.
   ------------------------------------------------------------ */

/* ---------- theme tokens (dark is the default) ---------- */

:root {
  --bg: #000;
  --text: #fff;
  --text-2: rgba(255, 255, 255, 0.72);
  --text-3: rgba(255, 255, 255, 0.60);
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --fill: rgba(255, 255, 255, 0.05);
  --fill-2: rgba(255, 255, 255, 0.09);

  --accent: #FF6A3D;          /* underline, focus ring, active marks */
  --accent-fill: #FF6A3D;     /* filled buttons + tags */
  --accent-ink: #000;         /* text on the fill: 7.4:1 */
  --accent-text: #FF6A3D;     /* accent-coloured text: 7.4:1 on black */
  --accent-soft: rgba(255, 106, 61, 0.16);
  --accent-glow: rgba(255, 106, 61, 0.10);

  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  --glass-solid: #1C1C1E;
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-top: rgba(255, 255, 255, 0.22);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  --bar-bg: rgba(20, 20, 22, 0.72);
  --home-bg: rgba(255, 255, 255, 0.12);
  --home-glow: inset 0 0 28px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --photo-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.66) 100%);
  --polaroid: #f4f2ee;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F6F3EE;
    --text: #141414;
    --text-2: rgba(20, 20, 20, 0.72);
    --text-3: rgba(20, 20, 20, 0.60);
    --line: rgba(20, 20, 20, 0.10);
    --line-2: rgba(20, 20, 20, 0.18);
    --fill: rgba(20, 20, 20, 0.035);
    --fill-2: rgba(20, 20, 20, 0.06);
    --accent: #F2542D;
    --accent-fill: #C2401B;   /* #F2542D with white text is only 3.45:1, so filled controls go one step deeper (5.2:1) */
    --accent-ink: #fff;
    --accent-text: #B83A18;
    --accent-soft: rgba(242, 84, 45, 0.14);
    --accent-glow: rgba(242, 84, 45, 0.14);
    --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.45));
    --glass-solid: #FFFFFF;
    --glass-border: rgba(255, 255, 255, 0.70);
    --glass-top: #fff;
    --glass-shadow: inset 0 1px 0 #fff, 0 20px 40px -20px rgba(60, 40, 20, 0.18);
    --bar-bg: rgba(255, 255, 255, 0.62);
    --home-bg: #fff;
    --home-glow: inset 0 0 24px rgba(242, 84, 45, 0.08), 0 8px 24px -12px rgba(60, 40, 20, 0.25);
    --photo-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.74) 100%);
    --polaroid: #fff;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F6F3EE;
  --text: #141414;
  --text-2: rgba(20, 20, 20, 0.72);
  --text-3: rgba(20, 20, 20, 0.60);
  --line: rgba(20, 20, 20, 0.10);
  --line-2: rgba(20, 20, 20, 0.18);
  --fill: rgba(20, 20, 20, 0.035);
  --fill-2: rgba(20, 20, 20, 0.06);
  --accent: #F2542D;
  --accent-fill: #C2401B;
  --accent-ink: #fff;
  --accent-text: #B83A18;
  --accent-soft: rgba(242, 84, 45, 0.14);
  --accent-glow: rgba(242, 84, 45, 0.14);
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.45));
  --glass-solid: #FFFFFF;
  --glass-border: rgba(255, 255, 255, 0.70);
  --glass-top: #fff;
  --glass-shadow: inset 0 1px 0 #fff, 0 20px 40px -20px rgba(60, 40, 20, 0.18);
  --bar-bg: rgba(255, 255, 255, 0.62);
  --home-bg: #fff;
  --home-glow: inset 0 0 24px rgba(242, 84, 45, 0.08), 0 8px 24px -12px rgba(60, 40, 20, 0.25);
  --photo-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.74) 100%);
  --polaroid: #fff;
  color-scheme: light;
}

/* ---------- scale (rem, so the user's text size setting is respected) ---------- */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 9vw, 6rem);   /* 44–96px */
  --fs-title: clamp(2rem, 5vw, 3.5rem);      /* 32–56px */
  --fs-head: 1.375rem;                       /* 22px */
  --fs-body: 1.0625rem;                      /* 17px */
  --fs-cap: 0.875rem;                        /* 14px */
  --fs-min: 0.8125rem;                       /* 13px, the smallest text anywhere */

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --group: 64px;

  --gutter: 40px;
  --page: min(1120px, 100% - var(--gutter) * 2);
  --r-card: 28px;
  --r-inner: 16px;          /* concentric: 28 − 12 */
  --r-chip: 12px;

  --dur: 200ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: clip;
}

html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease) !important;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--accent-fill); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

.skip {
  position: absolute; left: var(--s2); top: -80px; z-index: 100;
  background: var(--accent-fill); color: var(--accent-ink);
  padding: 12px 16px; border-radius: 999px; font-weight: 600;
}
.skip:focus { top: calc(var(--s2) + env(safe-area-inset-top)); }

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

/* One large, soft, accent-tinted light behind the glass. Nothing else in the background. */
.light { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.light::before {
  content: ""; position: absolute; top: -260px; right: -220px; width: 600px; height: 600px; border-radius: 50%;
  background: var(--accent-glow); filter: blur(120px);
}

/* ---------- glass ---------- */

.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-top);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .nav.glass, .tabbar.glass { background: var(--glass-solid); border-color: var(--line-2); }
}

.label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-min); letter-spacing: 0.04em; color: var(--text-3);
}
.label svg { width: 20px; height: 20px; flex: none; color: var(--text-2); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 48px; padding: 0 var(--s3); border-radius: 999px;
  font-size: 1rem; font-weight: 600; line-height: 1;
  transition: transform 150ms var(--ease-out), filter 150ms var(--ease-out), background-color var(--dur) var(--ease);
}
.btn.primary { background: var(--accent-fill); color: var(--accent-ink); }
.btn.secondary { color: var(--text); font-weight: 500; }
.btn.ghost { min-height: 44px; border: 1px solid var(--line-2); color: var(--text); font-size: 0.9375rem; font-weight: 500; }
.btn.ghost:hover { background: var(--fill-2); }
/* press: scale + slight brightening (no ripples, no glow) */
.btn:active, .nav .cta:active, .copy:active, .scroll-btn:active, .theme-toggle:active, .channel:active, .text-link:active {
  transform: scale(0.98); filter: brightness(1.1);
}

/* ---------- top navigation ---------- */

.nav {
  position: fixed; z-index: 50;
  top: calc(var(--s2) + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100% - var(--s4)));
  display: flex; align-items: center; gap: var(--s1);
  padding: 6px;
  border-radius: 999px;
  transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.nav.glass, .tabbar.glass {
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.mark {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--text); color: var(--bg);
  font-weight: 700; font-size: var(--fs-min);
}
.nav .links { display: flex; gap: var(--s1); }
.nav .links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: var(--fs-cap); color: var(--text-2);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav .links a:hover { color: var(--text); }
.nav .links a[aria-current] { color: var(--text); background: var(--accent-soft); }
.clock {
  margin-left: auto; padding: 0 var(--s1);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-min); color: var(--text-3); white-space: nowrap;
}
.clock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.clock b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.theme-toggle {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 0; color: var(--text-2);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform 150ms var(--ease-out);
}
.theme-toggle:hover { color: var(--text); background: var(--fill-2); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
:root[data-resolved="light"] .theme-toggle .sun { display: none; }
:root[data-resolved="light"] .theme-toggle .moon { display: block; }
.nav .cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink);
  font-size: var(--fs-cap); font-weight: 600;
  transition: filter var(--dur) var(--ease), transform 150ms var(--ease-out);
}

.tabbar { display: none; }

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

.hero {
  min-height: min(100dvh, 900px);
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: var(--s5);
  padding: calc(var(--s8) + env(safe-area-inset-top)) 0 var(--s6);
}
.hero h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; font-weight: 650; }
.hero h1 .name { display: block; white-space: nowrap; }
.underline { position: relative; display: inline-block; }
.underline svg { position: absolute; left: -2%; bottom: -0.3em; width: 104%; height: 0.3em; overflow: visible; pointer-events: none; }
.underline path { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 0; }
.js .underline path { stroke-dashoffset: 260; animation: draw 700ms var(--ease-out) 250ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero .lede { margin-top: var(--s4); font-size: clamp(1.1875rem, 1.7vw, 1.375rem); line-height: 1.5; color: var(--text-2); max-width: 36ch; }
.hero .lede strong { color: var(--text); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--s4); }
.proof {
  display: flex; flex-wrap: wrap; gap: 6px var(--s3); margin-top: var(--s5);
  padding-top: var(--s2); border-top: 1px solid var(--line);
  font-size: var(--fs-cap); color: var(--text-3);
}
.proof b { color: var(--text); font-weight: 600; }

/* ---------- hero card ---------- */

.pass { justify-self: end; width: 100%; border-radius: var(--r-card); padding: var(--s3); }
.pass-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: var(--fs-min); color: var(--text-3); }
.pass-top .crest { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.pass-top .crest i {
  height: 24px; padding: 0 6px; border-radius: 7px; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--text); font-style: normal; font-weight: 600; font-size: var(--fs-min);
}
.pass-who { display: flex; align-items: center; gap: 18px; margin: var(--s3) 0 var(--s2); }
.polaroid {
  width: 76px; height: 76px; flex: none; padding: 4px;
  background: var(--polaroid); border-radius: 10px;
  transform: rotate(-3deg);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}
.polaroid .photo {
  width: 100%; height: 100%; border-radius: 6px; overflow: hidden;
  display: grid; place-items: end center;
  background: linear-gradient(160deg, #d9d6d0, #b9b5ae);
  color: rgba(255, 255, 255, 0.92);
}
.polaroid img { width: 100%; height: 100%; object-fit: cover; }
.pass-who h2 { font-size: var(--fs-head); letter-spacing: -0.01em; line-height: 1.2; }
.pass-who p { font-size: var(--fs-cap); color: var(--text-3); margin-top: 2px; }
.chips { display: flex; gap: 6px; }
.chips span {
  flex: 1; text-align: center; padding: 7px 0; border-radius: var(--r-chip);
  font-family: var(--mono); font-size: var(--fs-min); letter-spacing: 0.04em; color: var(--text-2);
  background: var(--fill); border: 1px solid var(--line);
}
.chips span.home { background: var(--accent-fill); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
.perf { position: relative; height: 1px; margin: var(--s3) calc(var(--s3) * -1) 0; background-image: linear-gradient(90deg, var(--line-2) 50%, transparent 50%); background-size: 8px 1px; }
.perf::before, .perf::after {
  content: ""; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--glass-border);
}
.perf::before { left: -11px; }
.perf::after { right: -11px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); padding-top: var(--s3); }
.fields dt { font-size: var(--fs-min); letter-spacing: 0.04em; color: var(--text-3); }
.fields dd { margin-top: 2px; font-size: 0.9375rem; line-height: 1.35; }

/* ---------- sections ---------- */

.block { padding-top: var(--s8); }
section.block { scroll-margin-top: calc(112px - var(--s8)); }   /* heading lands 112px from the top */
.head { margin-bottom: var(--s4); }
.head h2 { font-size: var(--fs-title); line-height: 1.08; letter-spacing: -0.022em; font-weight: 700; }
.sub { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s2); margin-bottom: var(--s2); }
.sub h3 { font-size: var(--fs-head); letter-spacing: -0.01em; line-height: 1.3; }
.sub p { font-size: 0.9375rem; color: var(--text-3); margin-top: 2px; }

.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- builds (glass cards, scroll sideways, tap to expand) ---------- */

.sub-tools { display: flex; gap: var(--s1); }
.scroll-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--fill); color: var(--text); border: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform 150ms var(--ease-out);
}
.scroll-btn:hover { background: var(--fill-2); }
.scroll-btn:disabled { opacity: 0.35; cursor: default; }
.scroll-btn svg { width: 16px; height: 16px; }

.builds-wrap { position: relative; }
.builds-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg)); transition: opacity var(--dur) var(--ease);
}
.builds-wrap.at-end::after { opacity: 0; }
.builds {
  display: flex; align-items: flex-start; gap: var(--s2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: 4px 4px var(--s3); margin: -4px -4px 0; scrollbar-width: none;
}
.builds::-webkit-scrollbar { display: none; }

.bcard {
  flex: 0 0 290px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 12px; border-radius: var(--r-card);
  transition: flex-basis 260ms var(--ease-out);
}
.bcard.is-open { flex-basis: 460px; }
.bcard h4 { margin: 0; }
.bcard .toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s1); width: 100%;
  min-height: 44px; padding: 0 4px 8px; margin: 0;
  font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.bcard .toggle::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.bcard .toggle:focus-visible { outline: none; }
.bcard .toggle:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.bcard .toggle:active { transform: none; }
.bcard:has(.toggle:active) { transform: scale(0.98); }
.bcard { transition: flex-basis 260ms var(--ease-out), transform 150ms var(--ease-out); }
.bcard .plus {
  width: 30px; height: 30px; padding: 7px; flex: none; border-radius: 50%;
  background: var(--fill-2); color: var(--text-2);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bcard.is-open .plus { transform: rotate(45deg); background: var(--accent-soft); color: var(--text); }
.bcard .pic {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-inner); overflow: hidden;
  background: var(--fill); border: 1px solid var(--line);
}
.bcard.is-open .pic { aspect-ratio: 16 / 10; }
.bcard .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* labels sit on the photo, so they use fixed light-on-dark colours in both themes */
.pic::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.66));
}
.pic .meta {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
  display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--fs-min); font-weight: 500; color: #fff;
}
.tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: var(--fs-min); font-weight: 600; line-height: 1;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tag.win { background: var(--accent-fill); color: var(--accent-ink); }
.bcard .sum { padding: 14px 4px 4px; font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
.bcard.is-open .sum { display: none; }
.bcard .extra { display: none; position: relative; z-index: 2; padding: 12px 4px 4px; }
.bcard.is-open .extra { display: block; }
.bcard .extra > p { font-size: 0.9375rem; color: var(--text-2); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); margin-bottom: 14px; }
.thumb {
  position: relative; display: block; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--fill); cursor: zoom-in; aspect-ratio: 4 / 3;
  transition: transform 150ms var(--ease-out), filter 150ms var(--ease-out), border-color var(--dur) var(--ease);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.thumb:hover { border-color: var(--line-2); }
.thumb:active { transform: scale(0.98); filter: brightness(1.1); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s3); margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: 0.9375rem; }
.facts dt { color: var(--text-3); }
.facts dd { color: var(--text-2); }
.text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px;
  font-size: 0.9375rem; font-weight: 500; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  transition: text-decoration-color var(--dur) var(--ease), transform 150ms var(--ease-out);
}
.text-link:hover { text-decoration-color: var(--accent); }
.text-link svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.text-link:hover svg, .text-link:active svg { transform: translate(2px, -2px); }
.more-note { font-size: var(--fs-cap); color: var(--text-3); }

/* ---------- flat lists: work, volunteering ---------- */

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--group); align-items: start; }
.list { border-top: 1px solid var(--line); }
.item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.item .top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.item b { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; }
.item time { font-size: var(--fs-cap); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item .role { display: block; font-size: var(--fs-cap); color: var(--text-3); }
.item p { font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); margin-top: 6px; max-width: 52ch; }

/* ---------- flat rows: education (title + role | description | date) ---------- */

.learned { margin-top: var(--group); }
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr) 120px; gap: var(--s4);
  align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.row .title b { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.35; }
.row .title span { display: block; font-size: var(--fs-cap); color: var(--text-3); margin-top: 2px; }
.row .desc p { font-size: 0.9375rem; color: var(--text-2); }
.row .desc .extra-note { color: var(--text-3); font-size: var(--fs-cap); margin-top: 2px; }
.row .when { font-size: var(--fs-cap); color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }

.certs-head { margin-top: var(--s5); }
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); border-top: 1px solid var(--line); }
.certs li { border-bottom: 1px solid var(--line); }
.cert {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--s2);
  width: 100%; min-height: 88px; padding: 12px 4px; margin: 0;
  background: none; border: 0; text-align: left; color: var(--text); border-radius: 14px;
  transition: background-color var(--dur) var(--ease), transform 150ms var(--ease-out);
}
button.cert { cursor: pointer; }
button.cert:hover { background: var(--fill); }
button.cert:active { transform: scale(0.98); filter: brightness(1.1); }
.cert-thumb {
  position: relative; width: 76px; aspect-ratio: 4 / 3; border-radius: 6px;
  background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(0, 0, 0, 0.5);
}
.cert-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; position: relative; z-index: 1; }
/* three certificates: two paper edges peeking out behind the first */
.cert-thumb.stack::before, .cert-thumb.stack::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px; background: #f1f1f1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.cert-thumb.stack::before { transform: translate(5px, -4px) rotate(4deg); }
.cert-thumb.stack::after { transform: translate(-3px, -2px) rotate(-3deg); background: #e7e7e7; }
.cert.no-thumb .cert-info { grid-column: 2; }   /* line the text up with the rows that have a thumbnail */
.cert-info b { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.cert-info span { display: block; font-size: var(--fs-cap); color: var(--text-3); margin-top: 2px; }
.cert .go { width: 16px; height: 16px; color: var(--text-3); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
button.cert:hover .go { transform: translateX(2px); color: var(--accent-text); }

/* ---------- image viewer ---------- */

html.lb-open { overflow: hidden; }
.lightbox {
  width: min(1000px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lb-in 220ms var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } }
.lb-panel { border-radius: var(--r-card); padding: 12px; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.lightbox .lb-panel.glass { background: var(--glass-solid); }   /* sits on a dark backdrop, so keep it solid and calm */
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 0 10px 12px; }
.lb-head h2 { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.lb-btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--fill-2); border: 0; color: var(--text);
  transition: background-color var(--dur) var(--ease), transform 150ms var(--ease-out), opacity var(--dur) var(--ease);
}
.lb-btn:hover { background: var(--line-2); }
.lb-btn:active { transform: scale(0.96); }
.lb-btn:disabled { opacity: 0.3; cursor: default; }
.lb-btn svg { width: 16px; height: 16px; }
.lb-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain;
  border-radius: var(--r-inner); background: var(--fill); scrollbar-width: none;
}
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: flex; align-items: center; justify-content: center; padding: 12px; min-width: 0; }
.lb-slide img { max-width: 100%; max-height: min(68dvh, 680px); width: auto; height: auto; min-height: 0; object-fit: contain; border-radius: 10px; }
.lb-slide figcaption { display: none; }
.lb-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 10px 0 0 12px; }
.lb-caption { font-size: var(--fs-cap); color: var(--text-2); }
.lb-nav { display: flex; align-items: center; gap: var(--s1); flex: none; }
.lb-count { font-size: var(--fs-min); color: var(--text-3); font-variant-numeric: tabular-nums; margin-right: 4px; }
.lightbox.single .lb-nav { display: none; }

.cv { margin-top: var(--s4); }

/* ---------- about ---------- */

.lived { border-radius: var(--r-card); padding: var(--s3); }
.lived h3 { font-size: var(--fs-head); letter-spacing: -0.01em; margin-bottom: var(--s2); }
.places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 12px; }
.place {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 136px; padding: var(--s2); border-radius: var(--r-inner);
  background: var(--fill); border: 1px solid var(--line);
}
/* photo slot: set --photo on the card; image sits at ~40% under a theme overlay */
.place::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--photo, none) center / cover no-repeat; opacity: 0.6;
}
.place[style*="--photo"]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--photo-overlay); }
.place h4 { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.place .note { font-size: var(--fs-cap); color: var(--text-2); min-height: 1.5em; }
.place[style*="--photo"] .note { color: color-mix(in srgb, var(--text) 86%, transparent); }
.place.home { background: var(--home-bg); border-color: var(--line-2); box-shadow: var(--home-glow); }
.home-tag {
  position: absolute; top: 14px; right: 14px;
  font-size: var(--fs-min); font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink);
}

.about-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.card { border-radius: var(--r-card); padding: var(--s3); display: flex; flex-direction: column; }
.card .value { margin-top: 14px; font-size: var(--fs-head); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.card p { margin-top: 8px; font-size: 1rem; color: var(--text-2); line-height: 1.5; }
.card.stars { grid-column: 1 / -1; }
.card.stars .value { font-size: 1.25rem; }
.card.stars p { max-width: 60ch; }

.levels { margin-top: 6px; }
.levels li { display: grid; grid-template-columns: 1fr auto 92px; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); }
.levels li:last-child { border-bottom: 0; }
.levels b { font-size: var(--fs-body); font-weight: 600; }
.levels .dots { display: flex; gap: 5px; }
.levels .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.levels .dots i.off { background: var(--line-2); }
.levels span:last-child { font-size: var(--fs-cap); color: var(--text-2); text-align: right; }

.likes { margin-top: 6px; }
.likes li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.likes li:last-child { border-bottom: 0; }
.likes svg { width: 20px; height: 20px; flex: none; color: var(--text-2); }
.likes b { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.likes span { display: block; font-size: var(--fs-cap); color: var(--text-2); }

/* ---------- contact ---------- */

.contact {
  border-radius: 32px;
  padding: clamp(28px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center;
}
.contact h2 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; font-weight: 650; }
.contact .note { color: var(--text-2); font-size: 1.1875rem; margin-top: var(--s2); max-width: 32ch; }
.channels { border-top: 1px solid var(--line); }
.channel {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s2);
  min-height: 64px; padding: var(--s1) 0; border-bottom: 1px solid var(--line);
  transition: transform 150ms var(--ease-out);
}
.channel small { display: block; font-size: var(--fs-min); letter-spacing: 0.04em; color: var(--text-3); }
.channel a.addr { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-body); font-weight: 500; overflow-wrap: anywhere; }
.channel a.addr:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }
a.channel strong { display: block; font-size: var(--fs-body); font-weight: 500; }
a.channel .arrow { width: 16px; height: 16px; color: var(--text-2); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
a.channel:hover .arrow, a.channel:active .arrow { transform: translate(2px, -2px); color: var(--accent-text); }
.copy {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-cap); font-weight: 500; cursor: pointer;
  min-height: 44px; padding: 0 var(--s2); border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--fill);
  transition: background-color var(--dur) var(--ease), transform 150ms var(--ease-out);
}
.copy:hover { background: var(--fill-2); }
.copy svg { width: 14px; height: 14px; display: none; color: var(--accent-text); }
.copy.done svg { display: block; }
.copy-status { min-height: 1.4em; margin-top: var(--s1); font-size: var(--fs-cap); color: var(--text-2); }

.footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2);
  padding: var(--s7) 0 var(--s5); color: var(--text-3); font-size: var(--fs-min);
}

/* ---------- 404 ---------- */
.lost { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: var(--s8) var(--s3); }
.lost h1 { font-size: clamp(5rem, 18vw, 11.25rem); letter-spacing: -0.03em; line-height: 1; }
.lost p { color: var(--text-2); font-size: 1.1875rem; margin: var(--s2) 0 var(--s4); }

/* ---------- tablet ---------- */

@media (max-width: 1100px) {
  .hero h1 .name { white-space: normal; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--s5); min-height: 0; padding-bottom: 0; }
  .pass { justify-self: start; max-width: 420px; }
  .contact { grid-template-columns: 1fr; }
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .place.home { grid-column: 1 / -1; order: -1; }
  .about-row { grid-template-columns: 1fr 1fr; }
  .about-row .card:nth-child(3) { grid-column: 1 / -1; }
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 100px; gap: var(--s3); }
  .certs { column-gap: var(--s3); }
}

/* ---------- iPhone ---------- */

@media (max-width: 640px) {
  :root { --gutter: 20px; --group: 40px; }
  section.block { scroll-margin-top: calc(84px - var(--s7)); }
  .block { padding-top: var(--s7); }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .nav { width: auto; left: var(--gutter); transform: none; gap: 4px; padding: 4px; }
  .nav .links, .nav .cta, .nav .clock { display: none; }
  .nav.is-hidden { transform: translateY(calc(-100% - 24px)); opacity: 0; }

  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1);
    position: fixed; z-index: 50;
    left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    height: 64px; padding: 6px; border-radius: 24px;
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-height: 44px; border-radius: 18px;
    font-size: var(--fs-min); font-weight: 500; color: var(--text-3);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform 150ms var(--ease-out);
  }
  .tabbar a:active { transform: scale(0.98); filter: brightness(1.1); }
  .tabbar svg { width: 20px; height: 20px; }
  .tabbar a[aria-current] { color: var(--text); background: var(--accent-soft); }
  .tabbar a[aria-current] svg { color: var(--accent-text); }
  .footer { padding-bottom: var(--s3); }

  .hero { padding-top: calc(var(--s7) + env(safe-area-inset-top)); }
  .hero h1 .name { display: inline; }
  .hero-actions .btn { flex: 1 1 auto; }
  .proof { flex-direction: column; gap: 6px; margin-top: var(--s4); }
  .pass { max-width: none; padding: 20px; }
  .perf { margin: var(--s3) -20px 0; }

  .bcard { flex-basis: 82%; }
  .bcard.is-open { flex-basis: 90%; }
  .bcard.is-open .pic { aspect-ratio: 4 / 3; }
  .builds-wrap { margin-right: calc(var(--gutter) * -1); }
  .builds { padding-right: var(--gutter); margin-right: 0; }
  .sub-tools { display: none; }

  .split { grid-template-columns: 1fr; gap: var(--group); }
  .row { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .row .when { text-align: left; }

  /* places: no sideways scroll; Ireland full width on top, then a 2 × 2 grid */
  .lived { padding: 20px; }
  .place { min-height: 112px; }

  .about-row { grid-template-columns: 1fr; }
  .about-row .card:nth-child(3) { grid-column: auto; }
  .card { padding: 20px; }

  .certs { grid-template-columns: 1fr; }
  .lightbox { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .lb-panel { padding: 8px; max-height: calc(100dvh - 16px); }
  .lb-slide { padding: 8px; }
  .lb-slide img { max-height: 62dvh; }
  .lb-foot { flex-direction: column; align-items: stretch; padding: 10px 4px 0; }
  .lb-nav { justify-content: flex-end; }
  .contact { padding: var(--s4) 20px; border-radius: var(--r-card); }
  .contact h2 { font-size: 2.75rem; }
}

/* ---------- preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .underline path { stroke-dashoffset: 0; }
  .lightbox[open] { animation: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass, .nav.glass, .tabbar.glass {
    background: var(--glass-solid) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-color: var(--line-2) !important;
  }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(127, 127, 127, 0.45); --line-2: rgba(127, 127, 127, 0.6);
          --text-2: color-mix(in srgb, var(--text) 90%, transparent); --text-3: color-mix(in srgb, var(--text) 82%, transparent); }
}