/* A weekend told in photographs; the page is the paper they are printed on. */
:root {
  --paper: oklch(95.5% 0.014 82);
  --paper-2: oklch(91% 0.018 80);
  --ink: oklch(21% 0.014 60);
  --ink-soft: oklch(45% 0.014 65);
  --line: oklch(84% 0.016 78);
  --stamp: oklch(73% 0.18 52); /* the orange date a film camera prints in the corner */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gut: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- top bar: small paper chips that read over any photo ----------
   No backdrop blur here or on the caption: over a photo that scales every frame,
   the blur is redone every frame and a phone drops frames. */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) var(--gut) 0;
  pointer-events: none;
}
.bar > * {
  pointer-events: auto;
  background: oklch(95.5% 0.014 82 / 0.93);
  border-radius: 99px; height: 38px; display: inline-flex; align-items: center; margin: 0;
}
.mark { padding: 0 16px; text-decoration: none; font: 600 15px/1 var(--sans); letter-spacing: -0.01em; }
.mark span { font: italic 400 17px/1 var(--serif); margin-left: 0.2em; }
.fits { padding: 0 14px; font-size: 13px; color: var(--ink-soft); }
.pack {
  margin-left: auto; padding: 0 6px 0 16px; gap: 10px; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600;
}
.pack b {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font: 500 13px/1 var(--mono);
}
.pack.bump b { animation: bump 0.45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); background: var(--stamp); } }

/* ---------- the long Friday shot ---------- */
/* Every chapter ends with a screen of scroll where the next photo slides up over it. */
.trip { height: 440vh; position: relative; }
.stage {
  /* lvh: a phone's toolbar sliding away must not change the stage, or the push would jump */
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden;
  background: oklch(30% 0.02 60);
  container-type: size;
}
/* The photo plate covers the stage like object-fit: cover, but keeps the image's own
   coordinates, so the hotspots and the push-in stay pinned to the picture. */
.plate {
  --w: max(100cqw, 150cqh);
  position: absolute; width: var(--w); aspect-ratio: 3 / 2;
  left: calc((100cqw - var(--w)) * var(--fx, 0.54));
  top: calc((100cqh - var(--w) / 1.5) * var(--fy, 0.62));
}
.shot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#wide, #trunk {
  transform-origin: 57.9% 86%; /* scaled about this point, the photo ends framed on the trunk */
  will-change: transform, opacity;
}
.trunk { opacity: 0; }

.lede {
  position: absolute; left: var(--gut); top: clamp(84px, 14vh, 150px); margin: 0;
  max-width: 34rem; will-change: opacity, transform;
}
.lede h1 {
  margin: 0; font: 400 clamp(46px, 7.4vw, 124px)/0.92 var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 60; letter-spacing: -0.035em;
  white-space: nowrap; /* "Leave Friday." and "Back Sunday." each stay whole; the <br> splits them */
}
.lede h1 em { font-style: italic; font-weight: 300; }
.lede p { margin: 22px 0 0; max-width: 23rem; font-size: 17px; line-height: 1.45; }

.cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); margin: 0;
  font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cue::after {
  content: ""; width: 1px; height: 34px; background: currentColor;
  transform-origin: top; animation: drip 1.8s var(--ease) infinite;
}
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.stamp {
  position: absolute; right: var(--gut); bottom: 22px; margin: 0;
  font: 500 clamp(15px, 1.5vw, 20px)/1 var(--mono); letter-spacing: 0.06em; color: var(--stamp);
  text-shadow: 0 0 6px oklch(73% 0.18 52 / 0.7), 0 0 1px oklch(85% 0.12 60);
  opacity: 0.92; white-space: pre;
}

.caption {
  position: absolute; left: var(--gut); bottom: 64px; width: min(25rem, calc(100cqw - 2 * var(--gut)));
  padding: 18px 20px 20px; border-radius: 16px;
  background: oklch(95.5% 0.014 82 / 0.95);
  opacity: 0; will-change: opacity, transform;
}
.caption .where { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.caption h2 { margin: 8px 0 6px; font: 400 30px/1.05 var(--serif); font-variation-settings: "opsz" 72, "SOFT" 60; letter-spacing: -0.02em; }
.caption p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.caption .hint {
  margin-top: 12px; display: flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.hint i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; }
.hint i::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }

