/* ragtux.com — the company page.
   site.css gives the shell, the tokens and the prose; this file gives the page
   its own voice: Fraunces for display, a warmer neutral ground, generous air.
   Fraunces is served from here, instanced to one optical size (72) and one
   softness, with the weight axis kept (200–700), 43 KB. */

@font-face { font-family:'Fraunces'; font-style:normal; font-weight:200 700; font-display:swap; src:url(fonts/fraunces.woff2) format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:200 700; font-display:swap; src:url(fonts/fraunces-italic.woff2) format('woff2'); }

html[data-site="ragtux"] {
  --display:'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  /* a warmer neutral than the app's: this is paper and ink, not a tool panel */
  --bg:#141416; --panel:#1b1b1f; --raise:#222227; --border:#2e2e35; --widget:#26262c;
  --text:#d9d6cf; --dim:#8f8c85; --head:#f2efe9;
  --accent:#8fb3ff; --accent-soft:rgba(143,179,255,.12);
  --rule:#2e2e35;
}
@media (prefers-color-scheme: light) {
  html[data-site="ragtux"] {
    --bg:#f7f5f0; --panel:#fffdf9; --raise:#f0ede6; --border:#e2ded5; --widget:#ece9e1;
    --text:#2a2823; --dim:#6f6b63; --head:#15130f;
    --accent:#1d4ed8; --accent-soft:rgba(29,78,216,.08);
    --rule:#dcd8ce;
  }
}

html[data-site="ragtux"] body { font-size:17px; line-height:1.6; }
html[data-site="ragtux"] .topbar { background:color-mix(in srgb, var(--bg) 86%, transparent); border-bottom-color:transparent; }
html[data-site="ragtux"] .topbar .bar { height:64px; }
html[data-site="ragtux"] .wordmark {
  font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--head);
}
html[data-site="ragtux"] .mainnav { margin-left:auto; gap:22px; }
html[data-site="ragtux"] .mainnav a { color:var(--dim); font-size:15px; padding:6px 0; }
html[data-site="ragtux"] .mainnav a:hover, html[data-site="ragtux"] .mainnav a.on { color:var(--head); text-decoration:none; }
html[data-site="ragtux"] .mainnav a.on { box-shadow:inset 0 -1px 0 var(--head); background:transparent; border-radius:0; }
/* the sign-in for the household's accounts (home.ragtux.com, which asks Zitadel): a quiet outlined pill, set a little apart */
html[data-site="ragtux"] .mainnav a.login {
  color:var(--head); border:1px solid var(--rule); border-radius:999px; padding:5px 13px; margin-left:6px; line-height:1.2;
}
html[data-site="ragtux"] .mainnav a.login:hover { border-color:var(--head); }
html[data-site="ragtux"] .footer { background:transparent; border-top-color:var(--rule); margin-top:80px; }
html[data-site="ragtux"] .footer .bar { padding-top:26px; padding-bottom:34px; }
html[data-site="ragtux"] .foot-links a:hover { color:var(--head); }

/* ---------- the front page ---------- */
html[data-site="ragtux"] .prose .co-hero { padding:9vh 0 6vh; }
html[data-site="ragtux"] .prose .co-kicker {
  margin:0 0 2.2em; color:var(--dim); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
html[data-site="ragtux"] .prose .co-display {
  font-family:var(--display); font-weight:300; font-size:clamp(3.1rem, 10.5vw, 8.6rem);
  line-height:.96; letter-spacing:-.028em; color:var(--head); margin:0 0 .3em;
  text-wrap:nowrap; /* explicit <br>s; the focus layers must break where the source does */
  font-feature-settings:'kern', 'liga', 'calt';
}
html[data-site="ragtux"] .prose .co-lede {
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem, 2.3vw, 1.75rem); line-height:1.38; letter-spacing:-.004em;
  color:var(--text); max-width:34ch; margin:0 0 1.6em;
}
html[data-site="ragtux"] .prose .co-lede a { color:inherit; text-decoration:underline; text-decoration-color:var(--dim); text-underline-offset:.14em; text-decoration-thickness:1px; }
html[data-site="ragtux"] .prose .co-lede a:hover { text-decoration-color:var(--head); }
html[data-site="ragtux"] .prose .co-links { display:flex; flex-wrap:wrap; gap:14px 34px; margin:0; font-size:15.5px; }
html[data-site="ragtux"] .prose .co-links a { color:var(--head); font-weight:600; text-decoration:none; }
html[data-site="ragtux"] .prose .co-links a::after { content:' →'; color:var(--dim); font-weight:400; }
html[data-site="ragtux"] .prose .co-links a:hover { text-decoration:none; color:var(--accent); }

