:root{
  --ink:#16211B; --ink2:#3B4A41; --muted:#5D6C62; --paper:#FBF8F1; --card:#FFFFFF;
  --line:#E2DED2; --green:#1F6B45; --green-d:#154D31; --harvest:#B85C1E; --sky:#2C6E8F;
  --warn:#8A5A00; --warnbg:#FDF3DF; --okbg:#E9F3EC; --r:14px; --shadow:0 1px 2px rgba(22,33,27,.06),0 8px 24px rgba(22,33,27,.06);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
/* S3-08, S4-16: focused and anchored elements stop below the sticky header. app.js measures the header into --hdr
   (67px on a phone, 89px on a desktop, 131px where the nav wraps); the fallbacks cover a page without the script. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr,100px) + 30px)}
@media (min-width:901px){html{scroll-padding-top:calc(var(--hdr,131px) + 30px)}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--green-d)}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.18;margin:0 0 .5rem;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.2vw,3.1rem);overflow-wrap:anywhere}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-top:0}
h3{font-size:1.18rem}
p{margin:0 0 1rem}
.wrap{width:min(1120px,100% - 2.4rem);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:.7rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:4px}

.demobar{background:var(--warnbg);color:var(--warn);border-bottom:1px solid #EBD9AE;font-size:.82rem;line-height:1.5;padding:.6rem 1.2rem;text-align:center}
.demobar strong{color:#6B4600}

header.site{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hrow{display:flex;align-items:center;gap:1rem;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);margin-right:auto}
.mark{width:30px;height:30px;border-radius:9px;background:
  radial-gradient(circle at 32% 32%, #57A776 0 34%, transparent 35%),
  radial-gradient(circle at 68% 62%, #E0913F 0 30%, transparent 31%), var(--green-d);flex:none}
.bt{display:flex;flex-direction:column;line-height:1.1}
.bt b{font-family:var(--serif);font-size:1.06rem;font-weight:600}
.bt em{font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.nav a{padding:.45rem .6rem;border-radius:8px;text-decoration:none;color:var(--ink2);font-size:.93rem}
.nav a:hover{background:#F0EDE3;color:var(--ink)}
.nav a.on{color:var(--green-d);font-weight:600;background:var(--okbg)}
.nav a.cta{background:var(--green);color:#fff;font-weight:600;margin-left:.3rem}
.nav a.cta:hover{background:var(--green-d);color:#fff}
.nav a.lang{border:1px solid var(--line);margin-left:.3rem}
/* S4-17: the last links of the menu sit behind one "More" button, where a script can open it and the
   screen is wide. Everywhere else (a phone, no script) .navmore and .morelist dissolve into the list. */
.navmore,.morelist{display:contents}
.morebtn{display:none;font:inherit;font-size:.93rem;color:var(--ink2);background:none;border:0;border-radius:8px;padding:.45rem .6rem;cursor:pointer}
.morebtn::after{content:"";display:inline-block;margin-left:.4rem;vertical-align:middle;border:4px solid transparent;border-top-color:currentColor;border-bottom-width:0}
.morebtn:hover{background:#F0EDE3;color:var(--ink)}
.morebtn.on{color:var(--green-d);font-weight:600;background:var(--okbg)}
@media (min-width:901px){
  html.js .navmore{display:block;position:relative}
  html.js .morebtn{display:block}
  html.js .morelist{display:none;position:absolute;right:0;top:100%;margin-top:.35rem;min-width:11.5rem;background:var(--card);
    border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:.35rem;z-index:50}
  html.js .navmore.open .morelist{display:block}
  html.js .morelist a{display:block;white-space:nowrap}
}
.navtoggle{display:none;background:#fff;border:1px solid var(--line);border-radius:9px;padding:.5rem .8rem;font:inherit;font-size:.9rem;cursor:pointer;min-height:40px}

.hero{padding:2.6rem 0 1.4rem}
.hero .lede{font-size:1.16rem;color:var(--ink2);max-width:56ch}
.statusline{display:inline-flex;align-items:center;gap:.6rem;background:var(--okbg);border:1px solid #CDE3D5;color:var(--green-d);
  padding:.45rem .85rem;border-radius:999px;font-size:.9rem;font-weight:600;margin-bottom:1rem}
.statusline.closed{background:#F3F1EA;border-color:var(--line);color:var(--ink2)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.dot.off{background:var(--muted)}
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;padding:.72rem 1.15rem;border-radius:10px;font-weight:600;border:1px solid var(--green);font-size:.97rem}
.btn:hover{background:var(--green-d);border-color:var(--green-d)}
.btn.ghost{background:transparent;color:var(--green-d)}
.btn.ghost:hover{background:var(--okbg)}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0 0}
.fact{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;overflow-wrap:anywhere}
.fact b{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}

section.band{padding:2.4rem 0;border-top:1px solid var(--line)}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.shead a{font-size:.92rem;display:inline-block;padding:.5rem 0}
.lede{color:var(--ink2);max-width:70ch}

.grid{display:grid;gap:1rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .body{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.5rem;flex:1;overflow-wrap:anywhere}
.card h3{margin:0}
.card a.tt{text-decoration:none;color:inherit}
.card a.tt:hover h3{text-decoration:underline}
.card{position:relative}
.card .body a.tt::after{content:"";position:absolute;inset:0}
.card .body a:not(.tt),.card .body button{position:relative;z-index:1}
.tile{aspect-ratio:16/9;background:#EFEBE0;display:block}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{font-size:.74rem;background:#F1EFE7;border:1px solid var(--line);color:var(--ink2);padding:.16rem .5rem;border-radius:999px}
.chip.here{background:var(--okbg);border-color:#CDE3D5;color:var(--green-d);font-weight:600}
.chip.snap{background:#EAF1F6;border-color:#CBDDE8;color:#255C77}
.chip.cat{background:#fff}
.meta{font-size:.85rem;color:var(--muted);margin:0}

.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.toolbar input[type=search],.toolbar select,input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],select,textarea{
  font:inherit;font-size:.95rem;padding:.6rem .8rem;border:1px solid var(--muted);border-radius:10px;background:#fff;color:var(--ink);max-width:100%}
/* S3-04: an invalid field looks invalid; the words are in .err, injected by form.js */
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--harvest);box-shadow:0 0 0 3px #F3DCCB}
input[type=checkbox][aria-invalid=true],input[type=radio][aria-invalid=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--harvest)}
.radios label:has([aria-invalid=true]){border-color:var(--harvest)}
.err{color:#8C3A2E;font-size:.85rem;font-weight:600;margin:.35rem 0 0}
.toolbar input[type=search]{min-width:min(340px,100%)}
.count{font-size:.88rem;color:var(--muted)}

table.data{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.data th,table.data td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{background:#F5F2EA;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
table.data tr:last-child td{border-bottom:0}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.datelist{display:grid;gap:.55rem}
.daterow{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;flex-wrap:wrap}
.daterow .d{font-family:var(--serif);font-size:1.05rem;min-width:13rem}
.daterow .h{color:var(--muted);font-size:.9rem}
.daterow.cancel{background:#FBF1F0;border-color:#EBD3D0}
.daterow.evt{background:#FAF5EC;border-color:#E9DCC2}
.daterow.pastr{background:#F7F5EE;border-style:dashed}
.badge{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:.16rem .5rem;border-radius:6px;background:#EFEBE0;color:var(--ink2)}
.badge.ev{background:#F2E4C8;color:#7A5313}
.badge.ca{background:#F5DEDA;color:#8C3A2E}

.maprow{display:grid;grid-template-columns:1fr;gap:.4rem;margin-bottom:.8rem}
.mapgrid{display:flex;gap:.45rem;flex-wrap:wrap}
.mapcell{flex:1 1 120px;min-width:110px;min-height:74px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:.5rem .6rem;font-size:.82rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;justify-content:space-between}
.mapcell .sc{font-size:.7rem;letter-spacing:.1em;color:var(--muted);font-weight:700}
.mapcell.full{background:var(--okbg);border-color:#CDE3D5}
.mapcell.full:hover{background:#DCEBE1}
.mapcell.empty{color:var(--muted);background:#F7F5EE}
.rowlab{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}

.article{max-width:74ch}
.article h2{margin-top:2rem}
.article ul,.article ol{padding-left:1.15rem}
.article li{margin:.35rem 0}
.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;padding:.9rem 1.1rem;margin:1.2rem 0}
.note.warn{border-left-color:var(--harvest);background:#FDF7F1}
.note h3{margin:0 0 .35rem;font-size:1rem}
.note p:last-child{margin:0}
.steps{counter-reset:s;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
.stepc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem 1.1rem 3.2rem;position:relative;overflow-wrap:anywhere}
.stepc:before{counter-increment:s;content:counter(s);position:absolute;left:1rem;top:1rem;width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.stepc h3{margin:0 0 .3rem}
.stepc p{margin:0;color:var(--ink2)}

.vhero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.6rem;align-items:start}
.vhero .tile{aspect-ratio:4/3;border-radius:var(--r);border:1px solid var(--line)}
.kv{display:grid;gap:.5rem;margin:1rem 0}
.kv div{display:flex;gap:.6rem;font-size:.93rem;flex-wrap:wrap}
.kv b{min-width:8.5rem;color:var(--muted);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.kv a,.kv span{overflow-wrap:anywhere;min-width:0}
.liaison{display:flex;gap:.75rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin:1rem 0}
.av{width:40px;height:40px;border-radius:50%;background:var(--green-d);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}

.offer{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;overflow-wrap:anywhere}
.price{font-family:var(--serif);font-size:1.5rem;color:var(--green-d)}
.pricenote{font-size:.76rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

footer.site{border-top:1px solid var(--line);background:#F5F2EA;margin-top:3rem;padding:2.2rem 0 0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1.4rem}
.fgrid a{display:block;font-size:.92rem;text-decoration:none;color:var(--ink2);padding:.6rem 0;line-height:1.5}
.fgrid a:hover{color:var(--green-d);text-decoration:underline}
.fbrand{font-family:var(--serif);font-size:1.1rem;margin:0 0 .3rem}
.fh{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 .5rem}
.fmuted{font-size:.85rem;color:var(--muted);margin:.5rem 0 0}
/* D5: both powered-by marks stay, smaller, on a dark strip (the Hub mark is white artwork) */
.sig{width:auto;margin:1.8rem 0 0;padding:1rem 1.2rem 1.1rem;background:var(--ink);text-align:center}
footer.site>.sig:first-child{margin-top:-2.2rem}
.sigl{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#C9D2CB;margin:0 0 .6rem}
.sigrow{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.sigrow a{display:block;border-radius:6px}
.sigrow img{display:block;height:56px;width:auto}
.sig :focus-visible{outline-color:#fff}

.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;max-width:64ch}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:600;font-size:.93rem;margin-bottom:.3rem}
.field .hint{font-size:.83rem;color:var(--muted);margin:.25rem 0 0}
.field input,.field select,.field textarea{width:100%}
legend{padding:0;max-width:100%}
fieldset[data-step]>legend{font-family:var(--serif);font-size:1.18rem;line-height:1.18;letter-spacing:-.01em;margin-bottom:.5rem}
fieldset[data-step]>legend h3{margin:0}
.field legend{font-weight:600;font-size:.93rem;margin-bottom:.3rem}
.req{color:var(--harvest);font-size:.8rem;font-weight:600}
.opt{color:var(--muted);font-size:.8rem;font-weight:500}
.radios{display:grid;gap:.4rem}
.radios label{display:flex;gap:.5rem;align-items:flex-start;font-weight:400;font-size:.94rem;background:#FBFAF6;border:1px solid var(--line);border-radius:9px;padding:.55rem .7rem;cursor:pointer}
.radios input{width:auto;margin-top:.25rem}
.progress{display:flex;gap:.35rem;margin-bottom:1.2rem;flex-wrap:wrap}
.pstep{flex:1 1 90px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.4rem .3rem;border-top:3px solid var(--line);font-weight:700}
.pstep.on,.pstep[aria-current=step]{color:var(--green-d);border-top-color:var(--green)}
.pstep.done{color:var(--ink2);border-top-color:#9CC6AC}
/* F1-11: five pills do not fit a phone. Under 640px the list is one bar, filled to the current step
   (form.js writes data-at), and one line: "Step 3 of 5 · Logistics". From 640px up, the five pills. */
.pof{display:none}
html:not(.js) ol.progress{display:none}
@media (max-width:639px){
  ol.progress{display:block;--p:20%}
  ol.progress[data-at="2"]{--p:40%}
  ol.progress[data-at="3"]{--p:60%}
  ol.progress[data-at="4"]{--p:80%}
  ol.progress[data-at="5"]{--p:100%}
  ol.progress::before{content:"";display:block;height:5px;border-radius:3px;background:linear-gradient(to right,var(--green) var(--p),var(--line) var(--p))}
  .pstep{display:none;border-top:0;padding:.5rem 0 0;font-size:.9rem;letter-spacing:0;text-transform:none}
  .pstep.on,.pstep[aria-current=step]{display:block}
  .pof{display:inline}
}
.fnav{display:flex;gap:.6rem;justify-content:space-between;margin-top:1.2rem;flex-wrap:wrap}
fieldset{border:0;padding:0;margin:0}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* contract 2.6: steps and portal panes are hidden only where script runs: html.js, set by the <head> one-liner.
   The media query is a net for a page whose <head> lacks the one-liner; with scripting off it never matches. */
.hidden:not([data-step]):not([data-pane]):not([data-acctpane]),html.js .hidden,[hidden]{display:none !important}
@media (scripting:enabled){.hidden{display:none !important}}
html:not(.js) [data-next],html:not(.js) [data-back]{display:none}
/* S4-21: portal row, switcher and section buttons get the same 40px floor */
.rowbtns button,.switcher button,.side button{min-height:40px}

@media (max-width:900px){
  /* minmax(0,1fr), never 1fr: a bare 1fr track floors at MIN-CONTENT, so a 400px image or a
     wide button row pushes the document wider than the viewport. The render gate caught this. */
  .facts,.g3,.g4,.g2,.fgrid,.vhero{grid-template-columns:minmax(0,1fr)}
  .g3.keep2,.g4.keep2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vhero .tile{width:100%}
  .kv b{min-width:100%}
}
/* Z3-01: on a phone the two-up grids stay two across only while a column keeps 9rem. At the usual text size
   that is every phone from 360px up, laid out as before (two equal columns; auto-fill keeps the second
   column when one card stands alone). When the visitor's text size grows the rem grows with it, the
   floor no longer fits twice, and the grid falls to one column instead of cutting prices and names
   (WCAG 1.4.4, 1.4.10). A browser that does not read the line keeps the two columns of the rule above. */
@media (max-width:600px){
  .g3.keep2,.g4.keep2{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(9rem,calc(50% - .51rem))),1fr))}
}
/* S4-17: the menu folds at 900px, not 780px: between the two the Spanish links ran to three rows */
@media (max-width:900px){
  /* contract 2.6: the menu folds only behind a toggle, and only under html.js; without script it is a plain list */
  /* no "order" on the button: it comes before the list in the page, so it stays beside the brand when the
     list opens under them (with order:3 it dropped below the open list, out of reach on a phone) */
  html.js .navtoggle{display:block}
  /* the row keeps its 12px above and below whether the list is open or not; the narrower gap lets the
     brand and the button share one row down to 320px */
  html.js .hrow{min-height:0;padding:12px 0;gap:.6rem .5rem}
  .navtoggle~.nav{width:100%;flex-direction:column;align-items:stretch;padding:0 0 .3rem}
  html.js .navtoggle~.nav{display:none}
  html.js .navtoggle~.nav.open{display:flex}
  html:not(.js) header.site{position:static}
  .navtoggle~.nav a{padding:.65rem .5rem;border-bottom:1px solid var(--line)}
  .navtoggle~.nav a.cta,.navtoggle~.nav a.lang{margin:.5rem 0 0;text-align:center;border-bottom:0}
  /* the open menu is part of a sticky header: on a short phone it scrolls inside itself, so its last
     items (the application and the language) can always be reached */
  html.js .navtoggle~.nav.open{flex-wrap:nowrap;max-height:calc(100vh - var(--hdr,90px) - 24px);max-height:calc(100dvh - var(--hdr,90px) - 24px);
    overflow-y:auto;overscroll-behavior:contain}
  .navtoggle~.nav > *,.navtoggle~.nav .morelist > *{flex:none}
  /* in the phone list the group keeps its name, as a small heading over its links */
  .morelist::before{content:attr(data-label);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    font-weight:700;padding:.9rem .5rem .2rem}
}
@media (max-width:780px){
  .sigrow{gap:24px}
  .sigrow img{height:48px}
  .daterow .d{min-width:100%}
}
/* S3-12: at 320px a two-up card is 131px wide; below 360px the two-up grids go to one column.
   From 360px up the two-up look stays: chips wrap and long words break instead of being clipped. */
@media (max-width:359px){.g3.keep2,.g4.keep2{grid-template-columns:minmax(0,1fr)}}
/* X1-03, S8-11: paper. A printed page is the one copy the date projection cannot correct, so the demo
   label and the day the page was generated print at the top (.printonly, in the shell) and the footer
   keeps its "generated" line. Chrome, buttons and the already-held dates stay off the sheet. */
.printonly{display:none}
@media print{
  @page{margin:12mm}
  body{background:#fff;font-size:11pt}
  .printonly{display:block !important;border:1px solid #000;padding:.4rem .6rem;margin:0 0 .8rem;font-size:10pt;font-weight:700;color:#000}
  .demobar,header.site,.navtoggle,.skip,.sig,.btnrow,.toolbar,.quick,.lall,#newsletter,.demoband,.pastband,
  .fnav,.progress,footer.site .fgrid>div:not(:first-child){display:none !important}
  footer.site{margin-top:1rem;padding:.6rem 0 0;background:none}
  .fgrid{display:block}
  .hero{padding:.6rem 0}
  section.band{padding:1rem 0}
  a{color:#000}
  .card,.fact,.offer,.note,.daterow,.lrow,.stepc,.mapcell{box-shadow:none;break-inside:avoid}
  table.data tr{break-inside:avoid}
  .tblwrap{overflow:visible}
  /* the map says full or open by background colour, which paper drops: the border says it too */
  .mapcell.full{border:2px solid #000}
  .mapcell.empty{border-style:dashed}
  /* a printed line-up is a list of names and stalls: three across, without the tile art */
  .card > a.tt[aria-hidden=true]{display:none}
  .g3.keep2,.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* the application prints all five steps, one under the other */
  html.js fieldset[data-step].hidden{display:block !important}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}


/* Market OS — components the public pages added in Round 1. build.py appends this file to app.css,
   so both arrive as /assets/app.css. Colours come from the variables app.css declares. */

/* demo bar: the whole sentence on a wide screen, one line and the guide link on a phone */
.demobar .demoshort{display:none}
.demobar a.demowhat{color:inherit;font-weight:700;white-space:nowrap;margin-left:.35rem}
/* contract 2.9: on a page opened from the guide the link is the way to the next stop, and looks like one */
.demobar a.demowhat.tour{display:inline-block;white-space:normal;background:#6B4600;color:#fff;text-decoration:none;
  border-radius:999px;padding:.28rem .8rem;margin:.25rem 0 .1rem .35rem}
.demobar a.demowhat.tour:hover{background:#4F3400}
.demobar .demoend{margin:.35rem 0 0;font-weight:700}
@media (max-width:780px){
  .demobar{padding:.45rem .9rem}
  .demobar .demolong{display:none}
  .demobar .demoshort{display:inline}
  /* F1-22: the only way into the guide is a finger-sized target on a phone. The link keeps its place
     in the sentence; its box reaches 13px above and below the words (the margins give the height back) */
  .demobar{padding-bottom:.8rem}
  .demobar a.demowhat{display:inline-block;padding:.8rem .5rem;margin:-.8rem 0}
  .demobar a.demowhat.tour{display:block;margin:.45rem auto 0;padding:.8rem 1rem;max-width:26rem}
}
/* the guide sits in the phone menu; on a wide screen the demo bar already carries it */
@media (min-width:901px){.nav a.guide{display:none}}

/* home: one line of facts under the name, then the week's line-up */
.herometa{font-size:.92rem;color:var(--ink2);margin:.35rem 0 0;max-width:70ch}
.hero.home{padding-bottom:1.1rem}
.hero.home .lede{margin-bottom:.4rem}
section.band.first{padding-top:1.5rem}
.lineup{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.lrow{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.7rem;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.5rem .75rem}
/* the avatar's colour is its category's ink: .lav[data-cat=…], written by build.py from CAT_ART */
.lav{grid-row:1 / span 2;width:38px;height:38px;border-radius:50%;background:var(--green-d);color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:.8rem;letter-spacing:.02em}
.lname{font-weight:600;color:var(--ink);text-decoration:none;line-height:1.3;overflow-wrap:anywhere}
.lname:hover{text-decoration:underline}
.lmeta{grid-column:2;font-size:.82rem;color:var(--ink2);line-height:1.35;overflow-wrap:anywhere}
/* the three questions a shopper has on Friday night, one tap from the top (F1-08) */
.quick{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin:.5rem 0 0;font-size:.95rem;font-weight:600}
.quick a{display:inline-block;padding:.45rem 0}
.lall{display:none;margin:.6rem 0 0;font-weight:600}
.lall a{display:inline-block;padding:.5rem 0}
@media (max-width:900px){.lineup{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  /* F1-08: on a phone the line-up is six compact rows, two across, and one link to the whole week;
     the count is of the rows that are showing, so a vendor put away by the date projection is not one of the six */
  .lineup{gap:.4rem}
  /* Z3-01: two across only while a row keeps 9rem; at twice the text size the list is one column */
  .lineup{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(9rem,calc(50% - .21rem))),1fr))}
  .lrow{padding:.45rem .55rem;column-gap:.5rem;align-items:start}
  .lav{width:32px;height:32px;font-size:.72rem}
  .lcat{display:none}
  .lineup > .lrow:nth-child(n+7 of :not(.hidden)){display:none}
  .lall{display:block}
  /* the link to the whole week sits under the six rows; the one beside the heading would only push them down */
  section.band.first .shead{margin-bottom:.7rem}
  section.band.first .shead > a{display:none}
  .hero.home{padding-top:1.3rem}
  section.band.first{padding-top:1.1rem}
}
@media (max-width:359px){.lineup{grid-template-columns:minmax(0,1fr)}}
@media print{.lineup > .lrow:nth-child(n+7 of :not(.hidden)){display:grid}.lcat{display:inline}}
.totalnote{margin:0 0 .9rem}
/* home: the first three offers that are still running; one that ends makes room for the next */
#home-offers > .offer:nth-child(n+4 of :not(.hidden)){display:none}
@media print{#home-offers > .offer:nth-child(n+4 of :not(.hidden)){display:block}}
/* the one block of the home page that is the demo speaking, in the demo bar's colours (ruling E10) */
.demoband{background:var(--warnbg);border-top:1px solid #EBD9AE}
.demoband h2{font-size:1.3rem}
/* classes that took the place of style attributes (ruling E5) */
.dnote{flex:1 1 100%;margin:.4rem 0 0}
.newsart{margin-bottom:2.4rem}
figure.card{margin:0}

/* headings that moved up a level keep the size of the level they had */
.offer h2,.stepc h2,.fact h2,.note h2{font-family:var(--serif);font-size:1.18rem;margin:0 0 .3rem}
.note h2{font-size:1rem;margin:0 0 .35rem}
.fact h2{margin:.2rem 0 .3rem}

/* guide: what changes for the organizer, then the numbered stops (.steps), each ending in one link */
.note.changes{border-left-color:var(--harvest);margin-top:0}
.note.changes ol,.note ul{margin:.3rem 0 .6rem;padding-left:1.2rem}
.note.changes li{font-size:1.05rem;margin:.4rem 0}
.note.changes h2{font-size:1.25rem}
.stepc .go{margin:.5rem 0 0;font-weight:600}
.stepc .go a{display:inline-block;padding:.35rem 0}

/* newsletter mock and the share box */
.nl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem;align-items:start}
.nlform .hint{font-size:.83rem;color:var(--ink2);margin:.7rem 0 0}
/* the line a mock answers in: in the page from the start, so a screen reader hears it fill (X1-09) */
.mockout{font-size:.9rem;font-weight:600;color:var(--green-d);margin:.7rem 0 0}
.mockout:empty{margin:0}
.mocktag{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.04em;background:var(--warnbg);
  color:#6B4600;border:1px solid #EBD9AE;border-radius:999px;padding:.12rem .6rem;margin:0 0 .8rem}
.shareurl{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;overflow-wrap:anywhere;
  -webkit-user-select:all;user-select:all}
p.shareurl{background:#F5F2EA;border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem}
@media (max-width:900px){.nl{grid-template-columns:minmax(0,1fr)}}

/* vendor page: the dates after the next one, the cottage food notice, the tile at its drawn ratio */
.dates time{display:inline-block;margin-right:.75rem}
.kv small{color:var(--ink2)}
.note.cottage p{font-size:1rem}
.note.cottage p.meta{font-size:.9rem;color:var(--ink2);margin-bottom:.4rem}
.vhero .tile{aspect-ratio:16/9}
.weekgrid{margin-top:1.3rem}
/* a week nobody is confirmed for yet says so; with no script the build-day week is never empty */
.lineup:not(:has(> .lrow:not(.hidden):not([hidden])))::after,
.weekgrid:not(:has(> .card:not(.hidden):not([hidden])))::after{content:attr(data-empty);color:var(--ink2);grid-column:1 / -1}

/* map: a stall prints its vendors and then "Open"; "Open" steps aside while a vendor of that stall
   is showing. Both ways of hiding (the class and the attribute) are read. */
.stall{display:contents}
.stall .mapcell.full:not(.hidden):not([hidden]) ~ .mapcell.empty{display:none}
.stallv:not([hidden]){display:block}
.stallv:not(.hidden):not([hidden]) ~ .stallo{display:none}

/* application: groups are fieldsets with a legend, the progress pills are a list */
ol.progress{list-style:none;padding:0;margin:0 0 1.2rem}
fieldset.field{min-width:0}
fieldset.field > legend{font-weight:600;font-size:.93rem;margin-bottom:.3rem;padding:0}
details.moredates{border:1px solid var(--line);border-radius:9px;padding:.55rem .7rem;background:#FBFAF6}
details.moredates summary{cursor:pointer;font-weight:600;font-size:.94rem}
details.moredates[open] summary{margin-bottom:.5rem}
.doclist{padding-left:1.15rem;margin:0 0 1rem}
.doclist li{margin:.35rem 0}

/* calendar help (Z2-11): what Google Calendar needs waits behind one small disclosure under the buttons */
details.calhelp{font-size:.92rem;color:var(--ink2);margin:.35rem 0 0;max-width:70ch}
details.calhelp summary{cursor:pointer;font-weight:600;color:var(--green-d);padding:.6rem 0;width:fit-content}
details.calhelp p{margin:0 0 .4rem}
/* on paper a closed question helps nobody: the sheet keeps the line-up and the address box */
@media print{details.calhelp{display:none}}
/* About: the address to write to is one long word; it breaks rather than widen a 320px page (WCAG 1.4.12) */
.reach{overflow-wrap:anywhere}
/* map (ruling G4): in the week of a special event one sentence says whose layout this is */
.note.weeknote{border-left-color:var(--harvest);max-width:70ch}

/* 404 speaks both languages side by side */
.hero .grid .fact .btnrow{margin-top:.6rem}

.lav[data-cat=produce]{background:#2F7A4E}.lav[data-cat=meat]{background:#8C4A3A}.lav[data-cat=prepared]{background:#B85C1E}.lav[data-cat=baked]{background:#8A6321}.lav[data-cat=packaged]{background:#5E6B45}.lav[data-cat=beverages]{background:#2C6E8F}.lav[data-cat=plants]{background:#1F6B45}.lav[data-cat=crafts]{background:#6B4A70}