/* Trip Grapevine short template. One file, no framework, no external asset but the
   fonts. Kept deliberately small: these pages are paid-media landing pages and
   the only job is to get a reader to a shortlist and then out. */

:root{
  --paper:#F5F5F4; --ink:#0C0D0E; --mute:#6B6B68; --line:#DFDEDA;
  --blue:#1B44DB; --clay:#B77C5D; --card:#FFFFFF;
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C0D0E; --ink:#F2F1EE; --mute:#9A9A96; --line:#26272A;
    --blue:#7C93FF; --clay:#D6A184; --card:#141517;
  }
}
:root[data-theme="dark"]{
  --paper:#0C0D0E; --ink:#F2F1EE; --mute:#9A9A96; --line:#26272A;
  --blue:#7C93FF; --clay:#D6A184; --card:#141517;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 'Inter Tight',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}

/* 1. masthead */
.mast{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line)}
.brand{font-family:Syne,sans-serif;font-weight:800;font-size:1.35rem;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none;line-height:1.05;
  display:flex;flex-direction:column}
.brand span{display:block;font-family:'Inter Tight',sans-serif;font-weight:500;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  margin-top:.2rem}
.mast nav{display:flex;gap:1.25rem}
.mast nav a{color:var(--mute);text-decoration:none;font-size:.9rem;font-weight:500}
.mast nav a:hover{color:var(--blue)}

/* 2. shell */
main{max-width:1180px;margin:0 auto;padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,3rem);
  display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:clamp(2rem,5vw,4rem);
  align-items:start}
@media (max-width:900px){main{grid-template-columns:1fr}}

