/* ShoiUku components — copied from the design system (components/bundle.css). */

/* ShoiUku components. Every colour, space and radius comes from tokens.json. */
/* The logo's language: a pot (narrow neck, round belly), a flowing hook stroke with round ends. */
:root {
  --su-pot: var(--radius-neck) var(--radius-neck) var(--radius-belly) var(--radius-belly);
  --su-pot-lg: var(--radius-neck) var(--radius-neck) var(--radius-belly-lg) var(--radius-belly-lg);
  --su-hook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 36' preserveAspectRatio='none'%3E%3Cpath d='M9 27C52 8 112 4 162 16c38 9 68 10 89-7' fill='none' stroke='black' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}

body { margin: 0; font-family: var(--font-body); font-size: 20px; line-height: 30px; font-weight: 500; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.su-pad { padding: var(--space-6); }
.su-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.su-stack { display: grid; gap: var(--space-4); }
.su-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.su-band { background: var(--brown); color: var(--cream); }
.su-gold-text { background: linear-gradient(90deg, var(--yellow), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Button */
.su-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.su-btn:hover { transform: translateY(-1px); }
.su-btn:active { transform: translateY(0); }
.su-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.su-btn-lg { min-height: 52px; padding: 0 var(--space-8); font-size: 14px; }
.su-btn-primary { background: var(--orange); color: var(--on-orange); }
.su-btn-primary:hover { background: var(--yellow); }
.su-btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.su-btn-secondary:hover { background: var(--surface-sunken); }
.su-btn-quiet { background: transparent; color: var(--orange-text); padding: 0 var(--space-2); text-decoration: underline; text-underline-offset: 4px; }
.su-band .su-btn-secondary { color: var(--cream); border-color: var(--cream); }
.su-band .su-btn-secondary:hover { background: transparent; color: var(--yellow); border-color: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .su-btn { transition: none; } .su-btn:hover { transform: none; } }

/* StatusBadge */
.su-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.su-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.su-badge-done { background: var(--teal-soft); color: var(--teal); }
.su-badge-progress { background: var(--orange-soft); color: var(--orange-text); }
.su-badge-blocked { background: var(--rust-soft); color: var(--rust); }
.su-badge-planned { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.su-badge-planned::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* SectionHeader */
.su-sh { position: relative; display: grid; gap: var(--space-3); max-width: 760px; }
.su-sh-center { margin-inline: auto; text-align: center; justify-items: center; }
.su-sh-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-text); }
.su-sh-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 44px); line-height: 1.12; letter-spacing: -0.015em; text-transform: uppercase; text-wrap: balance; color: var(--ink); }
.su-sh-intro { margin: 0; font-size: 24px; line-height: 32px; color: var(--ink-muted); max-width: var(--measure); }
.su-sh-numeral { position: absolute; z-index: -1; top: -0.28em; right: 0; font-family: var(--font-display); font-weight: 400; font-size: 180px; line-height: 1; color: var(--orange); opacity: 0.22; pointer-events: none; user-select: none; }
.su-sh { isolation: isolate; }
.su-band .su-sh-title { color: var(--cream); }
.su-band .su-sh-eyebrow { color: var(--yellow); }
.su-band .su-sh-intro { color: var(--cream); }
.su-band .su-sh-numeral { color: var(--cream); opacity: 0.12; }

/* Stat */
.su-stat { display: grid; gap: var(--space-2); }
.su-stat::before { content: ""; display: block; width: 96px; height: 14px; background: var(--orange); -webkit-mask: var(--su-hook) no-repeat 0 0 / contain; mask: var(--su-hook) no-repeat 0 0 / contain; }
.su-stat-value { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.su-stat-unit { font-size: 0.4em; letter-spacing: 0; margin-left: 4px; color: var(--orange-text); }
.su-stat-label { font-size: 18px; line-height: 24px; color: var(--ink-muted); }
.su-band .su-stat-value { color: var(--cream); }
.su-band .su-stat-unit { color: var(--yellow); }
.su-band .su-stat-label { color: var(--cream); }

/* WordCard */
.su-word { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--su-pot); min-width: 0; }
.su-word.is-playing { background: var(--orange-soft); border-color: var(--orange); box-shadow: var(--shadow-lg); }
.su-word-play { grid-row: span 2; width: 56px; height: 56px; border-radius: var(--radius-pill); border: 0; background: var(--orange); color: var(--on-orange); display: grid; place-items: center; cursor: pointer; }
.su-word-play:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.su-word-play svg { width: 22px; height: 22px; fill: currentColor; }
.su-word-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); min-width: 0; }
.su-word-roman { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 36px; color: var(--ink); overflow-wrap: anywhere; }
.su-word-ipa { font-family: var(--font-display); font-size: 15px; color: var(--ink-muted); }
.su-word-gloss { font-size: 20px; line-height: 26px; color: var(--ink); }
.su-word-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 16px; line-height: 21px; font-weight: 600; color: var(--ink-muted); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.su-word-script { grid-column: 1 / -1; font-size: 16px; color: var(--ink-muted); }

