@font-face {
  font-family: "DrukW-Super";
  src: url("./fonts/DrukWide-Super-Trial.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DrukW-Bold";
  src: url("./fonts/DrukWide-Bold-Trial.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DrukW-Medium";
  src: url("./fonts/DrukWide-Medium-Trial.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Layout shell. The page runs close to full bleed: Druk Wide is a very wide
     face and generous side padding was starving the column, which forced the
     display type down. A 132px hero cap rendered at only 79px inside the old
     1100px/48px shell. Padding and type scale are one decision, not two. */
  --page-max: 1600px;
  --pad: 24px;
  --rail-gap: 48px;
  /* Total horizontal padding. Sizing formulas divide by the real column width,
     so this has to track --pad and is redeclared at the mobile breakpoint. */
  --page-gutter: calc(var(--pad) * 2);

  /* The type ladder, locked. Each step is far enough from its neighbour that
     nothing competes: masthead 83 (sized to the shell), article hero 132,
     section head 40, post title 16. The masthead wins on width, the article
     headline wins on weight and value. */
  --hero-cap: 132px;
  --section-size: 40px;
  --title-size: 16px;

  --bg: #f5f2ec;
  --fg: #1a1a1a;
  --secondary: #4a4540;
  --tertiary: #6b655c;
  --rule: #c8c3b8;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-family: "JetBrains Mono", monospace;
  /* Nothing may introduce sideways scroll on a phone. */
  overflow-x: hidden;
}
/* Long unbroken strings (URLs, place names) wrap instead of overflowing.
         Display type is excluded: break-word splits mid-word there, which
         produced "CONSTRAIN / T AS COMMITMEN / T". Headings size themselves
         to fit instead, see .section-head and .hero-title below. */
.body,
.aside,
.pullquote-text {
  overflow-wrap: break-word;
}
.hero-title,
.section-head,
.post-title {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 26px var(--pad) 72px;
}
@media (max-width: 700px) {
  :root {
    --pad: 16px;
    --section-size: 26px;
    --title-size: 15px;
  }
  .page {
    padding: 20px var(--pad) 56px;
  }
}

/* ---------------------------------------------------------------
   Masthead

   The wordmark is set edge to edge across the shell rather than
   sitting at 20px in a corner. It was previously the smallest
   display element on a site named after it. Because it fills the
   width, Druk Wide's extreme width becomes the asset instead of
   the constraint.

   Hierarchy against the article headline is carried by weight and
   value, not size: the masthead is wider but sits in Medium at
   --secondary, while the headline is blacker in Super at --fg. So
   the site name reads as identity and the article still leads.
   --------------------------------------------------------------- */
.nav {
  border-bottom: 3px solid var(--fg);
  padding-bottom: 12px;
  margin-bottom: 26px;
}
.nav-name {
  display: block;
  white-space: nowrap;
  font-family: "DrukW-Medium", sans-serif;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: 0.005em;
  color: var(--secondary);
  /* Measured, not guessed: "DAMON & LEXIE TRAVELS" with TRAVELS in Super runs
     18.78x its own font size. Dividing the real content width by that makes it
     land flush with both edges. A guessed 19.6 left a 4% gap at the right. */
  font-size: calc((min(100vw, var(--page-max)) - var(--page-gutter)) / 18.78);
}
.nav-name em {
  font-family: "DrukW-Super", sans-serif;
  font-style: normal;
  color: var(--fg);
}
.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  gap: 20px;
}
.nav-tag {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.nav-links {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary);
  display: flex;
  gap: 30px;
}
.nav-links a {
  color: inherit;
  text-decoration: none;
}
.nav-links a:hover {
  color: var(--fg);
}

@media (max-width: 700px) {
  /* The tagline is the first thing to go: at this width it competes with the
     wordmark for a line it cannot win. Links keep 44px touch targets. */
  .nav-tag {
    display: none;
  }
  .nav-row {
    margin-top: 4px;
  }
  .nav-links {
    gap: 0;
    justify-content: space-between;
    width: 100%;
    font-size: 15px;
  }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------
   Two column shell, sticky destinations rail
   --------------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(200px, 1fr);
  gap: var(--rail-gap);
  align-items: start;
}
/* The rail takes width the hero used to have, so the hero must size from the
   real main column, not the page. --col is that column: shell, less padding,
   less the gap, times the 4fr share. Hardcoding a pixel size here slid the
   headline underneath the rail. */
.layout-main {
  --col: calc(
    (min(100vw, var(--page-max)) - var(--page-gutter) - var(--rail-gap)) * 0.8
  );
}

.rail {
  position: sticky;
  top: 24px;
}
.rail-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--secondary);
  padding-bottom: 9px;
  border-bottom: 2px solid var(--fg);
}
/* Second and later sections need air above them so the rail reads as three
   groups rather than one long list. */
