/* terraforms.art, "Studio" theme: a variant for comparison, in the spirit of Verse (verse.works).
   White page, a lot of air, hairline rules, a light grotesque (Work Sans) with one accent: the work's name in italic.
   Works sit on pale grey mats with a soft shadow, like prints. studio.js italicises "Terraforms" / "Hypercastle" in titles. */

html.studio:root:not(.x), html.studio:root:not(.x)[data-theme] {
  --bg: #ffffff; --hover: #f7f7f6; --ink: #111111; --text: #1f1f1f; --muted: #8c8c8c; --faint: #b9b9b9;
  --line: #e8e8e8; --green: #1f8a4c; --on-ink: #ffffff; --shadow: none;
  --mat: #f4f4f3;            /* the grey mat a work sits on */
  --lift: 0 10px 28px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .06);
  --sans: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --serif: var(--sans);
  color-scheme: light;
}
html.studio body { background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 400; font-size: 16px; -webkit-font-smoothing: antialiased; }
html.studio h1, html.studio h2, html.studio h3 { font-family: var(--sans); font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
html.studio em.st-it { font-style: italic; font-weight: 300; }
html.studio .rails { border-left: 0; border-right: 0; }
html.studio .note { font-size: 11px; color: var(--faint); border-bottom: 1px solid var(--line); }

/* ---------- Header: wordmark left, plain words right, no box ---------- */
html.studio header.top { min-height: 88px; border-bottom: 1px solid var(--line); }
html.studio header.top > * + * { border-left: 0; }
/* the name in Noto Sans Mono: the work's characters come from Noto fonts ("Noto Mathcastles Remix"), and a monospace
   letter takes one cell, like a character in a parcel's 32 x 32 grid (the user's choice, 2026-11-13) */
html.studio .brand { font-family: "Noto Sans Mono", ui-monospace, Menlo, monospace; font-size: 20px; font-weight: 400; letter-spacing: -.02em; gap: 12px; }
/* the mark: the user's pixel Hypercastle (logo-ref.svg, from their reference picture, 2026-11-12); it is taller than wide */
html.studio .brand::before { content: ""; width: 22px; height: 36px; flex: none; image-rendering: pixelated;
  background: url("logo-ref.svg") center / contain no-repeat; }
html.studio header nav { font-size: 15px; gap: 32px; justify-content: flex-end; }
html.studio header nav a { color: var(--ink); }
html.studio header nav a:hover { color: var(--muted); text-decoration: none; }
html.studio header nav a[aria-current] { text-decoration: none; font-weight: 500; }
html.studio header nav .drop { border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .08); padding: 8px 0; }
html.studio header nav .drop a { color: var(--text); font-size: 15px; }
html.studio header nav .drop a:hover { background: var(--hover); color: var(--ink); }

/* Small uppercase labels, as Verse writes "SERIES" */
html.studio .note, html.studio .entry .meta, html.studio .list-head h3, html.studio .picker button { font-variant-numeric: tabular-nums; }

/* ---------- Titles ---------- */
html.studio .intro { border-bottom: 1px solid var(--line); }
html.studio .intro h1 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.02em; font-weight: 400; }
html.studio .intro p { font-size: 16px; line-height: 1.65; color: var(--muted); }

/* ---------- Artwork page ---------- */
html.studio .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); border-bottom: 1px solid var(--line); }
html.studio .hero .text { padding: 72px 40px 96px 48px; }
html.studio .intro-text { max-width: 36em; }
html.studio .intro-text h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 32px; }
html.studio .intro-text p { font-size: 17px; line-height: 1.7; color: var(--text); }
html.studio .hero .text .intro-text p + p { color: var(--muted); }
html.studio .intro-text a, html.studio .entry .about a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint);
  text-decoration-thickness: 1px; text-underline-offset: 4px; }
html.studio .intro-text a:hover, html.studio .entry .about a:hover { text-decoration-color: var(--ink); }
html.studio .castle { background: transparent; }

