/* NIL Hotels.

   Built on the v2 tokens rather than its own palette -- the network stylesheet
   loads first, so --orange, --ink, the type stack and the header all come from
   there and this only describes what is particular to hotels.

   The comp drew every division as a hairline rule. This follows the shape the
   rest of v2 settled on instead -- rounded panels with space between them, and
   pills for anything you click -- so the page belongs to the same site as the
   header sitting above it. */

/* Full width, not a split.

   The masthead was two columns: the headline left, the figures right. At this
   type size the headline never filled its half, and the figures never filled
   theirs, so the block read as two panels with a hole between them and dead
   space under both. One column of copy with the figures as a row underneath
   uses the width the type was drawn for. */
.nst-hmast { padding: 40px var(--gutter) 0; }
/* No cap: the headline runs the full measure, so its last line ends level with
   the band of figures under it rather than stopping short of them. */
.nst-hmast__lede { max-width: none; }
/* One line, reading across.

   Stacked over three lines this filled the screen before a reader reached
   anything else on the page. Set across, the same words are a single statement
   and the masthead is a band rather than a wall. cqw so the type tracks the
   masthead's own width -- it shrinks with the container instead of the window,
   which keeps the gutters honest. */
.nst-hmast { container-type: inline-size; }
.nst-hmast__title { margin: 14px 0 0; font-family: var(--cond); font-size: clamp(30px, 5.7cqw, 92px); font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.nst-hmast__body { margin: 18px 0 0; max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--muted); }
.nst-hmast__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 24px; }

/* The figures read across, so they are a band rather than a stack in a column
   that had nothing else to fill it. */