/* a section is a rule, a small heading and then the matter */
html[data-site="ragtux"] .prose .co-section { padding:54px 0 10px; border-top:1px solid var(--rule); }
html[data-site="ragtux"] .prose .co-section > h2 {
  font-family:var(--font); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:0 0 2.4em; border:0; padding:0;
}

/* the product */
html[data-site="ragtux"] .prose .co-product { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:28px 56px; align-items:start; }
html[data-site="ragtux"] .prose .co-product h3 { grid-column:1 / -1; margin:0 0 -.1em; font-family:var(--display); font-weight:300; font-size:clamp(2.4rem, 5vw, 4rem); line-height:1; letter-spacing:-.02em; }
html[data-site="ragtux"] .prose .co-product h3 a { color:var(--head); text-decoration:none; }
html[data-site="ragtux"] .prose .co-product h3 a:hover { color:var(--accent); text-decoration:none; }
html[data-site="ragtux"] .prose .co-product h3 small { display:inline-block; font-family:var(--display); font-style:italic; font-weight:300; font-size:.36em; color:var(--dim); margin-left:.8em; letter-spacing:0; vertical-align:.22em; }
html[data-site="ragtux"] .prose .co-product p { margin:0; max-width:none; font-size:17px; }
html[data-site="ragtux"] .prose .co-product .co-facts { margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); font-size:15px; }
html[data-site="ragtux"] .prose .co-product .co-facts li { display:flex; justify-content:space-between; gap:24px; padding:10px 0; border-bottom:1px solid var(--rule); color:var(--dim); }
html[data-site="ragtux"] .prose .co-product .co-facts li b { color:var(--head); font-weight:600; text-align:right; }
html[data-site="ragtux"] .prose .co-product .co-facts a { color:var(--head); }
html[data-site="ragtux"] .prose .co-product-links { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:12px 30px; margin:6px 0 0 !important; font-size:15.5px; }
html[data-site="ragtux"] .prose .co-product-links a { color:var(--head); font-weight:600; text-decoration:none; }
html[data-site="ragtux"] .prose .co-product-links a::after { content:' →'; color:var(--dim); font-weight:400; }
html[data-site="ragtux"] .prose .co-product-links a:hover { text-decoration:none; color:var(--accent); }
html[data-site="ragtux"] .prose .co-aside { margin:40px 0 0; color:var(--dim); font-family:var(--display); font-style:italic; font-size:1.25rem; max-width:48ch; }

/* how we work: four numbered sentences */
html[data-site="ragtux"] .prose .co-tenets { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:38px 56px; margin:0; padding:0; list-style:none; counter-reset:tenet; }
html[data-site="ragtux"] .prose .co-tenets li { counter-increment:tenet; display:grid; grid-template-columns:auto 1fr; gap:0 20px; align-items:baseline; }
html[data-site="ragtux"] .prose .co-tenets li::before {
  content:counter(tenet, decimal-leading-zero); font-family:var(--display); font-style:italic; font-weight:300;
  font-size:2.6rem; color:var(--dim); line-height:1; letter-spacing:-.02em; grid-row:1 / span 2;
}
html[data-site="ragtux"] .prose .co-tenets h3 { grid-column:2; margin:0 0 .35em; font-family:var(--display); font-weight:400; font-size:1.55rem; letter-spacing:-.012em; line-height:1.2; color:var(--head); }
html[data-site="ragtux"] .prose .co-tenets p { grid-column:2; margin:0; color:var(--dim); font-size:16px; line-height:1.6; }

/* reaching us */
html[data-site="ragtux"] .prose .co-contact { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:26px 40px; margin:0; }
html[data-site="ragtux"] .prose .co-contact div { border-top:1px solid var(--rule); padding-top:14px; }
html[data-site="ragtux"] .prose .co-contact dt { color:var(--dim); font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin:0 0 .6em; }
html[data-site="ragtux"] .prose .co-contact dd { margin:0; }
html[data-site="ragtux"] .prose .co-contact dd > a { font-family:var(--display); font-size:1.3rem; letter-spacing:-.01em; color:var(--head); word-break:break-all; }
html[data-site="ragtux"] .prose .co-contact dd > a:hover { color:var(--accent); text-decoration:none; }
html[data-site="ragtux"] .prose .co-contact dd p { margin:.4em 0 0; color:var(--dim); font-size:14.5px; line-height:1.55; }
html[data-site="ragtux"] .prose .co-colophon { margin:48px 0 0; color:var(--dim); font-size:14.5px; max-width:64ch; }

/* ---------- the focus stack ----------
   focus.js splits [data-focus] into N layers, each clipped to one horizontal
   band of the heading, and blurs each by its distance from a moving focal
   plane: a focus-bracketed series of the headline, which then fuses into one
   sharp image. The original text stays in place for layout, selection and
   assistive technology; it is painted transparent while the layers are on
   top of it, and shown again once the stack has fused. */
