/* ========================================================================= The Spice Cabinet — dark editorial. Chart colours come from a validated categorical palette (see js/charts.js); UI chrome uses its own warm accent so chrome can never be mistaken for a data series. ========================================================================= */ :root { color-scheme: dark; /* surfaces */ --plane: #0d0d0d; --surface: #1a1a19; --surface-2: #232321; --surface-3: #2b2b28; /* ink */ --ink: #ffffff; --ink-2: #c3c2b7; --ink-muted: #898781; /* chrome */ --grid: #2c2c2a; --baseline: #383835; --border: rgba(255,255,255,0.10); --border-2: rgba(255,255,255,0.06); /* the mat behind a botanical plate — sampled from the plates' own paper so the border reads as more of the sheet, not as a coloured frame */ --paper: #f0ebdd; --paper-ink: #4a4335; /* UI accent — deliberately NOT a categorical series colour */ --accent: #d98b3f; --accent-dim: rgba(217,139,63,0.14); /* categorical series (dark steps, validated vs #1a1a19) */ --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --wrap: 74rem; --read: 40rem; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--plane); color: var(--ink-2); font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.68; -webkit-font-smoothing: antialiased; /* `clip`, NOT `hidden`. overflow-x:hidden computes overflow-y to `auto`, which turns into a scroll container — and every `position: sticky` descendant then sticks to a scrollport that never scrolls, i.e. it silently does nothing. `clip` suppresses the same horizontal overflow without creating a scroll container, so the pinned figures below actually pin. */ overflow-x: clip; } h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.15; margin: 0; } p { margin: 0 0 1.15em; } em { font-style: italic; } strong { color: var(--ink); font-weight: 600; } a { color: var(--accent); text-decoration-color: rgba(217,139,63,0.4); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--accent); } code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink-2); } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } /* ───────────────────────── progress + nav ───────────────────────── */ .progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 100; background: transparent; pointer-events: none; } .progress__bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--series-4), var(--accent), var(--series-2)); transition: width .08s linear; } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem clamp(1.25rem, 4vw, 3rem); background: rgba(13,13,13,0); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } .nav.is-stuck { background: rgba(13,13,13,0.82); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--border-2); } .nav__brand { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; } .nav.is-stuck .nav__brand { opacity: 1; transform: none; } .nav__links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; } .nav__links a { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-muted); text-decoration: none; transition: color .2s; } .nav__links a:hover, .nav__links a.is-active { color: var(--ink); } @media (max-width: 34rem) { .nav__links { gap: 0.9rem; } .nav__links a { font-size: 0.7rem; } } /* ───────────────────────── hero ───────────────────────── */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 7rem 0 4rem; background: radial-gradient(120% 80% at 50% 0%, #2a1a10 0%, rgba(42,26,16,0) 62%), radial-gradient(90% 60% at 15% 100%, #1a1410 0%, rgba(26,20,16,0) 60%), var(--plane); overflow: hidden; } .hero__grain { position: absolute; inset: -20%; background-image: radial-gradient(rgba(217,139,63,0.06) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%); pointer-events: none; } .hero__inner { position: relative; text-align: center; width: min(100% - 2.5rem, 58rem); margin-inline: auto; } .eyebrow { font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem; } .hero__title { font-size: clamp(3rem, 11vw, 7.5rem); letter-spacing: -0.035em; line-height: 0.92; margin-bottom: 1.6rem; background: linear-gradient(178deg, #ffffff 20%, #d3c4ae 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__sub { max-width: 40rem; margin: 0 auto 3rem; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-2); } .hero__meta { font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0.05em; color: var(--ink-muted); margin-top: 2.4rem; } .hero__jars { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-width: 46rem; margin-inline: auto; } .jarchip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.8rem 0.42rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.03); font-family: var(--font-sans); font-size: 0.76rem; color: var(--ink-2); opacity: 0; transform: translateY(10px) scale(.96); animation: chipIn .5s cubic-bezier(.2,.7,.3,1) forwards; white-space: nowrap; } .jarchip__dot { width: 0.78rem; height: 0.78rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset; } @keyframes chipIn { to { opacity: 1; transform: none; } } .scrollcue { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-top: 3rem; color: var(--ink-muted); text-decoration: none; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .scrollcue:hover { color: var(--ink); } .scrollcue svg { animation: bob 2.2s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ───────────────────────── section shells ───────────────────────── */ .part { padding: clamp(5rem, 12vw, 9rem) 0 clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--border-2); background: linear-gradient(180deg, rgba(217,139,63,0.045), transparent 45%); } .part__num { font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; } .part__title { font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -0.03em; margin-bottom: 1.2rem; } .part__lede { max-width: var(--read); font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-2); } .chapter { padding: clamp(3rem, 7vw, 5.5rem) 0; } .chapter--alt { background: var(--surface); border-block: 1px solid var(--border-2); } .chapter__num { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--ink-muted); margin-bottom: 0.7rem; } .chapter__title { font-size: clamp(1.65rem, 3.6vw, 2.5rem); letter-spacing: -0.02em; max-width: 30ch; margin-bottom: 2rem; } .prose { max-width: var(--read); } .prose p { font-size: 1.06rem; } .pull { font-size: clamp(1.2rem, 2.4vw, 1.55rem) !important; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--accent); padding: 0.2rem 0 0.2rem 1.3rem; margin: 2rem 0 !important; } .callout { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--ink-muted); border-radius: 0 10px 10px 0; padding: 1.15rem 1.35rem; font-size: 1rem !important; margin: 2rem 0 !important; } .chapter--alt .callout { background: var(--surface-3); } .callout--key { border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-dim), var(--surface-2) 60%); } .callout--warn { border-left-color: var(--series-2); } /* ───────────────────────── molecules ───────────────────────── */ .molecules { display: grid; gap: 0.9rem; margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .mol { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem 1.2rem; position: relative; overflow: hidden; } .mol::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--mol-c, var(--accent)); } .mol__name { font-family: var(--font-sans); font-size: 0.94rem; font-weight: 600; color: var(--ink); margin-bottom: 0.15rem; } .mol__formula { font-family: var(--font-mono); font-size: 0.76rem; color: var(--mol-c, var(--accent)); letter-spacing: 0.04em; margin-bottom: 0.7rem; } .mol__from { font-size: 0.9rem; color: var(--ink-muted); margin-bottom: 0.5rem; } .mol__job { font-size: 0.93rem; margin: 0; } /* ───────────────────────── bloom figure ───────────────────────── */ .bloomfig, .shatterfig { margin: 3rem 0; } /* ── pinned scroll stages ────────────────────────────────────────────── The scrollytelling pattern: a tall TRACK provides scroll distance, and a sticky PIN inside it holds the figure motionless in the middle of the viewport while that distance is consumed. The reader scrolls, the page appears to stop, the diagram runs, and then the page resumes. The old version had no track at all — progress was derived from the figure's own position, so the animation ran while the figure was still entering from the bottom edge and was already finished by the time it was centred. You cannot watch a thing that only moves while it is off-screen. --track is the total height; the pin occupies 100vh of it, so the scrubbed distance is (track - 100vh). js/app.js additionally holds progress at 0 for the first slice and at 1 for the last, so the figure sits still and fully visible for a beat before anything moves and after everything has. */ .scrolly { position: relative; height: var(--track, 260vh); } .scrolly__pin { position: sticky; top: 0; /* svh, not vh: vh is measured against the LARGEST viewport (browser chrome hidden), so a 100vh pin overflows on load and the page lurches as the toolbar retracts. svh is the stable small-viewport unit and never reflows. dvh would be exact but relayouts on every toolbar transition — precisely the wrong behaviour to have inside a pinned section. */ min-height: 100svh; margin: 0; display: flex; flex-direction: column; justify-content: center; } /* A pin with no progress cue is the most-complained-about scrollytelling pattern: the reader cannot tell whether the page is stuck or working. */ .scrolly__meter { width: min(38rem, 100%); height: 2px; margin: 1.5rem auto 0; background: var(--border-2); border-radius: 2px; overflow: hidden; } .scrolly__meter i { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 2px; } /* Nothing inside a pin may carry the reveal transform: a transformed ancestor creates a containing block and cancels the sticky positioning underneath it. */ .scrolly__pin .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .scrolly { height: auto; } .scrolly__pin { position: static; min-height: 0; display: block; } } .fig__cap { font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink); margin-bottom: 1rem; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .fig__kicker { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(217,139,63,0.35); border-radius: 999px; padding: 0.2rem 0.6rem; } .fig__note { font-family: var(--font-sans); font-size: 0.76rem; color: var(--ink-muted); max-width: 46rem; margin: 0.9rem 0 0; line-height: 1.5; } .bloom { position: relative; height: clamp(17rem, 34vw, 22rem); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .chapter--alt .bloom { background: var(--plane); } .bloom__readout { font-family: var(--font-sans); font-size: 0.92rem; color: var(--ink-2); margin: 0.9rem 0 0; min-height: 1.5em; } .bloom__readout strong { color: var(--accent); } .vessel__label { font-family: var(--font-sans); font-size: 0.8rem; fill: var(--ink-2); } .vessel__sub { font-family: var(--font-sans); font-size: 0.68rem; fill: var(--ink-muted); } .vessel__temp { font-family: var(--font-mono); font-size: 0.72rem; fill: var(--ink-muted); } .vessel__count { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600; } /* ───────────────────────── charts ───────────────────────── */ .chartcard { margin: 2.6rem 0 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem clamp(1rem, 2.5vw, 1.75rem) 1.35rem; } .chapter--alt .chartcard { background: var(--plane); } .chart__head { margin-bottom: 1.5rem; } .chart__title { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; } .chart__sub { font-family: var(--font-sans); font-size: 0.82rem; color: var(--ink-muted); margin: 0; line-height: 1.45; } .chart { width: 100%; } .chart svg { display: block; width: 100%; height: auto; overflow: visible; } .ax-label { font-family: var(--font-sans); font-size: 11px; fill: var(--ink-muted); font-variant-numeric: tabular-nums; } .ax-title { font-family: var(--font-sans); font-size: 11px; fill: var(--ink-muted); letter-spacing: 0.04em; text-transform: uppercase; } .cat-label { font-family: var(--font-sans); font-size: 12.5px; fill: var(--ink-2); } .cat-label--mine { fill: var(--ink); font-weight: 600; } .val-label { font-family: var(--font-sans); font-size: 11.5px; fill: var(--ink-2); font-variant-numeric: tabular-nums; } .note-label { font-family: var(--font-sans); font-size: 11px; fill: var(--ink-muted); } .gridline { stroke: var(--grid); stroke-width: 1; } .baseline { stroke: var(--baseline); stroke-width: 1; } .legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.15rem; margin-top: 1.1rem; font-family: var(--font-sans); font-size: 0.8rem; color: var(--ink-2); } .legend__item { display: inline-flex; align-items: center; gap: 0.45rem; } .legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; } .tablebtn { margin-top: 1.25rem; font-family: var(--font-sans); font-size: 0.78rem; color: var(--ink-muted); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 0.38rem 0.9rem; cursor: pointer; transition: color .2s, border-color .2s; } .tablebtn:hover { color: var(--ink); border-color: var(--ink-muted); } .tablewrap { margin-top: 1rem; overflow-x: auto; } .tablewrap table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.82rem; } .tablewrap th, .tablewrap td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--border-2); vertical-align: top; } .tablewrap th { color: var(--ink); font-weight: 600; white-space: nowrap; } .tablewrap td { color: var(--ink-2); } .tablewrap td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ───────────────────────── channel matrix ───────────────────────── */ .matrix { display: grid; gap: 2px; font-family: var(--font-sans); } .matrix__row { display: grid; grid-template-columns: minmax(8rem, 1.4fr) repeat(3, minmax(4.5rem, 1fr)); align-items: center; gap: 2px; background: transparent; border: 0; width: 100%; text-align: left; padding: 0; cursor: pointer; color: inherit; font: inherit; border-radius: 8px; } .matrix__row:hover, .matrix__row:focus-visible { outline: none; background: rgba(255,255,255,0.04); } .matrix__head { cursor: default; } .matrix__head:hover { background: transparent; } .matrix__name { font-size: 0.85rem; color: var(--ink-2); padding: 0.5rem 0.6rem 0.5rem 0; min-height: 2.75rem; display: flex; align-items: center; gap: 0.5rem; } .matrix__head .matrix__name, .matrix__col { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); text-align: center; min-height: 2.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.4rem 0.2rem; line-height: 1.25; } /* The column is a flex container, so a
between label and sub is inert — the sub must be its own block-level line or the two run together. */ .matrix__sub { display: block; text-transform: none; letter-spacing: 0; opacity: 0.7; margin-top: 0.15rem; } .matrix__cell { min-height: 2.75rem; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 6px; } .chapter--alt .matrix__cell { background: var(--surface-3); } .dot { border-radius: 50%; } .dot--0 { width: 6px; height: 6px; background: var(--baseline); } .dot--1 { width: 10px; height: 10px; } .dot--2 { width: 16px; height: 16px; } .dot--3 { width: 22px; height: 22px; } .matrix__swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset; } .matrix__detail { grid-column: 1 / -1; font-size: 0.88rem; color: var(--ink-2); padding: 0.5rem 0.75rem 1rem; line-height: 1.55; } /* ───────────────────────── shatter ───────────────────────── */ .shatter { position: relative; height: clamp(14rem, 28vw, 18rem); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .chapter--alt .shatter { background: var(--plane); } .shatter__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--border-2); margin-top: 1px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden; } .stat { background: var(--surface); padding: 0.95rem 1.1rem; } .chapter--alt .stat { background: var(--plane); } .stat__label { display: block; font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.3rem; } .stat__value { display: block; font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.1; } /* ───────────────────────── levers ───────────────────────── */ .levers { display: grid; gap: 0.9rem; margin: 3rem 0 0; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .lever { background: var(--plane); border: 1px solid var(--border); border-radius: 12px; padding: 1.3rem 1.35rem; position: relative; } .lever__rank { position: absolute; top: 1.1rem; right: 1.2rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--baseline); } .lever__name { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; } .lever__channel { display: inline-block; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.18rem 0.5rem; border-radius: 999px; margin-bottom: 0.75rem; border: 1px solid currentColor; } .lever__why { font-size: 0.95rem; margin-bottom: 0.9rem; } .lever__have { display: flex; flex-wrap: wrap; gap: 0.35rem; } .tag { font-family: var(--font-sans); font-size: 0.72rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; padding: 0.2rem 0.5rem; } .lever__bar { height: 3px; border-radius: 2px; background: var(--baseline); margin-bottom: 1.1rem; overflow: hidden; } .lever__fill { height: 100%; width: 0; border-radius: 2px; transition: width .9s cubic-bezier(.2,.7,.3,1); } /* ───────────────────────── map ───────────────────────── */ .chartcard--map { padding-bottom: 1.1rem; } .mapwrap { position: relative; } .map__land { fill: #23231f; stroke: #33332c; stroke-width: 0.6; } .map__grat { stroke: var(--grid); stroke-width: 0.5; fill: none; } .map__arc { fill: none; stroke-width: 1.2; opacity: 0.5; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); } .map__arc.is-drawn { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease-out; } .map__pt { stroke: var(--surface); stroke-width: 2; cursor: pointer; } .map__home { fill: var(--ink); stroke: var(--plane); stroke-width: 2; } .map__homelabel { font-family: var(--font-sans); font-size: 11px; fill: var(--ink); font-weight: 600; } /* ───────────────────────── jar cards ───────────────────────── */ .jarfilter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; } .chip { font-family: var(--font-sans); font-size: 0.8rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.95rem; cursor: pointer; transition: all .2s; } .chip:hover { color: var(--ink); border-color: var(--ink-muted); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--plane); border-color: var(--ink); font-weight: 600; } .jarlist { display: grid; gap: 1.1rem; } .jar { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color .25s ease; } .jar:hover { border-color: rgba(255,255,255,0.2); } .jar[hidden] { display: none; } .jar__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem clamp(1.1rem, 2.5vw, 1.9rem); width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0; color: inherit; font: inherit; } .jar__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } .jar__swatch { width: 2.6rem; height: 2.6rem; border-radius: 10px; flex: none; margin-top: 0.1rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), inset 0 -10px 18px rgba(0,0,0,0.35); } .jar__headtext { flex: 1; min-width: 0; } .jar__name { font-size: clamp(1.25rem, 2.5vw, 1.6rem); letter-spacing: -0.015em; margin-bottom: 0.2rem; } .jar__bot { font-family: var(--font-sans); font-size: 0.78rem; font-style: italic; color: var(--ink-muted); margin-bottom: 0.55rem; } .jar__facts { display: flex; flex-wrap: wrap; gap: 0.4rem; } .pill { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.02em; border-radius: 999px; padding: 0.2rem 0.6rem; border: 1px solid var(--border); color: var(--ink-muted); } .pill--era { border-color: currentColor; } .jar__toggle { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: var(--ink-muted); border: 1px solid var(--border); transition: transform .3s ease, color .2s; } .jar.is-open .jar__toggle { transform: rotate(180deg); color: var(--ink); } .jar__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.3,.8,.3,1); } .jar.is-open .jar__body { grid-template-rows: 1fr; } .jar__bodyinner { overflow: hidden; } .jar__content { padding: 0 clamp(1.1rem, 2.5vw, 1.9rem) 1.9rem; border-top: 1px solid var(--border-2); margin-top: 0.2rem; padding-top: 1.5rem; } .jar__grid { display: grid; gap: 1.4rem 2.2rem; grid-template-columns: 1fr; margin-bottom: 1.6rem; } @media (min-width: 46rem) { .jar__grid { grid-template-columns: 1fr 1fr; } } .jar__block h5 { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; } .jar__block p { font-size: 0.98rem; margin: 0; } .jar__history { font-size: 1.04rem; line-height: 1.72; border-top: 1px solid var(--border-2); padding-top: 1.5rem; } .jar__history h5 { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.7rem; } /* ───────────────────────── botanical plates ───────────────────────── The plates are 19th-century lithographs on cream paper, dropped onto a near-black page. Two consequences drive everything below. 1. They need a MAT, not a crop. Bleeding a bright paper rectangle straight into a dark page reads as a rendering bug; a small border of the paper colour around the image reads as a mounted plate, which is what it is. 2. The credit belongs ON the paper. Printed under the image in the mat's own ink colour, it reads as part of the artefact rather than as a caption the website bolted on — and it keeps the attribution physically inseparable from the picture it attributes. */ .jar__history { display: grid; gap: 1.5rem 2.2rem; grid-template-columns: 1fr; } @media (min-width: 54rem) { .jar__history { grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem); align-items: start; } } .jar__historytext { min-width: 0; } .jar__plate { max-width: 20rem; } .plate { margin: 0; background: var(--paper); border: 1px solid rgba(0, 0, 0, 0.28); border-radius: 8px; padding: 0.5rem 0.5rem 0.1rem; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); } .plate__img { display: block; width: 100%; height: auto; border-radius: 3px; } .plate__cap { font-family: var(--font-sans); font-size: 0.62rem; line-height: 1.55; letter-spacing: 0.015em; color: var(--paper-ink); padding: 0.5rem 0.15rem 0.55rem; } .plate__cap i { font-style: italic; } .plate__syn { opacity: 0.78; } .plate__note { margin: 0.9rem 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--ink-2); } .plate--none { font-size: 0.86rem; line-height: 1.65; color: var(--ink-3, var(--ink-2)); border: 1px dashed var(--border); border-radius: 10px; padding: 1rem 1.1rem; background: var(--surface-2); } .plate--none p { margin: 0; } /* ───────────────────── the specimen sheet ───────────────────── Nine plates in a grid at the top of Part Two. Two decisions worth stating: - FIXED-HEIGHT WINDOWS, NOT FIXED-WIDTH PLATES. The sheets are between 1.19 and 1.67 times as tall as they are wide. Sized by width they would step up and down like a bad skyline; sized by height with object-fit, they line up along a shared baseline the way mounted specimens do, and the width variation reads as intentional. - The mat colour comes from each plate's own paper (inline --paper), so nine different creams sit side by side. That is what a real sheet of nineteenth-century plates looks like; flattening them to one cream would be tidier and falser. */ /* Flex, not grid, for one reason: nine items across five columns leaves a short last row, and grid would jam those four hard left against an empty cell. justify-content:center hangs them centred under the first row, which is how a plate sheet is actually laid out. */ .plateshelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 1.1rem; margin: 3rem 0 1.6rem; } .plateitem { flex: 0 1 calc(20% - 0.9rem); min-width: 9rem; } @media (max-width: 68rem) { .plateitem { flex-basis: calc(25% - 0.9rem); } } @media (max-width: 48rem) { .plateitem { flex-basis: calc(33.333% - 0.8rem); } } .plateitem { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; justify-content: flex-start; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: center; transition: transform .28s cubic-bezier(.2,.7,.3,1); } .plateitem:hover, .plateitem:focus-visible { transform: translateY(-5px); } .plateitem:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 10px; } .plateitem .plate--sm { display: block; width: 100%; height: 15rem; padding: 0.32rem; border-radius: 5px; box-shadow: 0 8px 20px rgba(0,0,0,0.5); transition: box-shadow .28s ease; } .plateitem:hover .plate--sm { box-shadow: 0 16px 34px rgba(0,0,0,0.62); } .plate--sm .plate__img { width: 100%; height: 100%; object-fit: contain; } .plateitem__sp { font-family: var(--font-serif); font-style: italic; font-size: 0.9rem; color: var(--ink); line-height: 1.3; } .plateitem__jar { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.4; } .plateshelf__note { max-width: var(--read); font-size: 0.95rem; color: var(--ink-muted); margin-top: 1.8rem; } .jar__note { margin-top: 1.4rem; margin-bottom: 0; font-size: 0.95rem; color: var(--ink-2); background: var(--surface-2); border-radius: 10px; padding: 1rem 1.15rem; border-left: 2px solid var(--baseline); } .jar__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.4rem; } /* ───────────────────────── formulas ───────────────────────── */ .formulas { display: grid; gap: 1.4rem; } @media (min-width: 58rem) { .formulas { grid-template-columns: 1fr 1fr; } } .formula { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: clamp(1.25rem, 3vw, 1.9rem); display: flex; flex-direction: column; } .formula__tag { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; } .formula__name { font-size: 1.55rem; letter-spacing: -0.02em; margin-bottom: 0.9rem; } .formula__idea { font-size: 0.98rem; margin-bottom: 1.5rem; } .formula__parts { margin: 0 0 1.5rem; } .part-row { display: grid; grid-template-columns: minmax(7.5rem, 1fr) 3.2rem; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .part-row__name { font-family: var(--font-sans); font-size: 0.86rem; color: var(--ink-2); } .part-row__bar { grid-column: 1 / -1; height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; margin-top: -0.25rem; } .part-row__fill { height: 100%; background: var(--series-2); border-radius: 2px; width: 0; transition: width .8s cubic-bezier(.2,.7,.3,1); } .part-row__val { font-family: var(--font-sans); font-size: 0.8rem; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; } .formula__method { font-size: 0.98rem; border-top: 1px solid var(--border-2); padding-top: 1.2rem; margin: auto 0 0; } .formula__method strong { display: block; font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } /* ───────────────────────── rules ───────────────────────── */ .rules { list-style: none; counter-reset: r; margin: 3rem 0 0; padding: 0; display: grid; gap: 0.8rem; } @media (min-width: 52rem) { .rules { grid-template-columns: 1fr 1fr; } } .rules li { counter-increment: r; position: relative; padding: 1.1rem 1.3rem 1.1rem 3.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 0.99rem; } .rules li::before { content: counter(r); position: absolute; left: 1.25rem; top: 1.05rem; font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent); } .rules strong { display: block; margin-bottom: 0.15rem; } /* ───────────────────────── footer ───────────────────────── */ .foot { padding: clamp(4rem, 9vw, 6rem) 0 5rem; margin-top: clamp(4rem, 9vw, 6rem); border-top: 1px solid var(--border-2); background: var(--surface); } .foot p { max-width: 52rem; } .foot__note { font-family: var(--font-sans); font-size: 0.79rem; color: var(--ink-muted); line-height: 1.6; } /* ───────────────────────── tooltip ───────────────────────── */ .tooltip { position: fixed; z-index: 200; pointer-events: none; background: #000000; border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.75rem; font-family: var(--font-sans); font-size: 0.8rem; color: var(--ink); box-shadow: 0 8px 28px rgba(0,0,0,0.6); max-width: 17rem; line-height: 1.45; transform: translate(-50%, calc(-100% - 12px)); } .tooltip[hidden] { display: none; } .tooltip__k { color: var(--ink-muted); display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.2rem; } /* ───────────────────────── reveal ───────────────────────── */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.is-in { opacity: 1; transform: none; } .stagger { opacity: 0; transform: translateY(16px); } .stagger.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); } /* ═════════════════════ organic chemistry chapter ═════════════════════ */ /* Sub-headings inside a long prose chapter. The chapter is argued in five moves and without these the reader has no way to re-enter it after looking away at a diagram. */ .sub { font-family: var(--font-sans); font-size: 1.02rem; letter-spacing: -0.01em; color: var(--ink); margin: 2.6rem 0 0.9rem !important; padding-top: 1.4rem; border-top: 1px solid var(--border-2); } .prose > .sub:first-child { margin-top: 0 !important; border-top: 0; padding-top: 0; } /* ── the formula read-out ────────────────────────────────────────────── The point of this block is that a formula is READABLE — that you can look at C17H19NO3 and see the nitrogen. So the formula is set large, in mono, in ink rather than in an accent colour, and only the element that carries the argument is tinted. Tinting the whole string (the old .mol__formula) made every character equally loud, which is the same as none of them being loud. */ .readout { margin: 2rem 0; display: grid; gap: 0.9rem; border-left: 2px solid var(--border); padding-left: 1.3rem; } .readout__row { display: grid; gap: 0.3rem; } .readout__f { font-family: var(--font-mono); font-size: 1.12rem; letter-spacing: 0.06em; color: var(--ink); } .readout__f b { color: var(--accent); font-weight: 700; } .readout__row--hot .readout__f b { color: var(--series-2); } .readout__row--sulf .readout__f b { color: var(--series-5); } .readout__t { font-size: 0.97rem; color: var(--ink-2); } .readout__t strong { color: var(--ink); } /* ── skeletal structure drawings ─────────────────────────────────────── */ .chem { width: 100%; height: auto; display: block; overflow: visible; } .chem__bond { stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; fill: none; } .chem__atom { font-family: var(--font-sans); font-size: 15px; font-weight: 600; fill: var(--ink); } .chem__atom--hetero { fill: var(--accent); } .chem__atom--nitro { fill: var(--series-2); } .chem__atom--sulfur { fill: var(--series-5); } .chem__halo { fill: rgba(255,255,255,0.05); } .chem__halo--ring { fill: rgba(57,135,229,0.13); } .chem__halo--group { fill: rgba(217,89,38,0.16); } .chem-note { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.02em; fill: var(--ink-muted); } .chem-note--group { fill: var(--series-2); } /* the annotated "how to read this" figure */ .chemfig { margin: 3rem 0; } .chem-annotated { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 2rem 1.5rem 1.5rem; display: flex; justify-content: center; } .chapter--alt .chem-annotated { background: var(--plane); } .chem-annotated .chem { max-width: 30rem; } .convention { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.85rem; max-width: var(--read); } .convention li { font-size: 0.97rem; color: var(--ink-2); padding-left: 1.5rem; position: relative; } .convention li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; border-radius: 2px; background: var(--accent); } .convention b { color: var(--ink); font-weight: 600; } /* ── the structure grid ─────────────────────────────────────────────── Seven cards, each a drawing plus the one sentence that says what the drawing is for. A structure with no reading instruction is decoration. */ .chemgrid { display: grid; gap: 1.2rem; margin: 2.5rem 0 0; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .chemcard { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem 1.35rem 1.4rem; display: flex; flex-direction: column; } .chapter--alt .chemcard { background: var(--plane); } /* Fixed art box, not min-height. These seven molecules have wildly different aspect ratios — curcumin is a long horizontal strip, carvacrol is nearly square — so sizing by width left every card's name row at a different height. A fixed box plus the SVG's default preserveAspectRatio="xMidYMid meet" scales each structure to fit and centres it, which aligns the text below across the whole grid. */ .chemcard__art { height: 9.5rem; margin-bottom: 1.1rem; } .chemcard__art .chem { width: 100%; height: 100%; } /* tag sits on the card floor so the row of tags reads as one line */ .chemcard__tag { margin-top: auto; } .chemcard__name { font-family: var(--font-sans); font-size: 0.98rem; font-weight: 600; color: var(--ink); margin: 0 0 0.15rem; } .chemcard__meta { font-size: 0.86rem; color: var(--ink-muted); margin: 0 0 0.5rem; } .chemcard__f { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.05em; color: var(--ink); margin: 0 0 0.55rem; } .chemcard__f .fx--n { color: var(--series-2); font-weight: 700; } .chemcard__f .fx--s { color: var(--series-5); font-weight: 700; } .chemcard__f .fx--o { color: var(--accent); } .chemcard__read { font-size: 0.95rem; margin: 0; color: var(--ink-2); } .chemcard__tag { align-self: flex-start; margin-top: 0.9rem; padding-top: 0; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.28rem 0.6rem; } /* molecule cards in chapter 01 — same legibility fix applied there, since that is where Ben first meets a formula. */ .mol__formula { font-family: var(--font-mono); font-size: 0.98rem !important; letter-spacing: 0.05em; color: var(--ink) !important; } .mol__formula .fx--n { color: var(--series-2); font-weight: 700; } .mol__formula .fx--s { color: var(--series-5); font-weight: 700; } .mol__formula .fx--o { color: var(--mol-c, var(--accent)); } .mol__formula sub { font-size: 0.68em; } /* ── pathway flow diagram ─────────────────────────────────────────────── */ .flow__title { font-family: var(--font-sans); font-size: 14px; font-weight: 600; } .flow__sub { font-family: var(--font-sans); font-size: 11.5px; } .ax-note { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; } .legend__item i { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; } /* ───────────────────────── reduced motion ───────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal, .stagger { opacity: 1 !important; transform: none !important; } .jarchip { opacity: 1 !important; transform: none !important; } .map__arc { stroke-dashoffset: 0 !important; } } /* ───────────────────────── print ───────────────────────── */ @media print { .nav, .progress, .scrollcue, .tablebtn, .jarfilter { display: none !important; } body { background: #fff; color: #111; } .jar__body { grid-template-rows: 1fr !important; } }