/* 3. head */
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);font-weight:600;margin:0 0 .75rem}
h1{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2rem,5.2vw,3.3rem);margin:0 0 1rem}
.stand{font-size:1.13rem;color:var(--ink);max-width:60ch;margin:0 0 1rem}
.meta{font-family:ui-monospace,'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  font-size:.74rem;color:var(--mute);margin:0 0 2.25rem;padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);line-height:1.7}

/* 4. the five */
.list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.e{display:grid;grid-template-columns:56px minmax(0,1fr);gap:1rem;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.15rem 1.25rem}
.e:first-child{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.rank{font-family:Syne,sans-serif;font-weight:800;font-size:1.9rem;line-height:1;
  color:var(--line);letter-spacing:-.04em}
.e:first-child .rank{color:var(--blue)}
.e h2{font-family:Syne,sans-serif;font-weight:600;font-size:1.28rem;letter-spacing:-.02em;
  margin:0 0 .45rem;line-height:1.2}
.facts{margin:0 0 .3rem;color:var(--ink);font-size:.97rem}
.near{margin:0 0 .85rem;color:var(--mute);font-size:.88rem}
.cta{margin:0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
  font-weight:600;font-size:.9rem;padding:.6rem 1.15rem;border-radius:999px;
  transition:transform .12s ease,opacity .12s ease}
.btn:hover{transform:translateY(-1px);opacity:.93}
.src{color:var(--mute);font-size:.84rem;text-decoration:none;border-bottom:1px solid var(--line)}
.src:hover{color:var(--blue);border-color:var(--blue)}

/* 5. workings */
.close{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.close h2{font-family:Syne,sans-serif;font-weight:600;font-size:1.15rem;
  letter-spacing:-.02em;margin:0 0 .85rem}
.close p{color:var(--mute);font-size:.94rem;max-width:66ch;margin:0 0 .9rem}
.disc{font-size:.85rem;padding-top:.5rem;border-top:1px dashed var(--line)}

/* 6. rail */
.also h2{font-family:Syne,sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 .9rem}
.also ul,.idx{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.also a{color:var(--ink);text-decoration:none;font-size:.92rem;line-height:1.35;
  display:block;padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.also a:hover{color:var(--blue)}
@media (max-width:900px){.also{margin-top:2.5rem}}

/* 7. index */
.idx{gap:.65rem;margin-top:1.5rem}
.idx li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:.65rem}
.idx a{color:var(--ink);text-decoration:none;font-weight:500}
.idx a:hover{color:var(--blue)}
.idx span{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:.72rem;
  color:var(--mute);white-space:nowrap}

footer{border-top:1px solid var(--line);padding:1.75rem clamp(1rem,4vw,3rem);
  color:var(--mute);font-size:.84rem}
footer p{margin:0}

/* ============================================================
   8. v2: hero pick, photography, ratings, amenity chips
   ============================================================ */

.pick{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;margin:0 0 2.5rem}
@media (max-width:860px){.pick{grid-template-columns:1fr}}
.pickshot{position:relative;min-height:260px;background:var(--line)}
.pickshot img{width:100%;height:100%;object-fit:cover;display:block}
.pickbody{padding:clamp(1.25rem,3vw,2rem);display:flex;flex-direction:column;
  justify-content:center}
.kicker{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--blue);margin:0 0 .5rem}
.pickbody h2{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.15;margin:0 0 .6rem;
  text-wrap:balance}
.pickbody p{margin:0 0 .6rem;color:var(--mute);font-size:.97rem;line-height:1.55}
.pickbody .cta{margin-top:.6rem}

/* rating */
.score{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:0 0 .5rem !important;color:var(--ink) !important;font-size:.94rem}
.score strong{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:1rem}
.rv{color:var(--mute);font-size:.85rem}
.stars{position:relative;display:inline-block;flex:0 0 auto;line-height:1;
  font-size:.95rem;letter-spacing:.08em;white-space:nowrap}
.stars .off{color:var(--line)}
.stars .on{position:absolute;inset:0 auto 0 0;overflow:hidden;color:var(--clay)}

/* list entries */
.e{grid-template-columns:150px minmax(0,1fr);align-items:stretch;padding:0;
  overflow:hidden}
@media (max-width:560px){.e{grid-template-columns:1fr}}
.e .body{padding:1.1rem 1.25rem 1.2rem}
.e h3{font-family:Syne,sans-serif;font-weight:600;font-size:1.18rem;
  letter-spacing:-.02em;margin:0 0 .45rem;line-height:1.22}
.shot{position:relative;background:var(--line);min-height:150px}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%;min-height:150px;background:var(--line)}
.rk{position:absolute;top:.5rem;left:.5rem;background:var(--ink);color:var(--paper);
  font-family:Syne,sans-serif;font-weight:800;font-size:.85rem;line-height:1;
  width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
.e.top .rk{background:var(--blue);color:#fff}
.where{margin:0 0 .6rem;color:var(--mute);font-size:.88rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .85rem;padding:0}
.chips li{font-size:.74rem;color:var(--mute);border:1px solid var(--line);
  border-radius:999px;padding:.18rem .55rem;white-space:nowrap}
.rate{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:.8rem;
  color:var(--mute)}
.btn.big{padding:.75rem 1.5rem;font-size:.95rem}
.lh{font-family:Syne,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin:0 0 1rem}
.idx li span{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:.72rem;
  color:var(--mute);white-space:nowrap}

/* 9. stop the hero photograph from eating a whole mobile screen before the
   reader has seen a single hotel name */
@media (max-width:860px){
  .pickshot{min-height:0;aspect-ratio:16/10}
  .pickshot img{position:absolute;inset:0}
  .shot{min-height:0;aspect-ratio:16/9}
  .e{grid-template-columns:1fr}
}

/* 10. byline and editor bio */
.by{display:flex;align-items:center;gap:.85rem;margin:0 0 1.25rem}
.face{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--line)}
.byname{margin:0;font-weight:600;font-size:.95rem;color:var(--ink)}
.byname span{font-weight:400;color:var(--mute);font-size:.85rem}
.byname span::before{content:"\00a0\00b7\00a0"}
.bymeta{margin:.1rem 0 0;font-family:ui-monospace,'JetBrains Mono',monospace;
  font-size:.72rem;color:var(--mute)}
.stand{margin:0 0 1.75rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.stand p{font-size:1.1rem;line-height:1.55;color:var(--ink);max-width:60ch;
  margin:0 0 .6rem}
.stand p:last-child{margin-bottom:0}
.bio{display:flex;gap:1rem;align-items:flex-start;margin:1.5rem 0;
  padding:1.15rem;background:var(--card);border:1px solid var(--line);
  border-radius:14px}
.bio .face{width:64px;height:64px}
.bio p{margin:.35rem 0 0;font-size:.9rem;color:var(--mute);max-width:56ch}
.bio .byname{font-size:1rem;color:var(--ink);margin:0}
.attr{margin:.4rem 0 0;font-size:.75rem;opacity:.75}
.attr a{color:inherit}

/* 11. secondary CTA */
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.btn.ghost:hover{background:var(--blue);color:#fff;opacity:1}
.cta{gap:.6rem}

/* 12. the case for the top pick.
   With five reasons the body outgrows the photograph, so the hero stacks:
   picture as a banner, argument underneath at full width. */
.pick:has(.feats){grid-template-columns:1fr}
.pick:has(.feats) .pickshot{aspect-ratio:21/9;min-height:0}
.pick:has(.feats) .pickshot img{position:absolute;inset:0}
.why{font-size:.72rem !important;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--clay) !important;margin:1.1rem 0 .6rem !important}
.feats{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.7rem}
.feats li{display:grid;gap:.15rem;padding-left:1.1rem;position:relative}
.feats li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--clay)}
.feats strong{font-weight:600;color:var(--ink);font-size:.96rem;line-height:1.35}
.feats span{color:var(--mute);font-size:.92rem;line-height:1.5}
@media (min-width:900px){.pick:has(.feats) .feats{grid-template-columns:1fr 1fr;
  gap:.7rem 2rem}}

/* 13. byline mark. An initial rather than a photograph, because the copy is
   written in a first-person voice and a real face would turn a creative device
   into a claim about a real person's life. */
.face.mark{display:grid;place-items:center;background:var(--clay);color:#fff;
  font-family:Syne,sans-serif;font-weight:800;font-size:.85rem;letter-spacing:.02em}
.bio .face.mark{font-size:1.05rem}

/* 14. the photograph is a link. It is the biggest target on the card and
   readers try to click it, so leaving it inert wasted the clearest affordance
   on the page. */
a.shot, a.pickshot { display: block; cursor: pointer; }
a.shot img, a.pickshot img { transition: transform .35s ease, filter .2s ease; }
a.shot:hover img, a.pickshot:hover img { transform: scale(1.03); filter: brightness(1.04); }
a.shot:focus-visible, a.pickshot:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; }

/* the one-line note under each runner-up */
.note { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.5; color: var(--ink); }


/* Card and hero images are outbound links now, so they need the cursor and
   the focus ring a link gets. The image itself already fills the box. */
.shot > a, .pickshot > a { display: block; line-height: 0; }
.shot > a:focus-visible, .pickshot > a:focus-visible {
  outline: 2px solid var(--focus, #1B3A5C); outline-offset: 2px;
}