/* =====================================================================
   Voss & Daughters Auto Repair: design system (home page, cycle 3 rebuild)
   Tokens first. Every colour was measured from a file in the inspiration
   bank and lifted only where borrowings_v1.md names the lift.
   Constraint (binding): no element, no ::before or ::after, no gradient and
   no shadow carries a surface lighter than 75% HSL lightness. Chalk is for
   text, rules and the focus ring only.
   The sticker is the system. A sticker is a skin (.sticker::before): one flat
   amber sheet with a line texture and a cut corner, with a REAL HOLE punched
   through it where the answer lives (today's day, the month the prices were
   set, today's row of the week). Everything printed on the sticker sits on
   top of the skin, so a label can sit inside its own hole.
   Amber means a sticker or an action. Nothing else is amber.
   ===================================================================== */

@font-face{font-family:"Londrina Solid";font-weight:900;font-style:normal;font-display:swap;src:url(fonts/londrina-solid-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Rokkitt";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/rokkitt-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Rokkitt";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/rokkitt-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/zen-kaku-gothic-new-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-weight:900;font-style:normal;font-display:swap;src:url(fonts/zen-kaku-gothic-new-latin-900-normal.woff2) format("woff2")}

:root{
  /* colour: measured, then lifted by contrast arithmetic (see borrowings_v1.md palette gate) */
  --ink:#012C58;        /* Haynes cover navy, held. Page ground and long-read field */
  --board:#781712;      /* price-board red, held. Price wall */
  --tile-a:#7D231B;     /* board tile face, held */
  --tile-b:#6E1310;     /* board tile face, held */
  --seam:#31100E;       /* gap between board tiles, held */
  --reflect:#FAB40F;    /* cover yellow lifted to L52 and warmed to H42. The one reflective colour: stickers and actions only */
  --red:#BD1A14;        /* cover stripe lifted to L41, saturation 98 to 81 (ICP 2: the loudest slab). Same hue (H2). Strap field, Stop-now pieces, badge stripe */
  --blue:#2691D9;       /* cover illustration ground lifted to L50. Drawing ground and one wall */
  --chalk:#EFEFEB;      /* text, rules and focus ring ONLY, never a surface */
  --chalk-2:#C9CFD3;    /* secondary text on ink; text only, never a surface */
  --steel:#8E98A3;      /* hook hardware on the price board: L60, under the 75 line */
  --glyph:#1D1911;      /* cutaway ink, lifted off pure black. Text on amber, linework on blue, the near-black ground */

  /* type: one job per face */
  --font-display:"Londrina Solid",Impact,"Arial Black","Helvetica Neue",sans-serif;   /* numerals and the single loudest line */
  --font-text:"Atkinson Hyperlegible","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;  /* everything read, and every heading */
  --font-strap:Rokkitt,Rockwell,"Roboto Slab","Courier New",serif;                    /* straps and labels */
  --font-data:"Zen Kaku Gothic New","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;     /* hours, addresses, phone numbers, plain zeros */
  --fs-body:17px;
  --fs-small:17px;

  /* space (4px base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --gutter:16px;
  --measure:62ch;
  --keyline:2px solid var(--chalk);
  --tap:44px;

  /* the sticker's geometry */
  --chamfer:14px;       /* the die-cut corner every sticker, badge and strap loses */
  --m:8px;              /* amber margin round the printed keyline; with 8px margin the keyline corner stays inside the 14px cut */
  --bw:2px;             /* printed keyline weight */
  --o:calc(var(--m) + var(--bw));  /* where printed content begins inside a sticker */
  --rh:34px;            /* height of a punched ribbon cell */
  --cham-poly:0 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%;
  --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect y='2' width='4' height='2' fill='%231D1911' fill-opacity='.07'/%3E%3C/svg%3E");
  --wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10'%3E%3Crect y='7' width='8' height='3' fill='%231D1911' fill-opacity='.55'/%3E%3C/svg%3E");   /* clapboard seen through a punched cut: only the shadow under each board. No pale line: a pale line ran through the lettering that sits in the hole (ICP 2) */
  --wall-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10'%3E%3Crect y='7' width='8' height='3' fill='%23012C58' fill-opacity='.55'/%3E%3C/svg%3E");   /* the same boards where the ground is near-black: the shadow is navy so it still shows */
  --k2:.3;              /* quilt inset scale: phones carry smaller ragged edges */
}
@media (min-width:760px){:root{--k2:.5}}
@media (min-width:1024px){:root{--k2:.55}}
@media (min-width:1024px){:root{--fs-body:18px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--chalk);font:400 var(--fs-body)/1.55 var(--font-text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,blockquote{margin:0}
h1,h2,h3{text-wrap:balance}
h2,h3{font-family:var(--font-text);font-weight:700}
ol,ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--chalk);outline-offset:3px}
.sr{position:absolute!important;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}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.dig{font-family:var(--font-data);font-weight:700}   /* digits that must read as plain zeros (Atkinson slashes its zero on purpose; an address is not the place) */

.skip{position:absolute;left:var(--s2);top:-80px;z-index:20;background:var(--reflect);color:var(--glyph);padding:12px 18px;font:800 20px/1.2 var(--font-strap);text-decoration:none;min-height:var(--tap)}
.skip:focus{top:var(--s2);outline:3px solid var(--chalk);outline-offset:3px}

/* ---------- demo bar: the binding edge of the quilt, stitched to the ground ---------- */
.demo-bar{background:var(--board);color:var(--chalk);padding:0 var(--gutter);border-bottom:3px dashed var(--chalk);font:700 16px/1.4 var(--font-text);text-align:center}
.demo-bar strong{font:800 16px/1.4 var(--font-strap);margin-right:var(--s2)}
.demo-bar a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 4px;color:var(--chalk);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.demo-bar a:hover{background:var(--red)}
.demo-bar a:focus-visible{outline-offset:-3px}   /* inset: the ring stays inside the bar and off its dashed edge */

/* ---------- joins between fields: every colour change is stitched ---------- */
.seam{position:relative;height:0;z-index:3}
.seam::before{content:"";position:absolute;left:0;right:0;top:-2px;border-top:3px dashed var(--chalk)}
.seam--wander{height:calc(100vw / 30);margin-bottom:-1px;z-index:3}
.seam--wander::before{display:none}
.seam--wander svg{width:100%;height:100%;display:block}
.seam--wander .from{fill:var(--from)}
.seam--wander .to{fill:var(--to)}
.seam--wander .stitch{stroke:var(--chalk);stroke-width:3;stroke-dasharray:9 8;vector-effect:non-scaling-stroke;fill:none}
.seam--mobile{display:block}
@media (min-width:980px){.seam--mobile{display:none}}

/* ---------- title block: frame, strap, badge (02) ---------- */
.site-head{padding-top:var(--s2)}
.head-grid{display:grid;grid-template-columns:minmax(0,1fr) 52px;grid-template-areas:"frame badge" "strap strap";gap:8px}
.title-frame{grid-area:frame;border:var(--keyline);padding:8px 12px 8px}
.covers{display:none}
.wordmark{margin:0;font-weight:400}
.wm-line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
.w-voss{font:900 clamp(56px,17vw,72px)/.84 var(--font-display);color:var(--chalk)}
.w-amp{font:900 clamp(38px,11.5vw,48px)/1 var(--font-display);color:transparent;-webkit-text-stroke:2.5px var(--chalk)}   /* the one outlined letter (02: solid against outlined) */
.w-dau{font:900 clamp(30px,9.4vw,38px)/1 var(--font-display);color:var(--chalk)}   /* solid since ICP 1: half the shop's name could not be a 1.5px outline in sun */
.w-trade{font:800 clamp(19px,5.2vw,22px)/1 var(--font-strap);color:var(--chalk)}
@supports not (-webkit-text-stroke:1px #000){.w-amp{color:var(--chalk)}}
/* cycle 3: the cover's two-colour stripe badge, kept off amber (amber is for stickers and actions): a blue field with a red stripe between two chalk hairlines, with the sticker's chamfered corner and a notch punched from the top edge, through the stripe */
.badge-stripe{--nw:24px;--nd:30px;grid-area:badge;position:relative;background-color:var(--blue);
  clip-path:polygon(0 0,calc(50% - var(--nw) / 2) 0,calc(50% - var(--nw) / 2) var(--nd),calc(50% + var(--nw) / 2) var(--nd),calc(50% + var(--nw) / 2) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%)}
.badge-stripe::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:36%;margin-left:-18%;background:var(--red);border-inline:3px solid var(--chalk)}
.head-strap{grid-area:strap;border:var(--keyline);display:flex;flex-direction:column}
.strap-line{font:800 clamp(17px,4.9vw,21px)/1.2 var(--font-strap);padding:6px 14px;border-bottom:var(--keyline)}
/* seven links (ICP 2 added Prices and Hours): four and three on a phone, so every one stays a 44px target */
.site-nav ul{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.site-nav li{grid-column:span 3}
.site-nav li:nth-child(n+5){grid-column:span 4}
.site-nav a{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 4px;font:700 17px/1 var(--font-strap);color:var(--chalk);text-decoration:none}
.site-nav a:hover{background:var(--red)}
.site-nav a:active{background:var(--board)}
.site-nav a[aria-current="page"]{color:var(--chalk);background:var(--board)}
.site-nav a:focus-visible{outline-offset:-5px}
@media (max-width:359px){
  .site-nav a{padding:0 2px;font-size:16px}
}

/* =====================================================================
   THE STICKER (07 shaken sticker, F the 1989 windshield sticker).
   .sticker is a positioning box with no fill. Its skin, .sticker::before,
   is amber, textured and cut: a chamfered bottom-right corner always, and a
   hole through the sheet when a hole is asked for:
     [data-notch]   a ribbon cell punched out (a day, or a month)
     .sticker--week[data-hole]   a whole row punched out (JS measures it)
   The hole shows whatever is behind the sticker (the page ground).
   ===================================================================== */
.sticker{--f0:0;--f1:0;--hy0:0px;--hy1:0px;
  --ax:calc(var(--o) + (100% - 2 * var(--o)) * var(--f0) + 3px);
  --bx:calc(var(--o) + (100% - 2 * var(--o)) * var(--f1) - 1px);
  position:relative;isolation:isolate;display:flow-root;color:var(--glyph)}
.sticker::before{content:"";position:absolute;inset:0;z-index:-1;background-color:var(--reflect);background-image:var(--tex);clip-path:polygon(var(--cham-poly))}
.sticker{--ground:var(--ink)}
.sticker{--wallimg:var(--wall)}
.hours-field .sticker,.find-field .sticker{--ground:var(--glyph);--wallimg:var(--wall-ink)}
.board .sticker,.svc-board .sticker,.story-field .sticker{--ground:var(--board)}
/* the wall: what a hole shows. Clapboard lines sit under the amber skin (z -2, skin z -1), clipped to the same cut corner, so they appear only where the skin is punched */
.sticker[data-notch]::after,.sticker--week[data-hole]::after{content:"";position:absolute;inset:0;z-index:-2;background-color:var(--ground);background-image:var(--wallimg);clip-path:polygon(var(--cham-poly))}
.sticker[data-notch]::before{clip-path:polygon(var(--cham-poly),0 calc(var(--o) + 2px),var(--ax) calc(var(--o) + 2px),var(--ax) calc(var(--o) + var(--rh) - 2px),var(--bx) calc(var(--o) + var(--rh) - 2px),var(--bx) calc(var(--o) + 2px),var(--ax) calc(var(--o) + 2px),0 calc(var(--o) + 2px))}
.sticker--week[data-hole]::before{clip-path:polygon(var(--cham-poly),0 var(--hy0),calc(var(--o) + 6px) var(--hy0),calc(var(--o) + 6px) var(--hy1),calc(100% - var(--o) - 6px) var(--hy1),calc(100% - var(--o) - 6px) var(--hy0),calc(var(--o) + 6px) var(--hy0),0 var(--hy0))}
/* cell weights follow the hours: Mon to Fri 10, Sat 7, Sun 5.4 (total 62.4) */
.sticker[data-notch="1"]{--f0:0;--f1:.16026}
.sticker[data-notch="2"]{--f0:.16026;--f1:.32051}
.sticker[data-notch="3"]{--f0:.32051;--f1:.48077}
.sticker[data-notch="4"]{--f0:.48077;--f1:.64103}
.sticker[data-notch="5"]{--f0:.64103;--f1:.80128}
.sticker[data-notch="6"]{--f0:.80128;--f1:.91346}
.sticker[data-notch="0"]{--f0:.91346;--f1:1}
.sticker[data-notch="oct"]{--f0:.75;--f1:.83333}   /* the month ribbon: twelve equal cells, the tenth is October */
@media (prefers-reduced-motion:no-preference){
  .sticker-tile[data-notch]::before{animation:cut .12s steps(1,end) .4s backwards}
  @keyframes cut{from{clip-path:polygon(var(--cham-poly))}}
}

/* the printed keyline panel inside a sticker, and the ribbon that runs along its top */
.tile-frame{margin:var(--m);border:var(--bw) solid var(--glyph)}
.ribbon{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,10fr) minmax(0,10fr) minmax(0,10fr) minmax(0,10fr) minmax(0,7fr) minmax(0,5.4fr);height:calc(var(--rh) + var(--bw));border-bottom:var(--bw) solid var(--glyph)}
.ribbon--months{grid-template-columns:repeat(12,minmax(0,1fr))}
.cell{display:flex;align-items:center;justify-content:center;min-width:0;font:900 clamp(14px,4.1vw,16px)/1 var(--font-data);color:var(--glyph);border-left:var(--bw) solid rgba(29,25,17,.5)}
.cell:first-child{border-left:0}
.cell[data-today]{color:var(--chalk);border-left-color:transparent}   /* the label sits inside its own hole, on the ground */
.cell[data-today] + .cell{border-left-color:transparent}
.tile-body{padding:10px 12px 12px}
.label{font:800 clamp(19px,5.6vw,24px)/1.2 var(--font-strap)}
.big-time{display:flex;align-items:baseline;gap:8px;margin-top:2px;color:var(--cut,var(--ink))} /* die-cut: the numerals are holes through the sticker to the ground behind, so they take the ground's colour */
.big-time .num{font:900 clamp(92px,25.5vw,176px)/.82 var(--font-display)}
.big-time .ampm{font:900 clamp(36px,11vw,56px)/1 var(--font-display)}
/* the numerals are solid: the die-cut colour is the ground's colour, flat. (ICP 1 clipped the wall to the numerals; ICP 2 read pale bars through 5:30 and Oct 1 as scratches, so the wall shows only in the punched cells and rows, where it does not cut a numeral.) */
.tile-lede{margin-top:6px;max-width:34ch;font-weight:700;line-height:1.42}

/* ---------- field A: the dated answer (07) beside the three-voice line (06) ---------- */
.hero-field{padding-block:var(--s1) var(--s6)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.sticker-tile .tile-frame{margin-bottom:var(--m)}
.sticker-tile .tile-body{padding:4px 12px 6px}
.tile-sat{margin-top:3px;font:700 17px/1.35 var(--font-data)}
.has-acts .call-strap{clip-path:none}
/* three real buttons under the call strap (ICP 2: the tear-off links read as fine print). Each is a box, 56px tall, the same type size as "Call the shop". Cut from the sticker's own ground: navy, like the die-cut numerals. */
.acts{margin:var(--s2) var(--m) var(--m)}
.acts ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2)}
.acts li:first-child{grid-column:1/-1}
.acts a{display:flex;align-items:center;justify-content:center;min-height:56px;padding:6px 8px;background:var(--ink);color:var(--chalk);border:3px solid var(--glyph);font:800 clamp(20px,5.6vw,24px)/1.1 var(--font-strap);text-align:center;text-decoration:none}
.acts a:hover{background:var(--red)}
.acts a:active{background:var(--board);transform:translateY(2px)}
.acts a:focus-visible{outline:3px solid var(--chalk);outline-offset:-9px}
.call-strap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:12px;row-gap:2px;min-height:68px;padding:10px 16px;background:var(--glyph);color:var(--reflect);text-decoration:none;clip-path:polygon(var(--cham-poly))}
.call-strap .call-label{font:800 clamp(20px,5.6vw,24px)/1.1 var(--font-strap)}
.call-strap .call-num{font:900 clamp(22px,6.2vw,27px)/1.1 var(--font-data);white-space:nowrap}
.call-strap:hover{background:var(--red);color:var(--chalk)}
.call-strap:active{background:var(--board);color:var(--chalk);transform:translateY(2px)}   /* pressed: the thumb is felt */
.call-strap:focus-visible{outline:3px solid var(--chalk);outline-offset:-7px}
.call-strap--solo{background:var(--reflect);color:var(--glyph)}
.call-strap--solo:hover{background:var(--red);color:var(--chalk)}
.call-strap--solo:active{background:var(--board);color:var(--chalk)}
.call-strap--solo:focus-visible{outline-offset:3px}

