/* CashIn Computer — the CashIn computer magazine, with Computer World Modern Inc. Laid out like CashIn One's desk — a
   menu bar, windows, a board of pins and a dock — with its own face: a perforated steel desk (the front of a server
   rack), white panels with machined corners, keycap section badges, and IBM Plex throughout: Plex Sans Condensed for
   bold headlines, Plex Serif for the justified reading text, Plex Sans for the chrome, Plex Mono only for code.
   Graphite is Computer's own color; signal amber is the status light — the Crown, the wordmark's LED, focus and the
   key you're on. Each section keeps its color across badges, pins and drop caps. CashIn Now's free placements sit
   among the pins, always labeled "Now across CashIn". */

:root {
  --wall: radial-gradient(rgb(20 26 34 / .085) 1.1px, transparent 1.4px) 0 0 / 7px 7px, linear-gradient(180deg, #E9ECEF 0%, #DFE4E9 60%, #D9DEE4 100%);
  --win: #FFFFFF;
  --win-2: #F2F4F6;
  --glass: rgb(255 255 255 / .7);
  --glass-bar: rgb(246 248 250 / .8);
  --ink: #12161C;
  --ink-2: #545D6A;
  --rule: #E2E6EB;
  --edge: rgb(18 22 28 / .1);
  --hover: rgb(18 22 28 / .055);
  --teal: #1B2430;        /* Computer's own color, graphite (the variable name is shared with CashIn One's stylesheet) */
  --teal-2: #0C1118;
  --on-teal: #FFFFFF;
  --signal: #F2A900;      /* the status light */
  --signal-ink: #7A5400;
  --crown: var(--signal);
  --crown-ink: var(--signal-ink);
  --now: #FF3D2E;
  --danger: #B42318;
  --r: 10px;              /* machined corners */
  --sh-1: 0 1px 1px rgb(18 22 28 / .06), 0 3px 10px -6px rgb(18 22 28 / .18);
  --sh-2: 0 1px 2px rgb(18 22 28 / .07), 0 14px 34px -18px rgb(18 22 28 / .32);
  --sh-3: 0 2px 6px rgb(18 22 28 / .1), 0 26px 60px -22px rgb(18 22 28 / .42);
  --display: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1320px;
  --gap: 18px;
  /* names the admin stylesheet shares */
  --paper: var(--win); --paper-2: var(--win-2); --note: var(--teal); --note-2: var(--teal-2); --hot: var(--signal);
  --seal: var(--danger); --brass: var(--signal); --head: var(--ui); --read: var(--serif); --focus: var(--signal);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall: radial-gradient(rgb(255 255 255 / .05) 1.1px, transparent 1.4px) 0 0 / 7px 7px, linear-gradient(180deg, #12161B 0%, #0F1317 100%);
    --win: #181D24; --win-2: #1F252D; --glass: rgb(30 36 44 / .72); --glass-bar: rgb(18 22 28 / .82);
    --ink: #E9EDF2; --ink-2: #9BA5B2; --rule: #2A313B; --edge: rgb(255 255 255 / .08); --hover: rgb(255 255 255 / .07);
    --teal: #E9EDF2; --teal-2: #FFFFFF; --on-teal: #12161C; --signal: #FFB81F; --signal-ink: #FFCB57; --danger: #FF8A80;
    --sh-1: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px -6px rgb(0 0 0 / .55);
    --sh-2: 0 1px 2px rgb(0 0 0 / .45), 0 18px 44px -18px rgb(0 0 0 / .75);
    --sh-3: 0 2px 6px rgb(0 0 0 / .5), 0 28px 70px -20px rgb(0 0 0 / .85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wall: radial-gradient(rgb(255 255 255 / .05) 1.1px, transparent 1.4px) 0 0 / 7px 7px, linear-gradient(180deg, #12161B 0%, #0F1317 100%);
  --win: #181D24; --win-2: #1F252D; --glass: rgb(30 36 44 / .72); --glass-bar: rgb(18 22 28 / .82);
  --ink: #E9EDF2; --ink-2: #9BA5B2; --rule: #2A313B; --edge: rgb(255 255 255 / .08); --hover: rgb(255 255 255 / .07);
  --teal: #E9EDF2; --teal-2: #FFFFFF; --on-teal: #12161C; --signal: #FFB81F; --signal-ink: #FFCB57; --danger: #FF8A80;
  --sh-1: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px -6px rgb(0 0 0 / .55);
  --sh-2: 0 1px 2px rgb(0 0 0 / .45), 0 18px 44px -18px rgb(0 0 0 / .75);
  --sh-3: 0 2px 6px rgb(0 0 0 / .5), 0 28px 70px -20px rgb(0 0 0 / .85);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--win-2); background-image: var(--wall); background-attachment: fixed;
  font: 400 1rem/1.55 var(--ui); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  padding-bottom: 96px;
}
body.admin { padding-bottom: 0; background-image: none; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--teal); color: var(--on-teal); padding: 8px 12px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }
.icon { flex: none; }

/* the CashIn family: one band of color per app, CashIn Computer last */
.family { display: flex; height: 3px; }
.family i { flex: 1; background: var(--c); }

/* ------------------------------------------------------------------ menu bar */
.menubar { position: sticky; top: 0; z-index: 50; background: var(--glass-bar); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid var(--edge); }
.menubar__in { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; height: 56px; display: flex; align-items: center; gap: 16px; }
.wordmark { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--teal); flex: none; }
.wordmark__chip { width: 26px; height: 26px; }
.wordmark__cash { font: 600 .74rem/1 var(--ui); color: var(--ink-2); letter-spacing: .01em; margin-left: 2px; }
.wordmark__one { font: 700 1.6rem/1 var(--display); color: var(--ink); letter-spacing: -.012em; }
.wordmark--small .wordmark__chip { width: 22px; height: 22px; }
.wordmark--small .wordmark__one { font-size: 1.35rem; }
.menubar__nav { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.menubar__nav::-webkit-scrollbar { display: none; }
.menubar__nav a { padding: 6px 10px; border-radius: 8px; font: 500 .875rem/1.2 var(--ui); color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.menubar__nav a:hover { background: var(--hover); color: var(--ink); }
.menubar__nav a[aria-current="page"] { color: color-mix(in srgb, var(--sec) 70%, var(--ink)); background: color-mix(in srgb, var(--sec) 13%, transparent); }
.menubar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.search input { width: 170px; padding: 7px 12px 7px 32px; border: 1px solid var(--edge); border-radius: 999px; background: var(--hover) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23888' d='M8.5 3a5.5 5.5 0 0 1 4.4 8.8l3.7 3.6-1.1 1.1-3.6-3.7A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E") no-repeat 11px 50% / 15px; color: var(--ink); font: 400 .9rem var(--ui); transition: width .2s ease; }
.search input:focus { width: 230px; background-color: var(--win); outline: none; border-color: color-mix(in srgb, var(--teal) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); }

/* popovers: the edition picker and the start panel */
.edition, .start { position: relative; }
.edition summary, .start summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; font: 500 .86rem/1 var(--ui); color: var(--ink-2); }
.edition summary::-webkit-details-marker, .start summary::-webkit-details-marker { display: none; }
.edition summary:hover, .start summary:hover, .edition[open] summary, .start[open] summary { background: var(--hover); color: var(--ink); }
.edition__panel, .start__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 330px; max-height: min(72vh, 620px); overflow: auto;
  padding: 14px; background: var(--win); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--sh-3);
}
.edition__panel input { width: 100%; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--win-2); color: var(--ink); font: 400 1rem var(--ui); margin-bottom: 8px; }
.edition__group h3 { margin: 10px 4px 4px; font: 600 .76rem var(--ui); color: var(--ink-2); }
.edition__group a, .edition__all { display: block; padding: 6px 8px; border-radius: 8px; font: 500 .9rem var(--ui); text-decoration: none; }
.edition__group a:hover, .edition__all:hover { background: var(--hover); }
.edition__group a[aria-current="true"] { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); }
.edition__all { margin-top: 8px; color: var(--teal); }
[data-hidden] { display: none !important; }
.start__panel { width: 400px; }
.start__room > p { margin: 6px 4px 6px; font: 600 .76rem var(--ui); color: var(--ink-2); }
.start__room { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 8px; }
.start__room > p { grid-column: 1 / -1; }
.start__tile { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; text-decoration: none; font: 500 .9rem/1.2 var(--ui); }
.start__tile:hover { background: var(--hover); }
.start__links { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.start__links a { padding: 6px 10px; border-radius: 999px; background: var(--win-2); font: 500 .84rem var(--ui); text-decoration: none; }
.start__links a:hover { background: var(--hover); }

/* the section badge: its icon on its color, like an app icon */
.seal {
  --seal: var(--teal);
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; color: #fff;
  background: linear-gradient(162deg, color-mix(in srgb, var(--seal) 78%, #fff) 0%, var(--seal) 52%, color-mix(in srgb, var(--seal) 84%, #000) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 2px rgb(0 0 0 / .14);
}
.seal--lg { width: 58px; height: 58px; border-radius: 17px; }

/* ------------------------------------------------------------------ the desk */
.desk { display: block; max-width: var(--wrap); margin: 0 auto; padding: 22px 16px 0; }
.notice { margin: 12px auto 0; max-width: var(--wrap); padding: 10px 16px; border-radius: 12px; background: color-mix(in srgb, var(--crown) 16%, var(--win)); font: 500 .92rem var(--ui); }
.tickerwrap { max-width: var(--wrap); margin: 12px auto 0; padding: 0 16px; }
.tickerwrap .nowspot { border-radius: 12px; overflow: hidden; }

/* a window */
.win { background: var(--win); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--sh-2); min-width: 0; }
.win__bar { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--rule); border-radius: var(--r) var(--r) 0 0; background: linear-gradient(var(--win-2), var(--win)); font: 600 .86rem/1.25 var(--ui); color: var(--ink-2); }
.win__bar h2, .win__bar h1 { margin: 0; font: inherit; color: var(--ink); }
.win__bar .seal { width: 24px; height: 24px; border-radius: 7px; }
.win__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.win__tools a, .win__min { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 .82rem var(--ui); text-decoration: none; cursor: pointer; }
.win__tools a:hover, .win__min:hover { background: var(--hover); color: var(--ink); }
.win__min svg { transition: transform .2s ease; }
.win[data-collapsed] .win__min svg { transform: rotate(-90deg); }
.win[data-collapsed] .win__body { display: none; }
.win[data-collapsed] .win__bar { border-bottom-color: transparent; border-radius: var(--r); }
.win__body { padding: 18px; }

/* desk headings between windows */
.deskhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 40px 4px 16px; }
.deskhead h2 { margin: 0; font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--display); letter-spacing: -.01em; }
.deskhead p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.deskhead nav { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------ the Crown: the CEO's chosen pieces, as a magazine cover */
.win--crown { overflow: hidden; }
.win--crown .win__bar { color: var(--crown-ink); background: linear-gradient(color-mix(in srgb, var(--crown) 10%, var(--win)), var(--win)); }
.win--crown .win__bar .crownmark { color: var(--crown); }
.win--crown .win__bar time { font-weight: 500; color: var(--ink-2); }
.cover { display: grid; gap: 28px; padding: 28px 32px 30px; grid-template-columns: minmax(0, 1fr); }
.cover--img { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.cover__img { display: block; margin: 0; border-radius: 12px; overflow: hidden; background: var(--win-2); aspect-ratio: 4 / 3; }
.cover__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.cover__title { margin: 0; font: 700 clamp(2.15rem, 4.4vw, 4rem)/1.02 var(--display); letter-spacing: -.018em; }
.cover__title a { text-decoration: none; }
.cover__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cover__dek { margin: 14px 0 0; font: italic 400 clamp(1.12rem, 1.6vw, 1.38rem)/1.4 var(--serif); color: var(--ink-2); max-width: 46ch; }
.cover__text { margin: 20px 0 0; font: 400 1.06rem/1.62 var(--serif); text-align: justify; hyphens: auto; -webkit-hyphens: auto; columns: 2 17rem; column-gap: 30px; column-rule: 1px solid var(--rule); }
.cover__text p { margin: 0 0 .8em; }
.cover__why { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--crown) 35%, var(--rule)); font: italic 400 1.02rem/1.45 var(--serif); color: var(--crown-ink); }
.cover__why .crownmark { color: var(--crown); margin-top: 3px; }
.cover__go { display: inline-flex; margin-top: 18px; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.pick { padding: 16px 20px 18px; border-left: 1px solid var(--rule); }
.pick:first-child { border-left: 0; }
.pick h3 { margin: 8px 0 6px; font: 700 1.12rem/1.22 var(--display); }
.pick h3 a { text-decoration: none; }
.pick h3 a:hover { text-decoration: underline; }
.pick p { margin: 0; font: 500 .8rem var(--ui); color: var(--ink-2); }
.pick .crownmark { color: var(--crown); }

/* ------------------------------------------------------------------ chips */
.secchip { --sec: var(--teal); display: inline-flex; align-items: center; gap: 5px; font: 600 .78rem/1.2 var(--ui); color: color-mix(in srgb, var(--sec) 74%, var(--ink)); }
.secchip-link { text-decoration: none; }
.secchip-link:hover .secchip { text-decoration: underline; }
.appchip { --app: var(--teal); display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem/1.2 var(--ui); color: var(--ink-2); }
.appchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--app); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app) 22%, transparent); }
.crownmark { color: var(--crown); vertical-align: -2px; }
.fmt { font: italic 500 .95rem var(--serif); color: color-mix(in srgb, var(--sec, var(--teal)) 70%, var(--ink)); }
.flag { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--win-2); color: var(--ink-2); font: 600 .68rem/1.4 var(--ui); }
.flag--breaking { background: #D7263D; color: #fff; }
.flag--excl { background: color-mix(in srgb, var(--crown) 22%, var(--win)); color: var(--crown-ink); }
.place { font: 600 .78rem var(--ui); color: var(--teal); text-decoration: none; }
.tag-ai { font: 500 .72rem var(--ui); color: var(--ink-2); }

/* ------------------------------------------------------------------ the board: pins in a masonry */
.board { columns: 4 250px; column-gap: var(--gap); }
.board--room { columns: 2 220px; }
.board.is-masonry { columns: auto; display: block; }
.board__row { display: flex; align-items: flex-start; gap: var(--gap); }
.board__col { flex: 1 1 0; min-width: 0; }
.board .board__full { margin: 0 0 var(--gap); }
.pin {
  --sec: var(--teal);
  position: relative; display: block; break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 var(--gap);
  padding: 14px 16px 14px; background: var(--win); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--sh-1);
}
.pin__img { display: block; margin: -14px -16px 12px; border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; overflow: hidden; position: relative; background: var(--win-2); }
.pin__img img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.pin__play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pin__play::after { content: ""; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }
.pin__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pin__crown { display: inline-flex; }
.pin__fmt { margin: 8px 0 -2px; font: italic 500 .92rem/1.2 var(--serif); color: color-mix(in srgb, var(--sec) 70%, var(--ink)); }
.pin h3 { margin: 8px 0 6px; font: 700 1.22rem/1.2 var(--display); letter-spacing: -.004em; }
.pin h3 a { text-decoration: none; }
.pin h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole pin opens the story */
.pin h3 a:focus-visible { outline: 0; }
.pin:has(h3 a:focus-visible) { outline: 3px solid color-mix(in srgb, var(--teal) 70%, transparent); outline-offset: 2px; }
.pin:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; }
.pin__dek { margin: 0 0 8px; font: 400 .92rem/1.45 var(--ui); color: var(--ink-2); }
.pin__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font: 500 .76rem/1.3 var(--ui); color: var(--ink-2); }
.pin__meta > span:first-child { font-weight: 600; }
.pin a.place, .pin .secchip-link { position: relative; z-index: 1; }
/* looks */
.pin--tint { background: color-mix(in srgb, var(--sec) 10%, var(--win)); }
.pin--tint h3 { color: color-mix(in srgb, var(--sec) 58%, var(--ink)); }
.pin--color { background: color-mix(in srgb, var(--sec) 74%, #000); border-color: transparent; color: #fff; }
.pin--color h3 { font-size: 1.42rem; line-height: 1.14; }
.pin--color .secchip, .pin--color .pin__fmt, .pin--color .pin__dek, .pin--color .pin__meta { color: rgb(255 255 255 / .84); }
.pin--color .crownmark { color: #F2CE7A; }
.pin--color .flag { background: rgb(255 255 255 / .18); color: #fff; }
.pin--story h3 { font-size: 1.12rem; }
.pin--quote { padding: 20px 20px 16px; margin-left: 0; margin-right: 0; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.pin--quote blockquote { margin: 0; font: italic 500 1.3rem/1.32 var(--serif); color: color-mix(in srgb, var(--sec) 66%, var(--ink)); }
.pin--quote blockquote::before { content: "“"; display: block; height: .55em; font: 700 3.4rem/1 var(--display); color: var(--sec); opacity: .5; }
.pin--quote figcaption { margin-top: 12px; font: 500 .8rem/1.35 var(--ui); color: var(--ink-2); }
.pin--quote figcaption a { text-decoration: none; }
.pin--quote figcaption a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ CashIn Now's free placements */
.nowspot { display: block; min-width: 0; }
.nowspot__label { display: flex; align-items: center; gap: 7px; margin: 0 2px 8px; font: 600 .72rem/1.2 var(--ui); color: var(--ink-2); }
.nowspot__label i { width: 7px; height: 7px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 3px color-mix(in srgb, var(--now) 20%, transparent); }
.nowspot .cashin-now { border-radius: 12px; overflow: hidden; }
.nowspot:has(> .cashin-now[data-cn="empty"]), .nowspot:has(> .cashin-now[data-cn="error"]), .nowspot.is-empty { display: none; }
.pin--now { padding: 10px 10px 10px; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.nowspot--cover { margin: 22px 0 0; }
.nowspot--text { margin: 10px 0 0; }
.nowspot--rail, .nowspot--endlist { padding: 12px; background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.body .nowspot { margin: 1.8em 0; padding: 12px; background: var(--win-2); border-radius: 14px; text-align: left; hyphens: manual; }

/* ------------------------------------------------------------------ rooms: grouped windows on the desk */
.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr)); gap: 22px; align-items: start; }
.room__secs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.room__secs a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--win-2); font: 500 .86rem var(--ui); text-decoration: none; }
.room__secs a:hover { background: var(--hover); }
.room__secs .seal { width: 24px; height: 24px; border-radius: 50%; }
.room__secs a[aria-current="true"] { background: var(--ink); color: var(--win); }
.room .board { --gap: 14px; }
.room .pin { box-shadow: none; background: var(--win-2); border-color: transparent; }
.room .pin--color { background: color-mix(in srgb, var(--sec) 74%, #000); }
.room .pin--tint { background: color-mix(in srgb, var(--sec) 12%, var(--win-2)); }

/* a ranked list in a window */
.ranklist { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.ranklist li { counter-increment: r; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--rule); }
.ranklist li:first-child { border-top: 0; padding-top: 2px; }
.ranklist li::before { content: counter(r); font: 700 1.35rem/1 var(--display); color: color-mix(in srgb, var(--teal) 70%, var(--ink-2)); text-align: right; padding-top: 2px; }
.ranklist h3 { margin: 4px 0 4px; font: 700 1.06rem/1.25 var(--display); }
.ranklist h3 a { text-decoration: none; }
.ranklist h3 a:hover { text-decoration: underline; }
.ranklist p { margin: 0; font: 500 .78rem var(--ui); color: var(--ink-2); }
.ranklist--plain li { grid-template-columns: minmax(0, 1fr); }
.ranklist .ranklist__now { display: block; counter-increment: none; }
.ranklist .ranklist__now::before { content: none; }
.ranklist--plain li::before { content: none; }
.ranklist--big h3 { font-size: 1.28rem; }
.ranklist--big li::before { font-size: 1.7rem; }

/* ------------------------------------------------------------------ the dock */
.dock {
  position: fixed; left: 50%; bottom: 14px; z-index: 45; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 4px; padding: 7px 8px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: var(--sh-3);
}
.dock { transition: transform .25s ease, opacity .25s ease; }
.dock.is-away { transform: translate(-50%, calc(100% + 24px)); opacity: 0; }
.dock a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 3px 4px 6px; border-radius: 14px; text-decoration: none; }
.dock .seal { width: 44px; height: 44px; border-radius: 12px; transition: transform .18s ease; }
.dock a:hover .seal, .dock a:focus-visible .seal { transform: translateY(-4px) scale(1.06); }
.dock__label { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 9px; border-radius: 7px; background: var(--ink); color: var(--win); font: 500 .76rem/1.2 var(--ui); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.dock a:hover .dock__label, .dock a:focus-visible .dock__label { opacity: 1; }
.dock a[aria-current="page"]::after { content: ""; position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.dock__sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--rule); }
.dock .seal--home { --seal: var(--teal); }
.dock .seal--crown { --seal: var(--crown); }
.seal .crownmark { color: #fff; vertical-align: 0; }

/* ------------------------------------------------------------------ sections */
.sechead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 24px; }
.sechead h1 { margin: 0; font: 700 clamp(2rem, 4vw, 3rem)/1.05 var(--display); letter-spacing: -.015em; color: color-mix(in srgb, var(--sec) 55%, var(--ink)); }
.sechead p { margin: 6px 0 0; color: var(--ink-2); max-width: 70ch; }
.sechead .hint { font-size: .86rem; }
.sechead__room { font: 600 .8rem var(--ui); color: var(--ink-2); }
.sechead__fmt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.sechead__fmt a { font: 700 1.12rem/1.3 var(--display); text-decoration: none; }
.sechead__fmt a:hover { text-decoration: underline; }
.facets { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 2px 16px; }

/* ------------------------------------------------------------------ the story: a magazine page in a document window */
.read { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.read > .rail { padding-top: 4px; }
.doc { --sec: var(--teal); overflow: hidden; }
.doc__in { max-width: 720px; margin: 0 auto; padding: 38px 44px 44px; }
.doc__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; }
.doc__kicker .fmt { font-size: 1rem; }
.doc h1 { margin: 0; font: 700 clamp(2.05rem, 4.2vw, 3.25rem)/1.06 var(--display); letter-spacing: -.016em; }
.doc__dek { margin: 14px 0 0; font: italic 400 clamp(1.15rem, 1.7vw, 1.36rem)/1.42 var(--serif); color: var(--ink-2); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); font: 500 .84rem/1.4 var(--ui); color: var(--ink-2); }
.byline strong { color: var(--ink); font-weight: 600; }
.byline .crownmark { color: var(--crown); }
.disclose, .correction, .sponsor-line { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--win-2); font: 400 .86rem/1.5 var(--ui); color: var(--ink-2); }
.correction { background: color-mix(in srgb, var(--danger) 10%, var(--win)); color: var(--ink); }
.crownnote { display: flex; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--crown) 12%, var(--win)); font: italic 400 .98rem/1.45 var(--serif); color: var(--crown-ink); }
.crownnote .crownmark { margin-top: 3px; }
.doc__media { margin: 26px -44px 0; }
.doc__media img { display: block; width: 100%; height: auto; }
.doc__media figcaption { padding: 8px 44px 0; font: 400 .8rem var(--ui); color: var(--ink-2); }
.player { position: relative; margin: 26px 0 0; border-radius: 12px; overflow: hidden; background: #000; }
.player iframe, .player video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.body { margin-top: 30px; font: 400 1.19rem/1.7 var(--serif); }
.body p { margin: 0 0 1.05em; }
.body > p:first-of-type::first-letter { float: left; margin: .07em .09em 0 0; font: 700 4.35em/.8 var(--display); color: color-mix(in srgb, var(--sec) 78%, var(--ink)); }
.body h2 { margin: 1.7em 0 .5em; font: 700 1.48rem/1.2 var(--display); letter-spacing: -.006em; text-align: left; }
.body h3 { margin: 1.4em 0 .4em; font: 700 1.2rem/1.25 var(--display); text-align: left; }
.body blockquote { margin: 1.5em 0; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--sec); font: italic 500 1.42rem/1.42 var(--serif); color: color-mix(in srgb, var(--sec) 62%, var(--ink)); text-align: left; hyphens: manual; }
.body blockquote p { margin: 0; }
.body ul, .body ol { padding-left: 1.3em; text-align: left; }
.body li { margin: .3em 0; }
.body a { color: color-mix(in srgb, var(--teal) 85%, var(--ink)); }
.fine, .fine-print { margin: 20px 0 0; font: 400 .84rem/1.5 var(--ui); color: var(--ink-2); }
@media (min-width: 600px) { .body p, .body li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } }

