/* =====================================================================
   THEME — interzum guangzhou. Everything specific to this fair lives here.
   Mood: board samples on a pale sage bench, the colours of a laminate
   swatch and a workshop wall, under the site's own red. One red on the
   page (the brand red of the shared header, and the edge banding in the
   photo), kept for actions, numbers and link hover; the schedule is drawn
   in deep sage, solid, because the dates are confirmed.
   ===================================================================== */
:root{
  --g-fair-red:#D71920; --g-fair-red-ink:#B3131A; --g-fair-red-soft:#FBE9E9;
  --g-sage-1:#F0F2EB; --g-sage-2:#DFE4D7; --g-sage-3:#BCC5B1; --g-sage:#7E8B73; --g-sage-ink:#3E4A38; --g-floor:#CFD6CA;
  /* hero backdrop: sampled down the image column where the mask fades in (x≈36%); the photo's sweep has no horizon, so nothing has to line up */
  --g-hero-bg:linear-gradient(180deg,#C8D2C4 0%,#CCD5C7 25%,#CDD6C8 50%,#D0D7CB 75%,var(--g-floor) 100%);
  /* single column: the photo sits below the copy, so the copy area stays at the photo's top colour */
  --g-hero-bg-m:linear-gradient(180deg,#CCD4C7 0%,#C9D2C4 100%);
  --g-display:"Bricolage Grotesque","Manrope","Readex Pro",system-ui,sans-serif;
  --g-hero-shadow:0 30px 60px -36px rgba(62,74,56,.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 */
.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}

/* ---------- 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-sage-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-sage-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-sage-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-sage-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{background:var(--g-hero-bg-m)}
  .cf-hero .wrap{padding-top:28px;padding-bottom:0}
  .hero-art{position:relative;width:auto;height:min(80vw,440px);margin:6px -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: three figures from the organiser ---------- */
.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(3,minmax(0,1fr));overflow:hidden}
.cf-stats .st{padding:22px 22px 20px;border-inline-start:1px solid var(--g-line);min-width:0}
.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;white-space:nowrap}
.cf-stats b small{font-size:.5em;font-weight:600;letter-spacing:0;color:var(--g-muted);margin-inline-start:5px}
.cf-stats b small.pre{margin:0 6px 0 0}
.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 .st{padding:16px 14px 14px}}
@media(max-width:640px){.cf-stats .cf-band{grid-template-columns:1fr}.cf-stats .st{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:baseline;border-inline-start:0;border-top:1px solid var(--g-line)}.cf-stats .st:first-child{border-top:0}.cf-stats span{margin-top:0}}

