/* Soh Kawabata, minimalist version (2026-11-13), after the reference Soh chose (riceset.com):
   a charcoal ground, Instrument Serif for names and headings, Poppins for reading, and the FREE HUG photo
   set in characters as the only picture on the home page. One accent, marker red, belongs to the hug.
   The colourful v1 is kept in work/v1-colourful/. */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins for reading, as on the reference site Soh chose. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #161618;
  --ink: #ececed;
  --soft: #a3a3a9;
  --field: #212124;
  --art: #b9b9be;
  --accent: #e2533f;
  --on-accent: #161618;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Poppins", system-ui, "Segoe UI", sans-serif;

  --m: clamp(16px, 2.5vw, 36px);
  --column: 680px;

  --t-display: clamp(3rem, 1.9rem + 4.4vw, 6rem);
  --t-head: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  --t-lead: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hold: 1100ms;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f5f2;
  --ink: #161618;
  --soft: #5b5b61;
  --field: #eae9e4;
  --art: #3a3a3f;
  --accent: #c8352a;
  --on-accent: #f6f5f2;
  color-scheme: light;
}

/* Japanese, Chinese and Korean pages: the Noto serif and sans carry both scripts, so the page still uses two faces. */
body[data-lang="ja"] { --serif: "Noto Serif JP", serif; --sans: "Noto Sans JP", sans-serif; }
body[data-lang="zh"] { --serif: "Noto Serif SC", serif; --sans: "Noto Sans SC", sans-serif; }
body[data-lang="ko"] { --serif: "Noto Serif KR", serif; --sans: "Noto Sans KR", sans-serif; }
body[data-lang="ko"] { word-break: keep-all; overflow-wrap: break-word; }
body[data-lang="ja"] :is(h1, h2, h3) { word-break: auto-phrase; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body) / 1.6 var(--sans);
  transition: background-color 300ms ease, color 300ms ease;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: currentColor; }
}
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: var(--m); top: -100px; z-index: 10; background: var(--ink); color: var(--bg); padding: 12px 16px; }
.skip:focus { top: 12px; }

/* ---------- The small controls: language and light ---------- */

.bar__end { display: flex; align-items: center; gap: 4px; }
.lang { position: relative; }
.lang summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 168px;
  padding: 6px;
  background: var(--field);
  transform-origin: top right;
}
.lang:not([open]) ul { display: none; }
.lang[open] ul { animation: pop 160ms var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } }
.lang a { display: block; padding: 9px 12px; text-decoration: none; }
.lang a[aria-current] { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .lang a:hover { background: var(--bg); }
}

.theme {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 160ms var(--ease-out);
}
.theme:active { transform: scale(0.92); }
.theme__icon { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme__icon--moon { stroke: none; }
.theme__icon--sun { display: none; }
[data-theme="light"] .theme__icon--moon { display: none; }
[data-theme="light"] .theme__icon--sun { display: block; }

/* ---------- Home: one screen ---------- */

body[data-page="home"] { min-height: 100svh; display: flex; flex-direction: column; }
/* The home bar: the time where Soh lives and where Soh grew up, the three pages, language and light. */
.top {
  display: flex;
  align-items: center;
  gap: 8px 26px;
  padding: 12px var(--m);
}
.top__time { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: var(--t-small); color: var(--soft); font-variant-numeric: tabular-nums; }
.top__clock { white-space: nowrap; }

.splash {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: end;
  padding: 0 var(--m) clamp(24px, 4vh, 48px);
}
.splash__text { grid-column: 1 / 7; grid-row: 1; padding-bottom: 8px; }
.splash__art {
  grid-column: 7 / 13;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  position: relative;
  /* Soh asked for the drawing bigger: about half the screen wide. Its shape is the source's (425 × 490: Soh holding
     the "make the society brighter" sign); on a short screen the bottom edge runs past the fold and is trimmed. */
  width: min(100%, 48vw);
  height: min(calc(48vw * 490 / 425), calc(100svh - 72px));
  overflow: hidden;
}
.art { width: 100%; height: auto; aspect-ratio: 425 / 490; }
.art__still { width: 100%; height: 100%; }
.art { display: block; touch-action: pan-y; }
.art__still { object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: 0.85; }
.no-js .art, .is-still .art { display: none; }
.js .splash__art:not(.is-still) .art__still { display: none; }

.splash__name { font: 400 var(--t-display) / 0.95 var(--serif); letter-spacing: -0.02em; }
.splash__lead { margin-top: 28px; max-width: 26em; font-size: var(--t-lead); line-height: 1.4; }
.splash__links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: clamp(24px, 4vh, 40px); font-size: var(--t-small); color: var(--soft); }
.splash__links a { display: inline-flex; min-height: 44px; align-items: center; }

