/* =====================================================================
   THEME — print-china. Everything specific to this fair lives here.
   Mood: a stack of uncoated press sheets with crop marks and a one-ink
   control strip, a printer's loupe, and an ink knife carrying a dab of
   red ink, all on a paper-white surface. The page is set like a two-colour
   job on uncoated stock: paper whites, one deep process-cyan ink for the
   calendar, marks and secondary text, and one red (the brand red of the
   shared header, and the ink on the knife) for actions, numbers and links.
   ===================================================================== */
:root{
  --g-fair-red:#D71920; --g-fair-red-ink:#B3131A; --g-fair-red-soft:#FBE9E9;
  /* paper tints (tiles, tags) and screens of the one cyan ink (marks, rules), light to full */
  --g-sheet-1:#F5F3F0; --g-sheet-2:#EAE8E3; --g-sheet-3:#D4D1CC;
  --g-cyan-1:#EEF3F5; --g-cyan-2:#D9E4E9; --g-cyan-3:#B4CAD4; --g-cyan:#6292A6; --g-cyan-ink:#194C5F; --g-floor:#E2DFD9;
  /* hero backdrop: the photo's paper surface was regraded to exactly this vertical gradient, so the mask can fade in anywhere without a seam */
  --g-hero-bg:linear-gradient(180deg,#ECEAE5 0%,#ECEAE5 10%,#EBE9E4 20%,#EAE8E3 30%,#EAE8E2 40%,#E9E7E2 50%,#E9E7E1 60%,#E7E5DF 70%,#E5E2DC 80%,#E3E0DA 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,#ECEAE5 0%,#ECEAE5 100%);
  --g-display:"Bricolage Grotesque","Manrope","Readex Pro",system-ui,sans-serif;
  --g-hero-shadow:0 30px 60px -36px rgba(25,76,95,.42);
}

/* 900–1179 px: the copy column is tall and narrow here, and a photo as tall as the hero would be cropped to its right half,
   bringing the stack under the end of the lede. In this range the photo keeps its own 16:9 shape at 70% width, top right; the
   backdrop gradient is sized to the photo's height, with the floor colour below it, so the left fade still meets the same colour. */
@media(min-width:900px) and (max-width:1179px){
  section.hero{background:var(--g-hero-bg) 0 0/100% 39.375vw no-repeat var(--g-floor)}
  .cf-hero .hero-art{bottom:auto;width:70%;height:39.375vw}
}

/* =====================================================================
   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-cyan-ink);border:1px dashed var(--g-cyan);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-cyan-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-cyan-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-cyan-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-cyan-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 group sits in the right half of a wide frame: in the single column the picture is drawn at 1.3× the box height in its
     own shape, right-aligned, so the stack, loupe and knife fill the box between the copy and the stats band. Positioning and
     sizing, 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 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%)}
  .hero-art img{position:absolute;top:0;inset-inline-end:0;width:auto;height:130%;max-width:none;object-fit:fill;-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: the organisers' expectations for 2027; the floor area carries the 2023 result under a dashed rule ---------- */
.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 18px;border-inline-start:1px solid var(--g-line);display:flex;flex-direction:column;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 .aux{margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--g-cyan-ink);font-variant-numeric:tabular-nums}
.cf-stats .aux::before{content:"";display:block;height:0;border-top:1px dashed var(--g-cyan-3);margin:4px 0 9px}
.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 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)}}
@media(max-width:375px){.cf-stats b{font-size:24px}.cf-stats b small{display:block;margin:6px 0 0;font-size:12px}}