html[data-site="ragtux"] .fx { position:relative; }
html[data-site="ragtux"] .fx .fx-src { color:transparent; }
html[data-site="ragtux"] .fx .fx-src::selection { color:var(--bg); background:var(--head); }
html[data-site="ragtux"] .fx .fx-layer {
  position:absolute; inset:0; display:block; color:var(--head); pointer-events:none;
  will-change:filter, opacity;
}
html[data-site="ragtux"] .fx.fx-fused .fx-src { color:inherit; }
html[data-site="ragtux"] .fx.fx-fused .fx-layer { visibility:hidden; will-change:auto; }

/* ---------- prose pages: legal, privacy, support ---------- */
html[data-site="ragtux"] .prose { --measure:68ch; }
html[data-site="ragtux"] .prose.wide > p, html[data-site="ragtux"] .prose.wide > ul,
html[data-site="ragtux"] .prose.wide > ol, html[data-site="ragtux"] .prose.wide > blockquote,
html[data-site="ragtux"] .prose.wide > h2, html[data-site="ragtux"] .prose.wide > h3,
html[data-site="ragtux"] .prose.wide > .table-scroll, html[data-site="ragtux"] .prose.wide > dl { max-width:var(--measure); }
html[data-site="ragtux"] .prose h1 {
  font-family:var(--display); font-weight:300; font-size:clamp(2.6rem, 6vw, 4.4rem); letter-spacing:-.025em; line-height:1; margin:48px 0 .5em;
}
html[data-site="ragtux"] .prose h1 + p { font-family:var(--display); font-style:italic; font-weight:300; font-size:1.4rem; line-height:1.4; color:var(--text); max-width:44ch; }
html[data-site="ragtux"] .prose h2 {
  font-family:var(--display); font-weight:400; font-size:1.85rem; letter-spacing:-.015em; line-height:1.15;
  border-top:1px solid var(--rule); padding-top:1.1em; margin:2.6em 0 .7em;
}
html[data-site="ragtux"] .prose h3 { font-family:var(--display); font-weight:500; font-size:1.3rem; letter-spacing:-.01em; }
html[data-site="ragtux"] .prose a { text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset:.14em; text-decoration-thickness:1px; }
html[data-site="ragtux"] .prose a:hover { text-decoration-color:var(--accent); }
html[data-site="ragtux"] .prose .anchor { text-decoration:none; }
/* tables: open, ruled rows, flush with the text; not the shared boxed style */
html[data-site="ragtux"] .prose .table-scroll { margin:0 0 1.2em; border:0; border-radius:0; }
html[data-site="ragtux"] .prose table { border-collapse:collapse; width:100%; font-size:15px; margin:0; }
html[data-site="ragtux"] .prose th, html[data-site="ragtux"] .prose td { text-align:left; padding:9px 16px 9px 0; border-bottom:1px solid var(--rule); vertical-align:top; }
html[data-site="ragtux"] .prose th:last-child, html[data-site="ragtux"] .prose td:last-child { padding-right:0; }
html[data-site="ragtux"] .prose thead th { background:transparent; color:var(--dim); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; white-space:normal; }
html[data-site="ragtux"] .prose tbody tr:last-child td { border-bottom:1px solid var(--rule); }
html[data-site="ragtux"] .prose blockquote { border-left:2px solid var(--rule); margin:1.4em 0; padding:.2em 0 .2em 1.2em; color:var(--dim); }
html[data-site="ragtux"] .prose .dateline { color:var(--dim); font-size:14px; }

@media (max-width:880px) {
  html[data-site="ragtux"] .topbar .bar { height:58px; }
  html[data-site="ragtux"] .mainnav { position:static; display:flex; flex-direction:row; padding:0; background:transparent; border:0; box-shadow:none; gap:16px; }
  html[data-site="ragtux"] .mainnav a { padding:6px 0; font-size:14px; }
  html[data-site="ragtux"] .mainnav a.login { padding:4px 11px; margin-left:0; }
  html[data-site="ragtux"] .wordmark { font-size:18px; }
  html[data-site="ragtux"] .prose .co-hero { padding:6vh 0 4vh; }
  html[data-site="ragtux"] .prose .co-display { font-size:clamp(2.6rem, 13.5vw, 5rem); }
  html[data-site="ragtux"] .prose .co-product { grid-template-columns:1fr; gap:22px; }
  html[data-site="ragtux"] .prose .co-tenets { grid-template-columns:1fr; gap:30px; }
  html[data-site="ragtux"] .prose .co-section { padding:42px 0 6px; }
}
@media (max-width:420px) {
  html[data-site="ragtux"] .mainnav a:first-child { display:none; } /* lapstack is a card below anyway */
}