references, scrim and mask, all of it. Elias's dark fields carry no
motif at all; his .order is a near-black ground with two blurred discs
bleeding in from opposite corners, and that soft depth is what makes the
field read as finished rather than flat.
His structure, measured on his live page and identical at 1440 and 390:
.order::before, .order::after
700 x 700, border-radius 50%, filter blur(80px), opacity .4
.order::before his oxblood, top -200px, left -200px
.order::after his sage-dark, bottom -300px, right -200px
Ported at those exact values on .lastcall, and scaled to the band on
.masthead - see there. Every position, size, radius, blur and opacity is
his. Only the colors are ours: the warm corner where his oxblood sits,
the cool one where his sage-dark sits.
THE WARM DISC IS MIXED, NOT RAW --signal, AND THAT IS THE CONVERSION.
His oxblood #7A1F0E is a dark brick; at .4 over his #15110B it lifts the
ground by +40 red and almost nothing else. Our --signal #C63328 is a much
brighter red, and at the same .4 over our lighter ground it lifts by +75 -
nearly twice his, and it reads as a red wash across a third of the field
rather than a bloom. color-mix(--signal 45%, --ink-deep) = #5F272D, which
at his .4 lifts by +34: his effect, our token, his opacity untouched.
The cool disc needs no such correction - --accent at .4 lifts by
[2,19,20] against his sage-dark's [10,17,11], near enough.
Both hosts already carry position:relative and overflow:hidden, which is
what keeps the discs from spilling out of the field. */
.lastcall::before,.lastcall::after{
content:"";position:absolute;border-radius:50%;pointer-events:none;
opacity:.4;width:700px;height:700px;filter:blur(80px);
background:color-mix(in srgb,var(--signal) 45%,var(--ink-deep));
}
@supports not (background:color-mix(in srgb,red 45%,blue)){
/* the same mix, flattened */
.lastcall::before{background:#5E3220}
}.lastcall::before{top:-200px;left:-200px}.lastcall::after{background:var(--accent);bottom:-300px;right:-200px}
/* THE MASTHEAD HAS NO BLOOM. It had one for exactly one revision and it was
the wrong answer: Margret's band is a rendered illustration served as an
image file, and this shop needs the same. What sits here now is the
placeholder for it, in the same .ph treatment styles.css already gives the
hero image placeholder. The Last Call keeps its bloom - that block is
Elias's field, not a picture. */
/* The band image: full bleed at inset 0,cover-cropped,under the wordmark. */
.masthead-img{position:absolute;inset:0;z-index:1;display:block}.masthead-img img{width:100%;height:100%;object-fit:cover;display:block}
/* The wordmark sits above whichever of the two is present. */
.masthead-mark{z-index:2}.masthead-mark{
position:relative;z-index:2;pointer-events:none;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:.7rem;
}.masthead-word{
font-family:var(--display);font-weight:600;text-transform:uppercase;
font-size:2.1rem;line-height:1;letter-spacing:.34em;color:var(--paper);
/* the tracking adds a trailing gap after the last letter; pull it back so
the wordmark is optically centered rather than mathematically centered */
margin-right:-.34em;
}
/* Short rule, not a full-width one: it belongs to the wordmark. */
.masthead-mark::after{
content:"";display:block;width:5.5rem;height:2px;background:var(--accent-lift);
}
@media (max-width:767.98px){.masthead-mark{gap:.5rem}.masthead-word{font-size:1.15rem;letter-spacing:.26em;margin-right:-.26em}.masthead-mark::after{width:3.5rem}
}
/* The band itself is the home link. */
.masthead-home{position:absolute;inset:0;z-index:1;display:block}.masthead-home:focus-visible{outline:3px solid #F2EBDC;outline-offset:-6px}.visually-hidden{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
white-space:nowrap;border:0;
}
@media (max-width:767.98px){
/* The band was 80px here and the mobile strip is 65px, so reserving the
overlay out of 80 leaves 15px and clips the wordmark. The 80px is the
VISIBLE band, so the strip's height is added rather than taken out of
it. Desktop is different on purpose: there the 170px is the whole
band, overlay included, and 110px of it stays visible. */
.masthead{height:calc(80px + var(--urg-h,0px))}
}
/* ---------- hero ---------- */
.hero{padding:2.8rem 0 1.6rem}.hero-in{display:grid;grid-template-columns:56fr 44fr;grid-template-areas:"text img";column-gap:2.6rem;align-items:start}.hero-text{grid-area:text;display:flex;flex-direction:column;align-items:flex-start}.hero-media{grid-area:img;justify-self:center;width:100%;max-width:24rem}
/* The hero is a photograph again, so the frame comes back: tile behind, a
hairline rule and a little padding, which is what stops a rectangular
photo from looking pasted onto the paper. No fixed aspect ratio, the
width/height attributes reserve the space instead. */
/* THE HERO IMAGE HAD TWO EDGES AND NOW HAS ONE.
`.hero-frame` was a card: a --tile ground, a 1px --line border, a 3px
radius and a .7rem mat, with the photograph sitting inside it. On a
--paper page that mat is six units off the ground it sits on, so it never
read as a mat - it read as a second frame drawn just inside the first,
with the photograph's own hard edge as a third line.
THE IMAGE IS THE CARD, which is the principle section 04's page strip
already states in this file and applies to its own five tiles. The
ground, the border and the mat come off .hero-frame, which is now a
pass-through, and the one edge that remains is on the image: the same
1px --line rule and the frame's own 3px radius, so the silhouette does
not move. Nothing else about the hero changes - the column, the cap and
the three grid ratios are untouched. */
.hero-frame{background:none;border:0;border-radius:0;padding:0}.hero-photo{display:block}.hero-photo img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px}.hero h1{max-width:16ch;margin-bottom:.9rem}.best{font-family:"Lora",Georgia,serif;font-weight:400;font-size:1.06rem;line-height:1.62;color:var(--ink-soft);max-width:42ch;margin:1.1rem 0 1.6rem}.hero-points{list-style:none;margin:.2rem 0 1.3rem;padding:0;max-width:36ch}.hero-points li{
position:relative;padding:.42rem 0 .42rem 2rem;
font-family:"Lora",Georgia,serif;font-size:1.06rem;line-height:1.4;color:var(--ink);
}
/* Filled disc with a knocked-out tick, the shape the Angus Douglas hero
uses. Green rather than oxblood on purpose: this is a "you get this"
mark, not a second call to action. */
.hero-points li::before{
content:"";position:absolute;left:0;top:.5rem;
width:1.2rem;height:1.2rem;border-radius:50%;background:var(--free-green);
}.hero-points li::after{
content:"";position:absolute;left:.35rem;top:.85rem;
width:.48rem;height:.25rem;
border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);
transform:rotate(-45deg);
}
/* In the hero the pill sits on paper, so it takes the tile fill to separate.
In the offer column it already sits on tile and keeps the paper fill. */
.top-cta{margin-top:0}.cta-note{
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
font-size:.62rem;color:var(--ink-mute);margin:.9rem 0 0;
}
/* guarantee badge */
.assure{margin-top:1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.badge{
display:inline-flex;align-items:center;gap:.6rem;
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;
color:var(--sage);border:2px solid var(--sage);border-radius:999px;
padding:.6rem 1.2rem;background:rgba(94,115,85,.06);
}.badge svg{width:1.15rem;height:1.15rem;flex:none;fill:currentColor}.badge svg .tick{stroke:var(--paper);fill:none}.assure-sub{font-size:.85rem;color:var(--ink-mute);margin:0}
/* ---------- stats bar ---------- */
.statsbar{padding:0 0 1.6rem}.hero-stats{
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.75rem 0;
}.hs{padding:0 1rem;text-align:center}.hs + .hs{border-left:1px solid var(--line)}.hs b{display:block;font-family:var(--display);font-weight:700;font-size:1.65rem;line-height:1;color:var(--accent)}.hs span{
display:block;font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
font-size:.53rem;color:var(--ink-mute);margin-top:.35rem;
}
/* ---------- offer ---------- */
.offer{border-top:1px solid var(--line);padding-top:2.6rem}.offer-top{display:flex;gap:2rem;align-items:flex-start;margin-bottom:1.8rem}
@media (max-width:620px){.offer-top{gap:1.1rem}
}.offer-h{font-size:2.7rem;line-height:1.05;margin-bottom:.8rem}.offer-lede{font-size:1.02rem;color:var(--ink-soft);max-width:46ch}.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start}
/* Same cutout in the offer block. No frame here either, and the drop shadow
is what makes it read as standing on the page rather than pasted onto it. */
.offer-shot picture{display:block}.offer-shot img{
width:100%;height:auto;display:block;
filter:drop-shadow(0 16px 24px rgba(34,39,31,.26));
}
/* The whole right column is one bordered container: the three books, the
price and the guarantee all inside the same rule, which is the Angus
arrangement. */
.offer-detail h3{font-size:1.9rem;margin-bottom:.6rem}.offer-detail > p{font-size:1rem;color:var(--ink-soft)}
/* ---------- order block ----------
Values lifted from the live frankmillerbutcher.com stylesheet so the two
blocks are identical apart from the words. His --oxblood/--steel/--money/
--line/--ink resolve to the same hexes as her --accent/--ink-mute/
--free-green/--line/--ink, and his "Oswald" is her --ui, so the mapping is
one-to-one. No wrapping box, no lead card, hairline rules between rows. */
.price-row{
display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:.7rem 0;margin:.9rem 0;
}.offer-detail .btn-row{margin-top:.6rem}.p-now{font-family:var(--ui);font-size:2.8rem;line-height:1;color:var(--accent)}.p-was{font-size:1.05rem;color:var(--ink-mute);text-decoration:line-through}.stack-head{
font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em;
font-size:.68rem;color:var(--accent);margin-bottom:.25rem;
}.stack{list-style:none;padding:0;margin:0}.stack li{
display:flex;justify-content:space-between;gap:1.5rem;
padding:.42rem 0;border-bottom:1px solid var(--line);
font-size:.95rem;line-height:1.35;
}.stack li b{font-weight:700}.stack li em{font-style:normal;font-family:var(--ui);color:var(--ink-mute);white-space:nowrap}.stack li em.free s{color:var(--ink-mute);opacity:.7;margin-right:.5rem}.stack li em.free i{
font-style:normal;display:inline-block;background:var(--free-green);color:#fff;
text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;font-weight:600;
padding:.2rem .6rem;border-radius:3px;
}.stack li .lead-tag{
display:inline-block;background:var(--accent);color:#fff;font-family:var(--ui);
text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;
padding:.14rem .45rem;border-radius:2px;margin-right:.5rem;vertical-align:.1em;
}
/* The .row-tag / .row-tag-main / .row-tag-part rules lived here. Deleted in
the seventh revision set together with the THE MAIN BOOK pill: Elias has no
row badges at all, and PART ONE went with its row in the fifth set. Nothing
else used them, so they are gone rather than left inert. --signal is still
in use - the strip's timer plate and pulse dot. */
/* Green tick per included item,so the block reads as a list of things you
get rather than a price table. Same green as the FREE pill and the same
circle as the hero bullets. The total row is not an item,so no tick. */
.stack li.total{padding-left:0}.stack li.total::before,.stack li.total::after{content:none}.stack li.total{
border-bottom:none;border-top:2px solid var(--ink);margin-top:.2rem;padding-top:.65rem;
font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em;
}.stack li.total em{color:var(--ink)}
/* ---------- bonus rows ----------
The live Senior Flyer's treatment, ported to palette A: a badge, the
name, the value in italic. Grid rather than flex so the badge column,
the name column and the value column line up between the two rows the
way they do on the live site, and dashed rules rather than solid so the
block reads as an addendum to the stack rather than more of it. */
.bonus-rows{
margin-top:.55rem;padding-top:.55rem;
border-top:1px dashed var(--line-strong);
}.bonus-row{
display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;
align-items:center;padding:.5rem 0;
font-size:.95rem;line-height:1.35;
}.bonus-row + .bonus-row{border-top:1px dashed var(--line)}.bonus-tag{
display:inline-block;background:var(--gold);color:var(--ink-deep);
font-family:var(--ui);font-weight:700;text-transform:uppercase;
letter-spacing:.08em;font-size:.6rem;line-height:1;
padding:.32rem .5rem;border-radius:4px;white-space:nowrap;
}.bonus-nm b{font-weight:700}
/* Italic, and the same ink as every other figure in the stack, so the
bonus value does not out-shout the three real prices above it. */
.bonus-vl{
font-style:italic;font-family:var(--body);
color:var(--ink-mute);white-space:nowrap;font-size:.9rem;
}
@media (max-width:900px){.bonus-row{grid-template-columns:auto 1fr;row-gap:.2rem}.bonus-vl{grid-column:2;justify-self:start}
}
/* The second divider of the offer box: bonuses above, the four checkmarks
below. Same dashed hairline as the one over the bonuses, so the three
blocks read as three blocks. Overrides the plain margin in styles.css. */
.offer-detail .offer-checks{
margin-top:.75rem;padding-top:.85rem;
border-top:1px dashed var(--line-strong);
}
/* ---------- total value ----------
Lifted out of the stack, because the order now puts it after the
checkmarks. Same rule, same type, same weight as .stack li.total was. */
.stack-total{
display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
max-width:none;margin:.9rem 0 0;padding-top:.65rem;
border-top:2px solid var(--ink);
font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em;
font-size:.95rem;line-height:1.35;
}.stack-total em{font-style:normal;font-family:var(--ui);white-space:nowrap;color:var(--ink)}
@media (max-width:900px){.p-now{font-size:2.2rem}.stack li{flex-direction:column;gap:.1rem;padding:.45rem 0}.stack li em{align-self:flex-start}
}.lead-tag{
display:inline-block;background:var(--accent);color:#FFF8F2;
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
font-size:.56rem;padding:.18rem .5rem;border-radius:2px;vertical-align:.1em;
}
/* Solid green, with the tick beside it. Everything else on the row is
terracotta or ink, so FREE is the only green thing and reads as a
giveaway rather than as a second button. */
.free-tag{
display:inline-block;background:var(--free-green);color:#fff;
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
font-size:.54rem;padding:.14rem .45rem;border-radius:2px;margin-right:.5rem;vertical-align:.12em;
}.guarantee-inline{
display:flex;gap:.8rem;align-items:flex-start;
background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--sage);
border-radius:3px;padding:.8rem .9rem;margin:.7rem 0 .2rem;
}.guarantee-inline .seal{
flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--sage);color:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center;
}.guarantee-inline .seal b{font-family:var(--display);font-size:1rem}.guarantee-inline .seal span{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.36rem;margin-top:.12rem}.guarantee-inline h3{font-size:.95rem;line-height:1.25;margin:0 0 .2rem}.guarantee-inline p{font-size:.82rem;line-height:1.45;color:var(--ink-soft);margin:0;max-width:none}.trustline{
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
font-size:.6rem;color:var(--ink-mute);margin:.6rem 0 0;
}
/* payment strip under the offer */
.paybar{margin:2.6rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);text-align:center}.lockline{
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
font-size:.62rem;color:var(--ink-mute);margin:0 0 .7rem;max-width:none;
}.pays{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;justify-content:center}.pay-mark{
display:inline-flex;align-items:center;justify-content:center;height:1.9rem;min-width:3rem;padding:0 .5rem;
background:#fff;border:1px solid var(--line);border-radius:2px;
}.pay-mark svg{height:1.05rem;width:auto;display:block}.pay-label{font-family:var(--ui);font-weight:700;font-size:.66rem;letter-spacing:.06em;color:#1A1F6B}.pay-label.ap{display:inline-flex;align-items:center;gap:.12rem;color:#111;letter-spacing:0}.helpbar{text-align:center;font-size:.8rem;color:var(--ink-mute);margin:.9rem auto 0;max-width:none}
/* ---------- promise band ---------- */
.aside-in{display:flex;flex-direction:column;align-items:flex-start}.promise{
font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.35;color:var(--ink);
max-width:32ch;margin:0 0 1rem;padding-left:1.1rem;border-left:5px solid var(--accent);
}p.lede{font-size:1.08rem;color:var(--ink-soft);max-width:44ch}
/* ---------- positioning strip ---------- */
.strip{background:var(--ink);color:#fff;padding:1.4rem 0}.strip-in{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;flex-wrap:wrap}.strip p{
margin:0;max-width:none;color:#fff;
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;
}.strip span{color:#9AA093;font-size:.95rem}
/* ---------- the three books ---------- */
.section-head{margin-bottom:2rem;max-width:52ch}
/* ------------------------------------------------------------------
05's HONESTY LINE - `.review-note`. THE ONE RULE THIS BUILD ADDS TO
THE REFERENCE'S REVIEWS BLOCK.
The five cards in 05 are composite stories and the intake requires the
page to say so, in one small line directly under the lead. The
reference has no such element: it carried an equivalent line at full
size under its own heading and removed it on its owner's instruction,
so there was no rule to port and one had to be written.
IT IS SMALL PRINT AND IT IS NOT HIDDEN. Sized between `p.lede` above it
and the `.who` caption band below, in --ink-mute, which measures
5.15 : 1 on --paper and 5.52 : 1 on --tile - AA at both, and 05 is a
tile band. No italics and no parentheses: a qualifier that looks like
an aside reads as one.
The measure is the lede's own 44ch so the two lines stack on the same
left edge and the same right ragged edge.
------------------------------------------------------------------ */
.review-note{
margin:.5rem 0 0;max-width:44ch;
font-family:var(--body);font-size:.86rem;line-height:1.5;
color:var(--ink-mute);
}.books{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}.bk{
background:var(--tile);border:1px solid var(--line);border-top:5px solid var(--sage);
border-radius:4px;padding:1.4rem;
transition:transform .18s ease,box-shadow .18s ease;
box-shadow:0 1px 2px rgba(34,39,31,.04),0 6px 16px -12px rgba(34,39,31,.3);
}.bk:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(34,39,31,.06),0 14px 24px -14px rgba(34,39,31,.4)}.bk.main{border-top-color:var(--accent)}.bk h3{font-size:1.1rem;margin-bottom:.2rem}.bk-sub{
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
font-size:.6rem;color:var(--sage);margin:0 0 .8rem;
}.bk p{font-size:.92rem;color:var(--ink-soft);margin:0;max-width:none}.bk-tag{
display:inline-block;font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
font-size:.54rem;padding:.14rem .45rem;border-radius:2px;margin-left:.4rem;vertical-align:.2em;
}.bk-tag.free{background:var(--free-green);color:#fff}.bk-tag.main-tag{background:var(--accent);color:#FFF8F2}.getlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.4rem;margin-top:2rem}.gi{display:flex;gap:1rem;align-items:baseline;padding:.85rem .5rem;border-bottom:1px solid var(--line)}.gi b{
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.07em;
font-size:.72rem;color:var(--accent);flex:none;width:8.5rem;
}.gi span{font-size:.94rem;color:var(--ink-soft)}
/* ---------- what is inside (dark) ---------- */
.inside-head{max-width:46ch;margin-bottom:1.8rem}.tally{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid #3A4136;border-bottom:1px solid #3A4136;margin-bottom:2rem;
}.ty{padding:1rem .8rem;text-align:center}.ty + .ty{border-left:1px solid #3A4136}.ty b{display:block;font-family:var(--display);font-weight:700;font-size:1.8rem;line-height:1;color:var(--accent-lift)}.ty span{
display:block;font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
font-size:.56rem;color:#8E9487;margin-top:.35rem;
}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.card{
position:relative;overflow:hidden;background:#2A2F26;border:1px solid #3A4136;border-radius:4px;
padding:1.2rem 1.2rem 1.3rem;transition:transform .18s ease,border-color .18s ease,background .18s ease;
}.card:hover{transform:translateY(-4px);border-color:var(--sage);background:#2F352B}.card-no{
position:absolute;top:.15rem;right:.6rem;font-family:var(--display);font-weight:700;font-size:3rem;line-height:1;
color:transparent;-webkit-text-stroke:1px #4A5144;
}.card:hover .card-no{-webkit-text-stroke-color:#6E7566}.card h3{color:#fff;font-size:1.02rem;margin:0 2.6rem .5rem 0;line-height:1.25}.card p{font-size:.86rem;color:#A2A899;margin:0;max-width:none}.inside-cta{margin-top:2rem;padding-top:1.8rem;border-top:1px solid #3A4136;text-align:center}.inside-cta .btn{margin-inline:auto}.inside-cta p{font-size:.84rem;color:#8E9487;margin:.9rem auto 0}
/* ---------- how a recipe is written ---------- */
.recipe{
background:var(--paper);border:2px solid var(--line-strong);border-radius:4px;
padding:1.6rem 1.7rem;max-width:34rem;
}.recipe-kicker{
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
font-size:.58rem;color:var(--sage);margin:0 0 .3rem;
}.recipe h3{font-size:1.4rem;margin-bottom:.7rem}.ratio{
display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
background:rgba(94,115,85,.09);border:1px solid var(--line);border-radius:3px;
padding:.55rem .8rem;margin:0 0 1rem;
}.ratio span{
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
font-size:.56rem;color:var(--sage);
}.ratio b{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink)}.recipe ol{margin:0;padding-left:1.3rem}.recipe li{margin-bottom:.5rem;font-size:.94rem;color:var(--ink-soft)}.recipe li:last-child{margin-bottom:0}.recipe-note{font-size:.84rem;color:var(--ink-mute);margin:1rem 0 0;max-width:none;font-style:italic}.howgrid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}
/* ---------- the method (three rules) ---------- */
.tricks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}.trick{
background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--sage);
border-radius:3px;padding:1.3rem;
}.trick h3{font-size:1.02rem;margin-bottom:.35rem}.trick p{font-size:.92rem;margin:0;color:var(--ink-soft);max-width:none}
/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start}.about .shot{aspect-ratio:1/1}.pull{
font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.4;
border-left:5px solid var(--accent);padding-left:1.2rem;margin:1.6rem 0;max-width:38ch;
}
/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2.4rem}.faq h3{font-size:1.05rem;margin-bottom:.25rem}.faq p{font-size:.94rem;margin:0;color:var(--ink-soft)}
/* ---------- closing ---------- */
.closing-cta{text-align:center}.closing-cta h2{font-size:2.3rem;max-width:22ch;margin-inline:auto}.closing-cta p{margin-inline:auto}.closing-cta .btn-row{justify-content:center}.reassure{font-size:.88rem;color:var(--ink-mute);margin:.9rem 0 0}
/* ---------- exit intent ---------- */
/* ==================================================================
EXIT MODAL - ELIAS YODER'S .modal
His structure,spacing and type scale,read off his stylesheet:
.modal fixed,inset 0,flex centered,padding 24px
.modal__bd his ink at .72 alpha,backdrop-filter blur(6px)
.modal__card padding 50px 42px 36px,max-width 480px,width 100%,text-align center,1px border,page shadow,animation riseIn .4s cubic-bezier(.16,.84,.27,1) both
.modal__close top 14px,right 18px,serif 1.8rem,--ink-mute
.modal__cover width 120px,margin 0 auto 22px
.eyebrow .74rem / .24em / uppercase / 500,margin 0 0 18px
h2 1.9rem,margin-bottom 14px; its em italic + accent
p 1rem,margin-bottom 22px
.btn btn--block btn--big: full width,20px 34px,.84rem
.modal__small mono .72rem / .18em / uppercase,--ink-mute,margin-top 16px,its link in his accent
TWO DELIBERATE DEPARTURES,both stated rather than silent:
1. THE BACKDROP STAYS THE OUTER ELEMENT. His is a child,.modal__bd.
landing.js closes on `e.target === modal`,so a child backdrop would
swallow that click and break closing. Trigger,timing and suppression
were to stay untouched,so the backdrop model stays too - it takes his
alpha and his blur,on our ink.
2. THE CLOSE BUTTON KEEPS A 44px MINIMUM TARGET. His is a bare glyph with
no minimum. This audience is 65+ and 44px is the touch-target floor;
it sits at his 14/18 offsets and reads the same.
================================================================== */
.xi{
position:fixed;inset:0;z-index:9998;display:none;
align-items:center;justify-content:center;padding:24px;
background:rgba(14,31,23,.72);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}.xi.open{display:flex}.xi-box{
position:relative;background:var(--paper);border:1px solid var(--line);
padding:50px 42px 36px;max-width:480px;width:100%;text-align:center;
box-shadow:0 22px 60px -10px rgba(0,0,0,.25);
animation:xi-rise .4s cubic-bezier(.16,.84,.27,1) both;
}
@keyframes xi-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.xi-box{animation:none}
}.xi-cover{width:120px;margin:0 auto 22px}.xi-cover img{width:100%;height:auto;display:block}/* Scoped to .xi: `.xi p{font-size:1rem;margin:0 0 22px;color:var(--ink-soft)}`
is 0,2,0 and outranks a bare class on these two, which are both . Same
trap the offer box hit with `.offer-detail > p`. */
.xi .xi-eyebrow{
display:block;margin:0 0 18px;max-width:none;
font-family:var(--ui);font-size:.74rem;font-weight:600;
letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
}
/* SENTENCE CASE, the same switch #reviews h2 takes in styles.css and for the
same reason: this heading is a sentence and ends in a full stop. It is the
only declaration added here - size, line-height and spacing are unchanged,
and the $27's keeps his italic-and-accent treatment below. */
.xi h2{text-transform:none}
.xi h2{font-size:1.9rem;line-height:1.14;margin:0 0 14px;padding-right:1.4rem}.xi h2 em{font-style:italic;color:var(--accent)}.xi p{font-size:1rem;line-height:1.5;color:var(--ink-soft);margin:0 0 22px;max-width:none}.xi .xi-small{
font-family:var(--ui);font-size:.72rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--ink-mute);margin:16px 0 0;max-width:none;
}.xi .xi-small a{color:var(--accent);text-decoration:none}.xi .xi-small a:hover{color:var(--accent-dark);text-decoration:underline}.xi-close{
position:absolute;top:14px;right:18px;background:none;border:0;
font-family:var(--serif);font-size:1.8rem;line-height:1;
color:var(--ink-mute);cursor:pointer;
/* our floor, not his - see the note above */
display:flex;align-items:center;justify-content:center;
min-width:44px;min-height:44px;padding:0;
}.xi-close:hover{color:var(--ink)}
/* NO MOBILE OVERRIDE, on purpose - restored 2026-09-10 with the button.
Checked: his .modal__card appears in none of his six breakpoints, and his
live page renders 50px 42px 36px and a 1.9rem headline at 390 exactly as
it does at 1440. He does not shrink this card on a phone, so neither does
this one.
The 24px step that briefly stood here existed only because the Otis
button was 17px on a phone against a 255px card. The button is 13.44px
again, so the card does not need the room and his figure stands. */
/* His modal button is btn--block: full width. A modifier on .ep-btn,the same
way .ep-btn--invert is - the padding,type,arrow and hover all come from
there. Scoped to .xi so it outranks .ep-btn,which is declared later in this
file and would otherwise win on source order at equal specificity. */
.xi .ep-btn--block{display:flex;width:100%;justify-content:center}
/* ==================================================================
FAQ CASING - THE UPPERCASE WAS IN CSS, NOT IN THE MARKUP.
Both strings are typed sentence case in index.html and were being
transformed on the way to the screen by two separate rules:
the H2 styles.css:86 h1,h2,h3,h4{...text-transform:uppercase}
a GLOBAL heading rule - every heading on the page
the questions landing.css .drop > summary{...text-transform:uppercase}
Neither can be edited where it sits. The global one carries the other
headings on the page and the summary one carries the .drop component,
which is not FAQ-only. So both are overridden here, scoped to #faq and
to nothing else, and only the transform is touched - family, size,
weight and tracking all stay exactly as they were.
THE EYEBROW IS DELIBERATELY NOT IN THIS RULE. `COMMON QUESTIONS` gets
its capitals from .eyebrow's own text-transform in styles.css and
stays uppercase, as asked.
================================================================== */
/* DOWN 10% FROM WHAT IT WAS, AT EVERY WIDTH, ladder preserved.
The global h2 ladder is 2.15rem with a 1.75rem step under 900px, which
rendered 38.70 / 31.50 / 29.75px. x0.9 gives 1.935rem and 1.575rem, so
34.83 / 28.35 / 26.78px. Stated in rem, not px, because the ask was a
proportional reduction of the existing ladder rather than a match to a
figure of his - this heading has no counterpart on his page. */
#faq h2{text-transform:none;font-size:1.935rem}
@media (max-width:900px){#faq h2{font-size:1.575rem}}
#faq .drop > summary{text-transform:none}
/* THE OFFER HEADLINE, SCOPED THE SAME WAY AND FOR THE SAME REASON.
`.offer-h` is typed sentence case in index.html; its capitals came from the
same global styles.css:86 `h1,h2,h3,h4{...text-transform:uppercase}` rule.
Scoped to #buy so it moves this heading and nothing else - the family, the
2.35rem/2.1rem/1.55rem size ladder, the weight and the .02em tracking are
all left exactly where they were. */
/* 06 REPEATS 01, SO IT TAKES 01'S CASING TOO. The rule was scoped to
#buy alone and left 06's H2 rendering in the site-wide capitals. */
#buy .offer-h,#order .offer-h{text-transform:none}
/* `#whatyouget h2{text-transform:none}` WAS HERE AND IS TOMBSTONED.
It was the third of the same kind - the "$27 once. No subscription. Yours
forever." headline, typed sentence case and un-uppercased by a scoped
override. That section was deleted whole on this revision; its four
checkmarks are in 04 and its own line is covered by the offer box's foot
line. Nothing else ever selected #whatyouget, so this is the only rule the
deletion orphaned. Recorded rather than silently dropped. */
/* ---------- responsive ---------- */
@media (max-width:960px){.offer-h{font-size:2.1rem}.offer-grid{grid-template-columns:1fr;gap:1.8rem}.cards{grid-template-columns:repeat(2,1fr)}.howgrid{grid-template-columns:1fr;gap:1.8rem}.about,.faq{grid-template-columns:1fr;gap:2rem}.books,.tricks,.getlist{grid-template-columns:1fr;gap:1.2rem}.gi{flex-direction:column;gap:.2rem}.gi b{width:auto}
}
@media (max-width:820px){.hero-in{grid-template-columns:1fr;grid-template-areas:"img" "text";row-gap:1.6rem;text-align:center}
/* Smaller than the desktop cap: stacked above the headline on a phone,
24rem of photo filled the screen before a word had been read. */
.hero-media{max-width:16.8rem}.hero-text{align-items:center}.hero h1{max-width:none}.best,.hero-points,p.lede,.offer-lede{margin-inline:auto}
/* .best JOINS .hero-points IN STAYING LEFT-ALIGNED.
.hero-in above sets text-align:center for the stacked hero, and .best
inherited it. With a floated ::first-letter that is what broke the wrap:
each line was centred inside its own shortened line box, so no two lines
below the cap began at the same x. Measured at 390 before this rule, the
six line starts read 15.59 / 67.80 / 69.45 / 17.48 / 27.58 / 23.72.
Elias's .hero__sub is text-align:start at every one of his breakpoints -
he never centres the hero column - and his line starts read
22 / 72.75 / 72.75 / 72.75 / 22 / 22: three lines flush to the cap, then
back to the paragraph edge. The ::first-letter block itself is already his
value for value (float, 8px 12px -2px 0 margin, .85 line-height, 3.4em,
no text-indent on either side); alignment was the only thing left. */
.best,.hero-points{text-align:left}.btn-row{justify-content:center}.assure{align-items:center}.promise{margin-inline:auto}.aside-in{align-items:center;text-align:center}body{padding-bottom:4.6rem}
}
@media (max-width:620px){.cards{grid-template-columns:1fr}.tally{grid-template-columns:repeat(2,1fr)}.ty:nth-child(3){border-left:0}.ty:nth-child(n+3){border-top:1px solid #3A4136}.hs{padding:0 .4rem}.hs b{font-size:1.35rem}.hs span{font-size:.48rem;letter-spacing:.07em}.strip-in{flex-direction:column;align-items:flex-start;gap:.4rem}.closing-cta h2{font-size:1.8rem}
}
/* ---------- audiobook chip ---------- */
/* Outlined rather than solid so it reads as a format label and never competes
with a price or a button. */
.audio-tag{
display:inline-flex;align-items:center;gap:.35em;
background:transparent;color:var(--accent);
border:1px solid var(--accent);border-radius:2px;
font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
font-size:.54rem;padding:.12rem .45rem;margin-right:.5rem;vertical-align:.12em;
}.audio-tag svg{width:.95em;height:.95em;flex:none}
/* ---------- graceful gaps where art is still missing ---------- */
/* Each frame holds an ▸ at
.7rem in its accent. Same glyph, same size, palette A's accent - and the
green tick is retired from this list so that the four benefit bullets
below are the only place on the page it appears. */
.stack li::before{
content:"\25B8";
grid-column:1;grid-row:1;position:static;
width:auto;height:auto;border-radius:0;background:none;
color:var(--accent);font-size:.7rem;line-height:1;
justify-self:end;
margin-top:.42rem; /* optical: level with the first text line */
}.stack li::after{content:none} /* the old separate check mark */
.stack li > span{grid-column:2;grid-row:1;min-width:0}.stack li > em{grid-column:3;grid-row:1;justify-self:end}
/* The total is not an item: no tick, text and figure only. */
.stack li.total{grid-template-columns:minmax(0,1fr) auto;padding-left:0}.stack li.total::before{content:none}.stack li.total > span{grid-column:1}.stack li.total > em{grid-column:2}
/* Narrow: the price drops under the text for EVERY row, aligned to the text
column so the tick column stays clear. Consistent across all rows. */
@media (max-width:560px){.stack li{grid-template-columns:1.1rem minmax(0,1fr);}.stack li > em{grid-column:2;grid-row:2;justify-self:end}.stack li.total{grid-template-columns:minmax(0,1fr)}.stack li.total > em{grid-column:1;grid-row:2;justify-self:end}
}
/* ---------- hero sizing, matched to the Frank build ----------
On mobile the photo fills the column instead of being capped at 16.8rem. */
@media (max-width:820px){.hero-media{width:100%;max-width:none}
}
/* ---------- desktop hero sizing, matched to the Frank build ----------
Her image column was 44fr but the photo was capped at 24rem, which is
narrower than the column it sits in, so it never filled it. Frank's cap
(25rem) sits above his column width, so his photo fills the column and
the cap never binds. Same three values here: column ratio, cap, frame
padding. Scoped to min-width:821px so the mobile sizing is untouched. */
@media (min-width:821px){
/* Her photo is landscape where Frank's is portrait, so matching his column
ratio left it short. The image column takes 48fr and the cap sits just
above it, so the photo fills the column and the cap never binds. */
.hero-in{grid-template-columns:52fr 48fr}.hero-media{max-width:28rem}/* `.hero-frame{padding:.8rem}` was here and went with the mat. */
}
/* Star row above the reviewer name, matching the sites' shared treatment. */
.review .stars{font-size:1.05rem;margin-bottom:.15rem}
/* ---------- per-review star ratings ----------
Partial fills via a gradient clipped to the glyphs, so a rating between
whole stars renders honestly. letter-spacing is zeroed on these so each
star is exactly one fifth of the width and --pct maps 1:1 to the rating
(4.5 -> 90%, 4.9 -> 98%). Aggregate pills elsewhere are untouched. */
.review .stars{
letter-spacing:0;
background-image:linear-gradient(90deg,var(--accent) var(--pct,100%),#D9D0B6 var(--pct,100%));
-webkit-background-clip:text;background-clip:text;
color:transparent;
}
/* ---------- drop-downs: FAQ and contents ---------- */
.drop{border-top:1px solid var(--line);margin:0}.drop:last-of-type{border-bottom:1px solid var(--line)}.drop > summary{list-style:none;cursor:pointer;padding:.9rem 2rem .9rem 0;position:relative;
font-family:var(--ui);text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;color:var(--ink)}.drop > summary::-webkit-details-marker{display:none}.drop > summary::after{content:"";position:absolute;right:.35rem;top:1.2rem;width:.6rem;height:.6rem;
border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:rotate(45deg);transition:transform .18s ease}.drop[open] > summary::after{transform:rotate(-135deg)}.drop-body{padding:0 0 1rem}.drop-body p{font-size:.95rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .7rem;max-width:none}.drop-body h3{font-size:1rem;margin:.9rem 0 .25rem}.tag-main,.tag-free{font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;
padding:.14rem .45rem;border-radius:2px;margin-left:.4rem;vertical-align:.15em;color:#fff}.tag-main{background:var(--accent)}.tag-free{background:var(--free-green)}.origin-strip{padding:2rem 0 0}.origin-strip p{font-family:"Lora",Georgia,serif;font-size:1.02rem;line-height:1.55;color:var(--ink-soft);margin:0 0 .5rem;max-width:52ch}
@media (prefers-reduced-motion:reduce){.drop > summary::after{transition:none}}
/* ---------- guarantee seal ----------
An insignia, not a caption: solid shield, heavy border, no gradient,
no glow, no shine. Same mark and same position on all three sites. */
.seal-badge{
display:inline-flex;align-items:center;gap:.85rem;
border:3px solid var(--accent);background:var(--tile);
padding:.75rem 1.15rem;border-radius:2px;max-width:31rem;
}.seal-shield{width:2.5rem;height:3rem;flex:none;fill:var(--accent)}.seal-shield .tick{stroke:var(--tile)}.seal-text b{display:block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em;
font-size:.95rem;line-height:1.1;color:var(--accent)}.seal-text > span{display:block;font-size:.82rem;line-height:1.35;color:var(--ink-soft);margin-top:.22rem}
@media (max-width:560px){.seal-badge{gap:.65rem;padding:.6rem .8rem}.seal-shield{width:2rem;height:2.4rem}.seal-text b{font-size:.85rem}.seal-text > span{font-size:.76rem}
}
/* ---------- review rating: 4.5 stars plus the number ---------- */
.rating{display:inline-flex;align-items:center;gap:.42rem}.rating .stars{display:inline-block;letter-spacing:0;
background-image:linear-gradient(90deg,var(--accent) var(--pct,90%),#D9D0B6 var(--pct,90%));
-webkit-background-clip:text;background-clip:text;color:transparent}.rating-num{font-family:var(--ui);font-size:.82rem;letter-spacing:.04em;color:var(--ink)}
/* ---------- guarantee seal, tightened ---------- */
.seal-badge{gap:.6rem;padding:.5rem .8rem;max-width:26rem;border-width:2px}.seal-shield{width:1.7rem;height:2rem}.seal-text b{font-size:.78rem;letter-spacing:.05em}.seal-text > span{font-size:.74rem;line-height:1.3;margin-top:.15rem}
@media (max-width:560px){.seal-badge{gap:.5rem;padding:.45rem .65rem}.seal-shield{width:1.45rem;height:1.75rem}.seal-text b{font-size:.72rem}.seal-text > span{font-size:.7rem}
}.guarantee-inline{padding:.55rem .7rem;gap:.6rem}.guarantee-inline h3{font-size:.82rem}.guarantee-inline p{font-size:.75rem;line-height:1.3}
/* ==================================================================
Round four corrections. Appended last so these win the cascade.
================================================================== */
/* 1. Decorative rules removed. The hairline that ran out to the right of
every eyebrow label,and the divider rules between blocks,carried no
information. White space separates the sections instead. */
.eyebrow::after,.band.ink .eyebrow::after{content:none;display:none}.eyebrow{gap:0}.buy-block{border-top:0;padding-top:0}.paybar{border-top:0}
/* 2. Proof pill reduced to a compact badge: smaller faces, tighter padding,
less height. Same size on all three sites. */
.rating-num{font-size:.75rem}
/* 3. The lock line and the card marks are one row, on one baseline, rather
than two centered blocks at different heights. */
.paybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:.5rem .8rem;margin-top:1.6rem;padding-top:1.1rem;text-align:center}.paybar .lockline,.lockline{margin:0;max-width:none;display:inline-flex;align-items:center;gap:.3rem}.paybar .pays,.pays{margin:0;align-items:center}
/* 4. The guarantee seal sits clear of the hero buttons at every width.
It was flush against them, so a wrapped button clipped it. */
/* HERO PAIR ONLY. The hero text column is 477px and the two buttons at the
page's 2.2rem side padding need 271 + 234 + 16 = 521px,so they wrapped to
two rows at every desktop width. 1.55rem takes 11.7px off each side,which
is 46.8px off the pair - 458px,inside the column with the 16px gap intact.
Height is untouched (min-height stays 74px) and neither label wraps.
Scoped to .top-cta: every other .btn on the page keeps 2.2rem. */
.hero .btn-row.top-cta .btn{padding-inline:1.24rem}.hero .btn-row.top-cta{margin-bottom:0}.assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1.15rem;position:static;clear:both}.seal-badge{position:static;float:none;transform:none;margin:0}
@media (max-width:768px){.hero .btn-row.top-cta{margin-top:1.2rem}.assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1rem}
}
/* ------------------------------------------------------------------
Review card details, made unconditional.
The partial-fill stars were drawn with background-clip:text over a
gradient and color:transparent. When the clip does not take effect
the glyphs stay transparent and the card loses its stars entirely,
which is what happened. The solid color is now the base state and
the gradient only replaces it where the clip is actually supported.
------------------------------------------------------------------ */
.rating{display:inline-flex;align-items:center;gap:.42rem;visibility:visible}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.rating .stars,.review .stars{
background-image:linear-gradient(90deg,var(--star-gold,var(--accent)) var(--pct,95%),var(--star-dim,#D9D0B6) var(--pct,95%));
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent}
}.rating-num{font-size:.78rem;color:var(--ink);opacity:1;white-space:nowrap}.review .rating-num{color:var(--ink)}.review .review-head{display:flex;align-items:center;gap:.85rem}.review .review-head > div{min-width:0;display:flex;flex-direction:column;gap:.12rem}.review b{display:block;white-space:normal}
/* ==================================================================
One spacing scale for every section break, every page, all three
sites. Sections were running 130-266px of dead space between them:
band padding stacked on top of the previous block's own bottom
margin, plus body/footer padding still reserving room for a sticky
bar that no longer exists.
================================================================== */
:root{--sec:2.2rem;--sec-in:1.15rem}
@media (max-width:768px){:root{--sec:1.4rem;--sec-in:.85rem}}
/* Every section break is the same value, top and bottom. */
.band{padding-top:var(--sec);padding-bottom:var(--sec)}
/* Stacked margins: the section padding is the gap, so the first and
last child inside a section do not add their own on top of it. */
.band > .wrap > *:last-child,.band > *:last-child,.band > .wrap > *:last-child > *:last-child{margin-bottom:0}.band > .wrap > *:first-child,.band > *:first-child{margin-top:0}
/* Inside sections: heading to body, block to block. */
.section-head{margin-bottom:var(--sec-in)}.band h2{margin-bottom:.5rem}.band .eyebrow{margin-bottom:.6rem}.offer-top{margin-bottom:var(--sec-in)}.paybar{margin-top:var(--sec-in);padding-top:var(--sec-in)}.inside-cta{margin-top:var(--sec-in)}.tally{margin-bottom:var(--sec-in)}.buy-block{margin-top:var(--sec-in);padding-top:var(--sec-in)}.assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1rem}
/* Room reserved for sticky bars that are no longer on the page. */
body{padding-bottom:0}.foot{padding:1.6rem 0}
/* The legal and thank-you pages do not use .band; they wrap content in
main / .doc / .sec. Same scale applied there so every page on the site
breaks its sections at the same distance. */
.doc,.sec,.sec-downloads{padding-top:var(--sec);padding-bottom:var(--sec)}body > main{padding-top:var(--sec);padding-bottom:var(--sec)}.doc h2,.sec h2,main > .wrap > h2{margin-top:var(--sec-in);margin-bottom:.4rem}.doc > *:first-child,.sec > *:first-child,main > .wrap > *:first-child{margin-top:0}.doc > *:last-child,.sec > *:last-child,main > .wrap > *:last-child{margin-bottom:0}.updated{margin-top:var(--sec-in)}.card{margin-bottom:var(--sec-in)}
/* ==================================================================
Narrow-phone fit. Nothing crosses a container edge at 430, 390
or 360: long titles wrap instead of running into the price, the
card marks wrap instead of pushing off the right edge, and the
three-column stats bar steps down rather than clipping.
================================================================== */
@media (max-width:480px){.card,.quote,.bump-wrap,.seal-badge,.paybar,.pay-head,.card *,.quote *,.bump-wrap *,.seal-badge *,.review *,.stack li *{overflow-wrap:anywhere}
/* Product box: title wraps, price and save chip keep their own line. */
.sum-row{flex-wrap:wrap;align-items:flex-start;gap:.45rem}.sum-name{min-width:0;flex:1 1 55%}.sum-right{flex:0 0 auto;margin-left:auto;text-align:right;white-space:nowrap}
/* One time offer: text stays inside the dashed border. */
.bump-wrap{overflow:hidden}.bump-wrap p,.bump-wrap h3,.bump-wrap b{max-width:100%}
/* Card marks wrap onto a second row rather than off the edge. */
.paybar{flex-wrap:wrap}.pays{flex-wrap:wrap;max-width:100%;justify-content:center}
/* One compact reassurance row. */
.pay-head{flex-wrap:wrap;justify-content:center;text-align:center;
gap:.2rem .55rem;font-size:.7rem}
/* Front page: stats bar, order rows, pill, review cards. */
.statsbar .hs{padding:0 .3rem}.statsbar .hs b{font-size:1.15rem}.statsbar .hs span{font-size:.5rem;letter-spacing:.05em}.stack li{grid-template-columns:1rem minmax(0,1fr)}.stack li > em{grid-column:2;grid-row:2;justify-self:end}.review,.review p,.review b{max-width:100%}
}
@media (max-width:380px){.statsbar .hs b{font-size:1rem}.statsbar .hs span{font-size:.46rem}.pay-head{font-size:.66rem;gap:.18rem .45rem}.paybar .lockline{font-size:.52rem}.pay-label{font-size:.52rem}.pay-mark svg{height:.72rem}.pay-mark{padding:.08rem .24rem}
}
/* ==================================================================
Stats bar on a phone. The three columns were `1fr`, which floors at
the min-content width of the longest value ("5 generations",
"53 years"), so the third stat ran outside its cell and off the
card. minmax(0,1fr) lets the cells shrink and the value wrap.
================================================================== */
@media (max-width:560px){.statsbar .hero-stats,.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.hs{min-width:0;padding:0 .3rem;text-align:center}.hs b{font-size:1.05rem;line-height:1.1;overflow-wrap:break-word;hyphens:none;display:block}.hs span{font-size:.48rem;letter-spacing:.04em;line-height:1.25;display:block;overflow-wrap:break-word}
}
@media (max-width:400px){.hs b{font-size:.95rem}.hs span{font-size:.44rem}.hs{padding:0 .22rem}
}
/* The value now fits its cell instead of being hyphen-free broken
mid-word ("generati / ons"): words stay whole and the type steps
down at each width. */
@media (max-width:560px){.hs b{font-size:.92rem;overflow-wrap:normal;word-break:normal;line-height:1.15}.hs span{overflow-wrap:normal;word-break:normal}
}
@media (max-width:400px){.hs b{font-size:.82rem}.hs span{font-size:.42rem}
}
/* ==================================================================
The hero guarantee goes back to a pill. It had grown into a full
bordered block with a heading and a paragraph; this is the compact
rounded badge it was before, sitting the same way the proof pill
below it does. It is now the only guarantee on the page.
================================================================== */
.seal-badge{
display:inline-flex;align-items:center;gap:.55rem;
padding:.34rem .95rem .34rem .55rem;
border:1px solid var(--line);border-radius:999px;
background:var(--tile);box-shadow:none;max-width:100%;
align-self:flex-start}.seal-badge .seal-shield{width:1.1rem;height:1.35rem;flex:none}.seal-badge .seal-text{
display:flex;flex-wrap:wrap;align-items:baseline;gap:.05rem .4rem;min-width:0}.seal-badge b{
font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.3}.seal-badge .seal-text > span{
display:inline;font-size:.8rem;line-height:1.35;margin:0}
@media (max-width:560px){.seal-badge{padding:.3rem .8rem .3rem .5rem;gap:.45rem}.seal-badge b{font-size:.66rem}.seal-badge .seal-text > span{font-size:.76rem}
}
/* The offer-block guarantee is the same pill as the hero one, sitting
under "Pay once - Yours forever" and above the proof pill, centered
with the rest of that column. */
.offer-seal{margin:.7rem auto 0;align-self:center}.offer-detail .offer-seal,.buy-left .offer-seal{align-self:center}
@media (max-width:560px){.offer-seal{margin-top:.55rem}}
/* ------------------------------------------------------------------
Offer column, tidied.
- "Pay once - Yours forever" was left aligned in a centered column.
- The proof pill and the guarantee pill were sized for a tight
phone layout and read as small on a desktop offer block.
- The support line now sits after the reviews, so it takes its own
centered rule rather than hanging off the pay row.
------------------------------------------------------------------ */
.offer-detail .trustline,.trustline{
text-align:center;display:block;width:100%;margin-left:auto;margin-right:auto}.offer-seal{padding:.44rem 1.05rem .44rem .6rem;gap:.6rem}.offer-seal .seal-shield{width:1.3rem;height:1.6rem}.offer-seal b{font-size:.78rem}.offer-seal .seal-text > span{font-size:.86rem}.helpbar{text-align:center;max-width:56ch;margin:1.1rem auto 0;font-size:.88rem}
@media (max-width:560px){.offer-seal b{font-size:.74rem}.offer-seal .seal-text > span{font-size:.8rem}
}
/* ==================================================================
Matching the Frank Miller build.
================================================================== */
/* Bridge line between the h1 and the lede: reading serif,sized between
the two,muted so it supports the headline rather than competing. */
.hero-sub{
font-family:"Lora",Georgia,serif;font-weight:400;
font-size:1.35rem;line-height:1.45;color:#5A564E;
max-width:44ch;margin:.55rem 0 0;
}.hero-sub + .best{margin-top:1.05rem}
@media (max-width:900px){.hero-sub{font-size:1.2rem;max-width:none;margin-top:.5rem}}
@media (max-width:560px){.hero-sub{font-size:1.1rem;line-height:1.42}.hero-sub + .best{margin-top:.9rem}}
/* The savings figure is one unit and must never break across lines. */
.hero h1 .money{white-space:nowrap}
/* Total value row aligned to the price column. The item rows are a three
column grid (tick / name / price); the total was two columns, so its
figure sat out of line with the prices above it. */
.stack li.total{
grid-template-columns:1.1rem minmax(0,1fr) auto;
column-gap:.75rem;align-items:baseline;
}.stack li.total > span{grid-column:1 / 3}.stack li.total > em{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap}.stack li.total em s{opacity:.55;margin-right:.4rem;font-weight:400}
@media (max-width:560px){.stack li.total{grid-template-columns:1rem minmax(0,1fr) auto}.stack li.total > em{grid-column:3;grid-row:1}
}
/* Hero photo takes the larger share of the row, as on Frank. */
@media (min-width:821px){.hero-in{grid-template-columns:46fr 54fr;column-gap:2.4rem}.hero-media{max-width:none;justify-self:stretch}
}
/* ==================================================================
OFFER BOX - ELIAS YODER'S STRUCTURE
Ported from eliasyoder.com's .single-product / .includes block: the
eyebrow, headline and lede in the copy column beside the cover, a
ruled price row, a labeled value list closing on a shaded "you pay
today" band, a full-width button and a small-caps foot line.
Every measurement below is his, unchanged - 18px price-row padding,
16px gap, 3.2rem price, .24em/.22em/.2em tracking on the three
small-caps lines, 14px list padding, the 6% tint on the today band,
20px 34px on the button. Only the palette moves:
his --oxblood -> --accent
his --rule -> --line
his --serif -> --serif (Lora, already loaded)
his --mono -> --ui (Oswald, our small-caps face)
================================================================== */
/* Not .eyebrow: that class is a flex row with a rule drawn by ::after,and
Elias's tag is a plain line of tracked small caps with nothing beside it. */
/* Scoped to .offer-detail: an existing `.offer-detail > p{font-size:1rem}`
outranks a bare class on these four, and silently flattened all three
small-caps lines and the lede to body size. */
.offer-detail .ep-tag{
display:block;font-family:var(--ui);font-size:.74rem;letter-spacing:.24em;
text-transform:uppercase;color:var(--accent);font-weight:600;
margin:0 0 18px;max-width:none;
}.offer-detail .ep-tag::after{content:none}.offer-detail .offer-h{
font-family:var(--display);font-size:1.9rem;line-height:1.14;
margin:0 0 10px;letter-spacing:.01em;
}.offer-detail .ep-lede{font-size:1.06rem;color:var(--ink-soft);line-height:1.55;margin:0 0 22px;max-width:none}.ep-price-row{
display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
padding:18px 0;margin-bottom:26px;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}/* THE PRICE IS SET IN PX, AND THAT IS THE POINT.
Elias declares .single-product__price at 3.2rem on a 16px root, so his $47
renders 51.2px at 1920, 1440 and 390 alike - his root never moves and he has
no responsive step on it. Our root is 18px, dropping to 17px under 560px, so
the same 3.2rem rendered 57.6px on desktop and a 2.6rem override took it to
44.2px on a phone. Neither figure was his. A rem value cannot land 51.2px at
both of our roots, so this is stated in px and the 2.6rem step below is gone.
Weight, style and letterspacing were already his: 500, italic on the em, and
normal tracking.
FAMILY IS A DELIBERATE DIVERGENCE, decided 2026-08-28. His is Fraunces with
font-variation-settings "SOFT" 100, "opsz" 144; ours stays Lora because
--serif is the palette A decision that governs every other serif on the page,
and Fraunces would be a whole family loaded for one element. Recorded in
HANDOFF. The struck price is deliberately NOT touched - his is mono, ours is
not, and that was left alone on the same call. */
.ep-price{font-family:var(--serif);font-size:51.2px;font-weight:500;color:var(--ink);line-height:1}.ep-price em{font-style:italic;color:var(--accent)}.ep-strike{font-family:var(--ui);font-size:.94rem;color:var(--ink-mute);text-decoration:line-through}.offer-detail .ep-tag-inline{margin:0}.offer-detail .ep-head{
font-family:var(--ui);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--accent);font-weight:700;margin:28px 0 14px;max-width:none;
}.ep-includes{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid var(--line)}.ep-includes li{
display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
padding:14px 0;border-bottom:1px solid var(--line);
}.ep-name{flex:1;font-family:var(--serif);font-size:.98rem;line-height:1.45;color:var(--ink);min-width:0}.ep-name b{font-weight:700;color:var(--ink)}.ep-value{
font-family:var(--ui);font-size:.9rem;color:var(--ink-mute);font-weight:500;
white-space:nowrap;padding-top:2px;
}.ep-includes .ep-total{padding-top:18px;padding-bottom:18px}.ep-includes .ep-total .ep-value b{color:var(--ink);font-size:1.05rem}
/* His today band bleeds 14px past the list on both sides and drops its
bottom rule, so the list ends on a block of color rather than a line. */
.ep-includes .ep-today{
background-color:color-mix(in srgb,var(--accent) 6%,transparent);
margin:0 -14px;padding:18px 14px;border-bottom:none;
}
@supports not (background-color:color-mix(in srgb,red 6%,transparent)){.ep-includes .ep-today{background-color:var(--deep)}
}.ep-includes .ep-today .ep-value b{
font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--accent);
}
/* ---------- the CTA, Elias's button ----------
Read off eliasyoder.com's stylesheet, not off a screenshot. His offer CTA
is .btn.btn--ox.btn--big - NO .btn--block. That was the error: .btn--block
is display:flex/width:100%/justify-content:center and it is used elsewhere
on his page, not here. His offer button is an inline-flex box sized to its
own label and sitting left in the copy column. Measured on his live page it
is 318px wide at 1920, 1440 and 390 alike, with max-width:none and its left
edge flush with the column. Composed:
.btn inline-flex, align-items center, gap 10px, 16px 28px,
var(--mono) .78rem / .22em / uppercase / 500,
1.5px solid border, no border-radius, white-space nowrap,
transition background .25s, color .25s, transform .15s,
box-shadow .25s
.btn--big padding 20px 34px, font-size .84rem
.btn--ox ground and border = --oxblood
hover ground and border -> --oxblood-dk, translateY(-1px),
box-shadow 0 8px 18px -6px rgba(oxblood,.5)
::after content "→", var(--serif), 1.1rem, letter-spacing 0,
transition transform .25s
hover::after translateX(4px)
THERE IS NO :active RULE ANYWHERE IN HIS STYLESHEET - checked, zero
matches. The press state is the hover transform releasing. Nothing was
invented to fill the gap.
Palette A: --oxblood -> --accent, --oxblood-dk -> --accent-dark,
his --paper -> our --paper, --mono -> --ui, --serif -> --serif. The
4px radius is ours and is kept; his button is square, so this is the
one line to change if you want it exact.
min-height:0 matters: our own .btn carries min-height:74px, which would
override his padding-derived height. */
/* ==================================================================
THE PRIMARY BUTTON IS BACK ON ITS OWN BOX, 2026-09-10 (THIRD SET).
For one set every primary CTA carried otisgranger.com's `.cta` - a 10px
radius, 19px/48px of padding, 23px at weight 700 and a soft outer glow.
That was applied without being asked for and it is reverted here whole:
the rule below is the file's own, byte for byte as it stood before, and
the four things that only existed to carry the bigger box are gone with
it:
.ep-btn's 640 and 420 steps (his two responsive steps)
.xi .ep-btn's 19px / 16px overrides (the modal card is 394px wide)
.xi-box's 24px padding under 420 (that box against a 274px label)
.ep-btn--jump's white-space handling (see the jump link below)
So the radius is `.btn`'s inherited 4px again, the label is 13.44px at
.22em in --ui at weight 500, the padding is 20px/34px, the arrow is
17.6px on a 28.512px line box, and the hover is a 1px lift under
`0 8px 18px -6px` of the accent at 50%. Every figure in it is Elias
Yoder's `.btn.btn--big`, which is where this button came from and where
the comments below explain it from.
ONE THING FROM THE OTIS SET STAYS, because it was asked for separately:
04's jump link still sits in his `.lookcta` slot. It uses this button.
================================================================== */
.ep-btn-row{margin-top:0;display:block}.ep-btn{
display:inline-flex;width:auto;max-width:none;align-items:center;gap:10px;
min-height:0;padding:20px 34px;
/* 13.44px, NOT .84rem. His .btn--big is .84rem on a 16px root, which
renders 13.44px at every width he has. Ours resolved against 18px
(17px under 560) and rendered 15.12px / 14.28px, which is where the
whole last-call button mismatch came from - measured at eleven widths
from 360 to 1024, his 13.44 flat against our 14.28/15.12 and his
70.5px box against our 72.86/74.66. The padding either side was
already px and already his. .22em tracking is left alone and now
resolves to his 2.9568px on its own.
THIS RULE IS SHARED by the offer CTA, the last-call button and the
modal button - all three are the same port of his .btn.btn--big and
all three carried the same leak, so it is fixed here rather than
scoped to one of them. Decided 2026-08-28. */
font-family:var(--ui);font-size:13.44px;letter-spacing:.22em;
text-transform:uppercase;font-weight:500;white-space:nowrap;
border:1.5px solid var(--accent);background:var(--accent);color:var(--paper);
position:relative;
transition:background .25s ease,color .25s ease,transform .15s ease,box-shadow .25s ease;
}.ep-btn::after{
content:"→"; /* his glyph, written literally - a CSS
escape got mangled on the way in and rendered U+0011 followed by "92" */
/* 17.6px for the same reason as the label above: his .btn::after is
1.1rem on a 16px root. The arrow is the tallest thing in the line box,
so it - not the label - is what was holding the box off his 70.5px. */
font-family:var(--serif);font-size:17.6px;letter-spacing:0;
/* 28.512px, which is HIS RENDERED line box, not a number of ours.
Neither stylesheet declares a line-height here - his arrow inherits
`normal` from Fraunces and lands 28.512px, ours inherits `normal` from
Lora and lands 29.04px. The arrow is the tallest thing in the button,
so that 0.528px of face metrics was the whole of the residual box
difference: his 70.5px against our 71.02px, at every width. Every
declared value already matched; only the faces differ, and the family
divergence is deliberate. Stating his rendered leading closes it. */
line-height:28.512px;
transition:transform .25s ease;
}.ep-btn:hover{
background:var(--accent-dark);border-color:var(--accent-dark);color:var(--paper);
transform:translateY(-1px);
box-shadow:0 8px 18px -6px color-mix(in srgb,var(--accent) 50%,transparent);
}
@supports not (box-shadow:0 0 0 color-mix(in srgb,red 50%,transparent)){.ep-btn:hover{box-shadow:0 8px 18px -6px rgba(122,86,0,.5)}
}.ep-btn:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.ep-btn,.ep-btn::after{transition:none}.ep-btn:hover{transform:none}.ep-btn:hover::after{transform:none}
}.offer-detail .ep-foot{
margin:14px 0 0;font-family:var(--ui);font-size:.7rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-mute);text-align:center;max-width:none;
}
/* The trust block under the button, in a fixed order: guarantee, proof,
payment. The paybar used to sit outside the grid at the foot of the
whole section; it belongs with the other two. */
.offer-detail .paybar{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
@media (max-width:900px){.offer-detail .offer-h{font-size:1.55rem}.ep-includes li{gap:12px}.offer-detail .ep-tag{letter-spacing:.18em}
}
/* THE FOUR BENEFIT BULLETS - GONE FROM THE PAGE, 2026-09-10 (fifth set).
They were the last four bullets of the deleted "$27 once. No
subscription. Yours forever." block and they moved four times: into 04,
into 06's Otis card, into 06's repeat of 01, back into 04. They are
deleted from both sections now, with their four highlights, because they
never had a home - 06 carries the labelled stack and 04 carries the page
images, and neither needed a third summary of the same four facts.
NEITHER RULE SURVIVES. `.wyg-checks{max-width:52ch;margin:1.1rem 0 0}`
was the original, and it is worth recording that it never governed
anything: `#inside .wyg-checks` at 0,1,1 beat it from the reference
build onwards, which is why re-adding the base rule in the fourth
set put a 2rem margin in the file that computed to 0px on the page. The
specific rule is tombstoned at section 6 below.
`.hero-points` STAYS. The hero's own three bullets still use it, and the
green disc and knocked-out tick are its drawing. */
/* The proof pill in the testimonials section, above the first card. It was in
the offer box until the sixth revision set, where .offer-detail centered it;
here it had to center itself. The pill itself is gone and so is its rule;
this comment is the record of where it sat. */
/* Nothing between the small-caps line and the payment row now that the
guarantee box is gone,so the paybar loses the rule it used to need. */
.offer-detail .paybar{margin-top:.9rem;padding-top:0;border-top:0}
/* ==================================================================
THE COVER - ELIAS YODER'S PROPORTIONS
His .single-product__cover-frame is width:100% with max-width:480px and
14px of padding, sitting in the first grid track; .book-cover-real fills
what is left. Measured on his live page:
frame image % of grid
1920 / 1440 469.2px 441.2px 39.9 / 37.5
390 320px 292px 92.5 / 84.4
Ported as the same two rules. Our first track is 516.6px against his
469.2 - our .offer-grid is 1fr 1fr where his is 0.85fr 1.15fr - so the
480px cap governs on desktop and the image renders 452px. The grid ratio
was not changed: that would move the whole offer box and was not asked
for. His 320px mobile cap lands in our 960px breakpoint, his own is 980px.
NO PAPER MAT. His frame carries background:var(--paper) and a page
shadow behind the cover. Geometry only was ported; the mat is a visual
addition nobody asked for.
================================================================== */
.offer-shot{width:100%;max-width:480px;padding:14px;margin-inline:auto}.offer-shot img{width:100%;max-width:none}
/* His hover, copied from his stylesheet:
transition: transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease
:hover transform: translateY(-6px)
THERE IS NO SCALE IN IT - checked, his hover is a lift and a shadow swap
and nothing else. Nothing was invented to fill the gap.
The shadow is a filter, not a box-shadow, and that is deliberate: it
follows the art's alpha rather than its box. The cover was RGBA with
transparent corners when this was written; the 2026-09-06 art is a flat
opaque 2:3 rectangle, so drop-shadow now traces that rectangle - correct
either way, and it stays a filter so swapping the art back is free.
Same durations and the same easing curve regardless. */
.offer-shot img{
transition:transform .45s cubic-bezier(.2,.8,.3,1),filter .4s ease;
}.offer-shot img:hover{
transform:translateY(-6px);
filter:drop-shadow(0 40px 70px rgba(34,39,31,.5)) drop-shadow(0 14px 24px rgba(34,39,31,.35));
}
@media (prefers-reduced-motion:reduce){.offer-shot img{transition:none}.offer-shot img:hover{transform:none}
}
@media (max-width:960px){.offer-shot{max-width:320px}
}
/* ==================================================================
LAST CALL
Geometry, spacing and type scale are eliasyoder.com's .order block,
value for value. Color is not: this takes our own footer ground so
the two close the page as one dark field.
================================================================== */
.lastcall{
position:relative;overflow:hidden;
/* the footer's ground exactly - no lift, no boundary */
background:var(--ink-deep);
color:var(--paper);
text-align:center;
padding:130px 0 110px;
}
/* The type sits above the bloom. There is nothing to scrim any more - the
ground under the headline is plain --ink-deep, so the 13.47 : 1 the
wordmark and the headline measure is the real figure, not a figure that
depends on a gradient landing in the right place. */
.lc-in{position:relative;z-index:2}/* 1.16rem / .24em / uppercase / 500,margin-bottom 40px.
THIS IS HIS RENDERED SIZE,NOT HIS .eyebrow DECLARATION. His .eyebrow rule
says .74rem with 18px below it,but the eyebrow is a inside .order and
his own `.order p{font-size:1.16rem;margin:0 auto 40px}` outranks it at
0,2,0 against 0,1,0. Measured on his live page at 1440 and 390 it renders
1.16rem with 40px below, so that is what "match his type scale exactly"
means here. If you want his .eyebrow declaration instead it is .74rem and
18px - one line.
THE SIZE IS NOW IN PX, 2026-08-28. 1.16rem was his DECLARATION, not his
rendered size: his root is 16px so it lands 18.56px, ours is 18px (17px
under 560px) so the same rem landed 20.88px on desktop and 19.72px at 390.
Measured against his live .order at all three widths, his eyebrow is
18.56px flat. Stated in px for the same reason .ep-price and #ledger h2
are. The .24em tracking is left alone and now resolves to his 4.4544px on
its own. .lastcall h2 already matched - 70.4 / 70.4 / 41.6 against his
70.4 / 70.4 / 41.6 - and is untouched.
"In the accent" has to mean --accent-lift on a ground this dark: --accent
is 1.92 : 1 here and unreadable. --accent-lift is the palette's own answer
to the accent on a dark band, and lands at 8.88 : 1. */
.lc-eyebrow{
display:block;margin:0 auto 40px;max-width:none;
font-family:var(--ui);font-size:18.56px;font-weight:500;
letter-spacing:.24em;text-transform:uppercase;
color:var(--accent-lift);
}.lc-eyebrow::after{content:none}.lastcall h2{
color:var(--paper);
/* his clamp(2.6rem, 5vw, 4.4rem) at a 16px root = these pixels */
font-size:clamp(41.6px,5vw,70.4px);
max-width:18ch;margin:0 auto 20px;
}.lc-sub{
font-size:18.56px;line-height:1.55;
max-width:52ch;margin:0 auto 40px;
/* cream at 82% over the ground = #CBCDC7, 9.47 : 1 */
color:rgba(243,238,226,.82);
}
/* THE INVERTED BUTTON.
A modifier on the existing .ep-btn, not a second component: the padding,
type, tracking, arrow and the whole hover animation come from there
untouched. His .order .btn is paper fill / ink label / paper border, and
his hover goes to the FULL oxblood, not the dark step the button uses
higher up his page - so ours goes to --accent, not --accent-dark.
label on fill 13.47 : 1
hover label 7.02 : 1 */
.ep-btn--invert{
background:var(--paper);color:var(--ink-deep);border-color:var(--paper);
}.ep-btn--invert:hover{
background:var(--accent);color:var(--paper);border-color:var(--accent);
box-shadow:0 8px 18px -6px rgba(0,0,0,.45);
}
/* NO MOBILE OVERRIDE HERE, on purpose. Measured on his live page at 390, his
.order keeps 130px / 110px of padding and its 1.16rem paragraph unchanged -
he does not shrink this block on a phone, so neither does this one. The
headline is the only thing that moves, and it moves through his own clamp. */
/* The only separation between the Last Call field and the footer. His thin
rule sits above his nav row; ours sits on top of the footer. Cream at 10%
is the hairline this build already uses on dark grounds - the urgency
strip's border-bottom is the same value at the same weight. */
.foot{border-top:1px solid rgba(243,238,226,.10)}
/* ==================================================================
HERO HEADLINE AND DROP CAP - ELIAS YODER'S TREATMENTS
================================================================== */
/* His .hero__headline em is `font-style:italic; color:var(--oxblood)` - the
second half of the line goes italic and takes the accent,at essentially
the same weight as the roman half (his roman is wght 400,his italic 380).
Ours holds 700 for both,which needs a real bold italic: Libre Baskerville
serves one at ital,wght@1,700 and it is a distinct file on gstatic,not a
synthesised oblique - checked. --accent on paper is 7.02 : 1. */
.hero h1.long em{
font-style:italic;
/* 400, with the roman half. It was 700 when the headline was; the parity
revision took the whole line to his weight and the italic follows it, so
this is still one weight across the line and still a real cut face -
Libre Baskerville ital,wght@1,400 - and not a synthesised oblique. */
font-weight:400;
color:var(--accent);
}
/* His .hero__sub::first-letter, value for value:
font-family var(--serif) | weight 500 | italic
font-size 3.4em | line-height .85 | float left
margin 8px 12px -2px 0 | color his accent
Ours takes --serif (Lora, which has a real 500 and a real 500 italic - both
added to the font request for this) and --accent. On .best at 1.06rem the
3.4em cap renders about 65px. */
.best::first-letter{
font-family:var(--serif);
font-weight:500;
font-style:italic;
font-size:3.4em;
line-height:.85;
float:left;
margin:8px 12px -2px 0;
color:var(--accent);
}
/* ==================================================================
HERO BUTTONS - ELIAS'S TREATMENT
His base .btn, which is what his own hero pair uses (btn / btn--ghost,
no --big): uppercase, letter-spacing .22em, font-size .78rem, gap 10px,
and the ::after arrow in var(--serif) at 1.1rem with letter-spacing 0.
Ours takes all of that. The fills stay ours - accent and ghost - and the
labels stay ours.
PADDING IS NOT HIS, and it had to move again. His is 16px 28px. Ours was
1.55rem, set earlier so the pair fits the 477px hero column side by side.
His tracking and the new arrow add ~16px to each button, which pushed the
pair to 492px and broke that fit, so the side padding comes down to 1.24rem
- the pair is 470px in a 477px column. The earlier decision stands; only
the number that serves it moved.
================================================================== */
.hero .btn-row.top-cta .btn{
display:inline-flex;align-items:center;gap:10px;
font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
white-space:nowrap;
}.hero .btn-row.top-cta .btn::after{
content:"\2192";
/* 17.6px - the third arrow on the page, converted with the other two so
every arrow is one size. His base .btn::after is 1.1rem at his 16px
root, so this is his rendered value too. It makes the hero pair ~4px
narrower, which only adds slack to the 470-in-477px column fit noted
above. */
font-family:var(--serif);font-size:17.6px;letter-spacing:0;
transition:transform .25s ease;
}.hero .btn-row.top-cta .btn:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.hero .btn-row.top-cta .btn::after{transition:none}.hero .btn-row.top-cta .btn:hover::after{transform:none}
}
/* ==================================================================
THE COVER FRAME - ELIAS'S TREATMENT
His .single-product__cover-frame is a light mat, not a border: no border
property at all, no radius, 14px of padding, background var(--paper) and
box-shadow var(--shadow-page) = 0 22px 60px -10px of his ink at 25%. The
cover inside carries border-radius 2px. On his own --paper page the mat is
the same color as the ground, so it is the shadow that lifts it - and the
same is true here, which is why this is a faithful port rather than a
different effect.
The cover's own shadow stays a filter: drop-shadow, not his box-shadow,
so it follows the art's alpha and not its box. The current art is a flat
opaque 2:3 rectangle, so the two coincide today. The hover is untouched.
================================================================== */
.offer-shot{
background:var(--paper);
box-shadow:0 22px 60px -10px rgba(0,0,0,.25);
}.offer-shot img{border-radius:2px}
/* ==================================================================
MONEY
Every dollar figure on the page in one face. His $47 is
.single-product__price - var(--serif), weight 500 - with its em set
font-style:italic, and he uses var(--serif) at 500 for every other figure
on the page too (.hero__stat-num, .book__price, .math__col figures,
.math__total .num, .tier__price em, .includes__today).
FONT ONLY. Family and style, nothing else: no size, no color, no weight.
Every figure keeps whatever its context gives it, and the .highlight spans
the figures sit inside keep their color and their 700.
Our --serif is Lora, and Lora's 400 and 500 italics are both real cuts
already in the font request - they were added for the drop cap. Nothing is
synthesised and nothing new had to be requested.
NOT .money: that class already exists in this stylesheet, inherited from
the source build, and it carries color:var(--free-green). Reusing it would
have turned every figure on the page green.
================================================================== */
.fig{font-family:var(--serif);font-style:italic}
/* ==================================================================
THE ARITHMETIC - ELIAS YODER'S TWO-COLUMN BLOCK
His .math__grid / .math__col / .math__total / .math__note / .math__delta,
value for value:
grid two columns, gap 56px; one column and gap 48px on his
mobile breakpoint
h3 1.6rem, margin-bottom 28px, flex baseline, gap 16px,
padding-bottom 18px, border-bottom 1px solid
h3 span .7rem / .24em / uppercase, in his gold
li flex space-between, baseline, padding 14px 0,
border-bottom 1px DASHED, font-size 1.02rem
li figure var(--serif), weight 500, 1.15rem
total margin-top 24px, padding 22px 0 4px, border-top 2px solid
total .lab .78rem / .22em / uppercase
total .num var(--serif), 2.6rem, weight 500; the "after" column's
number italic, the "before" column's not
note margin-top 18px, .7rem / .1em
delta max-width 760px, margin 48px auto 0, padding 22px 28px,
border-left 4px solid the accent, var(--serif) 1.05rem,
centered
His block is light-on-dark; ours keeps its tile band, so the mapping is the
one this build has used throughout: his --paper -> --ink, --paper-deep ->
--ink-soft, --ink-mid -> --line-strong, --gold / --gold-soft -> --accent.
His .math__delta names background:var(--paper-2), a token that is never
defined anywhere in his stylesheet - so it renders transparent on his own
page, and it is transparent here. The 4px bar is the whole treatment.
The section container widens from .narrow to .wrap: two columns will not
sit in a 680px measure. The head keeps .narrow so the reading line does
not blow out with it.
================================================================== */
.ledger-head{margin-inline:0}.mx-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:2.2rem}.mx-col h3{
font-size:25.6px;color:var(--ink);
margin:0 0 28px;padding-bottom:18px;
/* No flex-wrap: his h3 has none, so a long title wraps inside its own flex
item and the small-caps unit stays beside it on the first line. With wrap
on, the unit dropped to a line of its own and made the head a step taller
than it needs to be. */
display:flex;align-items:baseline;gap:16px;
border-bottom:1px solid var(--line-strong);
}/* "One trip, two travelers" - his .math__col h3 span, value for value:
--mono (our --ui), .7rem = 11.2px rendered, .24em, uppercase. His IS
uppercase, so this one keeps its caps; the head beside it does not. */
.mx-col h3 span{
font-family:var(--mono);font-size:11.2px;letter-spacing:.24em;
text-transform:uppercase;color:var(--accent);font-weight:600;
line-height:1.04;
}.mx-col ul{list-style:none;padding:0;margin:0}.mx-col li{
display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
padding:14px 0;border-bottom:1px dashed var(--line-strong);
/* his 1.02rem at a 16px root = 16.32px rendered; 26.4384 / 16.32 = 1.62 */
font-size:16.32px;line-height:1.62;color:var(--ink-soft);
}.mx-col li span:last-child{
/* his 1.15rem = 18.4px rendered; 29.808 / 18.4 = 1.62 */
font-family:var(--serif);font-weight:500;font-size:18.4px;line-height:1.62;
color:var(--ink);white-space:nowrap;
}.mx-total{
margin-top:24px;padding:22px 0 4px;
display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
border-top:2px solid var(--accent);
}.mx-total .lab{
/* his .math__total .lab: --mono, .78rem = 12.48px rendered, .22em, and
weight 400 - it inherits his body weight, it is not bolded. Ours ran
Oswald 600 at 14.04px, which read heavier and narrower than his. */
font-family:var(--mono);font-size:12.48px;letter-spacing:.22em;
text-transform:uppercase;color:var(--accent);font-weight:400;
line-height:1.62;
}.mx-total .num{
/* his 2.6rem = 41.6px rendered, line-height 1 */
font-family:var(--serif);font-size:41.6px;line-height:1;font-weight:500;
white-space:nowrap;
}.mx-col--before .mx-total .num{color:var(--ink-mute)}.mx-col--after .mx-total .num{color:var(--accent);font-style:italic}/* ============================================================
HIS HEADING TREATMENT, on the four heads that were asked for.
His global rule is h1,h2,h3,h4{ font-family:var(--serif); font-weight:600;
line-height:1.04; letter-spacing:-.022em } and NO text-transform - his
heads are a serif in mixed case with the tracking pulled tight.
Ours is the opposite by default: --display (Oswald), uppercase, line-height
1.12, letter-spacing +.02em. That is why these read nothing like his even
when the pixel size matched - the size was right and the face, the case and
the tracking were all wrong.
Scoped to these heads only. The rest of the page keeps its own heading
treatment; only the four that were named move. Our colours stay.
Sizes are in px for the same reason everything else in this block is: they
are HIS rendered sizes at his 16px root, and a rem here resolves against 18.
============================================================ */
#ledger h2,
.mx-col h3,
.lastcall h2{
font-family:var(--serif);
font-weight:600;
text-transform:none;
line-height:1.04;
}
/* His h1..h4 run -.022em and his h3 rule pulls it back to -.015em. Split
here rather than set in .mx-col h3 above: this block is later in the file,
so a value there would lose to this one at equal specificity. */
#ledger h2,.lastcall h2{letter-spacing:-.022em}
.mx-col h3{letter-spacing:-.015em}
/* HIS .math__note, measured off his page and copied value for value. The
small caps this used to run are gone: his is mixed case, and the ask was
for his treatment, not a variation on it.
font-size is in px on purpose, the same reason #ledger h2 is: 11.2px is his
RENDERED size (.7rem at his 16px root), and .7rem here would be 12.6px
against our 18. "Same size as his" means the same pixels. */
.mx-note{
margin:18px 0 11.2px;max-width:none;
font-family:var(--mono);font-size:11.2px;font-weight:400;letter-spacing:.1em;
text-transform:none;line-height:1.62;text-align:start;
}/* HIS .math__delta, value for value. His paragraph is 400 and the figure
inside it is a at 700; our line IS that strong end to end, with no
trailing sentence, so it carries the 700.
16.8px, again in px: it is his rendered size (1.05rem at his 16px root).
26.04 / 16.8 = 1.55 leading, centered, 760 wide, 48 above, 22/28 padding,
and the 4px left rule - all his. */
.mx-delta{
/* HIS BOX IS TWO LINES TALL AND OURS IS ONE, so his 4px rule ran 96px and
ours ran 70. His second line is the trailing sentence after the ,
which we do not have and cannot invent - copy is final. The rule is given
his length directly instead: 2 x 26.04 leading + 22 + 22 padding = 96.08.
Block, not flex: flex turns the text node and the into
separate anonymous items and eats the space between them, which printed
"date:$3,782". It also has to stay block to sit the line at the TOP of the
box, which is where his sits - his second line is the one that is
invisible, not his first. */
min-height:96px;box-sizing:border-box;
max-width:760px;margin:48px auto 0;padding:22px 28px;
border-left:4px solid var(--accent);
font-family:var(--serif);font-size:16.8px;font-weight:700;line-height:1.55;
color:var(--ink);text-align:center;
}
/* HIS ONLY MOBILE OVERRIDE FOR THIS BLOCK, and it is the whole of it:
`@media (max-width:1040px){.math__grid{grid-template-columns:1fr;gap:48px} }`.
Checked across his whole stylesheet - he does not shrink the heads or the
figures on a phone, so neither does this. The 1040px is his too; our
container is 1080px against his 1240px, so ours would have held two columns
a little longer, but the breakpoint is part of what was asked for. */
@media (max-width:1040px){.mx-grid{grid-template-columns:1fr;gap:48px}
}
/* ==================================================================
THE ARITHMETIC ON A DARK FIELD - HIS COLOR RELATIONSHIPS
His block is the one dark band in the middle of his page, and every
element in it is recoloured for that ground. Measured off his live page:
section #15110B his --ink, full bleed
h2 / h3 / row figure --paper brightest
lede / row label --paper-deep one step down
eyebrow / unit / total label / "good" number --gold-soft his accent
total rule --gold the accent, heavier
hairlines --ink-mid
note --ink-mute dimmest
"bad" number #E8C5A6 its own warm, brighter than the body
Mapped to ours on --ink-deep, the same token the Last Call and the
footer use. One accent (teal) plus one alert red on the net line, which
is his structure:
brightest --paper 13.47 : 1 AAA
muted body cream at 82% 9.47 : 1 AAA
accent --accent-lift 8.88 : 1 AAA
note cream at 68% 6.93 : 1 AA
net line --signal-lift lifted to 4.75 4.75 : 1 AA
hairlines cream at 16% non-text
TWO OF HIS OWN VALUES WERE NOT COPIED, because they fail on his own
page: his note is #786B53 on #15110B, 3.61 : 1, and his delta text is
#15110B on #15110B, 1.0 : 1 - invisible. Ours are 6.93 and 4.75.
The "bad" number takes --paper rather than a fourth hue: his #E8C5A6 is
a warm that has no equivalent here, and the brightest tone does the same
job of making the costly column's total the loudest thing in it.
================================================================== */
#ledger{background:var(--ink-deep);border-block:0;color:var(--paper)}#ledger .eyebrow{color:var(--accent-lift)}#ledger .eyebrow::after{background:rgba(243,238,226,.16)}/* His .math h2 is clamp(2.2rem, 4.6vw, 3.8rem) at a 16px root, which is
clamp(35.2px, 4.6vw, 60.8px) rendered. Written in px here on purpose: the
target is his RENDERED size, not his rem, and px is immune to our root
being 18 to his 16. Only this section's h2 - every other h2 on the page
keeps the page's 2.15rem.
Line-height comes with it. His is 1.04 against our heading default of 1.12;
at 60px that is a 5px difference per line and the head would otherwise sit
loose against his. */
#ledger h2{
color:var(--paper);
font-size:clamp(35.2px,4.6vw,60.8px);
margin:0 0 18px; /* his .sec__title h2 */
}
/* The eyebrow and the lede, the last two in the block that were still on our
own values. His .eyebrow is --mono .74rem weight 500 at .24em; ours ran
--ui (Oswald) weight 700 at .2em, which is the same "condensed and heavy
against his even monospace" difference the note had. His .sec__lede is
1.15rem = 18.4px rendered.
The hairline after the eyebrow is OURS and stays: his eyebrow has none, but
every other eyebrow on this page does, and dropping it here only would make
this section the odd one out. */
#ledger .eyebrow{
font-family:var(--mono);font-size:11.84px;font-weight:500;
letter-spacing:.24em;line-height:1.62;margin:0 0 18px;
}
.ledger-head p:not(.eyebrow){font-size:18.4px;line-height:1.62}
.ledger-head p{color:rgba(243,238,226,.82)}.mx-col h3{color:var(--paper);border-bottom-color:rgba(243,238,226,.16)}.mx-col h3 span{color:var(--accent-lift)}.mx-col li{color:rgba(243,238,226,.82);border-bottom-color:rgba(243,238,226,.16)}.mx-col li span:last-child{color:var(--paper)}.mx-total{border-top-color:var(--accent-lift)}.mx-total .lab{color:var(--accent-lift)}.mx-col--before .mx-total .num{color:var(--paper)}.mx-col--after .mx-total .num{color:var(--accent-lift)}/* HIS note grey, hue and saturation untouched, lightness raised until it
clears AA on OUR ground. His #786B53 is hsl(38.9, 18.2%, 39.8%); it reads
3.61 on his near-black and only 2.91 on this teal, which is lighter. Same
hue, same saturation, lightness 39.8% -> 51.4% = #9A8A6C, 4.50 : 1. It is
his warm taupe, not a neutral: the cream-at-68% this replaces was a
different colour family and read far brighter than his. */
.mx-note{color:#9A8A6C}
/* HIS OXBLOOD, LITERALLY. --oxblood: #7A1F0E off his :root, on the text and
on the 4px rule, exactly as .math__delta strong and .math__delta's
border-left carry it.
Asked for by name after a lifted version was rejected. It is 1.47 : 1 on
this ground and 1.82 : 1 on his own, so it is quiet on both pages - see the
--paper-2 note in HANDOFF for the panel that was meant to sit behind it.
SUPERSEDED 2026-09-06, AND THE EARLIER DECISION IS RECORDED, NOT DROPPED.
That decision was made when this line was a cost caption. The parity
revision changed what it says: it now carries the page's headline net
figure, the same $3,000 the hero, the offer H2 and the last call all
repeat. A figure that load-bearing cannot sit at 1.47 : 1.
THE LIFT IS THE ONE .mx-note ALREADY USES, twenty lines up: same hue, same
saturation, lightness raised until it clears AA on OUR ground and no
further. --signal-lift is #E8584F = hsl(3.5, 76.9%, 61%) and reads 4.29 : 1
here, which is under the bar; lightness 61% -> 64% gives #EA655D at
4.71 : 1. Same hue, same saturation, same signal family - that token at the
step this ground needs, not a different colour.
GEOMETRY IS UNTOUCHED. Only the two colour declarations move; the 4px rule,
the 760 max-width, the 96px min-height, the padding and the centring are
all still his. */
.mx-delta{color:var(--signal-lift);border-left-color:var(--signal-lift)}
/* ==================================================================
THE REFERENCE BUILD REVISION, PORTED WITH THE REST OF THIS FILE.
Everything below this line is lifted off the reference build component
by component, with only this shop's own tokens substituted. Where a
figure is a colour it is recomputed against this palette and the
ratio is written beside it; where a figure is geometry it is the
reference build's own and is not re-derived.
IT SITS AT THE FOOT OF THE FILE ON PURPOSE. The two overrides that
have to win - `#ledger .sec-num` and the ledger's own head colours -
are scoped to a section whose dark block is declared 600 lines up,
and sitting last is what makes them win without touching it.
================================================================== */
/* ---------- 1. THE SECTION HEAD AND ITS NUMERAL ----------
SIX NUMBERED SECTIONS: 01 the offer, 02 how it works, 03 the honest
math, 04 look inside, 05 reader results, 06 questions. Last Call is
unnumbered.
THE HEAD, HIS VALUES, read off the reference build and confirmed against
a live render at 1920 and 390. That build's root is 18px and its
figures are written in px - the same convention .ep-price and
.hero-mark in this file already follow:
h2 font-size:38px (30px at the 640 step); margin-bottom:12px;
text-align:center. The serif at weight 700, line-height 1.6 -
so --serif here, and NOT the global uppercase Oswald.
.lead font-size:20px (18px at 640); text-align:center;
max-width:60ch; margin:0 auto; colour --ink-soft.
THE NUMBER LINE has one type and two placements.
The type is 14px --mono, weight 500, .24em, uppercase, on the accent,
and it is the same in both. --mono is this page's own face for a small
tracked mark and has been since the arithmetic block was built.
IN 02 AND 04 it is a centred block line above the H2, which is what
those two sections were asked for.
IN 01, 03, 05 AND 06 it is its own line directly above the eyebrow,
sharing the eyebrow's left edge - not hung in the margin. The reference
build tried the margin at Elias Yoder's own 168px offset (his
.sec__head is `grid-template-columns:120px 1fr; gap:48px`) and it read
as a figure floating off on its own rather than as part of the head it
numbers, so the stacked shape is the only shape.
Contrast: --accent on --paper 9.18 : 1, on --tile 9.75 : 1. 03 sits on
the arithmetic's dark ground where --accent measures 1.47 : 1 and
disappears, so it takes --accent-lift-red at 4.70 : 1 - see the token's
own note in styles.css. */
.sec-head{text-align:center;margin:0 auto var(--sec-in);max-width:none}
.sec-num{
display:block;max-width:none;
font-family:var(--mono);font-weight:500;font-size:14px;line-height:1.6;
letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
margin:0 0 10px;
}
.sec-head .sec-num{text-align:center}
.ledger-head,.section-head,#faq > .wrap,.offer-detail{position:relative}
.sec-head h2{
font-family:var(--serif);font-weight:700;text-transform:none;
font-size:38px;line-height:1.6;letter-spacing:normal;
text-align:center;color:var(--ink);margin:0 0 12px;max-width:none;
}
.sec-head .lead{
font-size:20px;line-height:1.6;text-align:center;color:var(--ink-soft);
max-width:60ch;margin:0 auto;
}
/* The arithmetic is the one head on a dark ground, and it is the one
section the accent change deliberately did not touch. Its numeral takes
the hue-preserving lift; its ground, its totals and its net line are
untouched. */
#ledger .sec-num{color:var(--accent-lift-red)}
@media (max-width:640px){
.sec-head h2{font-size:30px}
.sec-head .lead{font-size:18px}
}
/* ---------- 2. THE HERO PULL-QUOTE - REMOVED ----------
`.hero-media{position:relative}`, `.hero-pull`, `.hero-pull small` and the
three media queries that went with them - the .18em byline step under
420px, the 1.6rem top margin at 820 and the left axis inside the centred
mobile column - were deleted on instruction.
What they styled: the book's own field-note device, a 2px --line-strong
hairline down the left edge, a 20px indent, 16.64px serif italic, and a
10.56px --mono byline at .22em beneath it. Ported off the reference build,
whose own geometry those two figures are, and checked against a real
plate: flyer-preview-1-bumped.png sets its "THE OFFICIAL SOURCE" aside as
a 3px #F6C335 rule with the first ink at x108.
`position:relative` on .hero-media went with them and is not kept: it
existed only so an absolutely-positioned card could hang off it, and no
card was ever positioned there once the device was the hairline. The four
other rules that select .hero-media set the grid area, the column cap and
the mobile width, and none of them needs a containing block - checked,
not assumed.
Recorded rather than silently dropped, the way this build records its
other removals. If it ever comes back, the measurement is in HANDOFF 23.3
and the markup tombstone is in index.html. */
/* ---------- 3. HOW IT WORKS - HIS .step ----------
A filled circle beside the text, not a numeral over a hairline. His
declarations, verbatim:
.steps display:flex; gap:26px; justify-content:center;
flex-wrap:wrap; max-width:940px; margin:0 auto
(column, gap 16px, at his 640 step)
.step flex:1 1 250px; max-width:300px; display:flex; gap:14px;
align-items:flex-start; text-align:left
.step>b flex:none; 42x42; border-radius:50%;
background:linear-gradient(180deg,#d99a45,#B5772C);
color:#fff; font-size:19px; flex-centred;
box-shadow:0 4px 12px rgba(181,119,44,.3)
.st font-size:19px; font-weight:bold; margin-bottom:3px
.sd font-size:16px; line-height:1.5; colour --ink2
.hownote text-align:center; margin-top:30px; font-size:19px
HIS GRADIENT IS TWO STEPS OF HIS OWN GOLD, light to dark. Ours is the
two accent tokens this palette already has, in the same order and the
same direction - no colour is invented for it. White on --accent is
10.35 : 1 and on --accent-dark 13.71 : 1, so the numeral clears AAA
against either end of the sweep. The shadow follows the accent too. */
.steps{
display:flex;gap:26px;justify-content:center;flex-wrap:wrap;
max-width:940px;margin:0 auto;text-align:left;
}
.step{
flex:1 1 250px;max-width:300px;display:flex;gap:14px;
align-items:flex-start;text-align:left;
}
.step > b{
flex:none;width:42px;height:42px;border-radius:50%;
background:linear-gradient(180deg,var(--accent),var(--accent-dark));
color:#fff;font-family:var(--serif);font-size:19px;font-weight:700;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 12px rgba(122,86,0,.3);
}
.step .st{
font-family:var(--serif);font-size:19px;font-weight:700;
text-transform:none;line-height:1.6;color:var(--ink);margin:0 0 3px;
}
.step .sd{font-size:16px;line-height:1.5;color:var(--ink-soft);max-width:none}
.hownote{
text-align:center;margin:30px 0 0;font-size:19px;color:var(--ink);
max-width:none;
}
@media (max-width:640px){
.steps{flex-direction:column;align-items:center;gap:16px}
.step{max-width:100%;flex:0 0 auto}
}
/* ---------- 4. THE PAGE STRIP - HIS .scroller / .pgfig ----------
THE IMAGE IS THE CARD. No mat, no tile ground, no page shadow behind a
frame: a 1px rule, an 8px radius and a drop shadow, straight on the
image. His declarations, verbatim:
.scroller display:flex; gap:18px; overflow-x:auto;
padding:6px 4px 18px; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch
.pgfig flex:none; width:300px; scroll-snap-align:center
@media(max-width:640px){ width:86vw }
.pgfig img width:100%; height:auto; border:1px solid var(--line);
border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.16);
display:block; background:#fff
.zoom position:absolute; right:9px; bottom:9px;
background:rgba(0,0,0,.72); color:#fff; font-size:12px;
letter-spacing:.04em; padding:6px 10px; border-radius:20px
.pgcap font-size:15px; margin-top:10px; line-height:1.45
.scrollhint text-align:center; font-size:15px; margin-top:4px
TWO CONVERSIONS, both the reference build's standing ones. His
aspect-ratio is 662/1000, his own plate shape; ours is 320/414, which
is US Letter and is what our plates are - 1100 x 1424 measured, ratio
0.7725 against Letter's 0.7727. And his .zoom is Arial at 12px - he
has no mono anywhere - where this page's face for a small tracked mark
is --mono. The pill's ground is his near-black at his opacity, recast
onto this page's own ink: rgba(14,31,23,.78), which is --ink-deep.
Over the plates' own cream, sampled at #F9F4EC in the bottom-right
corner of all five, that composites to #3F5658, and white on it
measures 7.83 : 1.
TOUCH-HANDLING, AND THIS IS THE FIX THAT MATTERS ON A PHONE. The tile
is a , so without these two declarations a horizontal drag
starting on a tile is claimed by the button and the strip does not
move - the swipe is swallowed by the lightbox trigger. touch-action:
pan-x hands the horizontal axis to the scroller before the button sees
it, and overscroll-behavior-x:contain stops a drag past the last tile
turning into a page-level back-swipe. The lightbox still opens on a
tap, because the binding is a click and a drag is not one. */
.pages{margin:0}
.scroller{
display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;
padding:6px 4px 18px;margin:0;list-style:none;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
touch-action:pan-x;
}
.pgfig{flex:none;width:300px;scroll-snap-align:center;margin:0}
.page-btn{
display:block;width:100%;position:relative;padding:0;margin:0;
border:0;background:none;cursor:zoom-in;font:inherit;color:inherit;
transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.page-btn:hover{transform:translateY(-4px)}
.pgfig img{
display:block;width:100%;height:auto;aspect-ratio:320/414;
border:1px solid var(--line);border-radius:8px;background:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.zoom{
position:absolute;right:9px;bottom:9px;
background:rgba(14,31,23,.78);color:#fff;
font-family:var(--mono);font-size:12px;letter-spacing:.04em;
padding:6px 10px;border-radius:20px;
}
/* THE CAPTION HAS TO NAME ITS FACE. His inherits Georgia from ,
because his whole page is set in a serif; ours would inherit Atkinson
Hyperlegible, which is this page's body sans, and the caption would be
the one part of the card that was not his. */
.pgcap{
font-family:var(--serif);font-size:15px;line-height:1.45;color:var(--ink-soft);
margin:10px 0 0;max-width:none;text-align:left;
}
.scrollhint{
text-align:center;font-size:15px;color:var(--ink-soft);
margin:4px 0 var(--sec-in);max-width:none;
}
@media (max-width:640px){.pgfig{width:86vw}}
/* ---------- 5. THE LIGHTBOX ----------
The point of this control is to let someone read a page of the book, so
the page gets the viewport:
- the image takes the full height less a small margin, centred
- a CIRCULAR close button top right, 48px, which is a thumb target
rather than a mouse target
- a "pinch to zoom" hint top left, small and quiet, because the
affordance that matters on a phone is the one the browser gives you
and nothing else on the overlay says so
- the caption in --serif under the image, centred, at 56ch rather
than the image's width
Escape and a backdrop click both close it.
THE BACKDROP IS THIS PALETTE'S OWN. It is #06121F against this shop's
--ink-deep #0A1D31 - each channel at .600 / .621 / .633 of the token.
The reference build carries the same three factors on its own teal
--ink-deep and lands on #061A1D; the construction is shared and only the
ground under it differs. Paper on ours is 16.70 : 1, the caption at .92
is 14.15 : 1 and the hint at .62 is 6.83 : 1. */
.pv{
position:fixed;inset:0;z-index:9997;display:none;
align-items:center;justify-content:center;
padding:3.4rem 1rem 1rem;
background:rgba(14,31,23,.94);
}
.pv.open{display:flex}
.pv-fig{
margin:0;display:flex;flex-direction:column;align-items:center;
max-width:100%;max-height:100%;
}
.pv-fig picture{display:block;min-height:0}
.pv-fig img{
display:block;width:auto;height:auto;
max-width:100%;max-height:calc(100vh - 11rem);
background:var(--tile);
box-shadow:0 26px 70px -12px rgba(0,0,0,.6);
}
.pv-cap{
margin:1.1rem auto 0;max-width:56ch;
font-family:var(--serif);font-size:1rem;line-height:1.5;
color:rgba(243,238,226,.92);text-align:center;
}
.pv-hint{
position:absolute;top:1.1rem;left:1.1rem;
font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
text-transform:uppercase;color:rgba(243,238,226,.62);
}
.pv-close{
position:absolute;top:.9rem;right:.9rem;
width:48px;height:48px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(243,238,226,.12);border:1px solid rgba(243,238,226,.34);
color:var(--paper);font-family:var(--serif);font-size:1.7rem;line-height:1;
cursor:pointer;padding:0;
}
.pv-close:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.pv-close:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
@media (max-width:560px){
.pv{padding:3.4rem .6rem .6rem}
.pv-fig img{max-height:calc(100vh - 12rem)}
.pv-cap{font-size:.92rem;margin-top:.9rem}
}
/* ---------- 6. 04's CHECKMARKS - REMOVED, fifth set ----------
`#inside .wyg-checks{margin:2rem auto 0;max-width:46ch;text-align:left}`
stood here. It was the rule that actually governed the four checkmarks -
0,1,1, beating the bare class - and it set their centred column, their
46ch cap and their left-set text. The bullets are gone from the page and
so is it. Nothing else selected the class. */
/* ==================================================================
THE SET OF 2026-09-10 - 06 ORDER THE PLAYBOOK, 07 STILL DECIDING,
AND THE EXIT MODAL'S EMAIL CAPTURE.
Two new sections and one replaced line inside the modal. The shapes
are otisgranger.com's, read off his live stylesheet on 2026-09-10;
the colours are this shop's tokens and every ratio below was computed
by tools/contrast.py, not estimated.
THIS BLOCK SITS AT THE FOOT OF THE FILE for the same reason the
reference-build block above it does: the two rules that have to win
- `.shopbuy` over `.ep-btn`, and `.xi .xi-cap-go` over `.btn` - are
at equal specificity with declarations six hundred lines up, and
sitting last is what settles them without touching either.
================================================================== */
/* ---------- 1. 06's PRODUCT CARD - REMOVED, 2026-09-10 ----------
Otis Granger's `.shopcard` stood here for one set. 06 is now a repeat of
section 01 on Elias Yoder's closing offer block, at 01's own geometry,
so every rule that drew that card is gone: `.shopcard`, `.shoptop`,
`.shopcov`, `.shopinfo`, `.shopname`, `.shopprice`, `.shopbuy`,
`.shopfoot`, `.shopfoot span`, the middle-dot `::before` and the 640px
step that stacked the cover. Tombstoned rather than deleted quietly,
which is how this build records its removals.
What they were, for the record: a 980px box at a 20px radius under
`0 24px 70px rgba(0,0,0,.10)`, 38px of padding at a 38px gap, a 240px
cover tilted -1.5deg, a 33px serif product name, and a 1px-ruled centred
trust row at 13.5px.
`.shopbul` SURVIVED ONE MORE SET AND IS NOW GONE TOO. It capped the four
checkmarks while they sat in 06's copy column; they are back in 04 and
`.wyg-checks` caps them there, which is the rule they had before any of
this. Nothing selects `.shopbul` any more and no rule is orphaned by its
removal. */
/* ---------- 2. 09's FORM - HIS `.cform` ----------
His declarations, verbatim on the geometry:
.cform max-width:520px; margin:0 auto; text-align:left
label block; 15px; bold; margin:14px 0 5px
input, textarea 100%; padding:13px 14px; 16px; font-family:inherit;
1px border; 10px radius; box-sizing:border-box
textarea min-height:120px; resize:vertical
button width:100%; margin-top:14px
.cmsg 16px; margin-top:12px; min-height:1px
THE 16px ON THE FIELDS IS LOAD-BEARING. Under 16px, iOS Safari zooms
the viewport on focus and does not zoom back out, which is how a
form on a fixed-width page ends up scrolled sideways under an open
keyboard. His figure, and the same reason.
THE FIELD GROUND IS --paper ON A --tile BAND, so a field reads as a
well rather than as a shape the same colour as the band behind it.
His is #fff on his own #FBF6EE box, which is the same relationship.
Contrast, computed: label and typed value --ink on --paper 10.25 : 1;
the placeholder at --ink-mute on --paper 4.77 : 1, which clears AA at
this size; the error and success lines below both clear AA on --tile.
---------------------------------------------------------------- */
.cform{max-width:520px;margin:0 auto;text-align:left}
.cform label{
display:block;font-family:var(--body);font-size:15px;font-weight:700;
color:var(--ink);margin:14px 0 5px;
}
/* #fff, NOT --paper. His fields are white on his tinted box and ours were
--paper on --tile, which is a six-unit difference and reads as a border
rather than as somewhere to type. White is his, and against the band it
is the only ground on the page that says "type here" without a fill.
--ink on #fff is 11.42 : 1 and the placeholder at --ink-mute is 5.31 : 1;
both are in tools/contrast.py. */
.cform input,.cform textarea{
width:100%;padding:13px 14px;font-size:16px;font-family:inherit;
line-height:1.5;border:1px solid var(--line-strong);border-radius:10px;
box-sizing:border-box;background:#fff;color:var(--ink);
}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink-mute);opacity:1}
.cform textarea{min-height:120px;resize:vertical}
/* His button is full width with 14px above it. The fill and the type are
`.ep-btn` again, so the three buttons on the page that are not the
sticky bar all read as one control. */
/* HIS BUTTON'S SIZE, OUR FILL AND OUR FACE. Read off his `.cform button`:
width:100%; margin-top:14px; padding:15px; font-size:18px;
border-radius:10px; font-weight:bold; border:0
Taken: the width, the margin, the padding, the size, the radius and the
weight. NOT taken: `background:linear-gradient(180deg,var(--gold3),
var(--gold2))`, which is his gold, and `font-family:inherit`, which on
his page is a serif body face. This button keeps the oxblood and Oswald
every other button on the page carries.
IT IS DELIBERATELY BIGGER THAN `.ep-btn`, which is 13.44px. His form
button is 18px because it is the only control in a 520px column and has
no price beside it to share the line with; his inline CTAs are a
different size on his page too. */
.cform-go{
display:flex;width:100%;justify-content:center;margin-top:14px;
padding:15px;font-size:18px;border-radius:10px;font-weight:700;
/* SENTENCE CASE, same reasoning as the jump link above: .14em of tracking
was drawn for capitals and reads as gaps under lowercase. */
text-transform:none;letter-spacing:.04em;white-space:normal;
}
.cform-go::after{font-size:15px}
/* The inline result line, his `.cmsg`. It is a live region in the markup,
so it is announced without moving focus. min-height keeps the button
from stepping down the page when the first message arrives. */
.cmsg{
font-size:16px;line-height:1.5;margin:12px 0 0;min-height:1px;
max-width:none;color:var(--ink-soft);
}
.cmsg.is-ok{color:var(--free-green);font-weight:700}
.cmsg.is-bad{color:var(--signal-text);font-weight:700}
/* A disabled control has to LOOK disabled to a 65+ reader, not just
refuse the tap. This is the state the page is in until the owner's
Kit form id and public key land in landing.js.
--ink-soft, NOT --ink-mute. WCAG exempts a disabled control from the
contrast minimum, and this build does not take the exemption: on
--deep, --ink-mute measures 4.21 : 1 and fails the file's own zero-
failure rule, while --ink-soft measures 7.01 : 1. The greyed GROUND is
what says disabled here, not a greyed ink an older reader cannot
read - and after a successful send these same fields carry the address
the reader just typed, which they have to be able to check. */
.cform input:disabled,.cform textarea:disabled{background:var(--deep);color:var(--ink-soft)}
.cform-go:disabled,.xi-cap-go:disabled{opacity:.55;cursor:not-allowed}
.cform-go:disabled:hover,.xi-cap-go:disabled:hover{
background:var(--accent);border-color:var(--accent);transform:none;box-shadow:none;
}
/* ---------- 3. THE EXIT MODAL'S EMAIL CAPTURE ----------
It stands exactly where `.xi-small` stood - 16px under the primary
button, inside the same 480px card at the same 50/42/36 padding. The
card's geometry, its copy above the button and the trigger in
landing.js are all untouched.
THE ROW WRAPS RATHER THAN SHRINKS. At 1920 and 1440 the field and the
button sit side by side; inside the 390px card the button drops under
the field, because a 13.44px tracked label in a 110px box is not a
target this audience can hit.
THE MODAL SCROLLS NOW, AND THAT IS THE KEYBOARD FIX. `.xi` was
`align-items:center` on a fixed, non-scrolling flex box: with a
software keyboard open the viewport is about 400px tall, the card is
taller than that, and the overflow went off both ends with no way to
reach it - the "Send it to me" button among it. `align-items:flex-start`
plus `margin:auto` on the card centres it exactly as before whenever
there is room, and lets it scroll when there is not. Measured at 390
with the viewport cut to 390x400: card fully reachable, both buttons
scrollable into view, 0px horizontal overflow.
---------------------------------------------------------------- */
.xi{overflow-y:auto;align-items:flex-start}
.xi-box{margin:auto}
.xi .xi-cap{margin:16px 0 0;text-align:left}
/* His `.modal__small` type, kept: the line that replaced the link keeps
the line the link had. Sentence case rather than small caps, because
it is a sentence and the address field under it is not a label. */
.xi .xi-cap-copy{
font-size:.86rem;line-height:1.45;color:var(--ink-soft);
margin:0 0 10px;max-width:none;text-align:left;
}
.xi-cap-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
/* --tile, not --paper. The card itself is --paper, so a --paper field is
a rectangle drawn in the same colour as the thing behind it and reads
as a border rather than as somewhere to type. His own field is #fff on
his #FBF6EE card, which is this relationship. --ink on --tile is
10.87 : 1 and the placeholder at --ink-mute is 5.06 : 1. */
.xi-cap-row input{
flex:1 1 190px;min-width:0;
padding:13px 14px;font-size:16px;font-family:inherit;line-height:1.5;
border:1px solid var(--line-strong);border-radius:4px;
box-sizing:border-box;background:var(--tile);color:var(--ink);
}
.xi-cap-row input::placeholder{color:var(--ink-mute);opacity:1}
.xi-cap-row input:disabled{background:var(--deep);color:var(--ink-soft)}
/* The secondary control on the card, and it must not out-shout the
primary one above it: the same accent, at the modal's own small-caps
scale rather than the button's 13.44px/.22em. */
.xi-cap-go{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
min-height:0;padding:13px 18px;border-radius:4px;cursor:pointer;
font-family:var(--ui);font-size:12.6px;letter-spacing:.16em;
text-transform:uppercase;font-weight:600;white-space:nowrap;
border:1.5px solid var(--accent);background:var(--accent);color:var(--paper);
transition:background .16s ease,border-color .16s ease;
}
.xi-cap-go:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.xi .cmsg{font-size:.9rem;margin-top:10px}
@media (max-width:480px){
.xi-cap-go{flex:1 1 100%}
}
/* ==================================================================
THE SET OF 2026-09-10 (SECOND) - 04's JUMP LINK, 06 AS A REPEAT OF 01,
THE FOOTER LINE, AND THE MODAL'S TWO STEPS.
================================================================== */
/* ---------- 04's JUMP LINK - his `.lookcta` ----------
`text-align:center; margin-top:34px`, his figures. The button inside it
is `.ep-btn`, so it is the page's primary button and not a second one,
and at his 640 step it goes full width inside a 340px cap the way his
does. It carries a down arrow instead of `.ep-btn`'s right arrow,
because it points down the page. */
.lookcta{text-align:center;margin-top:34px}
/* NO CAP AT DESKTOP, which is his own arrangement: his `.cta` is an
inline-block that takes the width of its label, and the 340px cap lives
only in his 640 step.
`white-space:normal` IS THE ONE DEPARTURE FROM `.ep-btn`, and only here.
The shared button is `nowrap`, which is right for a five-word buy label
and wrong for a nine-word sentence: at 360 this label is 330px of
unbreakable line inside a 331px column, and one more character would put
it off the screen. Letting this one wrap inside his own 340px cap is
what he does with it too. Measured at 360: 0px horizontal overflow. */
.ep-btn--jump{justify-content:center;white-space:normal}
/* SENTENCE CASE, and the tracking comes down with it. `.ep-btn` sets
`text-transform:uppercase` at .22em, which is drawn for a five-word label
in capitals; the same .22em under lowercase letters opens the word spaces
wider than the letter spaces and the line stops reading as a sentence.
.06em is the smallest step that keeps the label looking set rather than
typed, and it is the only figure here that is not `.ep-btn`'s own. */
.ep-btn--jump{text-transform:none;letter-spacing:.06em;font-size:15px}
.ep-btn--jump::after{content:none}
@media (max-width:640px){
.lookcta .ep-btn--jump{display:flex;max-width:340px;margin-inline:auto}
}
/* ---------- 06's LEAD ----------
Directly under the H2, which the reference has in this block and 01 does
not: 01's `.ep-lede` sells the book and this one sells the delivery and
the guarantee.
ITS OWN CLASS, NOT A SECOND `.ep-lede`. The product paragraph below keeps
that class, so the two stay separately addressable and every check
written against "06's paragraph" still means the product paragraph. The
type is `.ep-lede`'s, figure for figure, because they are the same voice
at the same measure. */
.ep-intro{
font-size:1.06rem;color:var(--ink-soft);line-height:1.55;
margin:0 0 22px;max-width:none;
}
/* ---------- 06's SHORT PRODUCT BLOCK - REMOVED, sixth set ----------
`.ep-prod` set the product name in --serif at 1.12rem over an `.ep-lede`
paragraph, between the lead and the price row. Both are gone from 06: the
lead above says what arrives and on what terms, the five rows below name
the five things, and the block was the third description of the same
product inside one column.
`.ep-lede` IS NOT TOMBSTONED WITH IT - 01's own lede uses that rule and
is untouched. Only `.ep-prod` and its bold child came out. */
/* ---------- 06's SHORTENED VALUE ROWS ----------
BACK, fifth set. It was tombstoned for one set while 06's rows carried
01's full-length descriptions; they are one clause each again, which is
what the reference does in its closing block, so the name column no
longer wraps and the row can close up. `.ep-includes` still draws the
rules, the padding and the two shaded bands - this only tightens the
row. 01's own list is untouched. */
.ep-includes--short li{padding:11px 0}
.ep-includes--short .ep-name{align-self:center}
/* ---------- THE FOOTER LINE ----------
His footer opens on a bold question and a plain link, above the legal
text. Ours takes that position and that weight; the copy is ours and it
promises no reply. */
.foot-ask{
font-size:1rem;line-height:1.55;color:var(--foot-body,#9AA093);
margin-bottom:.9rem;
}
.foot-ask a{color:#D3D8CB;text-decoration:underline;text-underline-offset:.2em}
.foot-ask a:hover{color:#fff}
/* ---------- THE EXIT MODAL'S TWO STEPS ----------
ONE ASK AT A TIME. The card used to carry the buy button AND an email
field at once, which is two offers competing inside a 480px box. It now
shows one: the offer, with a plain text link under it that swaps the
card's body for the capture. The cover and the close button belong to
the card rather than to either step and stay put across the swap.
The buy CTA is GONE at the capture step, not dimmed and not scrolled
past - a reader who has just said "no thanks" is not being sold to
again in the same box.
`hidden` is the mechanism, and `.xi-step[hidden]` is declared explicitly
because `.xi-step` sets a display and would otherwise beat the
attribute's own UA rule. */
.xi-step{display:block}
.xi-step[hidden]{display:none}
/* The swap link. It is a , not an , because it performs an
action inside the dialog and navigates nowhere - an href="#" here would
put a junk entry in the reader's history on the way out of the page.
Styled as the plain text link the instruction asks for, at `.xi-small`'s
own size and position so it sits where his small line sat. */
.xi-swap{
display:inline;margin:0;padding:0;border:0;background:none;
font-family:var(--body);font-size:.92rem;line-height:1.5;
color:var(--ink-soft);text-decoration:underline;text-underline-offset:.22em;
text-decoration-thickness:.06em;cursor:pointer;
}
.xi-swap:hover{color:var(--accent)}
/* SCOPED TO .xi. `.xi p{margin:0 0 22px}` is 0,2,0 and beats a bare
class on this element, which is a - the same trap `.xi-eyebrow`
and `.xi-small` both hit before it. It has to keep his 16px, because
16px under the button is the position his `.modal__small` had and
the one thing about that slot this set did not change. */
.xi .xi-smallrow{margin:16px 0 0;max-width:none;text-align:center}
/* The capture step. One line of copy, one field, one button - the field
and the button stacked, both full width, because at the moment a reader
commits to typing an address there is nothing else on the card to
balance against. */
.xi-cap{margin:0;text-align:left}
.xi .xi-cap-copy{
font-size:1rem;line-height:1.5;color:var(--ink-soft);
margin:0 0 16px;max-width:none;text-align:center;
}
.xi-cap input{
display:block;width:100%;
padding:15px 16px;font-size:16px;font-family:inherit;line-height:1.5;
border:1px solid var(--line-strong);border-radius:10px;
box-sizing:border-box;background:var(--tile);color:var(--ink);
}
.xi-cap input::placeholder{color:var(--ink-mute);opacity:1}
.xi-cap input:disabled{background:var(--deep);color:var(--ink-soft)}
.xi-cap .ep-btn{margin-top:12px}
.xi .cmsg{font-size:1rem;margin-top:14px;text-align:center}
/* ------------------------------------------------------------------
03, THE MATH TABLE - the 2026-09-11 rebuild
Appended; nothing above this line was edited. Both columns carry real
dollar figures now, so two things the old four-row "$0" column never
needed have to exist: a row that reads as money IN, and one source
line under the whole table instead of one note per column.
`.mx-note` above is NOT deleted - it is simply unused from this set on.
The per-column notes went when the single source line arrived; the
rules stay so a later set can put them back without re-deriving the
greys that were measured for this dark ground.
------------------------------------------------------------------ */
/* The source line, in .mx-note's own measured grey on this ground - same
hue, same lift - centred under the grid rather than under a column. */
/* HIS `.math__note`, VALUE FOR VALUE - which is what item 12 asked for and
what the first version of this rule missed: it invented 12.8px in the body
face and broke five parity measurements that had been passing. His is mono
at 11.2px, .1em of tracking, an 18.14px line and 18px of top margin. The
colour is the lift `.mx-note` already measured for this dark ground.
ONLY THE ALIGNMENT IS OURS: his sits under each column, this sits under the
whole table, because the brief puts one source line there. */
.mx-src{
max-width:760px;margin:18px auto 0;text-align:center;
font-family:var(--mono);font-size:11.2px;letter-spacing:.1em;
line-height:18.14px;color:#9A8A6C;
}
/* ---- 03's NET LINE: ONE CALLOUT, 2026-09-11 (correction pass) ----
THE CAUSE, MEASURED. His `.math__delta` carries `background:var(--paper-2)`
- a visible panel - and ours carried none, so on the dark ground the only
thing that rendered was the 4px rule at the far left edge of an invisible
760px box, with the centred text stranded in the middle of it. It read as
a floating rule, which is exactly what it was.
Two changes and no more: the box gets a panel so the rule has something to
be attached to, and it shrinks to its own content so the rule sits beside
the line instead of beside a 760px void.
THE PANEL IS DARKER THAN THE GROUND, NOT LIGHTER. Lifting it to `--ink`
would have taken the net line's own red from 4.71 : 1 to 3.58 and failed
AA; 18% black over the ground gives a panel you can see AND lifts the text
to 5.14 : 1. Measured both ways before choosing. */
.mx-delta{
min-height:0;
width:fit-content;max-width:min(760px,100%);
background:#0B1913;
text-align:left;
}
@media (max-width:560px){
/* At 390 the line wraps, and a fit-content box would go ragged. Full width
with the text left against the rule keeps them one unit. */
.mx-delta{width:auto}
}
/* ------------------------------------------------------------------
TOMBSTONED 2026-09-12 (third set): `.mx-credit`, `.num-credit` and the
two fixes below them are NO LONGER USED BY ANY ELEMENT ON THE PAGE.
03 had one money-IN row - "Shareholder onboard credit - claimed, and paid
to you", rendering "- $250" - and it is gone. Measured against both
reference shops on 2026-09-12: Elias Yoder's six rows and Otis Granger's
three are each ONE COST SEEN TWICE, and neither carries a deduction row
or a $0 cell anywhere. The credit is the difference inside 03's
onboard-account row now: $1,400 on the left, $1,400 less the $250 on the
right. Same figure, same citation, same net.
THE RULES STAY, AND SO DO THEIR TWO NOTES, because each records a real
trap that cost a set to find - the `flex-direction:column` stacking and
the `justify-content` alignment. A later set that wants a deduction row
back gets both for nothing instead of re-deriving them.
Nothing selects these classes today; deleting them changes no pixel.
------------------------------------------------------------------ */
/* THE ONE ROW THAT IS MONEY IN. The minus sign alone is not enough on a
column of costs - a reader skimming figures reads every number as
another thing they paid - so the row also says "paid to you" in words,
and the figure takes the lift red rather than the column's paper. */
/* THE REAL CAUSE OF THE TWO-LINE FIGURE, and it was not `.fig`.
This rule used to target a WRAPPER span with `.num-credit` and a
`paid to you` label inside it, and it stacked them with
`flex-direction:column`. The correction pass moved "paid to you" into
the row's description and deleted that label - which left `.num-credit`
ITSELF as the `span:last-child` this rule matches. So the column
direction was being applied to the minus sign and the figure, and they
stacked. `white-space:nowrap` could not help: they were flex items on
separate flex lines, not wrapped text.
It is a row now, and the minus, a thin space and the figure are one
unbreakable unit. */
/* A FIGURE INSIDE A ROW LABEL TAKES THE LABEL'S FACE, 2026-09-12 (third set).
`.fig` is the page's money treatment - Lora, the serif - and it is right
for the figure CELL at the end of the row, which is what it was written
for. Row three also carries a figure inside its description ("$996 each"),
and there `.fig` switched face in the middle of a sentence: Lora inside a
line otherwise set in Atkinson Hyperlegible.
MEASURED AGAINST BOTH REFERENCES ON 2026-09-12, and neither does that.
Elias Yoder has no figure inside a label at all - his labels are plain
nouns and every number is in the cell. Otis Granger puts his figures at the
end of the row, but in Georgia, the same face as the label beside them.
Neither of them changes typeface inside one line.
So: scoped to the LABEL cell only. The figure cell is untouched and still
Lora, here and everywhere else on the page. Weight goes with it - the
label's own 400 rather than `.fig`'s 500 - because a bolder run in the same
face would reintroduce the break this removes. */
.mx-col li > span:first-child .fig{
font-family:var(--body);font-weight:inherit;
}
/* `justify-content:flex-end` IS THE ALIGNMENT FIX, 2026-09-12 (second set).
`.mx-col li > span:last-child` gives every figure cell `min-width:64px;
text-align:right`, and text-align is what pushes the other seven figures
against the column's right edge. THIS cell is `display:flex`, and
text-align does nothing to flex items - they pack at flex-start - so the
minus and the figure sat at the LEFT of a 64px box while every figure above
them sat at the right. It read as a typo in the table.
The row still has to be a row (see the note below), so the fix is to pack
it to the end rather than to stop it being flex. */
.mx-col li.mx-credit span:last-child{
display:flex;flex-direction:row;align-items:baseline;gap:0;
justify-content:flex-end;
flex:none;white-space:nowrap;
}
/* THE MINUS AND THE FIGURE ARE ONE ROW, and it is laid out rather than
left to text wrapping. `.fig` is display:flex site-wide, so inside this
span it was a block-level box on its own line and `white-space:nowrap`
could not help - the break was a box break, not a text break, and
switching .fig to inline-flex was not enough on its own. The span is a
flex row now, so the two can only sit side by side. `.fig` itself is
untouched everywhere else on the page. */
.num-credit{
display:inline-flex;flex-direction:row;align-items:baseline;gap:0;
white-space:nowrap;color:var(--accent-lift);
}
/* `.fig` is display:flex site-wide, which makes it a block-level box on its
own line inside an inline run. Scoped to this one figure; `.fig` itself is
untouched everywhere else. */
.num-credit .fig{display:inline-flex}
/* THE FIGURE COLUMN HOLDS ONE WIDTH IN BOTH COLUMNS. Without it the cell is
shrink-to-fit, the four widths differ per row, and the credit row - the
widest at 63px - was the one that decided whether the row grew a second
line. Measured widest single-line figure across both columns is 63px, so
the floor is 68px and every row clears it at every width. */
/* 64px IS THE WIDEST FIGURE, measured: the credit row's
"minus + thin space + $1,075" renders 64px on one line and nothing else in
either column is wider. The floor is exactly that and not a pixel more -
every pixel here is taken from the description beside it, and one
description needs all of them (see the gap note below). */
.mx-col li > span:last-child{min-width:64px;text-align:right;flex:none}
/* THE TWO COLUMNS ARE LEVELLED BY ROW HEIGHT, NOT BY WORD COUNT.
The figure floor costs the description beside it up to 26px, and one
description - the left "Bumped on the way home" row - needs those pixels
to stay on one line. Buying them back from the row gap was tried and is
the wrong fix: it wins by about three pixels, which is a rendering
accident waiting to happen the next time a word changes.
The rows are given ONE HEIGHT instead, taken from the tallest of the
eight. Whatever wraps and whatever does not, row n in the left column and
row n in the right column are the same height, their dashed rules land on
the same y, and the two totals share a baseline - by construction rather
than by luck.
SCOPED TO THE TWO-COLUMN LAYOUT. Below 1041px the grid collapses to one
column, the columns are stacked and there is nothing to level, so the
floor is lifted and every row is its natural height again. */
@media (min-width:1041px){
/* 96, WHERE THE REFERENCE BUILD SETS 85, AND THE DIFFERENCE IS THIS
TABLE'S OWN COPY RATHER THAN A PREFERENCE.
The floor only levels the rows if NO row is taller than it. Measured
with the floor lifted, at 1041 / 1200 / 1440 / 1920, the six rows here
run:
left 59.81 88.23 58.81 (1200 and up)
left 86.23 88.23 58.81 (1041, where the column is 450.9px)
right 86.23 84.84 84.84
The tallest is the Medicare row on the left at 88.23, so a floor of 85
left three rows above it and the two columns drifted by 1.2px on row two
and 2.0px on row three - which is exactly the defect the floor exists to
prevent, and it is what tools/runtime_rev.py caught.
96 clears the tallest by 7.8px, which is a whole line of slack at this
type size: a row would have to gain a line before the floor stopped
working, and the gate measures the skew at every width on every run.
SCOPED TO THE TWO-COLUMN LAYOUT, unchanged. Below 1041px the grid
collapses to one column, the columns are stacked and there is nothing to
level, so the floor is lifted and every row is its natural height. */
.mx-col li{min-height:96px}
}
/* (0,3,1). `.mx-col li span:last-child` is (0,2,2) and it matches THIS
span too - `.mx-in` is the last span child of the figure cell - so a
bare `.mx-in` lost the cascade and the label came out in Lora at
18.4px instead of mono at 10.4. Measured, not guessed. */
.mx-col li.mx-credit .mx-in{
font-family:var(--mono);font-size:10.4px;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent-lift);line-height:1;
}
@media (max-width:560px){
.mx-col li.mx-credit .mx-in{font-size:9.6px}
}
/* ------------------------------------------------------------------
THE 2026-09-11 REVISION PASS - 01's rule list, 05's quote cards,
the countdown label, and the eyebrow size.
Appended; nothing above this line was edited. Everything here is
later in the file than the rules it overrides, so it wins on order.
------------------------------------------------------------------ */
/* ---- 01's RULE LIST - DELETED 2026-09-11 (correction pass) ----
`.ep-rules`, `.ep-rules li`, `.ep-rules li:last-child`, `.ep-rules b` and
`.ep-rules-foot` stood here for one set. 01 carries its original prose
paragraph in `.ep-lede` again, so the rules had nothing left to style and
are cut rather than left dead - they were new in the previous set and
nothing else ever used them. */
/* ---- 05: ELIAS YODER'S CARD, OTIS GRANGER'S STARS AND CAPTION ----
The card shell stays Elias's - the mark hung off the top edge, the italic
body. The stars and the name line are Otis's, measured off his live page
on 2026-09-11 rather than eyeballed. */
.review{
border-top:1px solid var(--line);
padding:48px 1.4rem 1.4rem;
position:relative;
}
.review::before{
content:"\201C";
position:absolute;top:-10px;left:22px;
font-family:var(--display);font-style:italic;
font-size:6rem;line-height:.6;color:var(--accent);
background:var(--paper);padding:0 10px;
}
/* OTIS'S STARS, VALUE FOR VALUE, AND THE CAUSE OF THE OLD MISMATCH.
Measured on his page: Georgia 14px/700, #C9803F, 2px of tracking, and the
glyph is U+2605 and only U+2605.
THE FIFTH STAR USED TO RENDER LARGER because nothing here named a font.
The run inherited the body stack, which has no star glyph, so the browser
fell back PER GLYPH - and the hollow U+2606 on Doris's card could land in
a different fallback from the filled ones beside it. Naming Georgia fixes
the cause: measured, U+2605 and U+2606 are both 13.67 x 16 in Georgia, so
the empty star is exactly the size of the filled ones and takes the same
colour. One font, one size, one colour, five glyphs. */
/* `.starline`, NOT `.stars`. The first version of this rule reused `.stars`
and lost: the retired rating component still declares
`@supports(...){.rating .stars,.review .stars{...}}`, which clips a
gradient to the text and sets `color:transparent`, and at (0,2,0) it beat
a bare `.stars`. Measured result was 18.9px glyphs in transparent ink.
Those rules are dead - nothing carries `.rating` any more - but they are
above this line and are left where they are, so the new run takes a name
they cannot reach. */
.starline{
font-family:Georgia,"Times New Roman",serif;
font-size:14px;font-weight:700;
/* OTIS GRANGER'S STAR COLOUR, ONE STEP DOWN, AND IT IS A RECORDED
DEVIATION FROM A MEASURED VALUE.
His is #C9803F, read off his live page, and the reference build carries
it as a literal because it is his and not a palette slot. On this shop
it measures 2.73 : 1 on --paper and 2.93 : 1 on --tile, and both are
under the 3.0 that WCAG 1.4.11 asks of a non-text graphic - which is
what these are: `role="img"` with the score as their accessible name.
The reference's own stars are under it on its own grounds too.
Hue (28.3deg) and saturation (0.561) are held exactly and lightness
goes 0.518 -> 0.480, which is the FIRST step that clears 3.0 on both
grounds: 3.10 on --paper, 3.32 on --tile. It is his colour at the step
this audience needs, not a different colour.
ONE STAR COLOUR ON THE PAGE. 05's five cards and 07's rating line use
the same value; splitting them would put two oranges a shade apart in
one column. tools/contrast.py measures both grounds on every run. */
color:#BF7636;letter-spacing:2px;line-height:22.4px;
}
.review .starline{display:block;margin-bottom:4px}
/* His `.review__body` is italic; the headline above it keeps its own weight. */
.review p{font-style:italic}
/* OTIS'S CAPTION, `.who`, MEASURED: Georgia 13px/20.8px, weight 400, his
muted grey, sentence case, NO tracking, NO uppercase, 8px above it, and a
pale band behind it with no padding of its own.
HIS BAND IS #F3EBDD ON WHITE. Pasting that hex onto our #F4F1E9 paper
would leave a band you cannot see - his card ground is white and ours is
already warm - so the band is our own `--deep`, which sits the same step
below our paper as his does below his white. The only value not taken
literally, and it is the one that could not be.
HIS CAPTION HAS NO RULE ABOVE IT - measured border-top 0px - so the
hairline this build drew above the name line is gone. */
.who{
font-family:Georgia,"Times New Roman",serif;
font-size:13px;font-weight:400;line-height:20.8px;
/* HIS GREY IS #9A8B7A AND IT DOES NOT SURVIVE THE MOVE. On our band it
measures 2.59 : 1 - and on his own band it is 2.79, so he fails AA here
himself. Our --ink-mute is only 4.21 on the same band. --ink-soft is
7.01 : 1, keeps the line quiet against the body above it, and clears AA
for a 65+ reader. The SECOND of the two colours that could not be taken
literally; the band is the first. */
color:var(--ink-soft);text-transform:none;letter-spacing:normal;
background:var(--deep);
margin:8px 0 0;padding:0;border-top:0;
}
@media (max-width:620px){.review{padding:44px 1.2rem 1.2rem}.review::before{font-size:5rem;left:16px}}
/* ---- TOP BAR: ELIAS'S COUNTDOWN LABEL ----
His `.masthead__center span`: the label sits in the bar's own mono at
.72rem with .22em of tracking, uppercase, at 0.7 opacity, and the timer
beside it is the bold plate. Ours already had the plate; this is his
label treatment on the text beside it. */
.urg-ends{
font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
text-transform:uppercase;opacity:.7;
}
/* His timer tracks at .16em against the label's .22em. */
.urg-timer{letter-spacing:.16em}
@media (max-width:768px){.urg-ends{font-size:.66rem;letter-spacing:.18em}}
/* ---- GLOBAL: THE UPPERCASE EYEBROW LABELS ----
.62rem is 11.2px at this root and the brief calls for 14px with the
tracking pulled in. 14 / 18 = .778rem. The tracking goes .2em -> .14em:
at 14px that is 1.96px between letters against 2.24px before, so the
label gets bigger without getting wider than its rule. */
/* SET IN PX, NOT rem, AND WITH NO MOBILE STEP-DOWN. The brief is one
number - 12px becomes 14px - and a rem here would have rendered 14.0
on the 18px root and 13.2 on the 17px one, while a .72rem mobile step
put it back to 12.24 and undid the whole change on a phone.
TWO SELECTORS CARRY MORE THAN A CLASS and had to be answered in kind:
`#ledger .eyebrow` is an ID rule (1,1,0) that held 03's label at
11.84px, and the modal's own eyebrow sat at 13.32px. Both are raised
here rather than edited where they stand. */
.eyebrow,.lc-eyebrow,.xi-eyebrow,
#ledger .eyebrow,
#xi .xi-eyebrow{font-size:14px;letter-spacing:.14em}
/* ---- 06: OTIS'S RATING LINE, MEASURED ----
His is a star run followed by a at 13px Georgia in his muted grey
with 8px of left margin, inline, no tracking and no uppercase. The stars
are the same `.stars` the cards use, so there is one star treatment on the
page and not two. */
/* HIS TWO STAR TREATMENTS ARE NOT THE SAME, measured 2026-09-11 on his live
page. The previous pass measured one of them and used it for both.
review cards div.st Georgia 14px / 700 / lh 22.4px
buy box div.shopstars Georgia 18px / 400 / lh 28.8px
Colour and tracking (2px) are identical in both; the size, the weight and
the leading are not. 05's cards keep the 14/700 run - that is already his
card value - and this line takes the 18/400 one. THE COLOUR IS THE ONE
STEP DOWN FROM HIS, set once on `.starline` above and inherited here; the
reason is written out there.
His buy-box stars are a bare TEXT NODE inside `.shopstars`, so they take
that container's type; ours are a span, so the values are set on it. */
.ep-rating{margin:0 0 14px;max-width:none;line-height:28.8px}
.ep-rating .starline{
display:inline;
font-size:18px;font-weight:400;line-height:28.8px;
}
.ep-rating small{
font-family:Georgia,"Times New Roman",serif;
font-size:13px;font-weight:400;line-height:20.8px;
color:var(--ink-soft);letter-spacing:normal;text-transform:none;
margin-left:8px;
}
/* ---- HERO BODY TEXT: 18px FLOOR, 1.6 LEADING ----
The brief sets a floor, not a size, so the desktop figures that are
already above it are left alone and only the leading is brought to 1.6.
The 560px block is where the floor actually bites: html goes to 17px
there, so .hero-sub's 1.1rem rendered 18.7px at 1.42 and .best's own
step-down went under 18. Both are set in px here so the floor holds at
any root. */
/* A FLOOR RAISES, IT NEVER LOWERS. The first version of this block set
.best to a flat 18px and would have SHRUNK it from 19.08px on desktop,
which is the opposite of what a minimum means. Only values already
under the floor are touched.
.best 1.06rem = 19.08px desktop / 18.02px at the 17px root - over
.hero-sub 1.35rem desktop / 1.1rem = 18.7px at 560 - over
So only the LEADING moves, and only where it was under 1.6. */
.hero-sub{line-height:1.6}
.hero-points li{line-height:1.6}
@media (max-width:900px){.hero-sub{line-height:1.6}}
@media (max-width:560px){
/* 1.42 was the one figure under the floor on this page. */
.hero-sub{line-height:1.6}
.hero-points li{font-size:max(18px,1rem);line-height:1.6}
}
/* ==================================================================
06 ABOUT THE AUTHOR - NEW SECTION, 2026-09-12.
The reference shop has no persona and therefore no section here, so
nothing in this file governed any of it before this block. Everything
below is new; nothing above it was edited.
GEOMETRY IS ELIAS YODER'S SECTION V, MEASURED LIVE ON 2026-09-12 at
1920, 1440 and 390 - not estimated and not read off a screenshot:
.sec.about padding 110px 0 (76px 0 at 390)
.container max-width 1240, padding 0 32px (0 22px at 390)
.about__grid grid, 465.797px 630.203px, gap 80px, align start
one column at 390, gap 48px
.about__media 465.80 x 582.23 = 0.79995 : 1, radius 0
346.00 x 432.50 = 0.8 : 1 at 390
.about__frame 1px hairline, 14px OUTSIDE the media on every edge
(media x372 w465.8 / frame x358 w493.8)
.eyebrow mono 17.28px, .24em, uppercase, accent
h2 54.4px / 56.576px / 600 / -1.1968px, margin 0 0 22px
38.4px / 39.936px at 390
p 17.28px / 27.648px, margin 0 0 17.28px
blockquote padding 26px 30px, margin 32px 0,
border-left 3px, background one step below the band,
20.8px / 29.12px italic serif
.about__sig (his is a mono "watch the channel" link - NOT ported,
see the signature note below)
WHAT WAS TAKEN LITERALLY AND WHAT WAS TAKEN AS A RATIO, AND WHY THE
DIFFERENCE IS NOT ARBITRARY. His page and this one do not run at the same
type scale, so a pixel value only transfers where the two bases already
agree. Measured on his live page at 1920:
his page body 18.4px / 29.808px ours 18px / 29.7px (2% apart)
his SECTION h2 60.8px ours 38px (43% apart)
his ABOUT h2 54.4px = 0.8947 of his section h2
his ABOUT p 17.28px = 0.9391 of his page body
So the ABOUT H2 IS PORTED AS THE RATIO - 38 x 0.8947 = 34.5px - because
copying 54.4px would put a heading half again the size of every other
heading on this page. THE ABOUT PARAGRAPH IS PORTED AS THE RATIO TOO -
18 x 0.9391 = 17px - which lands within a third of a pixel of his own
17.28px, because the two bodies already agree. The blockquote and the
signature are absolute for the same reason: at 17px our reading size and
his are the same size, so his 20.8px and Otis's 26px transfer as they are.
HIS 110px OF SECTION PADDING IS NOT PORTED, AND THAT IS THE SAME RULE.
110px is what EVERY `.sec` on his page carries - library, math, inside,
reviews, about, editions, faq all measured 110px 0 - so it is his page
rhythm and not a decision about this section. Ours is `--sec`, and this
section takes `.band` like every other band here. Copying his figure would
have made one band three times the height of its neighbours and called it
fidelity.
HIS ENLARGED EYEBROW IS NOT PORTED EITHER, AND THIS ONE IS A DEVIATION
RATHER THAN A CONVERSION. His about eyebrow is 17.28px against 11.84px in
every other section of his - he sets this one 1.46x up. The port brief
says the label takes THE REFERENCE SHOP'S eyebrow style, so it is plain
`.eyebrow` at .62rem like every other eyebrow on this page, and his
enlargement is recorded here rather than applied.
COLOUR IS THIS SHOP'S, WHICH IS WHAT THE BRIEF SAYS: Elias gives the
geometry, not the palette. One substitution is worth writing down. HIS
HIGHLIGHT BAR IS A GOLD, rgb(186,140,62), which on his page is his
SECONDARY accent - his primary is the oxblood this shop's --accent
literally is. This page's gold is --accent-lift, and that token is
documented as "the accent on a dark band" and is reserved for the
arithmetic; at #E0B458 on this band's paper it would be a bar you cannot
see. So the bar takes --accent. It is the same ROLE - the page's accent,
set as a left rule on a quiet panel - carried by the token this palette
actually has for a light ground.
THE SIGNATURE IS OTIS GRANGER'S `.sig`, NOT ELIAS'S `.about__sig`. His is
a mono small-caps "Watch the channel" link, which is a channel plug and
not a signature; the brief asks for a first name in italic at Otis's size
and spacing, and Otis's measured 26px / 41.6px italic Georgia with 14px of
clear above it. Ported at those values in this shop's serif.
================================================================== */
.about-in{
display:grid;
/* 17 : 23 is 465.797 : 630.203 reduced - his exact column split, carried
as a ratio so it holds at our 1080px container as it does at his 1176. */
grid-template-columns:17fr 23fr;
gap:80px;align-items:start;
}
/* THE FRAME IS A PSEUDO-ELEMENT, NOT AN EMPTY DIV. It is decoration with no
content and no accessible name, which is exactly what ::before is for, and
it keeps the markup to one picture. */
.about-media{position:relative}
.about-media::before{
content:"";position:absolute;inset:-14px;
border:1px solid var(--line-strong);pointer-events:none;
}
.about-photo{display:block}
/* aspect-ratio AND width/height on the img: the attributes reserve the box
before the file lands, the ratio holds the 4:5 slot if the plate is ever
swapped for one a hair off. object-fit:cover means a swapped plate is
cropped rather than squeezed - a face is never stretched by this page.
RADIUS 0 IS HIS, MEASURED. His media is a square-cornered block; the 14px
hairline outside it is the whole of the frame device. */
.about-photo img{
display:block;width:100%;height:auto;
aspect-ratio:4/5;object-fit:cover;
border-radius:0;background:var(--deep);
}
.about-copy h2{
font-family:var(--serif);font-weight:700;text-transform:none;
font-size:34.5px;line-height:1.12;letter-spacing:normal;
color:var(--ink);margin:0 0 22px;max-width:none;
}
/* `:not([class])` IS LOAD-BEARING AND IS NOT A TIDINESS CHOICE.
Four elements in this column are
: the eyebrow, the three body
paragraphs, the highlight and the signature. A bare `.about-copy p` is
(0,1,1) and beats `.eyebrow` (0,1,0), `.about-pull` and `.about-sig`
(0,1,0) on specificity no matter what order they are written in - which
is exactly what happened on the first pass: the eyebrow came out at 17px
Lora, and the highlight and the signature both lost their size, their
italic and their margins to the paragraph rule.
The three body paragraphs are the only
in here with NO class, so
that is what this selector says. It also lifts the rule to (0,2,1), so
the three below can match it at the same weight and win on order. */
.about-copy p:not([class]){
font-family:var(--serif);font-size:17px;line-height:1.6;
color:var(--ink-soft);max-width:none;margin:0 0 17px;
}
/* 07's eyebrow and 01's are `.band .eyebrow`, (0,2,0). This is (0,2,1) and
restates nothing - it only has to out-weigh the paragraph rule above,
and every value it needs is already on `.eyebrow` in styles.css. */
.about-copy p.eyebrow{font-size:.62rem;font-family:var(--ui);margin:0 0 .6rem}
.about-copy p.about-pull{
margin:32px 0 0;padding:26px 30px;
border-left:3px solid var(--accent);
background:var(--deep);
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:20.8px;line-height:1.4;color:var(--ink);
max-width:none;
}
.about-copy p.about-sig{
margin:14px 0 0;
font-family:var(--serif);font-style:italic;
font-size:26px;line-height:1.6;color:var(--ink-mute);
max-width:none;
}
/* HIS OWN COLLAPSE POINT IS BETWEEN 1440 AND 390 and this page's two-column
blocks all collapse at 1040, so that is where this one collapses too -
one breakpoint for the page rather than a second one for this section.
THE PORTRAIT GOES ABOVE THE TEXT, which is his mobile order and is the
DOM order here, so nothing has to be re-ordered to get it. */
@media (max-width:1040px){
.about-in{grid-template-columns:1fr;gap:48px}
/* Uncapped, a stacked portrait would be 754px wide at 820. His own stacked
media is the full column at 390 (346px) and nothing wider was ever
measured, so the cap is the first round number above it. */
.about-media{max-width:min(100%,420px)}
/* 14px OF OUTSET DOES NOT FIT THE PHONE GUTTER. `.wrap` is 92vw, so the
side gutter at 390 is 15.6px and at 360 it is 14.4px - the frame would
sit within a pixel of the viewport edge and one rounding step from
causing a horizontal scrollbar. 8px clears it at both widths with room
to spare, and the device still reads as an offset frame. */
.about-media::before{inset:-8px}
}
@media (max-width:640px){
/* The same -8px step `.sec-head h2` takes at this width, so the About head
stays in this page's own type ladder rather than in his. */
.about-copy h2{font-size:26.5px}
/* Same (0,2,1) weight as the rules above, and later in the file. */
.about-copy p.about-pull{padding:22px 24px;font-size:19px}
.about-copy p.about-sig{font-size:23px}
}
/* ==================================================================
ROUND 2 - THE CTA TREATMENT. Everything below this line is new.
THE PROBLEM IT FIXES. Every button on the page was --accent with a 3px
border of the same colour, which is an outline drawn in the fill it
surrounds - it reads as a box, not as a control - and it was the same
bronze as the prices, the numerals and the rules. Nothing on the page
looked pressable, because the thing to press and the thing to read were
one colour.
THE EDGE NOW COMES FROM DEPTH, NOT FROM AN OUTLINE. Four layers, and
each one does a job a border cannot:
inset 0 -3px 0 var(--buy-lip) the lip. A 3px darker band along the
bottom only, inside the box, so the
face reads as the top of something
with thickness.
inset 0 1px 0 rgba(255,255,255,.32)
a 1px highlight along the top edge -
the light catching the near face.
0 8px 18px -8px rgba(14,31,23,.35)
the drop shadow. --ink-deep at 35%,
offset down and pulled in, so it sits
under the control rather than around
it.
linear-gradient(--buy-top, --buy)
the face. Six points of lightness
between the stops, which is a
barely-visible curve rather than a
gradient anyone would call a gradient.
THE STATES ARE REAL VALUES. Hover takes each stop one step up and grows
the shadow; active takes each stop one step down, presses the control
1px, shortens the lip to 2px and pulls the shadow in tight. No
filter:brightness anywhere - it would move the lip and the highlight
with the fill and flatten the whole control on press.
================================================================== */
/* ---------- shared geometry: buy and non-buy get the same shape ---------- */
.btn,
.ep-btn,
.buybar .buybar-cta{
border:0;
border-radius:6px;
letter-spacing:.08em;
font-weight:600;
transition:background .16s ease, box-shadow .18s ease, transform .12s ease;
}
@media (prefers-reduced-motion:reduce){
.btn,.ep-btn,.buybar .buybar-cta{transition:none}
}
/* ---------- the buy buttons ---------- */
[data-buy]{
background:linear-gradient(180deg,var(--buy-top),var(--buy));
color:var(--buy-ink);
box-shadow:
inset 0 -3px 0 var(--buy-lip),
inset 0 1px 0 rgba(255,255,255,.32),
0 8px 18px -8px rgba(14,31,23,.35);
}
[data-buy]:hover{
background:linear-gradient(180deg,var(--buy-hi-top),var(--buy-hi));
color:var(--buy-ink);
transform:translateY(-1px);
box-shadow:
inset 0 -3px 0 var(--buy-lip),
inset 0 1px 0 rgba(255,255,255,.38),
0 12px 24px -8px rgba(14,31,23,.42);
}
[data-buy]:active{
background:linear-gradient(180deg,var(--buy-lo-top),var(--buy-lo));
color:var(--buy-ink);
transform:translateY(1px);
box-shadow:
inset 0 -2px 0 var(--buy-lip),
inset 0 1px 0 rgba(255,255,255,.22),
0 4px 10px -6px rgba(14,31,23,.40);
}
[data-buy]:focus-visible{
outline:3px solid var(--ink);
outline-offset:3px;
}
/* The arrow is the label's colour, not a border's. */
[data-buy]::after{color:var(--buy-ink)}
/* THE PRICE IS THE LABEL'S OWN TYPE. `.fig` sets the serif in italic
everywhere else on the page, which inside a small-caps label reads as a
different thing bolted on. Inside a buy button it inherits, so
GET THE PLAYBOOK - $27 is one line of one face at one weight. */
[data-buy] .fig{
font-family:inherit;font-style:normal;font-weight:inherit;
letter-spacing:inherit;
}
/* ---------- the non-buy buttons: same shape, their own colour ---------- */
/* The hero pair, 04's jump link and 09's submit. They keep --accent, which
is now the STRUCTURAL colour, and take the same radius, tracking and
depth, so the page has one button language in two colours. */
.btn:not([data-buy]):not(.ghost),
.ep-btn:not([data-buy]){
background:linear-gradient(180deg,#8A6100,var(--accent));
color:var(--paper);
box-shadow:
inset 0 -3px 0 var(--accent-dark),
inset 0 1px 0 rgba(255,255,255,.16),
0 8px 18px -8px rgba(14,31,23,.35);
}
/* HOVER DEEPENS HERE, WHERE THE BUY BUTTON BRIGHTENS, AND IT IS NOT
inconsistency. This face carries a --paper label, so brightening it
takes the label down: measured, --paper on a #9C6D00 top stop is
3.94 : 1 and misses AA. Going the other way is also what the reference
build does with this button - its hover is --accent-dark - and it keeps
the label between 5.74 and 8.62 across the two stops. The LIFT and the
GROWING SHADOW are the same as the buy button, which is where the
"something happened" actually reads. */
.btn:not([data-buy]):not(.ghost):hover,
.ep-btn:not([data-buy]):hover{
background:linear-gradient(180deg,var(--accent),#6B4B00);
color:var(--paper);
transform:translateY(-1px);
box-shadow:
inset 0 -3px 0 var(--accent-dark),
inset 0 1px 0 rgba(255,255,255,.2),
0 12px 24px -8px rgba(14,31,23,.42);
}
.btn:not([data-buy]):not(.ghost):active,
.ep-btn:not([data-buy]):active{
background:linear-gradient(180deg,#6B4B00,var(--accent-dark));
color:var(--paper);
transform:translateY(1px);
box-shadow:
inset 0 -2px 0 var(--accent-dark),
inset 0 1px 0 rgba(255,255,255,.12),
0 4px 10px -6px rgba(14,31,23,.40);
}
/* The ghost keeps its transparent face - it is the quiet half of the hero
pair and depth would make it the loud one - but takes the radius and the
tracking so the two sit as a pair. */
.btn.ghost{
border:1px solid var(--line-strong);
border-radius:6px;letter-spacing:.08em;font-weight:600;
box-shadow:0 2px 6px -4px rgba(14,31,23,.30);
}
.btn.ghost:hover{
background:var(--ink);border-color:var(--ink);color:var(--paper);
transform:translateY(-1px);
box-shadow:0 10px 20px -10px rgba(14,31,23,.40);
}
.btn.ghost:active{transform:translateY(1px);box-shadow:none}
/* THE HERO PAIR'S TRACKING, AT (0,3,0). `.top-cta .btn` sets .22em and is
(0,2,0), so the .08em on the shared `.btn` rule above loses to it. The two
hero buttons are the only ones on the page that were still at the old
tracking, and "non-buy buttons get the same radius, tracking and depth"
means the same tracking. Nothing else in `.top-cta .btn` moves: the
inline-flex, the 10px gap, the uppercase and the nowrap are all still its
own. */
.hero .btn-row.top-cta .btn{letter-spacing:.08em}
/* ---------- the sticky bar's button ---------- */
/* OTIS GRANGER'S BRASS GRADIENT AND CREAM HAIRLINE ARE GONE FROM THIS ONE
BUTTON, and that is a recorded deviation from the port. They were
measured off his live bar and they make a fine button - but it would be
a third button colour on a page that now has exactly two, and the one
control that follows the reader down the page is the last place to be
inconsistent. The bar itself - its ground, its height, its type, its
left block - is untouched and is still his. */
/* SPECIFICITY, AND IT IS NOT A PREFERENCE. urgency.css declares
`.buybar .buybar-cta` (0,2,0) and is loaded AFTER landing.css, so a rule
here at (0,2,0) loses on source order and the bar keeps the old brass
gradient - which is exactly what happened and what the first screenshot
of 08 showed. `[data-buy]` on the end takes these to (0,3,0), which wins
wherever the file sits in the cascade. !important would also have worked
and is not used: a specificity that states the reason is easier to
unpick than a flag that states nothing. */
.buybar .buybar-cta[data-buy]{
border:0;
border-radius:6px;
color:var(--buy-ink);
font-family:var(--ui);
font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
background:linear-gradient(180deg,var(--buy-top),var(--buy));
box-shadow:
inset 0 -3px 0 var(--buy-lip),
inset 0 1px 0 rgba(255,255,255,.32),
0 6px 14px -8px rgba(14,31,23,.45);
}
.buybar .buybar-cta[data-buy]:hover{
color:var(--buy-ink);
background:linear-gradient(180deg,var(--buy-hi-top),var(--buy-hi));
transform:translateY(-1px);
box-shadow:
inset 0 -3px 0 var(--buy-lip),
inset 0 1px 0 rgba(255,255,255,.38),
0 10px 20px -8px rgba(14,31,23,.5);
}
.buybar .buybar-cta[data-buy]:active{
color:var(--buy-ink);
background:linear-gradient(180deg,var(--buy-lo-top),var(--buy-lo));
transform:translateY(1px);
box-shadow:
inset 0 -2px 0 var(--buy-lip),
inset 0 1px 0 rgba(255,255,255,.22),
0 3px 8px -6px rgba(14,31,23,.45);
}
/* ---------- full width on a phone ---------- */
/* 01, 07 and Last Call. The exit modal's button is already .ep-btn--block
and the sticky bar's is sized by the bar, so neither is listed. */
@media (max-width:820px){
.ep-btn-row,.lc-in{width:100%}
.offer-detail [data-buy],
.lastcall [data-buy]{
display:flex;width:100%;justify-content:center;
}
}
/* ---------- the micro line under the button ---------- */
/* `.ep-foot` reads INSTANT ACCESS - PAY ONCE - YOURS FOREVER and sits
directly under 01's and 07's button. Three things keep it there at every
width, and tools/runtime_rev.py measures all three from 360 to 820 in
20px steps:
- it is in normal flow under the button's own row, so nothing can
overlap it,
- overflow-wrap lets it break rather than push the column wider,
- the margin is the gap, and 18px rather than 14px because the
button's drop shadow now extends 10px below its own box. */
.offer-detail .ep-foot{
margin:18px 0 0;
overflow-wrap:anywhere;
position:static;
}
@media (max-width:420px){
/* At 390 the line is 46 characters at .2em and wraps to two. The tracking
comes in one step so it stays on one, which is the same move the hero
name line makes at the same breakpoint. */
.offer-detail .ep-foot{letter-spacing:.12em}
}