/* Teahouse Tiles' page: the tea-house wall of its store frame. Rice paper
   with far hills in ink wash and a pale seal-red sun, the phone hung as a
   scroll on a cord, a small red seal over each heading. By night the same
   room in ink-blue lacquer with lantern light. Marcellus for titles and
   Atkinson Hyperlegible, large, for reading: made for older eyes. */

@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/marcellus/marcellus-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible/atkinson-hyperlegible-400-latin.woff2) format("woff2"); }

.app-teahouse {
  --body: "Atkinson Hyperlegible", var(--sys);
  --display: "Marcellus", "Iowan Old Style", Palatino, Georgia, serif;
  --body-size: 20px;
  --measure: 58ch;
  --page: #f3ecdd;
  --surface: #fbf7ee;
  --ink: #2a241d;
  --dim: #574c3f;
  --rule: rgba(70, 52, 30, 0.18);
  --link: #9c2f1e;
  --focus: #1f7a5a;
  --seal: #b83a26;
  --seal-line: #f6efe0;
  --wood-hi: #9a7048;
  --wood: #6b4a2e;
  --wood-deep: #3e2716;
  --cord: #8e2a1a;
  --hill: #4c5d56;
  --sun: #c9553d;
  --sun-alpha: 0.5;

  --stage-bg: radial-gradient(80% 50% at 50% 0%, rgba(255, 255, 255, 0.4), transparent 70%), linear-gradient(180deg, #f6efe0 0%, #efe6d4 55%, #e3d6bb 100%);
  --stage-ink: var(--ink);
  --stage-dim: var(--dim);
  --store-bg: #fbf7ee;
  --store-ink: #2a241d;
  --store-border: 1px solid rgba(70, 52, 30, 0.3);
  --store-radius: 8px;
  --device-fill: #f3ecdd;
}

@media (prefers-color-scheme: dark) {
  .app-teahouse {
    --page: #141a24;
    --surface: #1c2432;
    --ink: #efe8da;
    --dim: #c4baa6;
    --rule: rgba(220, 210, 190, 0.16);
    --link: #f39a80;
    --focus: #5cc79d;
    --seal: #e4674c;
    --seal-line: #1a2230;
    --wood-hi: #7d5a3a;
    --wood: #4e3522;
    --wood-deep: #2a1a0e;
    --cord: #b84a32;
    --hill: #8aa0b8;
    --sun: #f0a050;
    --sun-alpha: 0.32;
    --stage-bg: radial-gradient(70% 45% at 72% 10%, rgba(255, 196, 110, 0.18), transparent 70%), linear-gradient(180deg, #1a2230 0%, #141b27 60%, #10151e 100%);
    --store-bg: rgba(255, 255, 255, 0.05);
    --store-ink: #efe8da;
    --store-border: 1px solid rgba(220, 210, 190, 0.3);
    --device-fill: #1a2230;
  }
}

.app-teahouse h1, .app-teahouse h2, .app-teahouse h3 { font-weight: 400; letter-spacing: 0.005em; }
.app-teahouse h2 { font-size: clamp(32px, 4.6vw, 46px); }
.app-teahouse .section-head p { font-size: 20px; line-height: 1.65; }

/* The seal: a small red square with a paper line inside, turned a little. */
.app-teahouse .seal {
  display: block; width: 24px; height: 24px; margin: 0 0 20px; border-radius: 3px; transform: rotate(-4deg);
  background: var(--seal); box-shadow: inset 0 0 0 2.5px var(--seal), inset 0 0 0 4px var(--seal-line);
}
.app-teahouse .centred { text-align: center; }
.app-teahouse .centred .seal { margin-left: auto; margin-right: auto; }
.app-teahouse .centred p { margin-left: auto; margin-right: auto; }

/* ---- the stage: the wall, the hills, the hanging scroll ---- */

.app-teahouse .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 52%; color: var(--hill); }
.app-teahouse .hills .sun { fill: var(--sun); opacity: var(--sun-alpha); }

.app-teahouse .hero { padding-bottom: 96px; }
@media (min-width: 860px) {
  .app-teahouse .hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .app-teahouse .hero-device { order: -1; }
}
.app-teahouse .app-icon { width: 80px; height: 80px; box-shadow: 0 0 0 1px rgba(70, 52, 30, 0.18), 0 10px 26px rgba(60, 40, 20, 0.14); }
.app-teahouse .hero h1 { margin-top: 26px; font-size: clamp(50px, 7.6vw, 86px); line-height: 1.02; }
.app-teahouse .kind { margin-top: 12px; font-size: 20px; }
.app-teahouse .promise { margin-top: 26px; font-family: var(--display); font-size: clamp(26px, 3.2vw, 32px); line-height: 1.2; }
.app-teahouse .lede { margin-top: 14px; font-size: 20px; line-height: 1.6; }
.app-teahouse .store small { font-size: 13px; }
.app-teahouse .store b { font-family: var(--display); font-weight: 400; font-size: 21px; }
.app-teahouse .store-note { font-size: 16px; }

/* The scroll: a paper mat, wooden rods above and below, a cord to a peg. */
.app-teahouse .hero-device { padding-top: 70px; }
.app-teahouse .device {
  width: min(272px, 68vw); padding: 14px; overflow: visible;
  background: #fbf7ee; border: 1px solid rgba(120, 92, 52, 0.3);
  box-shadow: 0 18px 40px rgba(60, 40, 20, 0.18);
}
.app-teahouse .device::before,
.app-teahouse .device::after {
  content: ""; position: absolute; left: -20px; right: -20px; height: 15px; border-radius: 8px;
  background: linear-gradient(180deg, var(--wood-hi) 0%, var(--wood) 45%, var(--wood-deep) 100%);
  box-shadow: 0 4px 10px rgba(40, 26, 12, 0.25);
}
.app-teahouse .device::before { top: -14px; }
.app-teahouse .device::after { bottom: -14px; }
.app-teahouse .device video, .app-teahouse .device .still { border-radius: 3px; box-shadow: 0 0 0 1px rgba(120, 92, 52, 0.25); }
.app-teahouse .hero-device { position: relative; }
.app-teahouse .hero-device::before {
  content: ""; position: absolute; left: 50%; top: 34px; width: 86px; height: 86px;
  border-top: 2px solid var(--cord); border-left: 2px solid var(--cord);
  transform: translateX(-50%) rotate(45deg); transform-origin: center;
}
.app-teahouse .hero-device::after {
  content: ""; position: absolute; left: 50%; top: 10px; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--wood-deep);
}
/* Only the cord's top corner shows: its arms run down behind the rod. */
.app-teahouse .device { z-index: 1; }
@media (prefers-color-scheme: dark) { .app-teahouse .device { background: #e9e1cf; } }

/* ---- the points ---- */

.app-teahouse .menu-list { display: grid; gap: 0 56px; margin: 44px auto 0; padding: 0; list-style: none; max-width: 980px; }
@media (min-width: 820px) { .app-teahouse .menu-list { grid-template-columns: 1fr 1fr; } }
.app-teahouse .menu-list li { padding: 26px 0 28px; border-top: 1px solid var(--rule); }
.app-teahouse .menu-list h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; }
.app-teahouse .menu-list p { margin: 0; color: var(--dim); line-height: 1.65; }

/* ---- the daily table: a hanging scroll laid sideways ---- */

.app-teahouse .daily-scroll {
  position: relative; max-width: 44rem; margin: 0 auto; padding: 52px 28px 48px; text-align: center;
  background: var(--surface); border: 1px solid var(--rule);
}
@media (min-width: 700px) { .app-teahouse .daily-scroll { padding: 60px 64px 56px; } }
.app-teahouse .daily-scroll::before,
.app-teahouse .daily-scroll::after {
  content: ""; position: absolute; left: -14px; right: -14px; height: 13px; border-radius: 7px;
  background: linear-gradient(180deg, var(--wood-hi) 0%, var(--wood) 45%, var(--wood-deep) 100%);
}
.app-teahouse .daily-scroll::before { top: -7px; }
.app-teahouse .daily-scroll::after { bottom: -7px; }
.app-teahouse .daily-scroll .seal { margin: 0 auto 20px; }
.app-teahouse .daily-scroll p { margin: 18px auto 0; max-width: 50ch; line-height: 1.65; }
.app-teahouse .daily-scroll .quiet { color: var(--dim); }

.app-teahouse .shots-row img { border-radius: 10px; box-shadow: 0 8px 22px rgba(60, 40, 20, 0.14); }
.app-teahouse .faq summary { font-family: var(--display); font-weight: 400; font-size: 24px; }
.app-teahouse .faq-list { font-size: 20px; }