/* the one sentence: lead-in, heavy word, and the Stop-now clause as a leaning red piece with chalk lettering (5.15:1, and red means stop on this whole page) */
.hero-line{display:block}
.hero-line .hl-lead{display:block;font:800 clamp(22px,6.4vw,30px)/1.1 var(--font-strap);color:var(--chalk);transform:skewX(-9deg);transform-origin:left bottom;margin-bottom:2px}
.hero-line .hl-heavy{display:block;font:900 clamp(84px,27vw,168px)/.84 var(--font-display);color:var(--chalk);text-transform:uppercase}
.hero-line .hl-lean{display:inline-block;margin-top:10px;padding:6px 18px 9px 14px;background:var(--red);color:var(--chalk);font:900 clamp(30px,9.4vw,52px)/.98 var(--font-display);transform:skewX(-9deg);transform-origin:left bottom;max-width:15ch}
.hero-lede{margin-top:var(--s4);max-width:var(--measure)}

/* ---------- strap B: one sentence on red (06 reversed strap, 02 wide strap) ---------- */
.strap{background:var(--red);color:var(--chalk)}
.strap .wrap{min-height:96px;display:flex;align-items:center;padding-block:var(--s4)}
.strap p{font:800 clamp(23px,6.6vw,32px)/1.14 var(--font-strap);max-width:44ch;text-wrap:balance}

