/* puncix.com: static pages for Dilemma Files.
   Colours from src/theme.ts (paper ground, base inks). The signature ink
   (sig) is the only colour, used as the accent. Light only, by decision. */
:root {
  color-scheme: light;
  --paper: #F3EEE4;
  --sheet: #FAF7F0;
  --rule: #D8D1C3;
  --ink: #17150F;
  --ink2: #57524A;
  --ink3: #6A6459;
  --sig: #1E2D5A;
  --sig-wash: rgba(30, 45, 90, 0.10);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: normal;
}

a { color: var(--sig); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }

.strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  max-width: 680px;
  margin: 0 auto;
  padding: 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.strip a { color: var(--ink2); text-decoration: none; }
.strip a:hover { color: var(--sig); }
.strip nav a + a { margin-left: 16px; }
.strip .name { color: var(--ink); }

.sheet {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; }
h1 { font-size: 30px; margin: 16px 0 8px; }
h2 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 40px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
h1 + p em { color: var(--ink3); font-family: var(--mono); font-style: normal; font-size: 13px; }

p, ul { margin: 0 0 16px; }
ul { padding-left: 24px; }
li { margin-bottom: 8px; }
hr { border: 0; border-top: 1px solid var(--ink3); margin: 48px 0 0; }
hr + h2 { border-top: 0; }

/* Unfilled placeholders in the legal drafts, visibly marked. */
mark.ph {
  background: var(--sig-wash);
  color: var(--sig);
  font-family: var(--mono);
  font-size: 0.8em;
  padding: 0 4px;
  border-radius: 2px;
}

.alt { margin-top: 40px; font-family: var(--mono); font-size: 13px; }

/* The home sheet reads from the top like the other pages (28/10): the title and
   the tagline, then the sections. It used to be one line, centred in the window. */
.home { padding-top: 48px; }
.home h1 { font-size: 44px; margin: 0 0 16px; }
.lede { font-size: 21px; color: var(--ink2); max-width: 32em; margin-bottom: 24px; }
/* The line that stands where the App Store badge will go. Plain text, no box:
   a box that cannot be tapped looks like a broken button (Murat, E20 1.8). */
.soon { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink2); }
/* The closing line of "How it works", set off by a rule as the app sets it. */
.closing { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink2); }

.badge {
  display: inline-block;
  min-height: 44px;
  padding: 10px 20px;
  border: 1.5px solid var(--sig);
  border-radius: 8px;
  background: var(--sheet);
  color: var(--sig);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

/* Company details on every page: UK trading disclosures (registered name,
   where registered, number, registered office) and Apple's enrollment check
   that the website belongs to the organisation. 27/10. */
.foot {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 16px 32px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink3);
}
.foot p { margin: 0; }
.foot a { color: var(--ink2); }