/* ==========================================================================
   Jonshan Safari: packages
   Loaded only on /packages/. Everything structural comes from base.css and
   home.css; this file is the night hero, the two package bands, the teal
   shared-inclusions strip and the comparison table.
   ========================================================================== */

/* ---------- hero: the night itself ----------
   The other two pages open on the painted dunes. This one opens on the ground
   the product is actually made of, which is also the only way to put a price
   this large on the page without it landing on a dune band that cannot carry
   dark text. See the note in page-packages.php for why the artwork is not
   simply cut down a third time. */
.pk-hero{
  position:relative;
  padding:clamp(120px,12.5vw,158px) 0 clamp(56px,7vw,84px);
  background:linear-gradient(180deg,#2C1A0A 0%,#1B1006 100%);
  color:var(--cream);
  overflow:hidden;
}

/* The homepage's open-air card carries eight stars behind its glass. The same
   eight, given a background-size so they tile instead of rattling around in a
   band this wide. */
.pk-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-size:520px 400px;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%,#FBEFD6 50%,transparent 51%),
    radial-gradient(1px 1px at 62% 14%,#F3E2C0 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 84% 34%,#FFF8E8 50%,transparent 51%),
    radial-gradient(1px 1px at 34% 46%,#EBD9B4 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 74% 58%,#FBEFD6 50%,transparent 51%),
    radial-gradient(1px 1px at 12% 68%,#E4D0A8 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 80%,#FFF8E8 50%,transparent 51%),
    radial-gradient(1px 1px at 90% 76%,#EBD9B4 50%,transparent 51%);
}
.pk-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.12;
}

.pk-hero__in{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gut);
  display:grid;gap:clamp(30px,4vw,50px);
  grid-template-areas:"copy" "price" "cta";
}
.pk-hero__copy{grid-area:copy}
.pk-hero__cta{grid-area:cta}
.pk-hero .h1{color:var(--cream);max-width:13ch}
.pk-hero__lede{
  margin-top:22px;max-width:46ch;
  font-size:clamp(18px,1.6vw,21px);line-height:1.55;
  color:var(--muted-lt);
}

/* The price sits between the sentence and the button on a phone, because it is
   the answer the visitor came for and a button is no use before it. On a wider
   screen it moves into its own column and settles on the baseline of the CTA. */
@media (min-width:900px){
  .pk-hero__in{
    grid-template-columns:minmax(0,1fr) minmax(0,auto);
    grid-template-areas:"copy price" "cta price";
    column-gap:clamp(48px,6vw,90px);
    row-gap:34px;
  }
  .pk-price{align-self:end}
}

/* ---------- the price, said once ----------
   One figure for both beds, so it is stated once here rather than twice in two
   cards. A sun-coloured rule over it instead of a box: this is the loudest
   thing on the page and it does not need a container to prove it. */
.pk-price{
  grid-area:price;
  margin:0;max-width:17rem;
  padding-top:18px;
  border-top:2px solid var(--sun);
}
.pk-price__from{
  display:block;
  font:500 15px/1 var(--body);color:var(--muted-lt);
}
.pk-price__n{
  display:block;margin-top:8px;
  font-family:var(--display);font-weight:400;
  font-size:clamp(50px,6.6vw,76px);line-height:.96;
  letter-spacing:-.035em;color:var(--sun);
  font-variation-settings:'opsz' 96,'SOFT' 20,'WONK' 1;
}
/* The no-price fallback is words, not a number, and words at 76px are a shout. */
.pk-price__n--word{
  margin-top:0;
  font-size:clamp(28px,3.4vw,38px);line-height:1.1;
  color:var(--cream);letter-spacing:-.02em;
}
.pk-price__q{
  display:block;margin-top:12px;
  font-size:15px;line-height:1.5;color:var(--muted-lt);
}

/* ---------- the two packages ----------
   One band each, at the width of the page, with the photograph changing sides
   between them. The homepage already owns the dark-card/light-card pairing;
   here the two are told apart by side and by a half-step of warmth in the
   ground, which is enough after a hero that was fully dark. */
.pk-pack__in{display:grid;gap:clamp(26px,4vw,44px);align-items:center}
.pk-pack .arch__frame{aspect-ratio:4/3}

/* Stacked, the frame would otherwise take the full width of the wrap, about
   700px on a tablet, from source files 587 and 588 across. Capped at the width
   these photographs still look sharp at, which is the whole reason the layout
   frames them in arches, and centred so the space beside it reads as chosen. */
@media (max-width:899px){
  .pk-pack__fig{max-width:560px;margin-inline:auto}
}

@media (min-width:900px){
  .pk-pack__in{
    grid-template-columns:minmax(0,400px) minmax(0,1fr);
    gap:clamp(44px,5.5vw,80px);
  }
  /* The track order flips with the photograph, not just the order property.
     Moving the figure to the second cell alone left it in the 1fr track, 636px
     on a wide screen, from a source file 588px across, which is the one thing
     the arch sizing exists to prevent. */
  .pk-pack--flip .pk-pack__in{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  .pk-pack--flip .pk-pack__fig{order:2}
}

.pk-list{margin-top:24px;display:grid;gap:11px}
.pk-list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:16px;line-height:1.55;color:var(--ink);
}
.pk-list svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gold-dk)}

