/* DaDa Mod / Delish List
 *
 * The page is a collage, so each breakpoint is its Figma frame: a fixed-size
 * artboard scaled to fit the screen. --u is one Figma pixel at the current
 * screen width, and everything is sized in multiples of it.
 *
 *   phone    under 744px     iPhone frame, 402 wide, grows to 540px at most
 *   tablet   744 to 1399px   iPad frame, 834 wide, grows to 1100px at most
 *   desktop  1400px and up   MacBook frame, 1728 wide, centered above that
 *
 * To move something, change its --x / --y in the matching section below.
 */

@font-face { font-family: "Jolly Lodger"; src: url("assets/fonts/jolly-lodger-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Ledger"; src: url("assets/fonts/ledger-latin-400-normal.woff2") format("woff2"); font-display: swap; }
/* Stand-ins for devices without Impact (iOS, Android) or American Typewriter (Windows, Android). */
@font-face { font-family: "Anton"; src: url("assets/fonts/anton-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Zilla Slab"; font-weight: 400; src: url("assets/fonts/zilla-slab-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Zilla Slab"; font-weight: 700; src: url("assets/fonts/zilla-slab-latin-700-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --red: #b3181b;
  --ink: #333;
  --paper: #e8d2b7;
  --shadow: 0 4px 4px rgba(0, 0, 0, .3), 0 8px 12px 6px rgba(0, 0, 0, .15);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:has(.lightbox[open]) { overflow: hidden; }

body { margin: 0; background: #fff; color: var(--ink); }

img { display: block; }

.page { container-type: inline-size; }

.stage {
  position: relative;
  display: flow-root;
  width: calc(var(--frame) * var(--u));
  margin-inline: auto;
  padding-top: calc(var(--privacy-y) * var(--u));
  padding-bottom: calc(var(--foot) * var(--u));
  overflow-x: clip;
}

/* Anything on the artboard */
.place {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

.hero { overflow: hidden; }
.hero img { width: 100%; height: auto; }

.black-panel { background: #000; height: auto; bottom: calc(var(--b) * var(--u)); }

.woman, .boy { object-fit: cover; }

/* Text */
.headline-group { margin: 0; font: inherit; }

.headline {
  width: auto;
  height: auto;
  margin: 0;
  font-family: "Jolly Lodger", fantasy;
  font-size: calc(var(--fs) * var(--u));
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}
.hey, .apps { color: #fff; }
.why, .get { color: var(--red); }

.panel { background: var(--paper); padding: calc(20 * var(--u)); }

.intro { height: auto; min-height: calc(var(--h) * var(--u)); }

.privacy {
  position: relative;
  width: calc(var(--privacy-w) * var(--u));
  min-height: calc(var(--privacy-h) * var(--u));
  margin-left: calc(var(--privacy-x) * var(--u));
}

.copy {
  font-family: "American Typewriter", "Zilla Slab", Georgia, serif;
  font-size: calc(14 * var(--u));
  line-height: calc(16 * var(--u));
}
.copy h2, .copy h3 { margin: 0; color: var(--red); font-size: inherit; font-weight: 700; }
.copy p, .copy ul, .copy ol { margin: 0 0 calc(16 * var(--u)); padding: 0; }
.copy > :last-child { margin-bottom: 0; }
.copy li { margin-left: calc(21 * var(--u)); }
.copy .spaced { margin-bottom: calc(16 * var(--u)); }

.intro .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
  width: calc(105 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.intro .brand img { width: calc(91.75 * var(--u)); height: calc(117 * var(--u)); }
.intro .brand h2 {
  width: 100%;
  line-height: normal;
  font-family: Impact, "Anton", sans-serif;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  white-space: nowrap;
}

/* Screenshots */
.shots {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: calc(10 * var(--u));
  height: auto;
}
.shots a { display: block; box-shadow: var(--shadow); cursor: zoom-in; }
.shots a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.shots img { width: 100%; height: auto; aspect-ratio: 139 / 302; object-fit: cover; }

/* Red speech lines. Figma's angle is kept, their sizes are per frame. */
.line { max-width: none; transform: rotate(13.28deg); }

/* Logo, in Figma's three parts */
.logo { top: auto; bottom: calc(var(--b) * var(--u)); }
.logo img { position: absolute; }
.logo-bar  { top: 0; right: 26.54%; bottom: .01%; left: 27.24%; width: 46.22%; height: 99.99%; }
.logo-dada { top: 18.96%; right: 0; bottom: 61.65%; left: 0; width: 100%; height: 19.39%; }
.logo-mod  { top: 40.57%; right: .53%; bottom: 35.38%; left: .32%; width: 99.15%; height: 24.05%; }

/* Pointing hands */
.hand { --w: 98; --h: 44; transform: rotate(var(--turn)); }

/* Vertical taglines, read bottom to top */
.tagline {
  --w: 28;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Ledger", Georgia, serif;
  font-size: calc(20 * var(--u));
  line-height: 1;
  letter-spacing: calc(3.2 * var(--u));
  text-align: center;
  text-transform: uppercase;
  white-space: pre;
}
.tagline em { color: var(--red); font-style: normal; }
.tag-mod  { --h: 381; color: var(--mod-color); }
.tag-dada { --h: 347; color: var(--dada-color); }


/* Phone: iPhone 16 & 17 Pro frame */
.stage {
  --frame: 402;
  --u: min(100cqw / 402, 540px / 402);
  --privacy-x: 10; --privacy-y: 1968; --privacy-w: 263; --privacy-h: 2438;
  --foot: 22;
  --cols: 2;
  --mod-color: var(--ink);
  --dada-color: #fff;
}
.black-panel { --x: 67;  --y: 1019; --w: 273; --b: 254; }
.hero        { --x: 0;   --y: 0;    --w: 405; --h: 1081; }
.intro       { --x: 136; --y: 394;  --w: 264; --h: 1027; }
.hey         { --x: 75;  --y: 66;   --fs: 36; }
.apps        { --x: 97;  --y: 101;  --fs: 32; }
.why         { --x: 153; --y: 345;  --fs: 32; }
.get         { --x: 83;  --y: 1919; --fs: 32; }
.woman       { --x: 7;   --y: 303;  --w: 143; --h: 406; }
.boy         { --x: 225; --y: 1896; --w: 171; --h: 321; }
.shots       { --x: 58;  --y: 1296; --w: 288; }
.line-1      { --x: 100.7; --y: 347.6;  --w: 44.1; --h: 5; }
.line-2      { --x: 186.1; --y: 1932.3; --w: 84.6; --h: 19.45; }
.logo        { --x: 285; --b: 27; --w: 103; --h: 200; }
.hand-a      { --x: 256; --y: 2848; --turn: 90deg; }
.hand-b      { --x: 322; --y: 2992; --turn: -90deg; }
.tag-mod     { --x: 340; --y: 2579; }
.tag-dada    { --x: 308; --y: 2934; }


/* Tablet: iPad Pro 11" frame */
@media (min-width: 744px) {
  .stage {
    --frame: 834;
    --u: min(100cqw / 834, 1100px / 834);
    --privacy-x: 20; --privacy-y: 1833; --privacy-w: 485; --privacy-h: 1525;
    --foot: 49;
    --cols: 4;
  }
  .black-panel { --x: 136; --y: 2066; --w: 566; --b: 314; }
  .hero        { --w: 837; --h: 2236; }
  .intro       { --x: 327; --y: 783;  --w: 485; --h: 739; }
  .hey         { --x: 163; --y: 140;  --fs: 64; }
  .apps        { --x: 218; --y: 210;  --fs: 55; }
  .why         { --x: 327; --y: 706;  --fs: 55; }
  .get         { --x: 206; --y: 1759; --fs: 55; }
  .woman       { --x: 7;   --y: 597;  --w: 345; --h: 980; }
  .boy         { --x: 469; --y: 1726; --w: 343; --h: 644; }
  .shots       { --x: 206; --y: 1450; --w: 586; }
  .line-1      { --x: 233.4; --y: 710.6;  --w: 77.76;  --h: 10; }
  .line-2      { --x: 384.4; --y: 1799.2; --w: 173.32; --h: 19.51; }
  .logo        { --x: 555; --b: 76; --w: 96; --h: 187; }
  .hand-a      { --x: 586; --y: 2545; --turn: 0deg; }
  .hand-b      { --x: 716; --y: 2819; --turn: 180deg; }
  .tag-mod     { --x: 702; --y: 2375; }
  .tag-dada    { --x: 670; --y: 2730; }
}


/* Desktop: MacBook Pro 16" frame */
@media (min-width: 1400px) {
  .stage {
    --frame: 1728;
    --u: min(100cqw / 1728, 1px);
    --privacy-x: 840; --privacy-y: 1261; --privacy-w: 580; --privacy-h: 1461;
    --foot: 61;
    --mod-color: #fff;
    --dada-color: var(--ink);
  }
  .black-panel { display: none; }
  .hero        { --x: 173;  --w: 1383; --h: 2510; }
  .hey         { --x: 445;  --y: 220;  --fs: 128; }
  .apps        { --x: 543;  --y: 351;  --fs: 96; }
  .get         { --x: 1092; --y: 1167; }
  .boy         { --x: 1355; --y: 1134; }
  .line-2      { --x: 1270.4; --y: 1207.2; }
  .logo        { --x: 716;  --b: 61; }
  .hand-a      { --x: 289;  --y: 1956; }
  .hand-b      { --x: 419;  --y: 2249; }
  .tag-mod     { --x: 405;  --y: 1786; }
  .tag-dada    { --x: 373;  --y: 2163; }
}


/* Screenshot viewer, from the iPad Pro 11" - 7 frame */
.lightbox {
  --gap: clamp(8px, 6vw, 50px);
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lightbox[open] {
  display: grid;
  grid-template-columns: 34px auto 34px;
  column-gap: var(--gap);
  place-content: center;
}
.lightbox::backdrop { background: rgba(51, 51, 51, .7); }

.lightbox-image {
  grid-area: 1 / 2;
  width: min(486px, 100vw - 2 * (34px + var(--gap)) - 16px, (100dvh - 32px) * 1000 / 2173);
  height: auto;
  box-shadow: var(--shadow);
}

.round {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: #fff;
  cursor: pointer;
}
.round:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.prev  { grid-area: 1 / 1; align-self: center; }
.next  { grid-area: 1 / 3; align-self: center; }
.close { grid-area: 1 / 3; align-self: start; }
.prev img { transform: rotate(90deg); }
.next img { transform: rotate(-90deg); }