/* schmamera.com: one stylesheet for every page. dark only, one typeface, red the only accent. */

@font-face {
  font-family: "fredoka";
  src: url("/assets/fonts/fredoka.woff") format("woff");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #1d1b18;
  --raised: #2b2823;
  --cream: #f4ecd8;
  --muted: #a39c8e;
  --body: #b5ae9f;
  --divider: #3a362f;
  --red: #e8452c;
  --teal: #3fb3ad; /* only ever a fringe on something that is moving */

  --press: 70ms;
  --arrive: cubic-bezier(.3, 1.35, .4, 1);
  --glide: cubic-bezier(.2, .85, .2, 1);

  --gutter: clamp(20px, 5.5vw, 56px);
  --measure: 1120px;
}

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--cream);
  font-family: "fredoka", ui-rounded, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  text-transform: lowercase;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; text-transform: inherit; color: inherit; }

img, svg { display: block; max-width: 100%; }

a { color: var(--cream); text-decoration-thickness: 1.5px; text-underline-offset: .2em; text-decoration-color: var(--divider); transition: text-decoration-color .2s; }
a:hover { text-decoration-color: var(--red); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 999px; background: var(--cream); color: var(--ink); text-decoration: none; font-weight: 600;
}
.skip:focus-visible { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* ---------- the shrug ---------- */

.shrug { width: 100%; height: auto; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shrug .sb { transform-origin: 110px 168px; }
.shrug .st { transform-origin: 110px 122px; transform: rotate(-10deg); }
.shrug .lu { transform-origin: 62.2px 140px; }
.shrug .lf { transform-origin: 34.8px 134.1px; }
.shrug .ru { transform-origin: 157.7px 139.5px; }
.shrug .rf { transform-origin: 179.8px 152.6px; }

/* generated from the 4.4s loop in design/mocks/html/SchmDenied.dc.html: "in" is 28%..70% of it (plain camera to the
   shrug, which is the logo's pose), "again" is 80%..100% then 28%..70% (arms drop, then the shrug comes back). */
@keyframes in-bob{0%{transform:translateY(0) scale(1,1)}19.05%{transform:translateY(5px) scale(1.05,.92)}42.86%{transform:translateY(-9px) scale(.97,1.05)}61.9%{transform:translateY(1px) scale(1.01,.99)}76.19%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes in-tilt{0%{transform:rotate(0deg)}23.81%{transform:rotate(0deg)}54.76%{transform:rotate(-14deg)}73.81%{transform:rotate(-9deg)}88.1%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes in-lu{0%{transform:rotate(-40deg) scale(0)}19.05%{transform:rotate(-40deg) scale(0)}45.24%{transform:rotate(10deg) scale(1.08)}64.29%{transform:rotate(-4deg) scale(.98)}78.57%{transform:rotate(0deg) scale(1)}100%{transform:rotate(0deg) scale(1)}}
@keyframes in-lf{0%{transform:rotate(-70deg)}23.81%{transform:rotate(-70deg)}52.38%{transform:rotate(16deg)}71.43%{transform:rotate(-6deg)}85.71%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes in-ru{0%{transform:rotate(40deg) scale(0)}19.05%{transform:rotate(40deg) scale(0)}45.24%{transform:rotate(-10deg) scale(1.08)}64.29%{transform:rotate(4deg) scale(.98)}78.57%{transform:rotate(0deg) scale(1)}100%{transform:rotate(0deg) scale(1)}}
@keyframes in-rf{0%{transform:rotate(70deg)}23.81%{transform:rotate(70deg)}52.38%{transform:rotate(-16deg)}71.43%{transform:rotate(6deg)}85.71%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes in-eye{0%{transform:translate(0,0)}33.33%{transform:translate(0,0)}52.38%{transform:translate(0,-8px)}80.95%{transform:translate(0,-8px)}100%{transform:translate(0,0)}}
@keyframes again-bob{0%{transform:translateY(0) scale(1,1)}10.73%{transform:translateY(3px) scale(1.03,.96)}20.12%{transform:translateY(0) scale(1,1)}26.83%{transform:translateY(0) scale(1,1)}40.77%{transform:translateY(5px) scale(1.05,.92)}58.19%{transform:translateY(-9px) scale(.97,1.05)}72.13%{transform:translateY(1px) scale(1.01,.99)}82.58%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes again-tilt{0%{transform:rotate(-10deg)}13.41%{transform:rotate(2deg)}21.46%{transform:rotate(0deg)}26.83%{transform:rotate(0deg)}44.25%{transform:rotate(0deg)}66.9%{transform:rotate(-14deg)}80.84%{transform:rotate(-9deg)}91.29%{transform:rotate(-10deg)}100%{transform:rotate(-10deg)}}
@keyframes again-lu{0%{transform:rotate(0deg) scale(1)}13.41%{transform:rotate(-40deg) scale(0)}26.83%{transform:rotate(-40deg) scale(0)}40.77%{transform:rotate(-40deg) scale(0)}59.93%{transform:rotate(10deg) scale(1.08)}73.87%{transform:rotate(-4deg) scale(.98)}84.32%{transform:rotate(0deg) scale(1)}100%{transform:rotate(0deg) scale(1)}}
@keyframes again-lf{0%{transform:rotate(0deg)}13.41%{transform:rotate(-70deg)}26.83%{transform:rotate(-70deg)}44.25%{transform:rotate(-70deg)}65.16%{transform:rotate(16deg)}79.09%{transform:rotate(-6deg)}89.55%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes again-ru{0%{transform:rotate(0deg) scale(1)}13.41%{transform:rotate(40deg) scale(0)}26.83%{transform:rotate(40deg) scale(0)}40.77%{transform:rotate(40deg) scale(0)}59.93%{transform:rotate(-10deg) scale(1.08)}73.87%{transform:rotate(4deg) scale(.98)}84.32%{transform:rotate(0deg) scale(1)}100%{transform:rotate(0deg) scale(1)}}
@keyframes again-rf{0%{transform:rotate(0deg)}13.41%{transform:rotate(70deg)}26.83%{transform:rotate(70deg)}44.25%{transform:rotate(70deg)}65.16%{transform:rotate(-16deg)}79.09%{transform:rotate(6deg)}89.55%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@keyframes again-eye{0%{transform:translate(0,0)}26.83%{transform:translate(0,0)}51.22%{transform:translate(0,0)}65.16%{transform:translate(0,-8px)}86.06%{transform:translate(0,-8px)}100%{transform:translate(0,0)}}

.shrug.in .sb, .shrug.in .st, .shrug.in .lu, .shrug.in .lf, .shrug.in .ru, .shrug.in .rf, .shrug.in .ey { animation-duration: 1.85s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-delay: .25s; }
.shrug.in .sb { animation-name: in-bob; } .shrug.in .st { animation-name: in-tilt; }
.shrug.in .lu { animation-name: in-lu; } .shrug.in .lf { animation-name: in-lf; }
.shrug.in .ru { animation-name: in-ru; } .shrug.in .rf { animation-name: in-rf; }
.shrug.in .ey { animation-name: in-eye; }

.shrug.again .sb, .shrug.again .st, .shrug.again .lu, .shrug.again .lf, .shrug.again .ru, .shrug.again .rf, .shrug.again .ey { animation-duration: 2.05s; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.shrug.again .sb { animation-name: again-bob; } .shrug.again .st { animation-name: again-tilt; }
.shrug.again .lu { animation-name: again-lu; } .shrug.again .lf { animation-name: again-lf; }
.shrug.again .ru { animation-name: again-ru; } .shrug.again .rf { animation-name: again-rf; }
.shrug.again .ey { animation-name: again-eye; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 30px; border-radius: 999px; border: 0;
  background: var(--cream); color: var(--ink);
  font-size: 18px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .34s var(--arrive), background-color .2s;
}
.btn:hover { background: #fff8e6; }
.btn:active { transform: scale(.95); transition: transform var(--press) ease-out, background-color .2s; }
.btn .arrow { width: 18px; height: 18px; flex: none; }

.btn-quiet {
  background: transparent; color: var(--body); box-shadow: inset 0 0 0 1.5px var(--divider);
}
.btn-quiet:hover { background: var(--raised); color: var(--cream); }

/* ---------- home: hero ---------- */

.hero { padding: clamp(56px, 11vh, 120px) 0 clamp(64px, 12vh, 128px); text-align: center; }
.hero .logo { width: clamp(150px, 34vw, 216px); margin: 0 auto; }
.wordmark { margin-top: clamp(14px, 2.4vw, 22px); font-size: clamp(54px, 15vw, 116px); letter-spacing: -.035em; line-height: 1; }
.hero .lede { max-width: 33ch; margin: clamp(18px, 3vw, 26px) auto 0; font-size: clamp(19px, 2.4vw, 23px); color: var(--body); line-height: 1.45; }
.hero .cta { margin-top: clamp(30px, 4.5vw, 40px); }
.hero .note { max-width: 34ch; margin: 18px auto 0; font-size: 15px; color: var(--muted); line-height: 1.5; }

/* ---------- home: features ---------- */

.features { display: grid; gap: clamp(96px, 14vw, 168px); padding-bottom: clamp(96px, 14vw, 168px); }

.feature { display: grid; gap: clamp(36px, 6vw, 48px); justify-items: center; text-align: center; }
.feature .copy { max-width: 26em; }
.feature h2 { font-size: clamp(30px, 4.4vw, 44px); }
.feature p { margin-top: 16px; font-size: clamp(18px, 1.9vw, 20px); color: var(--body); }
.feature p + p { margin-top: 12px; }
.feature .aside { font-size: 16px; color: var(--muted); }

@media (min-width: 840px) {
  /* a compact pair centred on the page: the phone at its own width, the copy at a reading width */
  .feature { grid-template-columns: auto minmax(0, 25rem); justify-content: center; align-items: center; justify-items: start; text-align: left; column-gap: clamp(56px, 8vw, 128px); }
  .feature.flip { grid-template-columns: minmax(0, 25rem) auto; }
  .feature .media { justify-self: center; }
  .feature.flip .media { order: 2; }
  .feature .copy { max-width: none; }
  .feature .phone { --pw: clamp(272px, 26vw, 330px); }
}

/* ---------- the phone (css only) ---------- */

.phone {
  --pw: clamp(232px, 68vw, 300px);
  position: relative; width: var(--pw);
  padding: calc(var(--pw) * .032);
  border-radius: calc(var(--pw) * .175);
  background: var(--raised);
  box-shadow: inset 0 0 0 1.5px var(--divider), 0 2px 0 rgba(0,0,0,.25), 0 40px 80px -30px rgba(0,0,0,.7);
}
.phone::before { /* side button */
  content: ""; position: absolute; right: -3px; top: 28%; width: 3px; height: 12%; border-radius: 0 3px 3px 0; background: var(--divider);
}
.screen {
  position: relative; overflow: hidden; aspect-ratio: 1320 / 2868;
  border-radius: calc(var(--pw) * .145);
  background: var(--ink);
  transform: translateZ(0);
}
.screen > img { width: 100%; height: 100%; object-fit: cover; }
.screen::after { /* the island */
  content: ""; position: absolute; left: 50%; top: 2.3%; width: 30%; height: 3.6%; transform: translateX(-50%);
  border-radius: 999px; background: #0d0c0b;
}

/* ---------- the look blender ---------- */

.blend { display: grid; justify-items: center; gap: 22px; }
.blend .screen { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.blend .photo { position: absolute; left: 0; width: 100%; top: 7.322%; height: 61.367%; cursor: grab; }
.blend .photo img, .blend .card img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; -webkit-user-drag: none; pointer-events: none; }
.blend .photo img:first-child, .blend .card img:first-child { opacity: 1; }
.blend .card { position: absolute; left: 0; width: 100%; top: 68.689%; height: 31.311%; }
.blend .card img { transition: opacity .12s linear; }
.blend.dragging .photo { cursor: grabbing; }

.ruler {
  --step: 76px;
  position: relative; width: min(100%, 340px); height: 74px;
  border-radius: 24px; background: var(--raised);
  overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
/* the ruler's edge fade (a mask) would hide its own outline, so the ring goes on a frame around it */
.ruler-frame { width: min(100%, 340px); border-radius: 28px; }
.ruler-frame .ruler { width: 100%; }
.ruler:focus-visible { outline: none; }
.ruler-frame:has(.ruler:focus-visible) { outline: 2px solid var(--cream); outline-offset: 4px; }
.ruler .strip { position: absolute; left: 50%; top: 0; height: 100%; will-change: transform; }
.ruler .dots {
  /* starts a whole number of steps left of the first look, so a big dot sits under every name */
  position: absolute; top: 17px; height: 8px; left: calc(var(--step) * -6); width: calc(var(--step) * 18);
  background:
    radial-gradient(circle at 4px 4px, var(--body) 3px, transparent 3.6px) -4px 0 / var(--step) 8px repeat-x,
    radial-gradient(circle at 4px 4px, var(--muted) 1.8px, transparent 2.4px) -4px 0 / calc(var(--step) / 4) 8px repeat-x;
  opacity: .7;
}
.ruler .name {
  position: absolute; top: 36px; width: var(--step); margin-left: calc(var(--step) / -2); text-align: center;
  font-size: 16px; font-weight: 500; color: var(--muted); white-space: nowrap; line-height: 24px;
  transition: color .2s;
}
.ruler .name:nth-of-type(1) { left: calc(var(--step) * 0); }
.ruler .name:nth-of-type(2) { left: calc(var(--step) * 1); }
.ruler .name:nth-of-type(3) { left: calc(var(--step) * 2); }
.ruler .name:nth-of-type(4) { left: calc(var(--step) * 3); }
.ruler .name:nth-of-type(5) { left: calc(var(--step) * 4); }
.ruler .name:nth-of-type(6) { left: calc(var(--step) * 5); }
.ruler .name:nth-of-type(7) { left: calc(var(--step) * 6); }
.ruler .name.on { color: var(--cream); font-weight: 600; }
.ruler .needle { position: absolute; left: 50%; top: 10px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--red); }

.blend .hint { font-size: 15px; color: var(--muted); }

/* ---------- home: free ---------- */

.free { padding-bottom: clamp(96px, 14vw, 160px); }
.free .card {
  max-width: 760px; margin: 0 auto; padding: clamp(36px, 7vw, 72px) clamp(26px, 7vw, 80px);
  border-radius: 36px; background: var(--raised); text-align: center;
}
.free h2 { font-size: clamp(32px, 5vw, 50px); }
.free p { max-width: 32em; margin: 18px auto 0; font-size: clamp(18px, 1.9vw, 20px); color: var(--body); }
.free .btn { margin-top: 32px; }

/* ---------- footer ---------- */

.foot { border-top: 1.5px solid var(--divider); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: 34px; padding-bottom: 44px; }
.foot .who { display: flex; align-items: center; gap: 12px; color: var(--body); font-size: 16px; }
.foot .who svg { width: 34px; height: 34px; flex: none; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 16px; }
.foot nav a { color: var(--body); }
.foot nav a:hover { color: var(--cream); }

/* ---------- privacy ---------- */

.top { padding-top: 28px; }
.top a.home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.top a.home svg { width: 40px; height: 40px; }

.doc { max-width: 680px; padding-top: clamp(48px, 9vw, 96px); padding-bottom: clamp(80px, 12vw, 140px); }
.doc h1 { font-size: clamp(40px, 7vw, 64px); }
.doc .date { margin-top: 14px; color: var(--muted); font-size: 16px; }
.doc .short { margin-top: 34px; padding: 26px 28px; border-radius: 24px; background: var(--raised); font-size: 19px; color: var(--cream); }
.doc h2 { margin-top: 52px; font-size: clamp(24px, 3.4vw, 30px); }
.doc p, .doc li { color: var(--body); }
.doc p { margin-top: 14px; }
.doc ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.doc li { position: relative; padding-left: 26px; }
.doc li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.doc li b, .doc p b { color: var(--cream); font-weight: 600; }

/* ---------- 404 ---------- */

.lost { min-height: calc(100vh - 140px); display: grid; place-content: center; justify-items: center; gap: 0; padding: 64px var(--gutter); text-align: center; }
.lost .logo { width: clamp(160px, 44vw, 230px); }
.lost h1 { margin-top: 18px; font-size: clamp(40px, 9vw, 64px); }
.lost p { margin-top: 14px; max-width: 26ch; color: var(--body); font-size: 19px; }
.lost .btn { margin-top: 34px; }

/* ---------- arriving on scroll (only when js is running) ---------- */

.js .rise { opacity: 0; transform: translateY(26px); transition: opacity .38s ease-out, transform .38s var(--arrive); }
.js .rise.here { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .shrug.in *, .shrug.again * { animation: none !important; }
  .js .rise { transform: none; transition: opacity .3s ease-out; }
  .btn, .btn:active { transform: none; transition: background-color .2s; }
  .blend .card img { transition: opacity .2s linear; }
}