/* 561 Media - Dossier layer (v2, approved 7/14/2026 - the house standard).
* Extracted from the 561 Signal Report (~/561-signal-report/build.py), the
* design Michael approved with "everything should look this good."
*
* This layer sits ON TOP of sticker.css. Load order:
*
*
*
*
* It reuses sticker.css tokens (--sk-*), .graph-paper / .graph-grid-light,
* .sk-headline / .sk-accent, .stk color classes, and .sk-foot. Everything
* new is prefixed dz- so the two files can never collide.
*
* Pair with dossier-reveal.js for scroll reveals (optional; pages stay fully
* readable with JS off and print cleanly to PDF).
*
* Companion markup (doodle arrows, squiggle, tape corners, card skeletons):
* dossier-snippets.html in this directory.
*
* HARD RULES (see README "Dossier layer" section):
* - Square corners only. This layer force-flattens any sticker shape.
* - No uppercase micro-labels above content. Hierarchy comes from bold
* inline lead-ins ("The work:", "Why now:") inside running text.
* - Alternate cream and navy full-bleed bands so scrolling has rhythm.
* - No em dashes, no eyebrows/kickers, no Inter/Roboto.
*/
:root {
--dz-body: "acumin-pro", "Helvetica Neue", Arial, sans-serif;
--dz-rule: rgba(26, 54, 72, 0.3); /* thin rules on cream */
--dz-rule-light: rgba(241, 241, 230, 0.32); /* thin rules on navy */
}
/* ---- Page scaffold ----
* for the cream graph-paper document.
* .dz-band sections alternate to navy; pair them with .graph-grid-light. */
.dz-page { margin: 0; color: var(--sk-navy); font-family: var(--dz-body); font-weight: 400; font-size: 17px; line-height: 1.6; -webkit-text-size-adjust: 100%; }
.dz-page *, .dz-page *::before, .dz-page *::after { box-sizing: border-box; }
.dz-page h1, .dz-page h2, .dz-page h3, .dz-page p, .dz-page ul, .dz-page ol, .dz-page blockquote, .dz-page figure { margin: 0; padding: 0; }
.dz-page a { color: var(--sk-cobalt); }
/* SPECIFICITY FIX (7/14/2026): the reset above is `.dz-page p` (0,1,1), which
* outranks the kit's own spacing classes like `.dz-lead` / `.dz-note` (0,1,0)
* and silently zeroed their margins and padding. Re-assert them at .dz-page
* scope so running copy actually breathes. */
.dz-page .dz-lead { margin-top: 16px; }
.dz-page .dz-meta { margin-top: 10px; }
.dz-page .dz-cover-line { margin-top: 18px; }
.dz-page .dz-prepared { margin-top: 56px; }
.dz-page .dz-note { margin-top: 44px; padding: 34px 38px 30px; }
.dz-page .dz-strip-foot .dz-lead { margin-top: 0; }
.dz-page .dz-card-main > .dz-body-lg:first-child,
.dz-page .dz-card-main > .dz-lead:first-child,
.dz-page .dz-card-rail .dz-lead:first-child { margin-top: 0; }
/* Sticker anchors keep sticker ink (the scoped rule above would win otherwise) */
.dz-page a.stk { color: #fff; }
.dz-page a.stk-lime, .dz-page a.stk-sky, .dz-page a.stk-white, .dz-page a.stk-cream { color: var(--sk-navy); }
.dz-wrap { max-width: 1240px; margin: 0 auto; padding: 0 44px; }
.dz-section { padding: 104px 0; }
@media (max-width: 760px) { .dz-section { padding: 60px 0; } .dz-wrap { padding: 0 20px; } }
/* ---- Full-bleed band rhythm ----
* Cream (.graph-paper on the page) alternates with navy bands. Always pair:
*
* Never two same-color bands in a row; the scroll needs rhythm. */
.dz-band { background-color: var(--sk-navy); color: var(--sk-cream); }
.dz-band a { color: var(--sk-cream); }
/* ---- Square die-cut sticker shape (the only permitted shape) ----
* Use with sticker.css color classes: .
* sticker.css .pill / .tag / .oval are deprecated (rounded = banned). */
.stk.dz-square { border-radius: 0; padding: 16px 24px; line-height: 1.05; }
/* Cream sticker (stat stickers on navy bands); complements sticker.css colors */
.stk-cream { background: var(--sk-cream); color: var(--sk-navy); }
/* Enforcement: under a dossier page nothing keeps a radius, even reused
* legacy markup. Square corners only, everywhere. */
.dz-page .stk, .dz-page .stk.pill, .dz-page .stk.tag, .dz-page .stk.oval { border-radius: 0; }
/* Dossier tilt tuning: the v2 standard uses subtler, hand-placed angles
* than the social-post kit, so sticker.css tilt helpers are re-tuned here. */
.dz-page .tilt-l { transform: rotate(-6deg); }
.dz-page .tilt-r { transform: rotate(5deg); }
.dz-page .tilt-l2 { transform: rotate(-3.5deg); }
.dz-page .tilt-r2 { transform: rotate(7deg); }
/* ---- Tape label (torn edge, square, translucent) ---- */
.dz-tape {
display: inline-block; font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--sk-navy); background: rgba(255, 255, 255, 0.74);
box-shadow: 0 5px 12px rgba(26, 54, 72, 0.16); padding: 10px 26px;
clip-path: polygon(1.5% 0, 98.5% 5%, 100% 86%, 97% 100%, 2.5% 95%, 0 14%);
}
/* ---- Score / value stamp (tilted stamped sticker, never a numeral in a box) ---- */
.dz-stamp {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; flex: none; font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase;
width: 124px; height: 124px; color: #fff; background: var(--sk-cobalt); border: 5px solid #fff;
box-shadow: 0 14px 30px rgba(26, 54, 72, 0.26), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}
.dz-stamp b { font-size: 56px; line-height: 0.85; }
.dz-stamp span { font-size: 12.5px; letter-spacing: 0.08em; }
.dz-stamp-lime { background: var(--sk-lime); color: var(--sk-navy); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3), inset 0 0 0 2px rgba(26, 54, 72, 0.35); }
@media (max-width: 860px) {
.dz-stamp { width: 96px; height: 96px; border-width: 4px; }
.dz-stamp b { font-size: 42px; }
.dz-stamp span { font-size: 11px; }
}
/* ---- Outlined display-scale numerals (section numbers, ghosts, list ranks) ---- */
.dz-sec-row { display: flex; align-items: flex-end; gap: 26px; border-top: 3px solid currentColor; padding-top: 26px; margin-bottom: 56px; }
.dz-sec-num {
font-family: var(--sk-disp); font-weight: 700; line-height: 0.78;
font-size: clamp(4.4rem, 8.5vw, 7.5rem);
color: transparent; -webkit-text-stroke: 2.5px rgba(26, 54, 72, 0.55);
}
.dz-sec-row-light .dz-sec-num { -webkit-text-stroke: 2.5px rgba(241, 241, 230, 0.6); }
.dz-sec-head {
font-family: var(--sk-disp); font-weight: 700; line-height: 0.88; letter-spacing: -0.005em;
text-transform: uppercase; font-size: clamp(2.6rem, 5.4vw, 4.6rem);
}
@media (max-width: 600px) { .dz-sec-row { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 36px; } }
/* ---- Running body type ----
* .dz-lead is the workhorse paragraph. Hierarchy convention: bold inline
* lead-ins ("The evidence: ...") INSIDE the paragraph.
* Never an uppercase micro-label floated above the copy. */
.dz-lead { margin-top: 16px; font-size: 16.5px; }
.dz-lead strong { font-weight: 700; }
.dz-body-lg { font-size: 18px; line-height: 1.6; }
.dz-source-link { font-weight: 700; text-decoration-thickness: 2px; word-break: break-word; }
/* Meta row: the one permitted condensed-caps line (type / source / date),
* always BELOW its title, separated by slashes. Not a label. */
.dz-meta { font-family: var(--sk-disp); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 10px; }
.dz-meta-sep { margin: 0 10px; opacity: 0.45; }
.dz-meta-light { color: rgba(241, 241, 230, 0.82); }
/* ---- Display-scale statement (the verdict pattern) ----
* One big set sentence, with the key phrase wrapped in .dz-chip. */
.dz-verdict { font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; line-height: 1.12; font-size: clamp(2.1rem, 4.4vw, 3.6rem); max-width: 1160px; }
/* Cobalt-italic-on-cream highlight chip; box-decoration-break keeps the
* cream slab wrapping cleanly across line breaks. */
.dz-chip { font-style: italic; color: var(--sk-cobalt); background: var(--sk-cream); padding: 0 0.16em; text-transform: uppercase; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Stat sticker row that follows a verdict */
.dz-stat-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 64px; flex-wrap: wrap; }
.dz-stat-arrow { color: var(--sk-lime); transform: rotate(24deg); margin: 0 6px -10px 0; }
.dz-stat-stickers { display: flex; gap: 48px; flex-wrap: wrap; align-items: center; }
.dz-stat-stk { flex-direction: column; gap: 6px; padding: 22px 32px; font-size: 16px; }
.dz-stat-stk b { display: block; font-size: 58px; line-height: 0.9; }
.dz-stat-stk b.dz-stat-sm { font-size: 30px; line-height: 1; max-width: 210px; }
@media (max-width: 760px) { .dz-stat-stickers { gap: 30px; } .dz-stat-arrow { display: none; } }
/* ---- Doodle SVG sizing (markup lives in dossier-snippets.html) ---- */
.dz-doodle { display: block; width: 150px; height: 96px; }
.dz-squiggle { display: block; width: 100%; height: 12px; }
/* ---- Collage cover ---- */
.dz-cover { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 44px 48px; overflow: hidden; }
@media (max-width: 760px) { .dz-cover { padding: 28px 20px 32px; } }
.dz-cover-top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; }
.dz-cover-brand { font-size: 26px; letter-spacing: 0.02em; }
.dz-cover-doc { font-size: 16px; letter-spacing: 0.08em; }
.dz-cover-main { position: relative; flex: 1; padding: 64px 0 40px; }
/* Giant outline numeral behind the headline (target count, deliverable
* count, the year: any number that sells the document). */
.dz-cover-ghost {
position: absolute; top: -6%; right: -3%; z-index: 0; pointer-events: none;
font-family: var(--sk-disp); font-weight: 700; line-height: 0.78;
font-size: clamp(15rem, 30vw, 27rem); transform: rotate(5deg);
color: transparent; -webkit-text-stroke: 3px rgba(26, 54, 72, 0.24);
}
.dz-cover-h1 { position: relative; z-index: 1; font-size: clamp(4.6rem, 12vw, 11rem); color: var(--sk-navy); }
.dz-cover-line { position: relative; z-index: 1; font-size: clamp(1.8rem, 3.8vw, 3rem); margin-top: 18px; text-transform: none; }
.dz-cover-squiggle { color: var(--sk-orange); max-width: 420px; margin-top: 6px; }
.dz-cover-arrow { position: absolute; z-index: 1; left: 43%; top: 22%; color: var(--sk-cobalt); transform: rotate(-12deg); }
.dz-cover-arrow-2 { position: absolute; z-index: 1; right: 26%; bottom: 0; color: var(--sk-orange); transform: rotate(28deg); }
/* Sticker cluster: 4-6 tilted stickers / tape labels, hand-scattered.
* Children auto-offset by position; order them tape/sticker alternating. */
.dz-cluster { position: absolute; z-index: 2; right: 0; top: 35%; width: min(520px, 44vw); display: flex; flex-direction: column; align-items: flex-start; }
.dz-cluster .dz-tape { font-size: 18px; }
.dz-cluster .stk { font-size: 25px; }
.dz-cluster > *:nth-child(1) { margin-left: 6%; }
.dz-cluster > *:nth-child(2) { margin-left: 36%; margin-top: -16px; }
.dz-cluster > *:nth-child(3) { margin-left: 0; margin-top: 14px; }
.dz-cluster > *:nth-child(4) { margin-left: 42%; margin-top: -20px; }
.dz-cluster > *:nth-child(5) { margin-left: 14%; margin-top: 16px; }
.dz-prepared { position: relative; z-index: 1; margin-top: 56px; font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; font-size: 19px; letter-spacing: 0.05em; }
.dz-prepared .sk-accent { text-transform: none; font-size: 1.25em; margin-left: 6px; }
@media (max-width: 900px) {
.dz-cover { min-height: 0; }
.dz-cover-ghost { font-size: 11rem; top: 0; right: -4%; }
.dz-cover-arrow, .dz-cover-arrow-2 { display: none; }
.dz-cluster { position: static; width: 100%; margin-top: 40px; flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: center; }
.dz-cluster > * { margin: 0 !important; }
}
/* ---- Editorial spread card ----
* Not stacked text: ghosted rank numeral behind, display-scale title,
* tilted stamp, one compact dimension strip, then columns. Hybrid rule:
* at most ONE tape/sticker note per card; most cards have none. */
.dz-cards { display: flex; flex-direction: column; gap: 72px; }
.dz-card { position: relative; background: #fff; border: 2px solid var(--sk-navy); padding: 46px 52px 42px; box-shadow: 0 18px 44px rgba(26, 54, 72, 0.12); }
.dz-card-ghost {
position: absolute; top: -22px; right: 150px; z-index: 0; pointer-events: none;
font-family: var(--sk-disp); font-weight: 700; line-height: 0.8; font-size: 290px;
color: transparent; -webkit-text-stroke: 2px rgba(26, 54, 72, 0.17);
}
.dz-card-note { position: absolute; top: -20px; left: 52px; z-index: 3; font-size: 17px; }
.dz-card .dz-stamp { margin-top: -78px; margin-right: 6px; }
.dz-card-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.dz-card-head-copy { max-width: 72%; }
.dz-card-title { font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; line-height: 0.9; font-size: clamp(2.4rem, 4vw, 3.4rem); }
.dz-card-cols { position: relative; z-index: 1; display: grid; grid-template-columns: 8fr 4fr; gap: 48px; margin-top: 26px; }
.dz-card-main > .dz-body-lg:first-child, .dz-card-main > .dz-lead:first-child { margin-top: 0; }
.dz-card-rail { border-left: 1px solid var(--dz-rule); padding-left: 34px; }
.dz-card-rail .dz-lead:first-child { margin-top: 0; }
@media (max-width: 860px) {
.dz-card { padding: 28px 22px; }
.dz-card-ghost { font-size: 130px; right: 8px; }
.dz-card .dz-stamp { margin-top: -52px; }
.dz-card-head { gap: 14px; }
.dz-card-head-copy { max-width: calc(100% - 112px); }
.dz-card-cols { grid-template-columns: 1fr; gap: 8px; }
.dz-card-rail { border-left: 0; padding-left: 0; margin-top: 14px; }
.dz-card-note { left: 16px; }
}
/* ---- Compact dimension-squares strip (scores, ratings, checklists) ---- */
.dz-dim-strip { display: flex; flex-wrap: wrap; gap: 10px 34px; border-top: 1px solid var(--dz-rule); border-bottom: 1px solid var(--dz-rule); padding: 13px 0; margin-top: 26px; }
.dz-dim { display: inline-flex; align-items: center; gap: 9px; }
.dz-dim b { font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; }
.dz-sqs { display: inline-flex; gap: 3px; }
.dz-sq { width: 11px; height: 11px; border: 1.5px solid var(--sk-navy); display: inline-block; }
.dz-sq.on { background: var(--sk-cobalt); border-color: var(--sk-cobalt); }
.dz-dim-light { border-color: rgba(241, 241, 230, 0.35); }
.dz-dim-light .dz-sq { border-color: var(--sk-cream); }
.dz-dim-light .dz-sq.on { background: var(--sk-lime); border-color: var(--sk-lime); }
/* ---- Brush annotation layer (Brush Up, approved 8/20/2026) ----
* Requires sticker.css for --sk-script and the Typekit kit vmt1ngp.
* Caps-only rough brush face, so it reads as a marker annotation on top of
* the document, never as document type. Rules: one brush moment per spread;
* it REPLACES the cobalt-italic accent rather than stacking with it; never
* body copy, never a heading the reader has to parse quickly. */
.dz-hand {
font-family: var(--sk-script);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
line-height: 1;
color: var(--sk-cobalt);
}
/* Handwritten lead inside a taped note. Sized ~1.7x the type it replaces,
because Brush Up reads much smaller than Obviously Narrow at the same px. */
.dz-note .dz-hand { display: block; font-size: 2.3rem; margin-bottom: 12px; }
/* Margin annotation: brush scrawl in the gutter, no box, slight tilt. */
.dz-margin-note {
font-family: var(--sk-script);
font-weight: 400;
font-size: 1.6rem;
line-height: .98;
color: var(--sk-orange);
transform: rotate(-6deg);
display: inline-block;
}
/* ---- Taped note panel (visible tape corners, slight tilt) ---- */
.dz-note { position: relative; background: #fff; color: var(--sk-navy); border: 1px solid rgba(26, 54, 72, 0.5); padding: 34px 38px 30px; box-shadow: 0 16px 36px rgba(26, 54, 72, 0.18); margin-top: 44px; transform: rotate(-0.7deg); }
.dz-note-tape { position: absolute; width: 104px; height: 32px; background: rgba(241, 241, 230, 0.92); box-shadow: 0 4px 9px rgba(26, 54, 72, 0.22); clip-path: polygon(2% 0, 98% 6%, 100% 84%, 97% 100%, 3% 94%, 0 16%); }
.dz-note-tape-l { top: -15px; left: -26px; transform: rotate(-36deg); }
.dz-note-tape-r { top: -15px; right: -26px; transform: rotate(36deg); }
.dz-note-lead { display: block; font-size: 1.45rem; margin-bottom: 10px; text-transform: none; }
.dz-note p { font-size: 17px; line-height: 1.6; }
/* Optional smart quotes around the note body */
.dz-note-quoted::before { content: "\201C"; font-family: var(--sk-disp); font-weight: 700; color: var(--sk-cobalt); margin-right: 2px; }
.dz-note-quoted::after { content: "\201D"; font-family: var(--sk-disp); font-weight: 700; color: var(--sk-cobalt); margin-left: 2px; }
/* ---- Numbered editorial list (patterns / deliverables; designed for navy bands) ---- */
.dz-patterns { list-style: none; }
.dz-pattern { display: grid; grid-template-columns: 150px 1fr 190px; gap: 36px; align-items: center; padding: 36px 0; border-top: 1px solid var(--dz-rule-light); }
.dz-pattern:last-child { border-bottom: 1px solid var(--dz-rule-light); }
@media (max-width: 760px) { .dz-pattern { grid-template-columns: 80px 1fr; gap: 16px; } .dz-pattern-count { grid-column: 2; text-align: left; } }
.dz-pattern-num {
font-family: var(--sk-disp); font-weight: 700; line-height: 0.8; font-size: clamp(4rem, 7vw, 6.4rem);
color: transparent; -webkit-text-stroke: 2px rgba(241, 241, 230, 0.5);
}
.dz-pattern-copy h3 { font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1; }
.dz-pattern-copy p { margin-top: 8px; font-size: 16.5px; max-width: 640px; }
.dz-pattern-count { text-align: right; }
.dz-pattern-count strong { font-family: var(--sk-disp); font-weight: 700; font-size: clamp(3rem, 5vw, 4.4rem); line-height: 0.85; color: var(--sk-lime); display: block; }
.dz-pattern-count span { font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 0.06em; opacity: 0.85; }
/* ---- Day / week strip (timelines, plans) ---- */
.dz-strip-angle { font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.04; max-width: 980px; margin-bottom: 48px; }
.dz-day-strip { display: grid; grid-template-columns: repeat(7, 1fr); }
.dz-day-strip-5 { grid-template-columns: repeat(5, 1fr); }
.dz-day-strip-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .dz-day-strip, .dz-day-strip-5, .dz-day-strip-6 { grid-template-columns: 1fr; } }
.dz-day-cell { border-top: 3px solid var(--sk-navy); border-left: 1px solid var(--dz-rule); padding: 16px 14px 0; min-height: 190px; }
.dz-day-cell:first-child { border-left: 0; }
@media (max-width: 900px) { .dz-day-cell { border-left: 0; min-height: 0; padding-bottom: 16px; } }
.dz-day-label { display: block; font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; line-height: 0.9; margin-bottom: 10px; }
.dz-day-cell p { font-size: 14px; line-height: 1.5; }
/* Light variant when the strip sits on a navy band */
.dz-band .dz-day-cell { border-top-color: var(--sk-cream); border-left-color: var(--dz-rule-light); }
.dz-strip-foot { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; margin-top: 52px; border-top: 1px solid var(--dz-rule); padding-top: 26px; }
.dz-band .dz-strip-foot { border-top-color: var(--dz-rule-light); }
@media (max-width: 760px) { .dz-strip-foot { grid-template-columns: 1fr; gap: 6px; } }
.dz-strip-foot .dz-lead { margin-top: 0; font-size: 15.5px; }
/* ---- Thin-ruled list (clean sections: pricing rows, methodology, terms) ---- */
.dz-rule-list { list-style: none; }
.dz-rule-list li { padding: 13px 0; border-top: 1px solid var(--dz-rule); }
.dz-rule-list li:first-child { border-top: 0; padding-top: 0; }
.dz-band .dz-rule-list li { border-top-color: var(--dz-rule-light); }
/* Pricing row: description left, figure right; keep it CLEAN (hybrid rule) */
.dz-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.dz-price-row b { font-family: var(--sk-disp); font-weight: 700; font-size: 1.5rem; white-space: nowrap; }
.dz-price-total { border-top: 3px solid var(--sk-navy) !important; }
.dz-price-total b { font-size: 2.2rem; color: var(--sk-cobalt); }
/* ---- Vertical running edge label (dossier furniture) ---- */
.dz-edge-label {
position: fixed; left: 10px; top: 50%; transform: translateY(-50%);
writing-mode: vertical-rl;
font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase;
font-size: 13px; letter-spacing: 0.22em;
color: var(--sk-cream); opacity: 0.38; mix-blend-mode: difference;
pointer-events: none; z-index: 40; white-space: nowrap;
}
@media (max-width: 1120px) { .dz-edge-label { display: none; } }
/* ---- Close / CTA ---- */
.dz-close-cta { display: flex; justify-content: space-between; align-items: center; gap: 44px; flex-wrap: wrap; margin-bottom: 72px; }
.dz-close-head { font-size: clamp(2.8rem, 6.4vw, 5.4rem); }
.dz-close-squiggle { color: var(--sk-orange); max-width: 360px; margin-top: 10px; }
.dz-cta { font-size: 24px; text-decoration: none; padding: 26px 38px; }
/* ---- Footer rule (extends sticker.css .sk-foot; use class="sk-foot dz-foot") ---- */
.dz-foot { gap: 16px; border-top-width: 3px; padding-top: 18px; font-size: 17px; }
.dz-foot .sk-url { text-decoration: none; }
.dz-foot a { color: inherit; }
/* ---- Motion (JS-gated via dossier-reveal.js, reduced-motion safe) ----
* dossier-reveal.js adds .js to is NOT its job; add this in :
*
* so pages with JS off never hide content. */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.32s ease-out, transform 0.32s ease-out; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html.js .reveal { opacity: 1; transform: none; transition: none; }
}
/* ---- Print (letter, exact color, sane breaks) ---- */
@page { size: letter; margin: 12mm; }
@media print {
.dz-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dz-section { padding: 40px 0; }
.dz-edge-label { display: none; }
.dz-cover { min-height: 0; padding: 24px 0 40px; page-break-after: always; }
.dz-cover-ghost { font-size: 11rem; }
.dz-cluster { position: static; width: 100%; margin-top: 32px; flex-direction: row; flex-wrap: wrap; gap: 18px; }
.dz-cluster > * { margin: 0 !important; }
.dz-cover-arrow, .dz-cover-arrow-2 { display: none; }
.dz-break-before { break-before: page; }
.dz-pattern, .dz-day-cell, .dz-note, .dz-card-head, .dz-dim-strip, .dz-price-row { break-inside: avoid; }
html.js .reveal { opacity: 1; transform: none; transition: none; }
.dz-page .stk, .dz-stamp, .dz-note, .dz-tape { box-shadow: none; }
.dz-card .dz-stamp { margin-top: 0; }
.dz-card-ghost, .dz-cover-ghost, .dz-sec-num, .dz-pattern-num { -webkit-text-stroke-width: 1px; }
.dz-page a { text-decoration: none; }
.dz-source-link { text-decoration: underline; }
}
/* ══════════════════════════════════════════════════════════════════
WEB INTERFACE
Promoted 7/28/2026 from section 07 of the brand guide, where these
shipped as "proposed kit additions". They are the screen counterpart
to the print/document classes above: buttons, form fields, the site
nav, and the ink-context system that makes all of them flip
automatically between cream and navy surfaces.
The ink context is the important idea. Custom properties inherit, so
a surface declares its ink once and every descendant follows. The
descendant-selector approach it replaces (`.dz-band .dz-label {...}`)
broke as soon as a light surface was nested inside a navy band: a
white card in a band rendered cream labels on white. Any new light
surface only has to reset the five values below.
══════════════════════════════════════════════════════════════════ */
/* --- Ink context ---------------------------------------------------
* Custom properties inherit, so declaring the ink context once on a surface
* fixes every descendant. This replaces `.dz-band .dz-label {...}`-style
* descendant overrides, which broke the moment a light surface was nested
* inside a navy band: a white .dz-card in a .dz-band rendered cream labels
* on white. Any new light surface only has to reset these four values.
* ------------------------------------------------------------------ */
.dz-page {
--dz-ink: var(--sk-navy);
--dz-ink-soft: rgba(26, 54, 72, 0.7);
--dz-ink-contrast: var(--sk-cream);
--dz-focus: var(--sk-cobalt);
--dz-error: var(--sk-brick);
--dz-inset: #fff;
--dz-panel-bg: #fff;
--dz-code-bg: #fff;
}
.dz-band {
--dz-ink: var(--sk-cream);
--dz-ink-soft: rgba(241, 241, 230, 0.72);
--dz-ink-contrast: var(--sk-navy);
--dz-focus: var(--sk-lime);
--dz-error: var(--sk-brick-light);
--dz-inset: var(--sk-navy);
--dz-panel-bg: rgba(241, 241, 230, 0.06);
--dz-code-bg: rgba(0, 0, 0, 0.28);
}
/* Light surfaces reset the context, even nested inside a navy band. */
.dz-card, .dz-note {
--dz-ink: var(--sk-navy);
--dz-ink-soft: rgba(26, 54, 72, 0.7);
--dz-ink-contrast: var(--sk-cream);
--dz-focus: var(--sk-cobalt);
--dz-error: var(--sk-brick);
--dz-inset: #fff;
--dz-panel-bg: #fff;
--dz-code-bg: #fff;
}
/* --- Buttons: square, condensed caps, transform-only hover --- */
.dz-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.03em; font-size: 19px; line-height: 1;
padding: 18px 32px; border: 0; border-radius: 0; cursor: pointer;
text-decoration: none; text-align: center;
transition: transform 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.dz-btn:hover { transform: translateY(-2px); }
.dz-btn:active { transform: translateY(0); }
.dz-btn:focus-visible { outline: 3px solid var(--dz-focus); outline-offset: 3px; }
/* Primary is orange in every context: it is the one action on the view. */
.dz-btn-primary { background: var(--sk-orange); color: #fff; }
.dz-btn-primary:hover { background: #d95c1f; }
/* Secondary and ghost follow the ink context, so they flip automatically. */
.dz-btn-secondary { background: var(--dz-ink); color: var(--dz-ink-contrast); }
.dz-btn-secondary:hover { opacity: 0.86; }
.dz-btn-ghost { background: transparent; color: var(--dz-ink); box-shadow: inset 0 0 0 2px var(--dz-ink); }
.dz-btn-ghost:hover { background: var(--dz-ink); color: var(--dz-ink-contrast); }
.dz-btn-sm { font-size: 15px; padding: 12px 20px; }
.dz-btn-lg { font-size: 24px; padding: 24px 40px; }
.dz-btn[disabled], .dz-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
/* --- Form fields: square, 2px border, cobalt focus --- */
.dz-field { display: block; margin-bottom: 26px; }
.dz-label { display: block; color: var(--dz-ink); font-family: var(--dz-body); font-weight: 600; font-size: 15.5px; margin-bottom: 8px; }
.dz-label .dz-req { color: var(--sk-orange); margin-left: 3px; }
.dz-input, .dz-select, .dz-textarea {
display: block; width: 100%;
font-family: var(--dz-body); font-size: 17px; line-height: 1.5;
color: var(--sk-navy); background: #fff;
border: 2px solid var(--dz-ink); border-radius: 0;
padding: 13px 16px;
transition: border-color 150ms ease-out;
}
.dz-textarea { min-height: 130px; resize: vertical; }
.dz-select { appearance: none; padding-right: 44px;
background-image: linear-gradient(45deg, transparent 50%, var(--sk-navy) 50%), linear-gradient(135deg, var(--sk-navy) 50%, transparent 50%);
background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; }
.dz-input::placeholder, .dz-textarea::placeholder { color: rgba(26, 54, 72, 0.45); }
.dz-input:focus, .dz-select:focus, .dz-textarea:focus {
outline: 3px solid var(--dz-focus); outline-offset: 2px; border-color: var(--dz-focus);
}
.dz-hint { display: block; font-size: 14.5px; margin-top: 7px; color: var(--dz-ink-soft); }
.dz-field-error .dz-input, .dz-field-error .dz-select, .dz-field-error .dz-textarea { border-color: var(--dz-error); }
.dz-error { display: block; font-size: 14.5px; font-weight: 600; margin-top: 7px; color: var(--dz-error); }
/* Square checkbox and radio, both drawn as squares */
.dz-check { display: flex; align-items: flex-start; gap: 11px; font-size: 16.5px; margin-bottom: 12px; color: var(--dz-ink); }
.dz-check input { appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; background: #fff; border: 2px solid var(--dz-ink); border-radius: 0; cursor: pointer; }
.dz-check input:checked { background: var(--dz-focus); border-color: var(--dz-focus); box-shadow: inset 0 0 0 3px var(--dz-inset); }
.dz-check input:focus-visible { outline: 3px solid var(--dz-focus); outline-offset: 2px; }
/* --- Web surface card (the screen counterpart to .dz-card) --- */
.dz-panel { background: var(--dz-panel-bg); color: var(--dz-ink); border: 2px solid var(--dz-ink); border-radius: 0; padding: 32px 34px; }
.dz-panel-h { font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase; font-size: 1.9rem; line-height: 0.95; }
a.dz-panel, .dz-panel-link { display: block; text-decoration: none; color: var(--dz-ink); transition: transform 160ms ease-out, border-color 160ms ease-out; }
a.dz-panel:hover, .dz-panel-link:hover { transform: translateY(-4px); border-color: var(--dz-focus); }
/* --- Site nav bar (square, no radius, never moves) --- */
.dz-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
background: var(--sk-navy); color: var(--sk-cream);
border-bottom: 1px solid var(--dz-rule-light);
padding: 0 20px; height: 52px;
font-family: var(--sk-disp); font-weight: 700; text-transform: uppercase;
}
.dz-nav-brand { font-size: 17px; letter-spacing: 0.05em; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dz-nav-brand em { font-style: italic; color: var(--sk-lime); font-weight: 700; }
/* min-width:0 is load-bearing. Without it this flex item refuses to shrink
* below its content width, stretches the fixed nav past the viewport, and
* drags the whole document to 434px on a 375px screen. */
.dz-nav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.dz-nav-links::-webkit-scrollbar { display: none; }
.dz-nav-links a {
color: var(--sk-cream); text-decoration: none; font-size: 14px; letter-spacing: 0.06em;
padding: 8px 11px; transition: background-color 150ms ease-out, color 150ms ease-out;
}
.dz-nav-links a:hover { background: var(--sk-cobalt); color: #fff; }
@media (max-width: 700px) { .dz-nav-brand span { display: none; } }