/* ===================================================================
   STILLS — the reading pages (Terms, Privacy, Site privacy)
   ===================================================================

   The homepage's ground and ink, set for reading: one column, the title
   in Young Serif and lowercase with an ember full stop, the rest in
   Heming. The logo at the top boils by hand like the homepage's
   (assets/drawn.js); without the script it is the picture of itself.

   Four colours, as everywhere: #0D0D0D ground, #D9D9D9 ink, #EB5E28
   ember once, #1E1E1E for raised things. Dark, like the app (Oct 28).

   GLYPH WARNING (see fonts.css): middot, copyright, section sign,
   ellipsis, bullet and degree are BLANK in Heming. Never type them.
   kern.js wraps capital Ds in <span class="dk">, so no bare `span` rules.
   =================================================================== */

:root{
  --paper:#0D0D0D;
  --ink:#D9D9D9;
  --ember:#EB5E28;
  --raised:#1E1E1E;
  --ink-74:rgba(217,217,217,.74);
  --ink-66:rgba(217,217,217,.62);
  --rule:rgba(217,217,217,.14);
  --tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .85 0 0 0 0 .85 0 0 0 .2 -.1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --pad:clamp(20px,4.6vw,72px);
  --measure:640px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
a{-webkit-tap-highlight-color:transparent}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100svh;display:flex;flex-direction:column;
  background:var(--paper) var(--tooth);color:var(--ink);
  font-family:var(--heming);font-weight:400;font-size:16px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
img,canvas{display:block}
h1,h2,h3,p,ul,ol{margin:0}
::selection{background:var(--ember);color:var(--ink)}
.skip{position:fixed;z-index:200;left:20px;top:-80px;background:var(--ink);color:var(--paper);padding:14px 20px;font-size:13px;text-decoration:none}
.skip:focus{top:20px}
a:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:2px}

/* --- the logo ---------------------------------------------------------- */

.bar{
  display:flex;justify-content:center;align-items:flex-end;
  height:calc(clamp(58px,8svh,92px) + var(--safe-t));padding-top:var(--safe-t);
}
.mark{position:relative;width:clamp(64px,5vw,82px);line-height:0}
.mark img{width:100%;height:auto}
.mark canvas{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}
.mark-drawn .mark img{opacity:0}
.mark:after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}

/* --- the column -------------------------------------------------------- */

.sheet{flex:1;display:flex;flex-direction:column;padding:0 var(--pad)}
.sheet>main{width:100%;max-width:var(--measure);margin:0 auto;flex:1}

.title{
  margin:clamp(40px,8svh,96px) 0 clamp(18px,2.6svh,28px);
  font-family:var(--young);font-weight:400;
  font-size:clamp(52px,8vw,96px);line-height:.95;letter-spacing:-.03em;
  text-transform:lowercase;
}
.title:after{content:".";color:var(--ember)}

.lede{font-weight:300;font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:var(--ink)}
.stamp{
  margin-top:18px;padding-bottom:clamp(28px,4svh,44px);border-bottom:1px solid var(--rule);
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-66);
}

.prose{padding-bottom:clamp(40px,8svh,96px)}
.prose h2{
  margin:clamp(36px,5svh,52px) 0 12px;
  font-family:var(--young);font-weight:400;font-size:clamp(23px,2vw,28px);line-height:1.1;letter-spacing:-.025em;
  text-transform:lowercase;scroll-margin-top:24px;
}
/* Each section's drawn mark, set in front of its heading like a letter. */
.prose h2 .h-icon{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.24em;margin:0 .32em 0 -.08em}
.prose h3{margin:26px 0 8px;font-size:15px;font-weight:600}
.prose p,.prose li{font-size:15.5px;line-height:1.7;color:var(--ink-74)}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{margin:12px 0 0;padding-left:1.2em}
.prose li+li{margin-top:8px}
.prose ul{list-style:none;padding-left:0}
.prose ul>li{position:relative;padding-left:20px}
/* Heming draws no bullet, so the bullet is a small ink square. */
.prose ul>li:before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;background:var(--ink)}
.prose strong,.prose b{font-weight:600;color:var(--ink)}
.prose a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .3s ease}
.prose a:hover{text-decoration-color:var(--ember)}
.callout{margin-top:clamp(28px,4svh,40px);padding:18px 20px;border:1px solid var(--rule);border-radius:12px}
.callout p{font-size:15px}

/* --- the foot ---------------------------------------------------------- */

/* Oct 30: tightened (Timmy: "fix up sizing on the bottom bar its too
   ugly"). On a phone it was three loose lines of 12.5px with 22px gaps that
   read as oversized: now one small line for the company, the links in a
   tight wrapping row (each still a 32px-tall target), the trademark line
   smallest and dimmest. Roll pages centre it under their centred column. */
.foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;
  width:calc(100% + var(--pad) * 2);margin:0 calc(var(--pad) * -1);
  padding:14px var(--pad) calc(14px + var(--safe-b));
  border-top:1px solid var(--rule);
  font-size:12px;line-height:1.4;letter-spacing:.02em;color:var(--ink-66);
}
.foot nav{display:flex;flex-wrap:wrap;gap:0 18px}
.foot a{display:inline-block;padding:8px 0;text-decoration:none;transition:color .3s ease}
.foot a:hover{color:var(--ink)}
.foot .tm{flex-basis:100%;font-size:10.5px;color:rgba(217,217,217,.42)}

@media (max-width:640px){
  .foot{flex-direction:column;align-items:flex-start;gap:0;padding-top:18px;padding-bottom:calc(20px + var(--safe-b))}
  .foot>span{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .foot nav{gap:0 14px;margin:2px 0 4px}
  .foot a{padding:7px 0;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .prose a,.foot a{transition:none}
}
@media print{
  body{background:#fff;color:#000}
  .bar canvas,.foot nav{display:none}
  .mark-drawn .mark img{opacity:1}
}

/* ===================================================================
   ABOUT — three steps, each with its icon drawn by hand, and the
   download button from the homepage.
   =================================================================== */

.steps{list-style:none;margin:clamp(36px,5svh,56px) 0 0;padding:0;display:grid;gap:clamp(30px,4svh,44px)}
.steps li{display:grid;grid-template-columns:clamp(64px,7vw,84px) 1fr;column-gap:clamp(18px,2.4vw,28px);align-items:start}
.steps canvas{grid-row:span 2;width:100%;aspect-ratio:1}
.steps h2{
  margin-top:4px;
  font-family:var(--young);font-weight:400;font-size:clamp(26px,2.4vw,32px);line-height:1.05;letter-spacing:-.025em;
  text-transform:lowercase;
}
.steps h2 b{font-weight:inherit;color:var(--ember)}
.steps p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--ink-74)}
.page-about .prose{padding-bottom:0;margin-top:clamp(20px,3svh,32px)}

.cta{display:flex;justify-content:center;padding:clamp(44px,7svh,72px) 0 clamp(48px,8svh,88px)}
.get{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  width:min(100%,340px);padding:22px 40px;
  color:var(--raised);text-decoration:none;
  font-family:var(--young);font-weight:400;font-size:22px;line-height:1;letter-spacing:-.02em;white-space:nowrap;
}
.get:before{content:"";position:absolute;z-index:-2;inset:5px;border-radius:999px;background:var(--ink);transition:background-color .3s ease}
.get:hover:before{background:var(--ember)}
.drawn .get:before{opacity:0}
.get>canvas{position:absolute;z-index:-1;inset:0;width:100%;height:100%;pointer-events:none}
.get>.apple{width:.8em;height:1em;margin-top:-.14em;flex:none}

@media (max-width:520px){
  .steps li{grid-template-columns:56px 1fr}
}

/* ===================================================================
   SUPPORT (Oct 30) — who to write to, and the answers people need.
   =================================================================== */

.reach{
  display:flex;align-items:center;gap:16px;margin-top:clamp(26px,4svh,40px);
  padding:16px 20px;border:1px solid var(--rule);border-radius:16px;text-decoration:none;
  transition:border-color .3s ease;
}
.reach:hover{border-color:var(--ember)}
.reach canvas{width:44px;height:44px;flex:none}
.reach span{display:flex;flex-direction:column;gap:3px}
.reach b{font-family:var(--young);font-weight:400;font-size:21px;letter-spacing:-.015em;color:var(--ink)}
.reach i{font-style:normal;font-size:13.5px;color:var(--ink-66)}

.part{
  margin:clamp(48px,7svh,72px) 0 16px;
  font-family:var(--young);font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1;letter-spacing:-.025em;
}
.part b{font-weight:inherit;color:var(--ember)}
.part-note{margin:-4px 0 0;font-size:15px;line-height:1.6;color:var(--ink-74)}

.answers{border-top:1px solid var(--rule)}
.answer{border-bottom:1px solid var(--rule)}
.answer>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:14px 2px;
  font-family:var(--young);font-size:19px;letter-spacing:-.015em;color:var(--ink);
}
.answer>summary::-webkit-details-marker{display:none}
.answer>summary canvas{width:32px;height:32px;flex:none}
.answer>summary span{flex:1}
.answer>summary:after{content:"+";font-family:var(--heming);font-size:20px;color:var(--ink-66);transition:transform .3s ease}
.answer[open]>summary:after{transform:rotate(45deg)}
.answer>summary:hover span{color:var(--ember)}
.answer p{margin:0 0 18px 46px;font-size:15px;line-height:1.65;color:var(--ink-74)}
.answer p a,.legal a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}

.legal{margin:clamp(48px,7svh,72px) 0 clamp(40px,7svh,80px);font-size:13.5px;line-height:1.6;color:var(--ink-66)}

@media (max-width:560px){
  .answer p{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .answer>summary:after,.reach{transition:none}
}