/* ---------------------------------------------------------------------------
   Ode To The Tourist — web edition of the book's design system.

   Taken from the OFFSITE proposal: a light warm-grey field that images sit
   *in* rather than bleed across, a running head on every page, coordinates
   used as texture, vertical type in the gutters, and layouts that are
   deliberately never centred or evenly weighted.

   Typeface: the book is set in Neue Haas Grotesk Display Pro, which is
   licensed and needs a separate webfont licence. Until that is sorted this
   uses the system Helvetica stack - same lineage, costs nothing, and loads
   with zero network requests, which matters on a page this image-heavy.
   Swapping it later is one declaration.
--------------------------------------------------------------------------- */

:root {
  --field:  #e6e6e3;   /* the page itself - warm grey, as in the proposal */
  --panel:  #efefec;   /* the lighter plate some images sit on */
  --ink:    #14140f;
  --muted:  #86867f;
  --rule:   rgba(20,20,15,.14);

  --gap:    clamp(56px, 9vw, 150px);   /* vertical rhythm between spreads */
  --pad:    clamp(18px, 4.5vw, 76px);  /* page margin */

  --meta:   9.5px;
  --track:  .13em;

  --sans: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* ---------- running head ----------
   Present on every page of the book, so it is present here too. Sticky
   rather than fixed: it stays with you while scrolling but does not sit on
   top of a full-height image on a short screen. */
.runner {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px var(--pad);
  background: var(--field);
  font-size: var(--meta);
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-style: italic;
  font-weight: 500;
}
.runner b { font-style: normal; font-weight: 700; letter-spacing: .02em; }
.runner .r-right { text-align: right; font-style: normal; }
.runner nav a { text-decoration: none; margin-left: 20px; opacity: .55; }
/* The centre of the running head is the way back to the project's front page.
   Styled as plain text until hovered - it should read as the masthead, not as
   a link competing with the navigation on the right. */
.runner .home { text-decoration: none; color: inherit; }
.runner .home:hover { text-decoration: underline; text-underline-offset: 3px; }
.runner nav a:hover,
.runner nav a[aria-current] { opacity: 1; }

/* ---------- title ---------- */
.masthead {
  padding: clamp(60px, 13vw, 190px) var(--pad) var(--gap);
  max-width: 1700px;
  margin: 0 auto;
}
.masthead h1 {
  margin: 0;
  font-size: clamp(38px, 9.5vw, 132px);
  line-height: .92;
  letter-spacing: -.035em;
  font-weight: 700;
  text-transform: uppercase;
}
.tagline {
  margin: clamp(26px, 4vw, 52px) 0 0;
  /* Wide enough that the middle line - the long one - holds on a single line
     on desktop, which is what makes the three-line stanza read as a stanza.
     It still wraps naturally on narrow screens, where three lines is not
     achievable anyway. */
  max-width: 52em;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.45;
  color: var(--ink);
}
.tagline span { display: block; }

/* ---------- spreads ---------- */
.sheet { max-width: 1700px; margin: 0 auto; padding: 0 var(--pad); }

.spread { margin-bottom: var(--gap); position: relative; }

/* Metadata line: city / country / coordinates, pulled apart across the full
   width the way the proposal breaks a place name across a spread. */
.meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--meta);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}
.meta i { font-style: normal; }
.coord { font-variant-numeric: tabular-nums; }

/* Vertical type in the gutter between a pair. */
.gutter {
  writing-mode: vertical-rl;
  font-size: var(--meta);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  align-self: stretch;
  padding: 2px 0;
}

/* A — one image, held off-centre rather than centred. */
.s-single { display: grid; grid-template-columns: 1fr; }
.s-single .frame { width: min(100%, 62ch); }
.s-single.right .frame { margin-left: auto; }
.s-single.wide .frame { width: 100%; }

/* B — a pair with a live gutter carrying vertical metadata. */
.s-pair {
  display: grid;
  grid-template-columns: 1fr 26px 1fr;
  align-items: start;
}

/* C — a small plate floated right against a large empty field. The emptiness
   is the point; it is what gives the next image its weight. */
.s-inset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: clamp(340px, 46vw, 660px);
  background: var(--panel);
  padding: clamp(20px, 4vw, 64px);
}
.s-inset .frame { width: min(100%, 300px); margin: 0 auto; }
.s-inset .side {
  font-size: var(--meta);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  display: grid;
  gap: 10px;
  align-content: center;
}

/* D — a contact-sheet block against one large frame, straight from the
   proposal's nine-up spread. */
.s-sheet {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(14px, 2.4vw, 40px);
  align-items: center;
}
.s-sheet .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.s-sheet .grid img { aspect-ratio: 3/4; object-fit: cover; }

/* E — two portraits, offset vertically so the eye moves. */
.s-offset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 54px);
  align-items: start;
}
.s-offset .frame:last-child { margin-top: clamp(40px, 9vw, 150px); }

/* Coordinates laid over the image in white, as on the book's beach spread. */
.frame { position: relative; }
.frame .overlay {
  position: absolute;
  left: 0; right: 0;
  top: 46%;
  display: flex;
  justify-content: space-between;
  padding: 0 clamp(10px, 2.5vw, 40px);
  font-size: var(--meta);
  letter-spacing: var(--track);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

/* ---------- the book ---------- */
.book {
  border-top: 1px solid var(--rule);
  margin-top: var(--gap);
  padding: clamp(48px, 8vw, 120px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.book h2 {
  margin: 0;
  font-size: clamp(26px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
  font-weight: 700;
}
.book .soon {
  font-size: var(--meta);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.book p { margin: 0 0 1em; max-width: 40em; }
.book .attrib {
  font-size: var(--meta);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}
.book .credit {
  font-size: var(--meta);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2em;
}

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--rule);
  padding: 26px var(--pad) 60px;
  max-width: 1700px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: var(--meta);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ---------- narrow screens ----------
   The asymmetry is a large-screen idea. On a phone it becomes one column, and
   the gutter type and empty fields are dropped rather than squeezed. */
@media (max-width: 760px) {
  .s-pair, .s-inset, .s-sheet, .s-offset { grid-template-columns: 1fr; gap: 22px; }
  .s-pair .gutter { display: none; }
  .s-inset { min-height: 0; }
  .s-inset .frame { width: min(100%, 240px); margin: 0; }
  .s-offset .frame:last-child { margin-top: 0; }
  .s-single .frame, .s-single.right .frame { width: 100%; margin-left: 0; }
  .book { grid-template-columns: 1fr; }

  /* The nav used to be hidden here, which left a phone with no way to reach
     the other pages at all. Instead the running head stacks: the year is the
     one part worth dropping (it is a book convention, not navigation), the
     title stays as the way home, and the three links get their own row with
     room to be tapped. */
  .runner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 9px;
    text-align: center;
  }
  .runner > span:first-child { display: none; }
  .runner .r-right { text-align: center; }
  .runner nav { display: flex; gap: 10px; margin: -10px 0; }
  /* Padded to roughly a finger's width. The text stays the same size - the
     tap target grows around it - and the negative margin above stops that
     padding from making the sticky header taller than it needs to be. */
  .runner nav a { margin-left: 0; padding: 12px 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .frame img { transition: opacity .4s ease; }
}

/* Colour carries a place name and nothing else - no coordinates, no dates.
   The coordinate motif is the book's device and stays with the Ode; here the
   caption exists only so a viewer who wants to know where can find out
   without it competing with the picture. */
.colour-flow figcaption {
  margin-top: 9px;
  font-size: var(--meta);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}