/*
Theme Name: GNDN Home
Theme URI: https://gndn.me/
Author: GNDN
Author URI: https://gndn.me/
Description: gndn.me front page. A tour of the web (1989 → 2026) on a dial, landing on a bento-grid home with services, work and contact. The previous HUD site lives on log.gndn.me.
Version: 1.0.6
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gndn-home
*/

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #eceef1;
  --tile: #ffffff;
  --ink: #15171a;
  --muted: #4a4f57;
  --soft: #6b717b;
  --field: #eceef1;
  --tint: oklch(0.95 0.03 25);
  --hero: #15171a;
  --heroInk: #f3f4f6;
  --heroMuted: #b4b9c1;
  --heroAccent: oklch(0.66 0.19 25);
  --accent: oklch(0.55 0.16 25);
  --accentHover: oklch(0.49 0.16 25);
  --onAccent: #ffffff;
  --ph1: #eef0f3;
  --ph2: #e5e8ec;
  --line: rgba(21, 23, 26, .1);
  --err: #b42318;

  --dial-bg: #141412;
  --dial-ink: #ecebe6;
  --dial-muted: #9a978e;
  --dial-tick: #8a877f;
  --dial-accent: oklch(0.66 0.19 25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0e10;
    --tile: #181a1e;
    --ink: #eef0f3;
    --muted: #a9afb8;
    --soft: #8a909a;
    --field: #24272c;
    --tint: oklch(0.26 0.04 25);
    --hero: #eef0f3;
    --heroInk: #15171a;
    --heroMuted: #4a4f57;
    --heroAccent: oklch(0.52 0.19 25);
    --accent: oklch(0.72 0.13 25);
    --accentHover: oklch(0.78 0.12 25);
    --onAccent: #0d0e10;
    --ph1: #22252a;
    --ph2: #1c1f23;
    --line: rgba(238, 240, 243, .12);
    --err: #ff8a7a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0e10;
  --tile: #181a1e;
  --ink: #eef0f3;
  --muted: #a9afb8;
  --soft: #8a909a;
  --field: #24272c;
  --tint: oklch(0.26 0.04 25);
  --hero: #eef0f3;
  --heroInk: #15171a;
  --heroMuted: #4a4f57;
  --heroAccent: oklch(0.52 0.19 25);
  --accent: oklch(0.72 0.13 25);
  --accentHover: oklch(0.78 0.12 25);
  --onAccent: #0d0e10;
  --ph1: #22252a;
  --ph2: #1c1f23;
  --line: rgba(238, 240, 243, .12);
  --err: #ff8a7a;
}

/* ---------- Base ---------- */
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); }
a { color: inherit; }
a:hover { opacity: .8; }
input[type=range] { cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}

@keyframes homeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Tour screens power on like a CRT; the dial's progress line fills per era. */
@keyframes crtOn { 0% { transform: scale(1, .004); filter: brightness(4); } 45% { transform: scale(1, .004); filter: brightness(3); } 70% { transform: scale(1, 1); filter: brightness(1.6); } 100% { transform: none; } }
@keyframes tourBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Tour: which era shows ---------- */
.era { display: none; }
html[data-era="0"] .era-0, html[data-era="1"] .era-1, html[data-era="2"] .era-2,
html[data-era="3"] .era-3, html[data-era="4"] .era-4, html[data-era="5"] .era-5,
html[data-era="6"] .era-6, html[data-era="7"] .era-7, html[data-era="8"] .era-8,
html[data-era="9"] .era-9, html:not([data-era]) .era-9, .inner-page { display: block; }
.era-9 { animation: homeIn .7s ease both; }

/* Keep every era's content clear of the dial, whatever height it wraps to. */
.era .era-page { padding-bottom: calc(var(--dial-h, 110px) + 40px) !important; }
.era .era-room { padding-bottom: calc(var(--dial-h, 110px) + 20px) !important; }
.era-8 .era-page { padding-bottom: calc(var(--dial-h, 110px) + 100px) !important; }
.era-8 .ai-pill { bottom: calc(var(--dial-h, 88px) + 16px) !important; }
/* 2020: on phones the chat sidebar stacks under the video tiles. */
@media (max-width: 639px) {
  .era-7 .era-page > div:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; }
  .era-7 .era-page > div:nth-child(2) > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hist-7 > div > div:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; }
  .hist-7 > div > div:nth-child(2) > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- Dial ---------- */
