/* Journeys, on the same broadsheet system as the journal and driven by the
   same custom properties, so the Look screen moves both. */

.al-journeys,
.al-journey{
  /* Same rule as the journal: the theme owns the colour. */
  --ink:var(--al-ink,#1A120B);
  --soft:var(--clay,#6B4A32);
  --faint:color-mix(in srgb, var(--clay,#6B4A32) 68%, var(--cream,#F7F0E3));
  --brand:var(--terracotta,#B4522E);
  --deep:var(--terracotta-deep,#9E4526);
  --rule:rgba(26,18,11,.18);
  --hair:rgba(26,18,11,.1);
  --paper:var(--cream,#F7F0E3);
  --raised:var(--sand,#E7D8BE);
  --face:var(--display,"Marcellus",Georgia,serif);
  --sans-face:var(--body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  --base:var(--al-base,18px);
  --scale:var(--al-scale,1);
  background:var(--paper);color:var(--ink);font-family:var(--sans-face);font-size:var(--base);line-height:1.7;
}
.al-journeys *,.al-journey *{box-sizing:border-box}
.al-journeys img,.al-journey img{display:block;max-width:100%}
.al-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.al-head{padding:46px 0 0}
.al-head h1{margin:0;font-family:var(--face);font-weight:600;
  font-size:calc(clamp(38px,5.4vw,62px) * var(--scale));line-height:1.02;letter-spacing:-.02em}
.al-head .al-sub{margin:14px 0 0;color:var(--soft);font-size:calc(18px * var(--scale));
  max-width:56ch;line-height:1.6}

/* ---------- the bar across the top ---------- */

.al-journeys .al-bar{margin:26px 0 0;padding:16px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 20px}
.al-journeys .al-bar-count{margin:0;font:700 12px/1 var(--sans-face);letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft)}
.al-journeys .al-bar-picks{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto}
.al-journeys .al-pick{display:flex;align-items:center;gap:10px;min-width:0;
  border:1px solid var(--rule);border-radius:999px;padding:0 6px 0 16px;background:transparent}
.al-journeys .al-pick > span{font:700 10.5px/1 var(--sans-face);letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft);white-space:nowrap}
.al-journeys .al-pick select{appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font:600 15px/1 var(--sans-face);color:var(--ink);min-height:46px;padding:0 30px 0 2px;cursor:pointer;
  max-width:46vw;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) center,calc(100% - 10px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.al-journeys .al-pick:focus-within{border-color:var(--brand)}
.al-journeys .al-bar-go{min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--brand);
  background:var(--brand);color:var(--paper);font:700 14px/1 var(--sans-face);cursor:pointer}
.al-journeys .al-bar-clear{font:600 13px/1 var(--sans-face);color:var(--deep);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px}

@media(max-width:760px){
  .al-journeys .al-bar{gap:10px}
  .al-journeys .al-bar-picks{margin-left:0;width:100%;gap:8px}
  .al-journeys .al-pick{flex:1 1 100%;justify-content:space-between;padding-left:14px}
  .al-journeys .al-pick select{max-width:none;flex:1;text-align:right;padding-right:26px}
}

/* ---------- the cards ---------- */

/* One grid, equal rows, every card ending on the same line. The theme
   already builds a card as a column with its facts pushed to the bottom,
   so this only has to give the grid room and keep the pictures the same
   shape. */
.al-journeys .grid,
.al-journey .grid{display:grid;gap:clamp(28px,4vw,44px) clamp(20px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  align-items:stretch;margin:34px 0 0}

.al-journeys .card,
.al-journey .grid .card{display:flex;flex-direction:column;gap:10px;text-decoration:none;
  color:inherit;min-width:0;height:100%;background:transparent;border:0;padding:0}
.al-journeys .card .media,
.al-journey .grid .card .media{margin:0 0 6px;aspect-ratio:3/2;background:var(--raised)}
.al-journeys .card img,
.al-journey .grid .card img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.al-journeys .card:hover img,
.al-journey .grid .card:hover img{transform:scale(1.04)}
.al-journeys .card-meta,
.al-journey .grid .card-meta{margin:0;font:700 10.5px/1 var(--sans-face);letter-spacing:.2em;
  text-transform:uppercase;color:var(--deep)}
.al-journeys .card h3,
.al-journey .grid .card h3{margin:0;font-family:var(--face);font-weight:400;
  font-size:calc(clamp(21px,2.4vw,26px) * var(--scale));line-height:1.14;color:var(--ink)}
.al-journeys .card:hover h3,
.al-journey .grid .card:hover h3{color:var(--deep)}
.al-journeys .card-excerpt,
.al-journey .grid .card-excerpt{margin:0;font-size:calc(15.5px * var(--scale));line-height:1.55;
  color:var(--soft)}
.al-journeys .card-facts,
.al-journey .grid .card-facts{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font:700 11.5px/1.4 var(--sans-face);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.al-journeys .card-price,
.al-journey .grid .card-price{margin-left:auto;color:var(--ink)}

/* The tag sits on its own, not stretched across the card, because a card
   is a column and a column stretches its children by default. */
.al-journeys .card .tag,
.al-journey .grid .card .tag{align-self:flex-start;border-radius:999px;padding:7px 12px;
  font-size:10px;letter-spacing:.18em;font-weight:700}

@media(max-width:560px){
  .al-journeys .grid,.al-journey .grid{grid-template-columns:1fr;gap:34px}
  .al-journeys .card .media,.al-journey .grid .card .media{aspect-ratio:16/10}
}
@media(prefers-reduced-motion:reduce){
  .al-journeys .card img,.al-journey .grid .card img{transition:none}
  .al-journeys .card:hover img,.al-journey .grid .card:hover img{transform:none}
}

/* ---------- the single journey ---------- */

.al-journey-hero{margin:0}
.al-journey-hero img{width:100%;height:clamp(260px,42vw,560px);object-fit:cover}
.al-journey-top{padding:40px 0 0;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
@media(max-width:980px){.al-journey-top{grid-template-columns:1fr;gap:26px}}
.al-eyebrow{margin:0 0 12px;font:600 12px/1 var(--sans-face);letter-spacing:.3em;text-transform:uppercase;color:var(--deep)}
.al-eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(0,123,192,.4)}
.al-journey h1{margin:0;font-family:var(--face);font-weight:600;
  font-size:calc(clamp(36px,5vw,60px) * var(--scale));line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.al-journey .al-lede{margin:18px 0 0;font-size:calc(20px * var(--scale));line-height:1.55;color:var(--soft);
  max-width:46ch}
.al-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:28px 0 0;
  border-top:1px solid var(--rule)}
.al-facts .fact{padding:14px 0;border-bottom:1px solid var(--hair);padding-right:20px}
.al-facts dt{margin:0 0 4px;font:700 10.5px/1 var(--sans-face);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.al-facts dd{margin:0;font-size:16.5px;font-weight:600}

/* the panel that sells */
.al-book{border:1px solid var(--rule);border-top:3px solid var(--brand);padding:24px 22px 26px;
  position:sticky;top:20px}
.al-book .price{margin:0 0 4px;font-family:var(--face);font-weight:600;
  font-size:calc(38px * var(--scale));line-height:1;color:var(--ink)}
.al-book .price small{display:block;font-family:var(--sans-face);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.al-book dl{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hair);display:grid;gap:10px}
.al-book dl div{display:flex;justify-content:space-between;gap:14px;font-size:15px}
.al-book dt{font:700 10.5px/1.6 var(--sans-face);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.al-book dd{margin:0;font-weight:600;text-align:right}
.al-book .al-dates{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hair)}
.al-book .al-dates p{margin:0 0 8px;font:700 10.5px/1 var(--sans-face);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.al-book .al-dates ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.al-book .al-dates li{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.al-book .al-dates li span{color:var(--faint);font-size:13px}
.al-btn{display:flex;align-items:center;justify-content:center;min-height:54px;margin-top:18px;
  background:var(--brand);color:#fff;border:1px solid var(--brand);text-decoration:none;
  font:800 16px/1 var(--sans-face);letter-spacing:.01em}
.al-btn:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.al-btn.ghost{background:none;color:var(--ink);border-color:var(--rule);font-weight:700;min-height:48px;margin-top:10px}
.al-btn.ghost:hover{background:var(--raised);color:var(--ink)}

/* ---------- sections down the page ---------- */

.al-journey-body{padding:40px 0 0;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
@media(max-width:980px){.al-journey-body{grid-template-columns:1fr}}
.al-journey-main{min-width:0;max-width:66ch}
.al-journey-main > * + *{margin-top:40px}
.al-journey-main p{margin:0 0 20px}
.al-section-head{margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.al-section-head h2{margin:0;font-family:var(--face);font-weight:600;
  font-size:calc(clamp(26px,3.2vw,34px) * var(--scale));line-height:1.12}
.al-highlights{list-style:none;margin:0;padding:0;display:grid;gap:0}
.al-highlights li{padding:14px 0 14px 28px;border-bottom:1px solid var(--hair);position:relative;
  font-size:17px;line-height:1.55}
.al-highlights li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:2px;background:var(--brand)}
.al-itinerary{list-style:none;margin:0;padding:0}
.al-itinerary li{display:grid;grid-template-columns:76px 1fr;gap:22px;padding:22px 0;
  border-bottom:1px solid var(--hair)}
.al-itinerary .day{font-family:var(--face);font-weight:600;font-size:34px;line-height:1;color:var(--brand)}
.al-itinerary .day small{display:block;font-family:var(--sans-face);font-size:10px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.al-itinerary h3{margin:0 0 6px;font-size:19px;font-weight:800;line-height:1.3}
.al-itinerary p{margin:0;color:var(--soft);font-size:16.5px;line-height:1.6}
.al-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:700px){.al-shots{grid-template-columns:1fr 1fr}}
.al-shots img{width:100%;aspect-ratio:1/1;object-fit:cover}

.al-journey-after{margin-top:60px;padding:46px 0 56px;border-top:1px solid var(--rule)}
.al-journey-after h2{margin:0 0 6px;font-family:var(--face);font-weight:600;
  font-size:calc(clamp(26px,3.2vw,34px) * var(--scale));line-height:1.15}
.al-journey-after .al-sub{margin:0;color:var(--soft);font-size:16.5px}

/* A journey with no photograph yet. Quiet and deliberate rather than a
   block of colour with the title half cut off. */

.al-journeys .media,
.al-journey .media{background:none;aspect-ratio:auto;border-radius:0}

/* ---------- booking on the journey page ---------- */

.al-journey-booking{margin-top:56px;padding:46px 0 10px;border-top:1px solid var(--rule);scroll-margin-top:20px}
.al-journey-booking .al-section-head{margin-bottom:22px}
.al-journey .al-book .al-dates li a{color:var(--ink);text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--hair)}
.al-journey .al-book .al-dates li a:hover{color:var(--deep);border-bottom-color:var(--brand)}

/* the form drops into the page without its own card around it */
.alb-page.alb-inline{background:none;padding:0;font-size:inherit}
.alb-page.alb-inline .alb-card.is-bare{max-width:none;border:0;border-top:0;border-radius:0;padding:0}
.alb-page.alb-inline .alb-card.alb-done{max-width:720px;margin:0}
.alb-page.alb-inline .alb-form{max-width:760px}
.alb-page.alb-inline .alb-lede{font-size:17px}

  .al-book{position:static}
}
}

/* What the journey can offer today, worked out from its dates. */
.al-journey .al-state{margin:18px 0 0}
.al-journey .al-state .tag{display:inline-block;border-radius:999px;padding:8px 14px;
  font:700 10.5px/1 var(--sans-face);letter-spacing:.18em;text-transform:uppercase}