/* ---------- field C: which light is it (pieced rows: the quilt as structure) ----------
   Each row is a piece of cloth with its own colour and its own width: Stop now is
   a red piece, Soon is an ink piece, Keep an eye is a stitched outline with
   nothing in it. The pieces run off the left edge and end at different places on the
   right, and a dashed stitch runs along every edge where two colours meet. */
.field-ink{background:var(--ink);color:var(--chalk)}
main:focus{outline:none}
.guide{background:var(--glyph);color:var(--chalk);container-type:inline-size;--edge:max(var(--gutter),calc((100cqw - 1200px) / 2 + var(--gutter)))}
.guide-head{padding-block:var(--s7) var(--s5)}
.guide-head h2{font-size:clamp(30px,8.4vw,44px);line-height:1.04}
.guide-head p{margin-top:var(--s2);max-width:46ch;color:var(--chalk-2)}
.guide-list{padding-bottom:var(--s7)}
.guide-row,.piece{--ins:0px;--piece:var(--glyph);margin-right:calc(var(--ins) * var(--k2));border-top:3px dashed var(--chalk);border-right:3px dashed var(--chalk);background:var(--piece)}
.guide-row{position:relative;display:grid;grid-template-columns:var(--gw,64px) minmax(0,1fr);grid-template-areas:"glyph head" "body body";column-gap:var(--s4);row-gap:var(--s3);align-items:start;padding:var(--s5) var(--s4) var(--s5) var(--edge)}
.guide-row:last-child{border-bottom:3px dashed var(--chalk)}
.guide-row[data-level="stop"],.piece--stop{--piece:var(--red)}
.guide-row[data-level="soon"],.piece--soon{--piece:var(--ink)}
.guide-row[data-level="watch"]{--piece:var(--glyph);border-left:0}
.guide-row[data-sw="oil"]{--ins:64px}
.guide-row[data-sw="battery"]{--ins:200px}
.guide-row[data-sw="brake"]{--ins:24px}
.guide-row[data-sw="abs"]{--ins:140px}
.guide-row[data-sw="tire"]{--ins:96px}
.guide-row .glyph{grid-area:glyph;margin-top:4px}
.guide-row .head-col{grid-area:head}
.guide-row .body-col{grid-area:body}
/* the symbols are drawn as chalk LINES (rules), not chalk fills: a filled chalk shape would be a light surface under the constraint */
.glyph{width:var(--gw,64px);height:auto;color:var(--chalk);fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.glyph .line{stroke-width:5.5}
.glyph .tread{stroke-width:3.8;stroke-linecap:butt}
.glyph .cut{stroke-width:4}
.glyph text{font-family:var(--font-text);font-weight:700;fill:currentColor;stroke:none}
.guide-row .name{font-size:clamp(24px,6.6vw,30px);line-height:1.1}
.guide-row .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2)}
.say{max-width:var(--measure)}
.say strong{font-weight:700}
/* the check-engine row is a block of its own: a head on the ground, then two pieces of different width and colour */
.guide-row--cel{display:block;padding:0;background:transparent;border-right:0;margin-right:0}
.cel-head{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:var(--s4);align-items:center;padding:var(--s5) var(--s4) var(--s4) var(--edge)}
.cel-head .glyph{grid-area:auto;width:88px;margin:0}
.cel-head .say{margin-top:6px;color:var(--chalk-2)}
.cel-pieces{display:block}
.piece{--ins:0px;padding:var(--s5) var(--s4) var(--s5) var(--edge);display:grid;gap:var(--s2);justify-items:start}
.piece--soon{--ins:56px}
.piece--stop{--ins:0px}
.cel-buys{padding:var(--s5) var(--s4) var(--s5) var(--edge);border-top:3px dashed var(--chalk);border-right:3px dashed var(--chalk);margin-right:calc(40px * var(--k2))}
.cel-buys .buys{max-width:var(--measure)}
.to-board{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:var(--s2);font:700 19px/1.2 var(--font-text);color:var(--chalk);text-underline-offset:4px}
.to-board:hover{background:var(--ink)}

