/* Oh hi — ohhiapps.com
   Ink on paper. No shadows, no gradients, no animation beyond a colour change. */

/* Manrope, self-hosted (SIL Open Font License 1.1) — no third-party request. */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap;
  src:url('assets/fonts/manrope-800.woff2') format('woff2'); }

:root {
  --paper:#F7F6F3; --surface:#FCFBF9; --card:#F2F1EE; --rule:#E0DEDB; --rule-soft:#ECEBE8;
  --ink:#21201F;   --ink-light:#3A3937; --slate:#565552; --quiet:#7F7E7A;
  --clay:#C4522F; --clay-light:#E4795A; --clay-deep:#A83F1F;
  --clay-pale:#FFE2DA; --clay-tint:#F7E4DC;
  --marigold:#F2B01E; --marigold-pale:#FAE7C8;
  --cobalt:#0C5CCA; --cobalt-light:#2B78EB; --cobalt-pale:#DDEBFF;
  --pine:#2A5A4E; --pine-pale:#D8F0E8;
  --r:4px;
  --pad:clamp(20px, 5vw, 64px);
  --gap:clamp(56px, 9vw, 112px);
  --body:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img, svg { max-width:100%; }

/* ---- paper ----
   A fixed grain laid over everything at 5%, multiplied, so the whole page
   reads as one sheet rather than a stack of panels. It never scrolls. */
body::after {
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:220px 220px; opacity:.05; mix-blend-mode:multiply;
}
@media print { body::after { display:none; } }

/* ---- links: cobalt, always underlined, no visited state ---- */
a, a:link, a:visited {
  color:var(--cobalt); text-decoration:underline;
  text-decoration-thickness:1.5px; text-underline-offset:3px;
}
a:hover { color:var(--clay); text-decoration-thickness:2px; }
a:focus-visible {
  outline:2px solid var(--cobalt); outline-offset:2px;
  border-radius:2px; background:var(--cobalt-pale);
}
.on-ink a, .on-ink a:link, .on-ink a:visited { color:var(--cobalt-light); }
.on-ink a:hover { color:var(--marigold); }

/* ---- layout ---- */
.wrap { width:100%; max-width:1120px; margin:0 auto; padding-inline:var(--pad); }
.narrow { max-width:66ch; }
section { padding-block:var(--gap); }
.rule { height:1px; background:var(--rule); border:0; margin:0; }

/* ---- type ---- */
.vel { display:block; width:100%; height:auto; }
h2 { font-size:clamp(26px,3.4vw,38px); line-height:1.18; font-weight:800;
      letter-spacing:-0.015em; margin:0 0 16px; text-wrap:balance; }
h3 { font-size:20px; line-height:1.3; font-weight:700; margin:0 0 8px; }
p  { margin:0 0 20px; text-wrap:pretty; }
p:last-child { margin-bottom:0; }
.lede { font-size:clamp(18px,2.1vw,21px); line-height:1.6; color:var(--slate); }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:0.14em;
            text-transform:uppercase; color:var(--clay); margin:0 0 22px; }
.small { font-size:15px; color:var(--slate); }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
       white-space:nowrap; }

/* ---- the marker ---- */
.mark { position:relative; display:inline-block; line-height:1; }
.mark > svg {
  position:absolute; left:-0.26em; top:0.15em; width:calc(100% + 0.52em); height:1.02em;
  z-index:0; mix-blend-mode:multiply; transform:rotate(-0.7deg); pointer-events:none;
}
.mark > span { position:relative; z-index:1; }
.on-ink .mark > svg { mix-blend-mode:normal; }
.on-ink .mark > span { color:var(--ink); }

/* ---- buttons ---- */
.btn {
  display:inline-block; font-size:15px; font-weight:600; line-height:1;
  padding:15px 26px; border-radius:var(--r); border:1.5px solid transparent;
  text-decoration:none; transition:background-color .12s linear, color .12s linear;
}
/* The link rules above are deliberately broad, so buttons have to out-specify
   them or they inherit cobalt text. Every button colour is stated for a:link
   and a:visited as well as the bare class.
   Solid blocks with knocked-out type use clay-deep — plain clay only reaches
   4.2:1 on this ground. Clay stays the mark and accent colour. */
a.btn, a.btn:link, a.btn:visited { text-decoration:none; }
.btn-primary, a.btn-primary:link, a.btn-primary:visited {
  background:var(--clay-deep); color:var(--surface);
}
.btn-primary:hover, a.btn-primary:hover { background:var(--clay); color:var(--surface); }
.btn-secondary, a.btn-secondary:link, a.btn-secondary:visited {
  background:var(--surface); color:var(--ink); border-color:var(--rule);
}
.btn-secondary:hover, a.btn-secondary:hover {
  background:var(--card); color:var(--ink); border-color:var(--slate);
}

/* ---- header ---- */
.site-head {
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.site-head .wrap { display:flex; align-items:center; justify-content:space-between;
                    gap:24px; min-height:72px; }
.site-head .logo svg { height:26px; width:auto; display:block; }
.nav { display:flex; align-items:center; gap:28px; }
.nav a, .nav a:link, .nav a:visited {
  font-size:15px; font-weight:500; color:var(--slate); text-decoration:none;
}
.nav a:hover { color:var(--clay); }
.nav .btn { padding:11px 20px; font-size:14px; }

/* ---- hero ---- */
.hero { padding-block:clamp(52px,8vw,104px) clamp(48px,7vw,88px); }
.hero h1 { margin:0 0 26px; max-width:15em; }
.hero .vel { margin-bottom:2px; }
.hero .lede { max-width:54ch; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ---- grids ---- */
.grid { display:grid; gap:clamp(28px,4vw,52px); }
.g2 { grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); }

.band { background:var(--paper); border-block:1px solid var(--rule); }

.card {
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r); padding:clamp(24px,3vw,32px);
}
.card .icon { width:44px; height:44px; display:block; margin-bottom:18px; }
.num { font-size:12px; font-weight:700; letter-spacing:0.1em; color:var(--clay);
        display:block; margin-bottom:14px; }

.quote { border-left:3px solid var(--clay); padding:4px 0 4px 24px; }
.quote p { font-size:clamp(20px,2.6vw,26px); line-height:1.5; margin:0; }

.callout {
  background:var(--clay-tint); border-left:4px solid var(--clay);
  border-radius:var(--r); padding:24px 26px;
}
.callout strong { display:block; color:var(--clay-deep); font-size:14px; margin-bottom:6px; }

/* ---- app rows ---- */
.app { display:flex; gap:20px; align-items:flex-start; }
.app .tile { width:52px; height:52px; border-radius:12px; flex:none; }
.app .meta { font-size:12px; font-weight:600; letter-spacing:0.1em;
              text-transform:uppercase; color:var(--quiet); }

/* ---- footer ---- */
.site-foot { background:var(--ink); color:var(--paper); padding-block:64px 44px; }
.site-foot .logo svg { height:26px; width:auto; display:block; }
.site-foot h4 { font-size:11px; font-weight:600; letter-spacing:0.1em;
                 text-transform:uppercase; color:var(--quiet); margin:0 0 14px; }
.site-foot ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.site-foot li { font-size:15px; }
.site-foot .cols { display:flex; flex-wrap:wrap; gap:48px 64px;
                    justify-content:space-between; align-items:flex-start; }
.site-foot .fine { margin-top:52px; padding-top:24px; border-top:1px solid var(--ink-light);
                    display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between;
                    font-size:13px; color:var(--quiet); }

@media (max-width:640px) {
  .nav { gap:18px; }
  .nav .hide-sm { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}