/* Design lab, variant A "Editorial" (2026-10-26): the home page as a magazine front page in the World's 101 Best
   design language - The Seasons for headlines, Poppins for kickers and copy, #333 / #edebe9 / white with the gold accent.
   One responsive document, served for desktop (/d/) and mobile (/m/). Header and footer: w101-editorial-chrome.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.ed { margin: 0; background: var(--paper); color: var(--ink); font: 300 15px/1.7 var(--sans); letter-spacing: 0.01em; }
:where(.ed) img { display: block; max-width: 100%; height: auto; }
:where(.ed) a { color: inherit; text-decoration: none; }
:where(.ed) :where(h1, h2, h3, p, ul, ol, figure, blockquote) { margin: 0; }
:where(.ed) :where(ul, ol) { padding: 0; list-style: none; }
.ed-story:hover .ed-media img, .ed-card:hover .ed-media img { transform: scale(1.035); }
.ed-story:hover .ed-title, .ed-card:hover .ed-title { color: #000; }

/* section heads: label between hairlines, then a serif headline */
.ed-head { text-align: center; margin: 0 0 clamp(32px, 4vw, 52px); }
.ed-head__label { display: flex; align-items: center; gap: 18px; justify-content: center; }
.ed-head__label::before, .ed-head__label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.ed-head__title { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.08; letter-spacing: 0.02em; }
.ed-head__sub { margin-top: 12px; font: 300 12px/1.6 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }


/* ---- 1. lead: three columns like a magazine front page ---- */
.ed-lead { padding: clamp(28px, 3.4vw, 48px) 0 clamp(56px, 6vw, 88px); }
.ed-lead__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr) minmax(0, 1fr); gap: clamp(22px, 2.6vw, 40px); }
.ed-lead__side { display: grid; gap: 34px; align-content: start; }
.ed-lead__side .ed-story + .ed-story { padding-top: 30px; border-top: 1px solid var(--rule); }
.ed-story .ed-media { aspect-ratio: 4 / 3; margin-bottom: 16px; }
.ed-story .ed-kicker { margin-bottom: 9px; }
.ed-story .ed-title { font-size: clamp(21px, 1.75vw, 26px); }
.ed-story .ed-dek { margin-top: 9px; font-size: 13.5px; line-height: 1.65; }
.ed-hero .ed-media { aspect-ratio: 4 / 3; margin-bottom: 24px; }
.ed-hero { text-align: center; }
.ed-hero .ed-kicker { margin-bottom: 14px; }
.ed-hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 4.6vw, 70px); line-height: 1.02; letter-spacing: 0.01em; }
.ed-hero__dek { max-width: 560px; margin: 18px auto 0; font-size: 15.5px; color: var(--ink-soft); }
.ed-hero__by { margin-top: 18px; font: 400 10.5px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; }
.ed-rail__label { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.ed-rail li a { display: grid; grid-template-columns: 1fr 84px; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.ed-rail .ed-media { aspect-ratio: 1; }
.ed-rail .ed-title { font-size: 19px; line-height: 1.2; }
.ed-rail__place { margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
.ed-rail .ed-more { margin-top: 22px; }
.ed-rail li a:hover .ed-title { color: var(--gold); }

/* ---- 2. rankings ---- */
.ed-rank { padding: clamp(56px, 6vw, 92px) 0; border-top: 1px solid var(--rule); }
.ed-rank__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.ed-card .ed-media { aspect-ratio: 4 / 5; margin-bottom: 18px; }
.ed-card__num { font: 400 11px/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.ed-card .ed-title { margin-top: 6px; font-size: clamp(21px, 1.7vw, 25px); }
.ed-card__status { margin-top: 10px; font: 400 10.5px/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.ed-card__status b { font-weight: 400; color: var(--ink); }

/* ---- 3. letter from the founder ---- */
.ed-letter { background: #edebe9; padding: clamp(60px, 7vw, 110px) 0; }
.ed-letter__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.ed-letter .ed-media { aspect-ratio: 4 / 5; }
.ed-letter__title { margin: 14px 0 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.08; }
.ed-letter__sub { font: 300 12px/1.6 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.ed-letter__body { margin-top: 28px; max-width: 540px; }
.ed-letter__body p + p { margin-top: 14px; }
/* drop cap: three lines deep, body colour, set tight against the text (owner 2026-10-26) */
.ed-letter__body p:first-child::first-letter { float: left; font-family: var(--serif); font-weight: 400; font-size: 79px; line-height: 0.74; margin: 7px 3px 0 -2px; color: var(--ink); }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .ed-letter__body p:first-child::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 3px 0 -1px; -webkit-initial-letter: 3; initial-letter: 3; }
}
.ed-quote { margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule); max-width: 540px;
  font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }
.ed-sign { margin-top: 26px; display: flex; align-items: center; gap: 20px; }
.ed-sign img { width: 104px; }
.ed-sign__name { font: 400 12px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.ed-sign__role { display: block; color: var(--ink-soft); font-weight: 300; letter-spacing: 0.1em; text-transform: none; font-size: 13px; }

/* ---- 4. hall of fire: full-bleed dark feature ---- */
.ed-cdc { background: #2b2b2a; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ed-cdc__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); min-height: clamp(520px, 52vw, 760px); }
.ed-cdc .ed-media { position: relative; background: #222; }
.ed-cdc__cap { position: absolute; left: 28px; bottom: 24px; font: 400 10.5px/1.6 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.ed-cdc__cap span { display: block; letter-spacing: 0.08em; text-transform: none; font-weight: 300; font-size: 12.5px; }
.ed-cdc__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5vw, 90px); }
.ed-cdc__title { margin: 16px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 64px); line-height: 1.02; letter-spacing: 0.02em; }
.ed-cdc__place { margin-top: 10px; font-family: var(--serif); font-size: clamp(20px, 1.7vw, 26px); color: var(--gold); }
.ed-cdc__body { margin-top: 24px; max-width: 420px; color: rgba(255,255,255,.82); }
.ed-cdc .ed-more { margin-top: 34px; align-self: flex-start; }

/* ---- 5. the book ---- */
.ed-book { padding: clamp(60px, 7vw, 110px) 0; }
.ed-book__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.ed-book .ed-media { aspect-ratio: 1; background: #333333; }   /* = the photo's own backdrop */
.ed-book .ed-media img { object-fit: contain; }
.ed-book__title { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.4vw, 52px); line-height: 1.05; }
.ed-book__sub { margin-top: 12px; font: 300 12px/1.6 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.ed-book__body { margin-top: 22px; max-width: 470px; }
.ed-book__note { margin-top: 16px; font-size: 13px; color: var(--ink-soft); }
.ed-btn { display: inline-block; margin-top: 30px; padding: 16px 34px; border: 1px solid var(--ink); font: 400 11px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; transition: background .25s, color .25s; }
.ed-btn:hover { background: var(--ink); color: #fff; }
.ed-app { margin-top: clamp(56px, 6vw, 90px); display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 40px; align-items: center; padding: 26px 40px; background: #000; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ed-app img { width: 176px; }
.ed-app__title { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; letter-spacing: 0.01em; }
.ed-app__body { margin-top: 8px; color: rgba(255,255,255,.75); font-size: 14px; }
/* availability is information, not an action: a quiet line under the copy instead of a framed button */
.ed-app__soon { margin-top: 14px; display: flex; align-items: center; gap: 12px; font: 400 10.5px/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.ed-app__soon::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ---- 6. beyond the rankings ---- */
.ed-eco { padding: clamp(60px, 7vw, 100px) 0; border-top: 1px solid var(--rule); }
.ed-eco__intro { max-width: 640px; margin: -18px auto clamp(36px, 4vw, 56px); text-align: center; color: var(--ink-soft); }
.ed-eco__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.ed-eco .ed-media { aspect-ratio: 1; margin-bottom: 16px; }
.ed-eco .ed-title { font-size: clamp(18px, 1.45vw, 21px); letter-spacing: 0.04em; text-transform: uppercase; }
.ed-eco .ed-dek { margin-top: 6px; font-size: 13.5px; }


/* reveal on scroll (only when JS runs and motion is welcome) */
.ed-js .ed-reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.ed-js .ed-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ed-js .ed-reveal { opacity: 1; transform: none; transition: none; } .ed-media img { transition: none; } html { scroll-behavior: auto; } }

/* ---- laptop / tablet ---- */
@media (max-width: 1100px) {
  .ed-lead__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .ed-hero { grid-column: 1 / -1; order: -1; }
  .ed-lead__side--left { grid-template-columns: 1fr 1fr; grid-column: 1 / -1; order: 2; }
  .ed-lead__side--left .ed-story + .ed-story { padding-top: 0; border-top: 0; }
  .ed-rail { grid-column: 1 / -1; order: 1; }
  .ed-rail ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .ed-rank__grid, .ed-eco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .ed-app { grid-template-columns: 140px minmax(0, 1fr); } .ed-app img { width: 140px; }
}
/* ---- phone ---- */
@media (max-width: 720px) {
  body.ed { font-size: 14.5px; }
  .ed-lead { padding-top: 0; border-top: 1px solid var(--ink); }
  .ed-lead__grid { grid-template-columns: 1fr; gap: 40px; }
  .ed-hero { margin: 0 calc(var(--gut) * -1); }
  .ed-hero .ed-media { aspect-ratio: 4 / 5; }
  .ed-hero > :not(.ed-media) { padding: 0 var(--gut); }
  .ed-rail ol { grid-template-columns: 1fr; }
  .ed-lead__side--left { grid-template-columns: 1fr; gap: 34px; }
  .ed-lead__side--left .ed-story + .ed-story { padding-top: 30px; border-top: 1px solid var(--rule); }
  .ed-rank__grid { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .ed-card .ed-title { font-size: 18px; }
  .ed-card__status { font-size: 9.5px; letter-spacing: 0.14em; }
  .ed-letter__grid, .ed-cdc__grid, .ed-book__grid { grid-template-columns: 1fr; }
  .ed-cdc__grid { min-height: 0; } .ed-cdc .ed-media { aspect-ratio: 4 / 5; }
  .ed-cdc__text { padding: 44px var(--gut) 56px; }
  .ed-app { grid-template-columns: 1fr; text-align: center; padding: 34px 24px; } .ed-app img { width: 150px; margin: 0 auto; } .ed-app__soon { justify-content: center; }
  .ed-eco__grid { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .ed-eco .ed-title { font-size: 15px; }
}


/* ---- 3b. destination spotlight: a card slider after Condé Nast Traveller's spotlight rows (owner 2026-10-26) ---- */
.ed-dest { padding: clamp(60px, 7vw, 100px) 0 clamp(50px, 6vw, 80px); }
.ed-dest__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--ink); }
.ed-dest__title { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.35vw, 20px); letter-spacing: 0.14em; text-transform: uppercase; }
.ed-dest__nav { display: flex; gap: 6px; }
.ed-dest__arrow { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--ink); cursor: pointer; transition: color .2s, opacity .2s; }
.ed-dest__arrow svg { width: 12px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.ed-dest__arrow:hover:not(:disabled) { color: var(--gold); }
.ed-dest__arrow:disabled { opacity: .25; cursor: default; }
.ed-dest__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 22px) / 3.25); column-gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
.ed-dest__track::-webkit-scrollbar { display: none; }
.ed-dest__item { scroll-snap-align: start; }
.ed-dest .ed-media { aspect-ratio: 3 / 2; margin-bottom: 14px; }
.ed-dest .ed-kicker { color: var(--ink); letter-spacing: 0.16em; }
.ed-dest .ed-title { margin-top: 8px; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.12; }
.ed-dest .ed-dek { margin-top: 10px; font-size: 14px; line-height: 1.6; max-width: 34em; }
.ed-dest__by { margin-top: 12px; font: 400 10.5px/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.ed-dest__dots { display: flex; justify-content: center; gap: 10px; margin-top: 34px; min-height: 6px; }
.ed-dest__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); transition: background .25s; }
.ed-dest__dots span.is-on { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ed-dest__track { scroll-behavior: auto; } }
@media (max-width: 1100px) { .ed-dest__track { grid-auto-columns: calc((100% - 22px) / 2.2); } }
@media (max-width: 720px) {
  .ed-dest__track { grid-auto-columns: 84%; column-gap: 16px; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); scroll-padding-left: 0; }
  .ed-dest__nav { display: none; }
  .ed-dest .ed-title { font-size: 26px; }
}

/* in-page anchors (menu: Hall of Fire, The Book, Ecosystem) land below the compact bar */
:where(.ed) :is(section, aside)[id] { scroll-margin-top: 84px; }
@media (max-width: 720px) { :where(.ed) :is(section, aside)[id] { scroll-margin-top: 70px; } }