/* tags: a word, a shape and a surface. Stop now is a solid near-black chip, Soon is an outline with one corner cut, Keep an eye is a dashed outline. None of them is amber. */
.status{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:2px 14px;font:800 18px/1 var(--font-strap);color:var(--chalk)}
.status--stop{background:var(--glyph)}
.status--soon{width:84px;height:34px;padding:0 10px 0 0}
.status--soon svg{position:absolute;inset:0;width:100%;height:100%}
.status--soon svg path{fill:none;stroke:var(--chalk);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.status--soon span{position:relative}
.status--watch{border:2px dashed var(--chalk);padding:0 12px;min-height:34px}

/* ---------- field D: the price wall (01) ---------- */
.board{background:var(--board);color:var(--chalk)}
.board-sticker{--cut:var(--board)}
.board .wrap{padding-block:var(--s7) var(--s7)}
.board-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7) var(--s8)}
.board-label{display:block;border:var(--keyline);padding:7px 14px;font:700 clamp(19px,5.4vw,23px)/1.2 var(--font-strap)}
.board-price{margin-top:14px}
.tiles{display:inline-flex;gap:4px;padding:4px;background:var(--seam)}
.tile{position:relative;width:clamp(58px,19vw,92px);height:clamp(92px,29vw,142px);display:flex;align-items:center;justify-content:center;font:900 clamp(104px,33.5vw,164px)/1 var(--font-display);color:var(--chalk);overflow:visible}
.tile:nth-child(odd){background:var(--tile-a)}
.tile:nth-child(even){background:var(--tile-b)}
.tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--seam);opacity:.7;pointer-events:none}
.tile span.digit{position:relative;z-index:1;display:block;transform:translateY(5%)}
.tile--cur{width:clamp(40px,12.5vw,58px);font-size:clamp(66px,20vw,100px)}   /* the dollar sign is a full-height tile of its own, centred like a digit, so nothing beneath it reads as a missing numeral */
.tile-hook{position:absolute;left:0;right:0;top:-5px;height:12px;pointer-events:none}
.tile-hook::before,.tile-hook::after{content:"";position:absolute;top:0;width:6px;height:12px;background:var(--steel)}
.tile-hook::before{left:14%}
.tile-hook::after{right:14%}
.tile.empty{background:var(--board);box-shadow:none;border:3px solid var(--seam)}
.tile.empty::after{display:none}
.tile.painted svg{position:relative;z-index:1;width:92%;height:auto}
.includes{margin-top:var(--s3);max-width:44ch}
.board-row--ask .board-label{border-style:dashed}
.board-row--ask .board-price{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2) var(--s4)}
.and-up{font:900 clamp(30px,9vw,44px)/1 var(--font-display);color:var(--chalk);padding-bottom:6px}   /* the board's own words after the tiles: a starting figure, not a final one */
.board-call{display:grid;gap:var(--s3)}
.board-call-note{max-width:44ch;font-weight:700}
/* cycle 3: the dated line is a small sticker stuck on the wall, and the month it was set is punched out of its ribbon */
.board-sticker{margin-top:0;max-width:520px;align-self:start}   /* sits in the grid beside the last price, not alone under it */
.board-sticker .big-time .num{font-size:clamp(72px,22vw,120px)}
.board-sticker .big-time .ampm{font-size:clamp(34px,10vw,48px)}
.board-sticker .tile-body{padding-bottom:14px}
.board-sticker .big-time .ampm{color:transparent;-webkit-text-stroke:2.5px var(--glyph)}   /* the one outlined numeral on the page (02: solid against outlined) */
@supports not (-webkit-text-stroke:1px #000){.board-sticker .big-time .ampm{color:var(--glyph)}}

/* ---------- field E: the framed cutaway (02) ---------- */
.cutaway{background:var(--blue);color:var(--glyph)}
.cutaway .wrap{padding-block:var(--s7)}
.frame{border:3px solid var(--chalk)}
.frame-title{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:0;background:var(--ink);color:var(--chalk);border-bottom:3px solid var(--chalk)}
.frame-title--plain{grid-template-columns:minmax(0,1fr)}
.frame-title h2{padding:14px 16px;font-size:clamp(28px,7.6vw,46px);line-height:1.04;align-self:center;text-wrap:balance}
.frame-title .badge-stripe{--nw:14px;--nd:20px;grid-area:auto}
.frame-strap{background:var(--ink);color:var(--chalk);padding:12px 16px;border-bottom:3px solid var(--chalk);font:700 clamp(18px,5vw,22px)/1.3 var(--font-strap)}
.frame-art{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);padding:var(--s4)}
.cutaway-svg{width:100%;height:auto;overflow:visible}
.cutaway-svg--section{max-width:320px}
.callout{background:var(--ink);color:var(--chalk);border-top:3px solid var(--chalk);padding:var(--s4);display:grid;gap:var(--s2)}
.callout li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--s2);align-items:start;padding:4px 10px 6px 0}
.callout .n{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;background:none;border:0;border-radius:0;cursor:pointer;font:900 30px/1 var(--font-data);color:var(--chalk)}
.callout li.is-lit{background:var(--blue);color:var(--glyph)}
.callout li.is-lit .n{color:var(--glyph)}
.callout li.is-lit h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.leader{cursor:pointer}

.leader.is-lit .ln{stroke-width:5.5}
.leader.is-lit .dot{transform-box:fill-box;transform-origin:center;transform:scale(2.3)}
.leader.is-lit .num{font-size:42px}
.callout h3{font-size:21px;line-height:1.2}
.callout p{margin-top:2px;font-size:17px;line-height:1.45}