/* ---------- Lists with a picker: an accordion-like list on the left, as Verse's Details / Market / Journal ---------- */
html.studio .layout { border-bottom: 1px solid var(--line); }
html.studio .picker { border-right: 0; padding: 24px 32px 0 48px; }
html.studio .picker button { font-size: 15px; color: var(--text); padding: 16px 0; border-bottom: 1px solid var(--line); background: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } /* the arrow stays on the same line as a long name */
html.studio .picker button::after { content: "›"; flex: none; color: var(--faint); }
html.studio .picker button:hover { background: none; color: var(--ink); }
html.studio .picker button[aria-pressed="true"] { background: none; box-shadow: none; color: var(--ink); font-weight: 500; }
html.studio .picker button[aria-pressed="true"]::after { color: var(--ink); }
html.studio .entry { border-bottom: 1px solid var(--line); padding: 36px 40px 40px; gap: 10px 48px; }
html.studio .entry h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; }
html.studio .entry h3 a:hover { color: var(--muted); text-decoration: none; }
html.studio .entry .meta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html.studio .entry .who { font-size: 14px; color: var(--muted); }
html.studio .entry .who a:hover { color: var(--ink); }
html.studio .entry .about, html.studio .entry .text { font-size: 15.5px; line-height: 1.7; }
html.studio .entry .fix { font-size: 13.5px; }
html.studio .entry .go a { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
html.studio .entry .go a:hover { color: var(--muted); border-bottom-color: var(--faint); }
/* Pictures sit on a pale mat with a soft shadow */
html.studio .entry .pic { background: var(--mat); border: 0; padding: 18px; }
html.studio .entry .pic img { box-shadow: var(--lift); }
html.studio .entry .pic.blank { color: var(--faint); }
html.studio .entry .pic:hover img { transform: none; }
html.studio .entry .avatar { border: 0; box-shadow: var(--lift); }
html.studio .mosaic { padding: 32px 40px 40px; column-gap: 16px; }
html.studio .tile { background: var(--mat); padding: 16px; margin-bottom: 16px; }
html.studio .tile img, html.studio .tile video { box-shadow: var(--lift); }
html.studio .view { background: rgba(255, 255, 255, .97); }
html.studio .view-media > * { box-shadow: var(--lift); }
html.studio .view-link { color: var(--ink); }

/* ---------- Grids of parcels: works on grey mats, text left under them ---------- */
html.studio .list-head { border-bottom: 0; padding-top: 32px; }
html.studio .list-head h3 { font-size: 15px; color: var(--ink); }
html.studio .grid { gap: 28px 16px; padding: 8px 32px 40px; margin: 0; }
html.studio .cell { border: 0; padding: 0; align-items: stretch; text-align: left; }
html.studio .cell:hover { background: none; }
html.studio .cell .art { width: 100%; max-width: none; aspect-ratio: 1 / 1; background: var(--mat); box-shadow: none;
  display: flex; align-items: center; justify-content: center; padding: 14% 18%; }
html.studio .cell .art iframe { width: auto; height: 100%; aspect-ratio: 388 / 560; box-shadow: var(--lift); transition: transform .3s ease; }
html.studio .cell:hover .art iframe { transform: translateY(-3px); }
html.studio .cell .id { margin-top: 14px; font-size: 15px; font-weight: 500; }
html.studio .cell .sub, html.studio .cell .val { font-size: 13px; color: var(--muted); }
/* Buttons: pills, as Verse's Sort / Filter */
html.studio .f-btn, html.studio .pager button { border-radius: 999px; }
html.studio .f-btn { border: 1px solid var(--line); background: var(--bg); padding: 8px 18px; font-size: 14px; }
html.studio .f-btn:hover, html.studio .f-btn[aria-expanded="true"] { border-color: var(--ink); background: var(--bg); }
html.studio .btn { border: 1px solid var(--ink); background: var(--bg); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; padding: 10px 22px; }
html.studio .btn:hover { background: var(--ink); color: var(--bg); }
html.studio .pager button[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- One parcel: the work on a big mat, the facts as a hairline list ---------- */
html.studio .stage { border-right: 0; background: var(--mat); padding: 72px 48px; }
html.studio .stage iframe { box-shadow: var(--lift); }
html.studio table, html.studio td, html.studio th { border-color: var(--line) !important; }
html.studio th { font-weight: 400; color: var(--muted); }
html.studio .u { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-decoration-style: solid; }
html.studio .u:hover { text-decoration-color: var(--ink); }

@media (max-width: 900px) {
  html.studio .hero { grid-template-columns: 1fr; }
  html.studio .hero .text { padding: 32px 16px 56px; }
  html.studio .picker { padding: 0 16px; border-bottom: 1px solid var(--line); }
  html.studio .picker-inner { gap: 22px; }
  html.studio .picker button { padding: 14px 0; border-bottom: 0; white-space: nowrap; }
  html.studio .picker button::after { content: none; }
  html.studio .picker button[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--ink); }
  html.studio .entry { padding: 28px 16px 32px; }
  html.studio .grid { padding: 8px 16px 32px; }
}

/* A price in dollars beside a price in Ξ */
html.studio .usd { color: var(--ink); margin-left: 6px; font-variant-numeric: tabular-nums; }


/* The note that the site is unofficial, under the opening text */
html.studio .hero .text .intro-text p.unofficial { margin-top: 16px; } /* same size and colour as the line above it */

/* ---------- Header tools: search and the light / dark switch, right of the menu (studio.js adds them) ---------- */
html.studio header.top { grid-template-columns: 330px minmax(0, 1fr) auto; }
html.studio header.top > nav { padding-right: 20px; }
html.studio header.top > .st-tools { gap: 10px; padding: 0 32px 0 0; }
/* The menu stands left of a slot wide enough for the open search; the box sits at the slot's right end and, when clicked,
   widens into the free space, so it never covers the menu and nothing moves (the user's choice, 2026-11-12) */
html.studio .st-search { position: relative; width: 340px; height: 38px; margin: 0; }
html.studio .st-field { position: absolute; z-index: 6; top: 0; right: 0; width: 180px; height: 38px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); cursor: text;
  transition: width .22s ease, border-color .15s ease; }
