/* =====================================================================
   THEME — canton-fair. Everything specific to this fair lives here.
   Mood: kraft and sand, the colours of export cartons, under the site's
   own red. One red on the page (the brand red of the shared header) and
   it is kept for actions, numbers and link hover; the schedule is drawn
   in kraft, dashed, because the 141st dates are expected, not announced.
   ===================================================================== */
:root{
  --g-fair-red:#D71920; --g-fair-red-ink:#B3131A; --g-fair-red-soft:#FBE9E9;
  --g-sand-1:#F6EFE3; --g-sand-2:#EADFCB; --g-sand-3:#D8C5A4; --g-kraft:#B8955E; --g-kraft-ink:#6F5430; --g-floor:#DCBA92;
  /* hero backdrop: cream wall softening into a tan floor around 78% — sampled from the left edge of hero-*.webp, whose horizon is a soft one */
  --g-hero-bg:linear-gradient(180deg,#F0E9DE 0%,#F0E7D9 55%,#EEDCC6 72%,var(--g-floor) 80%,#D8B388 100%);
  --g-display:"Bricolage Grotesque","Manrope","Readex Pro",system-ui,sans-serif;
  --g-hero-shadow:0 30px 60px -36px rgba(111,84,48,.5);
}

/* =====================================================================
   SKELETON — shared by every fair page. Reads only the tokens above.
   ===================================================================== */
:root{
  --g-paper:#FAF8F4; --g-paper-2:#F2EFE8; --g-white:#FFFFFF; --g-ink:#171614; --g-soft:#3E3B36; --g-muted:#726D65; --g-faint:#A8A39A; --g-line:#E5E0D6; --g-line-2:#D1CBBF;
  --g-sans:"Manrope","Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --g-wrap:1120px; --g-r:12px; --g-r-s:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--g-paper);color:var(--g-ink);font:16px/1.65 var(--g-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--g-fair-red-ink)}a:hover{color:var(--g-fair-red)}
img{display:block;max-width:100%}
.wrap{max-width:var(--g-wrap);margin:0 auto;padding:0 16px}
@media(min-width:900px){.wrap{padding:0 32px}}
h1,h2,h3{margin:0;font-family:var(--g-display);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variation-settings:"opsz" 96}
.small{font-size:13px;color:var(--g-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--g-fair-red);outline-offset:3px;border-radius:2px}

/* eyebrow, numbers, the "expected" tag */
.cf-eyebrow{display:inline-flex;align-items:center;gap:10px;line-height:1.35;font:800 11.5px/1.3 var(--g-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--g-muted)}
.cf-eyebrow::before{content:"";width:18px;height:1.5px;background:var(--g-fair-red);flex:none}
.cf-num{font:700 13px/1 var(--g-display);color:var(--g-fair-red);letter-spacing:.04em}
.exp{display:inline-block;font:800 10px/1 var(--g-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--g-kraft-ink);border:1px dashed var(--g-kraft);border-radius:4px;padding:4px 6px 3px;white-space:nowrap;vertical-align:2px}

/* ---------- hero ---------- */
.cf-hero{position:relative;overflow:hidden;background:var(--g-hero-bg);color:var(--g-ink)}
.cf-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);padding-top:44px;padding-bottom:124px}
.hero-copy{max-width:600px}
.cf-hero .cf-crumbs{font-size:13px;color:var(--g-kraft-ink);margin:0 0 22px;opacity:.9}.cf-hero .cf-crumbs a{color:inherit;text-decoration:none}.cf-hero .cf-crumbs a:hover{text-decoration:underline}
.cf-hero .cf-eyebrow{color:var(--g-kraft-ink)}
.cf-hero h1{font-size:clamp(36px,5.2vw,62px);line-height:1;margin:16px 0 0}
.cf-hero h1 .sub{display:block;font-size:.42em;font-weight:500;letter-spacing:-.005em;color:var(--g-kraft-ink);margin-top:14px;line-height:1.25}
.cf-hero .cf-lede{font-size:clamp(16px,1.35vw,18.5px);color:var(--g-soft);max-width:560px;margin:22px 0 0}
.cf-hero .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.cf-hero .trust{font-size:13px;color:var(--g-kraft-ink);margin:22px 0 0;opacity:.95}
.hero-art{position:absolute;top:0;inset-inline-end:0;bottom:0;width:min(58%,840px);z-index:0}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:100% center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
@media(max-width:899px){
  .cf-hero .wrap{padding-top:28px;padding-bottom:0}
  .hero-art{position:relative;width:auto;height:min(64vw,420px);margin:26px -16px 0}
  .hero-art img{object-position:100% 50%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
  .cf-hero h1{font-size:clamp(34px,10vw,46px)}
}
@media(max-width:640px){.cf-hero .acts .cf-btn{flex:1 1 100%}}

/* buttons */
.cf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--g-r-s);padding:13px 20px;font:800 15px/1.2 var(--g-sans);text-decoration:none;transition:transform .15s ease,background .15s ease,border-color .15s ease;cursor:pointer}
.cf-btn:active{transform:translateY(1px)}
.cf-btn.primary{background:var(--g-fair-red);color:#fff;box-shadow:0 10px 24px -14px rgba(215,25,32,.6)}.cf-btn.primary:hover{background:var(--g-fair-red-ink);color:#fff}
.cf-btn.ghost{background:rgba(255,255,255,.92);color:var(--g-ink);border:1px solid rgba(23,22,20,.16)}.cf-btn.ghost:hover{border-color:var(--g-ink);color:var(--g-ink)}
.cf-btn .chev{width:14px;height:14px;flex:none}
.cf-btn.block{display:flex;width:100%}

/* ---------- stats band ---------- */
.cf-stats{position:relative;z-index:2;margin-top:-52px}
.cf-stats .cf-band{background:var(--g-white);border:1px solid var(--g-line);border-radius:var(--g-r);box-shadow:var(--g-hero-shadow);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.cf-stats .st{padding:22px 20px 20px;border-inline-start:1px solid var(--g-line)}
.cf-stats .st:first-child{border-inline-start:0}
.cf-stats b{display:block;font:700 clamp(26px,2.8vw,36px)/1 var(--g-display);letter-spacing:-.03em;color:var(--g-fair-red);font-variant-numeric:tabular-nums}
.cf-stats b small{font-size:.5em;font-weight:600;letter-spacing:0;color:var(--g-muted);margin-inline-start:5px}
.cf-stats span{display:block;font-size:13px;color:var(--g-muted);margin-top:8px;line-height:1.4}
.cf-stats .cap{font-size:12.5px;color:var(--g-muted);margin:10px 4px 0}
@media(max-width:899px){.cf-stats{margin-top:-22px}.cf-stats .cf-band{grid-template-columns:1fr 1fr}.cf-stats .st{padding:16px 14px}.cf-stats .st:nth-child(3){border-inline-start:0}.cf-stats .st:nth-child(n+3){border-top:1px solid var(--g-line)}}

/* ---------- schedule: three phases on one day axis ---------- */
.sched{padding:60px 0 12px}
.sched h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:18px}
.rail{--g-lab:280px;border:1px solid var(--g-line);border-radius:var(--g-r);padding:18px 22px 6px;background:var(--g-white)}
.rail-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rail-top b{font:700 17px var(--g-display);letter-spacing:-.01em}
.rail-top .venue{margin-inline-start:auto;font-size:12.5px;color:var(--g-muted)}
.rail-note{margin:8px 0 0;font-size:14px;color:var(--g-soft);max-width:72ch;line-height:1.5}
.axis,.ph{display:grid;grid-template-columns:var(--g-lab) repeat(21,minmax(0,1fr));column-gap:2px}
.axis{margin-top:18px}
.axis .m{border-top:1.5px solid var(--g-line-2);padding:6px 0 0;font:800 10.5px/1 var(--g-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--g-muted)}
.phases{list-style:none;margin:6px 0 0;padding:0}
.ph{align-items:center;padding:14px 0;border-top:1px solid var(--g-line)}
.ph:first-child{border-top:0}
.ph::before{content:"";grid-column:2/23;grid-row:1;align-self:center;border-top:1px dashed var(--g-line-2)}
.ph-lab{grid-column:1;grid-row:1;padding-inline-end:24px;min-width:0}
.ph-lab .k{display:block;font:800 11px/1 var(--g-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--g-muted)}
.ph-lab .d{display:block;font:700 clamp(19px,1.9vw,22px)/1.1 var(--g-display);letter-spacing:-.02em;color:var(--g-ink);margin:7px 0 6px;font-variant-numeric:tabular-nums}
.ph-lab p{margin:0;font-size:13.5px;color:var(--g-soft);line-height:1.45}
.days{grid-row:1;position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0;padding:0;border:1.5px dashed var(--g-kraft);border-radius:8px;background:var(--g-sand-1);overflow:hidden;transform-origin:left center;animation:grow .7s cubic-bezier(.2,.7,.2,1) both}
.ph:nth-child(2) .days{animation-delay:.12s}.ph:nth-child(3) .days{animation-delay:.24s}
.days li{text-align:center;padding:7px 0 8px;font:700 14px/1 var(--g-display);color:var(--g-ink);font-variant-numeric:tabular-nums;border-inline-start:1px dashed rgba(111,84,48,.28)}
.days li:first-child{border-inline-start:0}
.days li i{display:block;font:700 9.5px/1 var(--g-sans);font-style:normal;letter-spacing:.08em;color:var(--g-kraft-ink);margin-bottom:5px}
.days li.we{color:var(--g-muted)}
.rail-foot{margin:4px 0 8px;padding-top:12px;border-top:1px solid var(--g-line);font-size:13px;color:var(--g-muted)}
@keyframes grow{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
@media(max-width:899px){
  .axis,.ph::before{display:none}
  .ph{display:block;padding:16px 0}
  .ph-lab{padding-inline-end:0}
  .ph-lab p{max-width:60ch}
  .days{margin-top:12px;max-width:360px}
  .days li{padding:8px 0 9px;font-size:15px}
}
@media(max-width:640px){.rail{padding:14px 14px 4px}.rail-top .venue{margin-inline-start:0;flex-basis:100%}.days{max-width:none}}

.facts{margin:16px 0 0;border:1px solid var(--g-line);border-radius:var(--g-r);padding:6px 22px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;background:var(--g-white)}
.facts div{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--g-line);font-size:14.5px}
.facts div:nth-child(-n+2){border-top:0}
.facts dt{color:var(--g-muted);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.facts dd{margin:0;color:var(--g-soft)}
.facts dd .small{display:block;margin-top:2px}
.facts .foot{grid-column:1/-1;border-top:1px solid var(--g-line);padding:12px 0 10px;font-size:12.5px;color:var(--g-muted);display:block}
@media(max-width:899px){.facts{grid-template-columns:1fr;padding:4px 18px}.facts div:nth-child(2){border-top:1px solid var(--g-line)}.facts div{grid-template-columns:96px 1fr}}

/* ---------- body: prose + booking aside ---------- */
.body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start;padding-top:56px;padding-bottom:24px}
@media(max-width:959px){.body{grid-template-columns:1fr;gap:40px}}
.sec{padding:22px 0 10px;border-top:1px solid var(--g-line)}
.sec:first-child{border-top:0;padding-top:0}
.sec .cf-num{display:block;margin-bottom:10px}
.sec h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px;max-width:32ch}
.sec p{color:var(--g-soft);font-size:16.5px;max-width:68ch;margin:0 0 14px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 18px;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;background:var(--g-sand-1);border:1px solid var(--g-sand-2);border-radius:10px;padding:12px 14px 12px 44px;position:relative;font-size:14px;color:var(--g-soft);line-height:1.45}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;inset-inline-start:14px;top:12px;font:700 13px/1.5 var(--g-display);color:var(--g-fair-red)}
.steps li b{display:block;color:var(--g-ink);font-weight:800;font-size:13.5px}
@media(max-width:640px){.steps{grid-template-columns:1fr}}