.doc__section { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); }
.doc__section > h2 { margin: 0 0 14px; font: 700 1.3rem/1.2 var(--display); }
.fromcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.fromcard { --app: var(--teal); display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--win-2); border-top: 3px solid var(--app); text-decoration: none; }
.fromcard b { font: 700 1rem/1.25 var(--display); }
.fromcard small { font: 500 .76rem var(--ui); color: var(--ink-2); }
.fromcard:hover b { text-decoration: underline; }
.sources ol { margin: 0; padding-left: 1.2em; font: 400 .9rem/1.5 var(--ui); }
.sources li { margin: 4px 0; }
.sources small { color: var(--ink-2); }
.made { margin-top: 18px; font: 400 .88rem/1.5 var(--ui); }
.made summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.made dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 14px; margin: 12px 0 0; }
.made dt { font-weight: 600; }
.made dd { margin: 0; color: var(--ink-2); }
.engage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule); }
.engage h2 { margin: 0 8px 0 0; font: 700 1.1rem var(--display); }
.rail { min-width: 0; }
.rail__sticky { position: sticky; top: 76px; display: grid; gap: 18px; }
.rail .win__body { padding: 14px 16px; }

/* ------------------------------------------------------------------ talk */
.talk { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); }
.talk h2 { margin: 0 0 8px; font: 700 1.3rem/1.2 var(--display); }
.talk__intro { margin: 0 0 14px; color: var(--ink-2); font-size: .92rem; }
.thread { list-style: none; margin: 18px 0 0; padding: 0; }
.thread li { padding: 14px 0; border-top: 1px solid var(--rule); }
.thread .who { display: flex; align-items: baseline; gap: 10px; font: 600 .88rem var(--ui); }
.thread .who small { font-weight: 400; color: var(--ink-2); }
.thread p { margin: 6px 0 0; font: 400 1rem/1.55 var(--serif); }
.thread .q { font-style: italic; }
.ai { display: inline-block; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 14%, var(--win)); color: var(--teal); font: 600 .74rem/1.5 var(--ui); }

