/* Quill & Compass — marketing hero. Cut paper, woodcut, parchment. REQUIRES tokens.css loaded BEFORE this sheet (index.html , map.html's pattern). Every colour and face here resolves through it; without it the page has no palette at all. Warm paper grounds, iron-gall ink figures, rubric red used the way a scribe used it: once or twice a page. Depth comes from flat shapes, hard edges and the shadow a real paper cut-out casts — never from a glow. NO PALETTE LIVES HERE. Colour and type come from tokens.css so this page and map.html cannot drift apart. Only the two page-local print devices below. */ :root{ /* the offset a cut-out casts on the sheet beneath it — flat, warm, zero blur */ --cut-lift:4px 4px 0 rgba(74,51,32,.32); --cut-lift-sm:2px 2px 0 rgba(74,51,32,.26); /* hairline printed rule */ --rule:rgba(74,51,32,.42); } *{box-sizing:border-box} html{scroll-behavior:smooth} /* the same ground map.html stands on: paper colour, grain, plate grid, and a press vignette. Shared assets, shared blend modes — one sheet of paper. */ body{margin:0;color:var(--ink-700);font-family:var(--font-body); background-color:var(--paper-300); background-image: url('./assets/parchment-grain.svg'), url('./assets/parchment-grid.svg'), radial-gradient(120% 80% at 50% -10%, rgba(216,184,120,0) 40%, rgba(74,51,32,.10) 100%); background-size:220px 220px, 128px 128px, cover; background-repeat:repeat,repeat,no-repeat; background-blend-mode:soft-light,multiply,normal; -webkit-font-smoothing:antialiased;min-height:100svh;overflow-x:hidden} .skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink-900);color:var(--paper-100); font-weight:700;padding:.6rem 1rem;border-radius:0} .skip:focus{left:0} /* the FIRST tab stop had no authored indicator at all — it relied on the UA ring, which several engines suppress once left/position are animated. Ink on the paper plate is the strongest ring available here. */ .skip:focus-visible{outline:2px solid var(--ink-900);outline-offset:3px} /* ---- top bar ---- .topbar / .wordmark / .brand / .brand-logo retired here: index.html and the four SEO pages now use the shared .qnav plaque (nav.css), which carries the brand treatment AND the site navigation for every page. The --rubric-deep focus ring measured 4.15:1 and moved across with it. */ .foot-logo{display:block;margin:0 auto .7rem;height:clamp(54px,9.5vw,80px);width:auto} .mute{pointer-events:auto;width:42px;height:42px;border-radius:50%;cursor:pointer; background:var(--paper-100);border:1px solid var(--ink-500);color:var(--ink-900); font-size:1.05rem;line-height:1;box-shadow:var(--cut-lift-sm); transition:background-color .18s var(--snap),color .18s var(--snap),border-color .18s var(--snap)} .mute:hover{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper-100)} /* was opacity:.5 — which dimmed the glyph to 3.66:1 AND made dimness the only carrier of the muted state. The chip inverts instead: a struck plate reads as "off" at a glance and the glyph gains contrast rather than losing it. */ .mute[aria-pressed="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper-100)} .mute:focus-visible{outline:2px solid var(--rubric-deep);outline-offset:3px} /* ---- hero ---- */ /* a lit sheet, pressed a shade darker only along the TOP edge — the way a page darkens toward the gutter. The darkening deliberately stops by 30%: everything below it is clean paper-100, because that is where the die lands and where all the reading copy sits. An earlier pass shaded the bottom too and dropped the rubric headline to 1.99:1 against it — the ground has to stay out of the ink's way. */ .hero{position:relative;min-height:100svh;width:100%;overflow:hidden;isolation:isolate; background-color:var(--paper-100); background-image: url('./assets/parchment-grain.svg'), radial-gradient(120% 55% at 50% -8%, rgba(74,51,32,.13), rgba(74,51,32,0) 62%), linear-gradient(180deg, var(--paper-300) 0%, var(--paper-100) 30%, var(--paper-100) 100%); background-size:220px 220px,cover,cover; background-repeat:repeat,no-repeat,no-repeat; background-blend-mode:soft-light,multiply,normal} #atmos,#die,#burst{position:absolute;inset:0;width:100%;height:100%;display:block} #atmos{z-index:1} #die{z-index:2;cursor:pointer} /* the result flash. screen-blend was a light-on-dark device and washes to nothing on parchment — the paper equivalent is a stain that DARKENS, so multiply, and the five tiers separate by hue (gilt / ochre / bare paper / lapis / rubric) instead of by brightness. */ .flood{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:multiply} .flood.is-flash{animation:flood .9s ease-out} .flood--critSuccess{background:radial-gradient(58% 58% at 50% 44%,rgba(216,162,62,.85),rgba(240,132,51,.30) 58%,transparent 76%)} .flood--high{background:radial-gradient(58% 58% at 50% 44%,rgba(200,170,110,.62),transparent 62%)} .flood--mid{background:radial-gradient(60% 60% at 50% 45%,rgba(205,176,131,.48),transparent 62%)} .flood--low{background:radial-gradient(72% 72% at 50% 50%,rgba(38,97,156,.34),transparent 64%)} /* .58 stained the sheet so deep the phrase over it fell to 2.84:1 and the d20 readout to 4.42:1. At .40 the stain still reads as a red flood but the ink on top of it survives: phrase 3.66:1, readout 5.69:1. */ .flood--critFail{background:radial-gradient(72% 72% at 50% 48%,rgba(227,66,52,.40),rgba(156,43,28,.30) 58%,transparent 78%)} #burst{z-index:4;pointer-events:none} /* ---- reaction text ---- */ .reaction{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.45rem;text-align:center;padding:1rem;pointer-events:none} /* well under the display floor — body at 700 with heavy tracking reads as a rubric */ .reaction__num{font-family:var(--font-body);font-weight:700;font-size:clamp(.68rem,1.5vw,.92rem); letter-spacing:.38em;text-transform:uppercase;color:var(--ink-500);opacity:0;transform:translateY(-8px)} .reaction.is-on .reaction__num{animation:numIn .5s .08s ease-out forwards} .reaction__phrase{font-family:var(--font-display);font-weight:700;line-height:.94; font-size:clamp(2.3rem,11vw,8rem);letter-spacing:.005em} .reaction .ltr{display:inline-block;opacity:0;transform:translateY(42px) rotateZ(-9deg) scale(.65); animation:letterIn .52s cubic-bezier(.2,.9,.25,1) forwards} .reaction .sp{display:inline-block;width:.3em} /* the tiers used to escalate by glow radius. On paper they escalate the way a press does: bigger cut, hotter ink, and a second colour struck slightly off register behind the first. Every shadow here is ZERO BLUR — a misprint, not a halo. */ /* the page's single biggest moment, and it was its least legible: rubric over the gilt flood composited to 1.76:1, with a --gold-bright plate behind it at 1.02:1 (that plate never worked as a plate — it only ever worked as a glow, and on plain paper-100 it is 1.90:1). Inverted: the letterform is ink (7.84:1 on the flooded ground) and the vermilion survives as the off-register plate behind it. */ .reaction--critSuccess .reaction__phrase{color:var(--ink-900);font-size:clamp(2.6rem,12.2vw,9rem); letter-spacing:.02em;text-shadow:6px 6px 0 var(--rubric)} .reaction--high .reaction__phrase{color:var(--ember-text);text-shadow:4px 4px 0 rgba(216,162,62,.7)} .reaction--mid .reaction__phrase{color:var(--ink-700);text-shadow:2px 2px 0 rgba(205,176,131,.9)} .reaction--low .reaction__phrase{color:var(--ink-soft);letter-spacing:.06em} .reaction--critFail .reaction__phrase{color:var(--rubric-deep);font-size:clamp(2.6rem,12.2vw,9rem); text-shadow:6px 6px 0 var(--ink-900)} /* ---- hero copy (asymmetric, lower-left) ---- */ .hero-content{position:absolute;z-index:6;left:clamp(1.1rem,5vw,4.6rem); bottom:clamp(1.4rem,6vh,4rem);max-width:min(34rem,88vw);pointer-events:none} .hero-content>*{pointer-events:auto} /* .72rem — body at 700, not the display face */ .eyebrow{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.42em; font-size:.72rem;color:var(--ink-500);margin:0 0 .85rem} /* the heavy dark text-shadows kept these legible over a black canvas. Gone. */ .title{font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,7vw,5rem); line-height:.98;margin:0 0 1rem;color:var(--ink-900)} /* the page's one big use of rubric red — a scribe's two words per page. Cut a weight heavier than the roman around it: --rubric is 3.42:1 on paper-100, over the 3:1 large-text bar but not by much, and the fatter stroke buys real legibility without dulling the vermilion to --rubric-deep. Verified: this line sits at 45-57% of the hero, where the sheet is flat paper-100. */ .title em{font-style:normal;font-weight:700;color:var(--rubric)} .lede{font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.5;color:var(--ink-700); margin:0 0 1.6rem;max-width:31rem} /* ---- capture form: printed stationery ---- */ .capture{display:block} .cap-label{display:block;font-size:.86rem;font-weight:600;color:var(--ink-700);margin-bottom:.55rem} .cap-row{display:flex;gap:.5rem;flex-wrap:wrap} .cap-row input{flex:1 1 14rem;min-width:0;background:var(--paper-100); border:1px solid var(--ink-500);border-radius:2px;padding:.82rem 1rem; color:var(--ink-900);font-family:var(--font-body);font-size:1rem; box-shadow:inset var(--cut-lift-sm)} .cap-row input::placeholder{color:var(--ink-soft);opacity:1} /* the primary conversion control. The 50%-alpha rubric ring composited to ~1.89:1 — the same invisible-ring failure the re-skin was supposed to kill, and it fired on :focus rather than :focus-visible. Now identical to .founding-row input: 6.27:1. */ .cap-row input:focus, .cap-row input:focus-visible{outline:2px solid var(--rubric-deep);outline-offset:2px;border-color:var(--ink-900)} /* the single most important control on the page. Was a neumorphic slab — gradient field, inset specular line, 24px gold halo. Now it is a shape cut from ink and laid on the sheet: flat field, paper label, hard edge, and a real offset shadow that shortens as the button is pressed into the page. NAME IS HISTORICAL: .btn-gold is a leftover from the gilt era and is wired into index.html, landing.css and sections.css — the button is deliberately INK. Do not "restore" a gold fill to match the class name. */ .btn-gold{background:var(--ink-900);border:1px solid var(--ink-900); color:var(--paper-100);font-family:var(--font-body);font-weight:700;text-transform:uppercase; letter-spacing:.1em;font-size:.95rem;padding:.82rem 1.6rem;border-radius:2px;cursor:pointer; box-shadow:var(--cut-lift); transition:transform .16s var(--snap),box-shadow .16s var(--snap),background-color .16s var(--snap),border-color .16s var(--snap)} .btn-gold:hover{background:var(--rubric-deep);border-color:var(--rubric-deep); transform:translate(-1px,-1px);box-shadow:6px 6px 0 rgba(74,51,32,.36)} .btn-gold:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(74,51,32,.36)} /* 3.42:1 was the weakest ring on the page. offset:3px keeps the ring clear of the ink field, so the darker vermilion is measured against paper: 6.27:1. */ .btn-gold:focus-visible{outline:2px solid var(--rubric-deep);outline-offset:3px} .cap-note{font-size:.78rem;color:var(--ink-500);margin:.7rem 0 0;max-width:28rem} .cap-note--err{color:var(--rubric-deep);font-weight:700} .cap-success{font-family:var(--font-body);font-weight:700;color:var(--ink-900);font-size:1.06rem;margin:0} /* ---- roll cue ---- */ /* the frosted-glass pill (translucent black + backdrop blur + gold halo) is gone; this is a paper tab laid on the sheet, and it inverts to solid ink on hover */ .roll-cue{position:absolute;z-index:6;right:clamp(1.1rem,5vw,4.6rem);bottom:clamp(1.4rem,6vh,4rem); display:inline-flex;align-items:center;gap:.55rem;background:var(--paper-100); border:1px solid var(--ink-500);color:var(--ink-900);font-family:var(--font-body);font-weight:700; letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;padding:.72rem 1.15rem; border-radius:999px;cursor:pointer;box-shadow:var(--cut-lift-sm); transition:background-color .18s var(--snap),color .18s var(--snap),border-color .18s var(--snap)} /* The perpetual `cuePulse 2.6s infinite` bob was removed here. It pointed at a die that already tumbles forever, so two perpetual motions shared one viewport and cancelled rather than compounded -- on the page that owns the email capture. It was also a live bug: an animation-origin transform outranks author-normal, so its keyframe wiped the translateX(-50%) in the <=640px rule below and the CTA was never actually centred on mobile. The hover/focus states carry the affordance. */ .roll-cue:hover{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper-100)} .roll-cue:focus-visible{outline:2px solid var(--rubric-deep);outline-offset:3px} .roll-cue__icon{font-size:1.15rem;display:inline-block} /* ---- footer ---- */ /* a colophon, closed off by a printed double rule. The face WAS --paper-300, the same value body already carries, so the "different stock" it claimed was invisible. It is now the lit --paper-100 sheet the hero opens on — the last page matches the first — which also lifts .foot-line from 8.0:1 to 9.8:1. */ .site-foot{position:relative;z-index:2;text-align:center;padding:clamp(2.5rem,8vh,5rem) 1.5rem 3rem; background-color:var(--paper-100); background-image:url('./assets/parchment-grain.svg'); background-size:220px 220px;background-repeat:repeat;background-blend-mode:soft-light; border-top:4px double var(--rule)} .foot-mark{font-family:var(--font-body);font-weight:700;letter-spacing:.08em;color:var(--ink-900); font-size:1.2rem;margin:0 0 .5rem} .foot-line{color:var(--ink-500);font-size:.9rem;margin:0} /* ---- motion / responsive ---- */ @keyframes letterIn{to{opacity:1;transform:translateY(0) rotateZ(0) scale(1)}} @keyframes numIn{to{opacity:1;transform:translateY(0)}} @keyframes flood{0%{opacity:0}24%{opacity:1}100%{opacity:0}} @media (max-width:640px){ .hero-content{left:1.1rem;right:1.1rem;bottom:6.6rem;max-width:none} .roll-cue{left:50%;right:auto;transform:translateX(-50%);bottom:1.3rem} .reaction{justify-content:flex-start;padding-top:17vh} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reaction .ltr{animation:none;opacity:1;transform:none} .reaction.is-on .reaction__num{animation:none;opacity:1;transform:none} /* `.roll-cue{animation:none}` removed with the cuePulse keyframe it guarded. */ .btn-gold{transition:background-color .16s var(--calm),border-color .16s var(--calm)} .btn-gold:hover,.btn-gold:active{transform:none} .flood.is-flash{animation:floodReduced .5s ease-out} } @keyframes floodReduced{0%{opacity:0}40%{opacity:.5}100%{opacity:0}}