.metro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0 18px;padding:0;list-style:none}
.metro li{border:1px solid var(--g-line);border-radius:10px;padding:11px 14px 11px 34px;position:relative;font-size:14px;color:var(--g-soft);line-height:1.4;background:var(--g-white)}
.metro li::before{content:"";position:absolute;inset-inline-start:14px;top:16px;width:10px;height:10px;border-radius:50%;border:3px solid var(--g-kraft);box-sizing:border-box;background:var(--g-white)}
.metro li b{display:block;color:var(--g-ink);font-weight:800;font-size:13.5px}
@media(max-width:560px){.metro{grid-template-columns:1fr}}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.tags span{font-size:13px;font-weight:600;color:var(--g-soft);background:var(--g-sand-1);border:1px solid var(--g-sand-2);border-radius:6px;padding:5px 10px}
.tags .lbl{background:none;border:0;padding:5px 4px 5px 0;color:var(--g-muted);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.route{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:14px;margin:6px 0 20px;padding:0;list-style:none;position:relative;max-width:454px}
.route::before{content:"";position:absolute;inset-inline-start:12px;inset-inline-end:12px;top:11px;height:2px;background:repeating-linear-gradient(90deg,var(--g-kraft) 0 8px,transparent 8px 14px);opacity:.6}
.route li{position:relative;padding-top:30px}
.route li::before{content:"";position:absolute;inset-inline-start:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--g-white);border:5px solid var(--g-fair-red);box-sizing:border-box}
.route b{display:block;font:700 18px/1.1 var(--g-display);letter-spacing:-.02em}
.route small{display:block;font-size:12px;color:var(--g-muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700;margin:3px 0 5px}
.route span{font-size:14px;color:var(--g-soft);display:block;line-height:1.45}
@media(max-width:640px){.route{grid-template-columns:1fr;gap:16px;padding-inline-start:34px}.route::before{inset-inline-start:9px;inset-inline-end:auto;top:8px;bottom:8px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--g-kraft) 0 8px,transparent 8px 14px)}.route li{padding-top:0}.route li::before{inset-inline-start:-34px;top:2px}}

