@charset "UTF-8";
/* ==========================================================================
   TRAVELNEST — Journal (blog index)
   Loaded after style.css and destination.css: tokens, top bar, breadcrumb,
   page hero and the footer come from those two. The one page on the site
   that is not a stack of full-width sections but a three-column reading
   layout, and the one page that does not end in "Plan my trip" — a reader
   here is reading, not booking, so the right sidebar carries the soft route
   to How we work instead.
   Every count on the page is derived from the same post record: the header
   total, the topic list and the archive are the same 53 posts counted three
   ways, and the page count is ceil(53 / 3).
   --------------------------------------------------------------------------
   01. Page tokens and the three-column shell
   02. Left sidebar — topics, regions, who writes here
   03. Centre column — the post cards and pagination
   04. Right sidebar — most read, newsletter, archive
   05. Responsive — 1400 / 1200 / 1000 / 900 / 600 / 430
   --------------------------------------------------------------------------
   Authored in fixed pixels at any width (only the nav and footer scale).
   ========================================================================== */

/* ==========================================================================
   01. Page tokens and the three-column shell
   ========================================================================== */

.page-blog {
  --bl-panel: #17435A;
  --bl-feature-tint: rgba(192, 82, 27, 0.05);
  --bl-on-accent: #FFFFFF;
  --bl-photo-ink: #FFFFFF;
  --bl-chip-bg: #FFFFFF;
}

[data-theme="dark"] .page-blog {
  --bl-panel: rgba(16, 16, 16, 0.72);
  --bl-feature-tint: rgba(226, 102, 31, 0.08);
  --bl-on-accent: #1A1A1A;
  --bl-chip-bg: #EDE3D3;
}

/* the structural ink rules stay at full strength on dark paper here — only
   the pagination rule softens, because it sits under three tall photographs */
[data-theme="dark"] .pager { border-top-color: rgba(var(--ink-rgb), 0.45); }

.blog-sec { padding: 0 0 70px; }

.blog {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
}

.blside {
  flex: 0 1 280px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.blmain {
  flex: 1 1 900px;
  min-width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.blaside {
  flex: 0 1 320px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}


/* ==========================================================================
   02. Left sidebar — topics, regions, who writes here
   ========================================================================== */

.sbsec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sbsec__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--ink);
}

.sbsec__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 24px;
  font-weight: 600;
}

.sbsec__count {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* every navigational row states how many posts are behind it */
.sbrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.18);
  color: inherit;
}

.sbrow__label {
  font-size: 20px;
  font-weight: 500;
}

.sbrow--on .sbrow__label {
  color: var(--accent);
  font-weight: 700;
}

.sbrow__n {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 17px;
  font-weight: 500;
  opacity: 0.5;
}

.sbrow--region {
  padding: 9px 0;
  border-bottom: 1px dashed rgba(var(--ink-rgb), 0.3);
}

.sbrow--region .sbrow__label { font-size: 19px; }
.sbrow--region .sbrow__n { font-size: 16px; }

.writers {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 2px solid var(--accent);
  padding: 18px 20px 20px;
}

.writers__label {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.writers__fig {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 0.95;
}

.writers__text {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.78;
  text-wrap: pretty;
}

.writers__link {
  margin-top: 4px;
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* ==========================================================================
   03. Centre column — the post cards and pagination
   ========================================================================== */

.postshead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 13px;
  border-bottom: 3px solid var(--ink);
}

.postshead__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 600;
}

.postshead__count {
  font-size: 17px;
  font-weight: 500;
  opacity: 0.6;
}

.postshead__page {
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
}

.posts {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the card repeats in the same order every time: photograph, title,
   description, author and date — and nothing else */
.post {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  color: inherit;
}

.post--featured {
  border: 3px solid var(--accent);
  background: var(--bl-feature-tint);
}

.post__fig {
  position: relative;
  display: block;
  height: 380px;
  overflow: hidden;
}

.post--featured .post__fig { height: 460px; }

.post__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* lighter than elsewhere on the site: the scrim only carries the tag row,
   because the text sits below the frame rather than on it */
.post__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.5) 0%, transparent 46%);
  pointer-events: none;
}

/* the handoff's scrim darkens the foot of the frame, but the tag row it is
   meant to carry sits at the head: on the real photographs the read time was
   1.1—1.7:1 over open sky. This band carries it at 5.4:1 or better. */
.post__scrim--head {
  inset: 0 0 auto;
  height: 96px;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.55) 60%, transparent 100%);
}

.post__tags {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  pointer-events: none;
}

.post__cat {
  background: var(--accent);
  padding: 5px 12px;
  color: var(--bl-on-accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
}

.post--featured .post__cat {
  background: var(--bl-chip-bg);
  color: var(--accent);
}

.post__read {
  margin-left: auto;
  color: var(--bl-photo-ink);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  opacity: 0.85;
}

.post__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 24px;
}

.post__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.post--featured .post__title {
  font-size: 44px;
  color: var(--accent);
}