body:is([data-lang="ja"], [data-lang="zh"], [data-lang="ko"]) .splash__name { letter-spacing: 0; line-height: 1.1; font-weight: 500; }


/* The hug, in the page's own voice: a serif line beside a little pixel scene. Holding walks two pixel people
   together and warms them red; when the hug lands they hold on and a pixel heart rises (main.js draws it).
   The thanks sits in space kept for it under the button, so nothing moves under the finger when the hug lands. */
.hug { position: relative; margin-top: clamp(32px, 5vh, 56px); padding-bottom: 3.5rem; }
.heart { flex: none; width: 0.7em; height: 0.7em; fill: var(--accent); }
.hug__btn, .hug__fallback {
  display: none;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 4px 8px 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 var(--t-head) / 1.1 var(--serif);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 160ms var(--ease-out), color 300ms ease;
}
.no-js .hug__fallback, .js .hug__btn { display: inline-flex; }
.hug__btn:active { transform: scale(0.98); }
.hug__label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  transition: text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hug__btn:hover .hug__label { text-decoration-color: currentColor; }
}
.is-holding .hug__btn, .is-hugged .hug__btn { color: var(--accent); }
.hug__scene { flex: none; width: 104px; height: 72px; margin-left: -10px; image-rendering: pixelated; }
.hug__thanks { position: absolute; left: 0; right: 0; top: calc(76px + 8px); display: none; color: var(--soft); }
.hug__thanks.is-shown { display: block; animation: rise 420ms var(--ease-out) both; }
.hug__thanks strong { margin-right: 12px; font: 400 var(--t-lead) / 1.3 var(--serif); color: var(--ink); }
body:is([data-lang="ja"], [data-lang="zh"], [data-lang="ko"]) :is(.hug__btn, .hug__fallback) { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 500; }

/* ---------- Inner pages: a plain bar and one column ---------- */

/* The bar sits on the same column as the page under it, so both margins match. */
.bar {
  width: min(100% - 2 * var(--m), var(--column));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px 0;
}
.bar__name { font: 400 1.5rem / 1 var(--serif); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.bar__nav { display: flex; gap: 4px 26px; margin-left: auto; }
.bar__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--soft); text-decoration: none; }
.bar__nav a[aria-current] { color: var(--ink); }
.top .bar__nav a { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .bar__nav a:hover { color: var(--ink); }
}

.page { width: min(100% - 2 * var(--m), var(--column)); margin: 0 auto; padding: clamp(40px, 8vw, 104px) 0 0; }
.page__title { font: 400 var(--t-display) / 0.95 var(--serif); letter-spacing: -0.02em; }
.page__lead { margin-top: 32px; max-width: 38em; font-size: var(--t-lead); line-height: 1.45; }
.page__photo { margin-top: clamp(40px, 6vw, 64px); }
.page__photo img { width: 100%; }

.prose { margin-top: clamp(40px, 6vw, 64px); }
.prose p + p { margin-top: 1.25em; }
.sign { margin-top: 40px !important; font: 400 var(--t-lead) / 1.2 var(--serif); }
.sign span { display: block; margin-top: 6px; font: 400 var(--t-small) / 1.4 var(--sans); color: var(--soft); }

.block { margin-top: clamp(104px, 12vw, 160px); }
.block__h { font: 400 var(--t-head) / 1.05 var(--serif); letter-spacing: -0.01em; }
.block__lead { margin-top: 20px; font-size: var(--t-lead); line-height: 1.45; }

.entries { margin-top: 36px; display: grid; gap: 52px; }
.entry__role { font: 400 var(--t-lead) / 1.2 var(--serif); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem); }
.entry__org { margin-top: 6px; font-weight: 500; }
.entry__when { margin-top: 2px; color: var(--soft); }
.entry__body { margin-top: 12px; }
.entry__link, .way a, .next a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; margin-top: 6px; }

.ways { margin-top: 36px; display: grid; gap: 44px; }
.way__h { font: 400 var(--t-lead) / 1.2 var(--serif); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem); }
.way p { margin-top: 8px; }

.facts { margin-top: 28px; display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; }
.facts dt { color: var(--soft); }
.next { margin-top: 32px; font: 400 var(--t-lead) / 1.2 var(--serif); }

body:is([data-lang="ja"], [data-lang="zh"], [data-lang="ko"]) :is(.page__title, .block__h) { letter-spacing: 0; line-height: 1.2; font-weight: 500; }
body:is([data-lang="ja"], [data-lang="zh"], [data-lang="ko"]) .page__title { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 6rem); }
body:is([data-lang="ja"], [data-lang="zh"], [data-lang="ko"]) :is(.entry__role, .way__h, .sign, .next, .hug__thanks strong) { font-weight: 500; }