/* ---------- field F: the winter sticker stuck on its wall (06 sign, 07 sticker) ---------- */
.winter{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='44'%3E%3Crect y='0' width='8' height='2' fill='%23EFEFEB' fill-opacity='.13'/%3E%3Crect y='41' width='8' height='3' fill='%231D1911'/%3E%3C/svg%3E");background-repeat:repeat}
.winter .wrap{padding-block:var(--s7)}
.winter-banner{position:relative}
.banner-sticker{padding-top:var(--m)}
.banner-line{margin:0 var(--m);border:var(--bw) solid var(--glyph);padding:var(--s4) var(--s4) var(--s3);font-family:var(--font-text);font-weight:400}
.banner-line .bl-lead{display:block;font:800 clamp(22px,6.2vw,34px)/1.1 var(--font-strap);transform:skewX(-9deg);transform-origin:left bottom}
.banner-line .bl-heavy{display:block;font:900 clamp(110px,40vw,300px)/.82 var(--font-display);text-transform:uppercase}
.banner-line .bl-lean{display:block;font:900 clamp(40px,13vw,92px)/.95 var(--font-display);transform:skewX(-9deg);transform-origin:left bottom;margin-top:4px}
.banner-strap{margin-top:var(--m);background:var(--glyph);color:var(--reflect);padding:var(--s4) var(--s5);font:700 clamp(18px,4.8vw,22px)/1.35 var(--font-strap);clip-path:polygon(var(--cham-poly))}
.strap-link{display:flex;align-items:center;width:fit-content;min-height:var(--tap);margin-top:var(--s2);color:var(--reflect);font:700 clamp(18px,4.8vw,22px)/1.2 var(--font-strap);text-underline-offset:4px}
.strap-link:hover{background:var(--red);color:var(--chalk)}
.strap-link:focus-visible{outline-color:var(--chalk)}

/* ---------- fields G + H: the week sticker and the framed estimate ---------- */
.split{display:block}
.hours-field{background:var(--glyph);color:var(--chalk)}
.hours-field .inner{padding:var(--s7) var(--gutter);display:flex;flex-direction:column;height:100%}
.sticker--week{--m:8px;padding:var(--m)}
.week-frame{border:var(--bw) solid var(--glyph);padding:12px 0 6px}
.week-frame .label{padding:0 16px 8px;font-size:clamp(20px,5.6vw,24px)}
.hours{width:100%;border-collapse:collapse}
.hours-row th,.hours-row td{padding:11px 0;vertical-align:middle;text-align:left;border-top:2px solid rgba(29,25,17,.38);color:var(--glyph)}
.hours-row th{padding-left:16px;width:46%;font:700 clamp(18px,5vw,22px)/1.2 var(--font-data)}
.hours-row td{padding-right:16px}
.hours .n{font:900 clamp(22px,6.4vw,30px)/1 var(--font-data)}
.hours .u,.hours .to{font:700 17px/1 var(--font-data)}
.hours .u{margin-left:2px}
.hours .closed{font:900 clamp(22px,6.4vw,30px)/1 var(--font-data)}
/* today's row is the hole: the sheet is cut away behind it, so its lettering is chalk on the ground */
.hours-row[data-today] th,.hours-row[data-today] td,.hours-row[data-today] + .hours-row th,.hours-row[data-today] + .hours-row td{border-top-color:transparent}
.hours-row[data-today] th,.hours-row[data-today] td{color:var(--chalk)}
.today-tag{display:none;position:relative;width:66px;height:28px;margin-left:10px;vertical-align:middle;color:var(--chalk);font:800 17px/28px var(--font-strap);text-align:center;padding-right:6px}
.today-tag svg{position:absolute;inset:0;width:100%;height:100%}
.today-tag svg path{fill:none;stroke:var(--chalk);stroke-width:2;vector-effect:non-scaling-stroke}
.today-tag span{position:relative}
.hours-row[data-today] .today-tag{display:inline-block}
.where{margin-top:var(--s6);display:flex;flex-direction:column;flex:1 1 auto}
.where address{font:900 clamp(26px,7vw,34px)/1.15 var(--font-data);font-style:normal}
.where p{margin-top:var(--s3)}
.where .call-strap{margin-top:auto}
.where .parking{margin-bottom:var(--s5);max-width:40ch}

.estimate-field{background:var(--blue);color:var(--glyph)}
.estimate-field .inner{padding:var(--s7) var(--gutter)}
.frame--form{color:var(--chalk)}
.frame--form .frame-body{display:block;background:var(--ink)}
.estimate{padding:var(--s5) var(--s4)}
.est-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.field-row label{display:block;margin-bottom:6px;font:700 20px/1.2 var(--font-strap)}
.estimate input,.estimate textarea{display:block;width:100%;min-height:56px;padding:12px 14px;background:var(--ink);color:var(--chalk);border:3px solid var(--chalk);border-radius:0;font-size:19px;line-height:1.3}
.estimate #est-year,.estimate #est-phone{font-family:var(--font-data);font-weight:700}
.estimate textarea{min-height:128px;resize:vertical}
.estimate ::placeholder{color:var(--chalk-2);opacity:.78}
.estimate input:focus-visible,.estimate textarea:focus-visible{outline:3px solid var(--reflect);outline-offset:3px}
.estimate [aria-invalid="true"]{border-style:dashed}
.field-error{display:none;margin-top:8px;padding:6px 12px;background:var(--red);color:var(--chalk);font:700 17px/1.3 var(--font-text);overflow-wrap:anywhere}
.field-error.is-on{display:block}
.err-sum{display:none;margin-bottom:var(--s5);padding:var(--s4);background:var(--red);color:var(--chalk)}
.err-sum.is-on{display:block}
.err-sum h3{font-size:24px;line-height:1.2}
.err-sum ul{margin-top:var(--s2);display:grid;gap:2px}
.err-sum a{display:block;padding:11px 0;min-height:var(--tap);font-weight:700;overflow-wrap:anywhere}
.err-sum a:focus-visible{outline-color:var(--chalk)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:10px 28px;background:var(--reflect);color:var(--glyph);border:0;border-radius:0;font:800 24px/1.1 var(--font-strap);cursor:pointer;width:100%}
.btn:hover{background:var(--red);color:var(--chalk)}
.btn:active{background:var(--board);color:var(--chalk);transform:translateY(2px)}
.btn:focus-visible{outline-offset:3px}
.btn--dark{background:var(--ink);color:var(--chalk);border:3px solid var(--chalk);width:auto}
.btn--dark:hover{background:var(--red);color:var(--chalk)}
.btn--dark:focus-visible{outline-color:var(--glyph)}
.fine{margin-top:var(--s3);font-size:var(--fs-small);line-height:1.4;color:var(--chalk-2)}

/* the confirmation is the same sticker, with the day Marta calls punched out of its ribbon */
.estimate-wrap{padding:var(--s5) var(--s4)}
.estimate-done[hidden]{display:none}
.estimate-done:focus-visible{outline:3px solid var(--chalk);outline-offset:4px}
.estimate-done .tile-body{overflow-wrap:anywhere}
.estimate-done .label{font-size:22px}
.estimate-done .echo .w{display:inline-block;max-width:100%;overflow-wrap:anywhere}   /* a model name such as CR-V stays in one piece; only a word longer than the card is broken */
.estimate-done .echo{margin-top:4px;font:900 clamp(40px,11vw,60px)/.95 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.estimate-done .tile-body p+p{margin-top:var(--s3);font-weight:700;overflow-wrap:anywhere}
.estimate-done .who,.estimate-done .ph{overflow-wrap:anywhere}
.estimate-done .ph{display:inline-block;max-width:100%;font-family:var(--font-data);font-size:1.1em;font-weight:700}   /* the data face, set up a size so its short x-height matches the card text beside it */
.estimate-done .fine{color:var(--glyph)}
.estimate-done .btn--dark{margin:0 var(--m) var(--m) var(--m)}
.done-foot{padding:0 0 4px}

/* ---------- closing strip: three pieces of unequal width, stitched (03 binding) ---------- */
.site-foot{color:var(--chalk);container-type:inline-size;--edge:max(var(--gutter),calc((100cqw - 1200px) / 2 + var(--gutter)))}
.foot-pieces{display:grid;grid-template-columns:minmax(0,1fr)}
.foot-piece{padding:var(--s6) var(--gutter)}
.foot-piece + .foot-piece{border-top:3px dashed var(--chalk)}
.foot-piece--a{background:var(--ink);padding-left:var(--edge)}
.foot-piece--b{background:var(--board)}
.foot-piece--c{background:var(--glyph);padding-right:var(--edge)}
.foot-name{font:700 26px/1.1 var(--font-text)}
.foot-piece p{max-width:40ch;overflow-wrap:anywhere}
.foot-piece p+p{margin-top:var(--s2)}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.foot-nav a{display:inline-flex;align-items:center;min-height:var(--tap);font:700 19px/1 var(--font-strap);color:var(--chalk);text-underline-offset:4px}
.foot-note{max-width:44ch;color:var(--chalk-2)}
.foot-credit a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700;color:var(--chalk);text-underline-offset:4px}
.foot-credit a:hover{background:var(--red)}
.site-foot .badge-stripe{--nw:14px;--nd:20px;grid-area:auto;width:40px;height:56px;margin-top:var(--s4)}

/* ---------- desktop ---------- */
@media (min-width:760px){
  .board-rows{gap:var(--s7) var(--s6)}
  .tile{width:clamp(58px,11.7vw,92px)}
  .tile--cur{width:clamp(40px,7vw,52px)}
  .acts ul{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
  .acts li:first-child{grid-column:auto}
  .board-call{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6);align-items:center}
  .board-call .call-strap{max-width:none}
  .guide-row,.piece{margin-right:0;border-right:0}
  .guide-row--cel .cel-buys{margin-right:0;border-right:0}   /* ICP 2: on a laptop every piece ends at the same edge, so no dark gap is left beside the shorter ones */
  .head-grid{grid-template-columns:minmax(0,1fr) 92px;gap:10px}
  .title-frame{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s7);align-items:end;padding:16px 24px 14px}
  .wm-line{column-gap:16px}
  .w-voss{font-size:clamp(92px,9.2vw,120px)}
  .w-amp{font-size:clamp(60px,6.4vw,84px)}
  .w-dau{font-size:clamp(46px,4.8vw,64px)}
  .w-trade{font-size:clamp(26px,2.5vw,32px)}
  .wm-line--2{margin-top:6px}
  .covers{display:block;justify-self:end;max-width:46ch;padding-bottom:6px;font:700 17px/1.4 var(--font-text);color:var(--chalk-2)}
  .site-nav ul{display:flex;flex-wrap:wrap}
  .site-nav li{flex:1 1 auto}
  .site-nav a{padding:0 12px}
  .guide-row{--gw:72px;grid-template-columns:var(--gw) 250px minmax(0,1fr);grid-template-areas:"glyph head body";column-gap:var(--s5);padding-right:var(--s6)}
  .guide-row--cel{display:block;padding:0}
  .cel-head{padding-right:var(--s6)}
  .cel-pieces{display:flex;align-items:stretch}
  .piece{flex:0 0 auto;padding-right:var(--s6)}
  .piece--soon{flex:0 0 58%;margin-right:0;border-right:3px dashed var(--chalk)}
  .piece--stop{flex:1 1 auto;border-left:0;margin-right:0;border-right:0}
  .board-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board-row--ask{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s6);align-items:start}
  .board-row--ask .board-label{grid-column:1/-1}
  .board-row--ask .includes{margin-top:14px;max-width:48ch}
  .board-sticker{margin-left:0}
  .frame-art{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;padding:var(--s5)}
  .cutaway-svg--section{max-width:none}
  .callout{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);padding:var(--s5)}
}
@media (min-width:980px){
  .hero-grid{grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:var(--s7);align-items:start}
  .hero-copy{padding-top:var(--s2);padding-right:var(--s5)}
  .hero-line .hl-lead{font-size:clamp(24px,2.6vw,30px)}   /* keeps the lead-in on one line between 980 and 1100, where the column is narrow */
  .hero-field{padding-block:var(--s4) var(--s7)}
  .sticker-tile .big-time .num{font-size:clamp(120px,11.2vw,144px)}   /* ICP 2: the three buttons under the strap have to fit a 1280x800 first screen */
  .frame-body{display:grid;grid-template-columns:minmax(0,1fr) 340px}
  .callout{grid-template-columns:minmax(0,1fr);border-top:0;border-left:3px solid var(--chalk);align-content:start;padding:var(--s5)}
  .banner-line{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"lead lead" "heavy lean";align-items:end;column-gap:var(--s5);padding:var(--s5) var(--s6) var(--s4)}
  .banner-line .bl-lead{grid-area:lead;margin-bottom:6px;font-size:clamp(30px,3vw,40px)}
  .banner-line .bl-heavy{grid-area:heavy;font-size:clamp(220px,25vw,320px)}
  .banner-line .bl-lean{grid-area:lean;padding-bottom:20px;font-size:clamp(80px,9vw,120px);margin:0}
  .banner-strap{padding:var(--s5) var(--s6);font-size:22px}
  .split{display:grid;grid-template-columns:1fr minmax(0,520px) minmax(0,680px) 1fr}
  .split::before{content:"";background:var(--glyph);grid-column:1;grid-row:1}
  .split::after{content:"";background:var(--blue);grid-column:4;grid-row:1}
  .hours-field{grid-column:2;grid-row:1;border-right:3px dashed var(--chalk)}
  .estimate-field{grid-column:3;grid-row:1}
  .hours-field .inner{padding:var(--s7) var(--s6) var(--s7) var(--gutter)}
  .estimate-field .inner{padding:var(--s7) var(--gutter) var(--s7) var(--s6)}
  .foot-pieces{grid-template-columns:minmax(0,46fr) minmax(0,21fr) minmax(0,33fr)}
  .foot-piece + .foot-piece{border-top:0;border-left:3px dashed var(--chalk)}
  .foot-nav ul{flex-direction:column}
  .est-grid{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--s4)}
  .est-grid > *{grid-column:span 6}
  .est-grid > .field-row:nth-child(-n+3){grid-column:span 2}
  .est-grid > .field-row:nth-child(5),.est-grid > .field-row:nth-child(6){grid-column:span 3}
}
@media (min-width:1280px){
  .cel-pieces .piece{align-content:start}
}