.dial { display: none; }
html[data-era]:not([data-era="9"]) .dial { display: block; }
.dial {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--dial-bg); color: var(--dial-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  border-top: 1px solid #2c2b27; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
}
.dial-inner {
  max-width: 1160px; margin: 0 auto;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
}
.dial-a { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dial-readout { display: grid; line-height: 1.1; min-width: 96px; }
.dial-year { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.dial-era { font-size: 11px; color: var(--dial-muted); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.dial-skip {
  font: inherit; font-size: 13px; background: var(--dial-ink); color: var(--dial-bg);
  border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; white-space: nowrap;
  transition: background .2s;
}
.dial-skip:hover { background: var(--dial-accent); }
.dial-btns { display: flex; gap: 8px; }
.dial-play {
  font: inherit; font-size: 13px; background: #2c2b27; color: var(--dial-ink);
  border: 0; border-radius: 999px; padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.dial-progress { height: 2px; background: #2c2b27; position: relative; overflow: hidden; }
.dial-progress i { position: absolute; inset: 0; background: var(--dial-accent); transform-origin: left; transform: scaleX(0); }
.dial:not(.is-playing) .dial-progress i { visibility: hidden; }
@media (max-width: 400px) {
  .dial-a { flex-wrap: wrap; }
}
.dial-b { flex: 999 1 300px; display: grid; gap: 4px; }
.dial-b input { width: 100%; accent-color: var(--dial-accent); margin: 0; }
.dial-ticks { position: relative; height: 16px; margin: 0 8px; }
.dial-ticks button {
  position: absolute; transform: translateX(-50%); background: none; border: 0; padding: 0 2px;
  font: inherit; font-size: 11px; color: var(--dial-tick); cursor: pointer;
}
.dial-ticks button[aria-current="true"] { color: var(--dial-accent); }


/* ---------- History dialog ---------- */
.hist {
  position: fixed; inset: 0; z-index: 2000; background: rgba(8, 8, 10, .72);
  padding: clamp(0px, 2vw, 24px); display: flex; animation: homeIn .35s ease both;
}
.hist[hidden] { display: none; }
.hist-panel {
  flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--dial-bg); color: var(--dial-ink); font-family: 'JetBrains Mono', ui-monospace, monospace;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.hist-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
  padding: 12px 16px 12px 20px; border-bottom: 1px solid #2c2b27;
}
.hist-title { display: grid; line-height: 1.2; font-size: 13px; font-weight: 600; }
.hist-sub { font-size: 11px; font-weight: 400; color: var(--dial-muted); text-transform: uppercase; letter-spacing: .08em; }
.hist-tools { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; flex: 1 1 auto; justify-content: flex-end; }
.hist-more { color: var(--dial-muted); }
.hist-links { display: contents; }
.hist-links a { color: var(--dial-ink); text-underline-offset: 3px; }
.hist-close, .hist-next {
  font: inherit; font-size: 13px; background: var(--dial-ink); color: var(--dial-bg);
  border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .2s;
}
.hist-close { margin-left: 6px; }
.hist-close:hover, .hist-next:hover { background: var(--dial-accent); }
.hist-body { flex: 1; min-height: 0; overflow: auto; position: relative; transform: translateZ(0); background: #fff; }
.hist-era > div { min-height: 100%; }
.hist-era[hidden] { display: none; }
.hist-foot {
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap;
  gap: 10px 18px; align-items: center; border-top: 1px solid #2c2b27;
}
.hist-prev {
  font: inherit; font-size: 13px; background: #2c2b27; color: var(--dial-ink);
  border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer;
}
.hist-next { padding: 9px 14px; }
.hist-dial { flex: 999 1 260px; display: grid; gap: 4px; }
.hist-dial input { width: 100%; accent-color: var(--dial-accent); margin: 0; }
.hist .dial-ticks button[aria-current="true"] { color: var(--dial-accent); }

@media (prefers-reduced-motion: reduce) {
  .era-screen { animation: none !important; }
  .era-9, .hist { animation: none; }
}

/* ---------- Home layout ---------- */
.home-page {
  min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif; font-size: 17px; line-height: 1.55;
  padding: 16px; transition: background .3s, color .3s;
}
.wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: 14px; }
.tile { background: var(--tile); border-radius: 22px; padding: 26px; transition: background .3s, color .3s; min-width: 0; }
.tile--tint { background: var(--tint); }
.row { display: flex; flex-wrap: wrap; gap: 14px; }
.row > .tile { flex: 1 1 260px; }
.muted { margin: 0; color: var(--muted); font-size: 16px; }
.mono-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--soft); }

.pill { display: inline-flex; align-items: center; text-decoration: none; border-radius: 999px; }
.pill--accent { background: var(--accent); color: var(--onAccent); font-weight: 500; padding: 10px 18px; transition: background .2s; }
.pill--accent:hover { background: var(--accentHover); opacity: 1; }
.pill--bold { font-weight: 600; font-size: 16px; justify-self: start; }
.pill--outline { font-weight: 500; padding: 12px 22px; border: 1.5px solid var(--ink); }

/* Logo: "g n / d n" rebuilt as live text so it recolours per theme. */
.logo { container-type: inline-size; display: block; width: 40px; aspect-ratio: 1; flex: none; }
.logo-grid {
  width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  place-items: center; padding: 6%; color: var(--ink);
  font-family: 'Archivo Black', sans-serif; font-size: 38cqw; line-height: 1; letter-spacing: -.04em;
  transition: background .3s, color .3s;
}
.logo--knockout { width: 100%; }
.logo--knockout .logo-grid { background: var(--ink); color: var(--bg); }

/* Nav */
.nav { padding: 10px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-links { display: flex; gap: 4px; flex-wrap: wrap; font-size: 15px; align-items: center; justify-content: center; }
.nav-links > a:not(.pill) { text-decoration: none; padding: 8px 14px; }
.theme-toggle {
  font: inherit; font-size: 14px; background: var(--field); color: var(--ink); border: 0; border-radius: 999px;
  padding: 9px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .3s, color .3s;
}
.half-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
@media (max-width: 639px) {
  .nav { flex-direction: column; gap: 12px; }
}

/* Hero */
.row > .hero {
  flex: 2 1 520px; min-height: 420px; background: var(--hero); color: var(--heroInk);
  padding: clamp(28px, 5vw, 56px); display: grid; gap: 28px; align-content: end;
}
.hero h1 { margin: 0; font-weight: 600; font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.hero-accent { color: var(--heroAccent); }
.hero p { margin: 0; max-width: 520px; color: var(--heroMuted); font-size: 18px; text-wrap: pretty; }
.row > .logo-tile {
  flex: 1 1 300px; max-width: 100%; padding: 0; overflow: hidden; align-self: stretch;
  display: grid; place-items: center; min-height: 300px; background: var(--ink);
}

/* Info row */
.info { display: grid; gap: 10px; align-content: start; }
.info--end { gap: 4px; align-content: end; }
.status { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #34a853; }
.big-year { font-size: 56px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.replay { text-decoration: none; }
.replay-title { font-size: 20px; font-weight: 600; }

/* Sections */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 28px 8px 4px; scroll-margin-top: 16px; }
.section-head h2 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -.02em; }
.section-head .key { font-size: 14px; color: var(--soft); }
.grid { display: grid; gap: 14px; }
.grid--services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.service { display: grid; gap: 8px; align-content: start; }
.service h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.service p { margin: 0; color: var(--muted); font-size: 16px; text-wrap: pretty; }

/* Work cards: grey still that scrolls the full page in colour on hover/focus */
.grid--work { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.work-card { text-decoration: none; padding: 14px; display: grid; gap: 14px; }
.work-card:hover { opacity: 1; }
.frame {
  aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; position: relative;
  background: repeating-linear-gradient(45deg, var(--ph1) 0 10px, var(--ph2) 10px 20px);
}
.shot {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 400%; max-width: none;
  object-fit: cover; object-position: top; display: block;
  filter: grayscale(1) opacity(.55); transform: translateY(0);
  transition: transform 1.2s ease, filter .4s ease;
}
.work-card:hover .shot, .work-card:focus-visible .shot {
  filter: none; transform: translateY(-75%);
  transition: transform 9s linear, filter .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .work-card:hover .shot, .work-card:focus-visible .shot { transform: none; }
}
.chip {
  position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 500; padding: 6px 10px;
  border-radius: 999px; background: var(--tile); color: var(--ink); pointer-events: none;
}
.work-meta { padding: 0 10px 10px; display: grid; gap: 6px; }
.work-title { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.work-title h3 { margin: 0; font-size: 20px; font-weight: 600; }
.work-title span { font-size: 13px; color: var(--soft); }
.work-meta p { margin: 0; color: var(--muted); font-size: 16px; }

/* Contact */
.contact {
  padding: clamp(26px, 4vw, 48px); margin-top: 14px; scroll-margin-top: 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 36px 56px;
}
.contact h2 { margin: 0 0 16px; font-size: clamp(32px, 4vw, 48px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.contact .muted { font-size: inherit; }
.contact-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Contact form (inc/forms.php) */
.contact-form { display: grid; }
.cf { display: grid; gap: 18px; margin: 0; }
.cf-field label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 6px; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea {
  display: block; width: 100%; max-width: none; font: inherit; font-weight: 400; font-size: 16px; padding: 13px 14px;
  border: 1px solid transparent; border-radius: 12px; background: var(--field); color: var(--ink);
  transition: background .3s, color .3s, border-color .2s;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--soft); opacity: 1; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.contact-form [aria-invalid=true] { border-color: var(--err); }
.cf-err { color: var(--err); font-size: 14px; margin: 6px 0 0; }
.cf-alert { color: var(--err); font-size: 15px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--err); margin: 0; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-actions { display: flex; align-items: center; gap: 12px; }
.cf-submit {
  font: inherit; font-weight: 500; background: var(--accent); color: var(--onAccent); border: 0;
  padding: 14px 28px; border-radius: 999px; cursor: pointer; transition: background .2s;
}
.cf-submit:hover, .cf-submit:focus-visible { background: var(--accentHover); }
.cf-submit[disabled] { opacity: .6; cursor: progress; }
.cf-note { margin: 0; font-size: 13px; color: var(--soft); }
.cf-note a { color: inherit; }
.cf [hidden] { display: none; }
.sent { padding: 28px; border-radius: 16px; background: var(--tint); align-self: center; }
.sent:focus { outline: none; }
.sent-title { font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.sent p { margin: 0; color: var(--muted); }

/* Footer */
.site-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--soft); padding: 16px 8px 8px;
}
.site-footer a { color: var(--ink); }
.site-footer-links { display: flex; gap: 8px 22px; flex-wrap: wrap; }

/* ---------- Inner pages (case studies, plain pages, 404) ---------- */
.hero--case { min-height: 360px; }
.row > .hero--case { flex-basis: 560px; }
.hero--case p { max-width: 640px; }
.hero-label { color: var(--heroMuted); }
.facts { display: grid; gap: 22px; align-content: space-between; }
.facts dl { margin: 0; display: grid; }
.facts dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--soft); }
.facts dd { margin: 0; font-weight: 500; font-size: 15px; text-align: right; }
.work-card--wide .frame { aspect-ratio: 16 / 9; }

.prose { padding: clamp(26px, 4vw, 48px); }
.prose h1 { margin: 0 0 20px; font-size: clamp(32px, 4vw, 48px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.prose h2, .prose h3, .prose h4 { margin: 1.4em 0 .4em; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.prose h2 { font-size: 26px; }
.prose h3 { font-size: 21px; }
.prose h4 { font-size: 20px; }
.prose > :first-child, .prose > div > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); max-width: 72ch; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose a.pill { color: var(--onAccent); }
.not-found { display: grid; gap: 12px; justify-items: start; }
.not-found h1 { margin: 0; }
.case-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 8px 56px; }
.case-body > p { grid-column: 1 / -1; }
.tags { grid-column: 1 / -1; list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: var(--field); color: var(--ink); }
.cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; }