/* Kanzume site: the LCD paper, two inks, stepped pixel corners, like the app. 1 LCD px = 2 CSS px. */
/* Karma Future (Raymond Larabie, CC0), subset to Latin from tools/fonts-src/KarmaFuture.otf. */
@font-face {
  font-family: "Karma Future";
  src: url("assets/fonts/KarmaFuture.woff2") format("woff2");
  font-display: swap;
}
:root {
  --paper: #F2E9D8;
  --ink: #2B3440;
  --px: 2px;
  --ui: "DotGothic16", "Hiragino Sans", system-ui, sans-serif;
  --headline: "Karma Future", var(--ui);
  --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--ui);
  padding: 24px var(--gutter) max(16px, env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: none;
}
/* A faint LCD cell grid over everything, the video included. */
body::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / var(--px) var(--px),
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / var(--px) var(--px);
}
a { color: inherit; }
a:focus-visible { outline: 3px dotted var(--ink); outline-offset: 4px; }

/* ---- landing: one screen, the can loop in the space between the header and the footer */
.landing { grid-template-rows: auto 1fr auto; height: 100svh; overflow: clip; }
/* With html clipping too, body's overflow applies to body itself rather than moving up to the viewport, so the
   video's spill never makes the page scroll sideways (iOS ignores overflow on the viewport). */
html:has(> .landing) { overflow: clip; }
/* The loop is white where the page should show and is multiplied onto it (tools/web_video.py), so it has no
   visible edge and can spill under the header and footer. Size containment makes .hero its own stacking
   context, so the blend goes on .hero, not the video. */
.hero { position: relative; min-height: 0; container-type: size; mix-blend-mode: multiply; pointer-events: none; }
/* A square, centred on the space it has, as big as that space allows: the cans sit in its middle 40%. */
.hero video {
  position: absolute; left: 50%; top: 50%;
  width: min(190cqh, 200cqw); height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  /* Mux's encode brings the white down to 253; lift it back to 255 so the square has no edge on the page. */
  filter: brightness(1.03);
}
.top, .landing .foot { position: relative; z-index: 1; }
.top { display: grid; justify-items: center; gap: 16px; text-align: center; }
.top .icon {
  width: clamp(88px, 24vw, 128px); height: auto; aspect-ratio: 1;
  border-radius: 22.37%;   /* the iOS icon corner */
  box-shadow: 0 0 0 1px rgba(43, 52, 64, .12), 0 10px 28px rgba(43, 52, 64, .2);
}
.top h1 { margin: 0; padding-block: clamp(8px, 2.5svh, 24px); font: clamp(28px, 7vw, 44px)/1.1 var(--headline); text-wrap: balance; }
.badge { display: block; line-height: 0; }
.badge img { display: block; width: auto; height: 50px; }

/* ---- footer */
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; font-size: 13px; padding-top: 24px; }
.foot a[aria-current="page"] { text-decoration: none; }

/* ---- stepped corners: two 2 px steps */
.box::before, .box::after {
  clip-path: polygon(
    0 calc(var(--px) * 2), var(--px) calc(var(--px) * 2), var(--px) var(--px), calc(var(--px) * 2) var(--px), calc(var(--px) * 2) 0,
    calc(100% - var(--px) * 2) 0, calc(100% - var(--px) * 2) var(--px), calc(100% - var(--px)) var(--px), calc(100% - var(--px)) calc(var(--px) * 2), 100% calc(var(--px) * 2),
    100% calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px) * 2) calc(100% - var(--px)), calc(100% - var(--px) * 2) 100%,
    calc(var(--px) * 2) 100%, calc(var(--px) * 2) calc(100% - var(--px)), var(--px) calc(100% - var(--px)), var(--px) calc(100% - var(--px) * 2), 0 calc(100% - var(--px) * 2));
}
/* A ruled box: the stepped frame is drawn by two pseudo-elements (ink, then paper 2 px in), so the title can
   sit on the rule without being clipped. */
.box { position: relative; isolation: isolate; }
.box::before, .box::after { content: ""; position: absolute; z-index: -1; }
.box::before { inset: 0; background: var(--ink); }
.box::after { inset: var(--px); background: var(--paper); }

/* ---- documents: privacy, about */
.doc { width: 100%; max-width: 720px; margin: 0 auto; display: grid; gap: 28px; align-content: start; }
.doc .home { justify-self: center; line-height: 0; }
.doc .home img { width: 64px; height: 64px; border-radius: 15px; image-rendering: pixelated; }
.doc h1 { font: 24px/1.2 var(--ui); margin: 0; text-align: center; }
.doc .box { padding: 22px 18px 16px; }
.doc .box h2 { position: absolute; top: 0; left: 16px; transform: translateY(-50%); margin: 0; padding: 0 6px; background: var(--paper); font: 14px/16px var(--ui); }
.doc .box p { margin: 0 0 10px; }
.doc .box p:last-child { margin: 0; }
.doc .meta { text-align: center; font-size: 13px; margin: 0; }
.doc .box .meta { text-align: left; }
.doc .links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; }