@charset "utf-8";
/* ============================================================
   DESIGN MANIFESTO — petratourfromamman.com · Homepage concept 01
   CONCEPT: "THE SLIT" (as-Siq: seam and reveal)
   Petra is subtracted from rock, and you reach it through a 1.2 km fault
   3–12 m wide that ends by suddenly showing you the Treasury through a slit.
   The whole page is that walk: it starts between two dark walls (hero),
   the walls fade once into light (the single seam), and every photo on the
   site is seen through a tall narrow aperture that widens when you commit.
   PRINCIPLES
   1. Slit before picture: imagery is glimpsed, then revealed by intent
      (hover / selection / <details>), never by a carousel.
   2. Walls are colour fields, not cards: dark umber panels lock onto
      photos; text sits in the channel between them.
   3. Figures are architecture: huge Cormorant numerals carry the layout,
      mono carries the units. Price = magnitude, rating = the only valence.
   4. Minuses as loud as pluses: cons are set in the same size and weight
      as pros, always.
   TYPE SYSTEM (self-host as woff2)
   Display: Cormorant 400 / 500 / 600 + italic 400 / 500 / 600
            (H1 88/0.95, H2 56/1, big figures 120–160/0.85, tight -0.01em)
            The italic phrase inside every H1/H2 is the brand voice.
   Text:    Work Sans 400 / 500 / 600 (lede 20/1.45, body 16/1.55,
            labels 11/1 uppercase +0.14em)
   Mono:    JetBrains Mono 400 / 500 — measurements and unit labels only.
   PALETTE (roles)
   ink        #2A1B17   text on paper
   paper      #F6EFE6   page ground
   wall       #3B241F   deep rose-umber, dark ground (hero only) + seam
   wall-2     #57352C   secondary wall
   sand       #E8D9C8   quiet fill on paper
   stone-9am  #D9A08F   pink   } the hour-run of the sandstone: used for
   stone-noon #C8873F   ochre  } photo-slot fields and the itinerary axis
   stone-4pm  #A64B2A   blood-orange }
   money-CTA  #B5271F   red — booking buttons and real warnings ONLY
   attention  #C9962C   rating star fill (ends in warm neutral #8B7A72)
   link       #7A4A22
   tier-budget  #6F9A6A · tier-mid #B58E3A · tier-premium #7C6BA6
              (same L/C, hue run green → ochre → violet; luxury = violet)
   duration   #8B6355   constant, length carried by fill
   mute-paper #6E5B54 · mute-wall #D9C6BC (AA on their grounds)
   SIGNATURE ELEMENTS
   · The Slit — tall narrow aperture (photo or stone field) — recurring device
   · The Reveal — a slit widens on hover/selection (route switcher, guides)
   · Screenshot moment — hero: two umber walls, Treasury slit, "235 km"
   · Interactive block — "Tell us one thing about your day": six exclusive
     <details name="day"> — works with JS off
   · One seam — wall colour fading in alpha over paper, sandstone strata
     texture inside the seam only
   ============================================================ */

@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/cormorant-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/cormorant-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/cormorant-latin-500-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/cormorant-latin-600-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/work-sans-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/work-sans-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/work-sans-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Naskh';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/noto-naskh-arabic-arabic-400-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}

