/*
 * BentoSort: shared base styles, loaded by every page.
 *
 * The page is a bento: a black-lacquer box (the body) with a thin vermilion rim, and inside it
 * a sheet of warm washi paper that holds the content. Food colors come from the app's
 * BentoPalette.swift (salmon, matcha, tamago, rice, nori, sky). System fonts only; nothing is
 * loaded from another host.
 *
 * Measured contrast (WCAG 2.x), light: ink on washi 13.3:1, soft ink 6.8:1, indigo links 9.9:1,
 * vermilion ink 6.0:1, cream on lacquer 14.6:1. Dark: cream on sumi 14.3:1, soft 9.2:1,
 * links 8.9:1, vermilion 7.1:1. Ink on every food color is at least 7.2:1.
 *
 * Page-specific rules live next door: home.css and demo.css (index only), prose.css
 * (support, privacy, impressum). A rule used by one page never goes here.
 */

/* =========================================================================
   Tokens
   ========================================================================= */

:root {
    color-scheme: light dark;

    --lacquer: #1E1916;          /* the box around the page */
    --lacquer-text: #F3EADB;
    --lacquer-soft: #C9BCA8;
    --lacquer-link: #E8A48F;
    --rim: #C4432B;              /* vermilion rim inside the lacquer */
    --paper: #F9F1E6;            /* washi; matches the illustrations' ground */
    --paper-raised: #FFFAF3;
    --ink: #2A2724;
    --ink-soft: #5A534C;
    --indigo: #2B3A67;
    --vermilion-ink: #A63520;
    --wood: #C8895A;
    --wood-light: #E4B98F;
    --wood-dark: #9A6238;
    --rule: rgb(42 39 36 / 0.16);
    --card-shadow: 0 1px 2px rgb(30 25 22 / 0.10), 0 14px 30px -12px rgb(30 25 22 / 0.30);
    --seigaiha: url("../images/seigaiha-light.svg");

    /* BentoPalette.swift */
    --salmon: #F2A189;
    --matcha: #A9C98A;
    --tamago: #F5D06A;
    --rice: #F3EEE2;
    --nori: #2E3A30;
    --sky: #9CCBEA;
    --on-food: #2A2724;          /* text on any food color */

    --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --ja: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;

    --measure: 36rem;
    --radius: 14px;
    --sheet-margin: clamp(8px, 2.2vw, 26px);
    --pad: clamp(18px, 5vw, 64px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --lacquer: #0F0D0C;
        --paper: #1D1A18;          /* sumi */
        --paper-raised: #27231F;
        --ink: #F1E8DA;
        --ink-soft: #C7BBAA;
        --indigo: #A9B8EA;
        --vermilion-ink: #F08A70;
        --rule: rgb(241 232 218 / 0.18);
        --card-shadow: 0 0 0 1px rgb(241 232 218 / 0.10), 0 14px 32px -10px rgb(0 0 0 / 0.65);
        --seigaiha: url("../images/seigaiha-dark.svg");
    }
}

/* =========================================================================
   Base
   ========================================================================= */

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

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

body {
    margin: 0;
    background: var(--lacquer);
    color: var(--ink);
    font: 1.0625rem/1.6 var(--sans);
}

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

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 6.5vw, 4.25rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--indigo); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

code, kbd { font-family: var(--mono); font-size: 0.92em; }

/* Keys look like small wooden blocks. */
kbd {
    display: inline-block; min-width: 2em; text-align: center;
    padding: 0.15em 0.5em; margin-right: 0.15em;
    background: var(--paper-raised); color: var(--ink);
    border: 1.5px solid var(--ink); border-radius: 6px;
    box-shadow: 0 3px 0 var(--ink);
    font-size: 0.95rem; line-height: 1.3;
}

/* Japanese words written in kana, always with their meaning next to them. */
.ja { font-family: var(--ja); font-weight: 600; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 10;
    background: var(--tamago); color: var(--on-food); padding: 0.5rem 1rem; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* =========================================================================
   The sheet: washi inside a lacquer box, with a vermilion rim
   ========================================================================= */

.sheet {
    margin: var(--sheet-margin);
    background: var(--paper);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: 0 0 0 3px var(--rim), 0 0 0 7px var(--lacquer);
    padding: var(--pad);
    padding-top: calc(var(--pad) * 0.6);
}

.wrap { max-width: 72rem; margin-inline: auto; }

/* =========================================================================
   Header and navigation
   ========================================================================= */

.site-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.brand {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
    color: var(--ink); text-decoration: none;
}
.brand img { width: 44px; height: 44px; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 0.25rem 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; color: var(--indigo); }

/* Delight: the icon gives the same small happy bounce as a box that got a file. */
@media (prefers-reduced-motion: no-preference) {
    a:hover > .hop, a:focus-visible > .hop, .hop:hover { animation: hop 420ms cubic-bezier(0.3, 0.7, 0.4, 1.2); }
}
@media (prefers-reduced-motion: reduce) {
    a:hover > .hop, a:focus-visible > .hop, .hop:hover { filter: brightness(1.08); }
}
@keyframes hop {
    0%   { transform: translateY(0) scale(1, 1); }
    30%  { transform: translateY(-5px) scale(0.96, 1.05); }
    60%  { transform: translateY(0) scale(1.06, 0.93); }
    80%  { transform: translateY(0) scale(0.98, 1.02); }
    100% { transform: translateY(0) scale(1, 1); }
}

/* =========================================================================
   On the lacquer: bands below the sheet, and the footer
   ========================================================================= */

.on-lacquer {
    color: var(--lacquer-text);
    padding: clamp(2.5rem, 7vw, 4.5rem) max(16px, calc(var(--sheet-margin) + var(--pad)));
}
.on-lacquer .wrap > * { max-width: var(--measure); }
.on-lacquer a { color: var(--lacquer-link); }
.on-lacquer h2 { color: var(--lacquer-text); }

.site-footer {
    color: var(--lacquer-soft); font-size: 0.92rem;
    padding: 2rem max(16px, calc(var(--sheet-margin) + var(--pad))) 2.5rem;
    background: var(--seigaiha) repeat;
    background-size: 40px 20px;
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0 0 0.75rem; padding: 0; }
.site-footer a { color: var(--lacquer-text); }
.site-footer p { margin: 0; max-width: none; }