.rail-group + .rail-group {
  margin-top: 30px;
}

/* Entries without a page yet. They still belong in the rail because the rail
   is the map of the site, but they must not look clickable or 404. */
.rail-item.is-planned {
  cursor: default;
}
.rail-item.is-planned .rail-place {
  color: var(--tertiary);
}
.rail-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.rail-place {
  display: block;
  font-family: "DrukW-Medium", sans-serif;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  color: var(--secondary);
}
.rail-item:hover .rail-place {
  color: var(--fg);
}
.rail-item.is-current {
  border-left: 3px solid var(--fg);
  padding-left: 9px;
}
.rail-item.is-current .rail-place {
  color: var(--fg);
}
.rail-meta {
  font-size: 11px;
  font-style: italic;
  color: var(--tertiary);
}
.rail-foot {
  margin-top: 16px;
  font-size: 11px;
  font-style: italic;
  color: var(--tertiary);
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   Article hero
   --------------------------------------------------------------- */
.hero-wrap {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  border-top: 3px solid var(--fg);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0 22px;
}
.hero-index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tertiary);
  padding-top: 8px;
}
.hero-title {
  font-family: "DrukW-Bold", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.88;
  /* Size from the longest word so a long place name cannot overflow.
     --hero-max-ch is that word's width as a multiple of its own font size.
     Measured: PRAGUE 6.93, "A WEEK IN" 8.47, LONDON'S 8.63, "1 MONTH IN" 9.05,
     THAILAND 8.57, SHOREDITCH 10.96, TOMORROWLAND 14.94. The 82px subtracted
     is the index column plus its gap. */
  font-size: min(
    var(--hero-cap),
    calc((var(--col) - 82px) / var(--hero-max-ch, 9.5))
  );
}
/* Trick 1, one load-bearing word. The subject of the piece takes Super at full
   strength; the connective around it stays Bold. Previously the em shrank to
   0.5em in --tertiary, which meant the place name (the actual subject) rendered
   small and faded while the throwaway connective got full size in black. The
   emphasis was on the wrong word. */
.hero-title em {
  font-family: "DrukW-Super", sans-serif;
  font-style: normal;
  color: var(--fg);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.hero-subtitle {
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  color: var(--secondary);
  margin-top: 18px;
  margin-bottom: 22px;
  max-width: 620px;
}
.thin-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0 0 40px;
}

.photo-frame {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 3/2;
  overflow: hidden;
  margin-bottom: 14px;
  border: 2px solid var(--fg);
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source is portrait, so the desktop 3:2 frame shows only half its
           height. 15% keeps both faces and the kiss inside the crop. */
  object-position: center 15%;
  filter: contrast(1.05);
}
.photo-caption {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: var(--secondary);
  margin-bottom: 40px;
  line-height: 1.5;
}

.body {
  font-size: 16.5px;
  line-height: 1.8;
  max-width: 760px;
}
.body p {
  margin-bottom: 22px;
}
.body em {
  font-style: italic;
}
.body strong {
  font-weight: 700;
}

.aside {
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--secondary);
  padding-left: 22px;
  border-left: 2.5px solid var(--fg);
  margin: 32px 0;
  line-height: 1.75;
  max-width: 700px;
}

.section-sub {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--secondary);
  margin-top: 56px;
  margin-bottom: 10px;
}
.section-head {
  font-family: "DrukW-Bold", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.93;
  margin-bottom: 28px;
  /* Sits deliberately far below the hero. The old clamp topped out at 52px
     against a 96px hero, close enough that the two read as the same level.
     At 40px against a 132px hero the ladder is unambiguous. The vw floor
     still protects "COMMITMENT" (10.8x) in a narrow column. */
  font-size: clamp(1rem, 7.5vw, var(--section-size));
}