.pk-pack__foot{
  margin-top:28px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:20px 28px;
  align-items:center;justify-content:space-between;
}
.pk-pack__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px}
.pk-pack__price span{font-size:15px;color:var(--muted)}
.pk-pack__price b{
  font-family:var(--display);font-weight:400;font-size:32px;
  letter-spacing:-.02em;color:var(--bark);
  font-variation-settings:'opsz' 40,'SOFT' 24,'WONK' 0;
}
.pk-pack__price i{
  flex-basis:100%;margin-top:2px;
  font-style:normal;font-size:14px;color:var(--muted);
}

/* ---------- what does not differ ----------
   The one place the logo's teal is spent. It is in the client's painted mark
   and has sat unused in base.css since the site was built; giving it the
   "identical either way" strip means this page carries a colour the other two
   do not, without importing one from outside the brand.

   Text and glyphs take --teal-dk. The logo's own #2E8B8E reaches only 3.6:1 on
   this ground, which is fine for a rule and short of it for anything read. */
.pk-same{
  margin-bottom:clamp(34px,4.4vw,54px);
  padding-bottom:22px;
  border-top:2px solid var(--teal);
  padding-top:20px;
  border-bottom:1px solid var(--rule);
}
.pk-same__h{
  font-family:var(--display);font-weight:400;font-size:19px;
  letter-spacing:-.008em;color:var(--teal-dk);
  font-variation-settings:'opsz' 24,'SOFT' 22,'WONK' 0;
}
.pk-same__list{margin-top:15px;display:grid;gap:10px 30px}
.pk-same__list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:16px;line-height:1.5;color:var(--ink);
}
.pk-same__list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--teal-dk)}
@media (min-width:620px){.pk-same__list{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.pk-same__list{grid-template-columns:repeat(4,1fr)}}

/* ---------- the difference ----------
   A real table, because this genuinely is tabular: two options measured against
   five of the same questions. It is the one multi-column reading on the site. */
.pk-diff{width:100%;border-collapse:collapse;text-align:left}
.pk-diff th,.pk-diff td{vertical-align:top}

@media (min-width:760px){
  .pk-diff{table-layout:fixed}
  /* The only width set. Fixed layout splits what is left between the two
     option columns, so they stay equal however long the answers run. */
  .pk-diff thead td{width:10rem}
  .pk-diff thead th{
    padding:0 26px 14px 0;
    font-family:var(--display);font-weight:400;font-size:21px;
    letter-spacing:-.014em;color:var(--bark);
    font-variation-settings:'opsz' 32,'SOFT' 28,'WONK' 0;
  }
  .pk-diff thead tr{border-bottom:1px solid var(--rule)}
  .pk-diff tbody tr{border-bottom:1px solid var(--rule)}
  .pk-diff tbody th{
    padding:20px 26px 20px 0;
    font:500 15px/1.5 var(--body);color:var(--muted);
  }
  .pk-diff tbody td{
    padding:20px 26px 20px 0;
    font-size:16.5px;line-height:1.6;color:var(--ink);
  }
  /* One hairline down the split. The row rules already separate the questions;
     this is the only mark saying where the two answers part. */
  .pk-diff thead th:last-child,
  .pk-diff tbody td:last-child{
    padding-right:0;padding-left:26px;
    border-left:1px solid var(--rule);
  }
  .pk-diff__who{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
}

/* Stacked, with each answer naming its own column.
   The label is a real element rather than generated content, so it is read out
   as well as seen: a table switched to display:block loses its column headers
   for some screen readers, and this is what puts them back. */
@media (max-width:759px){
  .pk-diff thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .pk-diff,.pk-diff tbody,.pk-diff tr,.pk-diff th,.pk-diff td{
    display:block;width:auto;
  }
  .pk-diff tbody tr{padding:20px 0;border-bottom:1px solid var(--rule)}
  .pk-diff tbody tr:first-child{border-top:1px solid var(--rule)}
  .pk-diff tbody th{
    margin-bottom:13px;
    font-family:var(--display);font-weight:400;font-size:20px;
    letter-spacing:-.014em;color:var(--bark);
    font-variation-settings:'opsz' 32,'SOFT' 28,'WONK' 0;
  }
  .pk-diff tbody td{font-size:16px;line-height:1.6;color:var(--ink)}
  .pk-diff tbody td + td{margin-top:14px}
  .pk-diff__who{
    display:block;margin-bottom:1px;
    font:600 13px/1.4 var(--body);color:var(--gold-dk);
  }
}