/* ==========================================================================
   minoriAI — site styles

   Two palettes, both taken from the app (theme/palettes.ts) rather than
   invented here:
     light  washi  生成り — cream paper, indigo 紺青, gold 金茶
     dark   momiji 紅葉   — warm sumi ink, ember 緋, autumn gold 黄朽葉

   Every colour is a token. Swapping the whole look means editing the two
   token blocks below and nothing else.

   Design rules this file follows deliberately:
   - No gradients, no blur, no shadows-as-decoration. Hierarchy comes from
     type, space and hairlines only.
   - No JavaScript anywhere on the page.
   - Colour is never the only carrier of meaning.

   Swapping the whole look is a matter of editing the token block below.
   ========================================================================== */

:root {
    /* Type families. The only webfont is the subset of Yuji Syuku below, served
       from this same folder — so the page still makes zero third-party
       requests, and no request to fonts.googleapis.com. */
    /* Japanese glyphs use the app's calligraphy face. In the app this is
       YujiSyuku_400Regular, and it is reserved for kanji characters only —
       tab icons, tile glyphs, conjugation tables — never for Latin and never
       emboldened. There is a single 400 weight, so applying a heavier weight
       would produce faux-bold, which looks wrong on a brush face. */
    --font-jp: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
        "Noto Serif JP", "Source Han Serif", serif;

    /* Latin display face. The app pairs Yuji Syuku with Cinzel and Playfair
       Display; this serif stack stands in for them on the web until those are
       wired up too. */
    --font-display: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
        "Source Han Serif", "Songti SC", SimSun, Georgia, "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Spacing, in the 4 / 16 / 36 rhythm. */
    --space-1: 0.25rem; /* 4  — micro */
    --space-4: 1rem; /* 16 — components */
    --space-9: 2.25rem; /* 36 — sections */
    --space-lg: 4.5rem; /* 72 — 2 × 36 */
    --space-xl: 9rem; /* 144 — 4 × 36 */

    --measure: 68ch;
    --wrap: 72rem;
    --radius: 3px;
}

@font-face {
    font-family: "Yuji Syuku";
    src: url("fonts/yuji-syuku.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* Subset: every kana, plus the kanji this page actually uses. The range
       also stops the browser from ever trying this face for Latin text.
       Adding new kanji means regenerating the subset — see fonts/README.md. */
    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+5B9F, U+5BB6, U+8F9E, U+FF01-FF5E;
}

:root {
    color-scheme: light;

    /* ── Light: washi 生成り — cream paper, indigo 紺青, gold 金茶 ──────── */
    --bg: #fffbf5;
    --bg-sunk: #f8f1e3;
    --text: #121212;
    --text-muted: #666666;
    --accent: #003298; /* indigo — links and filled buttons */
    --accent-contrast: #fffbf5;
    --gold: #d4af37; /* 金茶 — rules and ornament only, never small text */
    --gold-ink: #8a6a22; /* darker gold for small text: 4.9:1 on cream */
    --gold-hair: #e6d9b4; /* hairlines */
    --mark: #003298; /* the 実 brand mark */
    --rule: rgba(18, 18, 18, 0.14);
    --card: rgba(212, 175, 55, 0.1); /* the app's cardBackground */
    --chip: rgba(18, 18, 18, 0.06);
}

/* ── Dark: momiji 紅葉 — warm sumi ink, ember 緋, autumn gold 黄朽葉 ─────
   The app's autumn palette (theme/palettes.ts), used here for its dark half.
   Washi's own dark tokens lean lavender (#121212 + #BB86FC), which loses the
   paper-and-ink character entirely; momiji's warm ink keeps it.

   The tokens below appear twice, once for the explicit choice and once for the
   system preference. CSS cannot share a declaration block between an attribute
   selector and a media query, so any change here must be mirrored in both.
   The explicit choice wins: [data-theme] on <html> is set by the toggle. */

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1e1812; /* warm 墨 ink */
    --bg-sunk: #2e2419; /* 憲法染 warm charcoal */
    --text: #f7efe4; /* 白練 bleached silk */
    --text-muted: #a8927a; /* 灰茶 ash tea */
    --accent: #f0664e; /* 紅緋 ember — links and filled buttons */
    --accent-contrast: #1e1812; /* ink on ember */
    --gold: #e29c45; /* 黄朽葉 autumn gold */
    --gold-ink: #e29c45;
    --gold-hair: #5c4a32; /* 路考茶 hairline */
    --mark: #e29c45;
    --rule: rgba(247, 239, 228, 0.16);
    --card: #cf3a241a; /* 緋 10% — the app's cardBackground */
    --chip: rgba(247, 239, 228, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #1e1812; /* warm 墨 ink */
        --bg-sunk: #2e2419; /* 憲法染 warm charcoal */
        --text: #f7efe4; /* 白練 bleached silk */
        --text-muted: #a8927a; /* 灰茶 ash tea */
        --accent: #f0664e; /* 紅緋 ember — links and filled buttons */
        --accent-contrast: #1e1812; /* ink on ember */
        --gold: #e29c45; /* 黄朽葉 autumn gold */
        --gold-ink: #e29c45;
        --gold-hair: #5c4a32; /* 路考茶 hairline */
        --mark: #e29c45;
        --rule: rgba(247, 239, 228, 0.16);
        --card: #cf3a241a; /* 緋 10% — the app's cardBackground */
        --chip: rgba(247, 239, 228, 0.08);
    }
}