/* Contact: the address set large, then a short form on tone-stepped fields. */
.contact__mail { margin-top: 28px; font: 400 var(--t-lead) / 1.3 var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); overflow-wrap: anywhere; }
.form { margin-top: 40px; display: grid; gap: 8px; }
.block__photo { margin-top: 32px; }
.block__photo img { width: 100%; }

/* Work with Me reads as a CV: a wider page, the intro beside its photo, each entry in two columns. */
body[data-page="work"] { --column: 1080px; }
body[data-page="work"] .block { margin-top: clamp(96px, 10vw, 136px); }
.intro__go { margin-top: 28px; font: 400 var(--t-lead) / 1.2 var(--serif); }
.intro__go a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; }
.intro__photo { margin-top: 48px; }
.intro__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 52em) {
  .intro { display: grid; grid-template-columns: 7fr 5fr; column-gap: clamp(40px, 5vw, 72px); align-items: end; }
  .intro__photo { margin-top: 0; }
  .entry { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(40px, 5vw, 72px); }
  .entry__body { margin-top: 0; padding-top: 4px; }
  .ways { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 72px); row-gap: 52px; }
  .contact { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .contact .form { margin-top: 8px; }
}
.form label { margin-top: 12px; font-size: var(--t-small); color: var(--soft); }
.form input, .form select, .form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: var(--field);
  color: var(--ink);
  font: inherit;
}
.form textarea { resize: vertical; }
.form__send {
  justify-self: start;
  margin-top: 24px;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: 600 var(--t-body) / 1 var(--sans);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.form__send:active { transform: scale(0.97); }

.foot { width: min(100% - 2 * var(--m), var(--column)); margin: clamp(112px, 12vw, 176px) auto 0; padding-bottom: 40px; }
/* The close: the name returns, as large as the column allows. */
.foot__name { font: 400 clamp(3.5rem, 1rem + 9.5vw, 10rem) / 0.9 var(--serif); letter-spacing: -0.03em; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 24px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.foot__note { margin-top: 16px; font-size: var(--t-small); color: var(--soft); }
body:is([data-lang="ja"], [data-lang="zh"], [data-lang="ko"]) .foot__name { letter-spacing: 0; font-weight: 500; line-height: 1.1; font-size: clamp(3rem, 1rem + 8vw, 8rem); }

/* ---------- Contact: every way to reach Soh, large, then the dream and Naruto's number line ---------- */

body[data-page="contact"] { --column: 1080px; }
/* a tighter rhythm than the other pages, so each screen of the contact list holds its full share */
body[data-page="contact"] .block { margin-top: clamp(80px, 8vw, 112px); }
body[data-page="contact"] .dream { margin-top: clamp(88px, 9vw, 128px); }
body[data-page="contact"] .foot { margin-top: clamp(88px, 9vw, 128px); }

/* Social accounts: three pixel logos, as wide as the column allows. */
.logos { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 4vw, 56px); }
.logo-link { display: grid; gap: 6px; text-decoration: none; }
.logo-link__icon {
  width: min(100%, 220px);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 14px;
  fill: currentColor;
  transition: color 200ms ease, transform 240ms var(--ease-out);
}
.logo-link__name { font: 400 var(--t-head) / 1.05 var(--serif); }
.logo-link__meta { color: var(--soft); font-size: var(--t-small); overflow-wrap: anywhere; }
/* Pointing at a logo brings up the platform's own colour: Instagram's warm gradient, Facebook's and LinkedIn's blue. */
.logo-link__icon .px-base { fill: currentColor; }
.logo-link__icon .px-brand { opacity: 0; transition: opacity 260ms ease; }
.logo-link:focus-visible .px-brand, .logo-link:active .px-brand { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .logo-link:hover .logo-link__icon { transform: translateY(-6px); }
  .logo-link:hover .px-brand { opacity: 1; }
}
.logo-link:active .logo-link__icon { transform: scale(0.97); }

/* The organisations: their own logos on light plates, large, side by side. */
.orgs { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 4vw, 56px); }
.org { display: grid; gap: 6px; text-decoration: none; }
.org__plate {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  margin-bottom: 14px;
  transition: transform 240ms var(--ease-out);
}
.org__plate { justify-items: start; }
.org__plate img { width: auto; height: 82%; max-width: 100%; object-fit: contain; }
.org__name { font: 400 var(--t-head) / 1.05 var(--serif); }
.org__meta { color: var(--soft); font-size: var(--t-small); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .org:hover .org__plate { transform: translateY(-6px); }
}
.org:active .org__plate { transform: scale(0.99); }

