/* ============================================================ Spread library: shared composition rules (rebuilt 2026-10-10). A spread is one composition used as a deck slide or an article section. Every spread here is redrawn from the ORIGINAL's actual structure (Hoffman Deck.dc.html markup, or the captured web section): same arrangement, same image slots, same accents. Only the tokens change. Colour and type come only from tokens.css. Frame: spreads are composed for a 16:9 deck frame (.full = at least one screen tall) and reflow to free height on a page. Image slots: .ph (photo, real or placeholder) and .art (TDW generated art, drawn from tokens). Accents: .accent = Noto emoji, decks only (ICONOGRAPHY.md v3.6); hidden when html has .page. ASCII only. ============================================================ */ @import url('tokens.css'); @import url('surfaces.css'); /* any spread on any surface: data-surface="" (tools/gen-surfaces.mjs) */ @import url('contrast-roles.css'); /* named regions keep their own readable pair across legacy templates */ * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--tdw-paper-warm); color: var(--tdw-date); font: 300 clamp(17px, 1.25vw, 22px)/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; } ::selection { background: var(--tdw-lime); color: var(--tdw-plum); } img { display: block; max-width: 100%; } /* browsers give
a 40px side margin by default; pictures must span their column exactly */ figure { margin: 0; } .ph { width: 100%; } /* ---------- frame ---------- */ .spread { --pad-x: clamp(20px, 4.5vw, 88px); --pad-y: clamp(36px, 4.5vw, 80px); position: relative; overflow: clip; /* clip, not hidden: hidden would stop sticky parts (the scroll dial) from sticking */ padding: var(--pad-y) var(--pad-x); } .spread.full { min-height: 100svh; display: flex; flex-direction: column; } .spread.bleed { padding: 0; } .stretch { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; } /* surfaces: One Plate Rule pairings; --surf is the field, for art that must occlude */ .on-plum { --surf: var(--tdw-plum); background: var(--tdw-plum); color: var(--tdw-bone); } .on-deep { --surf: var(--tdw-plum-deep); background: var(--tdw-plum-deep); color: var(--tdw-bone); } .on-bone { --surf: var(--tdw-bone); background: var(--tdw-bone); color: var(--tdw-date); } .on-paper { --surf: var(--tdw-paper-warm); background: var(--tdw-paper-warm); color: var(--tdw-date); } .on-beet { --surf: var(--tdw-beet); background: var(--tdw-beet); color: var(--tdw-plum); } .on-mint { --surf: var(--tdw-mint); background: var(--tdw-mint); color: var(--tdw-date); } .on-berry { --surf: var(--tdw-berry); background: var(--tdw-berry); color: var(--tdw-bone); } .on-barley { --surf: var(--tdw-barley); background: var(--tdw-barley); color: var(--tdw-bone); } /* Match ink to its actual background: Barley's field and inset cards need opposite polarities. */ .spread { color: var(--r-ink); } .flowbox, .chart, .screen, .spread .rstep, .spread .bento > .t, .spread .circ.k2 { --r-ink: var(--r-card-ink); --r-head: var(--r-card-ink); --r-accent: var(--r-card-accent); --r-muted: var(--r-card-muted); color: var(--r-card-ink); } /* Older templates inherit their panel ink. Keep those inset surfaces pale on Barley after the field turns dark. */ .spread:where(.on-barley:not([data-surface]), [data-surface="barley"]) :where(.card:not(.dark), [data-spread="S25"] .cell:not(.colhead), [data-spread="S38"]:not(.opt-ruled) .cell, .mtext, .id, .n.t3, .st, .term:not(.res), [data-spread="S78"] .panel, [data-spread="S92"] .panel, .mx) { color: var(--r-card-ink); } /* These modern panels use role variables for their text; transparent/plate options keep field/plate roles. */ .spread:is(.on-barley:not([data-surface]), [data-surface="barley"]) :where([data-spread="S38"]:not(.opt-ruled) .cell, [data-spread="S72"] .n.t3, [data-spread="S73"] .st, [data-spread="S75"] .term:not(.res), [data-spread="S76"] .card, [data-spread="S78"] .panel, [data-spread="S79"] .mx) { --r-ink: var(--r-card-ink); --r-head: var(--r-card-ink); --r-accent: var(--r-card-accent); --r-accent-2: var(--r-card-accent); --r-muted: var(--r-card-ink); color: var(--r-card-ink); } .spread[data-spread] .su-btn { background: var(--r-btn); color: var(--r-btn-ink); } /* ---------- marginalia ---------- */ .stamp { display: inline-block; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--tdw-lime); color: var(--tdw-plum); padding: 7px 9px 6px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 400 clamp(12px, .8vw, 14px)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--r-mark); } .eyebrow.plain::before { display: none; } .meta { font: 400 clamp(12px, .75vw, 13px)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } .mark { position: absolute; left: var(--pad-x); bottom: clamp(18px, 2.2vw, 40px); height: clamp(14px, 1.3vw, 24px); aspect-ratio: 1522 / 188; } /* the TDW wordmark, coloured by the surface (mask keeps the canon shape) */ .wordmark { display: inline-block; background: var(--r-head); -webkit-mask: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='196.31 187.65 1521.99 188.38'%3E%3Cpath d='M677.81%2C187.65h-61.58v185.26h63.15c29.05%2C0%2C51.4-8%2C67.06-24.01%2C15.65-16%2C23.48-38.79%2C23.48-68.36s-7.96-52.66-23.88-68.76c-15.92-16.09-38.66-24.13-68.23-24.13ZM720.87%2C327.77c-9.39%2C10.44-23.75%2C15.66-43.06%2C15.66h-27.66v-126.29h27.66c19.31%2C0%2C33.66%2C5.22%2C43.06%2C15.66%2C9.39%2C10.44%2C14.09%2C26.35%2C14.09%2C47.75s-4.7%2C36.79-14.09%2C47.23Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M878.77%2C253.4c-8.98-5.3-19.39-7.96-31.25-7.96s-22.82%2C2.73-31.94%2C8.19c-9.13%2C5.46-16.19%2C13.07-21.18%2C22.82-5%2C9.75-7.49%2C21.18-7.49%2C34.29s2.49%2C24.57%2C7.49%2C34.4c4.99%2C9.83%2C12.09%2C17.44%2C21.3%2C22.82%2C9.21%2C5.38%2C20.05%2C8.07%2C32.53%2C8.07%2C14.35%2C0%2C26.57-3.51%2C36.63-10.53%2C10.07-7.02%2C16.81-16.62%2C20.24-28.79l-30.66-1.87c-1.72%2C5.46-4.8%2C9.71-9.25%2C12.75-4.45%2C3.04-10.03%2C4.56-16.73%2C4.56-8.89%2C0-16.03-2.77-21.41-8.31-5.38-5.53-8.39-13.77-9.01-24.69h88.7v-6.79c0-14.04-2.42-26.06-7.26-36.04-4.84-9.98-11.74-17.63-20.71-22.94ZM818.03%2C299.04c1.25-9.67%2C4.48-17.09%2C9.71-22.24%2C5.23-5.15%2C11.82-7.72%2C19.78-7.72s14.51%2C2.46%2C19.66%2C7.37c5.15%2C4.92%2C8.03%2C12.45%2C8.66%2C22.59h-57.81Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1033.89%2C349.59c-1.17-1.25-1.75-3.51-1.75-6.79v-45.4c0-16.69-4.56-29.53-13.69-38.5-9.13-8.97-22.58-13.46-40.37-13.46-15.45%2C0-28.01%2C3.55-37.68%2C10.65-9.68%2C7.1-15.76%2C17.28-18.26%2C30.54l30.43%2C1.4c1.56-6.24%2C4.41-11.04%2C8.54-14.39%2C4.13-3.35%2C9.79-5.03%2C16.97-5.03%2C7.96%2C0%2C13.96%2C2.22%2C18.02%2C6.67%2C4.05%2C4.44%2C6.08%2C11.12%2C6.08%2C20.01l-41.43%2C8.19c-13.73%2C2.65-23.95%2C7.02-30.66%2C13.1-6.71%2C6.09-10.06%2C14.51-10.06%2C25.28s3.98%2C19.15%2C11.94%2C25.16%2C18.49%2C9.01%2C31.6%2C9.01c7.8%2C0%2C14.82-1.17%2C21.06-3.51%2C6.24-2.34%2C11.43-5.65%2C15.57-9.95%2C2.56-2.66%2C4.57-5.55%2C6.02-8.66.52%2C3.59%2C1.43%2C6.64%2C2.75%2C9.13%2C2.18%2C4.14%2C5.3%2C7.02%2C9.36%2C8.66%2C4.06%2C1.64%2C8.66%2C2.46%2C13.81%2C2.46%2C2.18%2C0%2C4.33-.08%2C6.43-.23%2C2.11-.16%2C3.63-.39%2C4.56-.7v-21.77h-3.98c-2.34%2C0-4.1-.62-5.27-1.87ZM1002.17%2C322.68c0%2C6.4-1.33%2C11.94-3.98%2C16.62-2.65%2C4.68-6.4%2C8.35-11.23%2C11-4.84%2C2.65-10.61%2C3.98-17.32%2C3.98-5.93%2C0-10.49-1.32-13.69-3.98-3.2-2.65-4.8-6.4-4.8-11.23%2C0-4.37%2C1.44-7.92%2C4.33-10.65%2C2.89-2.73%2C7.68-4.8%2C14.39-6.2l32.3-6.55v7.02Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1105.47%2C347.08c-3.31%2C0-5.87-.87-7.7-2.61-1.83-1.73-2.74-4.35-2.74-7.83v-148.99h-33.4v152.38c0%2C11.48%2C3.04%2C19.83%2C9.13%2C25.05%2C6.09%2C5.22%2C14.17%2C7.83%2C24.26%2C7.83h23.33v-25.83h-12.89Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M468.54%2C349c-2.15%2C2.36-4.13%2C4.32-5.95%2C5.88-3.33%2C2.85-6.26%2C4.28-8.79%2C4.28-3.65%2C0-5.47-2.22-5.47-6.65%2C0-2.85.75-7.64%2C2.26-14.37%2C1.5-6.73%2C3.21-13.82%2C5.11-21.26%2C3.17-12.67%2C5.62-23.24%2C7.36-31.71%2C1.74-8.47%2C2.61-15.4%2C2.61-20.78%2C0-6.49-1.35-11.4-4.04-14.73-2.69-3.32-7.05-4.99-13.06-4.99-25.81%2C0-51.47%2C30.09-76.96%2C90.26h-.95c5.07-17.26%2C10.88-42.24%2C17.46-74.94%2C6.57-32.7%2C10.19-52.06%2C12.72-72.33h-194.31l-10.22%2C50.59h9.5c6.97-11.55%2C12.24-19.67%2C15.8-24.35%2C3.56-4.67%2C8.04-8.19%2C13.42-10.57%2C5.38-2.38%2C12.9-3.56%2C22.57-3.56h14.73l-17.58%2C143.71c-.95%2C7.44-3.8%2C12.39-8.55%2C14.85-4.75%2C2.46-12.11%2C3.92-22.09%2C4.39l-1.19%2C10.21h82.66l1.19-10.21c-9.82-.32-16.63-1.5-20.43-3.56-3.8-2.06-5.7-6.1-5.7-12.11%2C0-1.43.24-3.88.71-7.36l17.1-139.9h0s76.25.54%2C76.25.54c0%2C0-13.61%2C90.66-29.45%2C172.61h23.28c6.49-20.43%2C14.05-39.15%2C22.69-56.18%2C8.63-17.02%2C17.06-30.44%2C25.3-40.26%2C8.23-9.82%2C14.88-14.73%2C19.95-14.73%2C2.06%2C0%2C3.41.67%2C4.04%2C2.02.63%2C1.35.95%2C3.13.95%2C5.34%2C0%2C2.85-.48%2C6.97-1.43%2C12.35-.95%2C5.38-2.34%2C11.99-4.16%2C19.83-1.82%2C7.84-2.97%2C12.79-3.44%2C14.85-2.7%2C10.77-4.75%2C19.48-6.18%2C26.13-1.43%2C6.65-2.14%2C11.72-2.14%2C15.2%2C0%2C5.55%2C1.66%2C9.9%2C4.99%2C13.06%2C3.33%2C3.17%2C8.08%2C4.75%2C14.25%2C4.75%2C14.25%2C0%2C27.08-9.26%2C38.48-27.79-4.19-2.88-9.88-2.27-13.29%2C1.49Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M571.8%2C342.22c-3.96%2C4.78-7.95%2C8.6-11.98%2C11.46-6.02%2C4.28-13.38%2C6.41-22.09%2C6.41-7.92%2C0-14.17-2.81-18.76-8.43-4.6-5.62-6.89-14.21-6.89-25.77v-3.09c4.91-1.58%2C7.92-2.61%2C9.03-3.09%2C13.14-4.43%2C24.31-8.63%2C33.49-12.59%2C9.18-3.96%2C17.18-9.1%2C23.99-15.44%2C6.81-6.33%2C10.22-13.78%2C10.22-22.33%2C0-8.08-2.73-14.21-8.2-18.41-5.46-4.19-13.03-6.29-22.68-6.29-13.62%2C0-25.7%2C4.04-36.22%2C12.11-10.53%2C8.08-18.65%2C18.53-24.35%2C31.35-5.7%2C12.83-8.55%2C26.05-8.55%2C39.67%2C0%2C15.2%2C3.64%2C26.92%2C10.93%2C35.15%2C7.28%2C8.24%2C18.37%2C12.35%2C33.25%2C12.35%2C11.72%2C0%2C22.09-3.05%2C31.12-9.15%2C9.03-6.09%2C16.47-14.92%2C22.33-26.48l-.09-.05c-4.82-2.87-10.96-1.71-14.54%2C2.61ZM526.21%2C273.52c7.05-11%2C15.8-16.51%2C26.25-16.51%2C4.75%2C0%2C8.39%2C1.31%2C10.93%2C3.92s3.8%2C6.37%2C3.8%2C11.28c0%2C8.71-4.27%2C16.11-12.83%2C22.21-8.55%2C6.1-22.41%2C12.39-41.57%2C18.88%2C1.9-15.52%2C6.37-28.78%2C13.42-39.79Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1703.46%2C291.69c8.2%2C0%2C14.84-6.65%2C14.84-14.84s-6.65-14.84-14.84-14.84-14.84%2C6.65-14.84%2C14.84%2C6.65%2C14.84%2C14.84%2C14.84Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1703.46%2C345.85c-8.2%2C0-14.84%2C6.65-14.84%2C14.84s6.65%2C14.84%2C14.84%2C14.84%2C14.84-6.65%2C14.84-14.84-6.65-14.84-14.84-14.84Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1662.58%2C349c-2.15%2C2.36-4.13%2C4.32-5.95%2C5.88-3.32%2C2.85-6.26%2C4.28-8.79%2C4.28-3.65%2C0-5.47-2.22-5.47-6.65%2C0-2.85.75-7.64%2C2.26-14.37%2C1.5-6.73%2C3.21-13.82%2C5.11-21.26%2C3.17-12.67%2C5.62-23.24%2C7.36-31.71%2C1.74-8.47%2C2.61-15.4%2C2.61-20.78%2C0-6.49-1.35-11.4-4.04-14.73-2.69-3.32-7.05-4.99-13.06-4.99-25.81%2C0-51.47%2C30.09-76.96%2C90.26h-.95c5.07-17.26%2C10.88-42.24%2C17.46-74.94%2C6.57-32.7%2C10.19-52.06%2C12.72-72.33h-43l-1.19%2C4.75%2C17.1%2C13.54c-2.54%2C26.13-12.04%2C81.79-28.5%2C166.98h23.28c6.49-20.43%2C14.05-39.15%2C22.69-56.18%2C8.63-17.02%2C17.06-30.44%2C25.3-40.26%2C8.23-9.82%2C14.88-14.73%2C19.95-14.73%2C2.06%2C0%2C3.41.67%2C4.04%2C2.02.63%2C1.35.95%2C3.13.95%2C5.34%2C0%2C2.85-.48%2C6.97-1.43%2C12.35-.95%2C5.38-2.34%2C11.99-4.16%2C19.83-1.82%2C7.84-2.97%2C12.79-3.44%2C14.85-2.7%2C10.77-4.75%2C19.48-6.18%2C26.13-1.43%2C6.65-2.14%2C11.72-2.14%2C15.2%2C0%2C5.55%2C1.66%2C9.9%2C4.99%2C13.06%2C3.33%2C3.17%2C8.08%2C4.75%2C14.25%2C4.75%2C14.25%2C0%2C27.08-9.26%2C38.48-27.79-4.18-2.88-9.88-2.27-13.29%2C1.49Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1518.27%2C247.03h-19.5l4.75-27.08h-8.08c-6.5%2C7.28-40.14%2C40.3-40.14%2C40.3l17.34-.16-13.54%2C78.86c-1.27%2C7.6-1.9%2C13.38-1.9%2C17.34%2C0%2C6.65%2C1.66%2C11.48%2C4.99%2C14.49s8.23%2C4.51%2C14.73%2C4.51c9.03%2C0%2C18.17-3.12%2C27.43-9.38%2C9.26-6.25%2C17.06-14.52%2C23.4-24.82-4.3-3.29-10.42-2.73-14.03%2C1.32-3.4%2C3.81-6.99%2C7.09-10.79%2C9.85-6.1%2C4.43-11.36%2C6.65-15.8%2C6.65s-6.41-2.22-6.41-6.65c0-2.53.55-7.13%2C1.66-13.78l14.01-78.39h32.78c1.24-6.8-3.99-13.06-10.9-13.06Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1413.12%2C224.23c4.75%2C0%2C8.82-1.7%2C12.23-5.11%2C3.4-3.4%2C5.11-7.56%2C5.11-12.47%2C0-4.43-1.51-8.15-4.51-11.17-3.01-3.01-6.73-4.51-11.17-4.51-4.75%2C0-8.83%2C1.7-12.23%2C5.11-3.41%2C3.41-5.11%2C7.57-5.11%2C12.47%2C0%2C4.44%2C1.5%2C8.16%2C4.51%2C11.17%2C3.01%2C3.01%2C6.73%2C4.51%2C11.16%2C4.51Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1424.77%2C349c-2.15%2C2.36-4.13%2C4.32-5.95%2C5.88-3.33%2C2.85-6.26%2C4.28-8.79%2C4.28-3.64%2C0-5.46-2.22-5.46-6.65%2C0-3.01.36-6.92%2C1.07-11.76.71-4.83%2C1.82-10.73%2C3.32-17.7%2C1.5-6.97%2C2.49-11.48%2C2.97-13.54%2C2.85-12.35%2C4.95-22.17%2C6.29-29.45%2C1.34-7.28%2C2.02-13.46%2C2.02-18.53%2C0-11.24-6.02-16.87-18.05-16.87-7.29%2C0-14.53%2C2.38-21.73%2C7.13-7.21%2C4.75-13.66%2C12.59-19.36%2C23.52%2C4.3%2C2.87%2C10.04%2C1.96%2C13.35-2.02%2C6.25-7.52%2C11.54-11.28%2C15.87-11.28%2C3.8%2C0%2C5.7%2C1.74%2C5.7%2C5.23%2C0%2C4.6-.63%2C10.3-1.9%2C17.1-1.27%2C6.81-3.17%2C15.84-5.7%2C27.08-2.7%2C11.4-4.71%2C20.71-6.06%2C27.91-1.35%2C7.21-2.02%2C13.27-2.02%2C18.17%2C0%2C5.55%2C1.66%2C9.9%2C4.99%2C13.06%2C3.33%2C3.17%2C8.08%2C4.75%2C14.25%2C4.75%2C14.25%2C0%2C27.08-9.26%2C38.48-27.79-4.18-2.88-9.88-2.27-13.29%2C1.49Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1334.36%2C187.65l-1.19%2C10.21c9.34.32%2C15.59%2C1.27%2C18.76%2C2.85%2C3.17%2C1.58%2C4.75%2C4.36%2C4.75%2C8.31%2C0%2C2.69-1.27%2C6.41-3.8%2C11.17l-55.82%2C113.78-27.55-114.01c-1.11-4.75-1.66-8.31-1.66-10.69%2C0-3.96%2C2.02-6.77%2C6.06-8.43%2C4.04-1.66%2C10.89-2.65%2C20.55-2.97l1.19-10.21h-70.07l-1.19%2C10.21c4.43.79%2C7.88%2C1.82%2C10.33%2C3.09%2C2.45%2C1.27%2C4.08%2C3.49%2C4.87%2C6.65l7.6%2C30.17-47.98%2C95.01-26.6-112.83c-1.11-5.07-1.66-8.63-1.66-10.69%2C0-3.96%2C2.02-6.77%2C6.06-8.43%2C4.04-1.66%2C10.88-2.65%2C20.55-2.97l1.19-10.21h-70.55l-1.19%2C10.21c4.43.79%2C7.88%2C1.82%2C10.33%2C3.09%2C2.45%2C1.27%2C4.08%2C3.49%2C4.87%2C6.65l40.62%2C167.7h8.08l61.04-119%2C30.88%2C119h8.08l39.15-77.64%2C55.2-110.01h-50.87Z' fill='%23e3e8d9'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='196.31 187.65 1521.99 188.38'%3E%3Cpath d='M677.81%2C187.65h-61.58v185.26h63.15c29.05%2C0%2C51.4-8%2C67.06-24.01%2C15.65-16%2C23.48-38.79%2C23.48-68.36s-7.96-52.66-23.88-68.76c-15.92-16.09-38.66-24.13-68.23-24.13ZM720.87%2C327.77c-9.39%2C10.44-23.75%2C15.66-43.06%2C15.66h-27.66v-126.29h27.66c19.31%2C0%2C33.66%2C5.22%2C43.06%2C15.66%2C9.39%2C10.44%2C14.09%2C26.35%2C14.09%2C47.75s-4.7%2C36.79-14.09%2C47.23Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M878.77%2C253.4c-8.98-5.3-19.39-7.96-31.25-7.96s-22.82%2C2.73-31.94%2C8.19c-9.13%2C5.46-16.19%2C13.07-21.18%2C22.82-5%2C9.75-7.49%2C21.18-7.49%2C34.29s2.49%2C24.57%2C7.49%2C34.4c4.99%2C9.83%2C12.09%2C17.44%2C21.3%2C22.82%2C9.21%2C5.38%2C20.05%2C8.07%2C32.53%2C8.07%2C14.35%2C0%2C26.57-3.51%2C36.63-10.53%2C10.07-7.02%2C16.81-16.62%2C20.24-28.79l-30.66-1.87c-1.72%2C5.46-4.8%2C9.71-9.25%2C12.75-4.45%2C3.04-10.03%2C4.56-16.73%2C4.56-8.89%2C0-16.03-2.77-21.41-8.31-5.38-5.53-8.39-13.77-9.01-24.69h88.7v-6.79c0-14.04-2.42-26.06-7.26-36.04-4.84-9.98-11.74-17.63-20.71-22.94ZM818.03%2C299.04c1.25-9.67%2C4.48-17.09%2C9.71-22.24%2C5.23-5.15%2C11.82-7.72%2C19.78-7.72s14.51%2C2.46%2C19.66%2C7.37c5.15%2C4.92%2C8.03%2C12.45%2C8.66%2C22.59h-57.81Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1033.89%2C349.59c-1.17-1.25-1.75-3.51-1.75-6.79v-45.4c0-16.69-4.56-29.53-13.69-38.5-9.13-8.97-22.58-13.46-40.37-13.46-15.45%2C0-28.01%2C3.55-37.68%2C10.65-9.68%2C7.1-15.76%2C17.28-18.26%2C30.54l30.43%2C1.4c1.56-6.24%2C4.41-11.04%2C8.54-14.39%2C4.13-3.35%2C9.79-5.03%2C16.97-5.03%2C7.96%2C0%2C13.96%2C2.22%2C18.02%2C6.67%2C4.05%2C4.44%2C6.08%2C11.12%2C6.08%2C20.01l-41.43%2C8.19c-13.73%2C2.65-23.95%2C7.02-30.66%2C13.1-6.71%2C6.09-10.06%2C14.51-10.06%2C25.28s3.98%2C19.15%2C11.94%2C25.16%2C18.49%2C9.01%2C31.6%2C9.01c7.8%2C0%2C14.82-1.17%2C21.06-3.51%2C6.24-2.34%2C11.43-5.65%2C15.57-9.95%2C2.56-2.66%2C4.57-5.55%2C6.02-8.66.52%2C3.59%2C1.43%2C6.64%2C2.75%2C9.13%2C2.18%2C4.14%2C5.3%2C7.02%2C9.36%2C8.66%2C4.06%2C1.64%2C8.66%2C2.46%2C13.81%2C2.46%2C2.18%2C0%2C4.33-.08%2C6.43-.23%2C2.11-.16%2C3.63-.39%2C4.56-.7v-21.77h-3.98c-2.34%2C0-4.1-.62-5.27-1.87ZM1002.17%2C322.68c0%2C6.4-1.33%2C11.94-3.98%2C16.62-2.65%2C4.68-6.4%2C8.35-11.23%2C11-4.84%2C2.65-10.61%2C3.98-17.32%2C3.98-5.93%2C0-10.49-1.32-13.69-3.98-3.2-2.65-4.8-6.4-4.8-11.23%2C0-4.37%2C1.44-7.92%2C4.33-10.65%2C2.89-2.73%2C7.68-4.8%2C14.39-6.2l32.3-6.55v7.02Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1105.47%2C347.08c-3.31%2C0-5.87-.87-7.7-2.61-1.83-1.73-2.74-4.35-2.74-7.83v-148.99h-33.4v152.38c0%2C11.48%2C3.04%2C19.83%2C9.13%2C25.05%2C6.09%2C5.22%2C14.17%2C7.83%2C24.26%2C7.83h23.33v-25.83h-12.89Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M468.54%2C349c-2.15%2C2.36-4.13%2C4.32-5.95%2C5.88-3.33%2C2.85-6.26%2C4.28-8.79%2C4.28-3.65%2C0-5.47-2.22-5.47-6.65%2C0-2.85.75-7.64%2C2.26-14.37%2C1.5-6.73%2C3.21-13.82%2C5.11-21.26%2C3.17-12.67%2C5.62-23.24%2C7.36-31.71%2C1.74-8.47%2C2.61-15.4%2C2.61-20.78%2C0-6.49-1.35-11.4-4.04-14.73-2.69-3.32-7.05-4.99-13.06-4.99-25.81%2C0-51.47%2C30.09-76.96%2C90.26h-.95c5.07-17.26%2C10.88-42.24%2C17.46-74.94%2C6.57-32.7%2C10.19-52.06%2C12.72-72.33h-194.31l-10.22%2C50.59h9.5c6.97-11.55%2C12.24-19.67%2C15.8-24.35%2C3.56-4.67%2C8.04-8.19%2C13.42-10.57%2C5.38-2.38%2C12.9-3.56%2C22.57-3.56h14.73l-17.58%2C143.71c-.95%2C7.44-3.8%2C12.39-8.55%2C14.85-4.75%2C2.46-12.11%2C3.92-22.09%2C4.39l-1.19%2C10.21h82.66l1.19-10.21c-9.82-.32-16.63-1.5-20.43-3.56-3.8-2.06-5.7-6.1-5.7-12.11%2C0-1.43.24-3.88.71-7.36l17.1-139.9h0s76.25.54%2C76.25.54c0%2C0-13.61%2C90.66-29.45%2C172.61h23.28c6.49-20.43%2C14.05-39.15%2C22.69-56.18%2C8.63-17.02%2C17.06-30.44%2C25.3-40.26%2C8.23-9.82%2C14.88-14.73%2C19.95-14.73%2C2.06%2C0%2C3.41.67%2C4.04%2C2.02.63%2C1.35.95%2C3.13.95%2C5.34%2C0%2C2.85-.48%2C6.97-1.43%2C12.35-.95%2C5.38-2.34%2C11.99-4.16%2C19.83-1.82%2C7.84-2.97%2C12.79-3.44%2C14.85-2.7%2C10.77-4.75%2C19.48-6.18%2C26.13-1.43%2C6.65-2.14%2C11.72-2.14%2C15.2%2C0%2C5.55%2C1.66%2C9.9%2C4.99%2C13.06%2C3.33%2C3.17%2C8.08%2C4.75%2C14.25%2C4.75%2C14.25%2C0%2C27.08-9.26%2C38.48-27.79-4.19-2.88-9.88-2.27-13.29%2C1.49Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M571.8%2C342.22c-3.96%2C4.78-7.95%2C8.6-11.98%2C11.46-6.02%2C4.28-13.38%2C6.41-22.09%2C6.41-7.92%2C0-14.17-2.81-18.76-8.43-4.6-5.62-6.89-14.21-6.89-25.77v-3.09c4.91-1.58%2C7.92-2.61%2C9.03-3.09%2C13.14-4.43%2C24.31-8.63%2C33.49-12.59%2C9.18-3.96%2C17.18-9.1%2C23.99-15.44%2C6.81-6.33%2C10.22-13.78%2C10.22-22.33%2C0-8.08-2.73-14.21-8.2-18.41-5.46-4.19-13.03-6.29-22.68-6.29-13.62%2C0-25.7%2C4.04-36.22%2C12.11-10.53%2C8.08-18.65%2C18.53-24.35%2C31.35-5.7%2C12.83-8.55%2C26.05-8.55%2C39.67%2C0%2C15.2%2C3.64%2C26.92%2C10.93%2C35.15%2C7.28%2C8.24%2C18.37%2C12.35%2C33.25%2C12.35%2C11.72%2C0%2C22.09-3.05%2C31.12-9.15%2C9.03-6.09%2C16.47-14.92%2C22.33-26.48l-.09-.05c-4.82-2.87-10.96-1.71-14.54%2C2.61ZM526.21%2C273.52c7.05-11%2C15.8-16.51%2C26.25-16.51%2C4.75%2C0%2C8.39%2C1.31%2C10.93%2C3.92s3.8%2C6.37%2C3.8%2C11.28c0%2C8.71-4.27%2C16.11-12.83%2C22.21-8.55%2C6.1-22.41%2C12.39-41.57%2C18.88%2C1.9-15.52%2C6.37-28.78%2C13.42-39.79Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1703.46%2C291.69c8.2%2C0%2C14.84-6.65%2C14.84-14.84s-6.65-14.84-14.84-14.84-14.84%2C6.65-14.84%2C14.84%2C6.65%2C14.84%2C14.84%2C14.84Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1703.46%2C345.85c-8.2%2C0-14.84%2C6.65-14.84%2C14.84s6.65%2C14.84%2C14.84%2C14.84%2C14.84-6.65%2C14.84-14.84-6.65-14.84-14.84-14.84Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1662.58%2C349c-2.15%2C2.36-4.13%2C4.32-5.95%2C5.88-3.32%2C2.85-6.26%2C4.28-8.79%2C4.28-3.65%2C0-5.47-2.22-5.47-6.65%2C0-2.85.75-7.64%2C2.26-14.37%2C1.5-6.73%2C3.21-13.82%2C5.11-21.26%2C3.17-12.67%2C5.62-23.24%2C7.36-31.71%2C1.74-8.47%2C2.61-15.4%2C2.61-20.78%2C0-6.49-1.35-11.4-4.04-14.73-2.69-3.32-7.05-4.99-13.06-4.99-25.81%2C0-51.47%2C30.09-76.96%2C90.26h-.95c5.07-17.26%2C10.88-42.24%2C17.46-74.94%2C6.57-32.7%2C10.19-52.06%2C12.72-72.33h-43l-1.19%2C4.75%2C17.1%2C13.54c-2.54%2C26.13-12.04%2C81.79-28.5%2C166.98h23.28c6.49-20.43%2C14.05-39.15%2C22.69-56.18%2C8.63-17.02%2C17.06-30.44%2C25.3-40.26%2C8.23-9.82%2C14.88-14.73%2C19.95-14.73%2C2.06%2C0%2C3.41.67%2C4.04%2C2.02.63%2C1.35.95%2C3.13.95%2C5.34%2C0%2C2.85-.48%2C6.97-1.43%2C12.35-.95%2C5.38-2.34%2C11.99-4.16%2C19.83-1.82%2C7.84-2.97%2C12.79-3.44%2C14.85-2.7%2C10.77-4.75%2C19.48-6.18%2C26.13-1.43%2C6.65-2.14%2C11.72-2.14%2C15.2%2C0%2C5.55%2C1.66%2C9.9%2C4.99%2C13.06%2C3.33%2C3.17%2C8.08%2C4.75%2C14.25%2C4.75%2C14.25%2C0%2C27.08-9.26%2C38.48-27.79-4.18-2.88-9.88-2.27-13.29%2C1.49Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1518.27%2C247.03h-19.5l4.75-27.08h-8.08c-6.5%2C7.28-40.14%2C40.3-40.14%2C40.3l17.34-.16-13.54%2C78.86c-1.27%2C7.6-1.9%2C13.38-1.9%2C17.34%2C0%2C6.65%2C1.66%2C11.48%2C4.99%2C14.49s8.23%2C4.51%2C14.73%2C4.51c9.03%2C0%2C18.17-3.12%2C27.43-9.38%2C9.26-6.25%2C17.06-14.52%2C23.4-24.82-4.3-3.29-10.42-2.73-14.03%2C1.32-3.4%2C3.81-6.99%2C7.09-10.79%2C9.85-6.1%2C4.43-11.36%2C6.65-15.8%2C6.65s-6.41-2.22-6.41-6.65c0-2.53.55-7.13%2C1.66-13.78l14.01-78.39h32.78c1.24-6.8-3.99-13.06-10.9-13.06Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1413.12%2C224.23c4.75%2C0%2C8.82-1.7%2C12.23-5.11%2C3.4-3.4%2C5.11-7.56%2C5.11-12.47%2C0-4.43-1.51-8.15-4.51-11.17-3.01-3.01-6.73-4.51-11.17-4.51-4.75%2C0-8.83%2C1.7-12.23%2C5.11-3.41%2C3.41-5.11%2C7.57-5.11%2C12.47%2C0%2C4.44%2C1.5%2C8.16%2C4.51%2C11.17%2C3.01%2C3.01%2C6.73%2C4.51%2C11.16%2C4.51Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1424.77%2C349c-2.15%2C2.36-4.13%2C4.32-5.95%2C5.88-3.33%2C2.85-6.26%2C4.28-8.79%2C4.28-3.64%2C0-5.46-2.22-5.46-6.65%2C0-3.01.36-6.92%2C1.07-11.76.71-4.83%2C1.82-10.73%2C3.32-17.7%2C1.5-6.97%2C2.49-11.48%2C2.97-13.54%2C2.85-12.35%2C4.95-22.17%2C6.29-29.45%2C1.34-7.28%2C2.02-13.46%2C2.02-18.53%2C0-11.24-6.02-16.87-18.05-16.87-7.29%2C0-14.53%2C2.38-21.73%2C7.13-7.21%2C4.75-13.66%2C12.59-19.36%2C23.52%2C4.3%2C2.87%2C10.04%2C1.96%2C13.35-2.02%2C6.25-7.52%2C11.54-11.28%2C15.87-11.28%2C3.8%2C0%2C5.7%2C1.74%2C5.7%2C5.23%2C0%2C4.6-.63%2C10.3-1.9%2C17.1-1.27%2C6.81-3.17%2C15.84-5.7%2C27.08-2.7%2C11.4-4.71%2C20.71-6.06%2C27.91-1.35%2C7.21-2.02%2C13.27-2.02%2C18.17%2C0%2C5.55%2C1.66%2C9.9%2C4.99%2C13.06%2C3.33%2C3.17%2C8.08%2C4.75%2C14.25%2C4.75%2C14.25%2C0%2C27.08-9.26%2C38.48-27.79-4.18-2.88-9.88-2.27-13.29%2C1.49Z' fill='%23e3e8d9'%3E%3C/path%3E%3Cpath d='M1334.36%2C187.65l-1.19%2C10.21c9.34.32%2C15.59%2C1.27%2C18.76%2C2.85%2C3.17%2C1.58%2C4.75%2C4.36%2C4.75%2C8.31%2C0%2C2.69-1.27%2C6.41-3.8%2C11.17l-55.82%2C113.78-27.55-114.01c-1.11-4.75-1.66-8.31-1.66-10.69%2C0-3.96%2C2.02-6.77%2C6.06-8.43%2C4.04-1.66%2C10.89-2.65%2C20.55-2.97l1.19-10.21h-70.07l-1.19%2C10.21c4.43.79%2C7.88%2C1.82%2C10.33%2C3.09%2C2.45%2C1.27%2C4.08%2C3.49%2C4.87%2C6.65l7.6%2C30.17-47.98%2C95.01-26.6-112.83c-1.11-5.07-1.66-8.63-1.66-10.69%2C0-3.96%2C2.02-6.77%2C6.06-8.43%2C4.04-1.66%2C10.88-2.65%2C20.55-2.97l1.19-10.21h-70.55l-1.19%2C10.21c4.43.79%2C7.88%2C1.82%2C10.33%2C3.09%2C2.45%2C1.27%2C4.08%2C3.49%2C4.87%2C6.65l40.62%2C167.7h8.08l61.04-119%2C30.88%2C119h8.08l39.15-77.64%2C55.2-110.01h-50.87Z' fill='%23e3e8d9'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain; } /* shape embedded: masks from a local file are blocked by browsers */ /* ---------- type roles ---------- */ .display { font: 500 clamp(44px, 7.6vw, 150px)/0.98 var(--font-serif); letter-spacing: -0.03em; margin: 0; text-wrap: balance; } .title { font: 500 clamp(30px, 4.2vw, 80px)/1.04 var(--font-serif); letter-spacing: -0.025em; margin: 0; text-wrap: balance; } .head { font: 500 clamp(24px, 2.7vw, 52px)/1.08 var(--font-serif); letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .sub { font: 300 clamp(16px, 1.35vw, 26px)/1.4 var(--font-sans); margin: 0; max-width: 62ch; } .support { font: 300 clamp(17px, 1.5vw, 30px)/1.45 var(--font-sans); margin: 0; max-width: 30ch; } .dek { font: 400 italic clamp(19px, 1.7vw, 32px)/1.3 var(--font-serif); margin: 0; max-width: 36ch; } .giant { font: 500 clamp(80px, 17vw, 330px)/0.86 var(--font-serif); letter-spacing: -0.045em; margin: 0; } .quote { font: 400 italic clamp(28px, 4vw, 76px)/1.18 var(--font-serif); letter-spacing: -0.015em; margin: 0; max-width: 20ch; } .hl { background: var(--r-hl); color: var(--r-hl-ink); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .ink-lime { color: var(--r-accent); } .ink-mint { color: var(--r-accent-2); } .ink-beet { color: var(--r-accent-3); } .ink-bone { color: var(--r-ink); } .ink-plum { color: var(--r-head); } /* ---------- image slots ---------- */ .ph { position: relative; overflow: hidden; background: color-mix(in srgb, currentColor 10%, transparent); } .ph img { width: 100%; height: 100%; object-fit: cover; } .ph .tag { position: absolute; left: 10px; bottom: 10px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; background: color-mix(in srgb, var(--tdw-plum) 78%, transparent); color: var(--tdw-bone); padding: 5px 7px 4px; } .r-1x1 { aspect-ratio: 1 / 1; } .r-4x3 { aspect-ratio: 4 / 3; } .r-3x4 { aspect-ratio: 3 / 4; } .r-16x9 { aspect-ratio: 16 / 9; } .r-16x10 { aspect-ratio: 16 / 10; } /* CUT-OUT slots (data-cutout): a subject with a transparent background, standing on the field. No box, no crop: the whole subject shows, resting on its base. Use where the original has a cut-out portrait, a floating object or a 3D piece that overlaps an edge. Scenes stay .ph. */ .ph.cut { background: none; overflow: visible; } .ph.cut img { object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--tdw-plum-deep) 22%, transparent)); } /* aspect-ratio notes are generation metadata (data-prompt, r-* class), never shown */ .ph .tag, .pcard .tag { display: none !important; } .art { position: absolute; pointer-events: none; } .art svg { width: 100%; height: 100%; display: block; } .accent { font-family: var(--font-emoji); line-height: 1; position: absolute; } html.page .accent { display: none; } /* ---------- S01 cover / S14 close ---------- */ .cover .art, .close .art { inset: 0; } .cover .in, .close .in { position: relative; z-index: 1; max-width: 62%; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 34px); } .cover .top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } /* ---------- S02 reading (essay step) ---------- */ .reading .col { max-width: 640px; margin: 0 auto 0 18%; } .reading p { margin: 0 0 1.15em; } .reading .stamp-time { position: absolute; right: var(--pad-x); top: var(--pad-y); } .reading figure { margin: 1.6em 0; } .reading figcaption { margin-top: 8px; } .reading .short { font: 500 1.08em/1.4 var(--font-serif); } /* ---------- S03 parallel four (audience cards) ---------- */ .aud { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 40px); margin-top: clamp(28px, 4vw, 72px); align-items: stretch; } .aud-item { --overlap: clamp(28px, 3.4vw, 64px); display: flex; flex-direction: column; align-items: center; gap: 0; } .aud-item .ph { width: 100%; aspect-ratio: 4 / 3; position: relative; z-index: 1; margin-bottom: calc(-1 * var(--overlap)); } /* the picture's base sits over the top of the card and lands just above the name (Nic, 2026-10-10) */ /* images take their column's full width (Nic, 2026-10-10) */ .aud-card { width: 100%; flex: 1; display: flex; flex-direction: column; background: var(--r-plate); color: var(--r-plate-ink); border-radius: 22px; overflow: hidden; text-align: center; } .aud-body { padding: calc(var(--overlap) + clamp(10px, 1vw, 18px)) clamp(14px, 1.6vw, 28px) clamp(18px, 2vw, 34px); flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; } .aud-name { font: 500 clamp(20px, 2vw, 36px)/1.05 var(--font-serif); margin: 0; } .aud-tag { font: 400 italic clamp(14px, 1.2vw, 22px)/1.2 var(--font-serif); margin: 0; } .aud-desc { font: 300 clamp(14px, 1.15vw, 21px)/1.4 var(--font-sans); margin: 0; } .aud-foot { background: var(--r-band); color: var(--r-band-ink); padding: clamp(12px, 1.3vw, 22px) clamp(12px, 1.4vw, 26px); } .aud-foot .lbl { font: 500 clamp(12px, .8vw, 14px)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--r-band-ink); opacity: .72; } .aud-foot .stmt { font: 400 italic clamp(14px, 1.15vw, 21px)/1.3 var(--font-serif); margin: 8px 0 0; } /* ---------- S04 statement (split, photo bleeds right) ---------- */ .spread.split { display: flex; flex-direction: row; } .split .text { flex: 1 1 56%; padding: var(--pad-y) var(--pad-x); display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2vw, 36px); } .split .ph { flex: 1 1 44%; } /* ---------- S05 punchline / S07, S13 two-beat ---------- */ .punch .setup { font: 500 clamp(20px, 2.2vw, 40px)/1.1 var(--font-sans); margin: 0 0 clamp(4px, .6vw, 10px); } .aside { position: absolute; right: var(--pad-x); bottom: clamp(28px, 4.5vw, 80px); display: flex; align-items: flex-end; gap: 16px; max-width: 32ch; text-align: right; } .aside .accent { position: static; font-size: clamp(36px, 4.4vw, 84px); } .aside p { margin: 0; font: 400 italic clamp(14px, 1.3vw, 24px)/1.35 var(--font-serif); opacity: .85; } .diag { display: grid; grid-template-rows: auto 1fr auto; flex: 1; } .diag .b1, .diag .b2 { font: 500 clamp(30px, 4vw, 76px)/1.05 var(--font-serif); letter-spacing: -0.02em; margin: 0; max-width: 18ch; } .diag .b1 { margin-top: clamp(20px, 4vw, 80px); } .diag .b2 { justify-self: end; text-align: right; margin-bottom: clamp(20px, 4.5vw, 90px); } .diag .em { color: var(--tdw-bone); font-style: italic; } /* ---------- S06 hinge (three boxes, middle highlighted) ---------- */ .flow { display: flex; align-items: stretch; gap: 10px; } .flowbox { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2vw, 34px); background: var(--r-card); border: 1.5px solid var(--r-rule); } .flowbox.hi { border: 2.5px solid var(--r-strong); background: color-mix(in srgb, var(--r-strong) 16%, var(--r-card)); } .flowbox svg { width: clamp(24px, 2vw, 34px); height: auto; color: var(--r-muted); } .flowbox.hi svg { color: var(--r-head); } .flowbox h3 { font: 500 clamp(18px, 1.6vw, 28px)/1.15 var(--font-serif); margin: 0; } .flowbox p { margin: 0; font-size: clamp(15px, 1.2vw, 22px); line-height: 1.45; } .flowarrow { flex: none; display: flex; align-items: center; color: var(--r-muted); } .flowarrow svg { width: clamp(24px, 2.2vw, 40px); } /* ---------- S08 divider ---------- */ .divider .n { font: 400 clamp(13px, 1.2vw, 24px)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: clamp(16px, 2vw, 32px); } .divider .accent { top: var(--pad-y); right: var(--pad-x); font-size: clamp(64px, 9vw, 180px); } /* ---------- S09, S11 image columns ---------- */ .icols { display: grid; gap: clamp(18px, 2.4vw, 40px); margin-top: clamp(22px, 2.6vw, 44px); align-content: start; } .icols.c2 { grid-template-columns: repeat(2, 1fr); } .icols.c3 { grid-template-columns: repeat(3, 1fr); } .icol { display: flex; flex-direction: column; gap: clamp(10px, 1.1vw, 18px); } .icol h3 { font: 500 clamp(18px, 1.5vw, 28px)/1.18 var(--font-serif); margin: 0; } .icol p { margin: 0; font-size: clamp(15px, 1.2vw, 22px); line-height: 1.45; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; } .chip { font: 500 clamp(10px, .85vw, 14px)/1 var(--font-mono); letter-spacing: .06em; padding: 7px 12px 6px; border-radius: 16px; background: var(--r-plate); color: var(--r-plate-ink); } .chip.b { background: var(--r-hl); color: var(--r-hl-ink); } /* ---------- S10 pull quote ---------- */ .attrib { margin-top: clamp(28px, 3.4vw, 56px); display: flex; align-items: center; gap: 18px; } .attrib .rule { width: 48px; height: 1.5px; background: var(--r-accent-2); } .attrib .who { font: 500 clamp(16px, 1.4vw, 26px)/1.2 var(--font-serif); } .attrib .role { font: 400 clamp(11px, .95vw, 18px)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--r-ink); margin-top: 8px; } /* ---------- S12 numbered (vertical-ruled columns) ---------- */ .vcols { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; } .vcol { padding: 0 clamp(18px, 2.4vw, 44px); border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); } .vcol:first-child { border-left: 0; padding-left: 0; } .vcol .top { display: flex; align-items: center; justify-content: space-between; } .vcol .num { font: 500 clamp(44px, 4.4vw, 84px)/1 var(--font-mono); color: var(--r-strong); letter-spacing: -.02em; } .vcol .accent { position: static; font-size: clamp(28px, 3vw, 56px); } .vcol h3 { font: 500 clamp(19px, 1.7vw, 30px)/1.12 var(--font-serif); margin: clamp(12px, 1.3vw, 22px) 0 10px; } .vcol p { margin: 0; font-size: clamp(15px, 1.2vw, 22px); line-height: 1.45; } /* ---------- S15 stat strip (centred claim, ruled stats, art below) ---------- */ .stats-wrap { position: relative; z-index: 1; text-align: center; } .stats-wrap .head { max-width: 18ch; margin: 0 auto; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(26px, 3.4vw, 60px); border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); } .stat { padding: clamp(18px, 2.4vw, 44px) 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; } .stat .n { font: 400 clamp(34px, 3.8vw, 72px)/1 var(--font-serif); letter-spacing: -.03em; } .stat .l { font: 300 clamp(13px, 1vw, 18px)/1.35 var(--font-sans); max-width: 18ch; } .stat.dim .n { color: var(--r-accent-2); } .stats-src { margin-top: 14px; } .burst { left: 0; right: 0; bottom: 0; height: 52%; } /* ---------- S16 card row (text over image, row runs off the edge) ---------- */ .cardrow { display: flex; gap: clamp(10px, 1.2vw, 20px); margin-top: clamp(20px, 2.4vw, 44px); margin-right: calc(-1 * var(--pad-x)); } .pcard { flex: 0 0 calc((100% - 3 * clamp(10px, 1.2vw, 20px)) / 4.25); aspect-ratio: 3 / 4.4; position: relative; border-radius: 22px; overflow: hidden; background: var(--tdw-plum); color: var(--tdw-bone); } .pcard img, .pcard .pc-fig { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; } .pcard::after { content: ""; position: absolute; inset: 0 0 45% 0; background: linear-gradient(180deg, rgba(28,1,66,.82), rgba(28,1,66,0)); } .pcard .txt { position: absolute; z-index: 1; left: 0; right: 0; top: 0; padding: clamp(14px, 1.5vw, 26px); } .pcard .lbl { font: 400 clamp(12px, .8vw, 14px)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .9; } .pcard .claim { font: 500 clamp(17px, 1.6vw, 30px)/1.12 var(--font-serif); margin: 8px 0 0; } .pcard .plus { position: absolute; z-index: 1; right: 14px; bottom: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--tdw-bone); color: var(--tdw-plum); display: grid; place-items: center; font: 500 18px/1 var(--font-sans); } .pcard .tag { position: absolute; z-index: 1; left: 12px; bottom: 14px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; background: color-mix(in srgb, var(--tdw-plum) 78%, transparent); color: var(--tdw-bone); padding: 5px 7px 4px; } /* ---------- S17 feature (title | paragraph, wide image, feature list) ---------- */ .fhead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 80px); align-items: start; } .fhead .head { font-size: clamp(30px, 3.6vw, 68px); } .fhead .link { display: inline-block; margin-top: 14px; font: 400 clamp(12px, 1vw, 17px)/1 var(--font-mono); letter-spacing: .06em; opacity: .8; } .fimg { margin-top: clamp(24px, 3vw, 56px); border-radius: 14px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .flist { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px, 4vw, 80px); margin-top: clamp(20px, 2.6vw, 44px); padding-top: clamp(14px, 1.6vw, 24px); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .flist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .flist li { font-size: clamp(14px, 1.1vw, 19px); opacity: .85; } .flist li::after { content: " +"; opacity: .6; } /* ---------- S18 labelled beats (news column with a chart) ---------- */ .news { max-width: 680px; margin: 0 auto; font: 400 clamp(17px, 1.2vw, 20px)/1.6 var(--font-serif); } .news .beat-h { display: block; margin: 1.4em 0 .5em; } .news .beat-h:first-child { margin-top: 0; } .news p { margin: 0 0 1em; } .chart { margin: 1.4em 0; padding: 18px 18px 0; border: 1px dashed color-mix(in srgb, currentColor 30%, transparent); background: var(--r-card); } .chart .ct { font: 400 clamp(17px, 1.4vw, 24px)/1.25 var(--font-sans); margin: 0 0 12px; } .chart svg { width: 100%; height: auto; display: block; } .chart .src { padding: 10px 0; font: 400 12px/1.4 var(--font-mono); border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent); margin-top: 8px; } .chart .band { margin: 0 -18px; background: var(--r-band); color: var(--r-band-ink); padding: 10px 18px; display: flex; justify-content: space-between; align-items: center; } .chart .band .wordmark { height: 14px; aspect-ratio: 1522 / 188; background: currentColor; } /* ---------- hero parts (2026-10-10): buttons, product-screen mock, logo row ---------- */ .btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 16px; padding: clamp(10px, .8vw, 14px) clamp(16px, 1.3vw, 24px); font: 500 clamp(14px, 1vw, 17px)/1 var(--font-sans); background: var(--r-btn); color: var(--r-btn-ink); border: 1.5px solid var(--r-btn); text-decoration: none; } .btn.ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); } .pill { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--r-rule); border-radius: 16px; padding: 6px 12px; font: 400 clamp(11px, .85vw, 14px)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; } .pill b { background: var(--r-hl); color: var(--r-hl-ink); padding: 3px 6px; border-radius: 10px; font-weight: 500; } /* a product screen drawn from tokens: window bar, sidebar, rows. Not an image, so it follows the surface. */ .screen { border-radius: 14px; overflow: hidden; border: 1px solid var(--r-rule); background: var(--r-card); display: grid; grid-template-rows: auto 1fr; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--tdw-plum-deep) 45%, transparent); } .screen .bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--r-rule); } .screen .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--r-rule); } .screen .body { display: grid; grid-template-columns: 22% 1fr; min-height: 0; } .screen .side { border-right: 1px solid var(--r-rule); padding: 14px 12px; display: grid; gap: 9px; align-content: start; } .screen .side i, .screen .main i { display: block; height: 9px; border-radius: 5px; background: color-mix(in srgb, currentColor 16%, transparent); } .screen .side i:nth-child(2) { background: var(--r-accent); opacity: .75; width: 80%; } .screen .main { padding: 16px 18px; display: grid; gap: 12px; align-content: start; } .screen .main .row { display: grid; grid-template-columns: 28px 1fr 18%; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--r-rule); } .screen .main .row b { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); } .screen .main .row:first-child b { background: var(--r-strong); } .screen .main .hd { height: 16px; width: 40%; background: color-mix(in srgb, currentColor 28%, transparent); } /* placeholder logos: abstract marks, never real brands */ .logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 56px); opacity: .7; } .logo-mark { display: inline-flex; align-items: center; gap: 8px; font: 500 clamp(13px, 1.1vw, 19px)/1 var(--font-sans); letter-spacing: -.01em; } .logo-mark::before { content: ""; width: 1.1em; height: 1.1em; background: currentColor; border-radius: 30%; } .logo-mark:nth-child(2n)::before { border-radius: 50%; } .logo-mark:nth-child(3n)::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; } /* ---------- scroll dial (2026-10-10, from Loupe's Story 1 motion study; ObsidianUI Scroll Stack + Rare UI Animated counter). Prose steps on one side; a sticky dial follows the scroll and shows the active step's value, caption and place on a rail. Markup: .story > .steps > .step[data-label][data-value][data-cap], plus an empty