/* Timeline */
.su-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.su-tl-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4); padding-bottom: var(--space-8); }
.su-tl-item::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.su-tl-item:last-child { padding-bottom: 0; }
.su-tl-item:last-child::before { display: none; }
.su-tl-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 4px var(--orange); }
.su-tl-milestone .su-tl-dot { background: var(--orange); }
.su-tl-discovery .su-tl-dot { background: var(--yellow); box-shadow: inset 0 0 0 4px var(--orange); }
.su-tl-blocker .su-tl-dot { box-shadow: inset 0 0 0 4px var(--rust); }
.su-tl-body { display: grid; gap: var(--space-2); min-width: 0; padding-top: 2px; }
.su-tl-when { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-text); }
.su-tl-blocker .su-tl-when { color: var(--rust); }
.su-tl-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; text-transform: uppercase; color: var(--ink); }
.su-tl-text { margin: 0; font-size: 19px; line-height: 27px; color: var(--ink-muted); max-width: var(--measure); }

/* RoadmapCard */
.su-rm { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--su-pot); min-width: 0; }
.su-rm-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.su-rm-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 24px; text-transform: uppercase; color: var(--ink); }
.su-rm-text { margin: 0; font-size: 18px; line-height: 25px; color: var(--ink-muted); }
.su-rm-blocked { border-style: dashed; border-color: var(--rust); }

/* PressCard */
.su-press { display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--su-pot); color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s ease; }
a.su-press:hover { border-color: var(--orange); }
a.su-press:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.su-press-outlet { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-text); }
.su-press-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; color: var(--ink); text-wrap: balance; }
.su-press-quote { margin: 0; font-size: 20px; line-height: 28px; color: var(--ink); }
.su-press-meta { font-size: 16px; font-weight: 600; color: var(--ink-muted); }
.su-press-cta { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); text-decoration: underline; text-underline-offset: 4px; }
.su-press-media { aspect-ratio: 9 / 16; max-width: 100%; width: 100%; border-radius: var(--su-pot-lg); overflow: hidden; background: var(--surface-sunken); display: grid; place-items: center; text-align: center; padding: var(--space-6); box-sizing: border-box; color: var(--ink-muted); font-size: 18px; }
.su-press-reel { grid-template-columns: minmax(0, 240px) 1fr; align-items: start; gap: var(--space-6); }
.su-press-reel .su-press-body { display: grid; gap: var(--space-3); min-width: 0; }
@media (max-width: 560px) { .su-press-reel { grid-template-columns: 1fr; } }

/* Notice */
.su-note { display: grid; gap: var(--space-2); padding: var(--space-6); border-radius: var(--su-pot); background: var(--surface-sunken); color: var(--ink); max-width: 720px; }
.su-note-ask { background: var(--orange-soft); }
.su-note-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 22px; text-transform: uppercase; letter-spacing: 0.02em; }
.su-note-body { font-size: 18px; line-height: 26px; }
.su-note-body p { margin: 0 0 var(--space-2); }
.su-note-body p:last-child { margin-bottom: 0; }
.su-note-action { margin-top: var(--space-2); }

/* Hook: the logo's top stroke as an underline or rule */
.su-hook { display: block; width: 120px; height: 15px; background: var(--orange); -webkit-mask: var(--su-hook) no-repeat 0 0 / contain; mask: var(--su-hook) no-repeat 0 0 / contain; }
.su-hook-under { position: relative; display: inline-block; padding-bottom: 0.18em; }
.su-hook-under::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 0.3em; background: var(--orange); -webkit-mask: var(--su-hook) no-repeat 0 0 / 100% 100%; mask: var(--su-hook) no-repeat 0 0 / 100% 100%; }
.su-pot { border-radius: var(--su-pot); }
.su-pot-lg { border-radius: var(--su-pot-lg); overflow: hidden; }

/* PotCurve: the logo's bowl as a section edge */
.su-curve { display: block; margin-top: -1px; width: 100%; height: clamp(40px, 7vw, 110px); }
.su-curve path { fill: currentColor; }
.su-curve-flip { transform: scaleY(-1); }
.su-curve-brown { color: var(--brown); }
.su-curve-surface { color: var(--surface); }
.su-curve-sunken { color: var(--surface-sunken); }
.su-curve-orange { color: var(--orange); }