/* ニチカエ preview
   Two main colours (black ground, white ink) and one accent (aurora mint) kept for the action
   and the drawings. Surfaces are separated by tone steps, never by lines, glows or gradients.
   Two typefaces: Shippori Mincho for display, Zen Kaku Gothic New for everything else. */
:root {
  --ink: #000;
  --paper: #fff;
  --accent: #7df0c8;

  --raise: #101010;   /* one tone step up from the ground */
  --raise-2: #1a1a1a; /* two steps */
  --quiet: rgba(255, 255, 255, .62); /* small notes only; running text stays full white */

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --gutter: 20px;
  --max: 1200px;
  --gap: 112px; /* between sections; always larger than any gap inside one */
  --bar-h: 30px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 500 17px/1.8 var(--sans);
  overflow-x: hidden;
  padding-bottom: 76px; /* room for the sticky apply bar on phones */
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 700; word-break: auto-phrase; text-wrap: balance; }
p { margin: 0; }

/* ---------- language toggle ---------- */
html[lang="ja"] [lang="en"]:not(html) { display: none !important; }
html[lang="en"] [lang="ja"]:not(html) { display: none !important; }

/* ---------- preview bar + header ---------- */
.preview-banner {
  position: sticky; top: 0; z-index: 60;
  min-height: var(--bar-h); display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 700; padding: 4px var(--gutter); text-align: center;
}
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); }
.preview-banner + .site-header { top: var(--bar-h); }
.site-header .inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; gap: 16px; padding: 12px var(--gutter);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; overflow: hidden; flex: none; }
.brand-mark img { width: 56px; height: 56px; max-width: none; margin: -11px; mix-blend-mode: lighten; }
.brand b { font-size: 19px; letter-spacing: .06em; }
.nav { display: none; margin-left: auto; gap: 28px; font-size: 15px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang-toggle { display: inline-flex; background: var(--raise-2); border-radius: 999px; padding: 3px; font-size: 12px; }
.lang-toggle button {
  border: 0; background: transparent; color: var(--quiet);
  padding: 5px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out);
}
.lang-toggle button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.menu-btn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--paper); display: grid; place-items: center; cursor: pointer; }
.mobile-nav { display: none; padding: 8px var(--gutter) 20px; background: var(--ink); }
.mobile-nav.open { display: grid; gap: 4px; }
.mobile-nav a { padding: 12px 0; text-decoration: none; font-size: 20px; font-weight: 700; }

/* ---------- buttons and links (fully round, decided once) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--ink);
  font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease-out), background-color .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--paper); } }
.btn.light { background: var(--paper); }
@media (hover: hover) and (pointer: fine) { .btn.light:hover { background: var(--accent); } }
.text-link {
  font-weight: 700; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
  transition: text-underline-offset .16s var(--ease-out);
}
.text-link:hover { text-underline-offset: 9px; }

/* ---------- type scale: five sizes, far apart ---------- */
.display { font-family: var(--serif); font-size: clamp(28px, 8vw, 104px); line-height: 1.12; letter-spacing: -.02em; }
.h2 { font-family: var(--serif); font-size: clamp(30px, 6.4vw, 72px); line-height: 1.18; letter-spacing: -.02em; }
.statement { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.6; font-weight: 700; max-width: 30em; }
.h3 { font-size: 22px; line-height: 1.5; }
.small { font-size: 14px; line-height: 1.7; color: var(--quiet); }

