/* Subtivu site: ink, paper and one yellow (docs/05-design.md). Yellow marks the lit word and the
   one action of a page, nothing else. Square corners everywhere. */
:root {
  --ink:#0E0E0C; --ink-raised:#1B1B18; --rule:#3A3A34; --paper:#F5F2EA; --paper-dim:#B8B4AA; --yellow:#FFD60A;
  --bg:var(--ink); --text:var(--paper); --dim:var(--paper-dim); --line:var(--rule); --raised:var(--ink-raised);
}
@media (prefers-color-scheme: light) {
  :root { --bg:var(--paper); --text:var(--ink); --dim:#4A4842; --line:#B9B3A4; --raised:#E8E4D8; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:500 18px/1.5 "Fira Sans Condensed", "Arial Narrow", system-ui, sans-serif; }
a { color:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 16px; }
header.top { display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); }
.mark { font-weight:800; font-size:26px; letter-spacing:.02em; text-decoration:none; }
nav a { text-decoration:none; font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; margin-left:24px; }
.mono { font-family:"JetBrains Mono", ui-monospace, monospace; font-weight:400; font-size:14px; }
h1 { font-weight:800; font-size:clamp(40px, 7vw, 76px); line-height:1.02; margin:0 0 24px; }
h1 .lit { background:var(--yellow); color:var(--ink); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
h2 { font-weight:800; font-size:30px; line-height:1.1; margin:0 0 20px; }
h3 { font-weight:800; font-size:21px; margin:0 0 6px; }
p { margin:0 0 14px; }
.dim { color:var(--dim); }
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding:56px 0 48px; }
.lead { font-size:21px; color:var(--dim); max-width:32em; }
.cta { display:inline-block; background:var(--yellow); color:var(--ink); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:16px; padding:16px 26px; text-decoration:none; border:2px solid var(--yellow); }
.cta:active { background:var(--ink); color:var(--yellow); }
@media (prefers-color-scheme: light) { .cta { border-color:var(--ink); } }
.soon { margin-top:12px; }
.phone { width:100%; max-width:340px; justify-self:center; border:2px solid var(--line); }
section { padding:48px 0; border-top:1px solid var(--line); }
.rows { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:2px solid var(--text); }
.rows > div { padding:20px 20px 20px 0; border-bottom:1px solid var(--line); }
.rows > div:nth-child(3n+2), .rows > div:nth-child(3n+3) { padding-left:20px; border-left:1px solid var(--line); }
.rows p { color:var(--dim); margin:0; }
.shots { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.shots figure { margin:0; }
.shots img { width:100%; border:2px solid var(--line); display:block; }
.shots figcaption { color:var(--dim); font-size:15px; margin-top:8px; }
.price { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.price > div { border:2px solid var(--text); padding:18px; }
.price strong { display:block; font-weight:800; font-size:28px; }
footer { padding:28px 0 48px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--dim); font-size:15px; }
.doc { max-width:none; padding:40px 0 64px; }
.doc h1 { font-size:clamp(34px, 5vw, 52px); }
.doc h2 { font-size:22px; margin:32px 0 8px; }
.doc p, .doc li { color:var(--dim); }
.doc strong { color:var(--text); }
.doc .cols { display:grid; grid-template-columns:2fr 1fr; gap:48px; }
.doc aside { border-left:1px solid var(--line); padding-left:24px; align-self:start; position:sticky; top:24px; }
.doc aside p { font-size:15px; }
@media (max-width:860px) {
  .hero { grid-template-columns:1fr; padding-top:32px; gap:32px; }
  .rows, .shots, .price, .doc .cols { grid-template-columns:1fr; }
  .rows > div, .rows > div:nth-child(3n+2), .rows > div:nth-child(3n+3) { padding:18px 0; border-left:0; }
  .doc aside { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:16px; position:static; }
  .phone { max-width:300px; }
}