/* Tape Journal theme: the app's own materials. Loaded after /assets/lathieff.css on every
   /tapejournal page. Colours are sampled from the app (machine body, paper, keys, stripes). */

body.app-tapejournal {
  --tj-body: #37332d;        /* moulded machine plastic */
  --tj-body-hi: #423d36;     /* lit edge of the plastic */
  --tj-recess: #242221;      /* wells and lids */
  --tj-paper: #f6efe1;       /* the page */
  --tj-paper-edge: #e3d9c6;
  --tj-ink: #2b2620;         /* words on the page */
  --tj-ink-soft: #8a8174;    /* partial words, folios */
  --tj-red: #d65747;         /* the ● key, the lamp */
  --tj-red-deep: #a93d30;
  --tj-yellow: #dcae3c;      /* TUE stripe, tape stripe */
  --tj-teal: #4cc4a4;        /* WED stripe */
  --tj-shell: #aaa59c;       /* cassette shell */
  --tj-shell-dark: #7e786f;
  --tj-hub: #c9c5bd;
  --tj-tape: #2a2622;        /* the tape pack on the reels */
  --tj-marker: #f3d35a;      /* the highlighter that follows playback */
  --tj-cream: #efe7d6;       /* text on the machine body */
  --tj-cream-soft: #b3a999;

  /* Shared tokens, re-pointed: the page is the machine body, paper sheets are the app's paper. */
  --bg: var(--tj-body);
  --ink: var(--tj-cream);
  --soft: var(--tj-cream-soft);
  --rule: #4a443d;
  --sheet: var(--tj-paper);
  --sheet-ink: var(--tj-ink);
  --sheet-soft: #685e52;
  --sheet-rule: var(--tj-paper-edge);
  --accent: var(--tj-red);
  --shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 30px 60px -30px rgb(0 0 0 / .65), 0 10px 20px -12px rgb(0 0 0 / .5);
  color-scheme: dark;

  background-color: var(--tj-body);
  /* Moulded plastic: a faint grain plus a warm light from the top left. */
  background-image:
    radial-gradient(120% 80% at 15% -10%, rgb(255 240 215 / .07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rec-dot { color: var(--tj-red); }
.app-tapejournal .label { color: var(--tj-cream-soft); }
.app-tapejournal .doc .label, .sheet .label, .sticker .label { color: var(--sheet-soft); }
.app-tapejournal .site-head .wordmark { color: var(--tj-cream); }

/* ── Hero ─────────────────────────────────────────────────────────────────────── */
.hero { padding: clamp(12px, 3vw, 40px) 0 clamp(56px, 9vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero-kicker { display: flex; flex-wrap: wrap; gap: 0 .5em; align-items: baseline; }
.hero h1 {
  margin: 18px 0 22px; color: var(--tj-cream);
  font-size: clamp(46px, 7.2vw, 92px); font-weight: 500; line-height: .98; letter-spacing: -.028em;
}
.writes {
  position: relative; display: inline-block; white-space: nowrap;
  font-family: var(--f-hand); font-weight: 700; color: var(--tj-red); letter-spacing: -.01em;
  font-size: 1.04em; transform: rotate(-2deg); transform-origin: 10% 80%;
}
/* A hand-drawn underline under "writes." */
.writes::after {
  content: ""; position: absolute; left: 2%; right: 6%; bottom: -.06em; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 50 5, 110 4, 197 9' fill='none' stroke='%23d65747' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero .lede { max-width: 30em; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.5; color: var(--tj-cream); opacity: .86; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; }

/* "Coming soon" plate: a moulded label, not Apple's badge (that comes with the launch). */
.store-plate {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 9px 20px 10px;
  border-radius: 12px; color: var(--tj-cream); background: rgb(0 0 0 / .14); border: 1px dashed #6a6258; cursor: default;
  font: 600 22px/1 var(--f-read); letter-spacing: -.01em;
}
.store-plate small { font: 600 11px/1 var(--f-print); letter-spacing: .18em; text-transform: uppercase; color: var(--tj-cream-soft); }
.btn-quiet { background: transparent; color: var(--tj-cream); border-color: #5a534a; box-shadow: none; }
.btn-quiet:hover { border-color: var(--tj-cream-soft); }

.hero-toy { position: relative; justify-self: center; width: min(100%, 560px); }
.try {
  display: flex; align-items: flex-end; gap: 6px; margin: 0 0 6px 18px; transform: rotate(-3deg); transform-origin: left bottom;
  font: 400 22px/1.1 var(--f-hand); color: var(--tj-cream); opacity: .85; white-space: nowrap;
}
.try::after {   /* a hand-drawn arrow curling down into the toy */
  content: ""; flex: none; width: 46px; height: 40px; margin-bottom: -18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 40'%3E%3Cpath d='M3 8 C 24 2, 38 12, 34 34' fill='none' stroke='%23efe7d6' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M26 27 L 34 35 L 41 26' fill='none' stroke='%23efe7d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}
.toy-note { margin: 14px 0 0; text-align: center; font: 500 13px/1.4 var(--f-print); letter-spacing: .12em; text-transform: uppercase; color: var(--tj-cream-soft); }
.toy-off { margin: 0; padding-top: 40%; text-align: center; font-size: 18px; color: var(--tj-cream-soft); }

/* Load: a short staggered reveal. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-toy { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .hero-toy { animation-delay: .22s; animation-duration: .9s; }
  .writes { animation: scrawl .9s .5s cubic-bezier(.3, .6, .2, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes scrawl { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }

/* ── Section heads ────────────────────────────────────────────────────────────── */
.section-head { margin-bottom: clamp(26px, 4vw, 44px); }
.section-head h2, .sticker h2, .sheet-head h2, .outro h2 {
  margin: 12px 0 14px; font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -.022em; line-height: 1.04;
}
.section-lede { max-width: 34em; font-size: 19px; color: var(--tj-cream); opacity: .8; }

/* ── How it works: a sheet of the app's paper laid on the machine ─────────────── */
.how { padding: 0 var(--gutter); }
.sheet {
  position: relative; max-width: 1240px; margin: 0 auto; color: var(--tj-ink);
  padding: clamp(36px, 6vw, 80px) clamp(22px, 6vw, 88px) clamp(28px, 4vw, 44px);
  background-color: var(--tj-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  border-radius: 4px; box-shadow: var(--shadow);
}
.sheet-head { border-bottom: 1px solid var(--tj-paper-edge); padding-bottom: 22px; margin-bottom: clamp(26px, 4vw, 44px); }
.sheet-head h2 { color: var(--tj-ink); max-width: 18em; }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 4vw, 48px) clamp(24px, 4vw, 56px); }
.features h3 { margin: 16px 0 6px; font-size: 23px; font-weight: 600; letter-spacing: -.01em; }
.features p { margin: 0; font-size: 17px; line-height: 1.55; color: #463f37; }
/* Keycaps: little moulded keys from the machine. */
.cap {
  display: inline-grid; place-items: center; width: 56px; height: 50px; border-radius: 9px;
  color: var(--tj-cream); background: linear-gradient(#45403a, #2f2b27);
  box-shadow: 0 1px 0 rgb(255 255 255 / .14) inset, 0 -2px 0 rgb(0 0 0 / .35) inset, 0 3px 0 #1d1a17, 0 8px 14px -6px rgb(0 0 0 / .5);
  font: 600 20px/1 var(--f-read);
}
.cap-rec { font-size: 26px; color: #fff4ee; background: linear-gradient(#e06a5a, var(--tj-red) 55%, #c34b3c); box-shadow: 0 1px 0 rgb(255 255 255 / .3) inset, 0 -2px 0 rgb(0 0 0 / .2) inset, 0 3px 0 var(--tj-red-deep), 0 8px 14px -6px rgb(120 30 20 / .55); }
.cap-word { font: 700 14px/1 var(--f-print); letter-spacing: .14em; text-transform: uppercase; }
.cap-tape { gap: 0; grid-auto-flow: column; padding: 0 9px; }
.cap-tape i { width: 14px; height: 14px; margin: 0 3px; border-radius: 50%; border: 3px solid var(--tj-hub); background: #2a2622; }
.folio { margin: clamp(36px, 5vw, 56px) 0 0; text-align: center; font: 600 12px/1 var(--f-print); letter-spacing: .2em; text-transform: uppercase; color: var(--sheet-soft); }

/* ── Poses: closed, open, half open ───────────────────────────────────────────── */
.poses { padding: clamp(80px, 11vw, 150px) 0 clamp(56px, 8vw, 100px); }
.pose-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.4vw, 48px); counter-reset: pose; }
.pose-list > li { padding-top: 18px; border-top: 1.5px solid var(--rule); counter-increment: pose; }
.pose-list > li::before { content: "0" counter(pose); font: 700 13px/1 var(--f-print); letter-spacing: .2em; color: var(--tj-red); }
.pose-list h3 { margin: 14px 0 6px; font-size: 24px; font-weight: 600; color: var(--tj-cream); }
.pose-list p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--tj-cream); opacity: .8; }
.also { margin: clamp(40px, 5vw, 64px) 0 0; padding-top: 20px; border-top: 1px solid var(--rule);
  font-size: 18px; font-style: italic; color: var(--tj-cream-soft); }

/* ── Private by design: the spec sticker from inside the battery door ─────────── */
.private { padding: clamp(24px, 4vw, 48px) 0 clamp(64px, 9vw, 120px); }
.sticker {
  position: relative; max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 52px) clamp(22px, 5vw, 56px) clamp(24px, 4vw, 40px);
  color: var(--tj-ink); background: var(--tj-paper); border-radius: 12px; box-shadow: var(--shadow);
  outline: 1.5px solid #cfc4b0; outline-offset: -10px;
}
.sticker-top { display: flex; justify-content: space-between; align-items: baseline; }
.sticker-top p { margin: 0; }
.model { font: 700 15px/1 var(--f-print); letter-spacing: .2em; color: var(--tj-red); }
.sticker h2 { color: var(--tj-ink); }
.spec { margin: 26px 0 0; border-top: 1.5px solid var(--tj-ink); }
.spec div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 20px; padding: 12px 0 11px; border-bottom: 1px solid var(--tj-paper-edge); }
.spec dt { font: 700 13px/1.6 var(--f-print); letter-spacing: .16em; text-transform: uppercase; }
.spec dd { margin: 0; font-size: 18px; line-height: 1.45; }
.sticker-foot { margin: 22px 0 0; font: 700 14px/1 var(--f-print); letter-spacing: .14em; text-transform: uppercase; }

/* ── Outro ────────────────────────────────────────────────────────────────────── */
.outro { padding: clamp(24px, 4vw, 40px) 0 clamp(40px, 6vw, 72px); text-align: center; }
.outro-icon { width: 96px; height: 96px; margin: 0 auto 8px; border-radius: 22px; box-shadow: 0 18px 30px -16px rgb(0 0 0 / .8); }
.outro p { font-size: 19px; color: var(--tj-cream); opacity: .86; }
.outro a { color: var(--tj-cream); }

/* Scroll reveals where the browser can drive them without script. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head, .sheet, .pose-list > li, .sticker, .outro .wrap {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}

/* ── Narrow screens ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pose-list { grid-template-columns: minmax(0, 1fr); row-gap: 32px; max-width: 34em; }
  .hero-toy { width: min(100%, 520px); margin-top: 8px; }
  .try { font-size: 20px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .spec div { grid-template-columns: minmax(0, 1fr); }
  .store-plate { min-height: 54px; }
}