/* ---------- schedule: the two weeks around the fair, then where the venue sits between Guangzhou and Shenzhen ---------- */
.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 18px;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}
.rail-dow,.rail-bars,.rail-days{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));column-gap:3px}
.rail-dow,.rail-days{list-style:none;padding:0}
.rail-dow{margin:20px 0 6px}.rail-dow li{text-align:center;font:700 10px/1 var(--g-sans);letter-spacing:.06em;color:var(--g-muted)}
.rail-dow li.we{color:var(--g-faint)}
.rail-bars{position:relative}
.rail-bars::before{content:"";grid-column:1/15;grid-row:1;align-self:center;border-top:1px dashed var(--g-cyan-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}
.bar.fair{background:var(--g-cyan-ink);color:#fff;transform-origin:left center;animation:grow .7s cubic-bezier(.2,.7,.2,1) .12s both}
.rail-days{margin:8px 0 0}.rail-days li{text-align:center;font:500 12.5px/1 var(--g-display);color:var(--g-muted);font-variant-numeric:tabular-nums}
.rail-days li.we{color:var(--g-faint)}
.rail-days li.on{color:var(--g-ink);font-weight:700}
@keyframes grow{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
/* where to stay: the venue between the two cities, drawn as one line with three stops */
.stay{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:24px;align-items:start;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--g-line)}
.stay .k{font:800 11px/1.3 var(--g-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--g-muted);padding-top:2px}
.stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;position:relative;max-width:640px}
.stops::before{content:"";position:absolute;inset-inline-start:16.67%;inset-inline-end:16.67%;top:8px;border-top:1.5px solid var(--g-cyan-3)}
.stops li{position:relative;text-align:center;padding-top:28px;min-width:0}
.stops li::before{content:"";position:absolute;inset-inline-start:50%;top:2px;width:13px;height:13px;margin-inline-start:-6.5px;border-radius:50%;background:var(--g-white);border:1.5px solid var(--g-cyan);box-sizing:border-box}
.stops li.here::before{top:0;width:17px;height:17px;margin-inline-start:-8.5px;background:var(--g-cyan-ink);border-color:var(--g-cyan-ink)}
.stops b{display:block;font:700 16px/1.2 var(--g-display);letter-spacing:-.01em;color:var(--g-soft)}
.stops li.here b{color:var(--g-ink)}
.stops span{display:block;font-size:13px;color:var(--g-muted);margin-top:3px;line-height:1.35}
@media(max-width:760px){.stay{grid-template-columns:1fr;row-gap:14px}}
@media(max-width:640px){.rail{padding:14px 14px 16px}.rail-top .venue{margin-inline-start:0;flex-basis:100%}.rail-dow{margin-top:16px}.bar{height:36px;font-size:11px}.stops{column-gap:6px}.stops b{font-size:14.5px}.stops span{font-size:12px}}

.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: four rows, the kind of equipment on the left, the machines as tags */
.halls{margin:2px 0 20px}
.halls .lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted);margin:0 0 6px}
.halls dl{margin:0;border-top:1px solid var(--g-line)}
.halls dl div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--g-line)}
.halls dt{font-size:13.5px;font-weight:800;color:var(--g-ink)}
.halls dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.halls dd span{font-size:13px;font-weight:600;color:var(--g-soft);background:var(--g-sheet-1);border:1px solid var(--g-sheet-2);border-radius:6px;padding:4px 10px}
@media(max-width:640px){.halls dl div{grid-template-columns:1fr;gap:6px}}

/* the job mix, set as a job ticket inside hairline crop marks: the five things a press salesperson will ask for */
.ticket{--g-m:var(--g-cyan);position:relative;margin:6px 0 22px;padding:12px;max-width:600px;
  background:
    linear-gradient(var(--g-m),var(--g-m)) left 0 top 12px/8px 1px no-repeat,linear-gradient(var(--g-m),var(--g-m)) left 12px top 0/1px 8px no-repeat,
    linear-gradient(var(--g-m),var(--g-m)) right 0 top 12px/8px 1px no-repeat,linear-gradient(var(--g-m),var(--g-m)) right 12px top 0/1px 8px no-repeat,
    linear-gradient(var(--g-m),var(--g-m)) left 0 bottom 12px/8px 1px no-repeat,linear-gradient(var(--g-m),var(--g-m)) left 12px bottom 0/1px 8px no-repeat,
    linear-gradient(var(--g-m),var(--g-m)) right 0 bottom 12px/8px 1px no-repeat,linear-gradient(var(--g-m),var(--g-m)) right 12px bottom 0/1px 8px no-repeat}