/* Email: the address set large, with its pixel envelope. */
.mail { margin-top: clamp(24px, 3vw, 36px); font: 400 clamp(1.75rem, 1rem + 3.2vw, 4rem) / 1.1 var(--serif); }
.mail a { display: inline-flex; align-items: center; gap: 0.35em; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.mail__icon { flex: none; width: 0.9em; height: 0.9em; fill: currentColor; }
.mail span { min-width: 0; }
.reaches__more { margin-top: 14px; font-size: var(--t-small); }
.reaches__more a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; }

.dream { margin-top: clamp(104px, 11vw, 160px); }
.runner { display: block; width: 100%; height: clamp(160px, 18vw, 220px); image-rendering: pixelated; cursor: pointer; touch-action: manipulation; }
.dream__h { margin-top: clamp(24px, 3vw, 40px); font: 400 clamp(2.75rem, 1.1rem + 5.6vw, 7rem) / 0.95 var(--serif); letter-spacing: -0.02em; }
body:is([data-lang="ja"], [data-lang="zh"], [data-lang="ko"]) .dream__h { font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5.5rem); font-weight: 500; letter-spacing: 0; line-height: 1.15; }

/* Naruto's steps and Soh's on one number line running down the page: Naruto's on the left, Soh's on the right,
   one marker between them. Steps Soh has taken are filled; "now" sits on the line; steps ahead are open;
   the last one, the goal, is red. */
.duo { margin-top: clamp(48px, 6vw, 80px); }
.duo__head, .duo__row { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; }
.duo__head { font: 400 var(--t-lead) / 1.2 var(--serif); color: var(--soft); }
.duo__head span:first-child { text-align: right; }
.duo__rows { position: relative; margin-top: 18px; padding-bottom: 18px; }
.duo__rows::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 8px; width: 4px; margin-left: -2px; background: var(--ink); }
.duo__rows::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 20px; height: 12px; margin-left: -10px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.duo__row { padding: 14px 0; }
.duo__naruto, .duo__soh { font: 400 var(--t-lead) / 1.35 var(--sans); overflow-wrap: anywhere; }
.duo__naruto { text-align: right; }
.duo__soh { font-weight: 600; }
.duo__dot { position: relative; z-index: 1; justify-self: center; width: 18px; height: 18px; background: var(--ink); }
.is-ahead .duo__dot { background: var(--bg); border: 4px solid var(--ink); }
.is-goal .duo__dot { width: 24px; height: 24px; background: var(--accent); }
.is-goal .duo__soh, .is-goal .duo__naruto { font-weight: 600; }
.duo__now { display: grid; place-items: center; padding: 6px 0; }
.duo__now span { position: relative; z-index: 1; padding: 6px 14px; background: var(--ink); color: var(--bg); font: 600 var(--t-small) / 1 var(--sans); }

@media (max-width: 52em) {
  .logo-link__name, .org__name { font-size: var(--t-lead); }
  .orgs { grid-template-columns: 1fr; }
  .duo__head, .duo__row { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
  .duo__naruto, .duo__soh { font-size: var(--t-body); }
  .duo__dot { width: 14px; height: 14px; }
  .is-goal .duo__dot { width: 18px; height: 18px; }
}

/* ---------- Entrances: each part rises once as it arrives ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.splash__name { animation: rise 600ms 80ms var(--ease-out) both; }
.splash__lead { animation: rise 600ms 150ms var(--ease-out) both; }
.splash__links li, .hug { animation: rise 600ms var(--ease-out) both; }
.hug { animation-delay: 240ms; }
.splash__links li:nth-child(1) { animation-delay: 440ms; }
.splash__links li:nth-child(2) { animation-delay: 480ms; }
.splash__links li:nth-child(3) { animation-delay: 520ms; }
.splash__links li:nth-child(4) { animation-delay: 560ms; }
.top { animation: fade 700ms 150ms var(--ease-out) both; }
.splash__art { animation: fade 900ms var(--ease-out) both; }
@keyframes fade { from { opacity: 0; } }

.rise [data-rise] { transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.rise [data-rise]:not(.is-in) { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
  .rise [data-rise]:not(.is-in) { transform: none; }
}

/* ---------- Phone and small tablet ---------- */

@media (max-width: 52em) {
  .splash { grid-template-columns: 1fr; align-items: start; }
  .splash__art { grid-column: 1; grid-row: 1; justify-self: center; width: min(94%, 440px); height: auto; overflow: visible; align-self: start; }
  .splash__text { grid-column: 1; grid-row: 2; margin-top: 8px; }
  .bar { flex-wrap: wrap; }
  /* the home bar on a phone: the two clocks stacked beside language and light, the pages on the row below */
  .top { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 0; }
  .top__time { flex-direction: column; }
  .top .bar__nav { grid-column: 1 / -1; }
  .bar__nav { order: 3; width: 100%; margin-left: 0; gap: 4px 22px; }
  .hug { padding-bottom: 5rem; }
}