`, and update-today.mjs anchors on the sequence
today -> hrow -> hnote. Both are content anchors, so the layout
moves entirely in CSS and neither tool needs touching.
===================================================================== */
/* ---- 1. THE MASTHEAD -----------------------------------------------
White, chosen from the four grounds. The 3px black rule under it was
the heaviest line on the page and it sat above the thing that matters
least; the brand still speaks in the wordmark rule below the name. */
header{border-bottom:1px solid var(--line)}
header .wrap{padding-top:26px;padding-bottom:20px;gap:6px}
/* ---- 2. THE PRICE TAKES THE WHOLE WIDTH ----------------------------
The price panel used to share its row with the hours card at
1.86fr/.88fr, so the number a farmer came for lived in two thirds of
the page. It now has all 1180 and the hours follow it as a strip. */
@media(min-width:1024px){
.topgrid{grid-template-columns:1fr;gap:14px}
.top{padding:20px 0 24px}
}
/* ---- 3. THE BOARD IS TWO FACTS ------------------------------------
Two rows, and Sig's instruction is that there always will be. The
figure is set in the Wordmark face -- the same DejaVu Sans Condensed
Bold as the name above it, which is the only other display type this
site owns -- so the page has one voice for the two things it is for.
Size is measured, not chosen: see the note at the foot of this block. */
/* DESKTOP AND UP, AND THAT SCOPE IS THE WHOLE POINT.
The first cut of this block set the price size unqualified. Being later
in the file it beat the 2026-08-18 phone pass, and a 65px figure took
the table to 416px inside a 336px panel -- the price clipped with no
visible scrollbar, which is the 2026-08-16 panel's most serious finding
arriving by a new route ("the We pay cash price is cut to $3.").
The phone board is NOT the vision study's to change. Sig asked for the
futures price and its contract month on phones; the 08-18 pass fought
all four columns into 320px -- type down in three stages, padding 12px
to 5px, letter-spacing to zero -- and measured them at five widths with
corn at $4.17 and again at $8.99, nothing cut, the pay price giving up
under a pixel to make room. That file ends with "just do not add
anything after this file that hides .m-hide again."
So: the big figure is a desktop change, and the phone keeps what was
measured for it. */
@media(min-width:681px){
.bids td.pay{font-family:var(--display);font-weight:700;letter-spacing:-.01em;
line-height:.95;font-size:clamp(2.6rem,.4rem + 6.6vw,5.4rem);padding-block:16px}
.bids td.mo{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);vertical-align:middle;white-space:normal}
.bids td.mo .con{font-size:.86rem;margin-top:3px}
.bids td.fut,.bids td.bas{vertical-align:middle;color:var(--grey)}
.bids th{border-bottom-width:1px;font-size:.78rem;color:var(--grey)}
.bids td{border-bottom-color:var(--line)}
.panel .hd{font-size:1rem;padding:11px 14px}
}
/* ---- 4. THE HOURS ARE A STRIP, NOT A CARD -------------------------
Same markup, laid out along the page instead of down it. The status
is a pill: the operational yellow when the office is open, quiet grey
when it is shut -- which is the 2026-08-18 rule about not shouting an
invitation at a closed door, kept and given a shape. */
/* A STRIP FROM 681 UP ONLY. Below that it stays the card the phone pass
tuned, which is the right shape on a narrow screen anyway. */
/* THE STRIP AND THE FULL-WIDTH PANEL ARE ONE LAYOUT, SO THEY SHARE ONE
BREAKPOINT -- 1024px, the width at which .topgrid collapses to a single
column and the price panel stops sharing its row with the hours.
This block shipped at 681px by mistake, half a layout ahead of the other
half. Measured at 768px the consequence was a strip that wrapped onto
three ragged lines: row one 70px tall, row two 53px, the today cell's grey
ground stopping halfway across with a hard edge, and no divider at the
wrap. Between 681 and 1023 the hours now stay the stacked card they have
always been, which is a proven layout beside a two-column top. */
@media(min-width:1024px){
.hourspanel{display:flex;flex-wrap:wrap;align-items:stretch;overflow:visible}
/* THE TODAY CELL STACKS; THE OTHER THREE DO NOT.
Laid out inline it read "CLOSED TODAY, SATURDAY Closed" -- the day name
and the word Closed butted together with 10px between them, which is a
sentence that stutters rather than a label with a value under it. Every
other cell in the strip is `label value` because its value is a time
range and cannot be confused for more of the label; this one's value is
a single word that also appears in its own label. Stacked, it reads the
way it does on the phone and the way it read in the card this strip
replaced, and it keeps the larger type that marks it as the answer to
"are they open right now". */
.hourspanel .today{flex:0 0 auto;display:flex;flex-direction:column;
align-items:flex-start;justify-content:center;gap:1px;
border-bottom:none;border-right:2px solid var(--ink);text-align:left;padding:11px 18px}
.hourspanel .today-lbl{margin-bottom:0;font-size:.8rem;letter-spacing:.08em;white-space:nowrap}
.hourspanel .today-hrs{font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem)}
.hourspanel .hrow{flex:1 1 auto;border-bottom:none;border-right:1px solid var(--line-lt);
justify-content:center;gap:9px;padding:13px 16px;font-size:.98rem;white-space:nowrap}
.hourspanel .hrow span:first-child{flex:0 0 auto;color:var(--grey);font-weight:600}
.hourspanel .hnote{flex:1 0 100%;border-top:1px solid var(--line-lt);font-size:.9rem}
}
/* ---- 5. BOXES GIVE WAY TO RULES -----------------------------------
The page carried fourteen framed boxes at one weight. A frame says
"this is a separate object"; fourteen of them say nothing. What is
left framed is the price, the hours and the notices Wisconsin
requires in writing -- and of those only the statutory notices keep
the heaviest weight, because they are the only thing on the page that
is there by law. */
.ways,.drop,.act,.lics,.sister-a{border:none;border-top:2px solid var(--ink);border-radius:0;background:none}
.ways .way,.lics .lic{border-bottom:1px solid var(--line-lt);padding-left:0;padding-right:0}
.ways .way:last-child,.lics .lic:last-child{border-bottom:none}
.dropbody{padding:18px 0 4px}
.act{padding:13px 0;min-height:0;border-top-width:1px}
.act:hover{background:none;text-decoration:underline;text-underline-offset:3px}
.act-primary{background:none;color:var(--ink);border-top:2px solid var(--brand-txt)}
.act-primary .act-t{color:var(--brand-txt)}
.act-primary .act-s{color:var(--grey)}
.act-primary:hover{background:none}
.actions{gap:0}
.sister-a{padding:16px 0}
.sister-a:hover{background:none}
/* The shrink figure keeps its yellow -- it is the one number in the
drying section a grower argues about, and yellow is this site's
"read this" colour doing exactly its job. */
.shrink{border:none;border-radius:0}
/* THE STATUTORY NOTICES KEEP THE HEAVY FRAME. Everything above lost one;
these are the only blocks on the page that exist because the state
says so, and they should not look like the rest of the page. */
.statute-box{border-width:3px}
.wi .statute{border-width:2px}
/* ---- 6. THE LICENCE NUMBERS ARE FIGURES ---------------------------
They are the answer to "are these people licensed", and they were set
at body size in a bordered list. */
.lic .l{font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);font-weight:700}
.lic .v{font-size:1.5rem;font-weight:700;letter-spacing:.01em;margin-top:1px}
@media(min-width:681px){ .lics{display:grid;grid-template-columns:1fr 1fr;column-gap:30px} }
/* AND THE DIVIDER BETWEEN THEM STOPS BEING A DIVIDER. .lic carries a
border-bottom and :last-child clears it, which is right in a stacked list.
Once the list is two columns the two licences share a bottom edge, so the
left one kept a 553px rule with nothing under it and 30px of daylight to its
right -- measured at 1440, immediately under "Licensed by the State of
Wisconsin". nth-last-child(-n+2) clears the bottom row at any count, not
only at two. */
@media(min-width:681px){ .lics .lic:nth-last-child(-n+2){border-bottom:none} }
/* ---- THE LABEL MUST WRAP, OR THE PRICE GOES OFF THE EDGE -----------
Found by rendering, and it is the 2026-08-16 panel's worst finding
arriving by a new route. `.bids td.mo` is white-space:nowrap, so
"October and November delivery" sets the label column's width and
pushed the table to 416px inside a 336px panel. `.panel` has
overflow-x:auto, so nothing overflowed the PAGE -- the price was
simply clipped, with no visible scrollbar, exactly as the panel
reported it at 200% zoom: "the We pay cash price is cut to $3."
A price a farmer cannot finish reading is the most expensive bug this
page can have, and a bigger figure made it easier to hit. */
.bids td.mo{white-space:normal}
.bids td.mo .con{white-space:normal}
/* ---- MEASURED ------------------------------------------------------
Filled in from the render, not from intention. See the delivery note.
-------------------------------------------------------------------- */
/* ── THE CHANGE LINE ──────────────────────────────────────────────────────
Added 2026-08-31. Sig: "what about the change since yesterdays posted price
or something for people to reference with price."
It sits UNDER the paid price, inside the same cell, because it answers a
question about the number directly above it. A fifth column would make the
reader carry the figure across the table to find out what it did.
IT IS NOT COLOUR CODED, AND THAT IS DELIBERATE.
The obvious treatment is green for up and red for down. This project has
already measured what red and green do to each other here: on 2026-08-20 a
green had to be simulated against protanopia and deuteranopia before it
could sit opposite Badger's barn red, because that pair is exactly the one
red-green colour blindness collapses. A red "down" on a page whose brand IS
a red -- barn red then, the mark's maroon #82313a since 2026-09-18 -- would
also be a second red with a different meaning, six inches from the first.
So the direction is carried by the WORD -- up, down, unchanged -- and by a
triangle, which are two channels that survive any colour vision and any
printer. Standing rule: colour is never the only channel. Here it is not a
channel at all.
The size is absolute, not relative. `.bids td.pay` is clamped up to 5.4rem
by the vision layout, so an em-relative change line would render at three
and a half rem on a wide desktop. */
/* THE CHANGE LINE IS GONE. It rendered "down 4c from Thursday" under the price
until Sig removed it on 2026-09-11. Its rules are deleted rather than left
commented: the panel guard in test/prices.test.mjs reads THIS FILE to decide
which classes may appear in the markup, so a stale selector here would go on
quietly licensing a class nothing renders. */
/* ── THE QUARTER-CENT SLOT ────────────────────────────────────────────────
The futures quote renders as $5.33 plus a fraction glyph, and the glyph sits
in a slot that is there whether or not it is filled. That is what makes the
column line up: measured across eight real quotes at the panel's own size,
the value's rendered width went from a 25.5px spread to 0.00px.
The slot is sized from the font, not guessed. Inter's three fraction glyphs
are NOT equal width -- ¼ 17.16px, ½ 18.03px, ¾ 18.80px at the futures cell's
own size -- so it is sized from the widest, which across every width where
this column is visible (601px and up) measured 0.808 to 0.849em.
min-width, not width: if a face ever renders one of these wider than 0.86em
the number pushes the column out by a hair instead of clipping the glyph. A
ragged column is a blemish; a clipped ¾ is a wrong price.
THIS COMMENT USED TO SAY the column is display:none below 601px, so none of
this applies on a phone. That stopped being true when Sig asked for the
futures price on phones: the 680px block above turns .m-hide back on, and
the column now renders down to 320px. The rule itself was already right --
min-width is in em, so it tracks the three type steps down instead of
holding a desktop width against phone type -- and the quarter renders clean
at 390 on both sites. Only the note about where it applies was wrong, which
is the kind of wrong that survives because nothing renders a comment. */
.bids td.fut .q{
display:inline-block;
min-width:.86em;
text-align:left;
font-variant-numeric:normal;
}
.bids td.fut{font-variant-numeric:tabular-nums}
/* ── THE CALL BAR, BROUGHT BACK DOWN ──────────────────────────────────────
Sig, 2026-08-31: "is there any way to make the call number not so fucking
huge somehow."
It was drawn for a price panel 826px wide. The vision layout gave the panel
the whole 1180, and `.call` is width:100%, so it came along — 1136 x 80px of
solid brand with a 3px rule, measured at 17% of the price panel's own area.
The point of that layout was to make the PRICE the biggest thing on the
page, and a button matching the panel for sweep works against it.
Capped at 34rem and centred, with the type and the border eased back: 680 x
63px, 8% of the panel. The weight stays at 800 and the ground stays brand,
because "prices are not final until you call" is the panel's own small print
and the call is the one action this page exists to produce. It is quieter,
not demoted.
THE PHONE GETS THE SAME HELP WITHOUT THE CAP. At 390px the bar is 358px
wide, well under 34rem, so max-width does nothing — but the smaller type
stops the label wrapping so hard and the bar drops from 103px to 86px.
Contrast is unchanged at 7.06:1: only the size moved, not the colours. An
outline treatment was tried and rejected at 3.42:1 — it clears the 3.0
large-text threshold and nothing else, and would fail the moment the type
rendered below 18.66px. */
.call{
max-width:34rem;
margin-left:auto;
margin-right:auto;
padding:13px 20px;
font-size:clamp(1rem, .95rem + .32vw, 1.16rem);
border-width:2px;
}
/* ── THREE THINGS SIG SPOTTED IN THE FINALS, 2026-08-31 ───────────────────
Fixed together because all three came out of the same review pass. */
/* 1. THE BLACK RULE ABOVE THE NOTICE BANNER.
The vision layout took the masthead's bottom border from
`3px solid var(--ink)` down to a hairline. The notice bar directly beneath
it still has `border-bottom:3px solid var(--ink)`, so the yellow band ended
up with a heavy black rule under it and a whisper above it — lopsided, and
the thing Sig's eye caught. Restored. Only the border is restored; the
masthead's roomier padding from the vision pass stays. */
header{border-bottom:3px solid var(--ink)}
/* 2. THE FOOTER PHONE NUMBER GOES UNDER THE ADDRESS ON A PHONE.
The footer is one flowing line — company, street, town, telephone — so on a
narrow screen the number wrapped to wherever it landed, usually alongside
"Wheeler, WI 54772". A phone number is the thing somebody is looking for
down there; it gets its own line. The trailing full stop travels with it,
inside the same span, so the line does not end on a stranded period. */
@media(max-width:680px){
footer .foot-tel{display:block}
}
/* The full stop after the telephone, and the 3px the tap-target padding
indents it by, are both wrong once the number is a line of its own: a line
that ends "0548 ." with a gap, starting 3px right of the address above it.
The stop is only punctuation for a sentence that no longer runs on, so on a
phone it goes; the padding stays vertically, which is what makes the tap
target, and only the left inset is removed. */
@media(max-width:680px){
footer .foot-dot{display:none}
footer .foot-tel a[href^="tel:"]{padding-left:0}
}
/* ══════════════════════════════════════════════════════════════════════════
THIS SITE IS LIGHT. There is no dark scheme, deliberately.
══════════════════════════════════════════════════════════════════════════
Sig, 2026-08-31, looking at the live page: "i also hate the dark background."
Forty-four lines of `@media(prefers-color-scheme:dark)` came out with it —
a second palette, its own pinned colours for everything sitting on the
yellow, and a second set of panel gradients. Careful work, and gone, because
the owner does not want his page changing colour under him.
`color-scheme: light` is the other half of the same instruction and is not
decoration: without it a phone in dark mode repaints form controls,
scrollbars and the address bar dark around a light page. The browser is told
rather than left to guess.
IF THIS IS EVER REVERSED, here is the trap, found by rendering and not by
reading: --ink goes light in the dark, and the notice banner, the Open-today
box and the shrink figure all sit ON the yellow and inherit it. They
rendered at 1.6:1. The yellow is identical on both sites and must not move,
so anything sitting on it has to be pinned near-black in BOTH schemes. */
:root{ color-scheme: light; }
/* ---- the page stopped being built ---------------------------------------
Set by the PRICE:stale script only, and only past a day with no rebuild.
Never rendered on a healthy site. Loud on purpose: the number it sits above
is a real price that was true once, which is exactly the kind of wrong that
gets read as right. */
.panel.is-stale .hd{background:var(--ink)}
.stalewarn{
margin:0;padding:12px 16px;
background:var(--yellow);color:var(--ink);
font-weight:700;line-height:1.4;
border-bottom:2px solid var(--ink);
}
/* ══════════════════════════════════════════════════════════════════════════
THE COMPANIES' OWN LOGOS -- appended 2026-09-18.
══════════════════════════════════════════════════════════════════════════
Kristi, controller for both elevators: "I think it would be best to keep our
old logo's so people recognize it better even though we do really like your
corns!" -- and, separately, "Don't forget to change the logo at the bottom of
each site that is a link to the other site."
So TWO elements change and nothing else does. The masthead
and the "Our other location" card's each carry one
![]()
now, instead of four corn ears flanking the .wm/.wmrule
wordmark. Everywhere else the corn stays, on purpose: assets/icon.png,
icon-192, icon-512, og.png, the webmanifest and the favicon links were all
left alone, so the browser tab and the link preview are unchanged.
THE ARTWORK ARRIVED ON 2026-09-18, and what landed is:
assets/logo-badgergrain.png 1200 x 400 RGBA, transparent
assets/logo-midwestcommodity.png 832 x 400 RGBA, transparent
THOSE ARE A FLOOR, NOT A SHAPE. The rules below fit whatever arrives into a
fixed box with object-fit:contain, so any proportion works and nothing is
cropped or stretched. What the numbers are really specifying is resolution:
the masthead box is at most 430 x 118 CSS px, so anything under roughly
900 x 250 real pixels goes soft on a phone. Both sizes above clear 2x and
still clear 3x. assets/README.md says the same thing to whoever is drawing
them.
THE MIDWEST FILE IS 832 WIDE AND NOT THE 600 ASKED FOR, DELIBERATELY. Two
renders of that mark were offered. Both carry the same drawing; they differ
only in how much empty canvas is around it. The 600 x 400 one is canvas
aspect 1.50 with the mark itself only 600 x 288 inside it, aspect 2.08. The
masthead box is 430 x 118, aspect 3.64, so contain fits BOTH by height --
and the padded file spends 112 of its 400 rows on nothing. Measured in the
browser at 1280px rather than worked out on paper:
600 x 400 file: drawn 177.00 x 118, of which the mark is 177.0 x 85.0
832 x 400 file: drawn 245.44 x 118, of which the mark is 245.4 x 118.0
The mark comes out 38.7% larger from the 832 file, which is the 2.08/1.50
ratio exactly. Nothing is cropped either way -- the padded file is not
wrong, it is just smaller.
Badger's file has the same padding (1200 x 400 canvas, 762 x 400 of ink) and
it costs nothing, because 1.905 and 3.000 are both still under the box's
3.64 and so both fit by height to the same 118 rows. Measured: the mark
draws 224.8 x 118 from either render. That is why only the Midwest file
needed the tighter one.
UNTIL THEN THE ALT TEXT IS THE LOGO, and that is what the type below is for.
A broken ![]()
is drawn by the browser as its alt text in the element's OWN
font properties -- which by default is the page's body face at body size, or
a serif in an engine that does not inherit. Set here so the gap reads as
deliberate lettering in this site's display face rather than as damage.
THERE IS NO DARK RENDERING TO ANSWER, and that is worth writing down because
the markup said otherwise. The old lockup shipped `art-lit`/`art-rev` pairs
-- corn-left.png beside corn-left-reversed.png -- but the dark scheme was
removed on 2026-08-31 ("i also hate the dark background"), and the only rule
left is `.logo .ear.art-rev{display:none}`, unconditional, with nothing
anywhere that turns it back on. The reversed ears have not been drawn on
either site since. One file per company is therefore the whole requirement.
If a dark ground ever comes back, the two extra files to ask for are
assets/logo-badgergrain-reversed.png and assets/logo-midwestcommodity-reversed.png
at the same pixel sizes, with the maroon and the green lightened to hold
4.5:1 on the dark paper and the black and grey lettering set in paper white.
Do not invent them before there is a ground to put them on.
══════════════════════════════════════════════════════════════════════════ */
/* THE BOX IS RESERVED IN CSS, IN BOTH AXES, AND THE ARTWORK IS FITTED INTO IT.
width and height are set here rather than left to the file's own proportions,
for two reasons. Nothing below the mark can move when it loads, whatever
shape arrives -- object-fit:contain scales it down inside the box and never
distorts or crops it. And the alt text, while there is no file, gets a box
big enough to be typeset in rather than one derived from artwork that is not
here. The width/height attributes in index.html are the shapes specified
above; if the delivered files are a different shape the page is still right,
and those two numbers are merely out of date. */
.logo .mark{
display:block;position:relative;overflow:hidden;
width:clamp(210px,48vw,430px);max-width:100%;
height:clamp(64px,14vw,118px);
object-fit:contain;object-position:center;
/* the alt-text fallback, styled */
font-family:var(--display);font-weight:700;font-style:normal;
font-size:clamp(.85rem,2.6vw,1.3rem);text-transform:uppercase;letter-spacing:.02em;
line-height:1.1;text-align:center;color:var(--brand-txt);
}
/* THE GAP IS LETTERING, NOT DAMAGE.
Left to itself Chrome draws a broken-image glyph beside the alt text and
sets that text in a system face, ignoring the webfont the element asks for
-- so the masthead of a site whose artwork has not arrived reads as a fault
rather than as a name. An ![]()
that FAILED still paints ::before; an ![]()
that SUCCEEDED is a replaced element and never does. So this covers the
glyph while the file is missing and takes itself away, with no script and no
second request, the moment the file is there.
Firefox and Safari do not paint ::before on an ![]()
at all. They draw the
UA's own alt text instead, which is the same words -- the fallback degrades
to the fallback. */
.logo .mark::before{
content:attr(alt);
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
padding:0 2px;background:var(--paper);
font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
text-align:inherit;line-height:inherit;
}
/* THE CARD AT THE FOOT SHOWS THE OTHER ELEVATOR, IN THE OTHER ELEVATOR'S
COLOUR. This is the 2026-08-19 fault in its new form: the one element whose
whole job is to tell the two businesses apart used to be drawn in this
business's colour. The wordmark it was drawn with is gone, so the colour
moves with it, onto the mark that replaced it. --sister-brand is still the
other site's --brand and still must never equal this site's; colour.test.mjs
checks both halves.
The mark is flush left because it sits at the start of a flex row whose
other child is the sentence naming that elevator, and a centred mark would
float away from the words it belongs to. */
.logo.sm .mark{
width:clamp(150px,34vw,210px);
height:clamp(54px,12vw,66px);
object-position:left center;
font-size:clamp(.62rem,1.7vw,.85rem);letter-spacing:.03em;
text-align:left;color:var(--sister-brand);
}
.logo.sm .mark::before{justify-content:flex-start;padding:0}
/* SUPERSEDED, LEFT IN PLACE, NOT LIVE.
.wm / .wm1 / .wmrule / .wm2, .logo .ear and .logo:has(.wm) above no longer
match anything in index.html -- both lockups are a single ![]()
now. They are kept because assets/corn-left.png and its three siblings are
still in the repository and the CSS lockup is the thing that draws them, so
a revert is one markup edit rather than a rebuild. Nothing new should be
hung on them. */
/* ====================================================================
2026-09-22. SIX THINGS THE BROWSER CAN DO THAT THIS SITE WAS NOT ASKING
FOR. Nothing below changes a word, a price or a layout -- the last one was
checked by comparing every element on the page, at 390px and at 1100px,
before and after. Every number in
it was measured on this repository, on this machine, and the measurement
is written beside it so the next person can check it rather than trust it.
==================================================================== */
/* ---- 1. THE FALLBACK FACE IS MEASURED AGAINST INTER ------------------
Five font files load with font-display:swap, so the first paint is in
whatever the phone already has -- Segoe UI, Roboto, Arial -- and every
line moves when Inter lands. A font is not allowed to move the page.
MEASURED with fontTools over the 69 characters this site actually sets
(a-z A-Z 0-9 space . , : / $ -):
average advance, Inter 500 .................. 1209.74 units / 2048 em
average advance, Arial regular .............. 1133.25 units / 2048 em
(Liberation Sans, which
is metric-identical to
Arial, measured here)
size-adjust = 1209.74 / 1133.25 ............. 106.75%
Inter's ascent and descent are 1984 and -494 of a 2048 em. Divided by the
size-adjust above, that is 90.75% and 22.60% of the adjusted em, so a line
of the fallback occupies exactly the box Inter will occupy. Line gap is
zero in Inter and is overridden to zero here, because Arial's is not.
The bold weights are 1.47% narrow (700) and 0.10% wide (800) against
Arial's own bold under the same adjustment. One face is used rather than
three because a fallback per weight would have to name a bold local file
that Windows, Android and iOS each spell differently.
The display face is deliberately NOT given one: its fallback is Arial
Narrow, which is not on the machine this was measured on, and a metric
typed from memory is worse than no metric at all. */
@font-face{
font-family:"Inter Fallback";
src:local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Liberation Sans");
/* Liberation Sans is last because it is Arial's metric twin and the
face Linux actually resolves; without it this face matches nothing
on a Linux machine and the measurement below cannot be taken. */
size-adjust:106.75%;
ascent-override:90.75%;
descent-override:22.60%;
line-gap-override:0%;
}
:root{
--font:"Inter","Inter Fallback","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* ---- 2. THE LONG SECTIONS ARE NOT LAID OUT UNTIL THEY ARE NEEDED -----
MEASURED at 390px: the page is 9,854px tall and the first screen is 900
of them. The drying schedule alone is 3,931px, laid out in full before the
first price is painted on a phone on a country tower, and 1,035px below
the fold before it even starts.
contain-intrinsic-size carries the MEASURED height of each one so the
scrollbar is the right length before anything is drawn, and `auto` tells
the browser to use the real height once it has seen it. Heights at 390px
and at 1100px are both measured; the desktop set is below.
ONE SECTION, NOT THREE. It was tried on the Wisconsin section and on
contact as well, and both MOVED THE PAGE: content-visibility brings layout
containment with it, a contained box does not let a child's margin collapse
through its edge, and each of those two sections grew 69px. Measured at
390px, every element on the page compared before and after: the drying
schedule changes nothing (0 elements differ), the other two change 48 and
17. A delivered layout is not worth a few milliseconds.
Find-in-page, the #drying anchor and the skip link all still reach inside
it: skipped content is searchable by spec.
PRINTING IS THE EXCEPTION -- see the print block, which turns this off
entirely, because a sheet must not come out of the printer half empty. */
@supports (content-visibility:auto){
section#drying{content-visibility:auto;contain-intrinsic-size:auto 3931px}
@media(min-width:1024px){ section#drying{contain-intrinsic-size:auto 2467px} }
}
/* ---- 3. A PRICE THAT ARRIVED WHILE YOU WERE LOOKING SAYS SO ----------
PRICE:live replaces the price panel in place when the repository has a
newer read. Until now that happened in silence: a farmer watching the
page saw a number change under his eyes with nothing to say it had.
The class is put on by the one line of script under PRICE:live, on the
`pricechange` event that block already fires. It is not done with
@starting-style, which would be the tidier tool and was tested first:
measured in Chromium, a starting style ALSO runs on the first paint of
the page, so every visitor would have seen the flash on arrival as if a
price had just moved. A flash that is not true is worse than no flash.
Anyone who has asked their phone for less motion gets the same
information as a held tint with no animation. */
.panel.is-fresh td.pay,.panel.is-fresh td.cash,.panel.is-fresh .hd .as{animation:freshen 1.6s ease-out 1}
@keyframes freshen{
0% {background-color:rgba(245,207,78,.95)}
55% {background-color:rgba(245,207,78,.75)}
100% {background-color:transparent}
}
@media(prefers-reduced-motion:reduce){
.panel.is-fresh td.pay,.panel.is-fresh td.cash,.panel.is-fresh .hd .as{animation:none;background-color:rgba(245,207,78,.45)}
}
/* ---- 4. WINDOWS HIGH CONTRAST -----------------------------------------
The office PC in a scale house is exactly where forced-colors turns up,
and in that mode the browser throws every background away. The panel
header -- the brand bar that says which elevator a printed or pinned-up
sheet came from -- becomes invisible, and so does the difference between
a heading row and a price row. Borders survive forced colors; colours do
not. So the bar is drawn with a border instead. */
@media (forced-colors: active){
.panel .hd{border-bottom:3px solid}
.panel,.drop,.act,.statute-box,.shrink,.notice{border:1px solid}
.call{border:3px solid;forced-color-adjust:none}
td.cash,.today-hrs{font-weight:800}
.panel.is-fresh td.pay,.panel.is-fresh td.cash,.panel.is-fresh .hd .as{animation:none;outline:2px solid}
}
/* ---- 5. THE PAPER ----------------------------------------------------
The print stylesheet above was measured at six letter sheets. It never
set a page margin, so every browser used its own default, which is
between 10 and 25mm depending on which one the office has.
MEASURED, printing this page to Letter at four margins:
10mm ..... 6 sheets 19mm ..... 7 sheets
12.7mm ... 6 sheets 25mm ..... 7 sheets
So the office's sixth-and-seventh sheet was decided by a setting nobody
here chose. 12.7mm is half an inch, the narrowest margin a US office
printer is certain to be able to lay down, and it is now the margin
whatever browser prints this.
widows and orphans stop a single line of a paragraph being left behind on
a page by itself, and a heading is not allowed to be the last thing on a
sheet. */
@page{margin:12.7mm}
@media print{
/* Section 2 hides what is not on screen. There is no screen here. */
section#drying{content-visibility:visible!important}
p,li,td{orphans:3;widows:3}
h2,h3,.schedhd,.cbh{break-after:avoid-page}
.panel.is-fresh td.pay,.panel.is-fresh td.cash,.panel.is-fresh .hd .as{animation:none!important}
}
/* ---- 6. THE SMALL ONES -----------------------------------------------
The skip link and the two in-page links land flush against the top edge
of the window, which reads as though the page has been cut. Three lines
of air, and the same for anything else a link points at.
Selected text takes the brand rather than the browser's blue.
A slashed zero was the third idea here and is NOT in this file: the four
Inter files in fonts/ were read with fontTools and carry exactly one
OpenType feature between them, `tnum`, which this site already uses.
There is no zero to slash. */
:target,#prices,#drying,#contact{scroll-margin-block-start:14px}
::selection{background:var(--brand);color:var(--on-brand)}
/* ---- 2026-09-25 audit: three small phone fixes -------------------------------
1. "Call (715) 704-0548 to lock a / price" left one word alone on line two.
Balance the two lines instead.
2. The number inside that button read "704 - 0548" (tabular figures give the
hyphen a full digit's width). Proportional figures for the button only;
the price table keeps tabular.
3. The two schedules stack on a phone: 79 rows at 45px is about 3,500px of
scrolling. Rows read, they are not tapped, so they can be shorter. */
.call{text-wrap:balance}
.call .nb{font-variant-numeric:normal;font-feature-settings:normal}
@media(max-width:600px){ .sched td{padding-top:5px;padding-bottom:5px} }