html.studio .st-field:hover { border-color: var(--faint); }
html.studio .st-search:focus-within .st-field { width: 100%; border-color: var(--ink); }
/* On narrower screens the wordmark takes only its own width and everything tightens, so the menu still fits */
@media (max-width: 1240px) {
  html.studio header.top { grid-template-columns: auto minmax(0, 1fr) auto; }
  html.studio header nav { gap: 18px; font-size: 14px; }
  html.studio header.top > nav { padding-left: 16px; padding-right: 16px; }
  html.studio header.top > .brand { padding-right: 16px; }
  html.studio .st-search { width: 180px; } html.studio .st-field { width: 120px; }
}
html.studio .st-field svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
html.studio .st-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; }
html.studio .st-field input::placeholder { color: var(--muted); }
html.studio .st-field input::-webkit-search-cancel-button { display: none; }
html.studio .st-results { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 100%; min-width: 300px; padding: 6px 0;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .1); }
html.studio .st-results a, html.studio .st-results .st-none { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 16px; font-size: 14px; text-decoration: none; }
html.studio .st-results a.on, html.studio .st-results a:hover { background: var(--hover); }
html.studio .st-main { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.studio .st-sub { color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.studio .st-results .st-none { flex-direction: column; gap: 2px; }
html.studio .st-none .st-main { color: var(--muted); }
html.studio .st-none .st-sub { white-space: normal; }
/* The switch: a moon in light mode, a sun in dark mode */
html.studio .st-mode { width: 38px; height: 38px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); }
html.studio .st-mode:hover { border-color: var(--ink); }
html.studio .st-mode svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) {
  html.studio header.top { grid-template-columns: minmax(0, 1fr) auto; }
  html.studio header.top > .st-tools { padding: 0 16px 0 0; }
  /* On a phone the search starts as a round button and opens across the header */
  html.studio .st-search, html.studio .st-field { width: 38px; }
  html.studio .st-field { padding: 0 10px; }
  html.studio .st-search:focus-within .st-field { width: calc(100vw - 32px - 48px); }
  html.studio .st-results { width: calc(100vw - 32px - 48px); }
}

/* ---------- Experiment (2026-11-12): a warm off-white page instead of white, as on 137museum.org (#F7F6F0).
   On only with ?warm=1 (kept in this browser; ?warm=0 turns it off); dark mode wins over it. ---------- */
html.studio.st-warm:root:not(.x):not(.y):not(.st-dark) {
  --bg: #f7f6f0; --hover: #efede6; --mat: #efede6; --line: #e5e1d7; --muted: #8a877f; --faint: #b8b4aa;
}

/* A parcel's frame (sandboxed iframe) is light-scheme inside. In dark mode a browser paints an iframe whose scheme
   differs from the page's opaque white, and that white showed as a hairline where the drawing stops a fraction of
   a pixel short of the edge (the user saw it, 2026-11-12). Matching the scheme keeps the frame see-through. */