/* ------------------------------------------------------------------ controls */
.btn, .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; font: 600 .88rem/1 var(--ui); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn { padding: 10px 18px; border: 1px solid var(--teal); background: var(--teal); color: var(--on-teal); }
.btn:hover { background: var(--teal-2); border-color: var(--teal-2); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--teal); }
.btn--ghost:hover { background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); }
.chip { padding: 7px 14px; border: 1px solid var(--rule); background: var(--win); color: var(--ink); font-weight: 500; }
.chip:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--rule)); }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip[aria-current="page"] { background: var(--ink); color: var(--win); border-color: var(--ink); }
.chip .n { font-variant-numeric: tabular-nums; }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 5px; font: 600 .85rem var(--ui); }
.form input:not([type="checkbox"]):not([type="radio"]), .form textarea, .form select { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--win); color: var(--ink); font: 400 1rem/1.45 var(--ui); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: color-mix(in srgb, var(--teal) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); }
.form textarea { min-height: 110px; resize: vertical; }
.form .hp { position: absolute; left: -5000px; }
.form .btn { justify-self: start; }
.form .check { display: flex; gap: 8px; align-items: flex-start; font: 500 .92rem/1.4 var(--ui); }
.form .check input { margin-top: 3px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form fieldset { margin: 4px 0 6px; padding: 12px 14px 14px; border: 1px solid var(--rule); border-radius: 12px; }
.form legend { padding: 0 6px; font: 600 .9rem/1.3 var(--ui); }
.form__msg { margin: 0; min-height: 1.2em; font-size: .9rem; color: var(--teal); }
.form__msg.bad, .bad { color: var(--danger); }
.flash { padding: 10px 14px; border-radius: 10px; margin: 0 0 14px; background: color-mix(in srgb, var(--teal) 12%, var(--win)); }
.flash--bad { background: color-mix(in srgb, var(--danger) 12%, var(--win)); }
.hint { color: var(--ink-2); font-size: .88rem; }
.empty { padding: 26px; border-radius: var(--r); background: var(--glass); color: var(--ink-2); text-align: center; }
.pager { display: flex; gap: 8px; justify-content: center; margin: 10px 0 0; }

/* ------------------------------------------------------------------ plain pages (about, tips, support, legal…) */
.front { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.page { background: var(--win); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--sh-2); padding: 34px 40px 38px; min-width: 0; }
.page > * { max-width: 720px; }
.page--wide > * { max-width: none; }
.page h1 { margin: 0 0 14px; font: 700 clamp(2rem, 4vw, 2.8rem)/1.08 var(--display); letter-spacing: -.014em; }
.page h2 { margin: 1.6em 0 .5em; font: 700 1.35rem/1.25 var(--display); }
.page p, .page li { line-height: 1.62; }
.page .lead-in { font: italic 400 1.2rem/1.5 var(--serif); color: var(--ink-2); }
.rules { padding-left: 1.2em; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.tier { padding: 16px; border-radius: 14px; background: var(--win-2); }
.refbox { padding: 14px 16px; border-radius: 12px; background: var(--win-2); }
.searchform { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: 8px; }
.edition-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.edition-dir a { display: block; padding: 4px 0; }
.edition-find { margin: 12px 0; }
.edition-find input { width: 100%; max-width: 420px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--win); color: var(--ink); font: 400 1rem var(--ui); }
.edition-next { margin-top: 20px; }

/* ------------------------------------------------------------------ free placements: the gallery, the site owner's page */
.gal-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; align-items: center; padding: 34px 36px; }
.gal-hero h1 { margin: 0 0 14px; font: 700 clamp(2.1rem, 4.4vw, 3.6rem)/1.04 var(--display); letter-spacing: -.016em; }
.gal-hero p { margin: 0 0 14px; max-width: 58ch; color: var(--ink-2); font-size: 1.06rem; }
.gal-hero__go { display: flex; flex-wrap: wrap; gap: 8px; }
.gal-hero__demo { display: grid; place-items: center; min-height: 300px; }
.gal-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
.gal-steps li { counter-increment: s; padding: 16px 18px; border-radius: 14px; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: .94rem; }
.gal-steps li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; background: var(--teal); color: var(--on-teal); font: 700 1rem var(--display); }
.gal-grid { columns: 3 300px; column-gap: var(--gap); }
.gal-item { break-inside: avoid; margin: 0 0 var(--gap); }
.gal-item .cn-card { border-radius: var(--r); box-shadow: var(--sh-1); }
.gal-item figcaption { margin-top: 8px; font: 500 .84rem var(--ui); color: var(--ink-2); }
.gal-item summary { cursor: pointer; }
.gal-item .codebox { margin-top: 8px; }
.fmtgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--gap); }
.fmtgrid .win__bar h3 { margin: 0; font: inherit; color: var(--ink); }
.fmt-demo { display: grid; place-items: center; min-height: 120px; padding: 12px; border-radius: 12px; background: var(--win-2); overflow: hidden; }
.fmt-demo--wide { place-items: stretch; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.stat { padding: 16px; border-radius: 14px; background: var(--win); border: 1px solid var(--edge); }
.win .stat { background: var(--win-2); border-color: transparent; }
.stat b { display: block; margin-bottom: 4px; font: 700 1.45rem/1.15 var(--display); }
.stat span { font: 400 .9rem/1.5 var(--ui); color: var(--ink-2); }
.codebox { position: relative; }
.codebox pre { margin: 0; padding: 14px 16px; border-radius: 12px; background: #15161E; color: #D9F2F0; font: 500 .8rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.codebox button { position: absolute; top: 8px; right: 8px; padding: 5px 10px; border: 0; border-radius: 999px; background: var(--teal); color: var(--on-teal); font: 600 .74rem var(--ui); cursor: pointer; }
.nodekey { display: grid; gap: 8px; }
.sparks { display: flex; align-items: flex-end; gap: 3px; height: 80px; margin-top: 14px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.sparks i { flex: 1; min-width: 3px; background: var(--teal); border-radius: 2px 2px 0 0; }
.sparks i.c { background: var(--crown); }
@media (max-width: 860px) { .gal-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; } .gal-steps { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ footer */
.footer { max-width: var(--wrap); margin: 64px auto 0; padding: 0 16px 20px; }
.footer__in { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 26px; padding: 26px 28px; border-radius: 18px; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.footer__about p { margin: 10px 0 0; font-size: .86rem; color: var(--ink-2); max-width: 46ch; }
.footer nav { display: grid; align-content: start; gap: 5px; font-size: .86rem; }
.footer nav h2 { margin: 0 0 4px; font: 600 .84rem var(--ui); }
.footer nav a { color: var(--ink-2); text-decoration: none; }
.footer nav a:hover { color: var(--ink); text-decoration: underline; }
.footer__legal { margin: 14px 8px 0; font-size: .8rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ Computer's face */
/* keycaps: every section badge is a key, lit from above, with a darker skirt */
.seal { border-radius: 7px; background: linear-gradient(180deg, color-mix(in srgb, var(--seal) 82%, #fff) 0%, var(--seal) 58%); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--seal) 70%, #000), inset 0 1px 0 rgb(255 255 255 / .3), 0 1px 2px rgb(0 0 0 / .18); }
.seal--lg { border-radius: 12px; box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--seal) 70%, #000), inset 0 1px 0 rgb(255 255 255 / .3), 0 2px 4px rgb(0 0 0 / .18); }
.dock .seal { border-radius: 9px; }
.dock a[aria-current="page"] .seal { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--seal) 70%, #000), 0 0 0 2px var(--win), 0 0 0 4px var(--signal); }
.dock a[aria-current="page"]::after { display: none; }
.dock .seal--home { --seal: #1B2430; }
.dock .seal--crown { --seal: #C98A00; }
.room__secs .seal { border-radius: 6px; }

/* the menu bar: the wordmark's status light, short section names, the partner */
.wordmark__cash { font: 600 .72rem/1 var(--ui); letter-spacing: .02em; }
.menubar__nav a { font: 600 .9rem/1.2 var(--display); letter-spacing: .01em; }
.partner { display: inline-block; font: 500 .78rem/1.3 var(--ui); color: var(--ink-2); text-decoration: none; }
.partner b { font-weight: 600; color: var(--ink); }
.partner:hover b { text-decoration: underline; }
.start__partner { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }

/* windows: a machined title bar; the Crown's is the signal bar */
.win__bar { background: linear-gradient(var(--win-2), var(--win)); font-family: var(--ui); }
.win--crown .win__bar { background: #1B2430; color: #F4F6F8; border-bottom: 3px solid var(--signal); border-radius: var(--r) var(--r) 0 0; }
.win--crown .win__bar h1 { color: #fff; font: 700 1.05rem/1 var(--display); letter-spacing: .01em; }
.win--crown .win__bar time { color: rgb(244 246 248 / .74); }
.win--crown .win__bar .crownmark { color: var(--signal); }
.win--crown .win__tools a { color: rgb(244 246 248 / .82); }
.win--crown .win__tools a:hover { background: rgb(255 255 255 / .1); color: #fff; }

/* the cover: a magazine page set macro-justified — a solid block of headline, then justified columns */
.cover { padding: 30px 34px 32px; }
.cover__title { font: 700 clamp(2.4rem, 5.2vw, 4.7rem)/.98 var(--display); letter-spacing: -.012em; text-wrap: balance; }
/* the macro block: on a wide cover without a picture, the headline is set justified edge to edge */
@media (min-width: 900px) {
  .cover:not(.cover--img) .cover__title { text-align: justify; text-align-last: justify; text-wrap: balance; hyphens: none; word-spacing: -.02em; }
  .cover--img .cover__title { font-size: clamp(2.2rem, 3.6vw, 3.5rem); }
}
.cover__dek { font: italic 400 clamp(1.1rem, 1.5vw, 1.32rem)/1.45 var(--serif); max-width: none; }
@media (min-width: 600px) { .cover__dek { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } }
.cover__text { font: 400 1.02rem/1.68 var(--serif); column-rule: 1px solid var(--rule); }
.cover__text p:first-child::first-letter { float: left; margin: .06em .08em 0 0; font: 700 3.3em/.82 var(--display); color: color-mix(in srgb, var(--sec) 82%, var(--ink)); }
.cover__why { border-top: 2px solid var(--signal); font: italic 400 1rem/1.45 var(--serif); }
.pick h3 { font: 700 1.16rem/1.18 var(--display); }

/* pins */
.pin h3 { font: 700 1.24rem/1.16 var(--display); letter-spacing: -.003em; }
.pin--story h3 { font-size: 1.12rem; }
.pin--color h3 { font-size: 1.46rem; line-height: 1.08; }
.pin__fmt, .fmt { font-family: var(--ui); font-style: normal; font-weight: 600; font-size: .82rem; }
.pin--quote blockquote { font: italic 400 1.22rem/1.38 var(--serif); }
.pin--quote blockquote::before { font-family: var(--display); }
.deskhead h2 { font: 700 clamp(1.6rem, 2.8vw, 2.2rem)/1.05 var(--display); letter-spacing: -.008em; }

/* the piece: Plex Serif, justified, with a condensed drop cap */
.doc h1 { font: 700 clamp(2.2rem, 4.6vw, 3.6rem)/1.02 var(--display); letter-spacing: -.012em; }
.doc__dek { font: italic 400 clamp(1.12rem, 1.6vw, 1.3rem)/1.45 var(--serif); }
.body { font: 400 1.1rem/1.74 var(--serif); }
.body > p:first-of-type::first-letter { font: 700 4.6em/.8 var(--display); }
.body h2 { font: 700 1.5rem/1.15 var(--display); }
.body h3 { font: 700 1.22rem/1.2 var(--display); }
.body blockquote { font: italic 400 1.34rem/1.42 var(--serif); }
.body code, .body pre { font-family: var(--mono); font-size: .86em; }
.body code { padding: .08em .32em; border-radius: 4px; background: var(--win-2); }
.body pre { margin: 1.4em 0; padding: 14px 16px; border-radius: 8px; background: #12161C; color: #E6EBF1; overflow-x: auto; text-align: left; hyphens: manual; line-height: 1.55; }
.body pre code { padding: 0; background: none; font-size: 1em; }
.thread p { font: 400 .98rem/1.6 var(--serif); }
.codebox pre { background: #12161C; color: #E6EBF1; font-family: var(--mono); }

/* CashIn Now's placements: a strip between the rooms, a list before the footer */
.nowspot--roomstrip { margin: 26px 0 0; }
.footspot { display: block; margin: 40px auto 0; max-width: var(--wrap); }
.footspot .cashin-now { padding: 12px; background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r); }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1120px) {
  .menubar__nav { display: none; }
  .footer__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .read, .front { grid-template-columns: minmax(0, 1fr); }
  .rail__sticky { position: static; }
  .cover--img { grid-template-columns: minmax(0, 1fr); }
  .cover__img { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  :root { --gap: 10px; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .menubar__in { height: 52px; gap: 8px; padding: 0 12px; }
  .wordmark__cash { font-size: .68rem; }
  .wordmark__one { font-size: 1.4rem; }
  .search input { width: 118px; }
  .search input:focus { width: 160px; }
  .edition summary > span:not(.sr) { display: none; }
  .edition__panel, .start__panel { position: fixed; left: 10px; right: 10px; top: 62px; width: auto; }
  .desk { padding: 14px 10px 0; }
  .tickerwrap { padding: 0 10px; }
  .board { columns: 2; }
  .board--room { columns: 2; }
  .pin { padding: 11px 12px 12px; border-radius: 14px; }
  .pin__img { margin: -11px -12px 10px; border-radius: 13px 13px 0 0; }
  .pin h3 { font-size: 1.04rem; }
  .pin--color h3 { font-size: 1.14rem; }
  .pin--story h3 { font-size: 1rem; }
  .pin__dek { display: none; }
  .pin--quote blockquote { font-size: 1.08rem; }
  .cover { padding: 20px 18px 22px; gap: 18px; }
  .cover__text { columns: 1; text-align: left; }
  .cover__text p:nth-child(n+3) { display: none; }
  .win--crown .win__tools { display: none; }
  .win__bar h1, .win__bar h2, .win__bar time { white-space: nowrap; }
  .pick { border-left: 0; border-top: 1px solid var(--rule); }
  .pick:first-child { border-top: 0; }
  .win__body { padding: 14px; }
  .deskhead { margin: 30px 2px 12px; }
  .doc__in { padding: 26px 18px 30px; }
  .doc__media { margin: 22px -18px 0; }
  .doc__media figcaption { padding: 8px 18px 0; }
  .body { font-size: 1.12rem; }
  .page { padding: 24px 18px 28px; }
  .sechead { padding: 18px; gap: 14px; }
  .seal--lg { width: 48px; height: 48px; border-radius: 14px; }
  .footer__in { grid-template-columns: 1fr 1fr; padding: 20px; }
  .form .row2 { grid-template-columns: 1fr; }
  .dock {
    left: 0; right: 0; bottom: 0; transform: none; justify-content: flex-start; gap: 0; overflow-x: auto; scrollbar-width: none;
    border-radius: 18px 18px 0 0; border-width: 1px 0 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .dock::-webkit-scrollbar { display: none; }
  .dock.is-away { transform: translateY(100%); }
  .dock a { flex: 1 0 64px; padding: 4px 2px 3px; }
  .dock .seal { width: 34px; height: 34px; border-radius: 10px; }
  .dock a:hover .seal { transform: none; }
  .dock__label { position: static; transform: none; opacity: 1; padding: 0; background: none; color: var(--ink-2); font-size: 0; }
  .dock__label::after { content: attr(data-short); font-size: .66rem; }
  .dock a[aria-current="page"] .dock__label { color: var(--ink); font-weight: 600; }
  .dock a[aria-current="page"]::after { display: none; }
  .dock__sep { display: none; }
}
@media (max-width: 380px) {
  .menubar__in { gap: 6px; }
  .menubar__right { gap: 2px; }
  .search input { width: 92px; }
  .search input:focus { width: 128px; }
}
@media (max-width: 359px) {
  .board, .board--room { columns: 1; }
  .pin__dek { display: block; }
}
/* Computer's longer wordmark on phones */
@media (max-width: 720px) {
  .menubar .wordmark__one { font-size: 1.24rem; }
  .menubar .wordmark__chip { width: 23px; height: 23px; }
}
@media (max-width: 430px) {
  .menubar .wordmark__cash { display: none; }
  .search input { width: 104px; }
  .search input:focus { width: 140px; }
}
@media (max-width: 350px) {
  .search input { width: 78px; padding-right: 6px; }
  .search input:focus { width: 112px; }
  .menubar .wordmark__one { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  body { background: #fff; padding: 0; }
  .menubar, .dock, .family, .tickerwrap, .nowspot, .rail, .footer, .engage, .talk { display: none !important; }
  .read { display: block; }
  .win, .page { box-shadow: none; border: 0; }
}