/* Saleha's, shared base
   The scale, the type and the neutral palette the itinerary page is
   built on. The homepage and the hosts' page set their own colours
   on top, inline. */

:root {
  /* ---- colour ------------------------------------------------------- */
  --bg:        #ffffff;
  --ink:       #111111;
  --grey:      #6e6e6e;   /* captions, descriptions, secondary lines */
  --grey-soft: #909090;
  --rule:      #e0e0e0;
  --dark:      #111111;   /* inverted bands */
  --dark-grey: #9a9a9a;   /* secondary text on the dark band */

  /* ---- type --------------------------------------------------------- */
  --sans:  "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Times, serif;

  --fs-hero:   clamp(2.5rem, 1rem + 6.6vw, 7rem);
  --fs-h2:     clamp(1.75rem, 1rem + 3.2vw, 3.75rem);
  --fs-h3:     clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-lede:   clamp(1.125rem, 1rem + 0.8vw, 1.75rem);
  --fs-body:   clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-small:  0.9375rem;
  --fs-label:  0.8125rem;

  /* ---- grid and rhythm ---------------------------------------------- */
  --page:    110rem;
  --pad:     clamp(1.25rem, 3vw, 2.5rem);
  --gutter:  clamp(1rem, 1.7vw, 1.5rem);

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.75rem;
  --s4: 3rem;
  --s5: clamp(3.5rem, 7vw, 7rem);
  --s6: clamp(5rem, 11vw, 11rem);
}

:root { color-scheme: light; }

/* ===================================================================
   Base
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Nothing on this page appears, fades, slides or waits. Everything is
   there from the first paint. */

img { display: block; width: 100%; height: auto; }

/* The UA stylesheet gives figure `margin: 1em 40px`, which quietly stops
   every full-bleed picture on this page from reaching the viewport edge. */
figure { margin: 0; }

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: pretty;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip-link {
  position: absolute; left: var(--pad); top: -4rem; z-index: 100;
  background: var(--ink); color: var(--bg); padding: .6rem 1rem;
}
.skip-link:focus-visible { top: .5rem; }

/* ===================================================================
   Frame
   =================================================================== */

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--pad);
}


.section--dark {
  background: var(--dark);
  color: var(--bg);
}
.section--dark .meta { color: var(--dark-grey); }

h2.meta {
  font-weight: 400;
  line-height: inherit;
  letter-spacing: 0.02em;
}

.meta {
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  color: var(--grey);
  margin: 0;
}

/* ===================================================================
   Itinerary

   Each day is a numeral, a time rule, a photograph and the schedule.
   The rule is the motif: one hairline per day on a shared 4am to
   midnight scale, with a dot at every entry that has a time. Repeated
   six times it reads as the shape of the trip, and it is real data
   rather than decoration.
   =================================================================== */

.days { display: grid; gap: var(--s5); }

/* ---- day head ---- */

.day__head {
  display: flex;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  border-top: 1px solid var(--rule);
  padding-top: var(--s2);
}
.section--dark .day__head { border-top-color: #333; }

.day__num {
  font-size: clamp(2rem, 1.1rem + 2.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #c4c4c4;
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.section--dark .day__num { color: #555; }

.day__title { font-size: var(--fs-h3); margin: 0; flex: 1 1 auto; }
.day__night { white-space: nowrap; margin: 0; }

/* ---- the time rule ---- */

.rule { margin: var(--s3) 0 var(--s4); }

.rule__track { position: relative; height: 26px; }

.rule__line {
  position: absolute;
  left: 0; right: 0; top: 13px;
  height: 1px;
  background: var(--rule);
}
.section--dark .rule__line { background: #3a3a3a; }

.rule__tick {
  position: absolute;
  top: 8px;
  width: 1px; height: 11px;
  background: var(--rule);
}
.section--dark .rule__tick { background: #3a3a3a; }

.rule__dot {
  position: absolute;
  top: 9px;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--ink);
}
.section--dark .rule__dot { background: #fff; }

.rule__scale { position: relative; height: 1.1rem; }
.rule__scale span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  color: var(--grey);
  white-space: nowrap;
}
.section--dark .rule__scale span { color: #777; }

/* ---- photograph and schedule ---- */

.day__body { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 56rem) {
  .day__body { grid-template-columns: 19rem 1fr; gap: var(--s4); }
}

.day__photo { align-self: start; }
.day__photo img { aspect-ratio: 4 / 3; object-fit: cover; background: #f2f2f2; }
.section--dark .day__photo img { background: #222; }

/* A day with one or two entries would otherwise put a full-height
   photograph beside a single line. Shorten the picture instead, so a
   short day reads as a short block. */
.day--sparse .day__photo img { aspect-ratio: 16 / 9; }

.entries { margin: 0; }

.entry {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--s2);
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--rule);
}
.section--dark .entry { border-bottom-color: #2a2a2a; }
.entry:first-child { padding-top: 0; }

.entry__time {
  font-size: var(--fs-small);
  color: var(--grey);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.section--dark .entry__time { color: var(--dark-grey); }

.entry__body { min-width: 0; }
.entry__title { font-size: var(--fs-small); margin: 0; }
.entry__detail {
  font-size: var(--fs-small);
  color: var(--grey);
  margin: 0.15rem 0 0;
  max-width: 58ch;
}
.section--dark .entry__detail { color: var(--dark-grey); }

@media (max-width: 34rem) {
  .entry { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ===================================================================
   Footer
   =================================================================== */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  align-items: baseline;
}
.footer p { font-size: var(--fs-small); color: var(--grey); margin: 0; }
/* After the rule above, and naming the p, so the wordmark keeps its own
   size: as ".footer__mark" alone it lost to ".footer p" and came out at
   the small text size. Same size as the wordmark in the header. */
.footer p.footer__mark { font-family: var(--serif); font-size: 1.75rem; line-height: 1; }