/* seven links in one row once the strap is wide enough to hold the line and the nav together */
@media (min-width:1040px){
  .head-strap{flex-direction:row;align-items:stretch}
  .strap-line{border-bottom:0;border-right:var(--keyline);flex:1 1 auto;display:flex;align-items:center;padding:8px 20px}
  .site-nav{flex:0 0 auto}
  .site-nav ul{height:100%}
  .site-nav li{flex:0 0 auto}
  .site-nav a{padding:0 16px}
}

/* phones: the drawing sits directly above its list, and the section view goes under the list, so a tapped part and its line on the drawing can be on one screen (ICP 2) */
@media (max-width:759px){
  .cutaway .frame-body{display:flex;flex-direction:column}
  .cutaway .frame-art{display:contents}
  .cutaway .cutaway-svg--side{order:1;width:calc(100% - 32px);margin:var(--s4) auto}
  .cutaway .callout{order:2;border-bottom:3px solid var(--chalk)}
  .cutaway .cutaway-svg--section{order:3;width:calc(100% - 32px);max-width:320px;margin:var(--s4) auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   INNER PAGES (build-out): services, about, gallery, contact, 404.
   Nothing above this line is changed. Everything below reuses the same
   tokens, the same sticker, the same board tiles and the same frames, and
   obeys the same constraint (no surface above 75% HSL lightness; chalk is
   for text, rules and the focus ring only).
   ===================================================================== */
.wordmark a{display:block;color:inherit;text-decoration:none}
.wordmark a:focus-visible{outline-offset:6px}

/* page head: the three-voice line (06) reused as a title, in mixed case */
.page-head{background:var(--ink);color:var(--chalk)}
.page-head .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);padding-block:var(--s6) var(--s7)}
.page-line{display:block}
.page-line .pl-lead{display:block;font:800 clamp(22px,6.2vw,32px)/1.1 var(--font-strap);transform:skewX(-9deg);transform-origin:left bottom;margin-bottom:4px}
.page-line .pl-heavy{display:block;font:900 clamp(60px,17.5vw,124px)/.88 var(--font-display);overflow-wrap:break-word}
.page-lede{margin-top:var(--s4);max-width:var(--measure)}
.page-head .board-sticker{margin-top:0;width:100%}
.field-title{font-size:clamp(30px,8.4vw,44px);line-height:1.04}
.field-lede{margin-top:var(--s2);max-width:52ch}
.field-head{margin-bottom:var(--s6)}
.inline-link{color:inherit;text-underline-offset:4px}
.cta-row{display:grid;gap:var(--s4);margin-top:var(--s6);max-width:640px}
.cta-row .btn{text-decoration:none}
.btn--link{text-decoration:none;width:100%}
.btn--dark.btn--link{width:100%}