/* ---------- schedule: two fairs on the same four days, in one complex ---------- */
.sched{padding:60px 0 12px}
.sched h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:18px}
.rail{border:1px solid var(--g-line);border-radius:var(--g-r);padding:18px 22px 8px;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}
/* label column + seven day columns (Sat 27 March – Fri 2 April); every lane uses the same day grid */
.lanes{margin-top:18px}
.lanes-head,.lane{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:28px;align-items:center}
.lanes-head .days{grid-column:2}
.days,.lane-bar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:3px}
.days{list-style:none;margin:0 0 10px;padding:0}
.days li{text-align:center;font:500 13px/1 var(--g-display);color:var(--g-muted);font-variant-numeric:tabular-nums}
.days li i{display:block;font:700 10px/1 var(--g-sans);font-style:normal;letter-spacing:.06em;color:var(--g-muted);margin-bottom:6px}
.days li.we,.days li.we i{color:var(--g-faint)}
.days li.on{color:var(--g-ink);font-weight:700}
.lane{padding:16px 0;border-top:1px solid var(--g-line)}
.lane-lab{min-width:0}
.lane-lab .k{display:block;font:800 11px/1.3 var(--g-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--g-muted)}
.lane-lab .k a{color:inherit;text-decoration:underline;text-decoration-color:var(--g-line-2);text-underline-offset:3px}.lane-lab .k a:hover{color:var(--g-fair-red)}
.lane-lab .d{display:block;font:700 clamp(20px,2.2vw,24px)/1.1 var(--g-display);letter-spacing:-.02em;color:var(--g-ink);margin:7px 0 5px;font-variant-numeric:tabular-nums}
.lane-lab p{margin:0;font-size:14px;color:var(--g-soft);line-height:1.45}
.lane-bar{position:relative}
.lane-bar::before{content:"";grid-column:1/-1;grid-row:1;align-self:center;border-top:1px dashed var(--g-sage-3)}
.bar{grid-row:1;position:relative;z-index:1;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;font:800 12.5px/1 var(--g-sans);letter-spacing:.02em;white-space:nowrap;overflow:hidden;min-width:0}
.bar.fair{background:var(--g-sage-ink);color:#fff;transform-origin:left center;animation:grow .7s cubic-bezier(.2,.7,.2,1) .12s both}
.bar.ciff{background:var(--g-sage-1);border:1.5px solid var(--g-sage-3);color:var(--g-sage-ink);transform-origin:left center;animation:grow .7s cubic-bezier(.2,.7,.2,1) .22s both}
/* after the show: open-ended, so the dashed outline fades out instead of closing (the label stays crisp above the fade) */
.bar.tail{background:var(--g-white);border:1.5px dashed var(--g-sage);border-inline-end:0;border-radius:6px 0 0 6px;color:var(--g-sage-ink);font-weight:700;letter-spacing:0;justify-content:flex-start;padding-inline-start:12px;animation:fade .6s ease .5s both}
.bar.tail::after{content:"";position:absolute;top:-2px;bottom:-2px;inset-inline-end:0;width:45%;background:linear-gradient(90deg,rgba(255,255,255,0),var(--g-white) 85%)}
.bar.tail > span{position:relative;z-index:1}
@keyframes grow{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
@media(max-width:760px){
  .lanes-head,.lane{grid-template-columns:minmax(0,1fr)}
  .lanes-head .days{grid-column:1}
  .lane-lab{margin-bottom:12px}
}
@media(max-width:640px){.rail{padding:14px 14px 4px}.rail-top .venue{margin-inline-start:0;flex-basis:100%}.bar{height:36px;font-size:11px}.bar.tail{padding-inline-start:8px;font-size:10.5px}}

.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-sage-1);border:1px solid var(--g-sage-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}}

/* the terms that have to be exact: machinery, materials and hardware side by side, like a spec sheet; square bullets, like board offcuts */
.cf-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:6px 0 20px;border:1px solid var(--g-line);border-radius:10px;background:var(--g-white);overflow:hidden}
.cf-sheet > div{padding:12px 16px 8px;min-width:0}
.cf-sheet > div + div{border-inline-start:1px solid var(--g-line)}
.cf-sheet .lbl{display:block;font:800 11px/1 var(--g-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--g-sage-ink);padding:4px 0 10px}
.cf-sheet ul{list-style:none;margin:0;padding:0}
.cf-sheet li{position:relative;padding:7px 0 7px 17px;border-top:1px solid var(--g-line);font-size:14px;color:var(--g-soft);line-height:1.4}
.cf-sheet .nw{white-space:nowrap}
.cf-sheet li::before{content:"";position:absolute;inset-inline-start:1px;top:13px;width:7px;height:7px;border-radius:1px;background:var(--g-sage-3)}
@media(max-width:640px){.cf-sheet{grid-template-columns:1fr}.cf-sheet > div + div{border-inline-start:0;border-top:1px solid var(--g-line)}}

/* west to east across the delta, with the fair in the middle */
.route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:6px 0 20px;padding:0;list-style:none;position:relative;max-width:660px}
.route::before{content:"";position:absolute;inset-inline-start:12px;inset-inline-end:12px;top:11px;height:2px;background:repeating-linear-gradient(90deg,var(--g-sage) 0 8px,transparent 8px 14px);opacity:.6}
.route li{position:relative;padding-top:30px;min-width:0}
.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 li.here::before{background:var(--g-sage-ink);border-color:var(--g-sage-ink)}
.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:4px 0 4px}
.route span{display:block;font-size:13.5px;color:var(--g-soft);line-height:1.4}
.route-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted);margin:4px 0 10px}
@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-sage) 0 8px,transparent 8px 14px)}.route li{padding-top:0}.route li::before{inset-inline-start:-34px;top:0}}

/* 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}
/* a long language name (in any page language) pushes its price onto a second line instead of out of the box */
.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 10.5px 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}}
@media(max-width:400px){.rates{column-gap:12px}}

/* ---------- 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)}