/* awayfrom.earth — the company page. KOENJI's voice, reduced: black, the system mono,
   wimbledon ink, white for the name. No web font, no image, no script. */
:root {
  color-scheme: dark;
  --black: #000; --white: #fff; --wimbledon: #bbbeaf;
  --muted: rgba(187, 190, 175, 0.6);
  --dim: rgba(187, 190, 175, 0.38);
  --line: rgba(187, 190, 175, 0.5);
  --rule: rgba(203, 210, 185, 0.18);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: 16px;
  --fs-name: 15px; --fs-line: 12px; --fs-middle: 15px; --fs-text: 13px; --fs-foot: 11px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh; min-height: 100svh;
  background: var(--black); color: var(--wimbledon);
  font: 500 15px/1.6 var(--mono); -webkit-font-smoothing: antialiased;
  display: flex; justify-content: center;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }

/* one column: the name at the head, the content in the middle, the legal links at the foot */
.page {
  width: 100%;
  display: flex; flex-direction: column;
  padding: 28px var(--gutter) env(safe-area-inset-bottom);
}
.head .name { font-size: var(--fs-name); color: var(--white); letter-spacing: 1.1px; }
.head .line { margin-top: 6px; max-width: 30ch; font-size: var(--fs-line); line-height: 1.5; color: var(--muted); }
main { flex: 1; padding: 48px 0; }
.home main { display: flex; align-items: center; }
.middle { max-width: 34ch; font-size: var(--fs-middle); line-height: 1.6; }
.middle a, .doc a {
  color: var(--white);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.middle a:hover, .doc a:hover { text-decoration-color: var(--white); }
/* the legal links: furniture, dim and to the right (Linh, 2026-09-17) */
.foot { display: flex; justify-content: flex-end; gap: 24px; font-size: var(--fs-foot); color: var(--dim); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: var(--white); }

/* the legal pages: the same column, text at a reading size, section labels as the rule */
.doc { font-size: var(--fs-text); line-height: 1.65; }
.doc h1 { font-size: var(--fs-middle); color: var(--white); font-weight: 500; }
.doc .meta { margin-top: 4px; font-size: var(--fs-foot); color: var(--muted); }
.doc h2 {
  display: flex; align-items: center; gap: 16px;
  margin: 36px 0 12px;
  font-size: var(--fs-foot); font-weight: 500; color: var(--white); text-transform: lowercase;
}
.doc h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.doc p + p { margin-top: 12px; }
.doc address { font-style: normal; color: var(--white); }

.middle .second { display: inline; }

/* THE WINDOW (Linh, 2026-09-17: the column read as a phone page on a desktop). From 720 px the
   page uses the whole window: the name with its sentence under it at the top left, "Maker of
   KOENJI." large across the middle with the camera line small beneath, the legal links on the
   bottom edge. The legal pages keep a reading column. */
@media (min-width: 720px) {
  :root { --gutter: 40px; --fs-line: 13px; --fs-text: 14px; --fs-foot: 12px; }
  .page { padding: 32px var(--gutter) 12px; }
  .head .line { margin-top: 12px; max-width: none; }
  .home main { padding: 0; }
  .home .middle {
    max-width: none;
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .middle .second { display: block; margin-top: 12px; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
  .middle a { text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
  body:not(.home) main { width: 100%; max-width: 620px; }
}