/* Volunteer at the Fair (/volunteer/): builds on fair-guides.css. The sign-up sheet holds the
   embedded Jotform; sticker art in /volunteer-art/ and /site-art/ matches the guest app's icons. */
.volunteer-page{--sage:#6e7f4e}
.volunteer-page [hidden]{display:none!important}
.vo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Hero: heading and details on the left, the sign-up sheet on the right over a faint ruled-paper
   pattern. The empty 1fr rows keep the left column centered; narrow screens stack heading, sheet, details. */
.vo-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". form" "head form" "more form" ". form";column-gap:clamp(40px,6vw,96px);align-items:center;padding:clamp(52px,6vw,92px) max(28px,6vw) clamp(64px,7vw,104px);background:repeating-linear-gradient(to bottom,transparent 0 37px,rgba(23,45,70,.07) 37px 38px),var(--paper)}
.vo-hero-head{grid-area:head;min-width:0;animation:feature-copy-in .7s .05s both}
.vo-hero-more{grid-area:more;min-width:0;animation:feature-copy-in .7s .05s both}
.vo-hero-head .guide-hand{margin-bottom:14px}
.vo-hero h1{max-width:9ch;margin:0 0 28px;font-size:clamp(66px,7.6vw,128px);line-height:.84}
.vo-hero .guide-lead{max-width:30ch;margin-bottom:26px}
.vo-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.vo-facts li{display:flex;align-items:center;gap:10px}
.vo-facts li::before{content:"";width:6px;height:6px;background:var(--brown)}
.vo-hero-art{display:block;width:auto;height:118px;margin:34px 0 0 -4px;rotate:-5deg;filter:drop-shadow(0 10px 14px rgba(23,45,70,.14))}