/* ── Reset ────────────────────────────────────────────────────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.0625rem; /* 17px */
    line-height: 1.65;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

/* ── Links ────────────────────────────────────────────────────────────── */

a {
    color: var(--accent);
    text-decoration-line: underline;
    text-decoration-color: var(--gold-hair);
}

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

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

/* Headings can be link targets from the nav; keep them clear of the header. */
[id] {
    scroll-margin-top: 5.5rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: var(--space-4);
    background: var(--accent);
    color: var(--accent-contrast);
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ── Layout primitives ────────────────────────────────────────────────── */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 40rem) {
    .wrap {
        padding-inline: var(--space-9);
    }
}

.section {
    padding-block: var(--space-lg);
    border-top: 1px solid var(--rule);
}

@media (min-width: 48rem) {
    .section {
        padding-block: var(--space-xl);
    }
}

/* Standalone subpage body. No top border: the site header already draws one. */
.page {
    padding-block: var(--space-xl) var(--space-lg);
}

.section__head {
    max-width: var(--measure);
    margin-bottom: var(--space-9);
}

/* Subpages open straight into a heading rather than a hero, so the h1 takes
   the size the h2 has inside a section on the home page. */
.section__head h1,
.section__head h2 {
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
}

/* ── Small type: eyebrow, lede, note ──────────────────────────────────── */

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin-bottom: var(--space-4);
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    margin-right: 0.6rem;
    vertical-align: 0.3em;
    background: var(--gold);
}

.lede {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin-top: var(--space-4);
    max-width: 46ch;
}

.note {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 52ch;
}

.updated {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: var(--space-4);
}

/* Placeholders in the source stand out so nothing false ships by accident. */
.placeholder {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--chip);
    border-bottom: 1px dashed var(--gold);
    padding: 0.1em 0.3em;
    border-radius: var(--radius);
}

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-9);
    padding-block: var(--space-4);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--mark);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.wordmark--small {
    font-size: 1.125rem;
}

/* The mark is logo.svg beside this stylesheet, with logo-dark.svg as the same
   artwork in the dark palette's gold 黄朽葉 — indigo 紺青 is unreadable on the
   ink background. Both are shipped and CSS hides one, exactly as the theme
   toggle swaps its moon and sun icons; the artwork keeps fixed colours and no
   rule here tries to recolour it.

   Size is set by height only. Width follows from the artwork, so the mark can
   never stretch. */
.brandmark {
    display: block;
    width: auto;
}

.brandmark--dark {
    display: none;
}

:root[data-theme="dark"] .brandmark--light {
    display: none;
}

:root[data-theme="dark"] .brandmark--dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brandmark--light {
        display: none;
    }

    :root:not([data-theme="light"]) .brandmark--dark {
        display: block;
    }
}

/* Header lockup. The mark now carries the name itself — furigana over "minori"
   with "AI" beside it — so it is set larger than the old square glyph was: at
   1.1em the kana were around 5px and the furigana read as a smudge. Width
   follows from the artwork, which is ~2.1:1. */
.wordmark .brandmark {
    height: 1.6em;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    list-style: none;
}