/* ---------- layout ---------- */
.section { padding: var(--gap) var(--gutter) 0; }
.section:last-of-type { padding-bottom: var(--gap); }
.wrap { max-width: var(--max); margin: 0 auto; }
.narrow { max-width: 760px; margin: 0 auto; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.split > *, .judge > *, .days > * { min-width: 0; }
button, input, select, textarea { font-family: inherit; }
.stack > * + * { margin-top: 20px; }
.field-raise { background: var(--raise); padding-top: calc(var(--gap) * .75); padding-bottom: calc(var(--gap) * .75); margin-top: var(--gap); }
.field-paper { background: var(--paper); color: var(--ink); padding-top: calc(var(--gap) * .75); padding-bottom: calc(var(--gap) * .75); margin-top: var(--gap); }
.field-paper .small { color: rgba(0, 0, 0, .62); }
.field-paper .btn { background: var(--ink); color: var(--paper); }

/* ---------- hero (the page's one centred moment) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 110px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 56px var(--gutter) 64px; text-align: center;
}
.hero canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero .motto-line { font-size: 15px; font-weight: 700; letter-spacing: .04em; margin-bottom: 20px; }
.hero .sub { color: var(--quiet); margin-top: 12px; font-size: 15px; }
.countdown { display: flex; justify-content: center; gap: clamp(14px, 4vw, 48px); margin: 40px 0 6px; }
.countdown > div { min-width: 2.2ch; }
.countdown .num {
  display: block; overflow: hidden; height: 1.1em;
  font-family: var(--serif); font-size: clamp(44px, 12vw, 120px); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.countdown .num span { display: block; }
.countdown .num span.roll { animation: roll .42s var(--ease-out); }
@keyframes roll { from { transform: translateY(45%); opacity: 0; } to { transform: none; opacity: 1; } }
.countdown .unit { font-size: 14px; color: var(--quiet); }
.countdown-label { font-size: 14px; color: var(--quiet); }
.hero .lead { font-size: clamp(18px, 2.4vw, 24px); font-weight: 700; line-height: 1.7; margin: 40px auto 28px; max-width: 26em; }
.hero .guardian { margin-top: 22px; font-size: 14px; max-width: 32em; }
.hero .guardian b { color: var(--accent); }

/* ---------- concept ---------- */
.motto { display: grid; gap: 28px; margin-top: 8px; }
.motto b { display: block; font-family: var(--serif); font-size: clamp(30px, 5vw, 52px); line-height: 1.1; letter-spacing: -.01em; }
.motto span { display: block; margin-top: 6px; }

/* ---------- program: two days, the second on a raised field ---------- */
.days { display: grid; gap: 4px; margin-top: 48px; }
.day { padding: 32px 0; }
.day.selected { background: var(--raise-2); padding: 32px 24px; margin: 0 calc(var(--gutter) * -1); }
.day .name { font-family: var(--serif); font-size: clamp(56px, 9vw, 104px); line-height: 1; }
.day .who { font-weight: 700; margin: 14px 0 6px; color: var(--accent); }
.day .h3 { margin-bottom: 10px; }

/* ---------- key dates: a row of large dates ---------- */
.dates { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 28px; }
.dates time { display: block; font-family: var(--serif); font-size: clamp(30px, 4.2vw, 48px); line-height: 1.15; }
.dates li.main time { font-size: clamp(40px, 6vw, 72px); }

/* ---------- schedule ---------- */
.times { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.times li { display: grid; grid-template-columns: 4.6em 1fr; gap: 16px; align-items: baseline; }
.times time { font-family: var(--serif); font-size: 26px; font-variant-numeric: tabular-nums; }
.times .h3 { font-size: 18px; }

/* ---------- eligibility ---------- */
.facts { margin: 40px 0 0; display: grid; gap: 22px 40px; }
.facts dt { font-size: 14px; color: var(--quiet); }
.facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }

/* ---------- judges: alternating rows, drawing then words ---------- */
.judge { display: grid; gap: 24px; align-items: center; margin-top: 56px; }
.judge .h2 { font-size: clamp(30px, 4.6vw, 56px); }
.judge p + p { margin-top: 10px; }

/* ---------- what you take home ---------- */
.gains { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 32px 56px; }
.gains b { display: block; font-size: 20px; margin-bottom: 4px; }

/* ---------- how to apply ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.steps .h3 { margin-bottom: 4px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 4px; }
.faq details { background: var(--raise); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 20px; position: relative; font-weight: 700;
  transition: background-color .16s var(--ease-out);
}
.faq summary:hover { background: var(--raise-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; translate: 0 -50%;
  font-size: 26px; font-weight: 400; transition: rotate .2s var(--ease-out);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details > p { padding: 0 20px 22px; }
.faq details[open] > p { animation: open-in .24s var(--ease-out); }
@keyframes open-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- closing + footer: the name returns at full width ---------- */
.closing { padding: var(--gap) var(--gutter) 0; }
.closing .wrap > * + * { margin-top: 24px; }
.site-footer { padding: var(--gap) var(--gutter) 28px; font-size: 15px; }
.site-footer .cols { max-width: var(--max); margin: 0 auto; display: grid; gap: 32px; }
.site-footer h4 { font-size: 14px; color: var(--quiet); margin: 0 0 10px; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.wordmark {
  max-width: var(--max); margin: 72px auto 0;
  font-family: var(--serif); font-weight: 700; line-height: .9; letter-spacing: -.03em;
  font-size: min(21vw, 290px); white-space: nowrap;
}
.copyright { max-width: var(--max); margin: 24px auto 0; font-size: 13px; color: var(--quiet); }

/* ---------- sticky apply ---------- */
.sticky-apply {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--ink); display: flex; justify-content: center;
}
.sticky-apply .btn { width: 100%; max-width: 440px; }

/* ---------- brush drawings ---------- */
.brush-art { width: 100%; overflow: hidden; }
.brush-art canvas { width: 100% !important; height: 100% !important; }
.art-wide { aspect-ratio: 3 / 1; max-width: 520px; }
.art-judge { aspect-ratio: 4 / 3; max-width: 420px; background: var(--raise); }
.art-shield { aspect-ratio: 1 / 1; max-width: 300px; }

/* ---------- entrances: heading, then text, then picture. Visible without JS. ---------- */
.js [data-reveal] > * { opacity: 0; transform: translateY(24px); }
.js [data-reveal].in > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js [data-reveal].in > *:nth-child(2) { transition-delay: .07s; }
.js [data-reveal].in > *:nth-child(3) { transition-delay: .14s; }
.js [data-reveal].in > *:nth-child(4) { transition-delay: .21s; }
.js [data-reveal].in > *:nth-child(n+5) { transition-delay: .28s; }

/* ---------- forms (apply page) ---------- */
.form { display: grid; gap: 8px; }
.form fieldset { border: 0; background: var(--raise); padding: 24px 20px; margin: 0; }
.form legend { float: left; width: 100%; padding: 0; margin-bottom: 16px; font-size: 20px; font-weight: 700; }
.form legend + * { clear: both; }
.form label { display: block; font-size: 15px; margin-bottom: 6px; }
.form .req { color: var(--accent); font-size: 13px; margin-left: 6px; }
.form input[type="text"], .form input[type="email"], .form input[type="number"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--ink); color: var(--paper);
  border: 1px solid #333; border-radius: 0; font: inherit; font-size: 16px;
  transition: border-color .16s var(--ease-out);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form textarea { min-height: 120px; }
.form .row { display: grid; gap: 16px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.check input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-top: 6px; background: var(--raise-2); cursor: pointer; font-size: 15px; transition: background-color .16s var(--ease-out); }
.choice:has(input:checked) { background: #24342e; }
.choice input { accent-color: var(--accent); width: 20px; height: 20px; margin-top: 4px; flex: none; }
.guardian-box { box-shadow: inset 4px 0 0 var(--accent); }
.hint { font-size: 14px; color: var(--quiet); margin: 8px 0 0; }
.error { color: #ffb4a8; font-size: 14px; margin: 8px 0 0; }
.notice { background: var(--raise-2); padding: 16px 18px; font-size: 15px; }
.result { display: none; background: var(--raise-2); padding: 24px 20px; }
.result.show { display: block; }

/* ---------- policy pages ---------- */
.doc h1 { font-family: var(--serif); font-size: clamp(32px, 6vw, 56px); line-height: 1.2; margin: 0 0 20px; }
.doc h2 { font-size: 20px; margin: 44px 0 10px; }
.doc p, .doc li { font-size: 16px; }
.doc p + p { margin-top: 12px; }
.doc ol, .doc ul { padding-left: 1.3em; margin: 0; }
.draft-flag { display: block; background: var(--raise-2); padding: 12px 16px; font-size: 14px; font-weight: 700; margin-bottom: 28px; }

/* ---------- wider screens ---------- */
@media (min-width: 760px) {
  :root { --gutter: 32px; --gap: 160px; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .split.wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .days { grid-template-columns: 1fr 1fr; gap: 0; }
  .day { padding: 40px 40px 40px 0; }
  .day.selected { margin: 0; padding: 40px; }
  .dates { grid-template-columns: repeat(4, 1fr); }
  .dates li.main { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .judge { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .judge.flip .brush-art { order: 2; justify-self: end; }
  .gains { grid-template-columns: 1fr 1fr; }
  .form .row.two { grid-template-columns: 1fr 1fr; }
  .site-footer .cols { grid-template-columns: 2fr 1fr 1.4fr 1.4fr; }
  .form fieldset { padding: 32px; }
}
@media (min-width: 1100px) {
  .nav { display: flex; }
  .menu-btn { display: none; }
  .header-actions { margin-left: 28px; }
  body { padding-bottom: 0; }
  .sticky-apply { left: auto; right: 28px; bottom: 28px; padding: 0; background: none; }
  .sticky-apply .btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] > *, .js [data-reveal].in > * { opacity: 1; transform: none; transition: none; }
  .countdown .num span.roll, .faq details[open] > p { animation: none; }
}