/* Sign-up sheet: a clipboard page with a gold band holding Jotform's form */
.vo-sheet{grid-area:form;position:relative;min-width:0;padding:0 clamp(18px,2.4vw,30px) 22px;background:#fff;border:1.5px solid var(--navy);box-shadow:12px 12px 0 rgba(23,45,70,.08);animation:feature-copy-in .7s .2s both}
.vo-sheet-art{position:absolute;top:-58px;right:-24px;width:auto;height:clamp(108px,10vw,140px);rotate:8deg;filter:drop-shadow(0 10px 14px rgba(23,45,70,.16));pointer-events:none}
.vo-sheet-band{margin:0 calc(-1 * clamp(18px,2.4vw,30px)) 24px;padding:12px clamp(96px,9vw,120px) 12px clamp(18px,2.4vw,30px);color:var(--navy);background:var(--gold);font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.guide-page .vo-sheet h2{max-width:12ch;margin:0 0 10px;font:600 clamp(26px,2.4vw,32px)/1.1 var(--serif);text-transform:none;letter-spacing:.005em}
.vo-sheet-intro{max-width:40ch;margin:0 0 16px;font-size:13px;line-height:1.6}
.vo-form{margin:0 calc(-1 * clamp(10px,1.2vw,16px));border-top:1px solid var(--rule)}
.vo-form iframe{display:block;width:100%;min-width:100%;max-width:100%;height:620px;border:0;background:#fff}
.vo-open{margin:12px 0 0;font-size:12px}
.vo-open a{text-underline-offset:4px}
.vo-sheet:focus-within{box-shadow:12px 12px 0 rgba(211,147,48,.28)}

/* The shift board: a printed roster of the form's real shifts */
.vo-board-wrap{overflow-x:auto;max-width:900px}
.vo-board{width:100%;border-collapse:separate;border-spacing:10px;margin:-10px}
.vo-board thead th{padding:0 0 6px;text-align:left;vertical-align:bottom}
.vo-board thead th span{display:block;font:400 clamp(28px,2.6vw,38px)/.9 var(--display);font-variation-settings:"opsz" 2;text-transform:uppercase}
.vo-board thead th small{font:600 16px/1.3 var(--serif);letter-spacing:.012em}
.vo-board tbody th{padding:0 8px 0 0;font:500 12px/1.3 var(--mono);text-align:left;white-space:nowrap}
.vo-board td{padding:0}
.vo-tag{position:relative;display:block;padding:14px 12px 13px 26px;color:var(--navy);background:var(--paper);border:1.5px solid var(--navy);font:600 16px/1.2 var(--serif);letter-spacing:.012em;white-space:nowrap}
.vo-tag::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;translate:0 -50%;border:1.5px solid var(--navy);border-radius:50%;background:#fff}
.vo-board td.is-off span{display:block;padding:14px 12px 13px;border:1.5px dashed rgba(23,45,70,.3);color:rgba(23,45,70,.55);font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:center}

/* Where you might help */
.vo-area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.vo-area-grid li{display:grid;justify-items:start;align-content:end;gap:16px;min-width:0;padding:24px 20px 20px;background:#fff;border:1px solid var(--navy)}
.vo-area-grid li:first-child{grid-row:span 2;align-content:center;background:var(--navy);color:var(--paper)}
.vo-area-grid img{width:auto;max-width:100%;height:92px;object-fit:contain;object-position:left bottom}
.vo-area-grid li:first-child img{height:150px}
.guide-page main .vo-area-grid h3{margin:0;font:400 clamp(24px,2.1vw,30px)/1 var(--display);font-variation-settings:"opsz" 2;text-transform:uppercase;letter-spacing:-.005em}
.guide-page main .vo-area-grid li:first-child h3{font-size:clamp(34px,3vw,46px)}

/* How it works */
.vo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin:0;padding:0;list-style:none;counter-reset:step}
.vo-steps li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:start;counter-increment:step}
.vo-steps img{display:block;width:104px;height:96px;object-fit:contain}
.vo-steps h3{margin:6px 0 10px;font-size:22px;line-height:1.2}
.vo-steps h3::before{content:counter(step);display:block;margin-bottom:6px;color:var(--brown);font:400 28px/1 var(--hand)}
.vo-steps p{margin:0;font-size:14px;line-height:1.65;text-wrap:pretty}

/* Good to know */
.vo-know-grid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.vo-know-art{display:block;width:100%;max-width:220px;height:auto;rotate:-4deg;filter:drop-shadow(0 12px 16px rgba(23,45,70,.12))}
.vo-know .guide-qa{grid-template-columns:minmax(0,1fr)}

/* Sticky sign-up bar once the sheet is out of sight */
.vo-bar{position:fixed;left:50%;bottom:16px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(720px,calc(100% - 24px));padding:12px 12px 12px 22px;translate:-50% 0;background:var(--paper);border:1px solid var(--navy);box-shadow:0 18px 40px rgba(23,45,70,.22);animation:vo-bar-in .35s ease both}
.vo-bar p{display:grid;gap:4px;margin:0;min-width:0}
.vo-bar strong{font:600 19px/1.1 var(--serif)}
.vo-bar p span{font-size:11px;opacity:.8}
.vo-bar a{display:flex;align-items:center;gap:14px;min-height:52px;padding:14px 22px;color:var(--navy);background:var(--gold);font:600 italic 21px/1 FairSerif,serif;text-decoration:none;white-space:nowrap;clip-path:polygon(0 9px,9px 9px,9px 0,calc(100% - 9px) 0,calc(100% - 9px) 9px,100% 9px,100% calc(100% - 9px),calc(100% - 9px) calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,9px calc(100% - 9px),0 calc(100% - 9px))}
.vo-bar a:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.vo-bar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.vo-bar-on footer{padding-bottom:130px}
@keyframes vo-bar-in{from{opacity:0;translate:-50% 20px}to{opacity:1;translate:-50% 0}}

@media(max-width:1100px){
  .vo-area-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vo-steps{grid-template-columns:minmax(0,1fr);max-width:620px}
}
@media(max-width:900px){
  .vo-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "form" "more"}
  .vo-hero h1{max-width:none;margin-bottom:0}
  .vo-hero-head{margin-bottom:36px}
  .vo-hero-more{margin-top:48px}
  .vo-sheet{max-width:600px}
  .vo-know-grid{grid-template-columns:minmax(0,1fr)}
  .vo-know-art{max-width:160px}
}
@media(max-width:700px){
  .vo-hero{padding:28px 18px 48px}
  .vo-hero-head{margin-bottom:26px}
  .vo-hero-head .guide-hand{display:none}
  .vo-hero h1{font-size:clamp(52px,15vw,84px)}
  .vo-hero .guide-lead{font-size:19px}
  .vo-hero-more{margin-top:40px}
  .vo-hero-art{height:90px}
  .vo-sheet{padding:0 14px 18px}
  .vo-sheet-band{margin:0 -14px 20px;padding:11px 92px 11px 14px}
  .vo-sheet-art{top:-44px;right:-4px;height:96px}
  .vo-form{margin:0 -8px}
  .vo-form iframe{height:560px}
  .vo-board{border-spacing:6px;margin:-6px}
  .vo-board thead th span{font-size:22px}
  .vo-board thead th small{font-size:13px}
  .vo-board tbody th{font-size:10px;padding-right:2px;white-space:normal;max-width:56px}
  .vo-tag{padding:12px 6px 11px 18px;font-size:13px;white-space:normal}
  .vo-tag::before{left:6px;width:6px;height:6px}
  .vo-board td.is-off span{padding:12px 4px 11px;font-size:9px}
  .vo-area-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vo-area-grid li{padding:18px 14px 16px;gap:12px}
  .vo-area-grid li:first-child{grid-row:auto;grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);align-items:center}
  .vo-area-grid img{height:70px}
  .vo-area-grid li:first-child img{height:84px}
  .guide-page main .vo-area-grid h3{font-size:21px}
  .guide-page main .vo-area-grid li:first-child h3{font-size:30px}
  .vo-steps li{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .vo-steps img{width:84px;height:76px}
  .vo-bar{bottom:10px;padding:10px 10px 10px 16px;gap:12px}
  .vo-bar p span{display:none}
  .vo-bar strong{font-size:16px}
  .vo-bar a{min-height:48px;padding:12px 18px;font-size:19px}
}
@media(prefers-reduced-motion:reduce){.vo-hero-head,.vo-hero-more,.vo-sheet,.vo-bar{animation:none}}