/* Keeps the header nav and everything after it (the theme toggle) pinned to
   the right, so adding the toggle does not drift the nav toward the centre.
   Scoped to the header: the footer nav is laid out by its own flex row. */
.site-header .nav {
    margin-left: auto;
}

.nav a {
    display: inline-block;
    padding: 0.35rem 0;
    font-size: 0.9375rem;
    color: var(--text-muted);
    text-decoration: none;
}

.nav a:hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--gold);
}

/* ── Theme toggle ─────────────────────────────────────────────────────────
   Hidden until .has-js is on <html>: without JavaScript the button could not
   do anything, and a control that does nothing is worse than no control. With
   no JavaScript the page still follows the system preference via the media
   query above. */

.theme-toggle {
    display: none;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 44px; /* minimum comfortable touch target */
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition:
        color 0.15s ease-out,
        border-color 0.15s ease-out,
        background-color 0.15s ease-out;
}

.has-js .theme-toggle {
    display: inline-flex;
}

.theme-toggle:hover {
    color: var(--text);
    border-color: var(--gold);
    background: var(--card);
}

.theme-toggle svg {
    display: block;
}

/* Show the icon for the theme the button switches *to*: a moon while the page
   is light, a sun while it is dark. Mirrors the token rules, including the
   no-explicit-choice case. */
.theme-toggle__icon--sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__icon--moon {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle__icon--sun {
        display: block;
    }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
    display: grid;
    gap: var(--space-9);
    padding-block: var(--space-lg) var(--space-lg);
    border-top: 0;
}

@media (min-width: 48rem) {
    .hero {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: var(--space-lg);
        padding-block: var(--space-xl);
    }
}

/* The hero eyebrow is a sentence, not a section label, so it keeps whatever
   case is written in the HTML. Section eyebrows keep the uppercase treatment. */
.hero__text .eyebrow {
    text-transform: none;
}

/* Sized to track the column, not the viewport. The headline has a hard break
   ("The best of AI," / "without the hassle or the risk"), so the second line
   must fit on one line or it re-wraps to a third. The available column is
   roughly 0.96vw - 213px between 48rem and 72rem, because the decorative glyph
   beside it grows with the viewport; above 72rem the wrap caps and the column
   settles near 883px. Measured limits with the current face: 62px at 1280,
   54px at 1024, 45px at 900. The formula below stays under all of them. */
.hero__title {
    font-size: clamp(2.25rem, calc(6.5vw - 0.95rem), 3.75rem);
    letter-spacing: -0.015em;
}

.hero__lede {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 42ch;
    /* Tighter than the old hero: the promise sits directly under the headline
       as one unit, and the size contrast carries the separation. */
    margin-top: var(--space-4);
}

/* Detail line under the promise: the app, named once, at caption scale. */
.hero__text .note {
    margin-top: var(--space-4);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-9);
}

/* The brand mark beside the hero, now the logo itself rather than a set 実
   in the calligraphy face. Decorative, so it only appears once there is a
   column to hold it. */
.hero__glyph {
    display: none;
}

@media (min-width: 48rem) {
    .hero__glyph {
        display: block;
        padding-left: var(--space-9);
        border-left: 1px solid var(--gold-hair);
    }

    .hero__glyph .brandmark {
        height: clamp(3.5rem, 2rem + 4vw, 5.5rem);
    }
}

/* The kanji inside the Latin eyebrow keeps the brush face's own weight rather
   than inheriting the emboldened, letterspaced treatment around it. */
.eyebrow [lang="ja"] {
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 1.05em;
    letter-spacing: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color 0.15s ease-out,
        color 0.15s ease-out,
        border-color 0.15s ease-out;
}

.button--primary {
    background: var(--accent);
    color: var(--accent-contrast);
}

.button--primary:hover {
    background: var(--text);
    color: var(--bg);
}

.button--outline {
    border-color: var(--rule);
    color: var(--text);
}

.button--outline:hover {
    border-color: var(--gold);
    background: var(--card);
}

.button--quiet {
    color: var(--text-muted);
}

.button--quiet:hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--gold);
}

.button--large {
    font-size: 1.0625rem;
    padding: 0.9rem 1.8rem;
}

/* ── About: numbered editorial list, not a card grid ──────────────────── */

.work {
    list-style: none;
    border-top: 1px solid var(--rule);
}