/* aside */
aside{position:sticky;top:16px}
.book{background:var(--g-white);border:1px solid var(--g-line);border-radius:var(--g-r);overflow:hidden;box-shadow:0 24px 50px -40px rgba(23,22,20,.5)}
.book-head{background:var(--g-fair-red);color:#fff;padding:18px 20px 16px}
.book-head .cf-eyebrow{color:#fff;opacity:.9}.book-head .cf-eyebrow::before{background:#fff}
.book-head strong{display:block;font:700 20px/1.15 var(--g-display);letter-spacing:-.02em;margin-top:8px}
.book-head span{display:block;font-size:13px;opacity:.9;margin-top:4px}
.book-body{padding:16px 20px 20px}
.rates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.rates li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:6px;padding:7px 0;border-bottom:1px solid var(--g-line);font-size:13.5px;color:var(--g-soft);min-width:0}
.rates li b{margin-inline-start:auto;font:700 14.5px var(--g-display);color:var(--g-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.rates li b small{font:600 11px var(--g-sans);color:var(--g-muted);margin-inline-start:2px}
.book .small{margin:12px 0 0}
.book .acts{margin-top:14px;display:grid;gap:8px}
.book .cf-btn.ghost{background:var(--g-white)}
@media(max-width:959px){aside{position:static}.rates{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.rates{column-gap:12px}.rates li{font-size:13.5px}}

/* ---------- FAQ ---------- */
.faqs{padding:12px 0 8px}
.faqs h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:14px}
.qa{border-top:1px solid var(--g-line)}
.qa:last-of-type{border-bottom:1px solid var(--g-line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:800;font-size:16px;color:var(--g-ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--g-line-2);background:
  linear-gradient(var(--g-fair-red),var(--g-fair-red)) center/10px 1.5px no-repeat,
  linear-gradient(var(--g-fair-red),var(--g-fair-red)) center/1.5px 10px no-repeat;transition:transform .25s ease}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{margin:0 0 18px;color:var(--g-soft);max-width:68ch;font-size:15.5px}

/* ---------- other fairs ---------- */
.others{padding:40px 0 72px}
.others h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:10px}
.cf-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--g-line)}
.cf-list li{border-bottom:1px solid var(--g-line);padding:14px 0;display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:baseline}
.cf-list .when{font:700 15px var(--g-display);font-variant-numeric:tabular-nums;color:var(--g-ink);letter-spacing:-.01em}
.cf-list a{color:var(--g-ink);font-weight:700;text-decoration:none}.cf-list a:hover{color:var(--g-fair-red)}
.cf-list .meta{font-size:13.5px;color:var(--g-muted);display:block}
@media(max-width:560px){.cf-list li{grid-template-columns:1fr;gap:2px}}

/* ---------- mobile booking bar ---------- */
.mbar{display:none}
@media(max-width:959px){
  .mbar{display:flex;gap:8px;position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(250,248,244,.96);backdrop-filter:saturate(1.4) blur(8px);border-top:1px solid var(--g-line);z-index:9}
  .mbar a{flex:1;text-align:center;border-radius:var(--g-r-s);padding:13px 8px;font:800 15px/1.2 var(--g-sans);text-decoration:none}
  .mbar .b{background:var(--g-fair-red);color:#fff;flex:1.4}.mbar .w{border:1px solid var(--g-line-2);color:var(--g-ink);background:var(--g-white)}
  body.has-mbar footer{padding-bottom:96px}
}

/* ---------- entrance motion ---------- */
.hero-copy > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-copy > :nth-child(2){animation-delay:.06s}.hero-copy > :nth-child(3){animation-delay:.12s}.hero-copy > :nth-child(4){animation-delay:.18s}.hero-copy > :nth-child(5){animation-delay:.24s}.hero-copy > :nth-child(6){animation-delay:.3s}
.hero-art{animation:fade 1s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

[dir=rtl] .hero-art img{transform:scaleX(-1)}