/*
 * Tokens and building blocks are the M and Lantern sites' (src/styles/theme.css,
 * components/layout.tsx), written as plain CSS. Change them together.
 */
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@900&family=Geist+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&display=swap');

:root {
    --serif: "Newsreader", Georgia, serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --dot: "Doto", "Geist Mono", monospace;

    --ink: #121114;
    --toned: #333336;
    --label: #5E5E62;
    --chrome: #F1F2F2;
    --sheet: #FFFFFF;
    --hairline: #D9DADA;
    --link: #2236C9;
    --link-hover: #16248A;

    --on-dark: #F1F2F2;
    --on-dark-label: #A3A3A8;

    --shell-green: #D3E8DF;
    --shell-yellow: #F4EBC4;
    /* New for Plant. */
    --shell-moss: #E3EAD2;
}

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

body {
    margin: 0;
    background: var(--chrome);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
::selection { background: var(--shell-yellow); }
img { display: block; max-width: 100%; }
h2, p { margin: 0; }

.container { margin: 0 auto; width: 100%; max-width: 1280px; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

.label { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--label); }
.dot { font-family: var(--dot); font-weight: 900; }
/* Doto draws "~" at cap height; nudge it down to the digits' middle, as the robot sites do. */
.tilde { display: inline-block; transform: translateY(0.2em); }

/* HairlineGrid: cells on 1px hairlines. */
.grid { display: flex; flex-wrap: wrap; gap: 1px; border: 1px solid var(--hairline); background: var(--hairline); }

/* Collective bar, as on the M and Lantern sites. */
.bar { background: var(--ink); color: var(--on-dark-label); font: 12px/1.5 var(--mono); }
.bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 8px; padding-bottom: 8px; }
.bar ol { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.bar a { color: var(--on-dark-label); text-decoration: none; }
.bar a:hover { color: var(--on-dark); text-decoration: underline; }
.bar [aria-current] { color: var(--on-dark); }

.site-header { border-bottom: 1px solid var(--hairline); }
.site-header .container { display: flex; padding-top: 14px; padding-bottom: 14px; }
.wordmark { display: inline-block; color: var(--ink); text-decoration: none; font-size: 30px; line-height: 1; }
.wordmark:hover { color: var(--ink); }

/* The shelf: one volume pulled out, the rest showing their spines. */
.shelf { --spine: 132px; flex-wrap: nowrap; height: clamp(520px, calc(100svh - 168px), 720px); margin-top: 32px; overflow: hidden; }
.vol { position: relative; display: flex; flex: 0.0001 1 0; min-width: var(--spine); overflow: hidden; background: var(--sheet); cursor: pointer; transition: flex-grow 0.75s cubic-bezier(0.2, 0.7, 0.15, 1); }
.vol.open { flex-grow: 1; cursor: default; }
.spine { flex: 0 0 var(--spine); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 0 24px; background: var(--shell); border-right: 1px solid rgb(18 17 20 / 0.08); }
.spine .num { font-size: 40px; line-height: 1; }
.spine-title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 64px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.spine-meta { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--toned); }
.vol:not(.open):hover .spine { filter: brightness(0.97); }
.vol:not(.open):hover .spine-title { font-style: italic; }
.cover { flex: 0 0 auto; width: calc(min(100vw - 64px, 1216px) - 3 * var(--spine) - 4px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cover-text { display: flex; flex-direction: column; padding: 36px; background: var(--sheet); }
.cover-text h2 { font-size: clamp(32px, 3.2vw, 44px); font-weight: 300; font-style: italic; line-height: 1.08; letter-spacing: -0.015em; max-width: 13ch; }
.cover-text .price { margin-top: auto; font-size: 72px; line-height: 0.9; }
.cover-text .links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font: 13px var(--mono); }
/* A family portrait: the main robot centred, two variants behind it. */
.cover-figure { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 32px 24px 40px; overflow: hidden; background: var(--shell); }
.cover-figure img { width: auto; }
.cover-figure .main { position: relative; z-index: 1; height: 82%; max-width: 64%; object-fit: contain; }
.cover-figure .side { position: absolute; bottom: 40px; height: 40%; max-width: 30%; object-fit: contain; }
.cover-figure .side.left { left: 5%; }
.cover-figure .side.right { right: 5%; }
.vol.plant .spine { background: repeating-linear-gradient(135deg, var(--shell) 0 10px, #D9E2C4 10px 11px); }
.vol.plant .spine-title { font-style: italic; color: var(--toned); }

/* Plant has no photos yet: a sprout drawn in Doto-like dots (sprout.js). */
.sprout { display: block; width: 58%; margin-bottom: 8px; color: #5C6B3E; }
.sprout rect { fill: currentColor; }

@media (max-width: 860px) {
    .shelf { flex-direction: column; height: auto; margin-top: 24px; }
    .vol, .vol.open { flex: none; min-width: 0; flex-direction: column; cursor: default; }
    .spine { flex: none; flex-direction: row; padding: 12px 18px; }
    .spine-title, .spine-meta { writing-mode: horizontal-tb; transform: none; }
    .spine-title { font-size: 34px; }
    .cover { width: auto; grid-template-columns: 1fr; }
    .cover-figure { height: 380px; }
    .cover-text { padding: 24px 20px; }
    .cover-text .price { margin-top: 32px; }
}

.colophon { margin-top: 72px; background: var(--ink); color: var(--on-dark-label); }
.colophon .container { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 24px 48px; padding-top: 40px; padding-bottom: 48px; font: 12px/1.7 var(--mono); }
.colophon a { color: var(--on-dark); text-decoration: none; }
.colophon a:hover { color: var(--on-dark); text-decoration: underline; }
.colophon .links { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* Lantern breathes; M sways a little. Both stop for reduced motion. */
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.045, 0.965); } }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.breathe { transform-origin: 50% 100%; animation: breathe 5.2s ease-in-out infinite; }
.sway { transform-origin: 50% 100%; animation: sway 4.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}