/* =====================================================================
   THEME — pchi. Everything specific to this fair lives here.
   Mood: raw materials on a heather-grey formulation bench (an emulsion,
   an amber botanical extract, surfactant flakes in lab glass), under the
   site's own red. One red on the page (the brand red of the shared
   header, and the pipette bulb in the photo), kept for actions, numbers
   and link hover; the schedule is drawn in deep heather, solid, because
   the dates are confirmed.
   ===================================================================== */
:root{
  --g-fair-red:#D71920; --g-fair-red-ink:#B3131A; --g-fair-red-soft:#FBE9E9;
  --g-heather-1:#F5F2F5; --g-heather-2:#E8E2E9; --g-heather-3:#CBC1CD; --g-heather:#8C7F90; --g-heather-ink:#4A3E4D; --g-floor:#CBC2CC;
  /* hero backdrop: the photo's backdrop was regraded to exactly this vertical gradient, so the mask can fade in anywhere without a seam */
  --g-hero-bg:linear-gradient(180deg,#DDD6DE 0%,#DCD4DD 15%,#D9D1DA 30%,#D7CFD8 42%,#D7CFD8 50%,#D6CED7 58%,#D3CAD4 70%,#CEC5CF 85%,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,#DED7DF 0%,#DDD6DE 100%);
  --g-display:"Bricolage Grotesque","Manrope","Readex Pro",system-ui,sans-serif;
  --g-hero-shadow:0 30px 60px -36px rgba(74,62,77,.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-heather-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-heather-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-heather-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-heather-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}
  /* the glassware sits low and right in a wide, mostly empty frame: in the single column the picture is drawn 1.54× the box,
     right-aligned and lifted, so the box shows the group (x 0.35–1, y 0.28–0.92 of the image). Sizing and margins, not a
     transform, so the build's right-to-left mirror (scaleX(-1) on this img) still lands the group inside the box. */
  .hero-art{position:relative;width:auto;height:min(80vw,440px);margin:6px -16px 0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
  .hero-art img{position:relative;top:-43%;width:154%;height:154%;max-width:none;margin-inline-start:-54%;object-position:100% 0;-webkit-mask-image:none;mask-image:none}
  .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: four figures from the 2026 show ---------- */
.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,minmax(0,1fr));overflow:hidden}
.cf-stats .st{padding:22px 20px 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 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: the 2027 week in Guangzhou; the 2026 week in Hangzhou below it, on the same weekdays ---------- */
.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}
.lanes{margin-top:16px}
.lane{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:32px;align-items:center;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 .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}
/* one week as a strip of seven days (Mon–Sun); the show's days are filled */
.week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.week li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:54px;min-width:0;border:solid var(--g-line);border-width:1px 0;font:500 15px/1 var(--g-display);color:var(--g-muted);font-variant-numeric:tabular-nums}
.week li:first-child{border-left-width:1px;border-radius:8px 0 0 8px}
.week li:last-child{border-right-width:1px;border-radius:0 8px 8px 0}
.week li i{font:700 10px/1 var(--g-sans);font-style:normal;letter-spacing:.06em;color:var(--g-muted)}
.week li.we,.week li.we i{color:var(--g-faint)}
.week li.on{background:var(--g-heather-ink);border-color:var(--g-heather-ink);color:#fff;font-weight:700;animation:fade .5s ease both}
.week li.on i{color:rgba(255,255,255,.72)}
.week li.on:nth-child(4){animation-delay:.08s}.week li.on:nth-child(5){animation-delay:.16s}
/* the previous edition: same weekdays, another city; drawn pale */
.lane.past .lane-lab .d{color:var(--g-soft);font-size:clamp(18px,1.9vw,21px)}
.lane.past .week li.on{background:var(--g-heather-1);border-color:var(--g-heather-3);color:var(--g-heather-ink);animation:none}
.lane.past .week li.on i{color:var(--g-heather)}
.lane.past .week li.on + li:not(.on){border-inline-start:1px solid var(--g-heather-3)}
.lane.past .week li:not(.on) + li.on{border-inline-start:1px solid var(--g-heather-3)}
@media(max-width:760px){
  .lane{grid-template-columns:minmax(0,1fr)}
  .lane-lab{margin-bottom:12px}
}
@media(max-width:640px){.rail{padding:14px 14px 4px}.rail-top .venue{margin-inline-start:0;flex-basis:100%}.week li{height:50px;font-size:14px;gap: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-heather-1);border:1px solid var(--g-heather-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}}

/* what a booth meeting covers, set like a technical data sheet: one row per item */
.tds{margin:6px 0 20px;border:1px solid var(--g-line);border-radius:10px;background:var(--g-white);overflow:hidden}
.tds > div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;padding:13px 18px 12px;border-top:1px solid var(--g-line)}
.tds > div:first-child{border-top:0}
.tds dt{position:relative;padding:1px 0 0 18px;font-weight:800;font-size:14px;line-height:1.45;color:var(--g-ink)}
.tds dt::before{content:"";position:absolute;inset-inline-start:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--g-heather-3);box-shadow:inset 0 0 0 1.5px var(--g-heather)}
.tds dd{margin:0;font-size:15px;line-height:1.5;color:var(--g-soft)}
@media(max-width:640px){.tds > div{grid-template-columns:minmax(0,1fr);gap:3px;padding:12px 14px 11px}}

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