@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Oswald:wght@500;600&family=Playfair+Display:ital,wght@1,600&display=swap");
@import url("/fair-site-nav.css");

:root { --navy:#172d46; --ink:#172d46; --gold:#d39330; --blue:#f7efe3; --cream:#fff; --paper:#fff; --brown:#9a402f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Mono",monospace; }
a { color:inherit; }
.page-hero { position:relative; overflow:hidden; min-height:560px; display:grid; align-items:end; padding:80px max(6vw,24px) 72px; isolation:isolate; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(7,30,58,.9),rgba(7,30,58,.35) 62%,rgba(7,30,58,.12)); }
.page-hero__image { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:hero-in 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes hero-in { to { transform:scale(1); } }
.hero-copy { max-width:860px; color:white; }
.eyebrow { display:inline-flex; gap:10px; align-items:center; margin-bottom:16px; padding:9px 13px; color:var(--navy); background:var(--gold); font-size:11px; text-transform:uppercase; letter-spacing:.08em; transform:rotate(-1deg); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:18px; font:600 clamp(56px,8vw,112px)/.92 "Oswald",sans-serif; text-transform:uppercase; letter-spacing:-.035em; }
.lead { max-width:680px; font-size:17px; line-height:1.65; }
.section { padding:96px max(6vw,24px); }
.section.is-blue { background:var(--blue); }
.section.is-navy { color:white; background:var(--navy); }
.section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,520px); gap:50px; align-items:end; margin-bottom:46px; }
.section h2 { margin-bottom:0; font:600 clamp(42px,6vw,78px)/.95 "Oswald",sans-serif; text-transform:uppercase; }
.section-head p,.body-copy { line-height:1.7; font-size:14px; }
.section-head .section-title { margin-bottom:0; font:600 clamp(42px,6vw,78px)/.95 "Oswald",sans-serif; text-transform:uppercase; letter-spacing:0; }
.section-head .eyebrow { margin-bottom:22px; }
.section-head.is-intro { grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:20px clamp(28px,4vw,64px); align-items:start; margin-bottom:44px; padding-top:26px; border-top:2px solid var(--navy); }
.section-head.is-intro .section-label { margin:0; text-wrap:balance; font:600 clamp(19px,1.7vw,25px)/1.25 "Oswald",sans-serif; text-transform:uppercase; letter-spacing:.01em; }
.section-head.is-intro p { max-width:660px; margin:0; }
main.no-hero>.section:first-child { padding-top:64px; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.card { position:relative; display:flex; flex-direction:column; gap:18px; min-height:280px; padding:30px 24px 26px; text-align:center; background:white; border:2px solid var(--navy); transition:transform .25s ease,box-shadow .25s ease; }
.card::before { content:""; position:absolute; inset:6px; border:1px solid var(--navy); opacity:.45; pointer-events:none; }
.card:not(.has-photo) { justify-content:center; }
.card:hover { transform:translateY(-8px); box-shadow:0 16px 34px rgba(23,45,70,.18); }
.card-num { position:absolute; top:-13px; left:50%; z-index:3; width:max-content; padding:6px 11px; color:var(--navy); background:var(--gold); font:500 10px "DM Mono",monospace; letter-spacing:.1em; translate:-50% 0; rotate:-2deg; box-shadow:0 4px 12px rgba(9,28,51,.3); }
.card h3 { margin:0; font:600 clamp(24px,2.1vw,32px)/1 "Oswald",sans-serif; text-transform:uppercase; }
.card p { margin:0; line-height:1.65; font-size:12.5px; }
.card.has-photo { min-height:0; }
/* Things to do: each card opens "add this to your schedule" (src/fair-plan-picker.js). */
.card.has-plan { cursor:pointer; }
.card-plan { position:relative; z-index:3; align-self:center; display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:-4px; padding:0 18px; color:var(--navy); background:white; border:1.5px solid var(--navy); border-radius:999px; font:500 12px/1 "DM Mono",monospace; text-decoration:none; transition:background-color .16s ease,color .16s ease; }
.card-plan span { font-size:17px; line-height:1; }
.card.has-plan:hover .card-plan,.card-plan:focus-visible { color:white; background:var(--navy); }
.card-plan:focus-visible { outline:3px solid var(--brown); outline-offset:3px; }
.card-photo { position:relative; aspect-ratio:1; overflow:hidden; }
.card-photo__image { position:absolute; inset:1px; width:calc(100% - 2px); height:calc(100% - 2px); object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.card-photo__shape { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.card.has-photo:hover .card-photo__image { transform:scale(1.055); }
.page-hero--food { min-height:calc(100svh - 122px); }
.page-hero--food::after { background:linear-gradient(90deg,rgba(9,25,43,.92) 0%,rgba(9,25,43,.55) 46%,rgba(9,25,43,.05) 78%); }
.page-hero--food .page-hero__image { object-position:center 46%; }
.page-hero--food .hero-copy { max-width:920px; }
.food-section { background:var(--blue); }
.food-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:76px clamp(28px,4vw,56px); }
.food-item { --shadow:var(--gold); --offset:12px; display:flex; flex-direction:column; gap:26px; min-width:0; }
.food-item:nth-child(4n + 2),.food-item:nth-child(4n + 3) { --shadow:var(--brown); }
.food-item:nth-child(even).reveal { transition-delay:.12s; }
.food-photo { position:relative; margin:0 var(--offset) var(--offset) 0; aspect-ratio:4/3; overflow:hidden; background:var(--navy); border:2px solid var(--navy); box-shadow:var(--offset) var(--offset) 0 var(--shadow); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1); }
.food-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.food-item:hover .food-photo { transform:translate(-3px,-3px); box-shadow:calc(var(--offset) + 3px) calc(var(--offset) + 3px) 0 var(--shadow); }
.food-item:hover .food-photo img { transform:scale(1.04); }
.food-num { position:absolute; left:14px; top:14px; padding:6px 10px; color:var(--navy); background:var(--gold); font:500 11px "DM Mono",monospace; letter-spacing:.1em; transform:rotate(-2deg); box-shadow:0 4px 12px rgba(9,28,51,.3); }
.food-copy { display:grid; gap:12px; padding-right:var(--offset); }
.food-tag { display:inline-flex; align-items:center; gap:10px; width:max-content; color:var(--brown); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.food-tag::before { content:""; width:22px; height:2px; background:currentColor; }
.food-copy h3 { margin:0; font:600 clamp(30px,3vw,44px)/.98 "Oswald",sans-serif; text-transform:uppercase; letter-spacing:-.01em; }
.food-copy p { max-width:520px; margin:0; font-size:13px; line-height:1.7; }
.food-item:nth-child(odd):last-child { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:32px clamp(32px,5vw,72px); margin-top:8px; padding:clamp(28px,4vw,52px); background:white; border:2px solid var(--navy); }
.food-item:nth-child(odd):last-child .food-photo { aspect-ratio:3/2; }
.food-item:nth-child(odd):last-child .food-copy h3 { font-size:clamp(36px,4vw,60px); }
.food-item:nth-child(odd):last-child .food-copy p { max-width:none; font-size:14px; }
/* Booths on the 2026 map without photos yet: one plain panel under the photo grid. */
.food-more { margin-top:84px; padding:clamp(28px,4vw,52px); background:white; border:2px solid var(--navy); box-shadow:12px 12px 0 var(--gold); }
.section .food-more h2 { margin:0 0 22px; font:600 clamp(30px,3vw,44px)/.98 "Oswald",sans-serif; text-transform:uppercase; }
.food-more dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px clamp(28px,4vw,56px); margin:0; }
.food-more dt { margin-bottom:6px; color:var(--brown); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.food-more dd { margin:0; font-size:15px; line-height:1.6; }
.food-more p { margin:28px 0 0; font-size:14px; line-height:1.7; }
.food-more a { color:var(--navy); font-weight:600; }
@media (max-width:720px) { .food-more { margin-top:56px; box-shadow:8px 8px 0 var(--gold); } .food-more dl { grid-template-columns:1fr; } }
.ticket { position:relative; max-width:860px; margin:auto; padding:64px clamp(24px,7vw,90px); text-align:center; background:radial-gradient(circle at 26px 50%,var(--navy) 4px,transparent 5px),radial-gradient(circle at calc(100% - 26px) 50%,var(--navy) 4px,transparent 5px),white; border:2px solid var(--navy); border-radius:16px; }
.ticket::before { content:""; position:absolute; inset:7px; border:1px solid var(--navy); border-radius:10px; pointer-events:none; }
.ticket h2 { margin-bottom:20px; }
.ticket p { max-width:650px; margin:0 auto 28px; line-height:1.65; }
.cta { display:inline-block; padding:16px 26px; text-decoration:none; background:var(--gold); font:italic 600 20px "Playfair Display",serif; transition:transform .2s; }
.cta:hover { transform:rotate(-1deg) scale(1.04); }
/* Things to do: the tokens card points to /tokens/ with the guest app's token sticker. */
.tokens-callout { display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:20px 36px; align-items:center; margin:0 0 56px; padding:26px 32px 26px 26px; color:var(--navy); background:var(--blue); border:1px solid var(--navy); outline:1px solid var(--navy); outline-offset:-7px; text-decoration:none; transition:box-shadow .2s, translate .2s; }
.tokens-callout:hover { translate:0 -3px; box-shadow:8px 8px 0 var(--gold); }
.tokens-callout img { width:120px; height:auto; rotate:-6deg; }
.tokens-callout-kicker { display:block; margin-bottom:8px; color:var(--brown); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.section .tokens-callout h2 { margin:0 0 8px; font-size:clamp(30px,3vw,44px); }
.tokens-callout p { max-width:56ch; margin:0; font-size:14px; line-height:1.65; }
@media(max-width:760px) { .tokens-callout { grid-template-columns:84px minmax(0,1fr); padding:20px; } .tokens-callout img { width:84px; } .tokens-callout .cta { grid-column:1/-1; justify-self:start; } }
.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.3); }
.fact { padding:38px 24px; background:var(--navy); text-align:center; }
.fact strong { display:block; font:600 42px "Oswald",sans-serif; }
.fact span { font-size:11px; }
.map-card { display:grid; grid-template-columns:1fr 1fr; min-height:430px; background:white; border:3px solid var(--navy); }
.map-art { position:relative; overflow:hidden; background:var(--blue); }
.map-art::before,.map-art::after { content:""; position:absolute; inset:-30%; border:26px double var(--navy); border-radius:48%; transform:rotate(27deg); }
.map-art::after { inset:20% -35%; border-color:var(--gold); transform:rotate(-18deg); }
.map-pin { position:absolute; inset:50% auto auto 50%; z-index:2; width:58px; height:58px; display:grid; place-items:center; transform:translate(-50%,-50%) rotate(-8deg); color:white; background:var(--navy); border-radius:50% 50% 50% 0; font-size:24px; }
.map-copy { padding:50px; display:flex; flex-direction:column; justify-content:center; }
.map-copy h2 { margin-bottom:24px; }
.map-copy address { margin-bottom:30px; font-style:normal; line-height:1.8; }
footer { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; padding:60px max(6vw,24px); color:var(--cream); background:var(--navy); }
footer img { width:220px; height:auto; padding:0; background:transparent; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; font-size:11px; }
.footer-links a { text-decoration:none; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }
.reveal.in { opacity:1; transform:none; }
@media(max-width:1180px){
  .section-head,.map-card { grid-template-columns:1fr; }
  .section-head.is-intro { grid-template-columns:1fr; gap:14px; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .food-grid { gap:56px 24px; }
  .food-item:nth-child(odd):last-child { gap:24px 32px; padding:24px; }
}
@media(max-width:620px){
  /* A band of photo above the title and lead, so the page itself starts on the first screen. */
  .page-hero { min-height:0; padding:104px 20px 26px; }
  .page-hero--food { min-height:0; }
  .page-hero::after { background:linear-gradient(0deg,rgba(7,30,58,.92) 0%,rgba(7,30,58,.72) 55%,rgba(7,30,58,.2) 100%); }
  .page-hero .eyebrow { margin-bottom:12px; }
  .page-hero + main > .section:first-child { padding-top:28px; }
  .page-hero + main > .section:first-child .section-head.is-intro { padding-top:18px; }
  .page-hero--food::after { background:linear-gradient(0deg,rgba(9,25,43,.9),rgba(9,25,43,.18) 75%); }
  .page-hero--food .page-hero__image { object-position:58% center; }
  h1 { font-size:clamp(40px,12.5vw,52px); }
  .lead { font-size:14px; }
  .page-hero .lead { margin-top:12px; line-height:1.55; }
  .section { padding:68px 18px; }
  main.no-hero>.section:first-child { padding-top:18px; }
  main.no-hero .section-head { gap:0; margin-bottom:22px; }
  main.no-hero .section-head p { display:none; }
  main.no-hero .section-head .section-title { font-size:34px; }
  .section-head { gap:22px; }
  .section-head.is-intro { margin-bottom:34px; padding-top:20px; }
  .section-head .eyebrow { margin-bottom:12px; padding:7px 10px; font-size:10px; }
  .cards { grid-template-columns:1fr; }
  .food-grid { grid-template-columns:1fr; gap:52px; }
  .food-item { --offset:9px; gap:22px; }
  .food-item:nth-child(even).reveal { transition-delay:0s; }
  .food-item:nth-child(odd):last-child { grid-template-columns:1fr; gap:22px; padding:18px 18px 26px; }
  .food-item:nth-child(odd):last-child .food-photo { aspect-ratio:4/3; }
  .food-item:nth-child(odd):last-child .food-copy p { font-size:13px; }
  .facts { grid-template-columns:1fr 1fr; }
  /* A phone keeps the whole printed ticket: no angled clip through its rules, and no punch
     holes beside narrow copy. */
  .section.is-blue { padding-block:44px; }
  .ticket { padding:40px 22px 34px; background:white; }
  .ticket h2 { margin-bottom:14px; font-size:clamp(38px,11vw,48px); text-wrap:balance; }
  .ticket p { margin-bottom:24px; font-size:13.5px; line-height:1.6; text-wrap:pretty; }
  .ticket .cta { padding:14px 24px; font-size:19px; }
  .map-copy { padding:35px 24px; }
  footer { grid-template-columns:1fr; }
  .footer-links { justify-content:flex-start; }
}

.fair-map { display:block; width:100%; min-height:430px; height:100%; border:0; }
@media(max-width:600px) { .fair-map { min-height:340px; } }

/* Visitor-guide links on Plan your visit */
.visit-guides { margin-top:72px; padding-top:26px; border-top:2px solid var(--navy); }
.visit-guides-head { display:grid; grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:14px clamp(28px,4vw,64px); align-items:start; margin-bottom:34px; }
.visit-guides-head h2 { margin:0; font:600 clamp(19px,1.7vw,25px)/1.25 "Oswald",sans-serif; text-transform:uppercase; text-wrap:balance; }
.visit-guides-head p { max-width:660px; margin:0; font-size:14px; line-height:1.7; }
.visit-guides-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.visit-guide { position:relative; display:flex; flex-direction:column; gap:12px; min-height:220px; padding:30px 24px 24px; text-decoration:none; background:var(--blue); border:2px solid var(--navy); transition:transform .25s ease,box-shadow .25s ease; }
.visit-guide::before { content:""; position:absolute; inset:6px; border:1px solid var(--navy); opacity:.45; pointer-events:none; }
.visit-guide:hover { transform:translateY(-8px); box-shadow:0 16px 34px rgba(23,45,70,.18); }
.visit-guide small { color:var(--brown); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.visit-guide strong { font:600 clamp(24px,2.1vw,32px)/1 "Oswald",sans-serif; text-transform:uppercase; }
.visit-guide span { font-size:12.5px; line-height:1.65; }
.visit-guide i { margin-top:auto; font:italic 600 24px "Playfair Display",serif; }
@media(max-width:1180px){ .visit-guides-head { grid-template-columns:1fr; } }
@media(max-width:900px){ .visit-guides-list { grid-template-columns:1fr; } .visit-guide { min-height:0; } }
@media(max-width:620px){ .visit-guides { margin-top:52px; } }

/* Pre-rendered fallbacks: the static schedule and ticket-shop link appear only
   without JavaScript; the interactive versions replace them on load. */
.js .sch-prerender,.js .ticket-prerender { display:none; }
.sch-prerender section { margin-bottom:40px; }
.sch-prerender h2 { margin:0 0 12px; font:600 28px/1.1 "Oswald",sans-serif; text-transform:uppercase; }
.sch-prerender ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--navy); }
.sch-prerender li { padding:10px 0; border-bottom:1px solid rgba(23,45,70,.18); font-size:13px; line-height:1.55; }
.sch-prerender-time { display:inline-block; min-width:150px; font-weight:500; }
.ticket-prerender { padding:32px; background:var(--blue); border:2px solid var(--navy); }
.ticket-prerender p { margin:0 0 18px; line-height:1.6; }

.food-brand-heading { display:flex; align-items:center; gap:16px; }
.food-brand-logo { width:80px; height:80px; flex:0 0 80px; object-fit:contain; border-radius:0; }