/* services: the board, with a "what we do" list under every price */
.svc-board{background:var(--board);color:var(--chalk)}
.svc-board .wrap{padding-block:var(--s7)}
.svc-facts{margin-top:var(--s3);display:grid;gap:var(--s3);max-width:46ch}
.svc-facts dt{font:800 19px/1.25 var(--font-strap)}
.svc-facts dd{margin:2px 0 0}
.svc-board .includes{font-weight:700}
.svc-note{margin-top:var(--s7);max-width:56ch;padding:var(--s4) var(--s5);border:var(--keyline);border-style:dashed}
.svc-note p+p{margin-top:var(--s2)}

/* priced after we look: the framed manual page (02) on the blue wall */
.ask-field{background:var(--blue);color:var(--glyph)}
.ask-field .wrap{padding-block:var(--s7)}
.ask-field .frame{color:var(--chalk)}
.ask-list{background:var(--ink);color:var(--chalk);padding:var(--s5) var(--s4);display:grid;gap:var(--s5)}
.ask-item{border-top:3px dashed var(--chalk);padding-top:var(--s5)}
.ask-item:first-child{border-top:0;padding-top:0}
.ask-item h3{font-size:clamp(22px,6vw,28px);line-height:1.15}
.ask-item p{margin-top:var(--s2);max-width:56ch}
.ask-item .status{margin-top:var(--s3)}
.ask-item .start{margin-top:var(--s3);font:800 22px/1.2 var(--font-strap)}   /* a starting figure, set apart from the sentence above it (ICP 2) */
.ask-item .start + .status{margin-top:var(--s2)}
.ask-tiles{display:flex;gap:4px;margin-top:var(--s3)}
.ask-tiles .tiles{padding:3px;gap:3px}
.ask-tiles .tile{width:30px;height:44px}
.frame-strap .tiles{margin-left:var(--s3);vertical-align:middle;padding:3px;gap:3px}
.frame-strap .tile{width:26px;height:40px}
.frame-strap .tile-hook{top:-4px;height:9px}
.frame-strap .tile-hook::before,.frame-strap .tile-hook::after{width:4px;height:9px}

/* how a job goes: four pieces of unequal width, colour and height (03) */
.job-field{background:var(--glyph);color:var(--chalk)}
.job-field .wrap{padding-block:var(--s7)}
.job-pieces{display:grid;gap:0;align-items:start}
.job-piece{border:3px dashed var(--chalk);padding:var(--s5) var(--s4);margin-top:-3px}
.job-piece:first-child{margin-top:0}
.job-piece h3{font-size:clamp(24px,6.4vw,30px);line-height:1.1}
.job-piece p{margin-top:var(--s2);max-width:42ch}
.job-piece--a{background:var(--ink);margin-right:0}
.job-piece--b{background:var(--board);margin-right:48px}
.job-piece--c{background:var(--blue);color:var(--glyph);margin-right:16px}
.job-piece--c h3{color:var(--glyph)}
.job-piece--d{background:var(--ink);margin-right:96px}

