/* Highway New Time · company site · the one stylesheet of the whole site
   Source: src/style.css. build.py copies it to dist/style.css and appends any src/pages/<name>.css after it.
   Grown from sample B "Three cities" (samples/B-three-cities/style.css); the home page rules are unchanged.

   Same six colours, three type families and two weights as the journeys site (site/assets/css/hnt.css).
   Logical properties only, so the Arabic page mirrors without a second stylesheet.
   No radius, no shadow. The only gradients are the navy scrims that keep text readable on photographs.
   New components follow the same rules: no new colour, no radius, no shadow, no gradient.

   Contents (class names and sample markup: src/README.md, section 4)
     every page   tokens · type scale · base · .wrap .vh .num .textlink .sep .ext · .ph (photographs) · .btn · masthead and navigation
     home page    .hero .tri (three cities) · .strip (the two numbers)
     every page   .sec .sec-head .lead .kicker .statement .src .sub-block · .divider · .cards .entity .office .dl-card .defs · .band
     home page    .lines (what we do) · .group-top .plate
     every page   .ledger (tables that stack on a phone) · .figures · .assets-list · .tl (timeline) · .ledger-awards · .rec-notes
                  .outro .trade .contact .assure (closing block) · .credits · .footer
     inner pages  .page-head .crumbs .page-photo .subnav · .head-over .head-duo .head-cap (title over the photograph) · .sec-ruled · .band-slim
                  .split · .article .note · .rows · .steps · .table .scroll-x · .faq · .form .fld
                  .register (credentials register) · .actions · .cards>.span-all · .way-note (beside the closing block's rules)
     last         headings in Arabic and Chinese · reduced motion · print */

/* ---------- fallback faces (metric-matched, so the swap to the web fonts does not move the page) ---------- */
@font-face{font-family:"HNT Serif Fallback";src:local("Georgia");size-adjust:91.5%;ascent-override:114%;descent-override:37%;line-gap-override:0%}
@font-face{font-family:"HNT Arabic Fallback";src:local("Geeza Pro"),local("Segoe UI"),local("Noto Naskh Arabic");size-adjust:112%}

/* ---------- tokens ---------- */
:root{
  --navy:#0f1b2d;
  --navy-2:#0a1220;
  --sand:#e6dcc6;
  --sand-70:rgba(230,220,198,.72);
  --line:rgba(230,220,198,.16);
  --brass:#a3803f;
  --en:'Source Serif 4','HNT Serif Fallback',Georgia,serif;
  --ar:'Tajawal','HNT Arabic Fallback','IBM Plex Sans Arabic',system-ui,sans-serif;
  --zh:'Noto Serif SC','Source Serif 4','Songti SC','Noto Serif CJK SC','Source Han Serif SC',STSong,'Microsoft YaHei',SimSun,serif;
  --ka:'Noto Serif Georgian','Source Serif 4',Georgia,serif;
  --section:clamp(48px,5vw,72px);
  --block:clamp(26px,3.1vw,44px);
  --pad:clamp(20px,4vw,56px);
  --gutter:24px;
  --measure:592px;
  --measure-wide:797px;
  --maxw:1320px;
  --edge:max(var(--pad),calc((100vw - var(--maxw))/2));   /* where .wrap content starts, for full-bleed rows */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- type scale, re-set per script wherever lang changes ----------
   The smallest size is 14px (16px in Arabic): sources, statuses and labels are facts too and have to be easy to read. */
:root,[lang|="en"]{
  --t-13:.875rem;--t-15:.9375rem;--t-17:1.0625rem;
  --t-21:clamp(1.125rem,.75rem + .75vw,1.3125rem);
  --t-24:clamp(1.25rem,.8rem + .9vw,1.5rem);
  --t-38:clamp(1.5rem,1rem + 1.3vw,2.125rem);
  --t-h2:clamp(1.875rem,1.1rem + 2.1vw,2.875rem);
  --t-hero:clamp(2.125rem,.9rem + 3.6vw,4.25rem);
  --lh:1.6;--lh-head:1.14;--lh-display:1.06;--lh-ui:1.35;--lh-lead:1.45;
}
[lang|="ar"]{
  --t-13:1rem;--t-15:1rem;--t-17:1.125rem;
  --t-21:clamp(1.1875rem,.75rem + .85vw,1.375rem);
  --t-24:clamp(1.3125rem,.8rem + 1vw,1.5625rem);
  --t-38:clamp(1.5rem,1rem + 1.3vw,2.125rem);
  --t-h2:clamp(1.875rem,1.1rem + 2.1vw,2.875rem);
  --t-hero:clamp(2.125rem,.9rem + 3.6vw,4.25rem);
  --lh:1.8;--lh-head:1.4;--lh-display:1.25;--lh-ui:1.6;--lh-lead:1.75;
}
[lang|="zh"]{
  --t-13:.875rem;--t-15:.9375rem;--t-17:1.03125rem;
  --t-21:clamp(1.09375rem,.7rem + .75vw,1.25rem);
  --t-24:clamp(1.1875rem,.75rem + .85vw,1.4375rem);
  --t-38:clamp(1.4375rem,.9rem + 1.2vw,1.9375rem);
  --t-h2:clamp(1.75rem,1rem + 1.9vw,2.625rem);
  --t-hero:clamp(2rem,.8rem + 3.2vw,3.75rem);
  --lh:1.85;--lh-head:1.35;--lh-display:1.25;--lh-ui:1.5;--lh-lead:1.75;
}

/* ---------- reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--navy);color:var(--sand);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
/* no font-family on body: the family comes from the lang attribute on <html> (and on any element set in another script) */
body{font-size:var(--t-17);line-height:var(--lh);font-weight:400;font-optical-sizing:auto;font-variant-numeric:lining-nums;overflow-x:clip}
[lang|="en"]{font-family:var(--en);font-style:normal}
[lang|="ar"]{font-family:var(--ar);font-style:normal}
[lang|="zh"]{font-family:var(--zh);font-style:normal}
[lang|="ka"]{font-family:var(--ka)}
[lang|="ar"] bdi[lang|="en"]{font-size:.94em}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer}
h1,h2,h3,h4{font-weight:300;line-height:var(--lh-head);text-wrap:balance}
strong,b,th{font-weight:400}
p,li,dd,dt,figcaption{text-wrap:pretty}
ul[class],ol[class]{list-style:none}
table{border-collapse:collapse;border-spacing:0}
::selection{background:var(--sand);color:var(--navy)}
:focus-visible{outline:2px solid var(--sand);outline-offset:4px}
[hidden]{display:none!important}
section[id],div[id],article[id]{scroll-margin-top:24px}

.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.num,.no{font-variant-numeric:tabular-nums lining-nums}
/* a telephone number never breaks. On the Arabic page a Latin legal name inside an Arabic sentence moves to the next line
   as a whole where it fits there, and only breaks inside where it cannot (split across two lines it reads out of order). */
.num.nb{white-space:nowrap}
[dir="rtl"] .nb{display:inline-block;max-width:100%;overflow-wrap:anywhere}
[dir="rtl"] a .nb{display:inline;white-space:nowrap}
/* Chinese page: email leads, WhatsApp follows, Apple Maps replaces Google Maps (the other two do not open in mainland China) */
html:not([lang="zh"]) .only-zh{display:none!important}
html[lang="zh"] .not-zh{display:none!important}
.skip{position:absolute;inset-inline-start:var(--pad);top:-96px;z-index:60;padding:12px 16px;background:var(--sand);color:var(--navy);font-size:var(--t-15)}
.skip:focus{top:8px}
.sep{display:inline-block;width:1px;height:.85em;margin-inline:.75em;background:currentColor;opacity:.45;vertical-align:-.06em}
.ext{display:inline-block;flex:none;width:.72em;height:.72em;margin-inline-start:.15em}
[dir="rtl"] .ext{transform:scaleX(-1)}
/* a link to another of our three sites (build.py marks it data-xsite): the same small arrow, drawn here so that every such
   link has it, whoever wrote the markup. It opens in the same window. Not on a list row, where a cell names the site. */
a[data-xsite]::after{content:"";display:inline-block;flex:none;width:.6em;height:.6em;margin-inline-start:.4em;vertical-align:.04em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5h5.5V8M9.5 2.5 2.5 9.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5h5.5V8M9.5 2.5 2.5 9.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat}
[dir="rtl"] a[data-xsite]::after{transform:scaleX(-1)}
a.row[data-xsite]::after{content:none}
/* where the link is a flex row with a gap of its own (navigation, buttons, text links on touch screens), the gap is the space */
.nav a[data-xsite]::after,.btn[data-xsite]::after{margin-inline-start:0}
@media (pointer:coarse),(max-width:759px){.textlink[data-xsite]::after{margin-inline-start:0}}
.textlink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--sand-70);transition:text-decoration-color .3s var(--ease)}
.textlink .ext{display:inline-block;vertical-align:.02em;margin-inline-start:.35em}
@media (hover:hover){.textlink:hover{text-decoration-color:var(--sand)}}
/* touch: a text link is as tall as a button */
@media (pointer:coarse),(max-width:759px){
  .textlink{display:inline-flex;align-items:center;gap:.35em;min-height:44px}
  .textlink .ext{margin-inline-start:0}
}