.t-card{background:var(--g-white);border:1px solid var(--g-line)}
.t-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding:13px 18px 11px;border-bottom:1.5px solid var(--g-cyan-ink)}
.t-head b{font:700 17px/1.2 var(--g-display);letter-spacing:-.01em;color:var(--g-ink)}
.t-head span{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g-cyan-ink)}
.ticket dl{margin:0;padding:2px 18px 14px}
.ticket dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:end;padding:13px 0 0}
.ticket dt{font-size:14px;font-weight:700;color:var(--g-soft);line-height:1.3}
.ticket dd{margin:0;min-width:0;height:18px;border-bottom:1px dotted var(--g-cyan)}
.ticket dl div.o{align-items:baseline}
.ticket dd.opts{height:auto;border:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.ticket .opt{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--g-soft);line-height:1.3}
.ticket .opt::before{content:"";flex:none;width:11px;height:11px;border:1.5px solid var(--g-cyan-ink);border-radius:2px;box-sizing:border-box}
@media(max-width:480px){.ticket dl div{grid-template-columns:112px minmax(0,1fr);gap:10px}.ticket dd.opts{column-gap:12px}.ticket dl{padding:2px 14px 12px}.t-head{padding:12px 14px 10px}}

/* what the interpreter carries at the stand: a two-column sheet under a one-ink control strip, each line on a registration mark */
.cf-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:6px 0 20px;border:1px solid var(--g-line);border-radius:10px;background:var(--g-white);overflow:hidden}
.cf-sheet::before{content:"";grid-column:1/-1;height:6px;background:linear-gradient(90deg,var(--g-cyan-1) 0 12.5%,var(--g-cyan-2) 12.5% 25%,var(--g-cyan-3) 25% 37.5%,var(--g-cyan) 37.5% 50%,var(--g-cyan-ink) 50% 62.5%,var(--g-sheet-3) 62.5% 75%,#8F8B85 75% 87.5%,var(--g-ink) 87.5% 100%)}
.cf-sheet .cf-col{padding:14px 20px 8px;min-width:0}
.cf-sheet .cf-col + .cf-col{border-inline-start:1px solid var(--g-line)}
.cf-sheet .h{display:block;font:800 11px/1.3 var(--g-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--g-cyan-ink);padding-bottom:10px;border-bottom:1px solid var(--g-line)}
.cf-sheet ul{list-style:none;margin:0;padding:0}
.cf-sheet li{position:relative;padding:8px 0 8px 23px;border-bottom:1px dashed var(--g-line);font-size:14.5px;line-height:1.45;color:var(--g-soft)}
.cf-sheet li:last-child{border-bottom:0}
.cf-sheet li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:11px;height:11px;
  background:radial-gradient(circle,transparent 0 2.4px,var(--g-cyan-ink) 2.5px 3.5px,transparent 3.6px),
    linear-gradient(var(--g-cyan-ink),var(--g-cyan-ink)) center/1px 100% no-repeat,linear-gradient(var(--g-cyan-ink),var(--g-cyan-ink)) center/100% 1px no-repeat}
@media(max-width:640px){.cf-sheet{grid-template-columns:1fr}.cf-sheet .cf-col + .cf-col{border-inline-start:0;border-top:1px solid var(--g-line)}.cf-sheet .cf-col{padding:12px 16px 6px}.cf-sheet li{font-size:14px}}

/* after the fair: the stand in Houjie, then a customer's factory in Dongguan */
.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-cyan) 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-cyan-ink);border-color:var(--g-cyan-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-cyan) 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)}