/* =====================================================================
   THEME — cibe-guangzhou. Everything specific to this fair lives here.
   Mood: unbranded packaging samples laid out flat on a warm stone counter,
   the grey of a salon bench and a matte compact case: a frosted pump
   bottle, a white compact, a bottle of red nail colour and salon tweezers.
   One red on the page (the brand red of the shared header, and the nail
   colour), kept for actions, numbers and link hover; the calendar is drawn
   in deep umber-grey, dashed where the dates are expected.
   ===================================================================== */
:root{
  --g-fair-red:#D71920; --g-fair-red-ink:#B3131A; --g-fair-red-soft:#FBE9E9;
  --g-stone-1:#F5F2ED; --g-stone-2:#E9E5DE; --g-stone-3:#D3CDC4; --g-stone:#958D82; --g-stone-ink:#4D453E; --g-floor:#BFB9B0;
  /* hero backdrop: the photo's bench was regraded to exactly this vertical gradient, so the mask can fade in anywhere without a seam */
  --g-hero-bg:linear-gradient(180deg,#CDC7C0 0%,#CCC7BF 10%,#CBC5BD 20%,#C9C4BC 30%,#C8C2BA 40%,#C8C2B9 50%,#C7C1B8 60%,#C5BFB6 70%,#C2BCB3 80%,#C0BAB1 90%,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,#CEC8C1 0%,#CDC7C0 100%);
  --g-display:"Bricolage Grotesque","Manrope","Readex Pro",system-ui,sans-serif;
  --g-hero-shadow:0 30px 60px -36px rgba(77,69,62,.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-stone-ink);border:1px dashed var(--g-stone);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-stone-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-stone-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-stone-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-stone-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 samples sit in the right third of a wide frame: in the single column the picture is drawn 1.24× the box, right-aligned
     and lifted a little, so the group fills the box above the stats band. 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:-5%;width:124%;height:124%;max-width:none;margin-inline-start:-24%;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: three dates from the organiser's history of the 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(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 span{display:block;font-size:13px;color:var(--g-muted);margin-top:8px;line-height:1.4;text-wrap:balance}
.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:96px 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: CIBE's year (two Guangzhou shows and one in Shanghai), the spring show dashed because it is expected ---------- */
.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 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}
.months,.marks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:3px}
.months{list-style:none;padding:0;margin:20px 0 6px}
.months li{text-align:center;font:700 10px/1 var(--g-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted)}
.months li.on{color:var(--g-ink)}
.marks{grid-template-rows:30px;position:relative}
.marks::before{content:"";grid-column:1/-1;grid-row:1;align-self:center;border-top:1px dashed var(--g-stone-3)}
.mk{grid-row:1;position:relative;z-index:1;border-radius:5px;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;white-space:nowrap;font:800 12px/1 var(--g-sans);letter-spacing:.02em;transform-origin:left center}
/* the spring show in Guangzhou: dashed, because the 2027 dates follow the yearly pattern and have not been announced */
.mk.spring{background:var(--g-stone-2);border:1.5px dashed var(--g-stone-ink);color:var(--g-stone-ink);animation:grow .7s cubic-bezier(.2,.7,.2,1) .12s both}
/* the other two shows of the year */
.mk.other{background:var(--g-stone-1);border:1px solid var(--g-stone-3);animation:fade .6s ease .3s both}
@keyframes grow{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
/* the key: each entry carries the swatch of its mark */
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;margin:18px 0 0;padding:18px 0 4px;border-top:1px solid var(--g-line)}
.key{min-width:0}
.key .k{display:flex;align-items:center;gap:9px;font:800 11px/1.3 var(--g-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--g-muted)}
.key .k::before{content:"";flex:none;width:18px;height:10px;border-radius:3px;box-sizing:border-box;background:var(--g-stone-1);border:1px solid var(--g-stone-3)}
.key.spring .k::before{background:var(--g-stone-2);border:1.5px dashed var(--g-stone-ink)}
.key .d{display:block;font:700 clamp(18px,1.9vw,21px)/1.1 var(--g-display);letter-spacing:-.02em;color:var(--g-soft);margin:8px 0 6px;font-variant-numeric:tabular-nums}
.key.spring .d{font-size:clamp(20px,2.2vw,24px);color:var(--g-ink)}
.key p{margin:0;font-size:14px;color:var(--g-soft);line-height:1.5}
.rail-foot{margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--g-line);font-size:13px;color:var(--g-muted)}
@media(max-width:760px){.keys{display:block}.key{padding:14px 0 0;margin-top:14px;border-top:1px solid var(--g-line)}.key:first-child{padding-top:0;margin-top:0;border-top:0}}
@media(max-width:640px){.rail{padding:14px 14px 4px}.rail-top .venue{margin-inline-start:0;flex-basis:100%}.months{margin-top:16px;column-gap:2px}.months li{font-size:9px;letter-spacing:0}.marks{column-gap:2px;grid-template-rows:26px}.mk{font-size:0}}

.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);min-width:0}
.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}

/* what the halls cover, as a row of tags */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 18px}
.tags span{font-size:13px;font-weight:600;color:var(--g-soft);background:var(--g-stone-1);border:1px solid var(--g-stone-2);border-radius:6px;padding:5px 10px}
.tags .lbl{flex-basis:100%;background:none;border:0;padding:0 0 2px;color:var(--g-muted);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.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-stone-1);border:1px solid var(--g-stone-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 five things an OEM conversation covers, set like a shade card: the card's edge is a strip of five stone shades, light to deep */
.asks{list-style:none;margin:6px 0 20px;padding:0;border:1px solid var(--g-line);border-radius:10px;background:var(--g-white);overflow:hidden}
.asks li{position:relative;padding:13px 18px 12px 30px;border-top:1px solid var(--g-line);font-size:15px;line-height:1.55;color:var(--g-soft)}
.asks li:first-child{border-top:0}
.asks li::before{content:"";position:absolute;inset-inline-start:0;top:-1px;bottom:0;width:8px;background:var(--g-chip)}
.asks li:first-child::before{top:0}
.asks li:nth-child(1){--g-chip:var(--g-stone-2)}
.asks li:nth-child(2){--g-chip:var(--g-stone-3)}
.asks li:nth-child(3){--g-chip:#B4ADA3}
.asks li:nth-child(4){--g-chip:var(--g-stone)}
.asks li:nth-child(5){--g-chip:var(--g-stone-ink)}
.asks b{color:var(--g-ink);font-weight:800}
@media(max-width:640px){.asks li{padding:12px 14px 11px 24px;font-size:14.5px}.asks li::before{width:6px}}

/* after the show: the halls, then the factories */
.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:calc(50% - 17px);top:11px;height:2px;background:repeating-linear-gradient(90deg,var(--g-stone) 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-stone-ink);border-color:var(--g-stone-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-stone) 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)}