.work__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1) var(--space-9);
    padding-block: var(--space-9);
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 48rem) {
    .work__item {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .work__num {
        grid-row: span 2;
    }
}

.work__num {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--gold-ink);
}

.work__title {
    font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
}

.work__body {
    color: var(--text-muted);
    max-width: var(--measure);
    margin-top: var(--space-4);
}

/* ── Products: one row per product ─────────────────────────────────────── */

.products {
    list-style: none;
    border-top: 1px solid var(--rule);
}

.products__item {
    position: relative;
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-9);
    border-bottom: 1px solid var(--rule);
}

.products__name {
    font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
}

.products__link {
    color: inherit;
    text-decoration-line: none;
}

/* Stretch the title's link over the whole row: the row is one click target,
   but the title stays the only link in the accessibility tree. */
.products__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.products__item:hover .products__link {
    text-decoration-line: underline;
    text-decoration-color: var(--gold);
}

.products__body {
    color: var(--text-muted);
    max-width: var(--measure);
    margin-top: var(--space-4);
}

/* ── Kotobaya ─────────────────────────────────────────────────────────── */

.app-name {
    display: inline;
}

.app-kana {
    display: inline-block;
    font-family: var(--font-jp);
    font-size: 0.4em;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--gold-ink);
    vertical-align: 0.7em;
    margin-left: 0.5rem;
}

.app {
    display: grid;
    gap: var(--space-9);
    align-items: start;
}

@media (min-width: 56rem) {
    .app {
        grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
        gap: var(--space-lg);
    }
}

.app__detail > p {
    max-width: var(--measure);
}

.features {
    list-style: none;
    margin-block: var(--space-9);
    border-top: 1px solid var(--rule);
}

.features li {
    padding: 0.7rem 0 0.7rem 1.5rem;
    border-bottom: 1px solid var(--rule);
    position: relative;
    max-width: var(--measure);
}

.features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.35em;
    width: 0.6rem;
    height: 1px;
    background: var(--gold);
}

.stores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

/* ── The name mark ────────────────────────────────────────────────────── */

.entry {
    margin: 0;
    padding: var(--space-9);
    background: var(--card);
    border: 1px solid var(--gold-hair);
    border-radius: var(--radius);
}

.entry__word {
    font-family: var(--font-jp);
    font-size: 3rem;
    line-height: 1.1;
    color: var(--mark);
}

.entry__reading {
    font-family: var(--font-jp);
    font-size: 1.0625rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.entry__caption {
    margin-top: var(--space-4);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ── Long-form prose (policy) ─────────────────────────────────────────── */

.prose {
    max-width: var(--measure);
}

/* The policy now lives on its own page, so its top-level headings are h2
   rather than h3. They keep the small body-font treatment either way. */
.prose h2,
.prose h3 {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: var(--space-9);
    margin-bottom: var(--space-1);
}

.prose h2:first-child,
.prose h3:first-child {
    margin-top: 0;
}

.prose p,
.prose ul {
    color: var(--text-muted);
}

.prose p + p,
.prose ul + p {
    margin-top: var(--space-4);
}

.prose ul {
    list-style: none;
    margin-top: var(--space-4);
}

.prose li {
    position: relative;
    padding-left: 1.5rem;
    margin-top: var(--space-1);
}

.prose li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 0.6rem;
    height: 1px;
    background: var(--gold);
}

.prose strong {
    color: var(--text);
    font-weight: 600;
}

.prose a {
    text-decoration-color: var(--gold-hair);
}

/* ── Legal notice ─────────────────────────────────────────────────────── */

.legal {
    margin: 0;
    max-width: var(--measure);
    border-top: 1px solid var(--rule);
}

.legal__row {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 34rem) {
    .legal__row {
        grid-template-columns: 12rem minmax(0, 1fr);
        gap: var(--space-4);
        align-items: baseline;
    }
}

.legal dt {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

.legal dd {
    margin: 0;
    color: var(--text-muted);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
    border-top: 1px solid var(--rule);
    margin-top: var(--space-lg);
    padding-block: var(--space-9);
    background: var(--bg-sunk);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4) var(--space-9);
}

.site-footer .note {
    margin-top: var(--space-1);
}

/* ── Motion: one restrained entrance, fully optional ──────────────────── */

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

    .hero__text,
    .hero__glyph {
        animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .hero__glyph {
        animation-delay: 0.08s;
    }

    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(0.75rem);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}