/* Dark theme. Everything colour-related lives in the tokens below.
   To change the accent: edit --accent here, or set data-theme on <html>
   (see the [data-theme] blocks). The nav swatches do exactly that. */
:root {
  --font-body: 'Inter', 'Noto Sans JP', system-ui, -apple-system, Arial, sans-serif;
  --font-head: 'Space Grotesk', 'Inter', 'Noto Sans JP', system-ui, Arial, sans-serif;
  --fs-body: clamp(17px, 1.5vw, 21px);

  /* surfaces and text */
  --bg: #08080a;
  --bg-alt: #0f0f12;
  --surface: #141418;
  --ink: #ececee;
  --muted: #9a9aa3;
  --line: #26262c;

  /* accent (default: amber) */
  --accent: #f5a524;
  --accent-ink: #0a0a0a;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);

  --radius: 14px;
  --max: 1100px;
  --gap: 24px;
  --section-pad: clamp(24px, 6vh, 72px);
  --nav-h: 66px;
}

[data-theme="emerald"] { --accent: #34d399; }
[data-theme="sky"]     { --accent: #38bdf8; }
[data-theme="violet"]  { --accent: #a78bfa; }
[data-theme="rose"]    { --accent: #fb7185; }

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  scroll-snap-type: y mandatory;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3, .nav__logo { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(40px, 5.5vw, 76px); line-height: 1.05; }
h2 { font-size: 32px; margin-bottom: clamp(16px, 4vh, 40px); }
h3 { font-size: clamp(28px, 3vw, 44px); line-height: 1.15; }
a { color: inherit; }
ul { padding-left: 20px; }
li::marker { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gap); }
.section {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--section-pad) 0;
  scroll-snap-align: start;
}
.section > .container { width: 100%; }
.section--alt { background: var(--bg-alt); }
.eyebrow, .meta { color: var(--muted); font-size: 0.8em; }
.eyebrow { color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
.section__label {
  display: flex; align-items: center; gap: 12px;
  color: var(--accent); font-size: 0.8em; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: clamp(16px, 4vh, 40px);
}
.section__label::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.subtitle { font-size: 1.3em; margin: 8px 0; }

/* image placeholder (project screenshots, until real ones are added) */
.ph {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 20% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted); font-size: 13px; letter-spacing: 2px; text-align: center;
}

/* buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.btn {
  display: inline-block; padding: 12px 24px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  text-decoration: none; font-size: 16px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: border-color .2s, color .2s, background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { color: var(--accent-ink); box-shadow: 0 6px 24px var(--accent-glow); }

/* store badges */
.badge { display: inline-flex; line-height: 0; border-radius: 8px; transition: transform .2s, box-shadow .2s; }
.badge img { display: block; width: 120px; height: 40px; }
.badge:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--accent-glow); }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: calc(var(--nav-h) - 1px); gap: 16px; }
.nav__logo { text-decoration: none; color: var(--accent); font-size: 1.2em; }
.nav__right { display: flex; align-items: center; gap: 28px; }
.nav__links { display: flex; gap: 24px; font-size: 0.85em; }
.nav__links a { text-decoration: none; color: var(--muted); transition: color .2s; }
.nav__links a:hover { color: var(--ink); }

/* accent switcher (hidden for now: change display back to flex to show it) */
.swatches { display: none; gap: 8px; }
.swatch {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 2px solid transparent; background: var(--c); cursor: pointer;
  transition: transform .2s, border-color .2s;
}
.swatch:hover { transform: scale(1.15); }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; }

/* about */
.about { display: grid; grid-template-columns: minmax(240px, 440px) 1fr; gap: 72px; align-items: center; }
.about__photo {
  position: relative; width: 100%; aspect-ratio: 1; max-height: 65vh;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 8px var(--accent-soft), 0 30px 80px -20px var(--accent-glow);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__text p + p, .about__text .meta + p { margin-top: 16px; }
.about__text h1 { color: var(--ink); }

/* experience: one job per screen, dates left, details right */
.job { font-size: clamp(14px, 1.15vw, 17px); display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(32px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); }
.job h3 { font-size: clamp(22px, 2.2vw, 32px); }
.job__company { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.job__logo { display: block; flex: none; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); }
.job__dates { font-weight: 700; color: var(--accent); }
.job__place { color: var(--muted); }
.job__body p { margin: 8px 0 12px; color: var(--muted); }
.job__body li + li { margin-top: 6px; }
.job__body li { line-height: 1.45; }

/* projects: one project per screen, big image beside the text */
.project { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.project--flip { grid-template-columns: 1fr 1.15fr; }
.project--flip .project__image { order: 2; }
.project__image { height: clamp(240px, 58vh, 560px); }
/* stand-in for screenshots: app icon centred in the panel (source is 240px, so cap there) */
.project__image--icon img { width: min(60%, 240px); height: auto; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 20px 60px -15px var(--accent-glow); }
.project__title { display: flex; align-items: center; gap: 16px; }
.project__logo { display: block; flex: none; width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line); }
.project__body .meta { margin: 8px 0 16px; }
.project__body p:not(.meta) { color: var(--muted); }

/* contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact__info h2 { margin-bottom: 16px; }
.contact__info p { color: var(--muted); }
.actions--stack { flex-direction: column; align-items: flex-start; }
.form { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.form input, .form select, .form textarea {
  padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form .btn { align-self: flex-start; }

/* footer */
.footer { scroll-snap-align: end; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* desktop: every section is exactly one screen (below the nav), so snapping
   never shows two sections at once. Project images stretch to fill the height. */
@media (min-width: 901px) and (min-height: 501px) {
  .section { height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); min-height: 0; }
  .section > .container { height: 100%; }
  .section > .container:not(.about):not(.contact) { display: flex; flex-direction: column; justify-content: center; }
  .section > .container > .project { flex: 1; min-height: 0; }
  .section > .container > .project { align-items: stretch; }
  .project__image { height: auto; min-height: 0; }
  .project__body { align-self: center; }
}

/* tablet and phone: stack inside each screen, content may exceed one screen,
   so snapping becomes a soft pull instead of a hard lock */
@media (max-width: 900px) {
  html { scroll-snap-type: y proximity; }
  .about, .job, .project, .project--flip, .contact { grid-template-columns: 1fr; gap: 24px; }
  .project--flip .project__image { order: 0; }
  .about__photo { max-width: 320px; max-height: none; }
  .project__image { height: 220px; }
  .nav__right { gap: 14px; }
  .nav__links { gap: 14px; font-size: 14px; }
}
@media (max-width: 560px) {
  .swatches { gap: 6px; }
  .swatch { width: 16px; height: 16px; }
  .nav__links { gap: 10px; font-size: 13px; }
}

/* short landscape screens: not enough height to force one section per screen */
@media (max-height: 500px) {
  html { scroll-snap-type: none; }
}