/* ---------- photographs: one tone for the whole site, as on the journeys site ---------- */
.ph{position:relative;overflow:hidden;background:var(--navy-2)}
.ph img{width:100%;height:100%;object-fit:cover;filter:sepia(.2) saturate(.75) contrast(1.03) brightness(.95)}
.ph::after{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:multiply;opacity:.12;pointer-events:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;max-width:100%;padding:10px 24px;border:1px solid transparent;font-size:var(--t-15);line-height:var(--lh-ui);text-align:center;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn-solid{min-height:52px;padding-inline:28px;background:var(--sand);border-color:var(--sand);color:var(--navy);font-size:var(--t-17)}
.btn-brass{min-height:52px;padding-inline:28px;border-color:var(--brass);font-size:var(--t-17)}
.btn-line{border-color:var(--sand-70)}
.btn-sm{min-height:44px;padding:8px 16px;font-size:var(--t-13)}
@media (hover:hover){
  .btn-solid:hover{background:transparent;color:var(--sand)}
  .btn-brass:hover{background:var(--brass);color:var(--navy)}
  .btn-line:hover{background:var(--sand);border-color:var(--sand);color:var(--navy)}
}

/* ---------- masthead: a slim bar (who publishes the site, language), then the header laid over the photographs ---------- */
.masthead{position:relative;z-index:20}
.topbar{background:var(--navy-2);border-block-end:1px solid var(--line);font-size:var(--t-13);color:var(--sand-70)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px}
.topbar-note{display:none;line-height:1.35}
.lang{display:flex;align-items:center;margin-inline:auto -10px}
.lang span{opacity:.5}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding-inline:10px;font-size:.875rem;line-height:1;color:var(--sand-70);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:transparent;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.lang a[lang|="ar"]{font-size:1rem;padding-block-start:2px}
.lang a[lang|="zh"]{font-family:system-ui,'PingFang SC','Microsoft YaHei',sans-serif}
.lang a[aria-current="true"]{color:var(--sand);text-decoration-color:var(--sand)}
@media (hover:hover){.lang a:hover{color:var(--sand)}}

.site-head{position:absolute;inset-inline:0;top:100%}
.site-head .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:1.1875rem;font-weight:300;letter-spacing:.01em;line-height:1;white-space:nowrap}
.brand img{flex:none;width:34px;height:34px}
.brand-sm{font-size:1.0625rem;color:var(--sand)}
.brand-sm img{width:28px;height:28px}
/* Georgia site: the name of the country under the company name, in the visitor's language (src/partials/header.html) */
.brand-text{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.brand-site{font-size:.8125rem;line-height:1;letter-spacing:.06em;color:var(--sand-70)}
[lang|="ar"] .brand-site{font-size:.9375rem;letter-spacing:0}
[lang|="zh"] .brand-site{letter-spacing:.2em}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-inline-end:-10px}
.menu-btn svg{width:26px;height:26px}
.menu-btn .i-x,.site-head.open .i-bars{display:none}
.site-head.open .i-x{display:block}
.nav{display:none}
.nav a{display:flex;align-items:center;gap:.35em;min-height:52px;border-block-end:1px solid var(--line);font-size:var(--t-17);white-space:nowrap}
/* the page you are on (build.py sets aria-current) */
.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;text-decoration-color:var(--sand-70)}
.site-head.open{background:var(--navy)}
.site-head.open .nav{display:flex;flex-direction:column;position:absolute;inset-inline:0;top:100%;min-height:calc(100vh - 109px);min-height:calc(100svh - 109px);padding:0 var(--pad) 16px;background:var(--navy);border-block-end:1px solid var(--line)}
@media (max-width:999px){html.menu-open{overflow:hidden}}
html:not(.js) .menu-btn{display:none}
html:not(.js) .nav{display:flex;flex-wrap:wrap;gap:0 20px}
html:not(.js) .nav a{min-height:44px;border:0;font-size:var(--t-15)}
@media (min-width:800px){
  .topbar-note{display:block}
  .site-head .wrap{min-height:76px}
  .brand{font-size:1.3125rem}
  .brand img{width:38px;height:38px}
}
@media (min-width:1000px){
  .menu-btn{display:none}
  .nav,.site-head.open .nav{display:flex;flex-direction:row;align-items:center;gap:30px;position:static;min-height:0;padding:0;background:none;border:0}
  .site-head.open{background:none}
  .nav a{min-width:44px;min-height:44px;justify-content:center;margin-inline:-8px;padding-inline:8px;border:0;font-size:var(--t-15);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;text-decoration-color:transparent;transition:text-decoration-color .3s var(--ease)}
}
/* all seven entries of the company site (src/nav.json) have to fit beside the brand from 1000px up, in Arabic too (measured: 30px is 11px too wide at 1000px) */
@media (min-width:1000px) and (max-width:1139px){.nav,.site-head.open .nav{gap:22px}}
@media (min-width:1000px) and (hover:hover){.nav a:hover{text-decoration-color:var(--sand)}}

/* ---------- hero: three cities, three upright photographs ----------
   The text block uses the same three columns as the photographs and as the registration strip below,
   so the identity sentence starts where the third photograph starts and never sits on a seam. */
.hero{position:relative;background:var(--navy-2)}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;height:clamp(280px,40svh,400px)}
.tri-p{position:relative;overflow:hidden;background:var(--navy-2)}
.tri-p .ph{position:absolute;inset:0}
.tri-p .ph img{filter:sepia(.14) saturate(.86) contrast(1.04) brightness(1.02)}
.tri-p .ph::after{opacity:.06}
/* which part of each upright photograph a narrow panel shows */
.tri-p:nth-child(1) .ph img{object-position:76% 45%}
.tri-p:nth-child(2) .ph img{object-position:23% 8%}
/* Arabic: the city name sits on the other side of the panel, so the Tbilisi photograph shifts to keep the fortress clear of it */
[dir="rtl"] .tri-p:nth-child(2) .ph img{object-position:84% 8%}
.tri-p:nth-child(3) .ph img{object-position:50% 5%}
/* two navy scrims per panel: one under the header and the city names, one under the headline */
.tri-p::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,rgba(10,18,32,.82) 0,rgba(10,18,32,.62) 120px,rgba(10,18,32,0) 190px),
  linear-gradient(to top,var(--navy) 0,rgba(15,27,45,.94) 16%,rgba(15,27,45,.8) 26%,rgba(15,27,45,0) 50%)}