/* ---------- the rest of the weekend ---------- */
/* Pulled up a screen so each photo slides in over the last one while that one holds still. */
.ch { height: 280vh; position: relative; margin-top: -100vh; margin-top: -100lvh; }
.ch .stage { box-shadow: 0 -24px 60px oklch(15% 0.02 60 / 0.4); }
.frame { position: absolute; inset: 0; transform-origin: var(--o, 50% 60%); will-change: transform; }
.shade {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: oklch(14% 0.01 60); opacity: 0; will-change: opacity;
}
.caption.right { left: auto; right: var(--gut); }
.caption.mid { left: calc((100cqw - min(25rem, calc(100cqw - 2 * var(--gut)))) / 2); }

/* ---------- hotspots ---------- */
.spots { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.spots.live { pointer-events: auto; }
.spot {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; background: none; cursor: pointer; display: grid; place-items: center;
}
.spot i {
  width: 26px; height: 26px; border-radius: 50%;
  background: oklch(20% 0.01 60 / 0.35); border: 2px solid var(--paper);
  box-shadow: 0 2px 10px oklch(20% 0.02 60 / 0.4);
  display: grid; place-items: center; transition: background 0.25s, border-color 0.25s;
}
.spot i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); }
.spot::before {
  content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--paper); animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
