/* Take 12's site: cream like the app's launch, the darkroom black for photos, the brand red for the arrow and
   actions, Orotone's amber for edge print. System font for reading, IBM Plex Mono for labels (as in the app). */
@font-face { font-family: "Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --cream: #F2EADB; --paper: #FBF7EF; --ink: #1B1612; --mute: #6B6158; --line: #DED3C0;
  --black: #0E0D0C; --red: #E0452C; --red-dark: #C73A23; --amber: #F0A640;
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: max(20px, env(safe-area-inset-left));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink);
       font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin: 0 0 14px; }
.arr { display: inline-block; width: 0.9em; height: 0.36em; vertical-align: 0.12em; fill: var(--red); }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; padding-block: 26px; }
.top .mark { width: 128px; }
.top a.ig { font: 500 13px/1 var(--mono); letter-spacing: 0.06em; text-decoration: none; color: var(--mute); }
.top a.ig:hover { color: var(--ink); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
        min-height: min(760px, calc(100svh - 90px)); padding-block: 12px 64px; }
h1 { font-size: clamp(40px, 4.7vw, 62px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 22px; }
h1 span { display: block; }
.lede { font-size: 19px; max-width: 31em; margin: 0 0 30px; color: #3A322B; }

/* The sign-up */
.join { max-width: 520px; }
.join .row { display: flex; gap: 8px; }
.join input[type=email] { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 15px 16px; border-radius: 12px;
                          border: 1.5px solid #CFC3AE; background: var(--paper); color: var(--ink); }
.join input[type=email]:focus { outline: none; border-color: var(--ink); }
.join button { font: 600 16px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; padding: 0 20px;
               border: 0; border-radius: 12px; background: var(--red); color: #fff; cursor: pointer; white-space: nowrap; }
.join button:hover { background: var(--red-dark); }
.join button:disabled { opacity: 0.6; cursor: default; }
.join .tick { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-size: 15px; color: #3A322B; cursor: pointer; }
.join .tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); flex: none; }
.join .note { font-size: 14px; color: var(--mute); margin: 10px 0 0; min-height: 1.4em; }
.join .note.err { color: var(--red-dark); }
.join .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join.done .row, .join.done .tick { display: none; }
.join .ok { display: none; font-size: 19px; font-weight: 600; margin: 0; padding: 14px 0 2px; }
.join.done .ok { display: block; }

/* Three prints on the table */
.prints { position: relative; aspect-ratio: 1 / 1.02; max-width: 560px; width: 100%; justify-self: center; }
.print { position: absolute; width: 54%; background: var(--paper); padding: 9px 9px 0; border-radius: 3px;
         box-shadow: 0 1px 2px rgba(40, 28, 16, 0.12), 0 14px 34px rgba(40, 28, 16, 0.16); }
.print img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; background: #ddd; }
.print figcaption { font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--mute); padding: 10px 1px 11px;
                    display: flex; justify-content: space-between; }
.print.p1 { left: 0; top: 9%; transform: rotate(-5deg); }
.print.p2 { left: 46%; top: 0; transform: rotate(4deg); }
.print.p3 { left: 22%; top: 30%; transform: rotate(-1deg); z-index: 1; }

/* From the lab */
.lab { background: var(--black); color: var(--cream); padding-block: 96px 104px; }
.lab .eyebrow { color: var(--amber); }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 14px; }
.lab .sub { color: #B9AE9C; max-width: 34em; margin: 0 0 44px; }
.frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.frames img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: 2px; background: #1c1a18; }
.frames figcaption { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--amber); padding-top: 10px;
                     display: flex; justify-content: space-between; }
.frames figcaption .n { color: #7C6A4E; }
.frames figure { margin: 0; }

/* How it works */
.how { padding-block: 100px 40px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.step { background: var(--paper); border-radius: 18px; padding: 0 26px 28px; }
.step .pic { height: 250px; display: flex; align-items: center; justify-content: center; }
.step .pic img { max-height: 200px; width: auto; }
.step .pic.cam img { width: auto; max-width: 86%; max-height: 200px; }
.step .pic.film { gap: 6px; }
.step .pic.film img { max-height: 190px; }
.step .pic.developed img { max-height: 200px; border: 7px solid #fff; border-bottom-width: 22px; transform: rotate(3deg);
                       box-shadow: 0 10px 24px rgba(40, 28, 16, 0.18); }
.step .num { font: 500 12.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--red); margin: 0 0 10px; }
.step h3 { font-size: 23px; letter-spacing: -0.01em; margin: 0 0 8px; }
.step p { margin: 0; color: #3A322B; font-size: 16px; }

/* Last call */
.last { padding-block: 72px 110px; text-align: center; }
.last h2 { margin-bottom: 26px; }
.last .join { margin: 0 auto; text-align: left; }

/* Footer */
.foot { background: var(--black); color: #B9AE9C; padding-block: 44px; font-size: 15px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.foot .mark { width: 104px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cream); }
.foot small { font: 400 12px/1.4 var(--mono); letter-spacing: 0.06em; color: #7D7366; width: 100%; }

/* A plain reading page (support, thanks) */
.page { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter) 80px; }
.page h1 { font-size: clamp(34px, 6vw, 48px); margin: 34px 0 18px; }
.page h2 { font-size: 20px; letter-spacing: 0; margin: 34px 0 6px; }
.page p { margin: 0 0 12px; }
.page a { color: var(--red); }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: 8px; }
  .prints { max-width: 440px; }
  .frames { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .steps { grid-template-columns: 1fr; }
  .step .pic { height: 230px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .top { padding-block: 20px; }
  .top .mark { width: 112px; }
  .lede { font-size: 17px; }
  .join .row { flex-direction: column; }
  .join button { padding: 16px 20px; }
  .lab { padding-block: 72px 80px; }
  .how { padding-block: 72px 24px; }
  .last { padding-block: 56px 80px; }
  .print { width: 50%; }
  .print.p2 { left: 45%; }
  .print.p3 { left: 21%; }
  .print figcaption { font-size: 9px; padding-block: 8px 9px; }
}