/* about: two people, not two cards */
.people-field{background:var(--ink);color:var(--chalk)}
.people-field .wrap{padding-block:var(--s7)}
.people{display:grid;gap:var(--s5);align-items:start;margin-top:var(--s6)}
.person{padding:var(--s5) var(--s4);border:3px dashed var(--chalk)}
.person--marta{background:var(--board)}
.person--joan{background:var(--blue);color:var(--glyph)}
.pname{display:block;font:900 clamp(64px,19vw,132px)/.86 var(--font-display)}
.pname small{font:900 clamp(24px,6.4vw,40px)/1 var(--font-display);margin-left:8px}
.pjob{margin-top:var(--s2);font:800 clamp(20px,5.4vw,24px)/1.2 var(--font-strap)}
.person p+p,.person .pjob+p{margin-top:var(--s3)}
.person p{max-width:46ch}
.fact{margin-top:var(--s4);padding-top:var(--s3);border-top:3px dashed currentColor;font-weight:700}
.person--joan .fact{border-top-color:var(--glyph)}
.story-field{background:var(--board);color:var(--chalk)}
.story-field .wrap{padding-block:var(--s7);display:grid;gap:var(--s6)}
.story-field .board-sticker{margin-top:0;margin-left:0;width:100%}
.head-board{max-width:460px}
.story-copy p{max-width:56ch}
.story-copy p+p{margin-top:var(--s3)}
.rules-field{background:var(--glyph);color:var(--chalk)}
.rules-field .wrap{padding-block:var(--s7)}
.rules{display:grid;gap:0;margin-top:var(--s6);align-items:start}
.rule{border:3px dashed var(--chalk);padding:var(--s5) var(--s4);margin-top:-3px}
.rule:first-child{margin-top:0}
.rule-head{font:800 clamp(22px,5.8vw,28px)/1.15 var(--font-strap)}
.rule p+p{margin-top:var(--s2);max-width:44ch}
.rule--a{background:var(--red);margin-right:0}
.rule--b{background:var(--ink);margin-right:56px}
.rule--c{background:var(--board);margin-right:16px}
.rule--d{background:var(--ink);margin-right:104px}
.rule--e{background:var(--blue);color:var(--glyph);margin-right:32px}
.rule--e .rule-head{color:var(--glyph)}
.not-field{background:var(--ink);color:var(--chalk)}
.not-field .wrap{padding-block:var(--s7)}
.not-field p{max-width:56ch}
.not-field p+p{margin-top:var(--s3)}
.close-field{background:var(--blue);color:var(--glyph)}
.close-field .wrap{padding-block:var(--s7);display:grid;gap:var(--s5)}
.close-field h2{font-size:clamp(28px,7.6vw,44px);line-height:1.05}
.close-field .call-strap{max-width:560px}
.close-field .btn--dark{max-width:560px}

/* gallery: photographs set in keyline frames, stitched */
.shots-field{background:var(--glyph);color:var(--chalk)}
.shots-field .wrap{padding-block:var(--s7)}
.shots{display:grid;gap:var(--s6);margin-top:var(--s6)}
.shot-col{display:grid;gap:var(--s6);align-content:start}
.shot{border:3px solid var(--chalk);background:var(--ink)}
.shot img{display:block;width:100%;height:auto;border-bottom:3px solid var(--chalk)}
.shot figcaption{padding:var(--s3) var(--s4) var(--s4)}
.shot .cap-tag{display:block;font:800 19px/1.2 var(--font-strap)}
.shot .cap-text{display:block;margin-top:4px;max-width:46ch}
.shot--b{margin-left:32px}
.shot--c{margin-right:48px}
.credits-field{background:var(--ink);color:var(--chalk)}
.credits-field .wrap{padding-block:var(--s7)}
.credits{margin-top:var(--s5);display:grid;gap:0;max-width:820px}
.credits li{border-top:3px dashed var(--chalk);padding:var(--s4) 0}
.credits li:last-child{border-bottom:3px dashed var(--chalk)}
.credits strong{display:block;font:800 20px/1.25 var(--font-strap)}
.credits span{display:block;margin-top:2px;overflow-wrap:anywhere}
.credits .src{font-family:var(--font-data);font-weight:700}
.drawn-note{margin-top:var(--s5);max-width:56ch;color:var(--chalk-2)}
.drawn-note + .to-board{margin-top:var(--s2)}

/* contact */
.contact-head .sticker-tile{width:100%;max-width:560px}
.contact-head--call .sticker-tile{order:-1}
.contact-field{background:var(--blue);color:var(--glyph)}
.contact-field .wrap{padding-block:var(--s7);display:grid;gap:var(--s6)}
.contact-field .frame{color:var(--chalk)}
.contact-field .frame--form .frame-body{background:var(--ink)}
.plan-frame .frame-body{display:block}
.plan-frame .frame-art{display:block;padding:var(--s4)}
.contact-head .pl-heavy{font-size:clamp(52px,13.6vw,96px)}
.plan-svg{width:100%;height:auto;overflow:visible;color:var(--glyph)}
.plan-svg text{fill:var(--glyph)}
.plan-key{background:var(--ink);color:var(--chalk);border-top:3px solid var(--chalk);padding:var(--s4)}
.plan-key p{max-width:46ch}
.find-field{background:var(--glyph);color:var(--chalk)}
.find-field .wrap{padding-block:var(--s7);display:grid;gap:var(--s6)}
.find-field .where{margin-top:0}
.find-field .email{margin-top:var(--s3);overflow-wrap:anywhere}
.ready{margin-top:var(--s5);max-width:52ch}
.ready dt{font:800 19px/1.25 var(--font-strap)}
.ready dd{margin:2px 0 var(--s3)}

/* 404 */
.nf-links{display:grid;gap:0;margin-top:var(--s5);max-width:560px}
.nf-links a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:8px 16px;border:3px dashed var(--chalk);margin-top:-3px;font:800 22px/1.2 var(--font-strap);color:var(--chalk);text-decoration:none}
.nf-links li:first-child a{margin-top:0}
.nf-links a:hover{background:var(--red)}
.nf-links a span{font:400 17px/1.3 var(--font-text);color:var(--chalk-2);margin-left:var(--s3);text-align:right}
.nf-links a:hover span{color:var(--chalk)}

@media (min-width:760px){
  .job-pieces{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.9fr);gap:0}
  .job-piece{margin-top:0;margin-left:-3px;margin-right:0!important}
  .job-piece:first-child{margin-left:0}
  .job-piece--b{margin-top:28px}
  .job-piece--c{margin-top:8px}
  .job-piece--d{margin-top:52px}
  .ask-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s7);padding:var(--s6)}
  .ask-item:nth-child(2){border-top:0;padding-top:0}
  .ask-item:last-child{grid-column:1 / -1}
  .ask-item:last-child p{max-width:72ch}
  .job-field .cta-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
  .people{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .person--joan{margin-top:56px}
  .rules{grid-template-columns:repeat(12,minmax(0,1fr))}
  .rule{margin-top:-3px;margin-left:-3px;margin-right:0!important}
  .rule--a{grid-column:1 / span 7}
  .rule--b{grid-column:8 / span 5;margin-top:36px}
  .rule--c{grid-column:1 / span 5}
  .rule--d{grid-column:6 / span 7;margin-top:30px}
  .rule--e{grid-column:3 / span 8}
  .shots{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s6)}
  .shot--b{margin-left:0}
  .shot--c{margin-right:0}
  .shot-col--r{margin-top:56px}
}
@media (min-width:980px){
  .page-head .wrap{grid-template-columns:minmax(0,1fr) minmax(0,460px);align-items:end;column-gap:var(--s7)}
  .page-head--single .wrap{grid-template-columns:minmax(0,1fr)}
  .contact-head .wrap{grid-template-columns:minmax(0,1fr) minmax(0,540px);align-items:start}
  .contact-head--call .sticker-tile{order:0}
  .svc-board .board-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-field .wrap{grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:center;column-gap:var(--s8)}
  .contact-field .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}
  .find-field .wrap{grid-template-columns:minmax(0,520px) minmax(0,1fr);column-gap:var(--s8);align-items:start}
  .close-field .wrap{grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:center;column-gap:var(--s8)}
  .contact-field .est-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}