.spot.packed i { background: var(--stamp); border-color: var(--stamp); }
.spot.packed i::after { width: 10px; height: 6px; border-radius: 0; background: none; border: solid var(--paper); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.spot.packed::before { animation: none; opacity: 0; }
.spot .tag {
  position: absolute; left: 40px; white-space: nowrap; padding: 5px 10px; border-radius: 99px;
  background: var(--paper); font-size: 13px; font-weight: 600;
  opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s var(--ease);
  pointer-events: none;
}
.spot:hover .tag, .spot:focus-visible .tag { opacity: 1; transform: none; }
.carded .spot .tag { opacity: 0; }

/* ---------- product card ---------- */
.card {
  position: fixed; z-index: 30; width: 264px; padding: 12px 12px 14px; border-radius: 18px;
  background: var(--paper); box-shadow: 0 18px 50px oklch(20% 0.02 60 / 0.35);
  animation: rise 0.3s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.card-pic { height: 132px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; }
.card-pic img { max-width: 78%; max-height: 104px; object-fit: contain; }
.card h3 { margin: 12px 4px 2px; font: 600 17px/1.2 var(--sans); }
.card-sub { margin: 0 4px 12px; display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); }
.card-sub span:last-child { font: 500 14px/1.4 var(--mono); color: var(--ink); }
.card-go {
  width: 100%; height: 42px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--ink); color: var(--paper); font-weight: 600;
}
.card-go.out { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.x {
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: none; font-size: 22px; line-height: 1; color: var(--ink-soft);
}
.card .x { position: absolute; top: 16px; right: 16px; z-index: 1; }

/* ---------- the contact sheet: the last print slid over Sunday ---------- */
.sheet {
  position: relative; margin-top: -100vh; margin-top: -100lvh;
  padding: clamp(64px, 9vw, 120px) var(--gut) 0;
  background: var(--paper); box-shadow: 0 -24px 60px oklch(15% 0.02 60 / 0.4);
}
.sheet > * { max-width: 76rem; margin-left: auto; margin-right: auto; }
.eyebrow { margin-bottom: 18px; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.eyebrow .t { margin-right: 12px; color: var(--stamp); white-space: pre; }
.sheet h2 {
  margin-top: 0; margin-bottom: 0; font: 400 clamp(40px, 6.4vw, 96px)/0.95 var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 60; letter-spacing: -0.035em; text-wrap: balance;
}
.sheet-sub { margin-top: 18px; margin-bottom: clamp(32px, 5vw, 56px); font-size: 17px; color: var(--ink-soft); }
.tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.tile {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left;
  padding: 12px 12px 14px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--paper-2); box-shadow: inset 0 0 0 1.5px transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.2s;
}
.tile:hover { transform: translateY(-3px); }
.tile .t { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--stamp); white-space: pre; }
.tile .pic { aspect-ratio: 4 / 3; margin: 6px 0 10px; display: grid; place-items: center; }
.tile .pic img { max-width: 76%; max-height: 86%; object-fit: contain; }
.tile .nm { font-weight: 600; font-size: 16px; line-height: 1.2; }
.tile .meta { margin-top: 4px; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.tile .meta b { font: 500 13px/1.4 var(--mono); color: var(--ink); }
.tile::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-soft);
}
.tile.in { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tile.in::after {
  background: var(--stamp) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5 4.5 8 11 1' fill='none' stroke='%23f7f1e8' stroke-width='2'/%3E%3C/svg%3E");
  box-shadow: none;
}
.sheet-foot {
  margin-top: clamp(24px, 3vw, 36px); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.sheet-foot p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.sheet .cta { border: 0; cursor: pointer; padding: 13px 26px; font-size: 15px; }
.foot { margin-top: clamp(56px, 8vw, 96px); padding: 22px 0 max(26px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.foot p { margin: 0 0 6px; max-width: 46rem; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }

/* ---------- packing list ---------- */
.list {
  position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
  display: flex; flex-direction: column; padding: 22px 22px 18px; overflow-y: auto;
  background: var(--paper); box-shadow: -20px 0 60px oklch(20% 0.02 60 / 0.25);
  animation: slide 0.35s var(--ease);
}
.list[hidden] { display: none; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.list-head { display: flex; justify-content: space-between; align-items: center; }
.list-head h2 { margin: 0; font: 400 30px/1 var(--serif); font-variation-settings: "opsz" 72, "SOFT" 60; letter-spacing: -0.02em; }
.list-sub { margin: 6px 0 14px; font-size: 14px; color: var(--ink-soft); }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); flex: 1; }
.row { border-bottom: 1px solid var(--line); }
.row button {
  width: 100%; display: grid; grid-template-columns: 26px 46px 1fr auto; gap: 12px; align-items: center;
  padding: 9px 0; border: 0; background: none; cursor: pointer; text-align: left;
}
.tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-soft); position: relative; }
.row.in .tick { background: var(--stamp); border-color: var(--stamp); }
.row.in .tick::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 8px; height: 5px;
  border: solid var(--paper); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.row .pic { width: 46px; height: 46px; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; }
.row .pic img { max-width: 80%; max-height: 80%; object-fit: contain; }
.row .nm { font-weight: 600; font-size: 15px; line-height: 1.2; }
.row .when { display: block; margin-top: 3px; font: 500 11px/1 var(--mono); letter-spacing: 0.05em; color: var(--ink-soft); }
.row .pr { font: 500 14px/1 var(--mono); }
.row:not(.in) .nm, .row:not(.in) .pr { color: var(--ink-soft); }
.sum { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 12px; color: var(--ink-soft); }
.sum b { font: 500 22px/1 var(--mono); color: var(--ink); }
.cta {
  display: block; text-align: center; text-decoration: none; padding: 13px; border-radius: 99px;
  background: var(--ink); color: var(--paper); font-weight: 600;
}
.fine { margin: 12px 0 0; font-size: 12px; color: var(--ink-soft); }
.legal { font-size: 11px; line-height: 1.4; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .fits { display: none; }
  /* A tall screen would crop the wide shot down to the trunk and lose the coast. Instead the
     photo sits low and wide, and its sky runs on up the screen to carry the headline. */
  .stage { background: linear-gradient(var(--sky-a, oklch(75% 0.07 248)), var(--sky-b, oklch(78% 0.06 245)) 40%); }
  .plate {
    --w: var(--pw, 175cqw); top: auto; bottom: 0; left: calc((100cqw - var(--w)) * 0.5);
    -webkit-mask-image: linear-gradient(transparent, #000 14%); mask-image: linear-gradient(transparent, #000 14%);
  }
  /* just above the photo, which is --pw / 1.5 tall and fades in at the top */
  .caption, .caption.mid, .caption.right { left: var(--gut); right: auto; bottom: calc(var(--pw, 175cqw) / 1.5 - 4cqw); }
  .lede { top: 78px; right: var(--gut); }
  .lede h1 { font-size: clamp(44px, 14.5vw, 64px); }
  .lede p { font-size: 15px; margin-top: 14px; max-width: 19rem; }
  .caption { padding: 14px 16px 16px; }
  .caption h2 { font-size: 25px; }
  .caption p { font-size: 14px; }
  .stamp { bottom: calc(100lvh - 100svh + 16px); } /* clear of the toolbar while it shows */
  .cue { display: none; }
  .spot .tag { display: none; }
  .card { left: 12px !important; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); top: auto !important; width: auto; display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; align-items: center; }
  .card[hidden] { display: none; }
  .card-pic { height: 112px; grid-row: span 3; }
  .card h3 { margin: 0 32px 2px 0; }
  .card-sub { margin: 0 0 10px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile .nm { font-size: 15px; }
  .tile .meta { flex-direction: column; gap: 2px; }
  .sheet-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .list { top: auto; height: 86svh; width: 100vw; border-radius: 20px 20px 0 0; animation-name: lift; }
  @keyframes lift { from { transform: translateY(40px); opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .spot::before, .cue::after { animation: none; }
}