/* thedesti.app: desti's own brand.
   Colors and type are the App Store panel renderer's themes, exactly. */
@font-face { font-family: "Fraunces"; src: url(assets/fonts/fraunces-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Outfit"; src: url(assets/fonts/outfit-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: only light;
  --c1: #FDFAF2;            /* cream field, top */
  --c2: #FAEEDA;            /* cream field, bottom: desti tan */
  --ink: #1A1A2E;           /* headline ink */
  --olive: #6B8A2A;         /* accent and the download button (locked fill) */
  --olive-press: #567122;
  --olive-2: #4E661F;       /* olive field, bottom */
  --sub: #5A6275;           /* sublines */
  --rule: rgba(26, 26, 46, .14);
  --shadow: rgba(26, 26, 46, .22);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --text: "Outfit", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4.2vw, 64px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: linear(0, .42 9%, .84 21%, 1.02 33%, 1.05 41%, 1.01 55%, .99 70%, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #FAEEDA; }
body { margin: 0; color: var(--ink); font: 400 1.0625rem/1.55 var(--text); background: var(--c2); }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; border-radius: 8px; }

/* the cream field: the panels' own gradient */
.field { background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%); }

/* ---------- nav ---------- */
/* on the content grid: .wrap is min(1240px, 100% - 2 x gutter), centered */
.nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 84px; padding: 0 max(var(--gutter), calc((100% - 1240px) / 2)); }
.nav__mark img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav__links a:not(.btn) { font: 500 1.0625rem/1 var(--text); text-decoration: none; color: var(--ink); padding: 12px 0; }

/* ---------- the olive button (resting fill locked olive; a real hover darkens it a step, as on the earlier homepage; label cream, 19px bold = large text) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border-radius: 14px; border: 1px solid transparent;
  background: var(--olive); color: var(--c2); font: 700 1.1875rem/1.1 var(--text); text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(78, 102, 31, .7); transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
@media (hover: hover) { .btn:hover { background: var(--olive-press); } }
.btn:active { transform: scale(.98); }
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn--sm { min-height: 48px; padding: 0 20px; font-size: 1.1875rem; border-radius: 12px; box-shadow: none; }
.free { margin: 12px 0 0; font: 400 1rem/1.4 var(--text); color: var(--sub); }

/* ---------- the lockup: the locked slogan, the second line olive ---------- */
.lockup { margin: 0; font: 700 var(--lk, clamp(2.75rem, 1.4rem + 4.2vw, 5.5rem))/1.0 var(--display); font-variation-settings: "opsz" 36; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.lockup span { display: block; }
.lockup .ol { color: var(--olive); }
.sub { margin: 22px 0 0; max-width: 38ch; font: 400 clamp(1.125rem, 1rem + .3vw, 1.25rem)/1.5 var(--text); color: var(--sub); text-wrap: pretty; }

/* ---------- the iPhone: a real app screen in a drawn device ---------- */
.iphone { --pw: 320px; position: relative; width: var(--pw); padding: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .165); background: #0c0c0e;
  box-shadow: 0 1px 0 1px #2a2a2e inset, 0 40px 70px -28px rgba(26, 26, 46, .55), 0 18px 30px -18px rgba(26, 26, 46, .35); }
.iphone::before { content: ""; position: absolute; left: calc(var(--pw) * -.012); top: 22%; width: calc(var(--pw) * .014); height: 8%; border-radius: 2px; background: #1c1c1f; box-shadow: 0 calc(var(--pw) * .2) 0 #1c1c1f; }
.iphone::after { content: ""; position: absolute; right: calc(var(--pw) * -.012); top: 28%; width: calc(var(--pw) * .014); height: 12%; border-radius: 2px; background: #1c1c1f; }
.iphone__screen { position: relative; overflow: hidden; border-radius: calc(var(--pw) * .135); aspect-ratio: 1320 / 2868; background: #fdfaf2; }
.iphone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iphone__island { position: absolute; z-index: 2; top: calc(var(--pw) * .055); left: 50%; translate: -50% 0; width: 31%; height: calc(var(--pw) * .088); border-radius: 999px; background: #000; }

/* ---------- a print: one of the founders' trip photos, with its place and score ---------- */
.print { --w: 220px; --rot: 0deg; position: absolute; width: var(--w); padding: calc(var(--w) * .045); border-radius: calc(var(--w) * .085); background: #fffdf8;
  box-shadow: 0 1px 2px rgba(26, 26, 46, .08), 0 24px 44px -22px var(--shadow), 0 10px 18px -12px rgba(26, 26, 46, .18); rotate: var(--rot); }
.print__photo { position: relative; overflow: hidden; border-radius: calc(var(--w) * .045); aspect-ratio: 4 / 5; }
.print__photo img { width: 100%; height: 100%; object-fit: cover; }
.print__photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(to top, rgba(10, 12, 20, .72), rgba(10, 12, 20, .32) 45%, rgba(10, 12, 20, 0)); }
.print__label { position: absolute; z-index: 1; left: calc(var(--w) * .05); right: calc(var(--w) * .05); bottom: calc(var(--w) * .05); display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; color: #fff; }
.print__label b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 2px; font: 700 19px/1 var(--display); font-variation-settings: "opsz" 36; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.chip { flex: none; display: inline-block; padding: .32em .5em .28em; border-radius: .45em; color: #fff; font: 800 max(19px, calc(var(--w) * .085))/1 var(--text); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .35); }

/* ---------- entrances: soft, once, never hiding content without script ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .settle { animation: settle 900ms var(--spring) both; animation-delay: var(--d, 0ms); }
  .js .rise { animation: rise 1000ms var(--ease) both; animation-delay: var(--d, 0ms); }
}
@keyframes settle { from { translate: 0 18px; rotate: calc(var(--rot) * 1.8); } to { translate: 0 0; rotate: var(--rot); } }
@keyframes rise { from { transform: translateY(36px); } to { transform: none; } }

/* the phone's screen: a slow crossfade through the app's own screens */
.cycle img { opacity: 0; transition: opacity 900ms var(--ease); }
.cycle img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cycle img { transition: none; } }

/* on phones the phone fades out at the bottom of the first screen instead of being sliced */
@media (max-width: 760px) { .fadeout { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); } }
.print--r .print__label { flex-direction: row-reverse; }

/* small prints on phones: the name gives way so the score is never cut */
@media (max-width: 760px) { .print__label b { font-size: 17px; } .print__label { gap: 6px; } }

@media (forced-colors: active) { .btn, .print, .iphone { border: 1px solid CanvasText; } }