.pullquote {
  margin: 44px 0;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 760px;
}
.pullquote-text {
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.55;
}

.post-list {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 3px solid var(--fg);
}
.post-list-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--secondary);
  margin-bottom: 16px;
}
.post-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 16px;
  align-items: baseline;
}
.post-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--tertiary);
}
.post-title {
  font-family: "DrukW-Medium", sans-serif;
  text-transform: uppercase;
  /* Demoted from 20px. Against a 132px hero these are index entries, not
     headlines; at 20px in a face this wide they read as loud as the hero. */
  font-size: var(--title-size);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.post-place {
  font-size: 12px;
  font-style: italic;
  color: var(--tertiary);
}

/* Teaser cut and its read-more. A text link rather than a button: on a page
   whose argument is restraint, a filled button would be the loudest thing
   that is not a photograph. */
.read-more {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 2px solid var(--fg);
  padding-bottom: 2px;
}
.read-more:hover {
  color: var(--secondary);
  border-color: var(--secondary);
}

.blog-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 500;
  color: var(--tertiary);
  display: flex;
  justify-content: space-between;
}

@media (max-width: 700px) {
  /* Type sizes that hold up at arm's length on a phone. */
  .body {
    font-size: 17px;
    line-height: 1.75;
  }
  .hero-subtitle {
    font-size: 17px;
  }
  .photo-caption {
    font-size: 15px;
  }
  .pullquote-text {
    font-size: 18px;
  }
  .aside {
    font-size: 16px;
  }
  .post-date {
    font-size: 15px;
  }
  .blog-footer {
    font-size: 15px;
  }

  /* The date column starves the title on a narrow screen, so the row stacks
     and the place name sits under the title rather than beside it. */
  .post-item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }

  /* The rail cannot be sticky or 20% wide on a phone. It unsticks, drops
     below the article, and becomes a plain list under its own rule. */
  .layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .rail {
    position: static;
    top: auto;
  }
  .rail-item {
    padding: 12px 0;
  }
  .rail-place {
    font-size: 14px;
  }
  .rail-meta {
    font-size: 12px;
  }

  /* With the rail stacked below, the main column is the full page width, so
     --col drops the 0.8 rail share and the rail-gap subtraction. Leaving the
     desktop formula here would size the hero for a column 20% narrower than
     the one it actually gets. */
  .layout-main {
    --col: calc(100vw - var(--page-gutter));
  }

  /* The index column is dead weight at this width. */
  .hero-wrap {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 0 18px;
  }
  .hero-index {
    padding-top: 0;
  }
  /* The 82px index-column subtraction no longer applies once that column
     is gone, so the hero gets the full width back. */
  .hero-title {
    font-size: min(var(--hero-cap), calc(var(--col) / var(--hero-max-ch, 9.5)));
  }
  .hero-subtitle {
    font-size: 16px;
  }
  .hero-meta {
    gap: 14px;
    font-size: 11px;
  }

  /* A 3:2 landscape crop leaves the subject tiny on a phone;
           a taller crop uses the vertical space a phone actually has. */
  .photo-frame {
    aspect-ratio: 4 / 5;
  }

  /* Footer items sit on separate lines rather than cramming one row. */
  .blog-footer {
    flex-direction: column;
    gap: 6px;
  }
}

/* ---------------------------------------------------------------
   Multi-photo posts
   --------------------------------------------------------------- */

/* A three-up grid puts each photo at roughly 100px on a 390px phone,
   which is too small to read a face. Mobile stays one column and the
   grid only engages at 700px, where each cell clears 200px. */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.photo-grid .photo-frame {
  margin-bottom: 0;
  aspect-ratio: 4 / 5;
}
@media (min-width: 700px) {
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .photo-grid .photo-frame {
    aspect-ratio: 3 / 4;
  }
}

/* A lead photo above the grid runs full width in the post's own frame. */
.photo-lead {
  margin-bottom: 18px;
}

/* Post pages: the back link sits above the title, quiet and out of the way. */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--secondary);
  text-decoration: none;
  margin-bottom: 8px;
}
.back-link:hover {
  color: var(--fg);
}

/* Recent list rows become links without changing how they look. */
.post-item-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.post-item-link:hover .post-title {
  color: var(--secondary);
}