/* Moraro pages on the JML.Studio site.
   The studio's neutrals, type, glass and motion, shared with the FAGL pages,
   with one orange accent. Light by default, dark when the system asks for
   it; reduced motion, reduced transparency and more contrast each get their
   own quieter version. Every language has its own page, and html[lang]
   picks the fonts and line breaking for it. */

:root {
  color-scheme: light dark;

  /* studio neutrals: 600 and darker pass AAA on white */
  --white: #ffffff;
  --n50: #fafafa;
  --n100: #f5f5f5;
  --n200: #e5e5e5;
  --n400: #a3a3a3;
  --n600: #525252;
  --n800: #262626;
  --n900: #171717;
  --n950: #0a0a0a;

  /* the one accent */
  --orange: #f4500f;

  --bg: var(--white);
  --ink: var(--n950);
  --ink-soft: var(--n600);
  --surface: var(--n100);
  --line: rgba(10, 10, 10, 0.1);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-hover: rgba(255, 255, 255, 0.92);
  --glass-shadow: 0 0 0 0.5px rgba(10, 10, 10, 0.12),
    0 1px 1px rgba(10, 10, 10, 0.04), 0 10px 24px -10px rgba(10, 10, 10, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Segoe UI", Roboto, sans-serif;

  --edge: 20px;
  --measure: 1120px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--n950);
    --ink: #f5f5f5;
    --ink-soft: var(--n400);
    --surface: var(--n900);
    --line: rgba(255, 255, 255, 0.12);
    --glass: rgba(28, 28, 28, 0.72);
    --glass-hover: rgba(44, 44, 44, 0.9);
    --glass-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16),
      0 10px 24px -10px rgba(0, 0, 0, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

html:lang(ja) body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
  line-break: strict;
}

/* Korean breaks at spaces, not between syllables */
:lang(ko) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
.lead,
.sub {
  text-wrap: balance;
}

/* a word too long for the line may break as a last resort */
h1,
h2,
h3 {
  overflow-wrap: break-word;
}

/* Japanese: break between phrases, not inside them (where supported) */
html:lang(ja) :is(h1, h2, h3, .lead, .sub, .section-lead, .motto, dt, dd) {
  word-break: auto-phrase;
}

p,
li,
dd {
  text-wrap: pretty;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s var(--ease);
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--edge);
  top: 12px;
  transform: translateY(-200%);
  z-index: 10;
  padding: 10px 16px;
  border-radius: 20px;
  background: var(--glass-hover);
  box-shadow: var(--glass-shadow);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus-visible {
  transform: none;
}

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + var(--edge) * 2);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.narrow {
  max-width: calc(720px + var(--edge) * 2);
}

/* ---------- header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* the material only appears where content actually passes underneath */
.top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 0.5px 0 var(--line);
}

@supports (animation-timeline: scroll()) {
  .top::before {
    opacity: 0;
    animation: edge linear both;
    animation-timeline: scroll();
    animation-range: 0 40px;
  }
}

@keyframes edge {
  to {
    opacity: 1;
  }
}

.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* the studio wordmark, small: Bytesized at 24px, traced into an inline SVG
   (one font pixel = 3px), so no font is loaded from another server */
.studio {
  flex: none;
  padding-block: 10px;
  text-decoration: none;
}

.studio svg {
  display: block;
}

.crumb-app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.crumb-sep {
  width: 1px;
  height: 16px;
  background: var(--line);
}

/* language switcher: a glass pill that opens a glass menu */
.lang {
  position: relative;
  flex: none;
}

.lang summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: var(--glass-shadow);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

/* feedback on press, not on release */
.lang summary:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

.lang summary::-webkit-details-marker {
  display: none;
}

.lang summary:hover {
  background: var(--glass-hover);
}

.lang summary:focus-visible {
  outline-offset: 3px;
  border-radius: 18px;
}

.lang svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: var(--glass-shadow);
  transform-origin: 100% 0;
}

.lang[open] .lang-menu {
  animation: pop 0.22s var(--ease);
}

.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.lang-menu a:hover {
  background: var(--line);
}

.lang-menu a:focus-visible {
  outline-offset: -2px;
  border-radius: 12px;
}

.lang-menu a[aria-current]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

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

.hero {
  padding-top: 56px;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.motto {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-soft);
}

.lead {
  max-width: 17em;
  margin: 32px auto 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

html:lang(ja) .sub {
  max-width: 34em;
}

html:lang(ja) .lead {
  max-width: 18em;
  line-height: 1.3;
  letter-spacing: 0;
}

.sub {
  max-width: 30em;
  margin: 16px auto 0;
  font-size: 18px;
  color: var(--ink-soft);
}

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 28px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}

.download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 14px;
  border-radius: 20px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: var(--glass-shadow);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}

.download-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
}

.hero > * {
  animation: rise 0.9s var(--ease) backwards;
}

.hero > :nth-child(2) { animation-delay: 0.07s; }
.hero > :nth-child(3) { animation-delay: 0.14s; }
.hero > :nth-child(4) { animation-delay: 0.21s; }
.hero > :nth-child(5) { animation-delay: 0.28s; }
.hero > :nth-child(6) { animation-delay: 0.35s; }
.hero > :nth-child(7) { animation-delay: 0.42s; }

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

