/* tinkrknit.com landing page. Colors follow guide/manual.css so the two feel like one site. */

:root { --bg:#fdfbf5; --ink:#222; --soft:#665f55; --rule:#b9b0a0; --link:#8a3a22; --box:#f3eee0; --code:#ebe5d6; --logo:invert(1);
  --btn-ink:#fdfbf5; --shadow:rgba(60,40,20,.18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#1c1b19; --ink:#e8e4da; --soft:#a8a296; --rule:#524e46; --link:#e39a7e; --box:#262522; --code:#2f2d29; --logo:none;
    --btn-ink:#1c1b19; --shadow:rgba(0,0,0,.45); }
}
:root[data-theme="dark"] { --bg:#1c1b19; --ink:#e8e4da; --soft:#a8a296; --rule:#524e46; --link:#e39a7e; --box:#262522; --code:#2f2d29; --logo:none;
  --btn-ink:#1c1b19; --shadow:rgba(0,0,0,.45); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16.5px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x:hidden; }
a { color:var(--link); }
h1, h2, h3, .wordmark { font-family:Sora, system-ui, sans-serif; letter-spacing:-.015em; }
code { font:.9em ui-monospace, Consolas, monospace; background:var(--code); padding:1px 5px; border-radius:4px; }

.logo { display:block; height:auto; filter:var(--logo); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand .logo { width:30px; }
.wordmark { font-weight:700; font-size:21px; }

/* Buttons */
.btn { display:inline-block; padding:11px 22px; border-radius:999px; background:var(--link); color:var(--btn-ink); font-weight:600; text-decoration:none; border:2px solid var(--link); transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px var(--shadow); }
.btn-ghost { background:none; color:var(--ink); border-color:var(--rule); }
.btn-sm { padding:6px 16px; font-size:15px; }

/* Header */
header.top { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1120px; margin:0 auto; padding:20px 24px; }
header.top nav { display:flex; align-items:center; gap:6px 22px; flex-wrap:wrap; justify-content:flex-end; }
header.top nav a:not(.btn) { color:var(--ink); text-decoration:none; font-weight:500; font-size:15.5px; }
header.top nav a:not(.btn):hover { color:var(--link); }

/* Hero */
.hero { max-width:760px; margin:0 auto; padding:56px 24px 40px; text-align:center; }
.note, .tag { font-family:Caveat, cursive; font-weight:600; color:var(--link); }
.note { font-size:26px; margin:0 0 4px; transform:rotate(-2deg); }
.hero h1 { font-size:clamp(34px, 6vw, 58px); line-height:1.08; margin:0 0 20px; }
.yarn-under { position:relative; white-space:nowrap; }
/* A loose strand of yarn under "Knit it" */
.yarn-under::after { content:""; position:absolute; left:-2%; right:-2%; bottom:-.12em; height:.32em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C30 4 50 18 80 10 S130 4 160 12 190 8 198 6' fill='none' stroke='%23b4532f' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.lede { font-size:19px; color:var(--soft); margin:0 auto 30px; max-width:600px; }
.cta { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* Screenshot over a knitted band */
.shot { position:relative; padding:20px 24px 40px; }
.shot .knit-band { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); }
.window { position:relative; max-width:1000px; margin:0 auto; border-radius:12px; background:#1f1f1f; padding:0; box-shadow:0 24px 60px var(--shadow), 0 0 0 1px rgba(0,0,0,.25); }
.window-bar { display:flex; gap:7px; padding:11px 14px; }
.window-bar i { width:11px; height:11px; border-radius:50%; background:#4a4744; }
.window img { display:block; width:100%; height:auto; border-radius:0 0 12px 12px; }
.tag { position:absolute; font-size:27px; line-height:1; white-space:nowrap; display:none; }
.tag-left { right:calc(100% + 18px); top:12%; transform:rotate(-6deg); }
.tag-right { left:calc(100% + 18px); top:22%; transform:rotate(5deg); }
.tag-left::after, .tag-right::before { display:block; font-size:30px; }
.tag-left::after { content:"\2192"; text-align:right; }
.tag-right::before { content:"\2190"; }
@media (min-width:1360px) { .tag { display:block; } }

/* Sections */
section h2 { font-size:clamp(26px, 4vw, 34px); margin:0 0 8px; text-align:center; }
.sub { text-align:center; color:var(--soft); margin:0 0 36px; }
.steps, .get { max-width:1080px; margin:0 auto; padding:64px 24px; }

.steps ol { list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.steps li { text-align:center; padding:0 8px; }
.steps h3 { margin:12px 0 6px; font-size:21px; }
.steps p { margin:0; color:var(--soft); }
.num { display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; border:2px dashed var(--link); color:var(--link); font:700 20px Sora, sans-serif; }

.chips { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:40px 0 0; padding:0; }
.chips li { position:relative; padding:5px 16px 5px 26px; background:var(--box); border-radius:6px 999px 999px 6px; font-size:15px; font-weight:500; }
/* The hole in a swing tag */
.chips li::before { content:""; position:absolute; left:10px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--rule); }

/* Install cards: patches sewn on with a running stitch */
.cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
.card { position:relative; display:flex; flex-direction:column; align-items:flex-start; background:var(--box); border-radius:16px; padding:28px 26px; outline:2px dashed var(--rule); outline-offset:-9px; scroll-margin-top:24px; }
.card h3 { margin:0; font-size:21px; }
.soon { display:inline-block; margin-left:6px; padding:1px 9px; border-radius:999px; border:1px dashed var(--link); color:var(--link); font:600 12px/1.5 system-ui, sans-serif; vertical-align:middle; white-space:nowrap; }
.card .who { margin:2px 0 14px; color:var(--link); font-weight:600; font-size:15px; }
.card p { margin:0 0 14px; }
.card .small { font-size:14.5px; color:var(--soft); }
.card .btn { margin-top:auto; }
.how { margin:0 0 14px; padding-left:20px; }
.how li { margin-bottom:6px; }

.code { width:100%; margin:0 0 14px; background:#1f1f1f; border-radius:8px; overflow:hidden; }
.code-bar { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 6px 14px; border-bottom:1px solid #34322f; color:#8f897e; font:12px ui-monospace, Consolas, monospace; }
.code pre { margin:0; padding:12px 14px 14px; color:#e8e4da; font:12.5px/1.6 ui-monospace, Consolas, monospace; overflow-x:auto; }
.copy { padding:3px 10px; border:1px solid #4a4744; border-radius:6px; background:#2b2a28; color:#cfc9bd; font:12px system-ui, sans-serif; cursor:pointer; }
.copy:hover { color:#fff; }

.needs { margin:36px auto 0; max-width:760px; text-align:center; color:var(--soft); }
.needs p { margin:0; }
.needs b { color:var(--ink); }

/* Footer */
footer { margin-top:24px; }
.foot { max-width:1080px; margin:0 auto; padding:32px 24px 48px; display:grid; grid-template-columns:auto 1fr; gap:12px 32px; align-items:center; }
.foot nav { display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:flex-end; }
.foot nav a { color:var(--ink); text-decoration:none; font-size:15px; }
.foot nav a:hover { color:var(--link); }
.fine { grid-column:1 / -1; margin:8px 0 0; font-size:13.5px; color:var(--soft); }

/* Knitted bands (knit.js fills these with an SVG) */
.knit-band { overflow:hidden; line-height:0; }
.knit-band svg { display:block; width:100%; }

@media (max-width:860px) {
  .steps ol, .cards { grid-template-columns:minmax(0, 1fr); }
  .cards { max-width:560px; margin:0 auto; }
  .steps ol { max-width:440px; margin-left:auto; margin-right:auto; }
}
@media (max-width:640px) {
  header.top { flex-direction:column; padding:16px; }
  header.top nav { justify-content:center; }
  .hero { padding:32px 16px 28px; }
  .shot { padding:12px 16px 28px; }
  .steps, .get { padding:48px 16px; }
  .foot { grid-template-columns:minmax(0, 1fr); padding:28px 16px 40px; }
  .foot nav { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn { transition:none; } }