/** * Sensorium 2 — the shell. * * --------------------------------------------------------------------------- * GROWN, NOT ASSEMBLED * * The old shell was an operating system: a rail that hid itself, a glass bar, * an acuity dial, a question rail nested two deep, and a minimal mode that * solved the clutter by deleting the navigation. This one is built the other * way round. Four ideas, and every rule below follows one of them: * * 1. ONE PALETTE. Every colour here reads from the AN Rhizome tokens where * the plugin is active, and falls back to the same values where it is * not. The page and the answer inside it are never two designs. * * 2. THE RAIL IS ALWAYS THERE. Not a drawer, not a burger, not hidden by a * mode. It is a column of the page at every width above a phone, and a * bottom bar below that. Somebody who does not know where they are should * never have to open something to find out. * * 3. SEASON, NOT DECORATION. The one accent shifts with the real * agricultural year — wheat gold through rabi, monsoon green through * kharif, dry ochre through zaid. The site is a different colour in * January than in July because the fields are. * * 4. THINGS UNFOLD FROM WHERE THEY ARE ROOTED. Nothing slides in from * off-screen. Panels open downward from their own top edge, the way a * leaf does, and stop dead under prefers-reduced-motion. * * Paper, not glass: no blur, no gradient, no shadow doing the work a hairline * can do. In light there is a barely-there grain; in dark there is none, * because noise on a dark ground reads as dirt. * --------------------------------------------------------------------------- */ /* ———————————————————— the palette ———————————————————— */ :root { /* * The one paint bucket. Every colour on this site is mixed here and * nowhere else — see "one palette, republished" below for why these are * plain values and not `var(--ink, …)` indirections any more. */ --sx-canvas: #fafaf7; --sx-surface: #ffffff; --sx-sunken: #f1f0eb; --sx-tint: #eaf1eb; --sx-ink: #1a1a17; --sx-ink-2: #4f4c46; --sx-ink-3: #67645c; --sx-line: #e4e2da; --sx-control: #8a8579; --sx-leaf: #2c6a44; --sx-leaf-strong: #1e5134; --sx-on-leaf: #ffffff; --sx-loam: #8c4a2a; --sx-sky: #285a86; --sx-care: #855400; --sx-on-ink: #fafaf7; /* Paper lifts a little; it does not float. */ --sx-lift-1: 0 1px 2px rgba(26, 26, 23, 0.05); --sx-lift-2: 0 1px 2px rgba(26, 26, 23, 0.05), 0 10px 28px rgba(26, 26, 23, 0.07); --sx-chrome: rgba(250, 250, 247, 0.88); /* * The season sets the accent. * * The three seasons are named here, at the root, once per theme — and the * classes further down only *point* at them. That indirection is load * bearing: PHP puts the season class on and the theme attribute on * , so a rule written `[data-an-theme='dark'].season-kharif` matches * nothing on this site. Ever. Pointing instead means body inherits * whatever resolved, and a season can never be half a theme behind. */ --sx-rabi: #8a6a1f; --sx-rabi-tint: #f6f1e2; --sx-kharif: #2c6a44; --sx-kharif-tint: #eaf1eb; --sx-zaid: #a0551f; --sx-zaid-tint: #f8efe7; --sx-season: var(--sx-leaf); --sx-season-tint: var(--sx-tint); --sx-rail: 248px; --sx-bar: 56px; --sx-read: 720px; --sx-page: 1180px; --sx-gut: 20px; /* Growth, not travel. */ --sx-quick: 140ms; --sx-base: 260ms; --sx-slow: 460ms; --sx-grow: cubic-bezier(0.22, 0.7, 0.24, 1); } /* The seasons of the Indian year, as the fields wear them. */ .season-rabi { --sx-season: var(--sx-rabi); --sx-season-tint: var(--sx-rabi-tint); } .season-kharif { --sx-season: var(--sx-kharif); --sx-season-tint: var(--sx-kharif-tint); } .season-zaid { --sx-season: var(--sx-zaid); --sx-season-tint: var(--sx-zaid-tint); } @media (prefers-color-scheme: dark) { :root:not([data-an-theme='light']):not([data-theme='light']) { --sx-canvas: #0d0d0b; --sx-surface: #171715; --sx-sunken: #1f1f1c; --sx-tint: #17241b; --sx-ink: #f2f0ea; --sx-ink-2: #bdb9af; --sx-ink-3: #9d998f; --sx-line: #2b2a26; --sx-control: #77736a; --sx-leaf: #8fcea2; --sx-leaf-strong: #b0dfbe; --sx-on-leaf: #0b1a10; --sx-loam: #e3a684; --sx-sky: #94bee4; --sx-care: #e8b95e; --sx-on-ink: #0d0d0b; --sx-lift-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sx-lift-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.5); --sx-chrome: rgba(13, 13, 11, 0.88); --sx-rabi: #d9bd6a; --sx-rabi-tint: #241f12; --sx-kharif: #8fcea2; --sx-kharif-tint: #17241b; --sx-zaid: #e0a06a; --sx-zaid-tint: #261a11; } } :root[data-an-theme='dark'], :root[data-an-theme='deep'], :root[data-theme='dark'], :root[data-theme='deep'] { --sx-canvas: #0d0d0b; --sx-surface: #171715; --sx-sunken: #1f1f1c; --sx-tint: #17241b; --sx-ink: #f2f0ea; --sx-ink-2: #bdb9af; --sx-ink-3: #9d998f; --sx-line: #2b2a26; --sx-control: #77736a; --sx-leaf: #8fcea2; --sx-leaf-strong: #b0dfbe; --sx-on-leaf: #0b1a10; --sx-loam: #e3a684; --sx-sky: #94bee4; --sx-care: #e8b95e; --sx-on-ink: #0d0d0b; --sx-lift-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sx-lift-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.5); --sx-chrome: rgba(13, 13, 11, 0.88); --sx-rabi: #d9bd6a; --sx-rabi-tint: #241f12; --sx-kharif: #8fcea2; --sx-kharif-tint: #17241b; --sx-zaid: #e0a06a; --sx-zaid-tint: #261a11; } /* ———————————————————— one palette, republished ———————————————————— * * This site grew three palettes. `--an-*` in tokens.css, `--ink/--page/ * --surface` in surfaces.css, and the `--sx-*` above — each with its own * idea of paper, its own greys, and, worst of all, its own dark-mode * selector. The shell would go dark on `[data-an-theme]` while a listing * two hundred pixels below it went dark on `[data-theme]`, so a page could * sit in both themes at once. That is what "two designs on one page" looks * like from the outside, and it is why the same guide felt assembled from * parts. * * So the old names are not deleted; they are *fed*. Every legacy surface on * the site — the crop table, the atlas, product cards, listings, the lot — * keeps its markup and its stylesheet and simply inherits this palette, * this hairline and this season. One bucket, three taps. * * The tripled `:root` is deliberate: it costs nothing, matches exactly the * same element, and outranks `:root[data-theme="dark"]` in the old sheets * without needing a single `!important`. */ :root:root:root { /* tokens.css */ --an-bg: var(--sx-canvas); --an-surface: var(--sx-surface); --an-surface-2: var(--sx-sunken); --an-sunk: var(--sx-sunken); --an-line: var(--sx-line); --an-line-soft: var(--sx-line); --an-text: var(--sx-ink); --an-text-2: var(--sx-ink-2); --an-text-3: var(--sx-ink-3); --an-primary: var(--sx-season); --an-primary-c: var(--sx-on-leaf); --an-accent: var(--sx-loam); --an-warn: var(--sx-care); --an-chrome: var(--sx-chrome); --an-canvas: var(--sx-surface); --an-shadow-1: var(--sx-lift-1); --an-shadow-2: var(--sx-lift-2); /* surfaces.css */ --page: var(--sx-canvas); --surface: var(--sx-surface); --raised: var(--sx-surface); --sunk: var(--sx-sunken); --line: var(--sx-line); --line-2: var(--sx-line); --ink: var(--sx-ink); --ink-2: var(--sx-ink-2); --ink-3: var(--sx-ink-3); --ember: var(--sx-loam); --shoot: var(--sx-season); --chrome: var(--sx-chrome); --elev-s: var(--sx-lift-1); --elev-m: var(--sx-lift-2); } /* ———————————————————— base ———————————————————— */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.an-os { margin: 0; background: var(--sx-canvas); color: var(--sx-ink); font-family: var(--an-font-ui); font-size: 17px; line-height: 1.6; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Paper. Two very faint washes, no image, and nothing at all in the dark where grain reads as dirt rather than fibre. */ body.an-os::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1200px 600px at 12% -10%, color-mix(in srgb, var(--sx-season) 4%, transparent), transparent 60%), radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--sx-loam) 3%, transparent), transparent 55%); } [data-an-theme='dark'] body.an-os::before, [data-an-theme='deep'] body.an-os::before { opacity: 0.5; } /* * The paper wash above is a ::before at z-index 0, so the page has to sit * above it. Named, rather than `> *`. * * `body.an-os > *` reached everything — including the fixed chrome that is * deliberately a child of , at a specificity (0,1,1) that quietly beat * `.sx-sheet { position: fixed }`. The sheet therefore laid out in normal * flow: it opened 718px down the page, pushed the document taller, and only * looked like a bottom sheet because the page happened to be scrolled. A * universal selector in a descendant rule is a rule you cannot see the reach * of from where it is written. */ body.an-os > .sx, body.an-os > .sx-skip, body.an-os > header, body.an-os > main, body.an-os > footer { position: relative; z-index: 1; } a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--sx-season); outline-offset: 2px; border-radius: 4px; } .sx-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--sx-ink); color: var(--sx-on-ink); border-radius: 0 0 10px 0; } .sx-skip:focus { left: 0; } .sx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ———————————————————— the frame ———————————————————— */ .sx { display: grid; grid-template-columns: 1fr; min-height: 100vh; } @media (min-width: 760px) { .sx { grid-template-columns: var(--sx-rail) minmax(0, 1fr); } } /* ———————————————————— the rail ———————————————————— */ .sx-rail { display: none; position: sticky; top: 0; height: 100vh; padding: 18px 12px 12px; border-right: 1px solid var(--sx-line); background: var(--sx-canvas); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } @media (min-width: 760px) { .sx-rail { display: flex; flex-direction: column; gap: 22px; } } .sx-mark { display: flex; align-items: center; gap: 10px; padding: 6px 10px; text-decoration: none; border-radius: 12px; } .sx-mark:hover { background: var(--sx-sunken); } .sx-mark > span { min-width: 0; } .sx-mark b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.16; text-wrap: balance; } .sx-mark i { display: block; margin-top: 1px; font-style: normal; font-size: 11.5px; line-height: 1.3; color: var(--sx-ink-3); letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The seed: one mark, drawn from the season's colour. A circle with a leaf cut out of it, in CSS — nothing to download, and it changes with the year. */ .sx-seed { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50% 50% 50% 4px; background: var(--sx-season); transform: rotate(-8deg); } .sx-seed::after { content: ''; position: absolute; inset: 7px 5px 5px 7px; border-radius: 50% 50% 50% 2px; background: var(--sx-canvas); opacity: 0.55; } .sx-ask { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--sx-ink); color: var(--sx-on-ink); font-weight: 550; cursor: pointer; transition: transform var(--sx-quick) var(--sx-grow), opacity var(--sx-quick); } .sx-ask:hover { transform: translateY(-1px); } .sx-ask:active { transform: translateY(0); } .sx-ask kbd { margin-left: auto; font: inherit; font-size: 12px; opacity: 0.6; } .sx-grp { display: grid; gap: 2px; } .sx-grp h2 { margin: 0 0 6px; padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sx-ink-3); } .sx-row { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--sx-ink-2); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--sx-quick), color var(--sx-quick); } .sx-row:hover { background: var(--sx-sunken); color: var(--sx-ink); } .sx-row .sx-ic { flex: none; width: 18px; color: var(--sx-ink-3); } .sx-row b { font-weight: 500; font-size: 15px; } .sx-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sx-row .sx-n { margin-left: auto; padding-left: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--sx-ink-3); } /* A vein, not a highlight: the active row grows one on its rooted edge. */ .sx-row.is-on { position: relative; background: var(--sx-season-tint); color: var(--sx-ink); } .sx-row.is-on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--sx-season); } .sx-row.is-on .sx-ic { color: var(--sx-season); } .sx-rail-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sx-line); display: flex; align-items: center; gap: 6px; } .sx-icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--sx-ink-3); cursor: pointer; transition: background var(--sx-quick), color var(--sx-quick); } .sx-icon-btn:hover { background: var(--sx-sunken); color: var(--sx-ink); } .sx-icon-btn.is-on { background: var(--sx-season-tint); color: var(--sx-season); } .sx-where { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--sx-ink-3); font-size: 13px; cursor: pointer; } .sx-where:hover { background: var(--sx-sunken); color: var(--sx-ink); } .sx-where b { font-weight: 500; color: var(--sx-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ———————————————————— the bar ———————————————————— */ .sx-main { min-width: 0; display: flex; flex-direction: column; } .sx-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: var(--sx-bar); padding: 8px var(--sx-gut); border-bottom: 1px solid var(--sx-line); background: var(--sx-canvas); } .sx-bar .sx-mark { display: none; } @media (max-width: 759px) { .sx-bar .sx-mark { display: flex; padding-left: 0; } } .sx-season-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--sx-season-tint); color: var(--sx-ink-2); font-size: 13px; text-decoration: none; white-space: nowrap; } .sx-season-chip b { color: var(--sx-ink); font-weight: 550; } .sx-season-chip .sx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sx-season); } .sx-bar-end { margin-left: auto; display: flex; align-items: center; gap: 6px; } .sx-find { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; min-height: 38px; padding: 0 12px; border: 1px solid var(--sx-line); border-radius: 999px; background: var(--sx-surface); color: var(--sx-ink-3); transition: border-color var(--sx-quick); } .sx-find:focus-within { border-color: var(--sx-control); } .sx-find input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--sx-ink); outline: none; } .sx-find input::placeholder { color: var(--sx-ink-3); } /* ———————————————————— the canvas ———————————————————— */ .sx-canvas { flex: 1; width: 100%; max-width: var(--sx-page); margin: 0 auto; padding: 0 var(--sx-gut) 96px; } @media (min-width: 760px) { :root { --sx-gut: 32px; } } @media (min-width: 1180px) { :root { --sx-gut: 44px; } } .sx-hero { padding: clamp(28px, 6vw, 64px) 0 clamp(16px, 3vw, 28px); max-width: 780px; } .sx-hero h1 { margin: 0; font-size: clamp(34px, 2rem + 3.2vw, 60px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; } .sx-hero p { margin: 14px 0 0; max-width: 58ch; font-size: clamp(17px, 1rem + 0.4vw, 20px); line-height: 1.5; color: var(--sx-ink-2); } .sx-sec { margin-top: clamp(40px, 7vw, 80px); animation: sx-grow var(--sx-slow) var(--sx-grow) both; } .sx-sec > header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--sx-line); } .sx-sec h2 { margin: 0; font-size: clamp(20px, 1.1rem + 0.8vw, 26px); font-weight: 600; letter-spacing: -0.02em; } .sx-sec header p { margin: 0; color: var(--sx-ink-3); font-size: 14px; } .sx-sec header a { margin-left: auto; font-size: 14px; color: var(--sx-ink-3); text-decoration: none; white-space: nowrap; } .sx-sec header a:hover { color: var(--sx-season); } /* A list that reads like a row of beds, not a grid of cards. */ .sx-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .sx-list > li { border-bottom: 1px solid var(--sx-line); } .sx-list > li:last-child { border-bottom: 0; } /* A grid, not a flex row: on a phone the title and the date share the first line and the standfirst takes the second, and no child can ever push the page wider than the phone. */ .sx-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 14px; padding: 14px 4px; text-decoration: none; transition: padding-left var(--sx-base) var(--sx-grow), background var(--sx-quick); } .sx-item > b { grid-column: 1; min-width: 0; } .sx-item > i { grid-column: 1 / -1; min-width: 0; } .sx-item > time, .sx-item > .sx-when { grid-column: 2; grid-row: 1; } @media (min-width: 760px) { .sx-item { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; } .sx-item > i { grid-column: 2; grid-row: 1; } .sx-item > time, .sx-item > .sx-when { grid-column: 3; } } .sx-item:hover { padding-left: 10px; background: color-mix(in srgb, var(--sx-season-tint) 55%, transparent); } .sx-item b { font-weight: 550; font-size: 16px; } .sx-item i { font-style: normal; color: var(--sx-ink-3); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sx-item time, .sx-item .sx-when { font-size: 13px; color: var(--sx-ink-3); font-variant-numeric: tabular-nums; } .sx-item .sx-now { color: var(--sx-season); font-weight: 550; } .sx-cols { display: grid; gap: clamp(20px, 3vw, 40px); } @media (min-width: 900px) { .sx-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sx-quiet { color: var(--sx-ink-3); font-size: 14px; } /* ———————————————————— the footer ———————————————————— */ .sx-foot { margin-top: clamp(48px, 8vw, 96px); padding: 32px var(--sx-gut) 40px; border-top: 1px solid var(--sx-line); color: var(--sx-ink-3); font-size: 14px; } .sx-foot-in { max-width: var(--sx-page); margin: 0 auto; display: grid; gap: 22px; } .sx-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; } .sx-foot a { color: var(--sx-ink-2); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; } .sx-foot a:hover { color: var(--sx-season); } .sx-foot small { font-size: 13px; line-height: 1.6; max-width: 70ch; display: block; } /* ———————————————————— the phone bar ———————————————————— */ .sx-tabs { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px; border: 1px solid var(--sx-line); border-radius: 18px; background: var(--sx-surface); box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.35); } @media (min-width: 760px) { .sx-tabs { display: none; } } .sx-tab { display: grid; justify-items: center; gap: 3px; min-height: 48px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; color: var(--sx-ink-3); font-size: 11px; text-decoration: none; cursor: pointer; } .sx-tab.is-on { background: var(--sx-season-tint); color: var(--sx-season); } .sx-tab b { font-weight: 500; } @media (max-width: 759px) { .sx-canvas { padding-bottom: 120px; } } /* ———————————————————— the sheet (phone rail) ———————————————————— */ .sx-sheet[hidden] { display: none; } .sx-sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; background: color-mix(in srgb, var(--sx-ink) 36%, transparent); } .sx-sheet__panel { max-height: 82vh; overflow-y: auto; padding: 10px 12px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--sx-canvas); animation: sx-rise var(--sx-base) var(--sx-grow) both; } .sx-sheet__grab { width: 40px; height: 4px; margin: 4px auto 14px; border-radius: 2px; background: var(--sx-line); } /* ———————————————————— motion ———————————————————— */ @keyframes sx-grow { from { opacity: 0; transform: translateY(-6px) scaleY(0.985); transform-origin: top center; } } @keyframes sx-rise { from { transform: translateY(14px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; } } /* ———————————————————— the reading column ———————————————————— */ .sx-read { max-width: var(--sx-read); } .sx-read h1 { margin: 0 0 12px; font-size: clamp(30px, 1.8rem + 2.4vw, 46px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; } .sx-dek { margin: 0 0 18px; font-size: clamp(17px, 1rem + 0.35vw, 20px); line-height: 1.5; color: var(--sx-ink-2); } .sx-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 20px; border-bottom: 1px solid var(--sx-line); color: var(--sx-ink-3); font-size: 14px; } .sx-body { font-family: var(--an-font-editorial); font-size: 19px; line-height: 1.72; } .sx-body p, .sx-body ul, .sx-body ol, .sx-body blockquote, .sx-body figure, .sx-body table { margin: 0 0 1.15em; } .sx-body h2, .sx-body h3, .sx-body h4 { font-family: var(--an-font-ui); letter-spacing: -0.02em; line-height: 1.22; margin: 1.8em 0 0.5em; } .sx-body h2 { font-size: 27px; } .sx-body h3 { font-size: 21px; } .sx-body img, .sx-body iframe { max-width: 100%; height: auto; border-radius: 14px; } .sx-body a { text-decoration-color: color-mix(in srgb, var(--sx-season) 55%, transparent); text-decoration-thickness: 1.5px; } .sx-body blockquote { padding-left: 18px; border-left: 2px solid var(--sx-season); color: var(--sx-ink-2); font-style: normal; } /* ———————————————————— print ———————————————————— */ @media print { .sx-rail, .sx-bar, .sx-tabs, .sx-foot, .sx-sheet { display: none !important; } .sx { grid-template-columns: 1fr; } body.an-os::before { display: none; } } /* ———————————————————— the switch, and small hiding ———————————————————— */ .sx-theme { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--sx-sunken); } .sx-theme .sx-icon-btn { width: 34px; height: 34px; border-radius: 999px; } .sx-theme .sx-icon-btn.is-on { background: var(--sx-surface); color: var(--sx-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } @media (max-width: 899px) { .sx-hide-sm { display: none; } } /* The rail, brought up from the bottom of a phone. Same markup, same rules — it is the rail, not a copy of it written twice. */ .sx-rail--sheet { display: flex !important; position: static; height: auto; max-height: none; padding: 0; border: 0; background: none; gap: 18px; } .sx-rail--sheet .sx-mark { display: none; } /* ———————————————————— a guide ———————————————————— */ .sx-article { padding-top: clamp(20px, 4vw, 44px); } .sx-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 550; letter-spacing: 0.02em; color: var(--sx-season); text-decoration: none; } .sx-figure { margin: 26px 0; } .sx-figure img { width: 100%; height: auto; border-radius: 16px; display: block; } .sx-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--sx-ink-3); } .sx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; } .sx-tags a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--sx-line); border-radius: 999px; font-size: 13px; color: var(--sx-ink-2); text-decoration: none; transition: border-color var(--sx-quick), color var(--sx-quick); } .sx-tags a:hover { border-color: var(--sx-season); color: var(--sx-season); } /* ———————————————————— a listing ———————————————————— */ .sx-head { padding: clamp(24px, 5vw, 56px) 0 clamp(14px, 2vw, 22px); max-width: 720px; } .sx-head h1 { margin: 0; font-size: clamp(28px, 1.7rem + 2.2vw, 44px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; } .sx-head p { margin: 12px 0 0; color: var(--sx-ink-2); font-size: clamp(16px, 1rem + 0.3vw, 19px); line-height: 1.5; } .sx-pager { display: flex; gap: 10px; margin-top: 36px; } .sx-pager a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--sx-line); border-radius: 999px; color: var(--sx-ink-2); text-decoration: none; font-size: 15px; } .sx-pager a:hover { border-color: var(--sx-control); color: var(--sx-ink); } .sx-empty { max-width: 56ch; padding: 36px 0; color: var(--sx-ink-2); } /* ———————————————————— the things every page needs ———————————————————— * * Three rules that are invisible when they work and catastrophic when they * are missing: the icon sprite must not take up space, the screen-reader * helper must not be seen, and the sheet that asks where you are farming * must look like part of the site. They lived in the old shell sheet, which * loaded on some pages and not others — so on the pages it skipped, the * sprite drew as a stack of naked glyphs and the region picker opened as a * white rectangle. They live here now, where nothing is conditional. */ .an-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .an-i { flex: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* The sheet: a panel that rises from the edge it is anchored to. */ .an-sheet { position: fixed; inset: 0; z-index: 95; } .an-sheet[hidden] { display: none; } .an-sheet-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--sx-ink) 46%, transparent); } .an-sheet-panel { position: absolute; inset-inline: 0; bottom: 0; max-height: 76vh; max-width: 620px; margin-inline: auto; padding: 22px var(--sx-gut) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--sx-surface); color: var(--sx-ink); border: 1px solid var(--sx-line); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: var(--sx-lift-2); animation: sx-rise var(--sx-base) var(--sx-grow) both; } @media (min-width: 900px) { .an-sheet-panel { bottom: auto; top: 50%; translate: 0 -50%; border: 1px solid var(--sx-line); border-radius: 20px; } } .an-sheet-head { display: flex; align-items: center; gap: 12px; } .an-sheet-head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; } .an-sheet-x { margin-inline-start: auto; padding: 6px; border: 0; background: none; color: var(--sx-ink-3); line-height: 0; cursor: pointer; } .an-sheet-x:hover { color: var(--sx-ink); } .an-sheet-sub { margin: 8px 0 16px; font-size: 14px; color: var(--sx-ink-3); } .an-sheet-list { display: flex; flex-wrap: wrap; gap: 8px; } .an-region-opt { padding: 9px 16px; border: 1px solid var(--sx-line); border-radius: 999px; background: var(--sx-canvas); color: var(--sx-ink-2); font: inherit; font-size: 14px; cursor: pointer; } .an-region-opt:hover { border-color: var(--sx-season); color: var(--sx-ink); } .an-region-opt.is-on { background: var(--sx-season); border-color: var(--sx-season); color: var(--sx-on-leaf); font-weight: 600; } /* ———————————————————— page furniture ———————————————————— * * A surface, a heading, a standfirst, a button. Four things every page on * the site puts on screen, so they are defined once, here, and every * template — the shell's own, the instruments', the modules' — gets the * same ones. When these lived beside the instruments, a page that did not * draw an instrument got no heading either. */ .sx-surface { max-width: var(--sx-page); margin-inline: auto; } .sx-surface--narrow { max-width: 860px; } /* The opening of a surface: the one thing it is about, and the one sentence that says what it is not. */ .sx-surface-head { padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--sx-line); animation: sx-rise var(--sx-base) var(--sx-grow) both; } .sx-head { max-width: 62ch; margin-bottom: clamp(20px, 3vw, 32px); } /* * Display type gets a measure too. A 64px line running the full width of a * 1180px canvas is eleven words the eye has to track back across, and it is * the single loudest way a page announces that nobody set it. */ .sx-h1 { max-width: 20ch; margin: 0 0 16px; font-size: clamp(34px, 2rem + 2.4vw, 60px); font-weight: 600; line-height: 1.04; letter-spacing: -0.026em; text-wrap: balance; } .sx-h2 { margin: 0 0 10px; font-size: clamp(21px, 1.15rem + 0.9vw, 28px); font-weight: 600; line-height: 1.14; letter-spacing: -0.018em; text-wrap: balance; } .sx-note, .sx-lede { margin: 0; color: var(--sx-ink-2); } .sx-lede { max-width: 62ch; font-size: clamp(16px, 1rem + 0.2vw, 18px); line-height: 1.55; } .sx-note { font-size: 14px; color: var(--sx-ink-3); } /* One button, two weights. Nothing else earns a third. */ .sx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 550; text-decoration: none; cursor: pointer; transition: background var(--sx-quick), border-color var(--sx-quick), color var(--sx-quick); } .sx-btn--solid { background: var(--sx-ink); color: var(--sx-on-ink); } .sx-btn--solid:hover { background: var(--sx-season); color: var(--sx-on-leaf); } .sx-btn--ghost { border-color: var(--sx-line); background: var(--sx-surface); color: var(--sx-ink); } .sx-btn--ghost:hover { border-color: var(--sx-control); background: var(--sx-sunken); } /* * The bar's field on the home page. * * Above a phone there is already a field the size of a paragraph in the * middle of the screen, and a second one in the bar is two boxes for one * intention. On a phone the big one scrolls away and the bar is all that is * left, so it stays — as the round button thumb.css makes of it. */ @media (min-width: 760px) { .sx-find--phone { display: none; } } /* ———————————————————— comments ———————————————————— * * WordPress prints this form itself, and nothing in this theme had ever * styled it — so under 24,000 carefully set guides sat a 372px-wide * textarea, three unlabelled boxes and a grey submit button from 2009. It * is the last thing a reader sees on the page, which makes it exactly the * wrong place to stop designing. */ .comment-respond { max-width: var(--sx-read); margin: clamp(36px, 6vw, 64px) auto 0; padding-top: 28px; border-top: 1px solid var(--sx-line); } .comment-reply-title { margin: 0 0 6px; font-size: clamp(20px, 1.1rem + 0.8vw, 26px); font-weight: 600; letter-spacing: -0.02em; } .comment-notes, .comment-form .required-field-message { margin: 0 0 18px; font-size: 13.5px; color: var(--sx-ink-3); } .comment-form p { margin: 0 0 14px; } .comment-form label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 550; color: var(--sx-ink-2); } .comment-form .required { color: var(--sx-loam); } .comment-form input[type='text'], .comment-form input[type='email'], .comment-form input[type='url'], .comment-form textarea { width: 100%; max-width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--sx-line); border-radius: 12px; background: var(--sx-surface); color: var(--sx-ink); font: inherit; font-size: 16px; } .comment-form textarea { min-height: 140px; line-height: 1.55; resize: vertical; } .comment-form :is(input, textarea):focus { outline: none; border-color: var(--sx-season); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-season) 18%, transparent); } .comment-form-cookies-consent { display: flex; align-items: center; gap: 10px; } .comment-form-cookies-consent label { margin: 0; font-weight: 400; color: var(--sx-ink-3); } .form-submit { margin-top: 4px; } .comment-form input[type='submit'] { min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--sx-ink); color: var(--sx-on-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .comment-form input[type='submit']:hover { background: var(--sx-season); color: var(--sx-on-leaf); } .comment-list { max-width: var(--sx-read); margin: 28px auto 0; padding: 0; list-style: none; } .comment-list .comment-body { padding: 16px 0; border-bottom: 1px solid var(--sx-line); } .comment-list .comment-author { font-size: 14px; font-weight: 600; } .comment-list .comment-metadata { font-size: 12.5px; color: var(--sx-ink-3); }