.section {
  padding-top: 104px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* the icon's orange dot */
.eyebrow::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
}

.section h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
}

html:lang(ja) .section h2 {
  line-height: 1.3;
  letter-spacing: 0;
}

.section-lead {
  max-width: 34em;
  margin: 16px 0 0;
  font-size: 18px;
  color: var(--ink-soft);
}

.section p + p {
  margin-top: 12px;
}

/* the landing ends on its last section, with room before the footer */
main > .section:last-child {
  padding-bottom: 120px;
}

/* ---------- text pages (privacy, support) ---------- */

.page-head {
  padding-block: 40px 8px;
}

.page-head h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

html:lang(ja) .page-head h1 {
  letter-spacing: 0;
}

.page-head p {
  margin: 12px 0 0;
  color: var(--ink-soft);
}

.doc {
  padding-bottom: 96px;
}

.doc h2 {
  margin: 48px 0 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.doc p,
.doc ul {
  margin: 14px 0 0;
}

.doc ul {
  padding-left: 1.2em;
}

.doc li + li {
  margin-top: 6px;
}

.doc li::marker {
  color: var(--ink-soft);
}

.doc a {
  overflow-wrap: anywhere;
}

.doc h2[id] {
  scroll-margin-top: 76px;
}

.toc {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-radius: 20px;
  background: var(--surface);
}

.doc .toc h2 {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.doc .toc ol {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  columns: 2 220px;
  column-gap: 24px;
  font-size: 15px;
}

.doc .toc li {
  margin: 0;
  padding-block: 4px;
  break-inside: avoid;
}

.doc .toc a {
  text-decoration: none;
}

.doc .toc a:hover {
  text-decoration: underline;
}

.doc .meta {
  margin-top: 0;
  color: var(--ink-soft);
}

.table {
  margin: 18px 0 0;
}

.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.table th,
.table td {
  padding: 12px 12px 12px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
}

.table th {
  font-weight: 600;
  border-top: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

/* narrow screens: each row becomes a small card of label and value */
@media (max-width: 719px) {
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .table table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
  }

  .table tr {
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }

  .table td {
    padding: 4px 0;
    border: 0;
  }

  .table td::before {
    content: attr(data-label);
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
  }
}

/* support */
.contact {
  margin: 28px 0 0;
  padding: 24px 28px;
  border-radius: 24px;
  background: var(--surface);
}

.contact h2 {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink-soft);
}

.contact .mail {
  display: inline-block;
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.contact p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.doc .faq {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.doc .faq li {
  margin: 0;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}

.faq h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.faq p {
  margin: 8px 0 0;
  color: var(--ink-soft);
}

.more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 8px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

/* ---------- footer ---------- */

.bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-block: 28px 32px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-soft);
}

.bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.bottom a {
  display: inline-block;
  padding-block: 6px;
  margin-block: -6px;
  text-decoration: none;
  background: linear-gradient(currentColor 0 0) left calc(100% - 5px) / 0 1px
    no-repeat;
  transition: color 0.3s var(--ease), background-size 0.45s var(--ease);
}

.bottom a:hover,
.bottom a:focus-visible {
  color: var(--ink);
  background-size: 100% 1px;
}

.bottom p {
  margin: 0;
}

/* ---------- motion ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-4px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero > *,
  .lang[open] .lang-menu {
    animation-name: fade;
    animation-duration: 0.3s;
  }

  .lang summary:active {
    transform: none;
  }
}

/* glass turns solid, and edges get firmer, when the system asks */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: var(--bg);
    --glass-hover: var(--surface);
  }

  .download,
  .skip,
  .lang summary,
  .lang-menu,
  .top::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .top::before {
    background: var(--bg);
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-soft: var(--n800);
    --line: rgba(10, 10, 10, 0.45);
    --glass: var(--bg);
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --ink-soft: var(--n200);
    --line: rgba(255, 255, 255, 0.5);
  }
}

/* ---------- wider screens ---------- */

@media (min-width: 600px) {
  :root {
    --edge: 32px;
  }

  .hero {
    padding-top: 104px;
  }

  .hero h1 {
    font-size: 80px;
  }

  .lead {
    font-size: 44px;
  }

  .sub {
    font-size: 19px;
  }

  .section {
    padding-top: 140px;
  }

  .section h2 {
    font-size: 44px;
  }

  .page-head {
    padding-block: 64px 8px;
  }

  .page-head h1 {
    font-size: 44px;
  }
}

@media (min-width: 900px) {
  .lead {
    font-size: 56px;
  }

  html:lang(ja) .lead {
    font-size: 48px;
  }

  .section h2 {
    font-size: 48px;
  }

  html:lang(ja) .section h2 {
    font-size: 40px;
  }
}

@media (min-width: 1200px) {
  :root {
    --edge: 40px;
  }
}

/* Japanese headlines: a clause wraps as a whole (the generator wraps each
   clause in .ph) */
.ph {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* narrow phones: the studio wordmark and the app name sit a little closer */
@media (max-width: 379px) {
  .crumbs {
    gap: 10px;
  }
}