/* Burgin's Hardware & More
   Everything here comes from their remodeled store: cream painted block, black aisle signs with dome number tabs,
   a pine counter with a corrugated metal front, chalk tags, and the old black and yellow sign.
   All colors, fonts, and sizes live in this first block. The looks at the bottom only change these values. */

@font-face { font-family: "Merriweather"; font-weight: 400; font-display: swap; src: url("../fonts/merriweather-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-weight: 900; font-display: swap; src: url("../fonts/merriweather-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Patrick Hand"; font-weight: 400; font-display: swap; src: url("../fonts/patrick-hand-latin-400-normal.woff2") format("woff2"); }

:root {
  color-scheme: only light;

  /* The fonts */
  --font-head: "Merriweather", Georgia, "Times New Roman", serif;
  --font-body: "Merriweather", Georgia, "Times New Roman", serif;
  --font-label: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-chalk: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;

  /* The sizes */
  --gutter: 16px;
  --wrap: 1180px;
  --nav-h: 44px;
  --bar-h: 0px;
  --edge-h: clamp(16px, 2.1vw, 34px);  /* the pine edge of the counter band */
  --band-h: clamp(74px, 10.5vw, 120px); /* the corrugated part of the band */
  --rib: 9px;                          /* how wide one rib of the corrugated metal is */
  --body-size: 1.0625rem;
  --small-size: .875rem;

  /* The ground: their painted block, and the faint courses in it */
  --ground: #F4F1EA;
  --courses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='80'%3E%3Cpath d='M0 .75H192M0 40.75H192M.75 0V40M96.75 40V80' fill='none' stroke='%23564a36' stroke-opacity='.075' stroke-width='1.5'/%3E%3C/svg%3E");
  --text: #1B1A17;
  --text-soft: #4B473F;
  --rule: rgba(27, 26, 23, .22);

  /* Their logo */
  --logo-back: #CDCFCB;
  --logo-right: #A6A6A6;
  --logo-front: #000000;
  --logo-ink: #000000;
  --rope-ink: #1B1A17;
  /* A thin line of the ground color under BURGIN'S and the tagline. On the cream it can't be seen. If a browser
     forces the page dark and leaves the drawing alone, it shows the letters with a light outline, like their door. */
  --name-halo: var(--ground);
  --name-halo-w: 4;

  /* Their aisle signs */
  --plate: #17171A;
  --plate-text: #FFFFFF;
  --plate-soft: #D9D8D2;
  --slat: #232326;
  --slat-w: #F2F2EE;
  --slat-w-text: #17171A;
  --dome: #A7A1A2;
  --dome-text: #FFFFFF;

  /* Their counter and display tables */
  --pine: #D6B27A;
  --pine-hi: #E4C592;
  --pine-deep: #C39E6A;
  --pine-edge: #BD8748;
  --pine-edge-dark: #94672F;
  --pine-ink: #2A1C0A;
  --frame: #1C1D1F;
  --corr: #ACB6BE;
  --corr-hi: #F2F5F7;
  --corr-mid: #CBD2D7;
  --corr-low: #7E878E;

  /* The hand truck and the bandana. The only strong color on the page. */
  --red: #BE3F3E;
  --red-press: #A23231;
  --red-dark: #8F2C2B;
  --on-red: #FFFFFF;

  /* The chalk tags, and the touches of color they get */
  --chalk: #22211D;
  --chalk-white: #F7F5EF;
  --chalk-yellow: #F0D85A;
  --chalk-teal: #7FD1C7;
  --flood-edge: #EADD62;               /* the yellow line at the edge of the flood, like the keyline on their old sign */

  /* Him */
  --ink: #1B1A17;
  --tank: #FBFAF6;
  --white: #FFFFFF;
  --hat: #0B0B0A;
  --hat-band: #38362F;
  --hat-line: #3F3D37;
  --hat-edge: transparent;
  --tire: #0B0B0A;
  --tread: #35332E;
  --lug: #6E2120;
  --cap: #E9E6DD;

  /* The things he ropes */
  --honey: #D98A1E; --honey-light: #EFAF4A; --honey-dark: #C87B16; --label-cream: #F7EFD9; --lid-yellow: #F5D327;
  --stove-black: #33322E; --key-brass: #D2B04A; --glass: #EAF6F8; --pool-water: #6CC7DB; --pool-light: #BDE8F0;
  --iron: #232220; --iron-face: #34332E; --wax: #F5ECD3; --wax-shade: #E6D9B6; --zinc: #BDBAB2;
  --flame: #F5A623; --flame-core: #FFE08A; --pine-base: #D9BC83; --pine-wood: #EBD3A0; --pine-roof: #C9A35E; --pine-light: #F1DDB0;
  --brass: #D4AE4E; --brass-dark: #C79E3B; --seam: #6E6C65; --sheen: #8A8880; --key-sheen: #F1DC97; --iron-sheen: #6B6962;
  --brass-sheen: #F0D78A; --thread: #7E6118; --grain: #C9A76B;

  /* The scale */
  --scale-body: #2F3234;
  --scale-tread: #5C6062;
  --scale-bezel: #17171A;
  --dial-face: #FBF8F0;
  --dial-rim: #A9ADAF;
  --dial-track: #E5E0D3;
  --dial-mark: #1B1A17;
  --tank-level: #BFC9CE;
  --floor: #1B1A17;
  --ticket-paper: #FBF8EF;
  --ticket-text: #1B1A17;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 10px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground) var(--courses);
  color: var(--text);
  font: 400 var(--body-size)/1.62 var(--font-body);
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus, #1F6FB2); outline-offset: 2px; border-radius: 3px; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nb { white-space: nowrap; }
.small { font: 600 var(--small-size)/1.4 var(--font-label); color: var(--text-soft); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Things that need the script stay out of the way without it. */
.needs-js { display: none !important; }
.js .needs-js { display: revert !important; }
.js .callbar.needs-js { display: flex !important; }
.js .hit.needs-js { display: block !important; }
.js .hit[hidden] { display: none !important; }
.js .pause.needs-js { display: grid !important; }
.js .pause[hidden] { display: none !important; }

/* ------------------------------------------------------------------ the links at the top */
.topnav { position: sticky; top: 0; z-index: 30; background: var(--ground) var(--courses); border-bottom: 1px solid var(--rule); }
.topnav nav { display: flex; justify-content: center; gap: clamp(2px, 1.5vw, 26px); max-width: 700px; margin: auto; padding: 0 4px; }
.topnav a {
  flex: 0 1 auto; display: flex; align-items: center; justify-content: center; min-height: var(--nav-h); padding: 2px clamp(10px, 3.4vw, 18px);
  font: 700 clamp(.9375rem, .55vw + .55rem, 1.25rem)/1.1 var(--font-label); text-decoration: none; color: var(--text);
}
.topnav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 54px; padding: 10px 18px; border-radius: 8px; border: 0;
  font: 700 1.1875rem/1.2 var(--font-label); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-call { background: var(--red); color: var(--on-red); box-shadow: 0 3px 0 var(--red-dark); }
.btn-call:hover { background: var(--red-press); }
.btn-call:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-dark); }
.btn-way { border: 2px solid var(--text); color: var(--text); min-height: 48px; font-size: 1.0625rem; background: transparent; }
.btn-way:hover { background: var(--text); color: var(--ground); }
.btn-s { min-height: 46px; font-size: 1rem; padding: 8px 14px; }

/* ------------------------------------------------------------------ chalk tags, like the ones on their shelves */
.chalk {
  --r: 7px;
  position: relative; display: inline-block; padding: .34em .95em .4em; color: var(--chalk-white);
  font: 400 1.125rem/1.15 var(--font-chalk);
  background:
    radial-gradient(circle at 0 0, transparent var(--r), var(--chalk) calc(var(--r) + .6px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--r), var(--chalk) calc(var(--r) + .6px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--r), var(--chalk) calc(var(--r) + .6px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--r), var(--chalk) calc(var(--r) + .6px)) 100% 100% / 51% 51% no-repeat;
}
.chalk::before { content: ""; position: absolute; inset: 4px; border: 1.5px dotted rgba(255, 255, 255, .8); border-radius: 3px; pointer-events: none; }

/* ------------------------------------------------------------------ their aisle signs: a dome tab on a black plate */
.dome {
  display: inline-flex; align-items: flex-end; justify-content: center; width: 3.1em; height: 1.72em; padding-bottom: .1em;
  border-radius: 99em 99em 0 0; background: var(--dome); color: var(--dome-text); font: 700 1.625rem/1 var(--font-label);
}
.dome-word { width: 3.9em; font-size: 1.25rem; height: 2em; padding-bottom: .22em; }
.dome-s { width: 2.3em; height: 1.35em; font-size: 1.25rem; padding-bottom: .08em; }

.sect { padding-block: clamp(38px, 7vw, 76px) clamp(30px, 6vw, 64px); }
.sign { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: clamp(18px, 3vw, 28px); }
.sign > .dome { margin-left: clamp(14px, 3vw, 26px); }
.sign-plate {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px clamp(14px, 3vw, 26px); border-radius: 5px;
  background: var(--plate); color: var(--plate-text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 2px 0 rgba(0, 0, 0, .3);
}
.sign-plate h2 { flex: 1 1 auto; font: 900 clamp(1.3125rem, 5.4vw, 2.25rem)/1.24 var(--font-head); text-wrap: balance; }
.aisle-plate svg, .ticket-logo { display: block; width: 100%; height: auto; overflow: visible; }
.amp-line { fill: none; stroke: var(--logo-ink); stroke-width: 5.63; }

/* Wherever their logo sits on a white plate, it keeps its own colors, in every look. */
.aisle-plate, .ticket-logo, .plate-logo, .sc-plate {
  --logo-back: #CDCFCB; --logo-right: #A6A6A6; --logo-front: #000000; --logo-ink: #000000; --name-halo: transparent; --name-halo-w: 0;
}

/* ------------------------------------------------------------------ 1. the first screen */
.hero { position: relative; isolation: isolate; }
.sky {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--sky-h, 42%); opacity: 0; pointer-events: none; transition: opacity 1.4s ease;
  background: linear-gradient(#1E2541 0%, #39395C 42%, #8A5F72 70%, #DB9E7C 90%, rgba(219, 158, 124, 0) 100%);
}
.dusk .sky { opacity: 1; }
.sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFF8E4; animation: twinkle 3.4s ease-in-out infinite paused; }
.dusk .sky i { animation-play-state: running; }
.sky i:nth-child(3n) { animation-delay: -1.2s; width: 2px; height: 2px; }
.sky i:nth-child(3n + 1) { animation-delay: -2.3s; }
@keyframes twinkle { 50% { opacity: .35; } }
.paused .sky i { animation-play-state: paused; }

.hero-grid { padding-top: 2px; }
.piece { position: relative; width: min(94vw, 620px); margin: 0 auto; }
#stage { display: block; width: 100%; height: auto; overflow: visible; }
/* The quote: it explains the hat, so it gets real size. The space above it is held open for the hint. */
.quote { margin: 2.4rem auto 0; padding-inline: 8px; text-align: center; }
.quote-line { display: block; font: 900 clamp(1.0625rem, 4.86vw, 1.625rem)/1.25 var(--font-head); text-wrap: balance; }
.quote-by { display: block; margin-top: 3px; font: 600 .8125rem/1.3 var(--font-label); color: var(--text-soft); }

.hero-panel {
  width: min(100%, 460px); margin: 10px auto 0; padding: 0 var(--gutter) 20px; text-align: center;
  display: flex; flex-direction: column; gap: 9px;
}
.hours-short { font: 600 1rem/1.42 var(--font-label); margin-top: 5px; }
.addr { font: 600 1rem/1.35 var(--font-label); }
.hero-panel .small { margin-top: -3px; }

/* Their logo's own parts: colors can change with the look */
.lg-back { fill: var(--logo-back); }
.lg-right { fill: var(--logo-right); }
.lg-front { fill: var(--logo-front); }
.lg-ink { fill: var(--logo-ink); stroke: var(--name-halo); stroke-width: var(--name-halo-w); paint-order: stroke; stroke-linejoin: round; }

/* The rope */
.ropeInk { fill: none; stroke: var(--logo-ink); stroke-linecap: butt; stroke-linejoin: bevel; }
.ropeHalo { fill: none; stroke: var(--name-halo); stroke-linecap: round; stroke-linejoin: round; }
.flying .ropeInk { stroke: var(--rope-ink); stroke-linecap: round; stroke-linejoin: round; }
.snap { fill: none; stroke: var(--logo-ink); stroke-width: 3; stroke-linecap: round; }

/* Him: their tank drawing, in dark ink on a pale body */
.tk > path, .tk > rect { fill: var(--tank); stroke: var(--ink); stroke-width: 3.4; stroke-linejoin: round; }
.tk > .lbl { fill: var(--white); stroke: none; }
.tk > .side { fill: none; }
.tk > .hole { fill: var(--tank); stroke-width: 2.6; }
.tk > .band { fill: var(--ink); stroke: none; }
.tk > .bandline { fill: none; stroke: var(--tank); stroke-width: 1.1; }
.tk > .win { fill: var(--white); stroke-width: 2.8; }
.tk > .valve { fill: var(--tank); stroke-width: 2.4; }
.eye { fill: #000; }
.chainLink { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.chainEdge { fill: var(--ink); }
.coil ellipse { fill: none; stroke: var(--rope-ink); stroke-width: 4.2; }

.hatB { fill: var(--hat); stroke: var(--hat-edge); stroke-width: 2.4; paint-order: stroke; }
.hatBand { fill: var(--hat-band); }
.hatLine { fill: none; stroke: var(--hat-line); stroke-width: 2; stroke-linecap: round; }
.digits { fill: none; stroke: #000; stroke-width: .7; }

.bd { fill: var(--red); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.bdfold { fill: none; stroke: var(--red-dark); stroke-width: 1.8; stroke-linecap: round; }
.bddots { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; }

.rail { fill: none; stroke: var(--red); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.rail.thin { stroke-width: 4.6; }
.plate { fill: none; stroke: var(--red); stroke-width: 5.4; stroke-linecap: round; stroke-linejoin: round; }
.plateU { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }

.tire { fill: var(--tire); stroke: var(--hat-edge); stroke-width: 2; }
.tread { fill: none; stroke: var(--tread); stroke-width: 1.6; stroke-dasharray: 3.2 3.6; }
.hub { fill: var(--red); stroke: var(--tire); stroke-width: 1; }
.lug { fill: var(--lug); }
.cap { fill: var(--cap); }

/* The things he ropes, all in one hand: even ink line, flat color */
.o { stroke: var(--ink); stroke-width: 3.4; stroke-linejoin: round; }
.o2 { stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fine { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.seam { fill: none; stroke: var(--seam); stroke-width: 2; }
.sheen { fill: none; stroke: var(--sheen); stroke-width: 3.4; stroke-linecap: round; opacity: .7; }
.sheen2 { fill: none; stroke: var(--key-sheen); stroke-width: 3.4; stroke-linecap: round; }
.sheen3 { fill: none; stroke: var(--pool-light); stroke-width: 4; stroke-linecap: round; }
.sheen4 { fill: none; stroke: var(--iron-sheen); stroke-width: 3.4; stroke-linecap: round; }
.sheen5 { fill: none; stroke: var(--brass-sheen); stroke-width: 4; stroke-linecap: round; }
.thread { fill: none; stroke: var(--thread); stroke-width: 2; }
.grain { fill: none; stroke: var(--grain); stroke-width: 1.8; stroke-linecap: round; }
.fire-glow { fill: var(--flame); opacity: .22; }

/* The chalk tag inside the drawing */
.tagBg { fill: var(--chalk); }
.tagDots { fill: none; stroke: var(--chalk-white); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: .01 5.4; opacity: .85; }
.tagT { fill: var(--chalk-white); font-family: var(--font-chalk); }
.tagString { fill: none; stroke: var(--chalk); stroke-width: 1.8; stroke-linecap: round; }
.tagArrow { fill: none; stroke: var(--chalk-yellow); stroke-linecap: round; stroke-linejoin: round; }

/* He stays hidden until the script is ready to bring him on. Without the script, he's just standing there. */
.js:not(.rope-ready) #heWrap, .js:not(.rope-ready) .stillProp { visibility: hidden; }

/* The tap areas are real buttons you can't see. */
.hit {
  position: absolute; display: block; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#btnAmp, #btnThing { touch-action: manipulation; }
#btnHe { left: 0; top: 0; touch-action: pan-y; cursor: grab; }
#btnHe:active { cursor: grabbing; }

.pause {
  position: absolute; left: -6px; top: 0; width: 44px; height: 44px; padding: 0; border: 0; display: grid; place-items: center;
  background: transparent; cursor: pointer; color: var(--text); -webkit-tap-highlight-color: transparent;
}
.pause::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; background: var(--ground); }
.pause svg { position: relative; }
.pause svg path { fill: currentColor; }
.dusk .pause { color: #FFF8E4; }
.dusk .pause::before { background: transparent; }

/* A chalk hint that points at the & after the first act */
.hint {
  position: absolute; left: 58.95%; top: calc(100% + 3px); transform: translateX(-50%); white-space: nowrap; pointer-events: none; z-index: 3;
  font-size: 1.0625rem; animation: hintbob 1.8s ease-in-out infinite;
}
.hint[hidden] { display: none; }
.hint::after { content: ""; position: absolute; left: 50%; top: -6px; margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--chalk); }
@keyframes hintbob { 50% { transform: translateX(-50%) translateY(3px); } }
.paused .hint { animation-play-state: paused; }

/* ------------------------------------------------------------------ their counter: pine top, corrugated panels in black frames */
.counterfront { position: relative; }
.pine-edge {
  height: var(--edge-h);
  background: url("../img/pine-grain.svg") 0 0 / 900px 315px, linear-gradient(var(--pine-hi), var(--pine-deep) 70%, var(--pine-edge));
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .55) inset, 0 -4px 10px -6px rgba(0, 0, 0, .4);
}
.corrugated {
  --post: clamp(10px, 1.1vw, 16px);
  --panel: clamp(190px, 25vw, 420px);
  height: var(--band-h);
  border-block: clamp(6px, .7vw, 10px) solid var(--frame);
  background:
    /* the black posts between panels */
    linear-gradient(90deg, var(--frame) var(--post), transparent var(--post)) 0 0 / var(--panel) 100%,
    /* light falling off toward the floor */
    linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%, rgba(20, 24, 28, .3)),
    /* the ribs */
    repeating-linear-gradient(90deg, var(--corr-low) 0, var(--corr) calc(var(--rib) * .2), var(--corr-hi) calc(var(--rib) * .4), var(--corr-mid) calc(var(--rib) * .55), var(--corr) calc(var(--rib) * .75), var(--corr-low) var(--rib));
}

/* His store, right under the band */
.his-store img { display: block; width: 100%; height: auto; }

/* The pine top of the counter, seen from above */
.slab {
  padding-block: clamp(20px, 3.5vw, 36px) clamp(22px, 3.5vw, 38px);
  background: url("../img/pine-grain.svg") 0 0 / 900px 315px, linear-gradient(var(--pine-hi), var(--pine));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}
/* Without JavaScript the answers lie right on the wood, so that wood goes without knots */
html:not(.js) .slab { background-image: url("../img/pine-lines.svg"), linear-gradient(var(--pine-hi), var(--pine)); }
.slab-edge { height: 15px; background: linear-gradient(var(--pine-edge), var(--pine-edge-dark)); border-bottom: 7px solid var(--frame); }

/* ------------------------------------------------------------------ 2. the counter */
#counter { padding-top: clamp(26px, 5vw, 48px); }
.asks { display: grid; gap: 14px; }
.ask-q { font: 400 1.25rem/1.2 var(--font-chalk); }
.ask-a { margin-top: 6px; }
.ask-a a:not(.btn) { font: 700 1em/1 var(--font-label); color: var(--pine-ink); white-space: nowrap; text-underline-offset: 3px; }
.ask-tabs { display: flex; gap: 6px; align-items: flex-end; }
.ask-a .btn { margin-top: 10px; }

/* With the script, each question is a chalk tag you tap. Under the tags is his little stage, and under that the answer,
   so nothing above the answer ever moves. */
.counter-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.js .asks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.js .ask-a { display: none; }
.js .ask-q { margin: 0; }
.chalk-btn {
  width: 100%; min-height: 54px; border: 0; cursor: pointer; font: 400 1.3125rem/1.12 var(--font-chalk); padding: .5em .7em;
  filter: drop-shadow(0 2px 1.5px rgba(40, 24, 4, .55)); -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
}
.chalk-btn:hover { transform: translateY(-1px); }
.chalk-btn[aria-expanded="true"] { color: var(--chalk-yellow); }
.chalk-btn[aria-expanded="true"]::before { border-color: var(--chalk-yellow); }
.ask-answer:empty { display: none !important; }
.js .ask-answer .ask-a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; margin: 0; padding: 12px 14px; border-radius: 6px;
  background: var(--ticket-paper); color: var(--ticket-text); box-shadow: 0 2px 0 rgba(90, 60, 20, .5), 0 8px 14px -8px rgba(60, 36, 8, .6);
  font-size: .9375rem; line-height: 1.5; transition: box-shadow .25s ease;
}
.ask-answer .ask-a > p { grid-column: 1; }
.ask-answer .ask-tabs { grid-column: 2; grid-row: 1; }
.ask-answer .btn { grid-column: 1 / -1; margin-top: 4px; }
.ask-a a:not(.btn) { color: inherit; }
.ask-answer.lit-up .ask-a { box-shadow: 0 0 0 3px var(--red), 0 0 22px 4px rgba(190, 63, 62, .45); }

/* The small stage: their three ridges, him on the peak, and whatever he's gone and got */
.fetch-stage { position: relative; width: min(100%, 300px); margin-inline: auto; }
.fs-art { display: block; width: 100%; height: auto; overflow: visible; }
.fs-rope { fill: none; stroke: var(--rope-ink); stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fs-string { fill: none; stroke: var(--chalk); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.fs-tag {
  position: absolute; right: 0; top: 0; max-width: 62%; display: inline-flex; align-items: center; gap: .3em; padding: .34em .55em .38em .7em; border: 0; cursor: pointer;
  font-size: .9375rem; line-height: 1.08; text-align: left; filter: drop-shadow(0 2px 1.5px rgba(40, 24, 4, .5)); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.fs-tag[hidden] { display: none; }
/* It's part of the little picture, like the tag on the first screen, so it keeps its size when the phone's text is set large. */
.fs-tag { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.tag-go { flex: 0 0 auto; width: .85em; height: .64em; }
.tag-go path { fill: none; stroke: var(--chalk-yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ where he took you: it lights up for a couple of seconds */
.lay.lit-up img { outline: 4px solid var(--red); outline-offset: 2px; box-shadow: 0 0 26px 8px rgba(190, 63, 62, .6); }
.lay.lit-up .chalk { color: var(--chalk-yellow); }
.table-also.lit-up { outline: 3px solid var(--red); outline-offset: 5px; border-radius: 3px; box-shadow: 0 0 22px 8px rgba(190, 63, 62, .4); }
.aisle.lit-up .aisle-sign { box-shadow: 0 0 0 3px var(--red), 0 0 22px 4px rgba(190, 63, 62, .45); }
.aisle.lit-up .dome { background: var(--red); }
.lay:focus, .aisle:focus, .table-also:focus, #scaleTool:focus { outline: none; }

/* ------------------------------------------------------------------ 3. propane: the scale */
.scale-tool { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.st-label { font: 700 1.0625rem/1.25 var(--font-label); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 8px 13px; border: 2px solid var(--text); border-radius: 7px; background: transparent; color: var(--text); cursor: pointer;
  font: 600 .9375rem/1.15 var(--font-label); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.chip[aria-pressed="true"] { background: var(--text); color: var(--ground); }
#levelChips { gap: 6px; }
#levelChips .chip { flex: 1 1 auto; padding-inline: 6px; font-size: .875rem; }
.frac-wrap { white-space: nowrap; }
.frac { display: inline-flex; align-items: center; vertical-align: -.02em; margin-left: .06em; font-size: .68em; line-height: 1; }
.frac i { font-style: normal; font-weight: 700; }
.frac i:first-child { transform: translateY(-.32em); }
.frac i:last-child { transform: translateY(.3em); }
.frac b { font-weight: 600; transform: rotate(14deg) scaleY(1.25); margin-inline: .08em; }

.st-stage { position: relative; }
#scaleSvg { display: block; width: 100%; height: auto; overflow: hidden; }
.st-note { min-height: 1.4em; margin-top: 4px; text-align: center; font: 600 .9375rem/1.3 var(--font-label); color: var(--text-soft); }

.sc-floor { fill: url(#floorFade); }
.floorStop { stop-color: var(--floor); }
.sc-body { fill: var(--scale-body); }
.sc-tread { fill: none; stroke: var(--scale-tread); stroke-width: 3; stroke-dasharray: 5 5; }
.sc-collar { fill: var(--scale-bezel); }
.sc-plate rect { fill: var(--white); }
.dial-bezel { fill: var(--scale-bezel); }
.dial-rim { fill: var(--dial-rim); }
.dial-face { fill: var(--dial-face); }
.dial-track { fill: none; stroke: var(--dial-track); stroke-width: 13; }
.dial-pay { fill: none; stroke: var(--red); stroke-width: 13; }
.dial-ticks { fill: none; stroke: var(--dial-mark); stroke-width: 1.4; }
.dial-ticks-b { fill: none; stroke: var(--dial-mark); stroke-width: 2.6; }
.dial-word { fill: var(--dial-mark); font: 700 11px var(--font-label); text-anchor: middle; letter-spacing: .03em; }
.dial-mark { fill: var(--dial-mark); }
.dial-needle { fill: var(--scale-bezel); }
.dial-hub { fill: var(--scale-bezel); }
.dial-hubcap { fill: var(--dial-rim); }
.dial-you { fill: var(--red); font: 700 14.5px var(--font-label); text-anchor: middle; }
.sc-tank { fill: var(--tank); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.sc-tank-line { fill: none; stroke: var(--ink); stroke-width: 2.6; }
.sc-tank-hole { fill: var(--tank); stroke: var(--ink); stroke-width: 1.8; }
.sc-tank-win { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.sc-level { fill: var(--tank-level); }
.sc-level-top { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: .55; }
.sc-rail { fill: none; stroke: var(--scale-body); stroke-width: 5; stroke-linecap: round; }
.sc-rope { fill: none; stroke: var(--rope-ink); stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; }
/* An RV's tank is bolted on, so that choice gets a camper instead of the scale */
#scaleGear { transition: opacity .25s ease; }
.rv #scaleGear { opacity: 0; }
.rv #levelPick { display: none; }
.cp-body { fill: var(--tank); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.cp-stripe { fill: var(--logo-right); }
.cp-glass { fill: #CFDCE2; stroke: var(--ink); stroke-width: 2.2; }
.cp-door { fill: var(--tank); stroke: var(--ink); stroke-width: 2.2; }
.cp-knob { fill: var(--ink); }
.cp-steel { fill: none; stroke: var(--ink); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }

.btn-fill {
  width: 100%; margin-top: 12px; min-height: 58px; background: var(--plate); color: var(--plate-text); font-size: 1.3125rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45); touch-action: manipulation;
}
.btn-fill[disabled] { opacity: .55; cursor: default; }

/* The ticket feeds up out of a black slot in the scale */
.st-ticket { display: flex; flex-direction: column; align-items: stretch; }
.ticket-room { overflow: hidden; position: relative; display: flex; justify-content: center; align-items: flex-end; padding-inline: 8px; }
.ticket {
  width: min(100%, 20rem); padding: 26px 18px 16px; background: var(--ticket-paper); color: var(--ticket-text); text-align: center;
  clip-path: polygon(0 12px, 4% 6px, 8% 12px, 12% 5px, 16% 11px, 20% 6px, 25% 12px, 29% 4px, 33% 11px, 38% 7px, 42% 12px, 46% 5px, 50% 11px, 54% 6px, 58% 12px, 63% 4px, 67% 11px, 71% 6px, 75% 12px, 79% 5px, 84% 11px, 88% 6px, 92% 12px, 96% 5px, 100% 11px, 100% 100%, 0 100%);
}
.ticket-logo { width: 8.5rem; margin: 0 auto 10px; }
.ticket-sign { font: 900 1.0625rem/1.22 var(--font-head); letter-spacing: .01em; margin-bottom: 10px; }
.ticket-line { font: 600 .9375rem/1.45 var(--font-label); }
.ticket-line em { font-style: italic; font-weight: 700; }
.ticket-slot { height: 15px; margin-inline: 0; border-radius: 3px; background: var(--scale-body); box-shadow: inset 0 5px 0 -1px #000, 0 2px 0 rgba(0, 0, 0, .3); }
.ticket-call { margin-top: 12px; }
/* With the script, the ticket waits inside the slot until there's something to print. */
.js .st-ticket { display: none; }
.js .st-ticket.on { display: flex; }
.js .ticket-room { height: var(--ticket-h, 0px); transition: height .28s ease; }
.js .ticket { transform: translateY(var(--ticket-y, 100%)); transition: transform 1.25s cubic-bezier(.3, .7, .3, 1); }
.instant .ticket-room, .instant .ticket, .instant .ticket-call { transition: none !important; }
.ticket-call { visibility: hidden; opacity: 0; transition: opacity .3s ease .9s; }
.st-ticket.printed .ticket-call, html:not(.js) .ticket-call { visibility: visible; opacity: 1; }

.propane-under { display: grid; gap: 24px; margin-top: clamp(26px, 5vw, 44px); }
.facts { display: grid; gap: 14px; font-size: .9375rem; line-height: 1.55; }
.facts dt { font: 700 1rem/1.3 var(--font-label); }
.print { justify-self: center; width: 100%; max-width: 28.75rem; padding: 9px; background: var(--white); box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 10px 18px -10px rgba(0, 0, 0, .55); }
.print img { display: block; width: 100%; height: auto; }
.print-wide { max-width: none; }

/* ------------------------------------------------------------------ 4. the store */
.lead { font: 400 clamp(1.1rem, 3.4vw, 1.375rem)/1.45 var(--font-body); margin-bottom: 18px; }
/* The search: the box on top, then the answer with his stage beside it. The stage holds the height, so the signs below stay put. */
.where { margin-bottom: 14px; }
.js .where.needs-js { display: grid !important; grid-template-columns: minmax(0, 1fr) min(54%, 204px); column-gap: 10px; align-items: center; }
.where-ask { grid-column: 1 / -1; }
.where label { display: block; font: 900 1.25rem/1.25 var(--font-head); margin-bottom: 7px; }
.where input {
  width: 100%; max-width: 28.75rem; min-height: 52px; padding: 10px 14px; border: 2.5px solid var(--text); border-radius: 7px; background: var(--white); color: #1B1A17;
  font: 600 1.0625rem/1.2 var(--font-label); -webkit-appearance: none; appearance: none;
}
.where input::placeholder { color: #6B675F; opacity: 1; }
.where-ans { min-height: 1.5em; margin-top: 8px; font: 700 1rem/1.32 var(--font-label); }
.where-ans.miss { font-weight: 600; }
.where-ans a { white-space: nowrap; text-underline-offset: 3px; }
#searchStage { width: 100%; margin-top: 6px; }
#searchStage .fs-tag { font-size: .875rem; }

.aisles {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; align-items: flex-start;
}
.aisle { flex: 0 0 min(80vw, 330px); scroll-snap-align: start; }
.aisle-amp { flex-basis: min(88vw, 380px); }
.aisle-amp .slats { display: grid; grid-template-columns: 1fr 1fr; }
.aisle-amp .slats .w { grid-column: 1 / -1; }
.aisle-amp .aisle-sign { grid-template-columns: minmax(0, 1fr) 25%; }
.aisle > a { display: block; text-decoration: none; color: inherit; }
.aisle .dome { margin-left: 22px; vertical-align: bottom; }
.aisle-sign {
  display: grid; grid-template-columns: minmax(0, 1fr) 25%; gap: 7px; padding: 7px; border-radius: 5px; background: var(--plate);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 3px 0 rgba(0, 0, 0, .3); transition: box-shadow .2s ease;
}
.slats { display: flex; flex-direction: column; gap: 3px; }
.slats li {
  display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 34px; padding: 5px 5px; text-align: center; border-radius: 2px;
  background: var(--slat); color: #FFFFFF; font: 700 .75rem/1.14 var(--font-label); letter-spacing: .025em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .55);
}
.slats .w { background: var(--slat-w); color: var(--slat-w-text); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.aisle-plate { display: grid; place-items: center; align-self: center; aspect-ratio: 1 / 1; padding: 5px; border-radius: 11px; background: var(--white); }
/* The aisles they haven't told us about stay blank and step back: just an outline to fill in */
.aisle-rest { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px; border: 1.5px dashed var(--rule); border-radius: 5px; color: var(--text-soft); text-align: center; }
.aisle-half .aisle-rest { margin-top: 4px; }
.here { font: italic 400 .8125rem/1.2 var(--font-body); }
.aisle-empty .dome, .aisle-half .aisle-rest + .dome { opacity: .75; }
.aisle.lit .aisle-sign { box-shadow: 0 0 0 3px var(--red), 0 0 22px 4px rgba(190, 63, 62, .45); }
.aisle.lit .dome { background: var(--red); }
.slats li.lit { background: var(--red); color: #FFFFFF; }
.brands { margin-top: 4px; font: 600 .9375rem/1.45 var(--font-label); color: var(--text-soft); }

/* The & More: their pine display table, with black corner brackets */
#more { padding-top: clamp(26px, 5vw, 44px); scroll-margin-top: calc(var(--nav-h) + 6px); }
.table {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding: 34px 16px 48px;
  background: url("../img/pine-grain.svg") 0 0 / 900px 315px, linear-gradient(var(--pine-hi), var(--pine));
  border-radius: 3px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 9px 0 var(--pine-edge-dark), 0 18px 24px -14px rgba(0, 0, 0, .5);
}
.bracket {
  position: absolute; width: 46px; height: 46px; background:
    radial-gradient(circle at 10px 10px, #6A6D70 2.6px, transparent 3.2px),
    radial-gradient(circle at 35px 10px, #6A6D70 2.6px, transparent 3.2px),
    radial-gradient(circle at 10px 35px, #6A6D70 2.6px, transparent 3.2px),
    var(--frame);
  clip-path: polygon(0 0, 100% 0, 100% 42%, 42% 42%, 42% 100%, 0 100%);
}
.bracket.tl { left: 0; top: 0; }
.bracket.tr { right: 0; top: 0; transform: scaleX(-1); }
.bracket.bl { left: 0; bottom: 0; transform: scaleY(-1); }
.bracket.br { right: 0; bottom: 0; transform: scale(-1, -1); }
.lay { position: relative; min-width: 0; }
.lay img { display: block; width: 100%; height: auto; border: 5px solid var(--white); box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 7px 12px -6px rgba(50, 28, 4, .75); }
.lay:nth-of-type(odd) img { transform: rotate(-.5deg); }
.lay:nth-of-type(even) img { transform: rotate(.6deg); }
.lay figcaption { position: relative; margin-top: -15px; padding-left: 8px; }
.lay .chalk { font-size: 1.0625rem; filter: drop-shadow(0 2px 1.5px rgba(40, 24, 4, .6)); }
.lay-line { display: block; margin-top: 6px; padding-right: 4px; font: 600 .875rem/1.35 var(--font-label); color: var(--pine-ink); }
.lay.wide, .lay.mid { grid-column: 1 / -1; }
.lay.tall:last-of-type { grid-column: 1 / -1; }
.lay.tall:last-of-type img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 62%; }
.table-also { margin-top: 26px; font-size: .9375rem; line-height: 1.55; }

/* ------------------------------------------------------------------ 5. the story */
.story-grid { display: grid; gap: 22px; }
/* Full width on phones. The whole photo is the button, and the tag sits on the wall beside the sign. */
.sign-photo { position: relative; margin-inline: calc(-1 * var(--gutter)); }
.sign-photo img { display: block; width: 100%; height: auto; }
.sign-hit { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.js .sign-hit.needs-js { display: block !important; }
.sign-hit:focus-visible { outline-offset: -5px; }
.sign-tag { position: absolute; left: 64.5%; top: 9%; white-space: nowrap; font-size: clamp(.875rem, 4.2vw, 1.125rem); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
.sign-tag::after { content: ""; position: absolute; left: -7px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 0; border-right-color: var(--chalk); }
.story-body p + p { margin-top: 1em; }
.stayed { font: 900 1.5rem/1.3 var(--font-head); }
.story-body .small { margin-top: 1.2em; }

/* The flood: the new look grows out of the sign in a circle. The old page gets a hole just bigger than that circle, and
   the yellow behind it shows through the gap, like the keyline on the real sign. */
@property --flood-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
.flooding::view-transition-group(root) { animation: none; }
.flooding::view-transition-image-pair(root) { background: var(--flood-edge); isolation: auto; }
.flooding::view-transition-old(root), .flooding::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.flooding::view-transition-new(root) { clip-path: circle(var(--flood-r) at var(--flood-x) var(--flood-y)); }
.flooding::view-transition-old(root) {
  -webkit-mask-image: radial-gradient(circle at var(--flood-x) var(--flood-y), transparent calc(var(--flood-r) + 7px), #000 calc(var(--flood-r) + 7.6px));
  mask-image: radial-gradient(circle at var(--flood-x) var(--flood-y), transparent calc(var(--flood-r) + 7px), #000 calc(var(--flood-r) + 7.6px));
}
/* Browsers without that get a quick cross-fade. */
.look-fade, .look-fade * { transition: color .28s ease, background-color .28s ease, fill .28s ease, stroke .28s ease, border-color .28s ease !important; }

/* ------------------------------------------------------------------ 6. visit */
.visit-grid { display: grid; gap: 26px; }
.visit-info > * + * { margin-top: 12px; }
.addr-big { font: 700 clamp(1.25rem, 4.6vw, 1.625rem)/1.3 var(--font-label); }
.visit-btns { display: grid; gap: 10px; margin-block: 16px; max-width: 28.75rem; }
.hours { width: 100%; max-width: 28.75rem; border-collapse: collapse; font: 600 .9375rem/1.25 var(--font-label); }
.hours th, .hours td { padding: 6px 0; text-align: left; border-bottom: 1px solid var(--rule); font-weight: 600; }
.hours td { text-align: right; }
.visit-pics { display: grid; gap: 16px; align-content: start; }

/* Three ridges, small, at the foot of the page */
.footridges { width: min(52vw, 230px); margin: clamp(30px, 6vw, 54px) auto -4px; }
.footridges svg { width: 100%; height: auto; overflow: hidden; }

/* ------------------------------------------------------------------ the footer */
.footer { margin-top: 0; }
.corrugated-foot { height: clamp(58px, 7vw, 110px); }
.foot-plate { padding-block: 24px 26px; background: var(--plate); color: var(--plate-text); }
.js .foot-plate { padding-bottom: 86px; } /* room for the call bar on phones */
.foot-grid { display: grid; gap: 18px; font: 600 .9375rem/1.5 var(--font-label); }
.foot-grid a { color: inherit; }
.foot-name { font: 900 1.1875rem/1.3 var(--font-head); margin-bottom: 4px; }
.foot-links p + p { margin-top: 8px; }
.credit { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 600; text-decoration: none; opacity: .85; }
.credit:hover { opacity: 1; text-decoration: underline; }
.credit img { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ the call bar on phones */
.callbar {
  position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; gap: 6px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--plate);
  transform: translateY(110%); transition: transform .24s ease; box-shadow: 0 -2px 10px rgba(0, 0, 0, .3);
}
.callbar.on { transform: none; }
.callbar a {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px 6px; border-radius: 7px; text-decoration: none;
  font: 700 1.0625rem/1.1 var(--font-label);
}
.bar-call { background: var(--red); color: var(--on-red); }
.bar-way { background: #2B2B2F; color: #FFFFFF; }
.bar-room { flex: 0 0 92px; display: flex; align-items: stretch; }

/* ------------------------------------------------------------------ the paint chips */
.fan-tab {
  display: flex; align-items: center; gap: 6px; border: 0; padding: 4px 8px 4px 4px; border-radius: 7px; background: var(--white); color: #1B1A17; cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 3px 9px rgba(0, 0, 0, .3); -webkit-tap-highlight-color: transparent;
}
.fan-word { font: 700 .625rem/1.08 var(--font-label); text-align: left; width: 58px; }
.fan-cards { position: relative; flex: 0 0 22px; height: 30px; }
.fan-cards i { position: absolute; left: 6px; bottom: 1px; width: 11px; height: 26px; border-radius: 2px; transform-origin: 50% 100%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .28); }
.fan-cards .c1 { background: #F4F1EA; transform: rotate(-26deg); }
.fan-cards .c2 { background: #292C2E; transform: rotate(-9deg); }
.fan-cards .c3 { background: #C39E6A; transform: rotate(9deg); }
.fan-cards .c4 { background: #E3D85E; transform: rotate(26deg); }

/* Phones: the tab rests on the hero's counter, then rides in the call bar */
.counterfront > .fan-tab { position: absolute; right: 8px; top: calc(100% - 52px); z-index: 2; }
.bar-room > .fan-tab { width: 100%; padding-right: 4px; }

.fan-panel {
  position: fixed; z-index: 40; right: 6px; bottom: calc(var(--panel-bottom, 8px) + env(safe-area-inset-bottom)); width: min(calc(100vw - 12px), 400px); padding: 12px 10px 10px; border-radius: 10px;
  background: var(--white); color: #1B1A17; box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 14px 34px rgba(0, 0, 0, .42);
}
.fan-panel[hidden] { display: none; }
.fan-title { font: 700 1rem/1.25 var(--font-label); text-align: center; margin-bottom: 10px; }
.fan-chips { display: flex; justify-content: center; gap: 2px; padding: 8px 6px 2px; }
.pc {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 0 0 5px; border: 1px solid rgba(0, 0, 0, .28); border-radius: 4px; background: var(--white); color: #1B1A17;
  cursor: pointer; text-align: left; overflow: hidden; box-shadow: 0 3px 7px rgba(0, 0, 0, .28); transform-origin: 50% 130%; transition: transform .18s ease; -webkit-tap-highlight-color: transparent;
}
.pc-1 { transform: rotate(-6deg) translateY(4px); }
.pc-2 { transform: rotate(-2deg); }
.pc-3 { transform: rotate(2deg); }
.pc-4 { transform: rotate(6deg) translateY(4px); }
.pc[aria-pressed="true"] { outline: 3px solid var(--red); outline-offset: 1px; }
.pc-sw { display: block; height: 64px; }
.pc-1 .pc-sw { background: #F4F1EA; }
.pc-2 .pc-sw { background: #292C2E; }
.pc-3 .pc-sw { background: #C39E6A; }
.pc-4 .pc-sw { background: #111111; box-shadow: inset 0 0 0 2px #E3D85E; }
.pc-name { display: block; padding: 5px 5px 0; font: 700 .71875rem/1.12 var(--font-label); min-height: 2.3em; }
.pc-code { display: block; padding: 2px 5px 0; font: 600 .625rem/1.1 var(--font-label); color: #5C5850; }
.fan-strip {
  display: block; width: 100%; min-height: 40px; margin-top: 14px; border: 2px solid #1B1A17; border-radius: 6px; background: transparent; color: #1B1A17; cursor: pointer;
  font: 700 .875rem/1.1 var(--font-label);
}

@media (max-width: 359px) {
  .js .where.needs-js { grid-template-columns: minmax(0, 1fr); }
  #searchStage { width: min(100%, 230px); margin-inline: auto; }
}

/* ------------------------------------------------------------------ a little wider: a folded-out phone, a small tablet */
@media (min-width: 620px) {
  .js .asks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .visit-btns { grid-template-columns: 1fr 1fr; }
  .visit-btns, .hours { max-width: 32.5rem; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
  .foot-grid { grid-template-columns: repeat(3, auto); justify-content: space-between; }
}

/* From here up there's room for a right-hand margin, so the paint chips stand in it. No call bar. */
@media (min-width: 760px) {
  :root { --gutter: 46px; --rib: 13px; }
  .js .callbar.needs-js { display: none !important; }
  .js .foot-plate { padding-bottom: 26px; }
  .fan { position: fixed; z-index: 40; right: 0; bottom: 20px; }
  .fan-tab { flex-direction: column; gap: 8px; width: 36px; padding: 8px 2px 10px; border-radius: 7px 0 0 7px; }
  .fan-cards { flex: 0 0 30px; width: 30px; }
  .fan-cards i { left: 10px; }
  .fan-word { writing-mode: vertical-rl; transform: rotate(180deg); width: auto; font-size: .75rem; white-space: nowrap; }
  /* The answer on the left, and at the end of the pine, his stage */
  .counter-grid { grid-template-columns: minmax(0, 1fr) clamp(250px, 30%, 28rem); column-gap: clamp(22px, 3vw, 44px); align-items: start; }
  .asks { grid-column: 1; grid-row: 1; }
  .ask-answer { grid-column: 1; grid-row: 2; }
  .fetch-stage#counterStage { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
  .js .asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The search: the box and the answer on the left, his stage on the right */
  .js .where.needs-js { grid-template-columns: minmax(0, 30rem) clamp(230px, 26vw, 24rem); grid-template-rows: auto 1fr; justify-content: space-between; align-items: start; }
  .where-ask { grid-column: 1; grid-row: 1; }
  .where-ans { grid-column: 1; grid-row: 2; font-size: 1.125rem; }
  #searchStage { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  #searchStage .fs-tag { font-size: .9375rem; }
  #scaleSvg { max-height: calc(100vh - var(--nav-h) - 124px); }
  .fan-panel { right: 40px; bottom: 16px; width: 400px; }
  .quote { margin-top: 44px; }
  .aisles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 22px 18px; overflow: visible; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .aisle { flex: none; }
  .table { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 24px; padding: 46px 40px 52px; }
  .lay.wide, .lay.mid { grid-column: span 3; }
  .lay.tall { grid-column: span 2; }
  .lay.tall:last-of-type { grid-column: span 2; }
  .lay.tall:last-of-type img { aspect-ratio: auto; }
  .lay .chalk { font-size: 1.1875rem; }
  /* The story: the real sign, large, with the words beside it */
  .story-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(26px, 3.4vw, 54px); align-items: center; }
  .sign-photo { margin-inline: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 12px 22px -12px rgba(0, 0, 0, .6); }
  .sign-tag { font-size: 1.25rem; }
  .visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
  .visit-btns { grid-template-columns: 1fr; }
  .slats li { font-size: .78125rem; }
  /* The scale: the picture on the left, the choices on the right */
  .scale-tool { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(22px, 3.4vw, 46px); row-gap: 16px; align-items: start; }
  .st-stage { grid-column: 1; grid-row: 1 / span 4; }
  .st-size { grid-column: 2; grid-row: 1; }
  .st-level { grid-column: 2; grid-row: 2; }
  .st-ticket { grid-column: 2; grid-row: 3; }
  .propane-under { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 30px; }
}

/* ------------------------------------------------------------------ wide screens: the piece on the left, a black sign on the right, both standing on the counter */
@media (min-width: 980px) {
  .hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 720px); column-gap: clamp(50px, 5vw, 130px); align-items: end;
    margin-inline: auto; padding-inline: clamp(46px, 4vw, 110px);
    min-height: calc(100vh - var(--nav-h) - var(--edge-h) - var(--band-h) - 20px);
  }
  .hero-left { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; padding-bottom: 14px; }
  .piece { width: min(100%, calc((100vh - var(--nav-h) - var(--edge-h) - var(--band-h) - 2.5rem - 2.2vw - 1.6rem - 34px) / .925)); }
  .quote { margin-top: 2.5rem; }
  .quote-line { font-size: clamp(1.3125rem, 1.7vw, 2.5rem); }
  .quote-by { font-size: clamp(.875rem, .9vw, 1.25rem); }
  .hero-panel {
    width: auto; margin: 0; padding: clamp(20px, 1.9vw, 34px); gap: 12px; border-radius: 6px 6px 0 0; text-align: left;
    background: var(--plate); color: var(--plate-text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
    font-size: clamp(1rem, 1.05vw, 1.25rem);
  }
  .hero-panel .btn-call { font-size: clamp(1.1875rem, 1.45vw, 1.75rem); min-height: clamp(56px, 4.4vw, 80px); box-shadow: 0 3px 0 #000; }
  .hero-panel .btn-way { border-color: var(--plate-text); color: var(--plate-text); font-size: clamp(1.0625rem, 1.15vw, 1.375rem); }
  .hero-panel .btn-way:hover { background: var(--plate-text); color: var(--plate); }
  .hours-short li {
    padding: .46em .7em; margin-top: 3px; border-radius: 2px; background: var(--slat); font-size: clamp(.9375rem, 1.04vw, 1.25rem);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .55);
  }
  .hero-panel .addr { font-size: clamp(1rem, 1.1vw, 1.3125rem); }
  .hero-panel .small { color: var(--plate-soft); font-size: clamp(.875rem, .9vw, 1.0625rem); }
  .js .asks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ very wide: everything grows with the screen, so nothing sits in a narrow column */
@media (min-width: 1700px) {
  html { font-size: calc(100vw / 104); }
  :root { --wrap: 80vw; --gutter: 60px; --body-size: 1.0625rem; --rib: 15px; }
  .chalk-btn { font-size: 1.5rem; }
  .js .asks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aisles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
  .slats li { font-size: .84375rem; }
  .here { font-size: 1rem; }
  .sign-tag { font-size: 1.5rem; }
  .fs-tag { font-size: 1.0625rem; }
  .hero-panel { max-width: none; }
}

/* ------------------------------------------------------------------ people who turn off motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* The picture and the ticket already show the finished fill, so there's nothing for this button to start */
  .btn-fill { display: none; }
}

/* ------------------------------------------------------------------ the looks */
[data-look="charcoal"] {
  color-scheme: only dark;
  --ground: #292C2E;
  --courses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='80'%3E%3Cpath d='M0 .75H192M0 40.75H192M.75 0V40M96.75 40V80' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.5'/%3E%3C/svg%3E");
  --text: #F4F1EA;
  --text-soft: #CDCAC2;
  --rule: rgba(244, 241, 234, .26);
  --focus: #F0D85A;
  --logo-back: #FFFFFF;
  --logo-right: #D5D6D1;
  --logo-front: #63686A;
  --logo-ink: #F4F1EA;
  --rope-ink: #F4F1EA;
  --plate: #111214;
  --slat: #202225;
  --dome: #7F8486;
  --hat-edge: rgba(244, 241, 234, .62);
  --tire: #0B0B0A;
  --floor: #F4F1EA;
  --scale-body: #565A5D;
  --scale-tread: #8A8E90;
  --scale-bezel: #0F1011;
}
[data-look="pine"] {
  color-scheme: only light;
  --ground: #C39E6A;
  --courses: url("../img/pine-lines.svg");
  --text: #17120A;
  --text-soft: #33291A;
  --rule: rgba(23, 18, 10, .34);
  --logo-back: #E7DFCE;
  --logo-right: #8F7A58;
  --pine: #DDBF8E;
  --pine-hi: #EBD3A8;
  --floor: #17120A;
  --tank-level: #AFA48F;
}
[data-look="oldsign"] {
  color-scheme: only dark;
  --ground: #0F0F0D;
  --courses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='80'%3E%3Cpath d='M0 .75H192M0 40.75H192M.75 0V40M96.75 40V80' fill='none' stroke='%23E8D65E' stroke-opacity='.05' stroke-width='1.5'/%3E%3C/svg%3E");
  --text: #EADD62;
  --text-soft: #CFC45A;
  --rule: rgba(234, 221, 98, .32);
  --focus: #FFFFFF;
  --logo-back: #6D6838;
  --logo-right: #A69D4C;
  --logo-front: #EADD62;
  --logo-ink: #EADD62;
  --rope-ink: #EADD62;
  --plate: #1C1B16;
  --plate-text: #EADD62;
  --plate-soft: #D6CB5C;
  --slat: #2A2920;
  --slat-w: #EADD62;
  --slat-w-text: #14130E;
  --dome: #6D6838;
  --dome-text: #F6EC8E;
  --hat-edge: rgba(234, 221, 98, .7);
  --floor: #EADD62;
  --scale-body: #5A5730;
  --scale-tread: #A69D4C;
  --scale-bezel: #0B0B09;
  --on-red: #FFFFFF;
}