/* Long-form pages on top of site.css — the article and the privacy page.
 * One column of prose with a header, a few notes and a table; no contents
 * rail, because neither page is long enough to need one. The guide keeps
 * its own, larger copy of these rules for its rail and its UI recreations. */
.wrap.long { max-width: 760px; }

.long .head { padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 48px); }
.long .head h1 { margin-top: 16px; font-size: clamp(38px, 5.2vw, 64px); }
.long .head .stand { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--mid); max-width: 62ch; margin-top: 22px; }
.long .head .stand strong { color: var(--ink); font-weight: 600; }
.long .facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.long .fact { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; background: var(--canvas); border-radius: 999px; font-size: 14px; color: var(--mid); }
.long .fact i { width: 6px; height: 6px; border-radius: 999px; background: var(--blue); flex: none; }
.long .fact b { color: var(--ink); font-weight: 600; }

.long article { padding-top: 44px; border-top: 1px solid var(--hair); }
.long article section { scroll-margin-top: 96px; margin-bottom: 64px; padding: 0; }
.long .step-no { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; }
.long .step-no::after { content: ""; height: 1px; flex: 1; background: var(--hair); }
.long article h2 { font-size: clamp(28px, 3.2vw, 36px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 18px; }
.long article h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin: 32px 0 10px; }
.long article p { color: var(--mid); margin: 0 0 16px; line-height: 1.6; }
.long article p.lede { font-size: 20px; line-height: 1.45; color: var(--ink); }
.long article strong { color: var(--ink); font-weight: 600; }
.long article a { color: var(--blue); } .long article a:hover { text-decoration: underline; }
.long code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: .86em; background: var(--canvas); color: var(--ink); padding: 2px 7px; border-radius: 6px; }

.long ul.bul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.long ul.bul li { position: relative; padding-left: 22px; color: var(--mid); line-height: 1.55; }
.long ul.bul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 999px; background: var(--blue); opacity: .55; }

.long ol.steps { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 14px; }
.long ol.steps li { counter-increment: s; position: relative; padding-left: 44px; color: var(--mid); line-height: 1.55; }
.long ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--canvas); color: var(--ink); font-size: 13px; font-weight: 600; display: grid; place-items: center; }

.long .note { background: var(--canvas); border-radius: 18px; padding: 20px 24px; margin: 26px 0; }
.long .note .tag { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 7px; }
.long .note p { margin: 0; font-size: 15.5px; }

.long .table-shell { overflow-x: auto; border-radius: 18px; background: var(--canvas); margin: 22px 0; }
.long table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 15px; }
.long th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); padding: 14px 20px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.long td { padding: 13px 20px; border-bottom: 1px solid var(--hair); color: var(--mid); vertical-align: top; }
.long tr:last-child td { border-bottom: none; }
.long td.k { color: var(--ink); font-weight: 500; }
.long td .v { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.long td .v i { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.long .v.sleep { color: #1f8f5f; } .long .v.sleep i { background: #1f8f5f; }
.long .v.wake { color: #c0392b; } .long .v.wake i { background: #c0392b; }
.long .v.calm { color: var(--mid); } .long .v.calm i { background: #a9adbb; }

/* the two states of the fox, side by side */
.long .pair { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 26px 0; }
@media (min-width: 640px) { .long .pair { grid-template-columns: 1fr 1fr; } }
.long .state { border-radius: 20px; padding: 20px 22px 18px; background: var(--card); box-shadow: var(--card-ring); }
.long .state img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 10px; }
.long .state b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.long .state p { font-size: 14.5px; margin: 0; }

.long .cta { margin: 20px 0 clamp(48px, 7vw, 80px); padding: clamp(44px, 6vw, 68px) 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.long .cta h2 { color: #fff; margin: 0; }
.long .cta p { color: rgba(255,255,255,.85); max-width: 430px; margin: 0; }
.long .cta .btn { background: #fff; color: var(--blue-deep); border-color: #fff; box-shadow: 0 10px 26px rgba(20,30,90,.22); }
.long .cta .fine { font-size: 13px; color: rgba(255,255,255,.7); }

/* the fox come forward — the screen itself, as a figure at the top of the
 * second article: the night desert, the fox on the sand, the glass beside it */
.long .vista { margin: 0 0 56px; }
.long .vista .scene, .long .vista .group { grid-area: v; }
.long .vista { display: grid; grid-template-areas: "v" "c"; }
.long .vista .scene { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; display: block; }
.long .vista .group { align-self: end; display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 0 6% 9%; pointer-events: none; }
.long .vista .fox { width: 13%; max-width: 96px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.long .vista .glass { width: 54%; max-width: 330px; padding: 10px 12px 12px; border-radius: 14px; background: rgba(28,34,72,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 40px rgba(0,0,0,.35); color: #fff; font-size: clamp(8px, 1.3vw, 12.5px); }
.long .vista .row { display: flex; justify-content: flex-end; gap: 6px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.long .vista .ghost, .long .vista .chip { padding: .45em 1.1em; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.long .vista .ghost { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.long .vista .chip { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.long .vista .thread p { margin: 0 0 4px; padding: .5em .9em; border-radius: 12px; background: rgba(0,0,0,.5); color: #fff; line-height: 1.35; max-width: 92%; }
.long .vista .field { margin-top: 8px; padding: .55em .9em; border-radius: 10px; background: rgba(0,0,0,.35); color: rgba(255,255,255,.45); }
.long .vista figcaption { grid-area: c; margin-top: 12px; font-size: 13.5px; color: var(--soft); text-align: center; }
@media (max-width: 520px) { .long .vista .thread p:nth-child(3) { display: none; } .long .vista .group { padding-bottom: 6%; } }