html.studio iframe[sandbox] { color-scheme: light; }

/* ---------- Dark mode: the same page with the values turned around; the parcels keep their own colours ---------- */
html.studio.st-dark:root:not(.x):not(.y) {
  --bg: #101010; --hover: #1a1a1a; --ink: #f2f2f2; --text: #dcdcdc; --muted: #8e8e8e; --faint: #5e5e5e;
  --line: #262626; --green: #3fbf74; --on-ink: #101010; --mat: #181818;
  --lift: 0 10px 28px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
html.studio.st-dark .view { background: rgba(16, 16, 16, .97); }
/* Experiment (2026-11-12): with the warm background on (?warm=1), dark mode is warm too: a brown-black (#15130F), warm greys; a lighter #211E19 was tried and turned back */
html.studio.st-warm.st-dark:root:not(.x):not(.y) {
  --bg: #15130f; --hover: #1e1c17; --mat: #1c1a15; --line: #2c2924; --ink: #f2eee4; --text: #dcd7cb; --muted: #918b7f; --faint: #605b51; --on-ink: #15130f;
}
html.studio.st-warm.st-dark .view { background: rgba(21, 19, 15, .97); }
html.studio.st-dark header nav .drop, html.studio.st-dark .st-results { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }

/* Dream history: the dream on view is framed around its mat, not around the text below it,
   where the mat would cut the frame in half */
html.studio .cell.here { background: none; box-shadow: none; }
html.studio .cell.here .art { box-shadow: inset 0 0 0 1px var(--ink); }

/* "First": the earliest commit of a drawing that was committed to several parcels */
html.studio .tag-first { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--ink); border-radius: 999px;
  font-size: 10px; line-height: 1.5; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); vertical-align: 2px; }
html.studio .tag-first { cursor: help; }
html.studio .tag-first:focus { outline: none; box-shadow: 0 0 0 2px var(--line); }

/* Hover card (studio.js): a small white card with a hairline border, a soft shadow and a little arrow to its element */
html.studio .st-tip { position: fixed; z-index: 100; max-width: 260px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12); font-size: 13px; line-height: 1.45; text-align: left; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .14s ease-out, transform .14s ease-out; }
html.studio .st-tip.below { transform: translateY(-4px); }
html.studio .st-tip.on { opacity: 1; transform: none; }
html.studio .st-tip::after { content: ""; position: absolute; left: var(--arrow, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
html.studio .st-tip.below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
html.studio .st-tip-t { display: block; color: var(--ink); font-weight: 500; }
html.studio .st-tip-s { display: block; margin-top: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
html.studio.st-dark .st-tip { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }

/* "Unminted": a place of the Hypercastle that no token holds yet (All Terraforms, trait pages, its parcel page) */
html.studio .tag-unminted { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 10px; line-height: 1.5; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); vertical-align: 2px; }

/* ---------- Dropdowns in the site's style (studio.js): a button like a field, a list like the header menu ---------- */
html.studio .st-select { position: relative; display: inline-block; vertical-align: middle; }
html.studio .st-select-native { display: none !important; }
html.studio .st-select-btn { position: relative; min-width: 100%; padding: 8px 34px 8px 12px; text-align: left; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 0; }
html.studio .st-select-btn::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg); transition: transform .15s ease, margin-top .15s ease; }
html.studio .st-select-btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -1px; }
html.studio .st-select-btn:hover, html.studio .st-select-btn[aria-expanded="true"], html.studio .st-select-btn:focus-visible { border-color: var(--ink); outline: none; }
html.studio .st-select-text { display: block; overflow: hidden; text-overflow: ellipsis; }
html.studio .st-select-list { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 320px; overflow-y: auto; padding: 6px 0;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .1); }
html.studio .st-select-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 8px 16px; font-size: 14px; color: var(--text);
  white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