.tri-p figcaption{position:absolute;z-index:1;inset-block-start:74px;inset-inline:12px 8px;display:flex;flex-direction:column;gap:3px;line-height:1.3}
.tri-p:first-child figcaption{inset-inline-start:var(--edge)}
.tri-city{font-size:var(--t-17);font-weight:300}
/* under each city: a company, or a destination */
.tri-tag{display:flex;align-items:center;gap:8px;font-size:var(--t-13);line-height:1.4}
.tri-tag::before{content:"";flex:none;width:12px;height:1px;background:currentColor;opacity:.75}
.hero-text{position:relative;z-index:2;display:flex;flex-direction:column;margin-block-start:-64px;padding:0 var(--pad) 20px}
.hero h1{font-size:var(--t-hero);line-height:var(--lh-display);letter-spacing:-.012em}
.keep{display:inline-block}   /* Chinese headline: a clause stays on one line where it fits */
/* on a phone the Chinese headline is set a little smaller, so that its longer clause (11 to 12 characters) fits one line */
@media (max-width:479px){[lang|="zh"] .hero h1{font-size:clamp(1.5rem,7.3vw,2.125rem)}}
.hero-lead{margin-block-start:16px;max-width:46rem;font-size:var(--t-17);line-height:var(--lh-lead)}
.hero-side{display:flex;flex-direction:column;margin-block-start:24px}
/* small screens: what we do and how to reach us come first; the legal sentence then leads into the registration strip */
.hero-cta{order:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.hero-cta .btn{width:100%}
.hero-mail{font-size:var(--t-17)}
.hero-alt{order:2;margin-block-start:6px;font-size:var(--t-15)}
.hero-note{order:3;margin-block-start:12px;font-size:var(--t-13);color:var(--sand-70)}
.hero-note span+span::before{content:" "}
[lang|="zh"] .hero-note span+span::before{content:""}
.hero-id{order:4;margin-block-start:22px;padding-block-start:18px;border-block-start:1px solid var(--line);font-size:var(--t-15);line-height:var(--lh)}
.hero-credits{display:none;align-self:flex-start;align-items:center;min-height:44px;margin-block-start:6px;font-size:var(--t-13);color:var(--sand-70);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (hover:hover){.hero-credits:hover{color:var(--sand)}}
@media (min-width:480px){
  .hero-cta .btn{width:auto}
}
@media (min-width:700px){
  .hero{display:grid;align-items:end;min-height:clamp(540px,calc(100svh - 200px),900px);overflow:hidden}
  .tri{position:absolute;inset:0;height:auto}
  .tri-p::after{background:
    linear-gradient(to bottom,rgba(10,18,32,.76) 0,rgba(10,18,32,.62) 140px,rgba(10,18,32,0) 260px),
    linear-gradient(to top,var(--navy) 0,rgba(15,27,45,.96) 30%,rgba(15,27,45,.9) 52%,rgba(15,27,45,0) 76%)}
  .tri-p figcaption{inset-block-start:100px;inset-inline:28px 20px}
  .tri-city{font-size:var(--t-24)}
  .tri-tag::before{width:18px}
  .hero-text{width:100%;max-width:calc(var(--maxw) + 2*var(--pad));margin-inline:auto;margin-block-start:0;padding-block:300px 28px}
  .hero-lead{font-size:var(--t-21)}
  .hero-id{order:0;margin:0;padding:0;border:0;font-size:var(--t-17);max-width:640px}
  .hero-cta{margin-block-start:24px}
  .hero-credits{display:inline-flex}
}
@media (min-width:1000px){
  .tri-p:nth-child(1) .ph img{object-position:50% 45%}
  .tri-p:nth-child(2) .ph img{object-position:0% 8%}
  [dir="rtl"] .tri-p:nth-child(2) .ph img{object-position:100% 8%}
  .hero-text{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2px;align-items:end;max-width:none;margin:0;padding-inline:0;padding-block:clamp(168px,calc(57svh - 263px),300px) 46px}
  .hero-main{grid-column:1 / span 2;padding-inline:var(--edge) 28px}
  .hero-side{grid-column:3;margin:0;padding-inline:28px var(--pad)}
  .hero-id{font-size:var(--t-15);max-width:440px}
  .hero-note{max-width:440px}
  .hero-credits{position:absolute;inset-block-end:4px;inset-inline-start:var(--edge);min-height:36px;margin:0}
  /* the scrims are measured in pixels from the bottom, because the text they carry is: headline and lead on the left, the identity block on the right */
  .tri-p::after{background:
    linear-gradient(to bottom,rgba(10,18,32,.76) 0,rgba(10,18,32,.6) 140px,rgba(10,18,32,0) 250px),
    linear-gradient(to top,var(--navy) 0,rgba(15,27,45,.95) 150px,rgba(15,27,45,.88) var(--scrim-a,300px),rgba(15,27,45,0) calc(var(--scrim-a,300px) + 130px))}
  .tri-p:nth-child(3)::after{background:
    linear-gradient(to bottom,rgba(10,18,32,.76) 0,rgba(10,18,32,.6) 140px,rgba(10,18,32,0) 250px),
    linear-gradient(to top,var(--navy) 0,rgba(15,27,45,.96) 170px,rgba(15,27,45,.92) var(--scrim-b,340px),rgba(15,27,45,0) calc(var(--scrim-b,340px) + 130px))}
  [lang|="ar"] .tri{--scrim-a:340px;--scrim-b:410px}
}
@media (min-width:1280px){
  .hero-id{font-size:var(--t-17);line-height:1.55}
  [lang|="ar"] .hero-id{line-height:1.7}
  [lang|="zh"] .hero-id{line-height:var(--lh)}
}
@media (prefers-reduced-motion:no-preference){
  .tri-p .ph{animation:hnt-in 1.5s var(--ease) both}
  .tri-p:nth-child(2) .ph{animation-delay:.16s}
  .tri-p:nth-child(3) .ph{animation-delay:.32s}
  @keyframes hnt-in{from{opacity:0}to{opacity:1}}
}

/* ---------- registration strip: the two numbers, pinned under the photographs ---------- */
.strip{background:var(--navy-2);border-block-end:1px solid var(--line)}
.strip-cell{padding:16px var(--pad);border-block-start:1px solid var(--line)}
.strip-who{display:flex;flex-wrap:wrap;gap:0 12px;font-size:var(--t-13);line-height:1.5}
.strip-kicker{color:var(--sand-70)}
.strip-no{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;margin-block-start:2px}
.strip-lbl{font-size:var(--t-13);color:var(--sand-70)}
.strip .no{font-size:1.75rem;font-weight:300;line-height:1.25;letter-spacing:.045em;color:var(--brass)}
.strip-st{margin-block-start:2px;font-size:var(--t-15);line-height:1.45}
.strip-go{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}
.strip-go .strip-st{margin:0}
@media (max-width:699px){
  .p-index .strip{display:none}
  .strip-go .btn{display:none}
}
@media (min-width:700px){
  .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2px}
  .strip-cell{padding-block:18px 20px;padding-inline:28px 20px;border-block-start:0;border-inline-start:1px solid var(--line)}
  .strip-cell:first-child{padding-inline-start:var(--edge);border-inline-start:0}
}

/* ---------- sections ---------- */
.sec{padding-block:var(--section)}
.sec-tight-end{padding-block-end:calc(var(--section)/2)}
.sec-tight-start{padding-block-start:calc(var(--section)/2)}
.sec-head{margin-block-end:var(--block)}
.sec-head h2,.statement h2,.group-text h2{font-size:var(--t-h2);letter-spacing:-.008em}
.lead{margin-block-start:14px;max-width:var(--measure-wide);color:var(--sand-70)}
.kicker{font-size:var(--t-13);color:var(--sand-70);line-height:1.5}
.statement-p{font-size:var(--t-24);font-weight:300;line-height:var(--lh-lead)}
.statement h2{margin-block-end:16px}
.src{margin-block-start:20px;max-width:var(--measure-wide);font-size:var(--t-13);color:var(--sand-70)}
.pending{color:var(--sand-70)}
.sub-block{margin-block-start:clamp(40px,4vw,56px)}
.sub-h{font-size:var(--t-38);margin-block-end:24px}
@media (max-width:699px){
  .statement-p{font-size:var(--t-21)}
}
@media (min-width:900px){
  .sec-head,.statement,.group-top,.assets{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .sec-head{align-items:end}
  .sec-head h2{grid-column:1 / span 5}
  .sec-head .lead{grid-column:7 / span 6;margin:0;padding-block-end:.3em}
  .statement h2{grid-column:1 / span 4;margin:0}
  /* everything under the heading sits in the text column: the sentence, and whatever a page adds after it (a second
     paragraph, a row of buttons). Left unplaced, each of those fell into a single column of the twelve (88px wide). */
  .statement>:not(h2){grid-column:5 / span 8}
}

/* khatam: one single-stroke star at a section boundary where there is no photograph */
.divider{display:flex;align-items:center;gap:24px;color:var(--sand-70)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider svg{flex:none;width:32px;height:32px}

/* ---------- registration cards, office cards, and the plain definition-list card (.dl-card) ---------- */
.cards{display:grid;gap:var(--gutter)}
.entity,.office,.dl-card{padding:clamp(22px,3vw,40px);background:var(--navy-2);border:1px solid var(--line);border-block-start-color:var(--sand-70)}
.dl-card h3{margin-block-end:14px;font-size:var(--t-24);line-height:1.3}
.dl-card .kicker+h3{margin-block-start:6px}
.dl-card>p:not(.kicker){margin-block-end:14px;color:var(--sand-70)}
.dl-card>.btn,.dl-card>.textlink{margin-block-start:16px}
.entity-name{margin-block-start:6px;font-size:var(--t-24);line-height:1.3;letter-spacing:.015em;overflow-wrap:anywhere}
.entity-no{display:flex;flex-direction:column;margin-block:18px 20px}
.entity-no .lbl{font-size:var(--t-13);color:var(--sand-70)}
.entity-no .no{font-size:clamp(2.25rem,1.4rem + 2.6vw,3.5rem);font-weight:300;line-height:1.1;letter-spacing:.04em;color:var(--brass)}
.defs>div{display:grid;gap:2px 24px;padding-block:12px;border-block-start:1px solid var(--line)}
.defs dt{font-size:var(--t-13);color:var(--sand-70);line-height:1.5}
.defs dd{font-size:var(--t-17);line-height:1.55;overflow-wrap:anywhere}
[lang|="ar"] .defs dd,[lang|="zh"] .defs dd{line-height:var(--lh)}
.defs dd .textlink{display:flex;align-items:center;width:fit-content;margin-block-start:4px;font-size:var(--t-15)}
.entity-actions{display:flex;flex-wrap:wrap;gap:0 12px}
.entity-actions>*{margin-block-start:16px}
.office h3{font-size:var(--t-38)}
.office-co{margin-block:6px 16px;letter-spacing:.015em}
.office-note{margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--line);font-size:var(--t-15);color:var(--sand-70)}
/* status, authority, scope and address stay (the first three on small screens); "Read more" brings back the rest */
.js .defs.is-collapsed>div:nth-child(n+5){display:none}
@media (max-width:759px){
  .js .defs.is-collapsed>div:nth-child(n+4){display:none}
}
@media (min-width:560px){
  .defs>div{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr)}
  .defs dt{padding-block-start:.3em}
}
@media (min-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- full-width photograph between blocks ---------- */
.band{position:relative;height:clamp(176px,21vw,340px);overflow:hidden;background:var(--navy-2)}
.band .ph{position:absolute;inset:0}
.band figcaption,.page-photo figcaption{position:absolute;inset-inline:0;inset-block-end:0;padding-block:64px 14px;background:linear-gradient(to top,rgba(10,18,32,.92) 0,rgba(10,18,32,.86) 46px,rgba(10,18,32,0) 100%);font-size:var(--t-13);line-height:1.5}
.band figcaption .wrap,.page-photo figcaption .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 24px}
.band-credit{color:var(--sand-70)}

/* ---------- what we do: four lines of work under three photographs (the two Georgia lines share the one of Tbilisi) ---------- */
.lines{display:grid;gap:0 var(--gutter)}
.line-fig{margin-block-start:28px}
.line-fig:first-child{margin-block-start:0}
.line-fig .ph{height:96px}
.line-fig figcaption,.assets-fig figcaption{margin-block-start:8px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.line{display:flex;flex-direction:column;padding-block:18px 26px;border-block-end:1px solid var(--line)}
.line h3{margin-block:6px 10px;font-size:var(--t-24);line-height:1.25}
.tag{display:flex;align-items:center;gap:10px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.tag::before{content:"";flex:none;width:18px;height:1px;background:var(--sand-70)}
.line-act{display:flex;flex-wrap:wrap;gap:10px 12px;margin-block-start:auto;padding-block-start:20px}
.line-pending{font-size:var(--t-15);color:var(--sand-70)}
.line-pending::before{content:"";display:block;width:18px;height:1px;margin-block-end:14px;background:var(--sand-70)}
.lines-assure{display:none}
.assure{gap:4px;margin-block-start:28px;padding-inline-start:16px;border-inline-start:1px solid var(--sand-70);font-size:var(--t-15);color:var(--sand-70);max-width:var(--measure-wide)}
@media (max-width:479px){
  .line-act .btn{display:flex;width:100%}
}
.assure:not(.lines-assure){display:grid}
@media (min-width:760px){
  .lines-assure{display:grid}
  .lines{grid-template-columns:repeat(2,minmax(0,1fr));border-block-end:1px solid var(--line)}
  .line-fig,.line-fig:first-child{margin:0}
  .line-fig .ph{height:clamp(140px,13vw,190px)}
  .line{padding-block:16px 30px;border:0}
  .lf-ge{grid-area:1 / 1 / 2 / 3}
  .l1{grid-area:2 / 1}
  .l2{grid-area:2 / 2}
  .lf-cn{grid-area:3 / 1}
  .lf-uae{grid-area:3 / 2}
  .l3{grid-area:4 / 1}
  .l4{grid-area:4 / 2}
}
@media (min-width:1100px){
  .lines{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lf-cn{grid-area:1 / 3}
  .lf-uae{grid-area:1 / 4}
  .l3{grid-area:2 / 3}
  .l4{grid-area:2 / 4}
  .line-p{font-size:var(--t-15);line-height:1.6}
  [lang|="ar"] .line-p,[lang|="zh"] .line-p{font-size:var(--t-15);line-height:var(--lh)}
}
@media (min-width:1360px){
  .line-p,[lang|="ar"] .line-p,[lang|="zh"] .line-p{font-size:var(--t-17)}
}

/* ---------- the group ---------- */
.group-top{margin-block-end:var(--block)}
.group-text h2{margin-block-end:20px}
.group-mark{margin-block-start:28px;max-width:260px}
.plate{padding:18px 20px;background:var(--sand)}
.plate img{width:100%}
@media (min-width:900px){
  .group-top{align-items:start}
  .group-text{grid-column:1 / span 8}
  .group-mark{grid-column:10 / span 3;margin-block-start:.75rem;max-width:none}
}

/* ledger tables: hairlines only; stacked on small screens */
.ledger{width:100%;font-size:var(--t-17)}
.ledger th,.ledger td{padding-block:14px;padding-inline:0 24px;text-align:start;vertical-align:top;border-block-end:1px solid var(--line)}
.ledger thead th{padding-block:0 10px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70);border-block-end-color:var(--sand-70)}
.ledger tr>:last-child{padding-inline-end:0}
.ledger .sub{display:block;font-size:var(--t-13);color:var(--sand-70)}
.ledger caption,.table caption{padding-block-end:14px;font-size:var(--t-15);line-height:1.5;color:var(--sand-70);text-align:start;caption-side:top}
.cell-lbl{display:none}
.ledger-entities th:first-child{width:31%}
.ledger-entities td:nth-child(4),.ledger-record td:nth-child(3){white-space:nowrap}
.ledger-record th:first-child{width:24%}
@media (max-width:759px){
  .ledger thead{position:absolute;inset-inline-start:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ledger,.ledger tbody,.ledger tr,.ledger th,.ledger td{display:block;width:auto!important}
  .ledger tr{padding-block:14px;border-block-start:1px solid var(--line)}
  .ledger tbody tr:first-child{border-block-start-color:var(--sand-70)}
  .ledger tbody tr:last-child{border-block-end:1px solid var(--line)}
  .ledger th,.ledger td{padding:0;border:0;white-space:normal!important}
  .ledger tbody th{margin-block-end:6px}
  /* a cell that starts with <span class="cell-lbl"> shows its column name beside the value */
  .ledger td:has(>.cell-lbl),.ledger-entities td,.ledger-record td{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:0 16px;padding-block:2px}
  .ledger caption{display:block}
  .cell-lbl{display:block;font-size:var(--t-13);color:var(--sand-70);padding-block-start:.2em}
  /* the route is the longest cell: full width, no label (the month above it and the days below make it plain) */
  .ledger-record td:nth-child(2){display:block}
  .ledger-record td:nth-child(2) .cell-lbl{display:none}
  .js .ledger-entities.is-collapsed{display:none}
  .ent-more{margin-block-end:4px}
}

/* group figures, with the sentence that says where they come from */
.figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gutter)}
.figures>div{display:flex;flex-direction:column;padding-block-start:16px;border-block-start:1px solid var(--sand-70)}
.fig-v{order:-1;font-size:clamp(2.375rem,1.2rem + 3.4vw,4rem);font-weight:300;line-height:1.05;letter-spacing:-.01em}
.figures dt{margin-block-start:8px;font-size:var(--t-17);line-height:1.4}
.fig-by{display:none;margin-block-start:4px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.fig-src{font-size:var(--t-15);line-height:1.6}
[lang|="ar"] .fig-src,[lang|="zh"] .fig-src{line-height:var(--lh)}
@media (min-width:600px){
  .fig-by{display:block}
}
@media (min-width:900px){
  .figures{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* what the group runs in the UAE */
.assets-head .lead{margin-block-end:24px}
.assets-fig .ph{aspect-ratio:3/2}
.assets-list{display:grid;gap:0 var(--gutter);margin-block-start:20px}
.assets-list>div{padding-block:14px;border-block-start:1px solid var(--line)}
.assets-list dt{font-size:var(--t-21);font-weight:300;line-height:1.3}
.assets-list dd{margin-block-start:4px;font-size:var(--t-15);color:var(--sand-70)}
.assets-more{margin-block-start:8px}
@media (max-width:759px){
  .assets-fig .ph{aspect-ratio:2/1}
  .js .assets-list.is-collapsed>div:nth-child(n+3){display:none}
}
@media (min-width:600px){
  .assets-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .assets{row-gap:0;align-items:start}
  .assets-head{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;margin-block-end:28px}
  .assets-head .sub-h{grid-column:1 / span 5;margin:0}
  .assets-head .lead{grid-column:7 / span 6;margin:0}
  .assets-fig{grid-column:1 / span 4}
  .assets-list{grid-column:6 / span 7;margin:0}
  .assets-list>div:nth-child(-n+2){padding-block-start:0;border-block-start:0}
}

/* ---------- timeline and awards: two ledgers side by side on wide screens ---------- */
.duo-grid{display:grid;gap:var(--section) clamp(40px,5vw,80px)}
.duo-col h2{font-size:var(--t-38);letter-spacing:-.005em}
.duo-col .lead{margin-block:12px 0}
.tl-more{margin-block-start:20px}
.tl{margin-block-start:24px;border-block-start:1px solid var(--sand-70)}
.tl-row{display:grid;grid-template-columns:4.5rem minmax(0,1fr);column-gap:16px;align-items:baseline;padding-block:12px;border-block-end:1px solid var(--line)}
.js .tl.is-collapsed .tl-early{display:none}
@media (max-width:759px){
  .js .tl.is-collapsed .tl-mid{display:none}
  /* year above the event, so the event has the full width */
  .tl-row{grid-template-columns:minmax(0,1fr)}
  .tl-year{font-size:var(--t-15);font-weight:400;color:var(--sand-70)}
  .tl-year.rep{display:none}
  /* three awards, and no photograph of the shelf */
  .js .ledger-awards.is-collapsed tr.aw-trophy~tr.aw-trophy~tr.aw-trophy~tr.aw-trophy{display:none}
  .aw-fig img{display:none}
}
.tl-year{font-size:var(--t-21);font-weight:300;line-height:1.3}
.tl-year.rep{visibility:hidden}
.tl-src{margin-block-start:2px;font-size:var(--t-13);line-height:1.55;color:var(--sand-70)}

.aw-fig{display:flex;align-items:flex-end;gap:20px;margin-block-start:20px}
.aw-fig img{flex:none;width:84px}
.aw-fig figcaption{font-size:var(--t-13);line-height:1.55;color:var(--sand-70)}
.aw-legend{display:grid;gap:2px;margin-block-start:8px}
.aw-legend li{display:flex;align-items:baseline}
.mk{display:inline-block;flex:none;width:7px;height:7px;margin-inline-end:12px;border:1px solid var(--sand);transform:translateY(-1px) rotate(45deg)}
.aw-trophy .mk{background:var(--sand)}
/* the awards are a table for assistive technology (roles in the markup) and a two-column ledger for the eye */
.ledger-awards,.ledger-awards tbody,.ledger-awards th,.ledger-awards td{display:block}
.ledger-awards{width:100%;margin-block-start:24px;border-block-start:1px solid var(--sand-70)}
.ledger-awards thead{position:absolute;inset-inline-start:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ledger-awards tr{display:grid;grid-template-columns:5.5rem minmax(0,1fr);column-gap:16px;align-items:baseline;padding-block:13px;border-block-end:1px solid var(--line)}
.ledger-awards tbody th{grid-row:1 / span 2;font-size:var(--t-15);text-align:start;color:var(--sand-70)}
.ledger-awards td{grid-column:2}
.ledger-awards th.rep span{visibility:hidden}
.aw-name{font-size:var(--t-15);color:var(--sand-70)}
.js .ledger-awards.is-collapsed tr.aw-list{display:none}
.ledger-awards.is-collapsed th.rep span{visibility:visible}
.aw-more{margin-block-start:20px}
@media (min-width:700px){
  .tl-row{grid-template-columns:5.5rem minmax(0,1fr);column-gap:var(--gutter)}
  .tl-year{font-size:var(--t-24)}
  .ledger-awards tr{column-gap:var(--gutter)}
  .aw-fig img{width:104px}
}
@media (min-width:1000px){
  /* three shared rows (heading, introduction, list) so that the two ledgers start on the same line */
  .duo-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;row-gap:0}
  .duo-col{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
  .duo-list{align-self:start}
}

/* ---------- trips we have run ---------- */
.rec-notes{display:grid;gap:10px;margin-block-start:24px;max-width:var(--measure-wide)}
.rec-notes .src{margin:0}

/* ---------- agencies and contact: the closing block ---------- */
.outro-grid{display:grid;gap:var(--section) clamp(48px,7vw,104px)}
.trade h2{font-size:var(--t-38);letter-spacing:-.005em}
.contact h2{font-size:var(--t-h2);letter-spacing:-.008em}
.outro-p{margin-block-start:14px;font-size:var(--t-21);font-weight:300;line-height:var(--lh-lead);max-width:var(--measure)}
.trade-list{display:grid;gap:6px;margin-block:18px 24px;padding-inline-start:16px;border-inline-start:1px solid var(--sand-70);font-size:var(--t-15);color:var(--sand-70);max-width:var(--measure)}
.contact-ways{display:grid;gap:0 var(--gutter);margin-block-start:24px}
.way{display:flex;flex-direction:column;align-items:flex-start;padding-block:16px 22px;border-block-start:1px solid var(--line)}
.way-wa{border-block-start-color:var(--sand-70)}
.way-v{margin-block:2px 14px;font-size:clamp(1.25rem,1rem + .9vw,1.5rem);font-weight:300;line-height:1.3;overflow-wrap:anywhere}
/* one line under the number or the address saying what the button below it opens (pages without a form: agencies, contact) */
.way-note{margin-block:-6px 16px;max-width:24rem;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.contact .assure{margin-block-start:8px}
/* Chinese page: email first, with the stronger button */
html[lang="zh"] .way-mail{order:-1;border-block-start-color:var(--sand-70)}
html[lang="zh"] .way-wa{border-block-start-color:var(--line)}
html[lang="zh"] .way-mail .btn{min-height:52px;padding-inline:28px;border-color:var(--brass);font-size:var(--t-17)}
html[lang="zh"] .way-wa .btn{min-height:48px;padding-inline:24px;border-color:var(--sand-70);font-size:var(--t-15)}
@media (max-width:479px){
  .way .btn,.trade .btn{display:flex;width:100%}
}
@media (min-width:600px){
  .contact-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
  .way,html[lang="zh"] .way-wa{border-block-start-color:var(--sand-70)}
  .way .btn{margin-block-start:auto}
}
@media (min-width:1000px){
  .outro-grid{grid-template-columns:5fr 6fr;align-items:start}
  .trade{padding-block-start:.5rem}
}

/* ---------- photo credits ---------- */
.credits{padding-block:20px;border-block-start:1px solid var(--line)}
.credits summary{display:flex;align-items:center;gap:12px;min-height:44px;width:fit-content;cursor:pointer;list-style:none}
.credits summary::-webkit-details-marker{display:none}
.credits summary::after{content:"+";font-size:1.25rem;font-weight:300;line-height:1;color:var(--sand-70)}
.credits details[open] summary::after{content:"\2212"}
.credits h2{font-size:var(--t-15);font-weight:400;line-height:1.5}
.credits-list{display:grid;gap:8px 40px;margin-block:12px 16px;font-size:var(--t-13);line-height:1.6;color:var(--sand-70)}
.credits-list a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.credits-list .cr-s{color:var(--sand)}
.credits-list .cr-s::after{content:" · ";color:var(--sand-70)}
.credits-list .cr-x::before{content:" · "}
.credits-note{grid-column:1 / -1;max-width:var(--measure-wide)}
@media (pointer:coarse),(max-width:759px){
  .credits-list a{display:inline-block;padding-block:11px}
}
@media (min-width:900px){
  .credits-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- footer: the two companies in full, as text that can be copied ---------- */
.footer{padding-block:48px 28px;background:var(--navy-2);border-block-start:1px solid var(--line);font-size:var(--t-15);color:var(--sand-70)}
.footer-grid{display:grid;gap:36px var(--gutter)}
.ft-h{margin-block-end:12px;padding-block-end:10px;border-block-end:1px solid var(--line);font-size:var(--t-13);font-weight:400;line-height:1.5;color:var(--sand-70)}
.ft-legal{font-size:var(--t-17);color:var(--sand);letter-spacing:.015em}
.ft-ka{color:var(--sand)}
.footer-grid p+p{margin-block-start:6px}
.footer-grid .textlink{color:var(--sand)}
.footer-base{display:grid;gap:10px;margin-block-start:36px;padding-block-start:20px;border-block-start:1px solid var(--line);font-size:var(--t-13)}
.footer-base .brand{width:fit-content}
.reviewed{color:var(--sand)}
.ft-meta{line-height:1.7}
.ft-links{display:flex;flex-wrap:wrap;gap:0 28px}
.ft-site{color:var(--sand)}
/* Georgia site: what each of the two companies does for this site, one line under the name of the city */
.ft-role{margin-block-end:8px;color:var(--sand)}
/* links to our other sites: a row of their own, so that it is plain which links leave this site */
.ft-sister{padding-block-start:6px;border-block-start:1px solid var(--line)}
@media (pointer:coarse),(max-width:759px){
  .footer-grid p+p:has(.textlink){margin-block-start:0}
}
@media (min-width:900px){
  .footer-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .footer-grid>section{grid-column:span 4}
  .footer-grid>section:last-child{grid-column:9 / span 4}
  .footer-grid>section:nth-child(2){grid-column:5 / span 4;padding-inline-end:24px}
  .footer-grid>section:first-child{padding-inline-end:24px}
}

/* =====================================================================================================================
   Inner pages. Nothing below is used by the home page.
   ===================================================================================================================== */

/* ---------- page head: breadcrumb, title, one sentence; optionally one photograph across the page ----------
   The site header is laid over whatever follows the top bar (on the home page: the photographs). On an inner page that
   is this block, so it keeps the header's height free above the breadcrumb, or puts the photograph there (.has-photo). */
.page-head{position:relative;padding-block:calc(64px + clamp(20px,3vw,40px)) clamp(28px,4vw,52px);background:var(--navy-2);border-block-end:1px solid var(--line)}
.page-head h1{max-width:1000px;font-size:var(--t-hero);line-height:var(--lh-display);letter-spacing:-.012em}
.page-lead{margin-block-start:16px;max-width:var(--measure-wide);font-size:var(--t-21);line-height:var(--lh-lead)}
.crumbs{margin-block-end:8px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none}
.crumbs li{display:inline-flex;align-items:center;min-height:32px}
.crumbs li+li::before{content:"/";margin-inline:10px;opacity:.5}
.crumbs a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line);transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.crumbs [aria-current]{color:var(--sand)}
.page-head.has-photo{padding-block-start:0}
.page-photo{position:relative;height:clamp(230px,32vw,440px);overflow:hidden;background:var(--navy-2)}
.page-photo .ph{position:absolute;inset:0}
/* navy scrim under the header, as on the home page */
.page-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(10,18,32,.82) 0,rgba(10,18,32,.62) 120px,rgba(10,18,32,0) 210px)}
.page-head.has-photo>.wrap{padding-block-start:clamp(20px,3vw,36px)}
@media (hover:hover){.crumbs a:hover{color:var(--sand);text-decoration-color:var(--sand)}}
@media (pointer:coarse),(max-width:759px){
  .crumbs li{min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;margin-inline:-4px;padding-inline:4px}
}
/* Home / this page: on a phone the mark in the header already leads home */
@media (max-width:759px){
  .crumbs-short{display:none}
  /* a longer trail keeps to one line: the page you are on is the title right under it */
  .crumbs li[aria-current]{display:none}
}
@media (min-width:800px){
  .page-head{padding-block-start:calc(76px + clamp(20px,3vw,40px))}
  .page-head.has-photo{padding-block-start:0}
}

/* a row of links to the parts of a section (Company: overview, timeline, offices, record) */
.subnav{background:var(--navy-2);border-block-end:1px solid var(--line)}
.subnav ul{display:flex;flex-wrap:wrap;gap:0 28px;list-style:none}
.subnav a{display:inline-flex;align-items:center;min-height:48px;font-size:var(--t-15);color:var(--sand-70);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;text-decoration-color:transparent;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.subnav a[aria-current]{color:var(--sand);text-decoration-color:var(--sand)}
@media (hover:hover){.subnav a:hover{color:var(--sand)}}

/* ---------- page head with the title laid over the photograph: .head-over (2026-10-06; every inner page with a photograph) ----------
   Markup: header.page-head.has-photo.head-over
             > figure.page-photo                        (or div.page-photos > two of them, with .head-duo)
             + div.head-top > div.wrap > crumbs, [a kicker], h1
             + div.wrap.head-body > p.page-lead, [p.article-meta.head-meta], {{headcap:slug}}
   Under 760px the photograph is --ph-h tall and the title block rises 84px into its foot on a navy scrim: a one-line
   title stands on the photograph, a longer one runs on below it. The caption on the photograph is not shown there;
   .head-cap ({{headcap}}) says the same in one line under the lead.
   From 760px the photograph and the title share one grid cell: the title stands at the foot of the photograph on a navy
   scrim that belongs to the title block, so it is as tall as the title is (two lines are as readable as one), and the
   photograph runs out into the ground of the lead below, as the three photographs of the home page do. */
.page-head.head-over{--ph-h:clamp(260px,72vw,340px);padding-block-end:clamp(24px,3.4vw,44px)}
.head-over .page-photo{height:auto;overflow:visible}
.head-over .page-photo .ph{position:relative;inset:auto;height:var(--ph-h)}
/* the tone of the three photographs of the home page (.tri-p), a little lighter than the site-wide one */
.head-over .page-photo .ph img{filter:sepia(.14) saturate(.86) contrast(1.04) brightness(1.02)}
.head-over .page-photo .ph::after{opacity:.06}
/* navy scrim under the site header only */
.head-over .page-photo::after{inset-block-end:auto;height:var(--ph-h);background:linear-gradient(to bottom,rgba(10,18,32,.82) 0,rgba(10,18,32,.62) 72px,rgba(10,18,32,0) 136px)}
.head-over .page-photo figcaption{display:none}
/* the title block: its first line stands on the foot of the photograph */
.head-top{position:relative;z-index:1;margin-block-start:-84px;padding-block-start:30px;background:linear-gradient(to bottom,rgba(10,18,32,0) 0,rgba(10,18,32,.84) 30px,var(--navy-2) 84px)}
.page-head.head-over>.head-body{display:grid;gap:14px var(--gutter);padding-block-start:0}
.head-body .page-lead{margin-block-start:14px}
/* "This page was last checked on …": a quiet line under a hairline; from 900px it stands beside the lead, on its last line */
.head-body .head-meta{margin:0;padding-block-start:10px;border-block-start:1px solid var(--line)}
/* the caption of the photograph as a line of text (under 760px only) */
.head-cap{display:flex;flex-wrap:wrap;gap:0 10px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.head-cap .band-place{color:var(--sand)}
/* two photographs side by side (Offices: one of each city) */
.page-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2px}
/* the city and the company over each photograph: from 760px only (on a phone the two cards below say it) */
.pp-label{display:none}
@media (min-width:760px){
  .page-head.head-over{--ph-h:clamp(340px,min(38vw,100svh - 330px),560px);display:grid;grid-template-columns:minmax(0,1fr)}
  .head-over>.page-photo,.head-over>.page-photos{grid-area:1 / 1;min-height:var(--ph-h)}
  .head-over .page-photo{overflow:hidden}
  .head-over .page-photo .ph{position:absolute;inset:0;height:auto}
  .head-over .page-photo::after{inset:0;height:auto;background:linear-gradient(to bottom,rgba(10,18,32,.8) 0,rgba(10,18,32,.58) 104px,rgba(10,18,32,0) 196px)}
  /* the scrim of the title: clear at its top edge, 86% navy from just above the breadcrumb down, the plain ground at its foot */
  .head-over>.head-top{grid-area:1 / 1;align-self:end;margin-block-start:0;padding-block:116px 18px;background:linear-gradient(to top,var(--navy-2) 0,rgba(10,18,32,.9) 30px,rgba(10,18,32,.86) calc(100% - 102px),rgba(10,18,32,0) 100%)}
  .head-over>.head-top h1{max-width:min(1000px,66%)}
  /* the caption: at the foot of the photograph on the far side from the title, the place above the credit */
  .head-over .page-photo figcaption{display:block;position:absolute;z-index:2;inset-inline:0;inset-block-end:0;padding-block:0 24px;background:none;border:0}
  .head-over .page-photo figcaption .wrap{flex-direction:column;flex-wrap:nowrap;align-items:flex-end;gap:0;text-align:end}
  .head-over .band-place,.head-over .band-credit{max-width:30%}
  [dir="rtl"] .head-over .band-credit{text-align:start}
  .head-cap{display:none}
  .page-head.head-over>.head-body{grid-area:2 / 1}
  .head-body .page-lead{margin-block-start:6px}
  .head-duo .page-photos{grid-template-rows:minmax(0,1fr)}
  /* a longer scrim at the top: it also carries the two labels */
  .head-duo .page-photo::after{background:linear-gradient(to bottom,rgba(10,18,32,.8) 0,rgba(10,18,32,.72) 165px,rgba(10,18,32,0) 285px)}
  .head-duo .page-photo figcaption .wrap,.head-duo .page-photo+.page-photo figcaption .wrap{max-width:none;padding-inline:var(--edge) 28px}
  .head-duo .page-photo+.page-photo figcaption .wrap{padding-inline:28px var(--edge)}
  .head-duo .band-place,.head-duo .band-credit{max-width:62%}
  .pp-label{position:absolute;z-index:1;inset-block-start:100px;inset-inline:28px 20px;display:flex;flex-direction:column;gap:3px;line-height:1.3}
  .head-duo .page-photo:first-child .pp-label{inset-inline-start:var(--edge)}
}
@media (min-width:900px){
  .page-head.head-over>.head-body{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
  .head-body .page-lead{grid-column:1 / span 7}
  .head-body .head-meta{grid-column:9 / span 4;margin-block-end:.4em;border-block-start-color:var(--sand-70)}
}
@media (prefers-reduced-motion:no-preference){
  /* the photograph comes in as on the home page (keyframes hnt-in); the text does not wait for it */
  .head-over .page-photo .ph{animation:hnt-in 1.2s var(--ease) both}
}

/* ---------- a hairline across the page above a section: where two blocks meet with no photograph and no star between them ---------- */
.sec-ruled{border-block-start:1px solid var(--line)}

/* ---------- a lower full-width photograph: between a long table and what follows it ---------- */
.band.band-slim{height:clamp(104px,13.5vw,200px)}
.band-slim figcaption{padding-block:36px 10px}

/* ---------- two columns: the main text or a form, and a narrower column beside it (a card, the trust lines) ---------- */
.split{display:grid;gap:var(--block) var(--gutter)}
.split>.assure:last-child{margin-block-start:0;align-self:start}
@media (min-width:900px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .split>:first-child{grid-column:1 / span 7}
  .split>:last-child{grid-column:9 / span 4}
  /* a card in the narrow column: each label above its value, so an address is not squeezed into a few words a line */
  .split>:last-child .defs>div{grid-template-columns:minmax(0,1fr)}
  .split>:last-child .defs dt{padding-block-start:0}
}

/* ---------- article: long text at one measure. Plain h2, h3, p, ul, ol, figure inside it need no classes ---------- */
.article{max-width:var(--measure-wide)}
.article>*+*{margin-block-start:1em}
.article>p,.article>ul,.article>ol,.article>.note{max-width:var(--measure)}
.article h2{margin-block-start:clamp(40px,4.5vw,64px);font-size:var(--t-38);letter-spacing:-.005em}
.article h3{margin-block-start:36px;font-size:var(--t-24);font-weight:400;line-height:var(--lh-ui)}
.article h2+*,.article h3+*{margin-block-start:14px}
.article>:first-child{margin-block-start:0}
.article ul,.article ol{padding-inline-start:1.5em}
.article ul{list-style:none}
.article ul>li{position:relative}
.article ul>li::before{content:"";position:absolute;inset-inline-start:-1.5em;inset-block-start:calc(var(--lh)*.5em);width:.75em;height:1px;background:var(--sand-70)}
.article ol{list-style:decimal}
.article ol>li::marker{color:var(--sand-70);font-variant-numeric:tabular-nums lining-nums}
.article li+li{margin-block-start:8px}
.article a:not(.btn),.faq-a a,.note a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--sand-70);transition:text-decoration-color .3s var(--ease)}
.article figure{margin-block:40px}
.article figure .ph{aspect-ratio:3/2}
.article figcaption{margin-block-start:8px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
/* {{figcap:slug}}: the place, then author and licence */
.article figcaption .band-place{color:var(--sand);margin-inline-end:10px}
.article-meta{font-size:var(--t-13);line-height:1.6;color:var(--sand-70)}
/* a remark set apart from the text: a limit, a condition, "as of" */
.note{padding-block:2px;padding-inline-start:16px;border-inline-start:1px solid var(--sand-70);max-width:var(--measure-wide);font-size:var(--t-15);color:var(--sand-70)}
@media (hover:hover){.article a:not(.btn):hover,.faq-a a:hover,.note a:hover{text-decoration-color:var(--sand)}}
@media (pointer:coarse),(max-width:759px){
  .article>p>a:only-child,.faq-a>p>a:only-child{display:inline-block;padding-block:13px}
}

/* ---------- list rows: a title, what it is for, a date. For guides and routes; no cards, no pictures ---------- */
.rows{border-block-start:1px solid var(--sand-70)}
.rows>li{border-block-end:1px solid var(--line)}
.row{display:grid;gap:2px var(--gutter);align-items:baseline;min-height:56px;padding-block:14px}
.row-t{font-size:var(--t-21);font-weight:300;line-height:1.3}
.row-m,.row-d{font-size:var(--t-15);color:var(--sand-70)}
a.row .row-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--sand-70);transition:text-decoration-color .3s var(--ease)}
@media (hover:hover){a.row:hover .row-t{text-decoration-color:var(--sand)}}
@media (min-width:760px){
  .row{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr)}
  .row-d{text-align:end}
}

/* ---------- steps: a real order (how to book, how an agency works with us), so the numbers are allowed ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 var(--gutter)}
.steps>li{padding-block:18px 26px;border-block-start:1px solid var(--sand-70)}
.step-n{display:block;font-size:var(--t-15);color:var(--sand-70)}
.steps h3{margin-block:10px 8px;font-size:var(--t-24);line-height:1.25}
.steps p{font-size:var(--t-15);color:var(--sand-70)}

/* ---------- plain table: keeps its columns on a phone and scrolls sideways inside .scroll-x (use .ledger where rows can stack) ---------- */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;font-size:var(--t-15);line-height:1.5}
.scroll-x>.table{min-width:680px}
.table th,.table td{padding-block:14px;padding-inline:0 24px;text-align:start;vertical-align:top;border-block-end:1px solid var(--line)}
.table thead th{padding-block:0 10px;font-size:var(--t-13);color:var(--sand-70);border-block-end-color:var(--sand-70)}
.table tr>:last-child{padding-inline-end:0}

/* ---------- questions and answers: details/summary, hairline rows, plus and minus as the only marker ---------- */
.faq{max-width:var(--measure-wide);border-block-start:1px solid var(--sand-70)}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:60px;padding-block:14px;font-size:var(--t-21);font-weight:300;line-height:var(--lh-ui);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:24px;font-size:1.5rem;font-weight:300;line-height:1;text-align:center;color:var(--sand-70)}
.faq details[open] summary::after{content:"\2212"}
.faq-a{max-width:var(--measure);padding-block:0 26px;color:var(--sand-70)}
.faq-a>*+*{margin-block-start:.8em}

/* ---------- form: label above, underline field, errors said in words. The trust lines (.assure) sit beside or under it ---------- */
.form{display:grid;gap:28px;max-width:var(--measure)}
.fld-row{display:grid;gap:28px var(--gutter)}
.fld{position:relative;display:flex;flex-direction:column}
.fld label,.fld-legend{font-size:var(--t-15);line-height:1.5;color:var(--sand-70)}
.fld .opt{margin-inline-start:.4em}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;padding:12px 0;background:transparent;border:0;border-block-end:1px solid var(--sand-70);border-radius:0;font:inherit;font-size:var(--t-17);line-height:1.4;color:var(--sand);-webkit-appearance:none;appearance:none;transition:border-color .3s var(--ease)}
.fld select{padding-inline-end:32px}
.fld select option{background:var(--navy);color:var(--sand)}
.fld-select::after{content:"";position:absolute;inset-inline-end:4px;inset-block-end:20px;width:8px;height:8px;border-inline-end:1px solid var(--sand);border-block-end:1px solid var(--sand);transform:rotate(45deg);pointer-events:none}
[dir="rtl"] .fld-select::after{transform:rotate(-45deg)}
.fld textarea{min-height:112px;resize:vertical}
.fld ::placeholder{color:var(--sand-70);opacity:1}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-block-end-color:var(--sand)}
.fld .hint{margin-block-start:6px;font-size:var(--t-13);color:var(--sand-70)}
.fld .err{display:none;margin-block-start:8px;font-size:var(--t-15);line-height:1.5;color:var(--sand)}
.fld.is-invalid .err{display:block}
.fld.is-invalid input,.fld.is-invalid select,.fld.is-invalid textarea{border-block-end-width:2px;border-block-end-color:var(--sand)}
fieldset.fld{border:0;min-width:0}
.choice{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding-block-start:10px;font-size:var(--t-17);line-height:1.4;color:var(--sand)}
.choice input{flex:none;width:20px;min-height:0;height:20px;margin-block-start:.15em;padding:4px;border:1px solid var(--sand-70);background-clip:content-box;cursor:pointer}
.choice input:checked{background-color:var(--sand);border-color:var(--sand)}
.form .btn{justify-self:start}
.form-note{font-size:var(--t-13);color:var(--sand-70)}
.form-ok{padding-block:16px;border-block:1px solid var(--line);font-size:var(--t-21);font-weight:300}
.form-ok:empty{display:none}
@media (hover:hover){.fld input:hover,.fld select:hover,.fld textarea:hover{border-block-end-color:var(--sand)}}
@media (max-width:479px){.form .btn{display:flex;width:100%}}
@media (min-width:600px){.fld-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- register of licences and registrations (credentials page): one row per document ----------
   Eight fields a row. From 1100px: six columns on the first line; scope and how-to-check, the two long ones, on a second
   line under them, each with its own label. Below that every row is a block of label and value pairs, like .ledger on a phone.
   The rows are laid out with a grid, so the table roles are written in the markup (as for .ledger-awards). */
.register,.register tbody,.register tr,.register th,.register td{display:block}
.register{width:100%;font-size:var(--t-17)}
.register caption{display:block;padding-block-end:14px;font-size:var(--t-15);line-height:1.5;color:var(--sand-70);text-align:start}
.register thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.register tbody{border-block-start:1px solid var(--sand-70)}
.register tbody tr{padding-block:18px;border-block-end:1px solid var(--line)}
.register tbody th{margin-block-end:8px;font-size:var(--t-21);font-weight:300;line-height:1.3;text-align:start;overflow-wrap:anywhere}
.register td{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:0 16px;padding-block:3px;line-height:1.55}
[lang|="ar"] .register td,[lang|="zh"] .register td{line-height:var(--lh)}
.register .cell-lbl{display:block;padding-block-start:.2em;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.register .sub{display:block;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.register .cell-v{min-width:0;overflow-wrap:anywhere}
.register .cell-v .textlink{display:flex;align-items:center;width:fit-content;margin-block-start:4px;font-size:var(--t-15)}
/* scope and how-to-check are sentences: the label sits above them and they take the full width */
.register td:nth-child(n+7){display:block;padding-block-start:8px}
.register td:nth-child(n+7) .cell-lbl{padding-block:0 2px}
@media (min-width:1100px){
  .register{font-size:var(--t-15)}
  .register thead{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;display:block}
  .register tr{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,2fr) minmax(0,1.6fr) minmax(0,2.6fr) minmax(0,1.8fr) minmax(0,2.8fr);gap:16px var(--gutter)}
  .register thead th{padding-block-end:10px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70);text-align:start}
  /* scope and how-to-check have no column of their own: their names are read out by assistive technology, and shown in each row */
  .register thead th:nth-child(n+7){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
  .register tbody tr{padding-block:20px 22px}
  .register tbody th{grid-row:1 / span 2;margin:0;font-size:var(--t-17);font-weight:400;line-height:1.45}
  .register td{display:block;padding:0}
  .register td .cell-lbl{display:none}
  .register td:nth-child(n+7){padding-block-start:14px;border-block-start:1px solid var(--line)}
  .register td:nth-child(n+7) .cell-lbl{display:block;padding-block:0 2px}
  .register td:nth-child(7){grid-column:2 / span 2}
  .register td:nth-child(8){grid-column:4 / span 3}
}

/* ---------- small parts used on inner pages ---------- */
/* a row of buttons at the end of a block */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:28px}
@media (max-width:479px){.actions .btn{display:flex;width:100%}}
/* a card that takes the full width of .cards (the third of three) */
.cards>.span-all{grid-column:1 / -1}
/* "last checked" directly under the title of a page */
.page-head .article-meta{margin-block-start:14px}
.page-head .article-meta+.page-lead{margin-block-start:10px}

/* ---------- Arabic and Chinese headings: no tracking ---------- */
h1:lang(ar),h2:lang(ar),h3:lang(ar),h1:lang(zh),h2:lang(zh),h3:lang(zh),.fig-v:lang(ar){letter-spacing:0}

/* ---------- motion and print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  html{background:#fff;color:#000}
  .topbar,.site-head .nav,.menu-btn,.band,.tri,.divider,.btn,.hero-credits,.page-photo,.page-photos,.pp-label,.head-cap,.subnav,.crumbs{display:none!important}
  .head-top,.head-over>.head-top{margin-block-start:0;padding-block-start:0;background:none}
  .site-head{position:static}
  .sec{padding-block:24px}
  .page-head{padding-block:16px}
  .entity,.office,.dl-card,.strip,.footer,.page-head{background:none}
  .faq-a,.note,.steps p,.row-m,.row-d{color:#333}
  .strip .no,.entity-no .no{color:#000}
  .lead,.kicker,.src,.defs dt,.tl-src,.fig-src,.footer{color:#333}
}

/* ---------- page: georgia (src/pages/georgia.css) ---------- */
/* Georgia pages (appended to dist/style.css by build.py, because src/pages/georgia.html exists).
   .geo         the two hub pages (georgia, zh/georgia) and the five route pages: each template sets "bodyclass: geo"
   .geo-route   the route pages only
   The markup of the route pages and of the lists on the hub pages is written by src/pages/georgia/_gen.py.
   Existing tokens only; logical properties only; no new colour, radius, shadow or gradient.
   The page head is .head-over (src/style.css): the title over the photograph.

     .g-kicker                     the line above a title: "Draft itinerary | 5 days, 4 nights"
     .g-head-main .g-head-side     under the title: one sentence and the buttons; beside them the facts and the trust lines
     .g-rows > .g-row              a ledger row: .g-row-side (what the row is, with its figures) and .g-row-main (the text).
                                   Side by side from 900px, the side column staying in view; one under the other below.
                                   Used for the days, the hotels, and the notes "before you go".
     .g-day .g-day-n .g-day-facts .g-km .g-route .g-stops .g-stop .g-stop-notes .g-if      a day
     .g-daynav                     the row of links "Day 1 … Day n"
     .g-hgroups .g-hgroup .g-nights                                                        reference hotels
     .g-list                       a list as hairline rows (highlights, included, not included)
     .g-inex                       included and not included, side by side
     .g-srcs                       the web addresses a note rests on, and the date they were read
     .g-places .g-cases            tables (.ledger): mosques and restaurants; the three entry cases
     .g-cards > .g-card            the routes on a hub page: one band each, photograph and text
     .g-other                      the sentence that leads to the other audience's page
     .g-prose .g-label .g-sub .g-en .g-h3 .g-note-h .g-more .g-wide .g-after               small parts */

/* ---------- page head ---------- */
/* the titles are sentences or long names: one size down, as on the guides, so that they keep to two lines */
.geo .page-head h1{font-size:var(--t-h2);line-height:var(--lh-head)}
.geo .g-kicker{display:flex;flex-wrap:wrap;align-items:center;margin-block-end:8px;font-size:var(--t-15);line-height:1.5}
.geo .g-head-main .actions{margin-block-start:22px}
.geo .g-cta-mail{margin-block-start:10px;font-size:var(--t-15);color:var(--sand-70)}
.geo .g-draft{margin-block-start:20px}
.geo .g-head-side{margin-block-start:10px}
.geo .g-head-facts>div{padding-block:10px;border-block-start:1px solid var(--line)}
.geo .g-head-facts>div:first-child{border-block-start-color:var(--sand-70)}
.geo .g-head-facts dt{font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.geo .g-head-facts dd{font-size:var(--t-15);line-height:1.55}
[lang|="ar"] .geo .g-head-facts dd,[lang|="zh"] .geo .g-head-facts dd{line-height:var(--lh)}
.geo .g-head-assure{margin-block-start:0;font-size:var(--t-13)}
.geo .g-head-facts+.g-head-assure{margin-block-start:18px}
@media (min-width:760px){
  /* a taller photograph than on the other inner pages: the title block takes its lower part */
  .geo .page-head.head-over{--ph-h:clamp(340px,min(44vw,100svh - 330px),640px)}
}
@media (min-width:900px){
  .geo .page-head.head-over>.head-body{align-items:start}
  .geo .head-body>.g-head-main{grid-column:1 / span 7}
  .geo .head-body>.g-head-side{grid-column:9 / span 4;margin-block-start:12px}
}

/* ---------- small parts ---------- */
.geo .g-prose{max-width:var(--measure-wide)}
.geo .g-wide{max-width:var(--measure-wide)}
.geo .g-wide>*+*{margin-block-start:14px}
.geo .g-label{font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.geo .g-sub{display:block;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.geo .g-en{display:block;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.geo .g-h3{margin-block-end:12px;font-size:var(--t-24);line-height:1.3}
.geo .g-note-h{display:block;margin-block-end:2px;font-size:var(--t-13);line-height:1.5;color:var(--sand)}
.geo .g-more{margin-block-start:14px;font-size:var(--t-15)}
.geo .g-after{margin-block-start:24px}
.geo .g-over>*+*{margin-block-start:16px}
.geo .g-over>.g-h3{margin-block:clamp(28px,3vw,40px) 0}
.geo .g-over>.g-h3+*{margin-block-start:10px}
.geo .note a,.geo .g-srcs a,.geo .g-src a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--sand-70);transition:text-decoration-color .3s var(--ease)}
@media (hover:hover){.geo .note a:hover,.geo .g-srcs a:hover,.geo .g-src a:hover{text-decoration-color:var(--sand)}}
.geo .g-glance h3{margin-block-end:2px}
.geo .g-glance h3+.g-sub{margin-block-end:12px}

/* lists written without a class (role="list"): no markers */
.geo .g-stops ul,.geo .g-hgroup ul,.geo .g-srcs ul,.geo .g-daynav ol{list-style:none}

/* a list as hairline rows */
.geo .g-list{border-block-start:1px solid var(--sand-70);max-width:var(--measure-wide)}
.geo .g-list>li{padding-block:11px;border-block-end:1px solid var(--line);line-height:1.55}
[lang|="ar"] .geo .g-list>li,[lang|="zh"] .geo .g-list>li{line-height:var(--lh)}
.geo .note .g-list{margin-block:6px 0;border-block-start-color:var(--line)}

/* ---------- ledger rows: what the row is on one side, the text on the other ---------- */
.geo .g-rows{border-block-start:1px solid var(--sand-70)}
.geo .g-row{padding-block:clamp(22px,2.6vw,36px);border-block-end:1px solid var(--line)}
.geo .g-row-side h3,.geo .g-day-n{font-size:var(--t-24);font-weight:300;line-height:1.25}
.geo .g-row-main{max-width:var(--measure-wide);margin-block-start:14px}
.geo .g-row-main>*+*{margin-block-start:14px}
.geo .g-row-main>h3{font-size:var(--t-24);line-height:1.3}
.geo .g-row[id]{scroll-margin-top:12px}
@media (min-width:900px){
  .geo .g-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .geo .g-row-side{grid-column:1 / span 3;position:sticky;inset-block-start:20px}
  .geo .g-row-main{grid-column:5 / span 8;margin-block-start:0}
}

/* ---------- a day ---------- */
/* .g-daynav a: the gap is the space between the word and the figure where the build wraps the figure in an element of its
   own (Arabic: "اليوم" + <bdi>1</bdi>); inside a flex box the space character between the two is not drawn. */
.geo .g-days-sec .sec-head{margin-block-end:20px}
.geo .g-daynav{margin-block-end:10px}
.geo .g-daynav ol{display:flex;flex-wrap:wrap;gap:0 22px}
.geo .g-daynav a{display:inline-flex;align-items:center;gap:.3em;min-height:44px;font-size:var(--t-15);font-variant-numeric:tabular-nums lining-nums;color:var(--sand-70);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;text-decoration-color:transparent;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
@media (hover:hover){.geo .g-daynav a:hover{color:var(--sand);text-decoration-color:var(--sand-70)}}
.geo .g-var-see{margin-block-end:20px}
.geo .g-day-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--gutter);margin-block-start:10px}
.geo .g-day-facts>div:nth-child(n+3){grid-column:1 / -1}
.geo .g-day-facts dt{font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.geo .g-day-facts dd{font-size:var(--t-15);line-height:1.5}
/* the day's road distance: the one large figure of the row, in tabular numerals */
.geo .g-km dd>.num:first-child{display:block;font-size:var(--t-38);font-weight:300;line-height:1.15;letter-spacing:.01em;white-space:nowrap}
[lang|="ar"] .geo .g-km dd>.num:first-child{letter-spacing:0}
.geo .g-route{font-size:var(--t-15);line-height:1.6;color:var(--sand-70)}
.geo .g-row-main>h3+.g-route{margin-block-start:6px}
.geo .g-stops{margin-block-start:24px}
.geo .g-stops>ul{margin-block-start:6px;border-block-start:1px solid var(--line)}
.geo .g-stop{padding-block:14px;border-block-end:1px solid var(--line)}
.geo .g-stop h4{font-size:var(--t-17);font-weight:400;line-height:1.4}
.geo .g-stop>p{margin-block-start:4px}
.geo .g-stop>.tag{margin-block-start:6px}
.geo .g-stop-notes{display:grid;gap:4px;margin-block-start:8px;font-size:var(--t-15);line-height:1.55;color:var(--sand-70)}
[lang|="ar"] .geo .g-stop-notes,[lang|="zh"] .geo .g-stop-notes{line-height:1.7}
.geo .g-stop-notes>div{display:grid;gap:0 16px}
.geo .g-stop-notes dt{font-size:var(--t-13);line-height:1.5;padding-block-start:.15em}
.geo .g-stop-notes dd{color:var(--sand)}
.geo .g-if{margin-block-start:22px}
@media (min-width:560px){
  .geo .g-stop-notes>div{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr)}
}
@media (max-width:479px){
  /* on a narrow phone the distance and the time on the road stand one under the other: a long note on the time
     (the winter version of a day) no longer runs down half the width of the screen beside a single figure */
  .geo .g-day-facts{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:900px){
  /* in the side column: distance, time and the night one under the other */
  .geo .g-day-facts{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* ---------- reference hotels ---------- */
.geo .g-nights{margin-block-start:6px;font-size:var(--t-17)}
.geo .g-hotel .g-row-side .g-sub{margin-block-start:4px}
.geo .g-hgroups{display:grid;gap:20px var(--gutter)}
.geo .g-hgroup ul{margin-block-start:6px;border-block-end:1px solid var(--line)}
.geo .g-hgroup li{padding-block:8px;border-block-start:1px solid var(--line);font-size:var(--t-17);line-height:1.4;overflow-wrap:anywhere}
@media (min-width:640px){
  .geo .g-hgroups{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- included and not included ---------- */
.geo .g-inex{display:grid;gap:var(--block) var(--gutter)}
.geo .g-shop{margin-block-start:24px}
.geo .g-must{margin-block-end:var(--block)}
@media (min-width:900px){
  .geo .g-inex{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- sources of a note ---------- */
.geo .g-srcs{margin-block-start:18px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.geo .g-srcs-h{color:var(--sand)}
.geo .g-srcs ul{display:grid;gap:0 var(--gutter);margin-block-start:4px}
.geo .g-srcs li{min-width:0;overflow-wrap:anywhere}
.geo .g-srcs a{display:inline-block;padding-block:3px;text-decoration-color:var(--line)}
@media (pointer:coarse),(max-width:759px){
  .geo .g-srcs a{padding-block:10px}
  .geo .g-src a,.geo .g-var-see a{display:inline-block;padding-block:10px}
}
@media (min-width:1100px){
  .geo .g-srcs ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- tables: mosques and restaurants; the three entry cases ---------- */
.geo .g-places,.geo .g-cases{font-size:var(--t-15)}
.geo .g-places{margin-block-start:28px}
.geo .g-places tbody th,.geo .g-cases tbody th{font-size:var(--t-17);line-height:1.4}
.geo .g-places .sub{margin-block-start:2px;line-height:1.5}
.geo .g-src{display:block;margin-block-start:6px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.geo .g-17{margin-block-start:16px}
.geo .g-full{margin-block-start:22px;color:var(--sand)}
.geo .g-full+.g-prose{margin-block-start:4px}
@media (max-width:759px){
  /* sentences, not short values: the column name above the sentence, not beside it */
  .geo .g-places td:has(>.cell-lbl),.geo .g-cases td:has(>.cell-lbl){display:block;padding-block:6px 2px}
  .geo .g-places .cell-lbl,.geo .g-cases .cell-lbl{padding-block:0 2px}
}
@media (min-width:760px){
  .geo .g-places tbody th{width:30%}
  .geo .g-places:not(.g-places-2) td:nth-child(2){width:26%}
  .geo .g-cases tbody th{width:34%}
  .geo .g-cases td:nth-child(2){width:24%}
}

/* ---------- price, and another way to run a route ---------- */
.geo #price .contact-ways{margin-block-start:28px}
.geo #price .split>div>*+*{margin-block-start:14px}
.geo .g-variant{border-block-start:1px solid var(--line)}
.geo .g-variant .g-kicker,.geo .g-card .g-kicker{color:var(--sand-70)}
.geo .g-var-rep{margin-block-start:10px;font-size:var(--t-15);color:var(--sand-70)}
.geo .g-var-facts{max-width:var(--measure-wide);margin-block-end:var(--block);border-block-end:1px solid var(--line)}
@media (min-width:900px){
  .geo .sec-head .g-var-head{grid-column:1 / span 7}
  .geo .sec-head .g-var-rep{grid-column:9 / span 4;margin:0;padding-block-end:.3em}
}

/* ---------- hub pages: the routes, one band each ---------- */
.geo .g-cards{margin-block-start:24px;border-block-start:1px solid var(--sand-70)}
.geo .g-card{display:grid;gap:18px var(--gutter);padding-block:clamp(24px,3vw,44px);border-block-end:1px solid var(--line)}
.geo .g-card-fig .ph{aspect-ratio:16/9}
.geo .g-card-fig figcaption{margin-block-start:8px;font-size:var(--t-13);line-height:1.5;color:var(--sand-70)}
.geo .g-card-fig figcaption .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;max-width:none;padding:0}
.geo .g-card-fig .band-place{color:var(--sand)}
.geo .g-card h3{margin-block-end:10px;font-size:var(--t-38);line-height:1.2}
.geo .g-card h3 a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:transparent;transition:text-decoration-color .3s var(--ease)}
@media (hover:hover){.geo .g-card h3 a:hover{text-decoration-color:var(--sand-70)}}
.geo .g-card-tag{max-width:var(--measure)}
.geo .g-card .defs{margin-block-start:18px}
.geo .g-card .defs dd{font-size:var(--t-15)}
.geo .g-card .actions{margin-block-start:20px}
@media (min-width:900px){
  .geo .g-card{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .geo .g-card-fig{grid-column:1 / span 5}
  .geo .g-card-fig .ph{aspect-ratio:3/2}
  .geo .g-card-body{grid-column:7 / span 6}
}

/* the sentence that leads to the other audience's page. The link sits in an element with class "lang", so that app.js
   treats it as a language choice (see _gen.py, hub_blocks); these rules undo the look of the language switch on it */
.geo .g-other{margin-block-start:28px;font-size:var(--t-15);color:var(--sand-70)}
.geo .g-other .lang{display:inline;margin:0}
.geo .g-other .lang a{display:inline;min-width:0;min-height:0;padding:0;font-size:inherit;line-height:inherit;color:var(--sand);text-decoration-color:var(--sand-70)}
@media (pointer:coarse),(max-width:759px){
  .geo .g-other .lang a{display:inline-block;padding-block:11px}
}

@media print{
  .geo .g-daynav,.geo .g-other{display:none!important}
  .geo .g-row-side{position:static}
}

/* =====================================================================================================================
   2026-10-06, after the two reviews: the route pages on a phone, the measure of the text, the hierarchy of a day.
   ===================================================================================================================== */

/* ---------- the text at one measure, as in .article (about 68 characters; 36 in Chinese) ---------- */
.geo .g-prose,.geo .g-row-main>p,.geo .g-stop>p,.geo .g-fold-body>p,.geo .note>p,.geo p.note,.geo .g-wide>p{max-inline-size:68ch}
[lang|="zh"] .geo .g-prose,[lang|="zh"] .geo .g-row-main>p,[lang|="zh"] .geo .g-stop>p,[lang|="zh"] .geo .g-fold-body>p,[lang|="zh"] .geo .note>p,[lang|="zh"] .geo p.note,[lang|="zh"] .geo .g-wide>p{max-inline-size:36em}

/* ---------- a fold: <details> written by _gen.py (fold()) ----------
   .g-fold-narrow is written open. Under 900px src/pages/georgia.js shuts all but the first day; from 900px its summary
   is not shown and the text simply stands there. A fold without .g-fold-narrow (the entry rule in full) is shut on every
   screen until the reader opens it. Without scripts everything written open stays open. */
.geo .g-fold>summary{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:var(--t-15);line-height:var(--lh-ui);cursor:pointer;list-style:none}
.geo .g-fold>summary>span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--sand-70)}
.geo .g-fold>summary::-webkit-details-marker{display:none}
.geo .g-fold>summary::after{content:"+";flex:none;width:18px;font-size:1.25rem;font-weight:300;line-height:1;text-align:center;color:var(--sand-70)}
.geo .g-fold[open]>summary::after{content:"\2212"}
.geo .g-fold[open]>summary .g-fold-a,.geo .g-fold:not([open])>summary .g-fold-b{display:none}
.geo .g-fold-body{margin-block-start:10px}
.geo .g-fold-body>*+*{margin-block-start:14px}
.geo .g-fold-body>.g-stops{margin-block-start:24px}
@media (min-width:900px){
  .geo .g-fold-narrow>summary{display:none}
  .geo .g-fold-narrow>.g-fold-body{margin-block-start:0}
}

/* ---------- a day: a rule across the page, the number of the day in brass, the names of the stops one size up ---------- */
.geo .g-days{border-block-start:0;border-block-end:1px solid var(--line)}
.geo .g-days>.g-day{border-block-start:1px solid var(--sand-70);border-block-end:0}
.geo .g-day-n{font-size:var(--t-38);font-weight:300;line-height:1.15;letter-spacing:.01em;color:var(--brass);font-variant-numeric:tabular-nums lining-nums}
[lang|="ar"] .geo .g-day-n,[lang|="zh"] .geo .g-day-n{letter-spacing:0}
.geo .g-stop h4{font-size:1.1875rem;line-height:1.35}
.geo .g-stop>p{color:var(--sand-70)}
.geo .g-days-src{margin-block:0 18px}
/* the foot of a day: back to the list of days, and the way to ask about this route (a phone only) */
.geo .g-day-foot{display:none}
.geo .g-day-foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--line)}

@media (max-width:899px){
  /* "Day 1 … Day n": one line that slides sideways and stays at the top of the screen while the days scroll under it */
  .geo .g-daynav{position:sticky;inset-block-start:0;z-index:15;margin-inline:calc(-1*var(--pad));margin-block-end:0;padding-inline:var(--pad);background:var(--navy-2);border-block:1px solid var(--line)}
  .geo .g-daynav ol{flex-wrap:nowrap;gap:0 24px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .geo .g-daynav ol::-webkit-scrollbar{display:none}
  .geo .g-daynav li{flex:none}
  .geo .g-daynav a{white-space:nowrap}
  .geo .g-daynav a[aria-current]{color:var(--sand);text-decoration-color:var(--sand)}
  .geo .g-day[id],.geo #variant{scroll-margin-top:58px}
  .geo .g-days-sec .g-var-see{margin-block:14px}
  .geo .g-day-foot{display:flex;flex-wrap:wrap;align-items:center;margin-block-start:6px;font-size:var(--t-13);color:var(--sand-70)}
  /* the first screen: of the three trust lines, the one that says whom you are writing to stays beside the button;
     all three stand beside the buttons under "Price" and in the closing block */
  .geo .g-head-assure li:nth-child(n+2){display:none}
  .geo .g-head-side{margin-block-start:0}
}
@media (pointer:coarse),(max-width:759px){
  .geo .g-srcs a{min-height:44px;padding-block:11px}
  .geo .g-card h3 a{display:inline-block;padding-block:6px}
}
@media print{
  .geo .g-fold>summary,.geo .g-day-foot{display:none!important}
}
/* a fold directly under a heading, or holding a note: no gap of its own */
.geo .g-h3+.g-fold>.g-fold-body,.geo .g-fold-body>.note:first-child{margin-block-start:0}
@media (max-width:899px){.geo .g-h3+.g-fold{margin-block-start:0}}

/* ---------- page: 404 (src/pages/404.css) ---------- */
/* "Not found" page only (appended to dist/style.css by build.py): the head is the whole page, so it gets some air below. */
.p-404 .page-head{padding-block-end:clamp(72px,14vw,180px);border-block-end:0}

/* ---------- page: about (src/pages/about.css) ---------- */
/* About us (Georgia site only; appended to that site's style.css by build.py). */
/* the sentence that leads to the full register on the company site: under the two cards, with the button after it */
.p-about .gab-more{margin-block-start:32px}
.p-about .gab-more+.actions{margin-block-start:18px}

/* ---------- page: contact (src/pages/contact.css) ---------- */
/* Contact page only (appended to dist/style.css by build.py). */
.p-contact .split>.contact-ways{margin-block-start:0}
/* four routes: who is writing, the channel, what to tell us */
.p-contact .ledger-routes th:first-child{width:20%}
.p-contact .ledger-routes td:nth-child(2){width:45%}
.p-contact .ledger-routes td .textlink{display:flex;align-items:center;width:fit-content;margin-block-start:4px;font-size:var(--t-15)}
.p-contact .contact-note{margin-block-start:24px}
@media (max-width:759px){
  /* sentences, not short values: the column name above the sentence, not beside it */
  .p-contact .ledger-routes td:has(>.cell-lbl){display:block;padding-block:6px 2px}
  .p-contact .ledger-routes .cell-lbl{padding-block:0 2px}
}

/* ---------- page: credits (src/pages/credits.css) ---------- */
/* Photo credits page only (appended to dist/style.css by build.py). The rows are written by build.py (credits_table, credits_group). */
.p-credits .ledger-credits td{font-size:var(--t-15)}
.p-credits .ledger-credits th:first-child{width:30%}
.p-credits .ledger-credits td:last-child{width:17%}
.p-credits .ledger-credits-group td:nth-child(2){width:22%}
.p-credits .credits-page-note{margin-block-start:24px}

/* ---------- page: guides (src/pages/guides.css) ---------- */
/* Guides (appended to dist/style.css by build.py).
   .p-guides   the list, src/pages/guides.html
   .guide      the guide pages in src/pages/guides/ (each template sets "bodyclass: guide")
   Existing tokens only; logical properties only; no new colour, radius, shadow or gradient. */

/* ---------- the list: groups one under the other. A group that is not shown in this language leaves no gap ---------- */
.p-guides .guides-list{display:grid;gap:var(--block)}
.p-guides .guides-group .sub-h{margin-block-end:16px}
@media (min-width:760px){
  /* the date keeps to one line; the title takes what is left */
  .p-guides .rows .row{grid-template-columns:minmax(0,6fr) minmax(0,5fr) max-content}
}

/* ---------- a guide page ---------- */
/* the title of a guide is a sentence, not a name: one size down from the page titles, so that it keeps to two lines
   in English and Arabic and to one line in Chinese on a wide screen */
.guide .page-head h1{max-width:920px;font-size:var(--t-h2);line-height:var(--lh-head)}
/* the head is .head-over (src/style.css): from 760px the caption of the photograph stands beside the title */
@media (min-width:760px){.guide .page-head.head-over>.head-top h1{max-width:min(920px,66%)}}
.guide .article h2[id]{scroll-margin-top:24px}

/* "On this page": beside the text from 900px, where it stays in view while the text scrolls. Not shown on narrower
   screens, where it would stand between the opening sentence and the text. */
.guide .guide-toc{display:none}
@media (min-width:900px){
  .guide .guide-toc{display:block;position:sticky;inset-block-start:24px;padding-block:2px;padding-inline-start:20px;border-inline-start:1px solid var(--line)}
  .guide .guide-toc ol{margin-block-start:8px;list-style:none}
  .guide .guide-toc a{display:block;padding-block:6px;font-size:var(--t-15);line-height:var(--lh-ui);color:var(--sand-70);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:transparent;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
}
@media (hover:hover){.guide .guide-toc a:hover{color:var(--sand);text-decoration-color:var(--sand-70)}}

/* tables inside the text (.ledger: they stack on a phone). The first column names the row. */
.guide .guide-table{margin-block:24px 4px;font-size:var(--t-15)}
.guide .guide-table tbody th{font-size:var(--t-17);line-height:1.4}
.guide .guide-table .sub{margin-block-start:2px;line-height:1.5}
.guide .guide-table+p{margin-block-start:20px}
@media (min-width:760px){
  .guide .guide-table tbody th{width:30%}
  .guide .guide-table:not(.guide-table-2) td:nth-child(2){width:27%}
}

/* a list of names set apart from the sentence that introduces it (the 17 countries) */
.guide .guide-list{padding-inline-start:16px;border-inline-start:1px solid var(--line);color:var(--sand-70)}

/* sources: one link and one sentence each, a line between them */
.guide .article .guide-src{max-width:var(--measure-wide);padding-inline-start:0;border-block-start:1px solid var(--sand-70)}
.guide .guide-src>li{padding-block:12px;border-block-end:1px solid var(--line)}
.guide .guide-src>li::before{content:none}
.guide .guide-src>li+li{margin-block-start:0}
.guide .guide-src-n{display:block;margin-block-start:4px;font-size:var(--t-15);color:var(--sand-70)}
@media (pointer:coarse),(max-width:759px){
  .guide .guide-src a{display:inline-block;min-height:44px;padding-block:10px}
  .guide .guide-src>li{padding-block:6px 12px}
}

/* the programmes a guide applies to: a name and the months it runs */
@media (min-width:760px){
  .guide .guide-routes .row{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
.guide .guide-routes .note{margin-block-start:20px}

/* ---------- page: privacy (src/pages/privacy.css) ---------- */
/* Privacy notice only (appended to dist/style.css by build.py). */
/* on a phone the card that says who publishes the page and under which law comes before the text, not after it */
@media (max-width:899px){
  .p-privacy .split>.dl-card{order:-1}
}
/* "Hosting provider: To be added": the value follows its label after a space; a Chinese colon already carries its own */
.p-privacy .article p>.pending{margin-inline-start:.35em}
html[lang="zh"] .p-privacy .article p>.pending{margin-inline-start:0}

/* ---------- page: terms (src/pages/terms.css) ---------- */
/* Terms of use only (appended to dist/style.css by build.py). */
/* on a phone the card that says who publishes the page and under which law comes before the text, not after it */
@media (max-width:899px){
  .p-terms .split>.dl-card{order:-1}
}