html,body{margin:0;background:#D9CFC3;}
*{box-sizing:border-box;}
a{color:#7A4A22;}a:hover{color:#2A1B17;}
details>summary{list-style:none;cursor:pointer;}
details>summary::-webkit-details-marker{display:none;}
th button{all:unset;cursor:pointer;font:inherit;color:inherit;}

/* ---- page shell -------------------------------------------------------- */
body{background:#F6EFE6;color:#2A1B17;font-family:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;}
.pt-page{width:100%;max-width:1280px;margin:0 auto;background:#F6EFE6;position:relative;
  overflow-x:clip;}   /* clip, not hidden: overflow:hidden on an ancestor kills position:sticky */
img{max-width:100%;}
:focus-visible{outline:2px solid #C9962C;outline-offset:2px;}
[lang="ar"]{font-family:'Cormorant','Naskh',serif;}
.pt-skip{position:absolute;left:-9999px;top:0;z-index:9;background:#F6EFE6;color:#2A1B17;padding:12px 16px;font:500 13px/1 'Work Sans';}
.pt-skip:focus{left:8px;top:8px;}

/* ---- the aperture: photo seen through the Siq, widened by intent -------- */
.pt-aperture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.pt-rphoto{opacity:0;}
.pt-wall-l,.pt-wall-r,.pt-band{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s;}
.pt-hero:has(#pt-r1:checked) .pt-rphoto-1,
.pt-hero:has(#pt-r2:checked) .pt-rphoto-2,
.pt-hero:has(#pt-r3:checked) .pt-rphoto-3{opacity:1;}
.pt-aperture:hover .pt-wall-l,.pt-aperture:focus-within .pt-wall-l{transform:translateX(-150px);}
.pt-aperture:hover .pt-wall-r,.pt-aperture:focus-within .pt-wall-r{transform:translateX(150px);}
.pt-aperture:hover .pt-band,.pt-aperture:focus-within .pt-band{opacity:0;}
.pt-credit{z-index:2;text-shadow:0 1px 3px rgba(42,27,23,.6);}

/* ---- route switcher: three radios, no JavaScript ----------------------- */
.pt-radios{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.pt-route{display:none;}
.pt-hero:has(#pt-r1:checked) .pt-route-1,
.pt-hero:has(#pt-r2:checked) .pt-route-2,
.pt-hero:has(#pt-r3:checked) .pt-route-3{display:block;}
.pt-tile{box-sizing:border-box;display:block;cursor:pointer;text-align:left;color:#F6EFE6;padding:22px 24px;background:#3B241F;transition:background .3s,box-shadow .3s;box-shadow:inset 0 -3px 0 transparent;}
.pt-tile:hover{background:#4A2C25;}
.pt-tileslit{width:10px;flex:none;background:linear-gradient(180deg,#D9A08F,#A64B2A);transition:width .35s cubic-bezier(.2,.7,.2,1);}
.pt-hero:has(#pt-r1:checked) .pt-tile-1,
.pt-hero:has(#pt-r2:checked) .pt-tile-2,
.pt-hero:has(#pt-r3:checked) .pt-tile-3{background:#57352C;box-shadow:inset 0 -3px 0 #D9A08F;}
.pt-hero:has(#pt-r1:checked) .pt-tile-1 .pt-tileslit,
.pt-hero:has(#pt-r2:checked) .pt-tile-2 .pt-tileslit,
.pt-hero:has(#pt-r3:checked) .pt-tile-3 .pt-tileslit{width:72px;}
.pt-radios input:focus-visible + *,.pt-tile:focus-within{outline:2px solid #C9962C;}
@supports not selector(:has(*)){
  .pt-route-1{display:block;}
  .pt-tile-1{background:#57352C;box-shadow:inset 0 -3px 0 #D9A08F;}
  .pt-tile-1 .pt-tileslit{width:72px;}
  .pt-rphoto-1{opacity:1;}
}

/* ---- the reveal: guide cards ------------------------------------------- */
.pt-reveal{isolation:isolate;}
/* at rest the card looks exactly as the designer drew it: the sand ground and the
   14px slit. the photograph is the reveal — it opens from that same slit. */
/* at rest the photograph is seen through the designer's own 14px slit — the bar
   sits underneath it and shows only if the frame fails to load. a zero-width clip
   was tried first and made Chrome skip the lazy load entirely. */
.pt-revealimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:inset(0 calc(50% - 7px) 0 calc(50% - 7px));
  transition:clip-path .45s cubic-bezier(.2,.7,.2,1);}
.pt-revealbar{transition:width .35s,margin-left .35s;}
a:hover .pt-revealimg,a:focus-visible .pt-revealimg,a:focus .pt-revealimg{clip-path:inset(0 0 0 0);}
/* nothing to hover with: touch devices get the photograph outright */
@media (hover:none){ .pt-revealimg{clip-path:inset(0 0 0 0);} }
.pt-ctaslit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:inset(0 60px 0 60px);}

/* ---- sortable table ---------------------------------------------------- */
.pt-arrow{display:inline-block;min-width:.7em;}
th button[data-sort]{position:relative;}
tbody tr{transition:background .2s;}
tbody tr:hover{background:#EFE6DA;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}


/* ======================================================================
   ROSE CITY DOSSIER LAYER
   Devices carried over from the live site and re-cut for this concept:
   the numbered kicker, the engraved rule, the four decorative grounds,
   the drawn route map, corner ribbons, unit chips, the sticky rail and
   the reading bar. Three hues come with them — the site already owned a
   cool counterpoint the concept never delivered.
     water  #2F6F75  Dead Sea / Nabataean channels — links, water facts
     olive  #6B7A4F  scrub and valley
     night  #2A2438  Petra by Night
   ====================================================================== */
:root{
  --ink:#2A1B17; --paper:#F6EFE6; --sand:#E8D9C8; --line:#D9CFC3; --line-2:#C9B9A8;
  --wall:#3B241F; --wall-2:#57352C; --mute:#6E5B54;
  --stone-9am:#D9A08F; --stone-noon:#C8873F; --stone-4pm:#A64B2A;
  --money:#B5271F; --attention:#C9962C;
  /* #2F6F75 read 4.16 on the sand panel (#E8D9C8) — under AA for body text.
     Two steps darker clears it at 4.59 and stays 5.56 on paper. Every
     unclassed link on a sand ground inherits this, so it is fixed here. */
  --water:#2C686E; --water-soft:#7FB0B4; --olive:#6B7A4F; --night:#2A2438;
}
html{scroll-behavior:smooth;scroll-padding-top:76px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
a{color:var(--water);}
a:hover{color:var(--ink);}

/* ---- numbered kicker + engraved rule (live site .kicker / .engrave) ---- */
.pt-kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone-4pm);}
.pt-kicker::before{content:attr(data-num);color:var(--attention);font-weight:500;}
.pt-kicker i{width:34px;height:1px;background:var(--line-2);display:inline-block;flex:none;}
.pt-engrave{height:3px;margin:24px 64px 64px;background:linear-gradient(90deg,transparent,var(--line-2) 15%,var(--line-2) 85%,transparent);position:relative;}
.pt-engrave::after{content:"";position:absolute;inset:0;top:2px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent);}

/* ---- decorative grounds (live site .deco-*) ------------------------- */
.pt-deco-waves{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23A64B2A' stroke-opacity='0.055' stroke-width='1'%3E%3Cpath d='M-10 46 Q37 20 75 46 T160 46'/%3E%3Cpath d='M-10 90 Q37 64 75 90 T160 90'/%3E%3Cpath d='M-10 134 Q37 108 75 134 T160 134'/%3E%3C/g%3E%3C/svg%3E");}
.pt-deco-strata{background-image:repeating-linear-gradient(0deg,rgba(166,75,42,.05) 0 1px,transparent 1px 26px);}
.pt-deco-dots{background-image:radial-gradient(rgba(166,75,42,.07) 1.3px,transparent 1.5px);background-size:24px 24px;}
.pt-deco-hatch{background-image:repeating-linear-gradient(45deg,rgba(166,75,42,.05) 0 1px,transparent 1px 16px);}

/* ---- chips and micro-links (live site .tag / mono link) ------------- */
.pt-tag{display:inline-flex;align-items:center;background:var(--sand);border:1px solid var(--line);
  color:var(--mute);padding:3px 9px;border-radius:999px;
  font:500 11px/1.4 'Work Sans',sans-serif;letter-spacing:.02em;margin-left:10px;vertical-align:2px;}
/* stone-4pm reads 4.15 on the sand panels at 11px — one step darker clears AA
   on every ground the micro-link actually appears on (5.3 on sand, 6.4 on paper) */
:root{--stone-4pm-ink:#8E3E22;}
.pt-micro{display:inline-block;margin-top:8px;text-decoration:none;
  font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone-4pm-ink);border-bottom:1px solid transparent;transition:border-color .2s,color .2s;}
.pt-micro:hover{color:var(--money);border-bottom-color:var(--money);}

/* ---- the fares table ------------------------------------------------ */
.pt-fares{width:100%;border-collapse:collapse;font:400 15px/1.4 'Work Sans',sans-serif;}
.pt-fares th{text-align:left;padding:0 20px 12px 0;border-bottom:1px solid var(--line);
  font:400 11px/1 'Work Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.pt-fares td{padding:20px 20px 20px 0;border-bottom:1px solid var(--line);vertical-align:middle;}
.pt-fares tbody tr{transition:background .2s;}
.pt-fares tbody tr:hover{background:rgba(232,217,200,.5);}
.pt-fname{font:500 24px/1.1 Cormorant,serif;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .2s;}
.pt-fname:hover{color:var(--ink);text-decoration-color:var(--stone-4pm);}
.pt-fnote{display:block;margin-top:4px;font:400 13px/1.4 'Work Sans',sans-serif;color:var(--mute);}
.pt-ffare{font:500 15px/1 'JetBrains Mono',ui-monospace,monospace;white-space:nowrap;}
.pt-ftime{font:400 13px/1 'JetBrains Mono',ui-monospace,monospace;white-space:nowrap;}
.pt-ffill{width:190px;}
.pt-bar{display:block;height:10px;background:var(--sand);}
.pt-bar::before{content:"";display:block;height:100%;width:var(--w);background:#8B6355;}
.pt-fares th button{all:unset;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;
  text-transform:inherit;display:inline-flex;gap:6px;align-items:center;}
.pt-fares th button:hover{color:var(--stone-4pm);}

/* ---- the drawn route map (live site .routemap) ---------------------- */
.pt-routemap{margin:0 0 40px;background:var(--wall);padding:28px 32px 22px;position:relative;
  box-shadow:0 26px 70px rgba(42,27,23,.22);}
.pt-routemap::before,.pt-routemap::after{content:"";position:absolute;width:16px;height:16px;
  border:1px solid var(--attention);opacity:.6;}
.pt-routemap::before{left:12px;top:12px;border-right:0;border-bottom:0;}
.pt-routemap::after{right:12px;bottom:12px;border-left:0;border-top:0;}
.pt-mapscroll{overflow-x:auto;}
.pt-routemap svg{width:100%;height:auto;display:block;}
.pt-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;
  font:400 12px/1.4 'Work Sans',sans-serif;color:#D9C6BC;}
.pt-legend span{display:inline-flex;align-items:center;gap:8px;}
.pt-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;}

/* ---- plus / minus: told apart by hue, not by position ---------------- */
/* olive-dark is the site's --olive taken two steps down so 11px labels clear
   AA on paper; the minus hue is stone-4pm, already in the concept's palette.
   Booking red is not used here — on this page red means "book" and nothing else. */
:root{--plus:#49673C;--minus:#A64B2A;}
.pt-pm{position:relative;padding:12px 14px 12px 16px;border-radius:2px;}
.pt-pm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:currentColor;opacity:.55;}
/* a wash so the two columns are told apart before a single word is read */
.pt-pm--plus{background:rgba(76,107,63,.07);}
.pt-pm--minus{background:rgba(166,75,42,.07);}
.pt-pm--plus{color:var(--plus);}
.pt-pm--minus{color:var(--minus);}
.pt-pm-label{color:inherit !important;font-weight:600 !important;}
.pt-pm ul{list-style:none;padding:0 !important;}
.pt-pm li{position:relative;padding-left:18px;color:var(--ink);}
.pt-pm li::before{position:absolute;left:0;top:0;width:13px;text-align:center;
  font:600 14px/1.5 'JetBrains Mono',ui-monospace,monospace;color:currentColor;}
.pt-pm--plus li::before{content:"+";}
.pt-pm--minus li::before{content:"\2212";}

/* ---- an itinerary points at the tour it ends with, and nothing more --- */
.pt-endswith{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px;transition:text-decoration-color .2s,color .2s;}
.pt-endswith:hover{color:var(--stone-4pm);text-decoration-color:var(--stone-4pm);}

/* ---- the key-decision heading is a link to that trip length ---------- */
.pt-dayname{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:5px;transition:text-decoration-color .2s;}
.pt-dayname:hover{color:var(--ink);text-decoration-color:var(--stone-4pm);}
.pt-daymore{display:inline-block;margin-top:18px;}

/* ---- corner ribbon (live site .transport-card__tag) ----------------- */
.pt-kcard{position:relative;}
.pt-ribbon{position:absolute;top:-11px;right:0;
  font:600 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:var(--wall);color:var(--paper);}
.pt-ribbon--money{background:var(--money);}
.pt-ribbon--attention{background:var(--attention);color:var(--ink);}

/* ---- sticky rail + reading bar (live site .rail / .progress) -------- */
.pt-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none;}
.pt-progress span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--attention),var(--money));transition:width .1s linear;}
.pt-rail{position:sticky;top:0;z-index:50;background:rgba(246,239,230,.94);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.3) blur(9px);}
.pt-rail__scroll{display:flex;gap:6px;overflow-x:auto;padding:10px 64px;
  justify-content:safe center;   /* safe: still scrolls to the first pill when it overflows */
  scrollbar-width:none;-ms-overflow-style:none;}
.pt-rail__scroll::-webkit-scrollbar{display:none;}
.pt-rail__scroll a{flex:none;text-decoration:none;white-space:nowrap;border-radius:999px;
  padding:8px 14px;color:var(--mute);
  font:500 12px/1 'Work Sans',sans-serif;transition:background .2s,color .2s;}
.pt-rail__scroll a:hover{background:var(--sand);color:var(--ink);}
.pt-rail__scroll a[aria-current="true"]{background:var(--wall);color:var(--paper);}

@media (max-width:1023px){.pt-engrave{margin:16px 20px 40px;}
.pt-rail__scroll{padding:10px 20px;}
.pt-routemap{padding:18px 16px 14px;}
  /* the drawn map does not shrink usefully — let it scroll instead of going unreadable */
.pt-routemap svg{min-width:860px;}
.pt-mapscroll{-webkit-overflow-scrolling:touch;}
.pt-tablewrap table.pt-fares{min-width:0;}
  /* three columns will not fit 350px without shredding the note, so the rows
     stack and the header becomes a sort bar — sorting stays on every column */
.pt-fares, .pt-fares tbody, .pt-fares tr, .pt-fares td{display:block;width:auto;}
.pt-fares thead{display:block;}
.pt-fares thead tr{display:flex;gap:6px;align-items:center;
    border-bottom:1px solid var(--line);padding-bottom:10px;}
.pt-fares thead th{border:0;padding:0;}
.pt-fares thead th:nth-child(4){display:none;}
.pt-fares thead th button{border:1px solid var(--line);border-radius:999px;padding:7px 12px;}
.pt-fares tbody tr{border-bottom:1px solid var(--line);padding:16px 0;}
.pt-fares td{border:0;padding:0;}
.pt-ffare{display:inline-block;margin-top:10px;}
.pt-ftime{display:inline-block;margin:10px 0 0 16px;color:var(--mute);}
.pt-ffill{width:auto;margin-top:8px;}   /* the duration bar earns its place on a stacked row */
}


/* ======================================================================
   MOBILE — built from the designer's second artboard: the hero is rebuilt
   (kicker -> h1 -> lede -> photo -> figures -> switcher), the comparison
   table scrolls sideways instead of being squeezed, grids go single column.
   ====================================================================== */
@media (max-width:1023px){.pt-page header, .pt-page section[data-screen-label], .pt-page footer{padding-left:20px !important;padding-right:20px !important;}
.pt-page section[data-screen-label]{padding-bottom:64px !important;}
  /* only the header's primary nav folds away on a phone. Written as a bare
     `nav` this hid the on-this-page rail too — the quick navigation that is
     supposed to be centred and reachable at every width. */
.pt-page header nav{display:none !important;}
.pt-page h1{font-size:46px !important;}
.pt-page h2{font-size:34px !important;}

  /* --- hero rebuilt: kicker, h1, lede, photo, figures, card, switcher -- */
.pt-page header > div{height:auto !important;flex-wrap:wrap;gap:12px;padding:14px 0;}
.pt-herogrid{display:flex !important;flex-direction:column;gap:0 !important;}
.pt-herotext{display:contents;}
.pt-herotext > *{order:1;}                    /* kicker, h1, lede */
.pt-herotext > *:nth-child(n+4){order:3;}     /* figures, buttons, honest line */
.pt-heroslot{order:2;height:auto !important;margin:26px 0 0;}
.pt-heroslot > .pt-aperture{position:relative !important;height:320px;}
.pt-herocard{position:relative !important;right:auto !important;bottom:auto !important;
    width:auto !important;margin-top:16px;box-shadow:none !important;}
.pt-dock{grid-template-columns:1fr !important;margin-top:28px !important;}
.pt-tile{padding:16px !important;}

  /* --- everything else ---------------------------------------------- */
.pt-grid2, .pt-grid3{grid-template-columns:1fr !important;gap:32px !important;}
.pt-fare{grid-template-columns:1fr auto !important;gap:4px 14px !important;}
.pt-fare > :first-child{grid-column:1 / -1;}
  /* header rows that pin a heading against a note must wrap, not squeeze */
.pt-page [class] > h2 + p, .pt-page [class] > h2 + span{max-width:none !important;text-align:left !important;}
.pt-headrow{flex-wrap:wrap !important;gap:12px !important;align-items:flex-start !important;}
.pt-guides, .pt-seasons{grid-template-columns:1fr 1fr !important;}
.pt-faqgrid{grid-template-columns:1fr !important;gap:0 !important;}
.pt-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pt-tablewrap table{min-width:880px;}
.pt-page [style*="position:sticky"], .pt-sticky{position:static !important;}
}
@media (max-width:560px){.pt-guides, .pt-seasons{grid-template-columns:1fr !important;}
.pt-page h1{font-size:40px !important;}
}

/* ---- language switcher (shared by every page type) --------------------- */
.h7-lang{position:relative;}
.h7-lang summary{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 8px;
  border:1px solid rgba(246,239,230,.3);background:rgba(42,27,23,.3);backdrop-filter:blur(6px);
  font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#F6EFE6;
  cursor:pointer;list-style:none;transition:border-color .2s,background .2s;}
.h7-lang summary::after{content:none !important;}
.h7-lang summary::-webkit-details-marker{display:none;}
.h7-lang summary:hover,.h7-lang[open] summary{border-color:rgba(246,239,230,.7);
  background:rgba(42,27,23,.55);}
.h7-langcode{font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.08em;}
.h7-caret{width:7px;height:7px;border-right:1px solid #D9C6BC;border-bottom:1px solid #D9C6BC;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s;}
.h7-lang[open] .h7-caret{transform:translateY(1px) rotate(-135deg);}
.h7-flag{display:inline-flex;flex:none;width:22px;height:15px;overflow:hidden;border-radius:2px;
  box-shadow:0 0 0 1px rgba(42,27,23,.25);}
.h7-flag svg{width:100%;height:100%;display:block;}
/* a closed <details> hides its children through the UA's slot, and a display
   declaration on the child overrides that — the menu had been hanging open on
   every page load, on the homepage too. Say it explicitly. */
.h7-lang:not([open]) .h7-langmenu{display:none;}
.h7-langmenu{position:absolute;right:0;top:100%;margin-top:8px;min-width:200px;padding:6px;
  background:#F6EFE6;color:#2A1B17;display:grid;box-shadow:0 24px 48px rgba(42,27,23,.35);
  z-index:60;}
.h7-langmenu::before{content:"";position:absolute;right:16px;top:-5px;width:10px;height:10px;
  background:#F6EFE6;transform:rotate(45deg);}
.h7-langmenu a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:10px 12px;font:400 14px/1 'Work Sans',sans-serif;color:#2A1B17;text-decoration:none;
  transition:background .15s;}
.h7-langmenu a:hover{background:#E8D9C8;}
.h7-langmenu a small{font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#6E5B54;}
.h7-langmenu a[aria-current="true"]{color:#A64B2A;background:#EFE6DA;}
.h7-langmenu a[aria-current="true"] small{color:#A64B2A;}

/* ---- consent banner (injected by site.js; absent without JavaScript) ---- */
.pt-cc{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--wall);
  color:#F6EFE6;border-top:3px solid var(--stone-noon);
  transform:translateY(100%);transition:transform .32s ease;}
.pt-cc.is-up{transform:translateY(0);}
.pt-cc-in{max-width:1152px;margin:0 auto;padding:18px max(20px,calc(50% - 576px));
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.pt-cc-t{margin:0;flex:1 1 320px;font:400 14px/1.5 'Work Sans',system-ui,sans-serif;color:#EFE3D6;}
.pt-cc-t a{color:#F0C98A;text-decoration:underline;text-underline-offset:2px;}
.pt-cc-t a:hover{color:#fff;}
.pt-cc-b{display:flex;gap:10px;flex:none;}
.pt-cc button{font:500 13px/1 'Work Sans',system-ui,sans-serif;padding:12px 18px;
  border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s;}
/* the Decline button is an outline, so its border IS the button: at #8A6C5F it
   measured 3.01 against the wall — non-text AA to two decimal places, which is
   not a margin. #9E7E70 reads 3.89 and keeps Decline as visible as Allow. */
.pt-cc-no{background:none;color:#EFE3D6;border-color:#9E7E70;}
.pt-cc-no:hover{background:rgba(255,255,255,.09);color:#fff;}
.pt-cc-yes{background:var(--stone-noon);color:#241510;}
.pt-cc-yes:hover{background:#D89B4A;}
/* :root, not a bare class — the phone rule for .pt-mbar lives in home.css,
   which loads after this sheet and would otherwise win on source order. */
:root .pt-mbar{bottom:var(--cc-h,0);transition:bottom .32s ease;}
@media (prefers-reduced-motion:reduce){.pt-cc,.pt-mbar{transition:none;}}
@media (max-width:640px){.pt-cc-in{padding:16px 20px;gap:14px;}
.pt-cc-b{width:100%;}
.pt-cc button{flex:1;padding:13px 10px;}
}

/* ---- back to top ------------------------------------------------------- */
.pt-top{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:56;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--wall);color:var(--paper);text-decoration:none;
  border:1px solid var(--wall-2);box-shadow:0 6px 20px rgba(42,27,23,.28);
  font:400 20px/1 'Work Sans',system-ui,sans-serif;
  transition:opacity .2s ease,transform .2s ease;}
.pt-top:hover,.pt-top:focus-visible{background:var(--wall-2);}
.pt-top:focus-visible{outline:2px solid var(--stone-noon);outline-offset:3px;}
/* the phone book bar owns the bottom of the screen on the pages that have one */
@media (max-width:1023px){body:has(.pt-mbar) .pt-top{
    bottom:calc(84px + env(safe-area-inset-bottom));}}
/* the consent banner is a question, and it is full-width and one click from
   gone. While it is up the control steps out of the way rather than floating
   over it or hiding behind it by accident, which is what a lower z-index alone
   would have done. */
body:has(.pt-cc.is-up) .pt-top{opacity:0;pointer-events:none;}
/* with the script running it appears only once there is something to go back
   up to; without the script the rule below never applies and it simply stays */
.pt-top--auto{opacity:0;transform:translateY(8px);pointer-events:none;}
.pt-top--auto.is-up{opacity:1;transform:none;pointer-events:auto;}
@media (prefers-reduced-motion:reduce){.pt-top{transition:none;}
  .pt-top--auto{transform:none;}}
@media print{.pt-top{display:none;}}

/* ---- the footer -------------------------------------------------------- */
/* The page shell insets `.pt-page > footer` — 64px on a desktop, 20px on a
   phone — from when the footer was page content with its own padding. Its inset
   belongs to `__in` now, which centres on the same 1152px column as everything
   else; leaving both gave the homepage 40px and every other page 20px. The
   !important matches the rule it is undoing, which carries one of its own. */
/* The on-this-page rail is sticky at z-index 50, and it stayed pinned over the
   footer once the page had scrolled past its last section — an index of a page
   the reader has finished, sitting on top of where to go next. Raising the
   footer one step lets the rail slide under it, which is what a sticky index
   should do when its page ends. Still below the phone book bar (55), the
   back-to-top control (56) and the consent banner (80): those three outrank a
   footer on purpose. */
.pt-foot{background:var(--paper);border-top:1px solid var(--line);
  margin-top:64px;color:var(--ink);position:relative;z-index:51;}
/* two classes, because the rule being undone is `.pt-page > footer` — a class
   and an element — and !important on both sides is decided by specificity, not
   by which file was written last */
.pt-page .pt-foot{padding-left:0 !important;padding-right:0 !important;}
.pt-foot__in{max-width:1152px;margin:0 auto;padding:56px max(20px,calc(50% - 576px)) 40px;}
/* The column headings are h2 — they are the sections of a navigation block and
   a screen reader should be able to move between them. Every page type has a
   mobile rule that sizes its own h2s (`.guide h2` 32px, `.pt-page h2` 34px,
   both !important), written when the only h2s on a page were its content's.
   Two classes outrank a class and an element, so the footer's headings keep the
   size they were drawn at whichever page type they land on. */
.pt-foot .pt-foot__h{margin:0 0 16px;font:500 11px/1 'Work Sans',system-ui,sans-serif !important;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute);}
/* the searches, as chips: a row of underlined links reads as prose the reader
   has to parse, and these are not prose — they are twelve separate doors */
.pt-foot__pills{display:flex;flex-wrap:wrap;gap:8px;}
.pt-foot__pill{display:inline-block;padding:7px 14px;border:1px solid var(--line-2);
  border-radius:999px;text-decoration:none;color:var(--wall-2);
  font:400 13px/1.2 'Work Sans',system-ui,sans-serif;transition:background .18s,border-color .18s;}
.pt-foot__pill:hover,.pt-foot__pill:focus-visible{background:var(--sand);border-color:var(--wall-2);}
.pt-foot__searches{padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--line);}
.pt-foot__grid{display:grid;gap:40px;
  grid-template-columns:minmax(260px,1.6fr) repeat(3,minmax(140px,1fr));}
.pt-foot__mark{display:flex;align-items:center;gap:10px;
  font:400 22px/1 Cormorant,Georgia,serif;}
.pt-foot__say{margin:16px 0 0;max-width:42ch;
  font:400 14px/1.6 'Work Sans',system-ui,sans-serif;color:var(--mute);}
.pt-foot__langs{margin-top:20px;font:400 13px/1 'Work Sans',system-ui,sans-serif;color:var(--mute);}
.pt-foot__langs a{color:var(--water);}
.pt-foot__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.pt-foot__list a,.pt-foot__list span[aria-current]{
  font:400 14px/1.45 'Work Sans',system-ui,sans-serif;color:var(--wall-2);text-decoration:none;}
.pt-foot__list a:hover,.pt-foot__list a:focus-visible{color:var(--stone-4pm);text-decoration:underline;}
.pt-foot__list span[aria-current]{color:var(--mute);}
/* The legal row keeps its class — gates.py counts exactly one per page, and the
   reason it exists has not changed. What changes is that it is a column here, so
   the row's own flex, its rule above it and its underlines are undone. The
   selectors are deliberately more specific than legal.py's, which is loaded
   after this file and would otherwise win on source order alone. */
.pt-foot .pt-legal{display:block;margin:0;padding:0;border-top:0;}
.pt-foot .pt-legal a{border-bottom:0;color:var(--wall-2);}
.pt-foot .pt-legal a:hover,.pt-foot .pt-legal a:focus-visible{
  color:var(--stone-4pm);border-bottom:0;text-decoration:underline;}
.pt-foot .pt-legal [aria-current="page"]{color:var(--mute);border-bottom:0;}
.pt-foot__end{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:400 13px/1.5 'Work Sans',system-ui,sans-serif;color:var(--mute);}
.pt-foot__line{font:italic 400 15px/1.4 Cormorant,Georgia,serif;color:var(--stone-4pm);}
@media (max-width:900px){.pt-foot__grid{grid-template-columns:1fr 1fr;gap:32px;}
.pt-foot__brand{grid-column:1 / -1;}
}
/* On a phone this footer was 1,875px — two and a third screens of scrolling
   past the end of the page. Two things made it that tall, and neither needed
   anything hidden to fix.

   The chips: eighteen long keyword phrases, one or two to a line, wrapping to
   thirteen rows and 614px. They become one row that scrolls sideways — the same
   gesture the on-this-page rail above already uses, so it is a pattern this site
   has taught rather than a new one. Nothing is dropped and nothing is
   display:none, so every link stays where a crawler and a keyboard both find it.
   The row bleeds to the screen edges, because a scroller that stops inside the
   page's padding looks like it has ended when it has not.

   The columns: three of them stacked was 847px of single-file links. Two up
   halves it, and the brand block keeps the full width for its disclosure. */
@media (max-width:700px){.pt-foot__in{padding-top:36px;padding-bottom:28px;}
.pt-foot__searches{padding-bottom:28px;margin-bottom:28px;}
.pt-foot__pills{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    margin-inline:-20px;padding:0 20px 4px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* only the alpha of this gradient is read, so the colour is immaterial —
       `currentColor` says so, and keeps a hex nobody can see out of the frozen
       palette, which the deploy gate rightly refused */
    mask-image:linear-gradient(90deg,currentColor calc(100% - 32px),transparent);}
.pt-foot__pills::-webkit-scrollbar{display:none;}
.pt-foot__pill{white-space:nowrap;flex:none;scroll-snap-align:start;}
.pt-foot__grid{grid-template-columns:1fr 1fr;gap:28px 20px;}
.pt-foot__say{margin-top:12px;}
.pt-foot__langs{margin-top:16px;}
.pt-foot__end{margin-top:32px;padding-top:20px;}
}

/* ---- the sticky Book bar (phones; the header keeps its own button above) -- */
.pt-mbar{display:none;}
@media (max-width:1023px){.pt-mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(246,239,230,.96);backdrop-filter:blur(10px);
    border-top:1px solid #D9CFC3;color:#2A1B17;}
.pt-mbar strong{display:block;font:500 17px/1 'JetBrains Mono',ui-monospace,monospace;}
.pt-mbar > div > span{display:block;margin-top:4px;
    font:400 12px/1.3 'Work Sans',system-ui,sans-serif;color:#6E5B54;}
  /* the designer's #C9962C measured 2.31 on the bar's near-paper ground — under
     even the 3.0 asked of a decorative mark. #8A5F0D reads 4.90 and clears AA
     as text, which is what a 12px glyph beside a rating ought to do anyway. */
.pt-mbar-star{display:inline;color:#8A5F0D;}
.pt-mbar > a{background:#B5271F;color:#fff;text-decoration:none;
    font:600 14px/1 'Work Sans',system-ui,sans-serif;padding:0 20px;min-height:46px;
    display:inline-flex;align-items:center;flex:none;}
.pt-mbar > a:hover{background:#951F19;color:#fff;}
  /* the bar floats over the end of the page, so the page has to end above it */
body{padding-bottom:76px;}
}

/* ---- the site-information row, in every footer -------------------------- */
.pt-legal{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
  margin:28px 0 0;padding:20px 0 0;border-top:1px solid #D9CFC3;
  font:400 13px/1.5 'Work Sans',system-ui,sans-serif;color:#6E5B54;}
.pt-legal a{color:#6E5B54;text-decoration:none;border-bottom:1px solid #D9CFC3;
  transition:color .2s,border-color .2s;}
.pt-legal a:hover{color:#2A1B17;border-bottom-color:#A64B2A;}
/* the page you are already on: named, not a link back to itself */
.pt-legal [aria-current="page"]{color:#2A1B17;border-bottom:1px solid transparent;}
@media (max-width:1023px){.pt-legal{gap:8px 18px;margin-top:22px;}
}

/* ---- the closing block (guide index, container listing) ----------------- */
.pt-close{padding:64px var(--ggx) 88px;background:#F6EFE6;}
.pt-closebox{padding:40px 44px;background:#3B241F;color:#F6EFE6;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;}
.pt-closebox p{margin:0;max-width:52ch;
  font:400 17px/1.6 'Work Sans',system-ui,sans-serif;color:#E8D9C8;}
.pt-closebox em{font-style:italic;color:#D9A08F;}
.pt-cta{flex:none;background:#B5271F;color:#fff;text-decoration:none;padding:16px 26px;
  font:600 15px/1 'Work Sans',system-ui,sans-serif;transition:background .2s;}
.pt-cta:hover{background:#951F19;color:#fff;}
@media (max-width:1023px){.pt-close{padding:44px var(--ggx) 72px;}
.pt-closebox{padding:28px 24px;}
}

/* a tour whose own page is not written yet keeps its name and loses its link;
   emit_deploy does the unlinking once it knows what the build actually serves */
.pt-nolink{color:inherit;text-decoration:none;}
/* a GetYourGuide listing quoted verbatim inside a cost note */
.tk-said{font-style:italic;quotes:'\201C' '\201D';}
/* ---- the review block: a quote, and our own line under it --------------- */
.pt-q-us{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line-2);
  font:400 14px/1.5 'Work Sans',system-ui,sans-serif;color:var(--ink);
  display:flex;gap:10px;align-items:baseline;}
/* not var(--minus): #A64B2A measured 4.15 on the sand panel the first quote
   sits on, and this label is 10px. #8E3E22 — the shade the build already uses
   for small ochre text — reads 5.31 there and 6.43 on paper. */
.pt-q-us > span{flex:none;font:500 10px/1.6 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:#8E3E22;}
.pt-q-star{color:#8A5F0D;letter-spacing:1px;}
.pt-q-note{grid-column:1/-1;margin:32px 0 0;max-width:70ch;
  font:400 14px/1.6 'Work Sans',system-ui,sans-serif;color:var(--mute);}
.pt-q-note em{font-style:italic;color:var(--ink);}
.pt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;}
@media (max-width:1023px){.pt-q-us{font-size:13px;}
.pt-q-note{margin-top:24px;font-size:13px;}
}

/* ---- what a price does about the Petra ticket, under the price ---------- */
.tk{display:block;margin-top:5px;white-space:normal;
  font:400 11px/1.35 'Work Sans',system-ui,sans-serif;letter-spacing:0;}
.tk-in{color:#49673C;}      /* in the price */
.tk-opt{color:#8E3E22;}     /* an add-on you have to tick */
.tk-out{color:#6E5B54;}     /* paid at the gate */
.tk-ask{color:#8E3E22;}     /* unclear, or the listing does not say */
@media (max-width:1023px){.pt-page .tk{font-size:12px;} }

/* ---- the timeline: a stop's width is its minutes ----------------------- */
.tl{display:flex;align-items:stretch;gap:3px;margin-top:22px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;}
.tl::-webkit-scrollbar{display:none;}
.tl-stop{min-width:150px;display:flex;flex-direction:column;}

/* ---- the climate chart, twelve months from facts.json ------------------ */
.pt-climate{margin:0 0 24px;padding:32px 36px 28px;border:1px solid #D9CFC3;background:#F6EFE6;}
.pt-climate-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.pt-climate-h{margin:0;font:400 34px/1 Cormorant,serif;letter-spacing:-.01em;}
.pt-climate-h em{font-style:italic;font-weight:500;}
.pt-climate-unit{font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#6E5B54;}
.pt-months{list-style:none;margin:28px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(12,1fr);gap:12px;align-items:stretch;height:240px;}
.pt-mo{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;height:100%;gap:8px;
  min-width:0;}
.pt-mo-t{font:500 12px/1 'JetBrains Mono',monospace;color:#6E5B54;align-self:end;}
.pt-mo-bar{display:block;width:min(100%,28px);height:var(--h);min-height:6px;align-self:end;}
.pt-mo--best .pt-mo-bar{background:linear-gradient(180deg,#D9A08F 0%,#C8873F 55%,#A64B2A 100%);}
.pt-mo:not(.pt-mo--best) .pt-mo-bar{background:linear-gradient(180deg,#C9B7AA,#8B7A72);}
.pt-mo-l{font:500 10px/1 'Work Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#6E5B54;}
.pt-mo--best .pt-mo-l,.pt-mo--best .pt-mo-t{color:#A64B2A;}
.pt-climate-note{margin:20px 0 0;display:flex;gap:10px;align-items:center;
  font:400 12px/1.5 'Work Sans',sans-serif;color:#6E5B54;}
.pt-climate-key{width:14px;height:14px;flex:none;background:linear-gradient(180deg,#D9A08F,#A64B2A);}

@media (max-width:1023px){
  /* the timeline stacks: a horizontal band of ten stops on a phone is a smear */
.pt-page .tl{flex-direction:column;gap:10px;overflow-x:visible;}
.pt-page .tl-stop{min-width:0 !important;min-height:0 !important;flex:none !important;}
.pt-page .tl-stop > :first-child{height:6px !important;}
.pt-climate{padding:20px 16px;}
.pt-climate-h{font-size:26px;}
  /* twelve bars at 390px: the 12px gap alone is 132px of a 350px column, and
     the bar's own min-width then pushes the chart past the viewport */
  /* the page sheet loads after this one and carries the designer's own gap at
     equal specificity, so the phone value has to insist */
.pt-months{gap:2px !important;height:180px;}
.pt-months > *{min-width:0;}
.pt-months > span{font-size:9px;letter-spacing:0;text-align:center;overflow:hidden;}
.pt-mo-bar{width:100%;}
.pt-mo{gap:4px;}
.pt-mo-t{font-size:11px;}
.pt-mo-l{font-size:9px;letter-spacing:.04em;}
}