html.studio .st-select-opt.hl { background: var(--hover); color: var(--ink); }
html.studio .st-select-opt.on { color: var(--ink); font-weight: 500; }
html.studio .st-select-opt.on::after { content: ""; flex: none; width: 4px; height: 8px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translateY(-2px); }
html.studio.st-dark .st-select-list { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
/* in the filter panel: a full-width field, as the selects were */
html.studio .f-group .st-select { display: block; }
html.studio .f-group .st-select-btn { font-size: 15px; padding: 8px 34px 8px 10px; }
/* Sort on Sales: a pill, its list opening to the left edge of the page side */
html.studio .sort .st-select-btn { border-radius: 999px; padding: 7px 32px 7px 14px; }
html.studio .sort .st-select-list { left: auto; right: 0; }

/* Special row on a parcel page: a term explained on hover (1 of 1, Spine); plain text, no underline (the user's choice) */
html.studio .sp-tip { cursor: help; text-decoration: none; }
html.studio .sp-tip:focus { outline: none; }

/* "terraforms.art is a community project, not affiliated with Mathcastles.": bottom left of every page (build.rb) */
html.studio footer { justify-content: space-between; align-items: baseline; }
html.studio footer .indep { margin: 0 auto 0 0; font-size: inherit; line-height: inherit; color: var(--muted); } /* the size of "Back to the home page" beside it, in grey: full contrast was too loud (the user, 2026-11-12) */
html.studio footer.site-foot { display: flex; max-width: var(--rail); margin: 0 auto; padding: 22px 32px 40px; }
@media (max-width: 1440px) { html.studio footer.site-foot { margin: 0 32px; } }
@media (max-width: 720px) { html.studio footer.site-foot { margin: 0; padding: 20px 16px 32px; } }
/* the footer always at the foot of the screen, even when a page has little on it (the user, 2026-11-13): the rails
   are at least a screen tall and the footer, their last child, takes the room left above it. Only on pages whose
   rails hold a footer, so the home journey and other full-screen pages are left alone. */
html.studio .rails:has(> footer) { min-height: 100vh; display: flex; flex-direction: column; }
html.studio .rails > footer { margin-top: auto; border-top: 1px solid var(--line); position: relative; top: -1px; } /* its own line above it (the user, 2026-11-13), laid over the last block's bottom line when they meet, so a full page still shows one */
html.studio .rails > footer.site-foot { margin: auto 0 0; max-width: none; }

/* The Traits side menu (traitmenu.js, trial behind ?menu=1, 2026-11-13): five kinds, the one on view open with its values */
html.studio .tm { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; display: block; }
html.studio .tm-kind { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 24px 15px 32px; border-bottom: 1px solid var(--line);
  font-size: 17px; color: var(--muted); }
html.studio .tm-kind:hover { background: var(--hover); color: var(--ink); }
html.studio .tm-kind.open { color: var(--ink); background: var(--hover); box-shadow: inset 3px 0 0 var(--ink); }
html.studio .tm-n { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
html.studio .tm-list { display: flex; flex-direction: column; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
html.studio .tm-item { display: flex; align-items: center; gap: 10px; padding: 5px 20px 5px 32px; font-size: 15px; line-height: 1.3; color: var(--muted); }
html.studio .tm-item { white-space: nowrap; min-width: 0; } /* one line each; a long name ends in an ellipsis */
html.studio .tm-item > :not(.tm-pal):not(.tm-x):not(.tm-b), html.studio .tm-item { text-overflow: ellipsis; overflow: hidden; }
html.studio .tm-item:hover { color: var(--ink); background: var(--hover); }
html.studio .tm-x { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
html.studio .tm-b { min-width: 1.8em; font-variant-numeric: tabular-nums; }
html.studio .tm-g { font-size: 15px; letter-spacing: .08em; color: var(--ink); white-space: nowrap; overflow: hidden; }
html.studio .tm-pal { display: inline-flex; flex: none; }
html.studio .tm-pal i { width: 5px; height: 14px; }
html.studio .tm-item.on { color: var(--ink); background: var(--hover); box-shadow: inset 3px 0 0 var(--ink); }
@media (max-width: 760px) { html.studio .tm { position: static; max-height: 50vh; } }
/* "likely not a real sale": a small circled ! beside a price, explained by its hover card (2026-11-13) */
html.studio .doubt { display: inline-flex; vertical-align: -2px; margin-left: 8px; color: var(--muted); cursor: help; }
html.studio .doubt:hover, html.studio .doubt:focus { color: var(--ink); outline: none; }
/* One underline for every link on the site: small dots (the user, 2026-11-13; it was dots on some pages, a solid line
   on others). !important because many page templates set their own underline style; colour and hover stay as they are. */
html.studio a { text-decoration-style: dotted !important; text-decoration-color: var(--muted) !important; } /* dots in the faint line colour were barely visible */
html.studio a:hover { text-decoration-color: var(--ink) !important; }