.nst-hmast__figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 30px; }
.nst-hfig { padding: 20px 22px; background: #0e0e12; border-radius: var(--r); }
/* The discount leads the row: orange edge rather than another panel. */
.nst-hfig--lead { background: linear-gradient(180deg, rgba(255,74,21,.14), rgba(255,74,21,.04)); box-shadow: inset 0 0 0 1px rgba(255,74,21,.28); }
.nst-hfig--lead .nst-hfig__value { color: var(--orange); }
/* 1.05, not 1: at this size a line box of exactly one em shaves the round
   bottoms off 0 and 2. */
.nst-hfig__value { font-family: var(--cond); font-size: 44px; font-weight: 700; line-height: 1.05; }
.nst-hfig__label { padding-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: #6d6d76; }
/* The grid is the parent now; this wrapper only existed to stack a column. */
.nst-hfig__grid { display: contents; }
.nst-hmast__foot { padding: 14px 2px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #6d6d76; }

/* Jump bar. Scrolls sideways rather than wrapping, so the row stays one line
   however many markets the network adds. */
/* Pills, the same shape the header and Watch use. The row no longer needs a
   rule under it -- the section below starts far enough away to read as next. */
.nst-hjump { display: flex; align-items: center; gap: 8px; padding: 28px var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
.nst-hjump::-webkit-scrollbar { display: none; }
.nst-hjump__label { flex-shrink: 0; padding-right: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: #6d6d76; }
.nst-hjump__chip { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 18px; border: 1px solid #2a2a32; border-radius: var(--r-pill); background: #101014; font-family: var(--cond); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.nst-hjump__chip span { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.nst-hjump__chip:hover span { color: var(--muted); }
.nst-hjump__chip.is-on span { color: rgba(10,10,10,.62); }
.nst-hjump__chip:hover { color: var(--text); border-color: #3d3d47; }
.nst-hjump__chip.is-on { background: var(--orange); border-color: var(--orange); color: #08080a; }
.nst-hjump__chip.is-on:hover { color: #08080a; }

/* The lead property: picture left, the case for it right. */
/* One rounded panel split in two, rather than two blocks divided by rules. */
/* The picture carries this, so it takes most of the width and the copy sits in
   a column that its length actually fills. */
.nst-hfeature { display: grid; grid-template-columns: 1.9fr 1fr; margin: 18px var(--gutter) 0; background: #0e0e12; border-radius: var(--r); overflow: hidden; }
.nst-hfeature__shot { position: relative; min-height: 400px; background: var(--hatch); overflow: hidden; }
.nst-hfeature__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nst-hfeature__scrim { position: absolute; inset: 0; background: linear-gradient(#0000 40%, rgba(8,8,10,.99)); }
.nst-hfeature__flag { position: absolute; top: 20px; left: 22px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--orange); color: #08080a; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.nst-hfeature__plate { position: absolute; left: 26px; right: 26px; bottom: 26px; }
.nst-hfeature__where { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.nst-hfeature__name { padding-top: 8px; font-family: var(--cond); font-size: clamp(34px, 4vw, 58px); font-weight: 700; text-transform: uppercase; line-height: .95; }

.nst-hfeature__body { display: flex; flex-direction: column; justify-content: center; padding: 32px 30px; }
.nst-hfeature__rating { display: flex; align-items: baseline; gap: 12px; }
.nst-hfeature__score { font-family: var(--cond); font-size: 56px; font-weight: 700; line-height: 1.05; color: var(--orange); }
.nst-hfeature__reviews { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #8b8b93; }
.nst-hfeature__text { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--muted); }
.nst-hfeature__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 24px; }

/* One market, one table. */
.nst-hregion { padding: 48px var(--gutter) 0; scroll-margin-top: 20px; }
/* No rule under the heading: the cards below start their own shape. */
.nst-hregion__head { display: flex; align-items: baseline; gap: 20px; padding-bottom: 16px; }
.nst-hregion__head h2 { margin: 0; font-family: var(--cond); font-size: clamp(34px, 4vw, 52px); font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.nst-hregion__meta { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: #6d6d76; }

/* Each property is a panel. The old rows were separated by hairlines, which
   made the section read as a spreadsheet rather than a set of places. */
.nst-hrow { display: grid; grid-template-columns: 200px 1fr 150px 170px; align-items: center; gap: 24px; margin-bottom: 10px; padding: 16px; background: #0e0e12; border-radius: var(--r); transition: background .16s ease, transform .16s ease; }
.nst-hrow:hover { background: #14141a; transform: translateY(-2px); }
.nst-hrow__shot { height: 124px; background: var(--hatch); border-radius: var(--r-sm); overflow: hidden; }
.nst-hrow__shot img { width: 100%; height: 100%; object-fit: cover; }
.nst-hrow__name { font-family: var(--cond); font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; text-transform: uppercase; line-height: 1.02; }
.nst-hrow__where { padding-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: #8b8b93; text-transform: uppercase; }
.nst-hrow__score { font-family: var(--cond); font-size: 32px; font-weight: 700; line-height: 1.05; color: var(--orange); }
.nst-hrow__reviews { padding-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #6d6d76; }
.nst-hrow__book { justify-content: center; text-align: center; }

/* The closing note: why the link goes where it goes. */
/* The orange edge stays -- it is an accent, not a divider -- but the block is
   rounded like every other panel. */
.nst-hnote { display: flex; align-items: center; gap: 28px; margin: 56px var(--gutter) 0; padding: 34px; background: #0e0e12; border-radius: var(--r); box-shadow: inset 3px 0 0 var(--orange); }
.nst-hnote__title { margin: 0; font-family: var(--cond); font-size: 40px; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.nst-hnote__body { margin: 8px 0 0; max-width: 760px; font-size: 17px; line-height: 1.5; color: #8b8b93; }
.nst-hnote .nst-btn { margin-left: auto; white-space: nowrap; }

.nst-foot { display: flex; align-items: center; gap: 20px; padding: 26px var(--gutter) 34px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #6d6d76; }
.nst-foot span:last-child { margin-left: auto; color: #8b8b93; }

@media (max-width: 1080px) {
  .nst-hfeature { grid-template-columns: 1fr; }
  .nst-hmast__figures { grid-template-columns: repeat(2, 1fr); }
  /* The picture leads on a narrow screen, so the rating drops under the name
     rather than beside it. */
  .nst-hrow { grid-template-columns: 140px 1fr; grid-template-areas: "shot id" "shot rating" "book book"; row-gap: 12px; }
  .nst-hrow__shot { grid-area: shot; height: 100%; min-height: 120px; }
  .nst-hrow__id { grid-area: id; }
  .nst-hrow__rating { grid-area: rating; display: flex; align-items: baseline; gap: 10px; }
  .nst-hrow__reviews { padding-top: 0; }
  .nst-hrow__book { grid-area: book; }
}
@media (max-width: 680px) {
  .nst-hnote { flex-direction: column; align-items: flex-start; }
  .nst-hnote .nst-btn { margin-left: 0; }
  .nst-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nst-foot span:last-child { margin-left: 0; }
}