/* the short description IS the excerpt — there is no "read more" here */
.post__desc {
  max-width: 820px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  opacity: 0.78;
  text-wrap: pretty;
}

.post__by {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 13px;
  border-top: 2px dotted rgba(var(--ink-rgb), 0.35);
}

.post__author {
  font-size: 19px;
  font-weight: 700;
}

.post__role {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.6;
}

.post__date {
  margin-left: auto;
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.pager {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

.pager__prev {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.35;
  white-space: nowrap;
}

.pager__pages {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pager__page {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(var(--ink-rgb), 0.35);
  color: inherit;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 20px;
  font-weight: 500;
}

.pager__page--on {
  border: 0;
  background: var(--accent);
  color: var(--bl-on-accent);
  font-weight: 600;
}

.pager__gap {
  padding: 0 4px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 20px;
  opacity: 0.4;
}

.pager__next {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pager__arrow { font-size: 22px; }

.pager__cta {
  margin-left: auto;
  border: 2px solid var(--accent);
  padding: 13px 28px;
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.pager__cta:hover,
.pager__cta:focus-visible {
  background: var(--accent);
  color: var(--cta-label);
}


/* ==========================================================================
   04. Right sidebar — most read, newsletter, archive
   ========================================================================== */

.mostread {
  padding: 0 0 20px;
  background: var(--bl-panel);
  color: var(--ab-panel-ink);
}

.mostread__head {
  padding: 14px 22px 12px;
  border-top: 4px solid var(--ab-panel-accent);
  border-bottom: 1px solid rgba(var(--ab-panel-rgb), 0.25);
  color: var(--ab-panel-accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.mostread__rows {
  display: flex;
  flex-direction: column;
  padding: 6px 22px 0;
}

.mrrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ab-panel-rgb), 0.25);
  color: inherit;
}

.mrrow__n {
  flex: none;
  color: var(--ab-panel-accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.mrrow__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mrrow__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.mrrow__cat {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.newsl {
  display: flex;
  flex-direction: column;
  gap: 11px;
  border: 2px solid var(--ink);
  padding: 20px 22px 22px;
}

.newsl__label {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.newsl__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
}

.newsl__text {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.78;
  text-wrap: pretty;
}

.newsl__field {
  border: 0;
  border-bottom: 2px solid rgba(var(--ink-rgb), 0.5);
  background: none;
  padding: 0 0 10px;
  color: inherit;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
}

.newsl__field::placeholder {
  color: inherit;
  opacity: 0.5;
}

.newsl__cta {
  border: 0;
  background: var(--accent);
  padding: 13px;
  color: var(--bl-on-accent);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.newsl__cta:hover,
.newsl__cta:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.newsl__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.newsl__fig {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.newsl__note {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}

.years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.year {
  border: 2px solid rgba(var(--ink-rgb), 0.35);
  padding: 6px 13px;
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.year--on {
  border-color: var(--accent);
  color: var(--accent);
}

.planning {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}

.planning__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

.planning__text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.8;
  text-wrap: pretty;
}

.planning__link {
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* ==========================================================================
   05. Responsive — 1400 / 1200 / 1000 / 900 / 600 / 430
   ========================================================================== */

/* first the right sidebar drops under the two remaining columns… */
@media (max-width: 1400px) {
  .blmain { flex: 1 1 500px; min-width: min(480px, 100%); }

  .blaside {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* …then everything stacks, and a reader on a narrow screen gets the posts
   first, not the topic list */
@media (max-width: 1000px) {
  .blmain { order: 1; flex: 1 1 100%; }
  .blside { order: 2; flex: 1 1 100%; min-width: 0; }
  .blaside { order: 3; }
  .blog-sec { padding-bottom: 46px; }
  .blog { gap: 28px; }
}

/* below the fixed-height range the photographs go to a 16:10 ratio, so a
   card never becomes a letterbox on a phone */
@media (max-width: 900px) {
  .post__fig,
  .post--featured .post__fig {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .post__title { font-size: 32px; }
  .post--featured .post__title { font-size: 36px; }
  .post__desc { font-size: 19px; }
  .post__body { padding: 18px 20px 20px; }
}

@media (max-width: 600px) {
  .postshead__page { margin-left: 0; }
  .pager { gap: 12px; }
  .pager__cta { margin-left: 0; padding: 12px 22px; font-size: 15px; }
  .pager__page { width: 40px; height: 40px; font-size: 18px; }
  .pager__pages { gap: 7px; }
}

@media (max-width: 430px) {
  .post__title { font-size: clamp(24px, 7.5vw, 30px); }
  .post--featured .post__title { font-size: clamp(26px, 8vw, 34px); }
  .post__by { gap: 4px 12px; }
  .post__date { margin-left: 0; }
  .writers__fig { font-size: 34px; }
  .newsl__title { font-size: 26px; }
  .sbrow__label { font-size: 18px; }
  .pager__page { width: 36px; height: 36px; font-size: 16px; }
  .pager__pages { gap: 6px; }
}