/* ── Fonts ── */
@font-face {
    font-family: 'Lora';
    src: url('assets/fonts/Lora-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('assets/fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('assets/fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('assets/fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Libre Bodoni';
    src: url('assets/fonts/LibreBodoni-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Libre Bodoni';
    src: url('assets/fonts/LibreBodoni-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Spacing scale */
    --xs: 0.25rem;
    --s:  0.5rem;
    --ms: 0.75rem;
    --m:  1rem;
    --l:  1.5rem;
    --xl: 2.5rem;
    --2xl: 4rem;

    /* Font scale */
    --f-s:  0.75rem;
    --f-m:  1rem;
    --f-ml: 1.25rem;
    --f-l:  1.5rem;
    --f-xl: 2.5rem;

    /* Typography */
    --font-title:     'Libre Bodoni', Charter, Georgia, serif;
    --font-heading:   'Lora', Charter, Georgia, serif;
    --font-sans:      'Atkinson Hyperlegible Next', system-ui, sans-serif;

    /* Neutral palette */
    --bg:     #F5F0E8;
    --ink:    #1A1A18;
    --mid-1:  #6B5558;
    --mid-2:  #89726C;
    --mid-3:  #A89080;
    --rule:   #C8C0B6;

    /* Matisse accent palette */
    --blue:    #2470C8;
    --green:   #4E9A44;
    --magenta: #C2377A;
    --red:     #E04018;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    opacity: 1;
    transition: opacity 0.3s ease;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--m);
    max-width: 800px;
    margin: 0 auto;
    padding: var(--s) clamp(var(--m), 4vw, var(--l)) var(--m) clamp(var(--l), 6vw, var(--2xl));
    line-height: 1.5;
    text-wrap: pretty;
}


body.ready {
    opacity: 1;
}

/* ── Header ── */
header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--l);
}

.lockup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 20vh;
    max-height: 20vw;
    margin-top: var(--m);
}

.logo {
    height: 100%;
    width: auto;
    max-height: 18vw;
    margin-left: -1rem;
}

.title {
    height: 95%;
    width: auto;
    max-height: 17.1vw; /* 95% of 18 */
    margin-right: max(0px, 12vw - 3.5rem);
}

/* ── Two-column layout ── */

main {
    padding-right: var(--s);
}

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--xl);
}

/* 
.col-left {
    padding-right: var(--xl);
    border-right: 0.5px solid var(--rule);
}

.col-right {
    padding-left: var(--xl);
}
*/

/* ── Groups ── */
.group:not(:last-child) {
    border-bottom: 0.5px solid var(--rule);
}

.group-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--s);
    display: none;
}

.group-label {
    font-size: var(--ms);
    font-weight: 500;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    display: none;
}

/* ── Items ── */
.item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: var(--m) 0;
    line-height: 1.4;
    /* border-bottom: 0.5px solid var(--rule); */
}

/*
.item:first-of-type {
    border-top: 0.5px solid var(--rule);
}
*/

/*
.item-row {
    display: flex;
    align-items: baseline;
    gap: var(--s);
}
*/

.item-name {
    font-family: var(--font-heading);
    font-size: var(--f-l);
    font-weight: 400;
    color: var(--ink);
    transition: color 0.2s;
    line-height: 1.2;
}

.item-name:lang(zh) {
    font-family: 'Songti SC', 'Noto Serif SC', 'STSong', 'SimSun', '宋体', serif;
    font-weight: normal;
}

.item-tag {
    margin-top: var(--xs);
    font-size: var(--m);
    font-weight: 400;
    font-style: italic;
    color: var(--mid-3);
    flex-shrink: 0;
}

.item-desc {
    margin-top: var(--xs);
    font-weight: 400;
    color: var(--mid-2);
    /* text-wrap: balance; */
}

/* ── Colours ── */
.group-music    .group-label { color: var(--blue); }
.group-classroom .group-label { color: var(--green); }
.group-games    .group-label { color: var(--magenta); }
.group-language .group-label { color: var(--red); }

@media (hover: hover) {
    .group-music    .item:hover .item-name { color: var(--blue); }
    .group-classroom .item:hover .item-name { color: var(--green); }
    .group-games    .item:hover .item-name { color: var(--magenta); }
    .group-language .item:hover .item-name { color: var(--red); }
}

/* ── Sub-page accent ── */
body.page-music    { --accent: var(--blue); }
body.page-language { --accent: var(--red); }
body.page-classroom { --accent: var(--green); }
body.page-games    { --accent: var(--magenta); }

/* ── Sub-page header ── */
header.subheader {
    display: block;
    /* border-bottom: 0.5px solid var(--rule); */
}

.back {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--f-m);
    color: var(--mid-2);
    text-decoration: none;
    letter-spacing: 0.05em;
    margin-bottom: var(--l);
    transition: color 0.2s;
}

.back:hover { color: var(--ink); }

.page-title {
    font-family: var(--font-heading);
    font-size: var(--f-xl);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
}

/* ── Figure / screenshot ── */
.figure {
    display: block;
    margin: var(--l) 0 var(--xl);
    max-width: 40em;
}

.figure img {
    display: block;
    max-height: 50vh;
    border: 0.5px solid var(--rule);
}

/* ── Prose ── */
.prose {
    max-width: 40em;
    color: var(--mid-1);
    margin-bottom: var(--l);
}

/* ── CTA ── */
.cta {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--f-m);
    font-weight: 600;
    color: var(--bg);
    background: var(--accent, var(--ink));
    text-decoration: none;
    padding: var(--s) var(--l);
    letter-spacing: 0.04em;
    transition: background 0.2s;
}

.cta:hover { background: var(--ink); }

/* ── Footer ── */
footer {
  text-align: center;
  margin-top: var(--l);
  color: var(--mid-2);
}

footer strong {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-stretch: expanded;
}

/* ── Responsive ── */
@media (max-aspect-ratio: 4/5) {
    .columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .col:not(:last-child) .group:last-child {
        border-bottom: 0.5px solid var(--rule);
    }

    .columns br {
        display: none;
    }

    footer {
        text-align: left;
    }
}

@media (max-aspect-ratio: 3/5) {
    body {
        padding: var(--s) var(--l);
        margin: auto;
    }

    header {
        display: block;
    }

    .lockup { 
        flex-direction: column-reverse;
        height: auto;
        width: calc(100% + 1rem);
        max-height: none;
        gap: var(--m);
    }

    .logo, .title {
        height: auto;
        max-height: none;
        width: 100%;
        margin: 0;
        margin-left: -1rem;
    }

    .item {
        padding: var(--ms) 0;
    }

    .columns br {
        display: block;
    }
}