/* ══════════════════════════════════════════════════════════════════════════ Promptwrought — The Type Case Every value here came from the Claude Design file, unchanged. The design used inline style="" attributes on each element; those have been moved into the classes below, which is the only difference. Two layers of variables are in play: --pw-* the brand tokens, defined in ../design-system/tokens.css --surface, --text, --accent … this page's names for them, so that switching to dark means reassigning six variables instead of hunting through every rule. ══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── 1. THE TWO SURFACES :root is the element. The first block is the light page. The second only applies when carries data-theme="dark", which the theme button sets. Nothing below this block mentions a colour directly — they all go through these names. ───────────────────────────────────────────────────────────────────────── */ :root { --surface: var(--pw-parchment); --inset: var(--pw-parchment-deep); --text: var(--pw-ink); --text-2: var(--pw-iron); --text-3: var(--pw-slate); --accent: var(--pw-hot-metal-deep); --rule: var(--pw-rule); --hairline: var(--pw-hairline); --edge: var(--pw-control-edge); --solid-fg: var(--pw-parchment); } :root[data-theme="dark"] { --surface: #221f1a; --inset: #2c2823; --text: #ece3cf; --text-2: #d6cbb3; --text-3: var(--pw-parchment-dim); --accent: var(--pw-hot-metal-light); --rule: var(--pw-rule-light); --hairline: rgba(236, 227, 207, 0.14); --edge: var(--pw-control-edge-reversed); --solid-fg: #221f1a; } /* ───────────────────────────────────────────────────────────────────────── 2. HOW MANY COLUMNS THE TRAY HAS One variable, four values. The tray reads --cols to decide how many compartments sit in a row, so the four breakpoints below are the whole of this page's responsive behaviour. These are max-width queries, so they read downwards: the widest case is the default, and each query narrows it further. ───────────────────────────────────────────────────────────────────────── */ :root { --cols: 13; } @media (max-width: 60rem) { :root { --cols: 8; } } @media (max-width: 34rem) { :root { --cols: 6; } } @media (max-width: 24rem) { :root { --cols: 4; } } /* ───────────────────────────────────────────────────────────────────────── 3. PAGE BASICS border-box means an element's width includes its padding and border, which is almost always what you want when sizing things. ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--surface); } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; } a:hover { color: var(--text); } /* buttons don't inherit the page font by default; these two lines fix that */ button { font: inherit; color: inherit; } /* :focus-visible is the ring shown when someone is navigating by keyboard. It deliberately does NOT appear on mouse clicks. Never remove it. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* the outermost wrapper — sets the page's type and its breathing room */ .page { background: var(--surface); color: var(--text); font-family: var(--pw-font-body); font-size: var(--pw-size-body); line-height: var(--pw-leading-body); min-height: 100vh; padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); } /* centres the content and stops it stretching on very wide screens */ .shell { max-width: 78rem; margin: 0 auto; } /* ───────────────────────────────────────────────────────────────────────── 4. MASTHEAD flex-wrap: wrap lets the title and the right-hand block drop onto separate lines when there isn't room for both. ───────────────────────────────────────────────────────────────────────── */ .masthead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; border-bottom: 2px solid var(--text); padding-bottom: 1.1rem; } .eyebrow { margin: 0 0 0.7rem; font-family: var(--pw-font-utility); font-size: var(--pw-size-micro); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); } .wordmark { margin: 0; font-family: var(--pw-font-display); font-weight: 500; font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4rem); line-height: 0.98; letter-spacing: -0.01em; } /* squeezes the lettering horizontally to 94% — the house look, matching the printed wordmark. transform-origin keeps the left edge pinned. */ .wordmark__squeeze { display: inline-block; transform: scaleX(0.94); transform-origin: left center; } /* the wordmark doubles as the way back to the front page. It keeps the ink of a title rather than taking the accent every other link gets — a masthead that turned red would read as a button. */ .wordmark__home { color: inherit; text-decoration: none; } .wordmark__home:hover { color: var(--accent); text-decoration: none; } .masthead__aside { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); } .volume { margin: 0; font-family: var(--pw-font-utility); font-size: var(--pw-size-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-2); } /* the light/dark switch. In the design this carried a style-hover attribute; here it is a real :hover rule, just below. */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--pw-target-chip); background: transparent; border: 1px solid var(--edge); border-radius: 0; padding: 0.35rem 0.75rem; font-family: var(--pw-font-utility); font-size: var(--pw-size-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); cursor: pointer; transition: color var(--pw-hover) var(--pw-ease), border-color var(--pw-hover) var(--pw-ease); } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* ───────────────────────────────────────────────────────────────────────── 5. STANDFIRST AND LEGEND 62ch means "about 62 characters wide" — a readable line length that holds whatever the font size turns out to be. ───────────────────────────────────────────────────────────────────────── */ .standfirst { margin: 1.1rem 0 0; max-width: 62ch; color: var(--text-2); text-wrap: pretty; } .legend { display: flex; flex-wrap: wrap; gap: 0.85rem 1.75rem; margin: 1.75rem 0 1.15rem; font-family: var(--pw-font-utility); font-size: var(--pw-size-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); } .legend__item { display: inline-flex; align-items: center; gap: 0.55rem; } /* the little colour chip in front of each legend word */ .legend__swatch { width: 1.15rem; height: 0.75rem; } .legend__swatch--released { background: var(--inset); border: 1px solid var(--edge); } .legend__swatch--current { background: transparent; border: 2px solid var(--accent); } /* repeating-linear-gradient draws the diagonal hatching by hand: 2px of line, then 3px of gap, at 135 degrees. */ .legend__swatch--sealed { background: repeating-linear-gradient(135deg, var(--hairline) 0 2px, transparent 2px 5px); border: 1px solid var(--hairline); } /* ───────────────────────────────────────────────────────────────────────── 6. THE TRAY A CSS grid of --cols equal columns. minmax(0, 1fr) is the standard way of saying "share the width equally, and let cells shrink smaller than their contents" — without the 0, a long word would force the column wide. ───────────────────────────────────────────────────────────────────────── */ .tray { display: grid; grid-template-columns: repeat(var(--cols, 13), minmax(0, 1fr)); gap: 0; background: transparent; border: 2px solid var(--text); } /* ───────────────────────────────────────────────────────────────────────── 7. ONE COMPARTMENT Every compartment is a