/* ============================================================================ TopTier · chaptered editorial theme over scrollcraft. Loaded AFTER scrollcraft.css. The engine's [data-sc-*] selectors are the mechanism and are not restyled here; everything below is this page's markup. ========================================================================== */ :root { /* Six roles. The app's own navy and periwinkle, held at magazine restraint. */ --sc-canvas: #0B1020; --sc-surface: #141B2E; --sc-ink: #EDF0F7; --sc-ink-soft: #9AA3BC; --sc-accent: #8B7BFF; --sc-accent-ink: #0B1020; --sc-font-display: "Archivo", system-ui, sans-serif; --sc-font-text: "DM Sans", system-ui, sans-serif; /* .sc-label is engine type. Point it at the text face so small caps read as editorial small caps rather than as a monospace costume. */ --sc-font-mono: "DM Sans", system-ui, sans-serif; --sc-shadow-color: 225 48% 3%; --sc-maxw: 78rem; /* Chapter grounds. Hard cuts, painted per section, never interpolated: a cut is not a gradient, and interpolating between two chapters is exactly the softness this grammar refuses. */ --tt-ground-0: #0B1020; --tt-ground-1: #101730; --tt-ground-2: #0C1226; --tt-ground-3: #E7E9F0; --tt-ground-4: #080C18; --tt-ground-5: #131A31; --tt-ground-6: #070A14; --tt-folio-w: 12rem; } body { background: var(--tt-ground-0); } /* Chapters paint their own ground and hold it. The ground is a gradient: one soft accent glow from a corner, one deeper pool from the opposite corner, on the chapter's flat colour. The cut between chapters stays hard. */ .tt-ch { position: relative; --tt-g: var(--tt-ground-1); --tt-glow-a: rgba(139, 123, 255, 0.22); --tt-glow-b: rgba(30, 44, 100, 0.60); --tt-glow-x: 15%; --tt-glow-y: 0%; background: radial-gradient(ellipse 70% 55% at var(--tt-glow-x) var(--tt-glow-y), var(--tt-glow-a) 0%, transparent 62%), radial-gradient(ellipse 80% 60% at calc(100% - var(--tt-glow-x)) calc(100% - var(--tt-glow-y)), var(--tt-glow-b) 0%, transparent 65%), var(--tt-g); } .tt-ch--0 { --tt-g: var(--tt-ground-0); --tt-glow-x: 85%; --tt-glow-y: 10%; --tt-glow-a: rgba(139, 123, 255, 0.28); } .tt-ch--1 { --tt-g: var(--tt-ground-1); --tt-glow-x: 10%; --tt-glow-y: 100%; } .tt-ch--2 { --tt-g: var(--tt-ground-2); } .tt-ch--4 { --tt-g: var(--tt-ground-4); --tt-glow-x: 50%; --tt-glow-y: 100%; --tt-glow-a: rgba(139, 123, 255, 0.14); } .tt-ch--5 { --tt-g: var(--tt-ground-5); } .tt-ch--6 { --tt-g: var(--tt-ground-6); --tt-glow-x: 20%; --tt-glow-y: 0%; --tt-glow-a: rgba(139, 123, 255, 0.18); } /* The one paper chapter. Redefining the tokens on a subtree does NOT re-ink text whose colour already resolved on , so `color` is restated here on the same subtree. Two lightnesses of one accent hue, keyed to the ground. */ .tt-ch--paper { background: var(--tt-ground-3); --sc-canvas: #E7E9F0; --sc-surface: #DCDFE9; --sc-ink: #101730; --sc-ink-soft: #4A5168; --sc-accent: #4A37D9; --sc-accent-ink: #FFFFFF; --sc-hairline: color-mix(in oklab, #101730 16%, transparent); --sc-shadow-color: 228 24% 42%; color: var(--sc-ink); --tt-g: var(--tt-ground-3); --tt-glow-a: rgba(74, 55, 217, 0.10); --tt-glow-b: rgba(255, 255, 255, 0.7); --tt-glow-x: 90%; --tt-glow-y: 0%; } /* --------------------------------------------------------------- folio -- The chrome of a chaptered page is a folio in the margin, not a bar. It carries where you are and it is the only persistent navigation. */ .tt-folio { position: fixed; left: var(--sc-gutter); top: 50%; translate: 0 -50%; z-index: var(--sc-z-chrome); width: var(--tt-folio-w); pointer-events: none; mix-blend-mode: normal; } .tt-folio__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); } .tt-folio__item { display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline; gap: var(--sc-2); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklab, var(--sc-ink) 34%, transparent); transition: color var(--sc-d-base) var(--sc-ease-out); } .tt-folio__item a { pointer-events: auto; text-decoration: none; } .tt-folio__item[aria-current="true"] { color: var(--sc-ink); } .tt-folio__num { font-variant-numeric: tabular-nums; color: inherit; } .tt-folio__rule { display: block; height: 1px; width: 0; background: var(--sc-accent); margin-top: var(--sc-1); grid-column: 1 / -1; transition: width var(--sc-d-slow) var(--sc-ease-out); } .tt-folio__item[aria-current="true"] .tt-folio__rule { width: 100%; } @media (max-width: 1180px) { .tt-folio { display: none; } } /* The folio owns the left margin, so the chapters have to give it one. The padding sits on the section, not on the wrap, so every chapter ground still bleeds edge to edge behind it. */ @media (min-width: 1181px) { .tt-ch { padding-left: calc(var(--tt-folio-w) + var(--sc-6)); } } /* ------------------------------------------------------------- masthead -- Static, in flow, at the top of the title page. Not a fixed bar. */ .tt-masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5); padding-block: var(--sc-6) 0; border-bottom: 1px solid var(--sc-hairline); padding-bottom: var(--sc-4); } .tt-mark { display: flex; align-items: center; gap: var(--sc-3); text-decoration: none; } .tt-mark img { width: 28px; height: 28px; border-radius: var(--sc-r-sm); } .tt-mark span { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-sm); letter-spacing: 0.16em; text-transform: uppercase; } .tt-masthead__right { display: flex; align-items: center; gap: var(--sc-5); } .tt-lang { font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); } .tt-lang a { text-decoration: none; } .tt-lang a:hover { color: var(--sc-ink); } /* ------------------------------------------------------------ title page -- Type on the ground. No media above the fold: the media starts in chapter I. */ .tt-title { min-height: 100svh; display: flex; flex-direction: column; } .tt-title__body { flex: 1; align-content: center; padding-block: var(--sc-6); } .tt-h1 { /* Shares the first screen with the masthead and a running clip, so it is capped below the engine's 4xl and held to three lines. */ font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4rem); max-width: 17ch; margin-bottom: var(--sc-6); } .tt-h1 em { font-style: normal; color: var(--sc-accent); } .tt-title .tt-prose p { max-width: 50ch; } .tt-title .tt-prose p + p { margin-top: var(--sc-4); } /* The clip is a phone screen, so it keeps a phone's proportions. Autoplay, muted, looped: the landing view moves the instant it lands, and the poster is the first frame so nothing flashes. width/height attributes are presentational hints and come in pairs: override both, or the 900 in the markup becomes the rendered height. */ .tt-plate.tt-plate--clip { max-width: 17rem; } .tt-plate__frame--clip { background: #0E1626; } .tt-clip { width: 100%; height: auto; aspect-ratio: 1 / 2; object-fit: cover; display: block; } .tt-title__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-3) var(--sc-6); padding-bottom: var(--sc-5); border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); } @media (max-width: 700px) { .tt-title h1 { font-size: var(--sc-t-2xl); } } /* CTA. Editorial: a line of running text with a rule under it, not an island. The same label everywhere on the page. */ .tt-cta { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); color: var(--sc-accent); text-decoration: none; border-bottom: 2px solid var(--sc-accent); padding-bottom: 2px; transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .tt-cta:hover { color: var(--sc-ink); border-color: var(--sc-ink); } } .tt-cta:active { transform: translateY(1px); } .tt-note { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } /* --------------------------------------------------------------- spreads -- Asymmetric, never the same split twice, media in its own column with a caption. Text never runs under an image here. */ .tt-spread { display: grid; gap: var(--sc-7) var(--sc-9); align-items: start; } @media (min-width: 900px) { .tt-spread--textLead { grid-template-columns: 1.15fr 0.85fr; } .tt-spread--mediaLead { grid-template-columns: 0.8fr 1.2fr; } .tt-spread--mediaLead .tt-plate { order: -1; } } .tt-chapline { display: flex; align-items: baseline; gap: var(--sc-4); margin-bottom: var(--sc-6); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; } .tt-chapline::after { content: ""; flex: 1; height: 1px; background: var(--sc-hairline); } .tt-h2 { font-size: var(--sc-t-3xl); max-width: 15ch; } .tt-h2 em { font-style: normal; color: var(--sc-accent); } .tt-prose p { max-width: 54ch; color: var(--sc-ink-soft); } .tt-prose p + p { margin-top: var(--sc-4); } .tt-prose strong { color: var(--sc-ink); font-weight: 500; } /* Plates: a screenshot in its own frame, with a museum label under it. */ .tt-plate { margin: 0; max-width: 23rem; } /* In a text-led spread the plate hangs off the outer edge of its column, the way a magazine sets a figure into the outside margin. */ .tt-spread--textLead .tt-plate { margin-left: auto; } .tt-plate__frame { position: relative; border-radius: var(--sc-r-lg); overflow: hidden; background: var(--sc-surface); box-shadow: var(--sc-e3); outline: 1px solid var(--sc-hairline); outline-offset: -1px; } .tt-plate__frame img { width: 100%; height: auto; } .tt-plate figcaption { margin-top: var(--sc-4); padding-top: var(--sc-3); border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 34ch; } .tt-plate figcaption b { display: block; color: var(--sc-ink); font-weight: 500; } /* ---------------------------------------------------- I · el choque ------- Two rankings side by side, every pair linked, the affinity computed from the positions on the page. Static: it is read, not scrolled. */ .tt-clash { display: grid; gap: var(--sc-6); } .tt-clash__head { display: grid; gap: var(--sc-3); } .tt-clash__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sc-3) var(--sc-4); align-items: center; } .tt-col { display: grid; gap: var(--sc-2); min-width: 0; } .tt-col__name { font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); padding-bottom: var(--sc-2); border-bottom: 1px solid var(--sc-hairline); } .tt-row { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sc-3); align-items: center; padding: var(--sc-2) var(--sc-3); border-radius: var(--sc-r-sm); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); font-size: var(--sc-t-sm); line-height: 1.3; min-width: 0; transition: background var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out); } .tt-row__n { font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); } .tt-row__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-row[data-match="same"] { background: color-mix(in oklab, var(--sc-accent) 22%, var(--sc-surface)); } .tt-row[data-match="same"] .tt-row__n { color: var(--sc-ink); } /* The gutter between the two columns draws the links. */ .tt-clash__links { width: clamp(3rem, 9vw, 7rem); align-self: stretch; } .tt-clash__links svg { width: 100%; height: 100%; overflow: visible; } .tt-clash__links path { fill: none; stroke: var(--sc-accent); stroke-width: 1.25; opacity: 0.55; } .tt-clash__links path[data-same="1"] { opacity: 1; stroke-width: 2; } .tt-affinity { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-3) var(--sc-5); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); } .tt-affinity__n { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: var(--sc-track-tight); font-variant-numeric: tabular-nums; color: var(--sc-accent); } .tt-affinity__t { max-width: 40ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); } @media (max-width: 780px) { .tt-clash__links { display: none; } .tt-clash__grid { grid-template-columns: 1fr 1fr; gap: var(--sc-2) var(--sc-3); } .tt-row { padding: 6px var(--sc-2); font-size: var(--sc-t-xs); } .tt-affinity__n { font-size: var(--sc-t-2xl); } } /* -------------------------------------------------- II · paper plates ---- Two readings of the same ranking, each under its own headline, side by side on a hairline so they read as two columns of a spread, not as one grid. */ .tt-layers { display: grid; gap: var(--sc-9); margin-top: var(--sc-9); } @media (min-width: 900px) { .tt-layers { grid-template-columns: 1fr 1px 1fr; gap: var(--sc-8); } .tt-layers::before { content: ""; grid-column: 2; grid-row: 1; background: var(--sc-hairline); opacity: 1 !important; transform: none !important; } .tt-layers .tt-layer:nth-child(2) { grid-column: 3; grid-row: 1; } } .tt-layer { display: grid; gap: var(--sc-4); align-content: start; } .tt-layer__h { font-size: var(--sc-t-3xl); color: var(--sc-accent); letter-spacing: var(--sc-track-tight); } .tt-layer__k { display: block; font-size: var(--sc-t-xs); font-family: var(--sc-font-text); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: var(--sc-2); } .tt-layer__lede { max-width: 38ch; color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.4; text-wrap: pretty; margin: 0 0 var(--sc-4); } .tt-layer .tt-plate { max-width: 20rem; } .tt-ch--paper .tt-plate__frame { background: #C9CEDC; box-shadow: 0 2px 6px hsl(228 24% 42% / 0.18), 0 22px 48px -14px hsl(228 24% 42% / 0.32); } .tt-label { font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); } /* ----------------------------------------------------- III · tu turno ---- The peak. Present at p = 0 so the pinned stage is never empty. */ .tt-ch--peak { min-height: 100svh; display: grid; align-items: center; } .tt-rank { display: grid; align-content: center; gap: var(--sc-5); padding-block: var(--sc-section); } .tt-rank__head { display: grid; gap: var(--sc-3); max-width: 46ch; } .tt-rank__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); } .tt-game { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: var(--sc-4); padding: var(--sc-3) var(--sc-4); background: var(--sc-surface); border-radius: var(--sc-r-md); box-shadow: var(--sc-e1), var(--sc-edge); cursor: grab; touch-action: none; user-select: none; transition: box-shadow var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out); } .tt-game:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; } .tt-game[data-lift="1"] { cursor: grabbing; box-shadow: var(--sc-e3), var(--sc-edge); background: color-mix(in oklab, var(--sc-accent) 14%, var(--sc-surface)); z-index: 2; } .tt-game__pos { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); font-variant-numeric: tabular-nums; line-height: 1; color: var(--sc-accent); } .tt-game__pos[data-medal="1"] { color: #FFC94A; } .tt-game__pos[data-medal="2"] { color: #C9D2E4; } .tt-game__pos[data-medal="3"] { color: #D69352; } .tt-game__t { min-width: 0; } .tt-game__t b { display: block; font-weight: 500; font-size: var(--sc-t-base); line-height: 1.25; } .tt-game__t span { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); } .tt-game__grip { width: 22px; height: 22px; color: var(--sc-ink-soft); flex: none; } .tt-rank__foot { display: flex; justify-content: flex-end; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .tt-rank__reset { background: none; border: 0; padding: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; } .tt-rank__reset:hover { color: var(--sc-ink); } @media (max-width: 700px) { .tt-game { grid-template-columns: 2rem 1fr auto; gap: var(--sc-3); padding: var(--sc-2) var(--sc-3); } .tt-game__t b { font-size: var(--sc-t-sm); } } /* ---------------------------------------------------------- IV · gold ---- Premium keeps the gold the original site gave it: amber label, a gold-lit ground with the purple pool underneath, cards on a gold hairline, and the pill button. Gold is a second hue, and it is fenced to this one chapter. */ .tt-ch--gold { --tt-g: #0E0C1A; --tt-gold: #FFD740; --tt-gold-2: #FFAB40; --tt-glow-a: rgba(255, 185, 50, 0.12); --tt-glow-b: rgba(124, 77, 255, 0.16); --tt-glow-x: 25%; --tt-glow-y: 0%; border-top: 1px solid rgba(255, 195, 64, 0.15); border-bottom: 1px solid rgba(255, 195, 64, 0.15); } .tt-chapline--gold { color: var(--tt-gold); } .tt-chapline--gold::after { background: rgba(255, 215, 64, 0.22); } .tt-gold { font-style: normal; background: linear-gradient(135deg, var(--tt-gold) 0%, var(--tt-gold-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--tt-gold); } .tt-premium { display: grid; gap: var(--sc-5); margin-top: var(--sc-8); } @media (min-width: 700px) { .tt-premium { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .tt-premium { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .tt-premium__card { position: relative; overflow: hidden; text-align: center; padding: var(--sc-6) var(--sc-5); border-radius: var(--sc-r-lg); background: linear-gradient(165deg, rgba(255, 215, 64, 0.04) 0%, #18182A 40%); border: 1px solid rgba(255, 215, 64, 0.10); box-shadow: var(--sc-e1); transition: transform var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out); } .tt-premium__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 215, 64, 0.55), var(--sc-accent), rgba(255, 215, 64, 0.55), transparent); opacity: 0; transition: opacity var(--sc-d-base) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .tt-premium__card:hover { transform: translateY(-4px); border-color: rgba(255, 215, 64, 0.22); box-shadow: var(--sc-e3), 0 0 40px -20px rgba(255, 215, 64, 0.18); } .tt-premium__card:hover::after { opacity: 1; } } .tt-premium__icon { width: 2.4rem; height: 2.4rem; margin: 0 auto var(--sc-4); color: var(--tt-gold); } .tt-premium__card h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-base); letter-spacing: var(--sc-track-snug); margin: 0 0 var(--sc-2); } .tt-premium__card p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.6; } .tt-premium__cta { text-align: center; margin-top: var(--sc-8); display: grid; gap: var(--sc-4); justify-items: center; } .tt-btn-premium { display: inline-flex; align-items: center; gap: var(--sc-3); padding: 1rem 2.5rem; border-radius: var(--sc-r-pill); background: linear-gradient(135deg, #7C4DFF 0%, #6030CC 50%, rgba(255, 215, 64, 0.3) 200%); color: #FFFFFF; font-family: var(--sc-font-text); font-weight: 700; font-size: var(--sc-t-base); text-decoration: none; border: 1px solid rgba(255, 215, 64, 0.12); white-space: nowrap; transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .tt-btn-premium:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(124, 77, 255, 0.35), 0 0 20px -8px rgba(255, 215, 64, 0.15); } } .tt-btn-premium:active { transform: translateY(1px); } /* ---------------------------------------------------------- colophon ----- The close resolves: the line the page has been building to, the one action, the store buttons waiting for their links, and the ranking the visitor just made printed as the byline. Then the masthead plate and the small print. */ .tt-colophon { padding-block: var(--sc-9) var(--sc-7); } .tt-colophon__rule { height: 2px; background: var(--sc-ink); margin-bottom: var(--sc-8); } .tt-colophon__close { max-width: 46rem; } .tt-colophon__h { font-size: var(--sc-t-3xl); max-width: 16ch; } .tt-colophon__h em { font-style: normal; color: var(--sc-accent); } .tt-colophon .sc-lede { margin-top: var(--sc-5); max-width: 44ch; } .tt-colophon__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5) var(--sc-7); margin-top: var(--sc-7); } .tt-cta--big { font-size: var(--sc-t-xl); } .tt-stores { display: flex; flex-wrap: wrap; gap: var(--sc-3); } .tt-store { display: inline-flex; align-items: center; gap: var(--sc-3); padding: 0.6rem 1rem 0.6rem 0.85rem; border-radius: var(--sc-r-md); background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); box-shadow: var(--sc-edge); text-decoration: none; color: var(--sc-ink); line-height: 1.1; transition: border-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); } .tt-store span { display: grid; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-snug); } .tt-store small { font-family: var(--sc-font-text); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); } /* Waiting for the listing: visible, labelled, not a link that goes nowhere. */ .tt-store[data-tt-soon] { cursor: default; opacity: 0.72; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .tt-store:not([data-tt-soon]):hover { border-color: var(--sc-accent); transform: translateY(-1px); } } .tt-colophon__grid { display: grid; gap: var(--sc-7); margin-top: var(--sc-10); padding-top: var(--sc-7); border-top: 1px solid var(--sc-hairline); } @media (min-width: 860px) { .tt-colophon__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .tt-colophon__mark { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 0.9; letter-spacing: -0.05em; margin: 0; } .tt-colophon h3 { font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 var(--sc-3); font-weight: 500; } .tt-colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); font-size: var(--sc-t-sm); } .tt-colophon a { text-decoration-color: color-mix(in oklab, var(--sc-ink) 35%, transparent); } .tt-colophon a:hover { text-decoration-color: var(--sc-accent); } .tt-colophon .tt-cta, .tt-colophon .tt-store { text-decoration: none; } .tt-signoff { margin-top: var(--sc-8); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); } /* The trace: the top 3 the visitor built in chapter III, printed as the article's own byline. Hidden until there is something real to print. */ .tt-byline { margin-top: var(--sc-6); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .tt-byline[hidden] { display: none; } .tt-byline b { color: var(--sc-ink); font-weight: 500; } /* -------------------------------------------------------- reduced motion -- */ @media (prefers-reduced-motion: reduce) { .tt-game { transition: none; } } /* Screen-reader-only live region for the drag announcements. */ .tt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The folio carries position on desktop, so the progress line is the phone's only positional chrome and it is redundant next to the folio. */ @media (min-width: 1181px) { [data-sc-progress] { display: none; } }