/* llaberint.com: one stylesheet. A print shop, kept in check: white paper, chapters hatched in cyan or yellow,
   one black chapter, chunky black type with a solid sticker on the second line, thin black lines.
   Ariadne's orange is the spot colour: the thread, and nothing else. */
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --b: #0000ff; --y: #fff200; --k: #111;
  --paper: #fff; --sheet: #fff; --ink: var(--k); --grey: rgba(17,17,17,.7); --rule: rgba(17,17,17,.16); --rule-2: var(--k); --ariadne: #0000ff;
  --pop: var(--y); --on-pop: var(--k); --shade: var(--y); --on-ink: #fff;
  --marta: #c9452c; --pau: #2f6f8f; --irene: #7a8f3a; --joan: #b8862b; --clara: #8a5a9e;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rail: 8px; --pad: 24px; --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 761px) { :root { --rail: 24px; --pad: 56px; } }
/* Section colours: chapters are hatched in blue or yellow on white with AutoCAD's DOTS pattern (small, staggered).
   The closing is solid black. Solid blue is Ariadne's alone (the thread, the marks); yellow highlights; black is the text.
   --pop is the solid sticker behind the second headline line, --shade the offset under buttons. */
.c-y { --pop: var(--k); --on-pop: #fff; }
.c-y { background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='2' cy='2' r='0.75' fill='%23fff200'/%3E%3Ccircle cx='6' cy='6' r='0.75' fill='%23fff200'/%3E%3C/svg%3E"); }
.c-b { background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='2' cy='2' r='0.55' fill='%230000ff'/%3E%3Ccircle cx='6' cy='6' r='0.55' fill='%230000ff'/%3E%3C/svg%3E"); }
/* Text that sits straight on a hatch gets a white label under it, like a note pasted on a drawing. */
:is(.c-y, .c-b) :is(.lede, .lead, .note, .honest, .undo, .shot figcaption, .kicker, .cols > p) { width: fit-content; background: var(--paper); padding: 4px 8px; margin-left: -8px; }
.c-k { background: var(--k); color: #fff; --ink: #fff; --on-ink: var(--k); --grey: rgba(255,255,255,.72); --rule: rgba(255,255,255,.2); --rule-2: #fff; --pop: var(--y); --shade: var(--y); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--ui); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
/* The frame: two dashed rails down the whole page. */
body::before { content: ""; position: fixed; inset: 0 var(--rail); border-inline: 1px solid rgba(17,17,17,.12); pointer-events: none; z-index: 30; mix-blend-mode: multiply; }
a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.028em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(46px, 8vw, 104px); line-height: .92; letter-spacing: -.05em; max-width: 15ch; }
h2 { font-size: clamp(34px, 5.4vw, 68px); line-height: .98; letter-spacing: -.045em; max-width: 20ch; }
h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -.018em; margin: 0 0 10px; }
h1 span, h2 span { display: block; width: fit-content; margin-top: .12em; padding: .02em .16em .08em; background: var(--pop); color: var(--on-pop); }
.hero h1 span, .lab h1 span { transform: rotate(-1deg); transform-origin: left; }
h1 span.long { font-size: .56em; line-height: 1.04; letter-spacing: -.025em; max-width: 26ch; }
p { margin: 0 0 1em; }
.wrap { max-width: 80rem; margin: 0 auto; padding: 0 var(--pad); }
.cap, .src, .note { font: 12px/1.5 var(--mono); letter-spacing: .03em; color: var(--grey); margin: 0 0 8px; }
.note { margin: 20px 0 0; }
.btn { display: inline-block; padding: 12px 22px; background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); text-decoration: none; font-weight: 600; line-height: 1.3; box-shadow: 4px 4px 0 var(--shade); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shade); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--shade); }
.btn.ghost { background: var(--paper); color: var(--k); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.small { padding: 6px 13px; font-size: 15px; box-shadow: 3px 3px 0 var(--shade); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 32px 0 0; }
.mark { width: 24px; height: 24px; flex: none; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; flex: none; }
/* Corner ticks: small crosses on a frame's corners, like a drawing sheet. */
.ticks { position: relative; }
.ticks::before { content: ""; position: absolute; inset: -6px; pointer-events: none; z-index: 3; --tk: linear-gradient(var(--rule-2), var(--rule-2)); background-repeat: no-repeat;
  background-image: var(--tk), var(--tk), var(--tk), var(--tk), var(--tk), var(--tk), var(--tk), var(--tk);
  background-position: 0 6px, 6px 0, 100% 6px, calc(100% - 6px) 0, 0 calc(100% - 6px), 6px 100%, 100% calc(100% - 6px), calc(100% - 6px) 100%;
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px, 13px 1px, 1px 13px, 13px 1px, 1px 13px; }

/* Header and footer */
.top { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--b) 0 33.3%, var(--y) 33.3% 66.6%, var(--k) 66.6%) 1; }
.top .wrap, .foot .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; text-decoration: none; }
.brand a { text-decoration: none; display: flex; }
.top nav, .foot nav { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.top nav a:not(.btn), .foot nav a { text-decoration: none; font-size: 15px; }
.top nav a:not(.btn):hover, .foot nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.foot { background: var(--k); color: #fff; --ink: #fff; --grey: rgba(255,255,255,.7); border-top: 3px solid; border-image: linear-gradient(90deg, var(--b) 0 33.3%, var(--y) 33.3% 66.6%, #fff 66.6%) 1; }
.foot .wrap { padding-top: 24px; padding-bottom: 32px; }
.foot nav span { font-size: 15px; color: var(--grey); }
.top .tagline { font-size: 15px; text-decoration: none; }
.foot .fic { margin: 0; font-size: 13px; color: var(--grey); flex: 1 1 24ch; }
@media (max-width: 560px) { .top .tagline { display: none; } .top .wrap { justify-content: flex-end; } .top nav a:not(.btn) { display: none; } .top nav a[href="/ariadne/"] { display: inline; } }

/* Sections: a full-width rule between them, with ticks where it crosses the rails. */
main { position: relative; overflow-x: clip; }
.ch { position: relative; padding: clamp(72px, 9vw, 128px) 0; }
.ch + .ch { border-top: 1px solid var(--k); }
.ch + .ch::before { content: ""; position: absolute; top: -7px; left: 0; right: 0; height: 13px; pointer-events: none; --tk: linear-gradient(var(--rule-2), var(--rule-2)); background-repeat: no-repeat;
  background-image: var(--tk), var(--tk), var(--tk), var(--tk);
  background-position: calc(var(--rail) - 6px) 6px, var(--rail) 0, calc(100% - var(--rail) - 7px) 6px, calc(100% - var(--rail)) 0;
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px; }
.kicker { margin: 0 0 22px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.kicker b { color: var(--ink); font-weight: 600; }
.kicker > b:first-child { display: inline-block; padding: 3px 8px; margin-right: 6px; background: var(--ink); color: var(--on-ink); letter-spacing: .06em; }
.kicker a { color: inherit; text-decoration: none; }
.lede, .lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.42; color: var(--ink); max-width: 48ch; margin: 20px 0 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 48px; max-width: 920px; margin-top: 40px; color: var(--grey); font-size: 16px; }
.cols p { margin: 0; }
.sub { margin-top: 80px; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

/* Figures: a framed cell with a title block along its foot, "Fig. 01". */
.stage, .strip, .tiles .shot { position: relative; z-index: 2; }
.stage { color: var(--k); --ink: var(--k); --grey: rgba(17,17,17,.7); --rule: rgba(17,17,17,.16); background: var(--sheet); border: 1px solid var(--k); padding: clamp(18px, 3vw, 40px); margin: 48px 0 0; }
.tb { display: flex; flex-wrap: wrap; border-top: 1px solid var(--k); margin: clamp(18px, 3vw, 40px) calc(-1 * clamp(18px, 3vw, 40px)) calc(-1 * clamp(18px, 3vw, 40px)); font: 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.tb span { padding: 9px 14px; border-right: 1px solid var(--rule); }
.tb span:first-child { background: var(--y); color: var(--k); font-weight: 700; }
.tb span:last-child { margin-left: auto; border-right: 0; }
figure { margin: 0; }
.box { position: relative; z-index: 1; background: var(--sheet); border: 1px solid var(--k); padding: 14px 18px; }
.box b { display: block; font-weight: 600; }
.box span { display: block; color: var(--grey); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.links path { fill: none; stroke: var(--ariadne); stroke-width: 2; stroke-linecap: round; }
.shot img { width: 100%; border: 1px solid var(--k); }
.shot figcaption { color: var(--grey); font-size: 15px; margin-top: 12px; }
.shot figcaption b { color: var(--ink); font-weight: 600; }
.stage.shot { padding: 0; border: 0; background: none; box-shadow: none; color: inherit; --ink: inherit; --grey: inherit; }
.filmbox { aspect-ratio: 16/9; overflow: hidden; padding: 0; }
.filmbox iframe { width: 100%; height: 100%; border: 0; display: block; }

/* The page thread */
.pagethread { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.pagethread .pt { fill: none; stroke: var(--ariadne); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pagethread circle { fill: var(--paper); stroke: var(--ariadne); stroke-width: 2.4; transition: fill .3s; }
.pagethread circle.on { fill: var(--ariadne); }

/* Motion: plays once when a figure enters the screen (.in). Without .m (reduced motion) everything shows in its final state. */
.m [data-reveal] .rise, .m .hero [data-reveal] > * { opacity: 0; transform: translateY(14px); }
.m .in .rise, .m .hero .in > * { opacity: 1; transform: none; transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.m .hero .in > :nth-child(2) { transition-delay: .08s; }
.m .hero .in > :nth-child(3) { transition-delay: .16s; }
.m .hero .in > :nth-child(4) { transition-delay: .24s; }
.m .links path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.m .in .links path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) var(--d, .4s); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Llaberint (/) ─────────────────────────────────────────── */
.home { height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.home main { flex: 1; min-height: 0; display: flex; }
.home .foot .wrap { min-height: 0; padding-top: 10px; padding-bottom: 12px; }
.lab { flex: 1; min-height: 0; display: flex; align-items: center; padding: clamp(12px, 4vh, 64px) 0; }
.lab .wrap { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "mark h1" "mark products"; gap: 0 clamp(40px, 6vw, 96px); }
.lab .intro { display: contents; }
.lab-mark { grid-area: mark; align-self: center; width: min(100%, 420px, 52vh); aspect-ratio: 1; }
.lab h1 { grid-area: h1; align-self: end; }
.lab .products { grid-area: products; align-self: start; }
/* The home is the one solid blue field: Llaberint's yellow line on Ariadne's blue, with the dots in white. */
.home .lab { background: var(--b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='2' cy='2' r='0.55' fill='%23fff'/%3E%3Ccircle cx='6' cy='6' r='0.55' fill='%23fff'/%3E%3C/svg%3E"); color: #fff; }
.lab h1 { font-size: clamp(30px, min(7vw, 8.5vh), 88px); }
.lab .lede { color: var(--k); font-weight: 500; max-width: 36ch; font-size: clamp(15px, min(1.6vw, 2.6vh), 21px); margin-top: clamp(8px, 2vh, 20px); }
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--k); border: 1px solid var(--k); color: var(--k); margin: clamp(14px, 4vh, 40px) 0 0; }
.products > * { background: var(--sheet); padding: clamp(10px, 2vh, 20px) 22px clamp(12px, 2.2vh, 22px); min-height: min(190px, 22vh); display: flex; flex-direction: column; text-decoration: none; }
.products b { font-size: clamp(20px, 3.2vh, 26px); font-weight: 800; letter-spacing: -.02em; margin: 2px 0 clamp(2px, 1vh, 8px); }
.products p { margin: 0 0 clamp(6px, 2vh, 16px); color: rgba(17,17,17,.7); font-size: 16px; }
.products .go { margin-top: auto; font-weight: 500; }
.products a:hover .go { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Phones and narrow tablets: two full screens that snap. First the mark, the name and the sentence; then the products and the footer. */
@media (max-width: 860px) {
  html:has(.home) { scroll-snap-type: y mandatory; }
  .home { height: auto; min-height: calc(200svh - 63px); overflow: visible; }
  .home .lab { padding: 0; align-items: stretch; }
  .lab .wrap { display: flex; flex-direction: column; }
  .lab .intro { display: flex; flex-direction: column; justify-content: center; gap: 28px; min-height: calc(100svh - 63px); scroll-snap-align: start; scroll-margin-top: 63px; position: relative; }
  .lab .intro::after { content: "↓"; position: absolute; left: 0; bottom: 20px; font: 20px/1 var(--mono); color: #fff; }
  .lab-mark { flex: none; align-self: flex-start; width: min(200px, 48vw, 28svh); }
  .lab h1 { font-size: clamp(44px, 13vw, 72px); }
  .lab .products { margin: auto 0; }
  .home .foot { scroll-snap-align: end; }
}
@media (max-width: 520px) { .products { grid-template-columns: 1fr; } .products > * { min-height: 0; } .products .soon { min-height: min(72px, 7vh); } .home .foot nav { gap: 4px 14px; } }

/* ── Ariadne landing (/ariadne/) ───────────────────────────── */
.hero { padding-top: clamp(56px, 8vw, 104px); }
.hero .wrap > [data-reveal] { max-width: 60rem; }
/* Fig. 01: a real question and its cited answer. */
.answer1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px clamp(32px, 5vw, 72px); align-items: start; }
.answer1 .ask-q { font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -.015em; font-weight: 500; margin: 0; }
.answer1 .big { display: block; font-size: clamp(36px, 4vw, 52px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 8px; }
.answer1 .atext p { margin: 0 0 6px; }
.cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cite { font: 600 11.5px/1.3 var(--mono); padding: 4px 8px; background: var(--y); color: var(--k); }
.cite::before { content: "↗ "; }
@media (max-width: 760px) { .answer1 { grid-template-columns: 1fr; } }

/* 01 — Sin deberes: each program on its own, joined into one project; what the team stops doing is struck through. */
.join { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 20px clamp(60px, 12vw, 180px); align-items: center; }
.srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.srcs .box { padding: 9px 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.srcs .box span { margin: 0; font-size: 13px; text-align: right; }
.join .one { padding: 22px 24px; }
.join .one > b { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; margin-bottom: 14px; }
.join .one ul { list-style: none; margin: 0 0 14px; padding: 0; }
.join .one li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.join .one li:last-child { border-bottom: 1px solid var(--rule); }
.join .one i { font: normal 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: 2px 6px; background: var(--k); white-space: nowrap; }
.join .tb { grid-column: 1 / -1; }
.m .join .box { opacity: 0; transform: translateX(-10px); }
.m .join.in .box { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.m .join.in .srcs li:nth-child(2) { transition-delay: .05s; } .m .join.in .srcs li:nth-child(3) { transition-delay: .1s; }
.m .join.in .srcs li:nth-child(4) { transition-delay: .15s; } .m .join.in .srcs li:nth-child(5) { transition-delay: .2s; }
.m .join.in .srcs li:nth-child(6) { transition-delay: .25s; } .m .join.in .srcs li:nth-child(7) { transition-delay: .3s; }
.m .join.in .one { transition-delay: 1.1s; }
@media (max-width: 760px) { .join { grid-template-columns: 1fr; padding-left: 40px; } .join .tb { margin-left: -40px; } }
.undo { margin: 28px 0 0; color: var(--grey); max-width: 60ch; }
.undo b { color: var(--ink); font-weight: 600; }
.undo s { text-decoration: none; background: linear-gradient(var(--grey), var(--grey)) no-repeat 0 55% / 100% 1px; }
.m .undo s { background-size: 0 1px; }
.m .undo.in s { background-size: 100% 1px; transition: background-size .7s var(--ease) var(--d, .3s); }

/* 03 — En uso: the Ask demo beside one drafted document. */
.inuse { color: var(--k); --ink: var(--k); --grey: rgba(17,17,17,.7); --rule: rgba(17,17,17,.16); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1px; background: var(--k); border: 1px solid var(--k); margin: 48px 0 0; position: relative; z-index: 2; }
.inuse > * { background: var(--sheet); padding: clamp(18px, 2.4vw, 32px); min-width: 0; }
.inuse .qs { margin-bottom: 20px; }
.inuse .answer { min-height: 300px; padding: 0; border: 0; }
.docx { border: 1px solid var(--rule-2); padding: 22px 22px 14px; font-size: 14px; margin-top: 14px; aspect-ratio: 210/250; display: flex; flex-direction: column; }
.docx h4 { font-size: 17px; letter-spacing: -.01em; margin: 0 0 4px; }
.docx .src { margin: 0 0 14px; }
.docx ol { list-style: none; margin: 0; padding: 0; }
.docx li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); }
.docx li span { color: var(--grey); font-family: var(--mono); font-size: 12px; }
.docx .ftr { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--grey); }
.req { border-left: 2px solid var(--ink); padding: 2px 0 2px 12px; margin: 0; font-size: 15px; }
.honest { margin: 18px 0 0; color: var(--grey); font-size: 15px; max-width: 70ch; }
.honest b { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .inuse { grid-template-columns: 1fr; } .docx { aspect-ratio: auto; } }

/* 04 — Vuestros datos, and ruled label/detail rows elsewhere */
.rows { margin: 48px 0 0; padding: 0; list-style: none; max-width: 980px; position: relative; z-index: 2; }
.rows li { display: grid; grid-template-columns: 3em minmax(0, 14em) minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-top: 1px solid var(--ink); }
.rows li:last-child { border-bottom: 1px solid var(--ink); }
.rows i { font: normal 12px/2 var(--mono); color: var(--grey); }
.rows b { font-weight: 800; font-size: 19px; }
.rows p { margin: 0; color: var(--ink); }
@media (max-width: 640px) { .rows li { grid-template-columns: 2.4em minmax(0, 1fr); } .rows p { grid-column: 2; } }

.closing h2 { max-width: 22ch; }
.closing .actions a:not(.btn) { color: var(--ink); }

/* ── Drawing plates (landing "Cómo trabaja", Saber más) ─────── */
/* Four scenes on one pinned plate. The scroll drives them:
   --p (0..1, set by main.js) → --q0..3 (each scene's own 0..1) → per-element --t from its --a (start) and --n (length). */
.essence { padding-bottom: clamp(60px, 8vw, 100px); }
.essence .scroller { position: relative; margin-top: 40px; }
.essence .sheets { display: grid; gap: 64px; }
.scene { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 24px 56px; align-items: center; }
.txt { max-width: 38ch; }
.txt .pn, .ri .pn { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--grey); margin: 0 0 16px; }
.txt h3, .ri h3 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; margin: 0 0 18px; letter-spacing: -.03em; }
.txt p:last-child, .ri p:last-child { color: var(--grey); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; margin: 0; }
.sheet { width: 100%; height: auto; display: block; background: var(--sheet); border: 1px solid var(--k); position: relative; z-index: 2; }
.ruler { display: none; }

/* drawing vocabulary: one ink hairline, one lighter hairline, the orange thread */
.k, .k1, .h, .th, .sh, .mk, .ring { stroke-linecap: round; stroke-linejoin: round; }
.k { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.k1 { stroke: var(--ink); stroke-width: 1; }
.h { fill: none; stroke: var(--rule-2); stroke-width: .9; }
.th { fill: none; stroke: var(--ariadne); stroke-width: 2.2; }
.ink, .nd { fill: var(--ink); }
.sel { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.ui, .ui14, .ui20, .big, .mb { font-family: var(--ui); fill: var(--ink); }
.ui { font-size: 17px; } .ui14 { font-size: 14px; } .ui20 { font-size: 20px; letter-spacing: -.01em; }
.big { font-size: 40px; font-weight: 600; letter-spacing: -.025em; }
.mn, .mb { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; fill: var(--grey); }
.mb { fill: var(--ink); font-weight: 700; }
.mn.or { fill: var(--ariadne); }
.mk { fill: #fff; stroke: var(--rule-2); stroke-width: 1; }
.ring { fill: #fff; stroke: var(--ariadne); stroke-width: 2; }
.sh { fill: #fff; fill-opacity: .92; stroke: var(--ink); stroke-width: 1.1; }
.cn { fill: none; stroke: var(--rule-2); stroke-width: 1; } .cn .hv { stroke: var(--ink); stroke-width: 2.4; }

/* timing: each element has its own window inside its scene; motion eases in and out */
.sheet g, .sheet path, .sheet line, .sheet rect, .sheet text, .sheet circle { --t: clamp(0, calc((var(--q) - var(--a, 0)) / var(--n, .1)), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); }
.dr { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--e)); opacity: min(1, calc(var(--t) * 1000)); }
.mv { opacity: var(--e); transform: translate(calc((1 - var(--e)) * var(--dx, 0) * 1px), calc((1 - var(--e)) * var(--dy, 0) * 1px)); }
.wipe { clip-path: inset(-6px calc((1 - var(--t)) * 100%) -6px 0); }
.vg.hit .sh { stroke-width: calc(1.1 + .9 * var(--e)); }

/* pinned film (motion allowed) */
.m .scroller { height: 640vh; }
.m .pin { position: sticky; top: 61px; height: calc(100svh - 61px); display: flex; align-items: center; }
.m .pin > .wrap { width: 100%; }
.m .sheets { display: grid; }
.m .scene { grid-area: 1 / 1; }
.m .sheet { max-height: calc(100svh - 150px); }
.m .scene + .scene .sheet { background: none; border-color: transparent; box-shadow: none; }
.m .scene .content { --in: clamp(0, calc(var(--q) * 14), 1); --out: clamp(0, calc((1 - var(--q)) * 14), 1); opacity: min(var(--in), var(--out)); }
.m .s1 .content, .m .s1 .txt { --in: 1; }
.m .scene.s4 .content, .m .scene.s4 .txt { --out: 1; }
.m .txt { opacity: min(clamp(0, calc(var(--q) * 14), 1), clamp(0, calc((1 - var(--q)) * 14), 1)); transform: translateY(calc((1 - min(clamp(0, calc(var(--q) * 14), 1), clamp(0, calc((1 - var(--q)) * 14), 1))) * 18px)); }
.m .s1 .txt { opacity: clamp(0, calc((1 - var(--q)) * 14), 1); }
.m .s4 .txt { opacity: clamp(0, calc(var(--q) * 14), 1); }
.m .ruler { display: flex; gap: 10px; margin-top: 18px; }
.m .ruler button { position: relative; flex: 1; text-align: left; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey); background: none; border: 0; padding: 10px 0 0; cursor: pointer; }
.m .ruler button::before, .m .ruler button::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; }
.m .ruler button::before { right: 0; background: var(--rule-2); }
.m .ruler button::after { background: var(--ink); height: 2px; top: -.5px; width: calc(var(--fill, 0) * 100%); }
.m .ruler button.on { color: var(--ink); }
.m .pin { --q0: clamp(0, calc(var(--p, 0) * 4), 1); --q1: clamp(0, calc(var(--p, 0) * 4 - 1), 1); --q2: clamp(0, calc(var(--p, 0) * 4 - 2), 1); --q3: clamp(0, calc(var(--p, 0) * 4 - 3), 1); }
.scene, .sc0, .sc1, .sc2, .sc3 { --q: 1; }
.m .sc0 { --q: var(--q0); } .m .sc1 { --q: var(--q1); } .m .sc2 { --q: var(--q2); } .m .sc3 { --q: var(--q3); }
.m .ruler button:nth-child(1) { --fill: var(--q0); } .m .ruler button:nth-child(2) { --fill: var(--q1); }
.m .ruler button:nth-child(3) { --fill: var(--q2); } .m .ruler button:nth-child(4) { --fill: var(--q3); }
@media (max-width: 860px) {
  .scene { grid-template-columns: 1fr; gap: 16px; }
  .txt h3, .ri h3 { font-size: 30px; margin-bottom: 10px; } .txt p:last-child { font-size: 16px; }
  .txt .pn, .ri .pn { margin-bottom: 8px; }
  .k, .k1 { stroke-width: 2; } .h { stroke-width: 1.6; } .th { stroke-width: 4; }
  .m .ruler button { font-size: 0; } .m .ruler { margin-top: 12px; }
  .m .sheet { max-height: none; }
}

/* The map of four stops (collaborators) */
.route { margin-top: 40px; }
.rt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 24px 56px; align-items: center; }
.ri { max-width: 38ch; margin-bottom: 40px; }
.ri:last-child { margin-bottom: 0; }
.win { opacity: min(clamp(0, calc((var(--q) - var(--s)) * 16), 1), clamp(0, calc((var(--f) - var(--q)) * 16), 1)); }
.m .scroller.route { height: 460vh; }
.m .rtx { display: grid; }
.m .ri { grid-area: 1 / 1; margin: 0; opacity: min(clamp(0, calc((var(--q) - var(--s)) * 16), 1), clamp(0, calc((var(--f) - var(--q)) * 16), 1)); transform: translateY(calc((1 - min(clamp(0, calc((var(--q) - var(--s)) * 16), 1), clamp(0, calc((var(--f) - var(--q)) * 16), 1))) * 18px)); }
.scroller.route { --q: 1; }
.m .route .sheet { max-height: calc(100svh - 120px); }
@media (max-width: 860px) { .rt { grid-template-columns: 1fr; gap: 16px; } }

/* ── Saber más ─────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 48px 0 0; }
.stats div { border-top: 1px solid var(--ink); padding-top: 16px; }
.stats dt { font-size: clamp(30px, 3.8vw, 52px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.stats dd { margin: 6px 0 0; color: var(--grey); font-size: 15px; max-width: 26ch; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }

/* The NAS tree becomes the project page. */
.build { display: grid; grid-template-columns: minmax(0, 330px) 48px minmax(0, 1fr); align-items: start; }
.build .tree, .build .page { border: 1px solid var(--rule); padding: 20px 22px; background: var(--sheet); }
.build .tree ol { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12.5px; line-height: 2; color: var(--grey); }
.build .tree li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s, box-shadow .3s; }
.build .tree .f { color: var(--ink); font-weight: 600; }
.build .tree .l1 { padding-left: 14px; } .build .tree .l2 { padding-left: 28px; } .build .tree .l3 { padding-left: 42px; }
.build .tree li.lit { color: var(--ink); box-shadow: inset 2px 0 var(--ink); }
.build .arrow { align-self: center; height: 2px; margin: 0 8px; background: var(--ink); position: relative; }
.build .arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }
.build .title { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 10px; }
.build .pills { display: flex; flex-wrap: wrap; margin: 0 0 24px; font: 12px var(--mono); color: var(--grey); }
.build .pills span { padding: 2px 10px; border-left: 1px solid var(--rule); }
.build .pills span:first-child { padding-left: 0; border: 0; }
.build .pills span:last-child { color: var(--ink); font-weight: 600; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.facts { margin: 0; }
.facts div { margin-bottom: 10px; }
.facts dt { font-family: var(--mono); font-size: 11.5px; color: var(--grey); }
.facts dd { margin: 0; font-size: 15px; }
.facts .was { color: var(--grey); font-size: 13px; text-decoration: line-through; text-decoration-color: var(--rule-2); }
.docs { list-style: none; margin: 0; padding: 0; }
.docs li:not(.cap) { font-size: 14.5px; padding: 6px 0 6px 22px; border-bottom: 1px solid var(--rule); position: relative; }
.docs li:not(.cap)::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 13px; border: 1px solid var(--ink); }
.next { margin-top: 18px; border-left: 2px solid var(--ink); padding: 4px 0 4px 14px; }
.next .cap { color: var(--ink); }
.next p:last-child { margin: 0; font-size: 15px; }
.build .note { grid-column: 1 / -1; }
.m .build [data-from] { opacity: 0; }
@media (max-width: 860px) {
  .build { grid-template-columns: minmax(0, 1fr); }
  .build .arrow { width: 2px; height: 40px; margin: 8px auto; }
  .build .arrow::after { right: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
  .build .tree ol { font-size: 12px; line-height: 1.8; }
}
@media (max-width: 520px) { .cols2 { grid-template-columns: 1fr; } }

.doors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.5fr); gap: 20px clamp(40px, 7vw, 110px); align-items: center; }
.doors .dev .mark { width: 30px; height: 30px; margin-bottom: 8px; }
.list { display: grid; gap: 16px; position: relative; z-index: 1; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; gap: 28px; } }

.part { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; max-width: 820px; margin-top: 96px; }
.num { width: 36px; height: 36px; border: 1px solid var(--ink); display: grid; place-items: center; font: 500 13px var(--mono); margin: 0; }
.part > div > p { color: var(--grey); }
.asks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.asks li { padding: 2px 0 2px 14px; border-left: 1px solid var(--rule-2); font-size: 15px; }

.day .stops { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; }
.day .stops::before, .day .stops::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--rule-2); }
.day .stops::after { height: 2px; top: 5.5px; background: var(--ink); transform-origin: left; }
.day .stops li { position: relative; z-index: 1; padding-top: 30px; }
.day .stops li::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--ink); box-sizing: border-box; }
.day .stops b { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.day .stops span { display: block; font-size: 14px; color: var(--grey); line-height: 1.35; margin-top: 4px; }
.m .day .stops::after { transform: scaleX(0); }
.m .day.in .stops::after { transform: none; transition: transform 1.8s var(--ease) .2s; }
.m .day .stops li { opacity: 0; }
.m .day.in .stops li { opacity: 1; transition: opacity .5s linear var(--d); }
.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prop { border-left: 2px solid var(--ink); padding: 2px 0 2px 16px; font-size: 15px; }
.prop p { margin: 0 0 8px; }
.prop .cap { color: var(--ink); }
.prop .src { margin: 10px 0 0; }
.m .prop { opacity: 0; transform: translateY(12px); }
.m .day.in .prop { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--d), transform .6s var(--ease) var(--d); }
@media (max-width: 860px) {
  .day .stops { grid-template-columns: 1fr; gap: 16px; }
  .day .stops::before, .day .stops::after { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .day .stops::after { width: 2px; left: 5.5px; transform-origin: top; }
  .m .day .stops::after { transform: scaleY(0); }
  .day .stops li { padding: 0 0 0 30px; }
  .props { grid-template-columns: 1fr; }
}

/* Telling Ariadne, and the Ask demo */
.order, .ask { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.order .note, .ask .note { grid-column: 1 / -1; margin-top: 4px; }
.chat, .board, .answer { border: 1px solid var(--rule); padding: 18px; font-size: 15px; background: var(--sheet); }
.chathead { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
.chathead b { font-weight: 600; }
.chathead span { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--grey); }
.who { display: flex; align-items: center; margin: 0 0 6px; font-family: var(--mono); font-size: 12px; color: var(--grey); }
.q { border: 1px solid var(--rule); padding: 10px 12px; min-height: 3.2em; }
.confirm { margin-top: 14px; border-left: 2px solid var(--ink); padding: 4px 0 4px 12px; }
.confirm p { margin: 0 0 4px; }
.confirm .cap { color: var(--ink); }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { display: flex; align-items: baseline; border: 1px solid var(--rule); padding: 9px 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.35; }
.card.done { color: var(--grey); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.card.new { border-color: var(--ink); }
.m .order .confirm { opacity: 0; transform: translateY(8px); }
.m .order .card.new { opacity: 0; transform: translateY(-8px); }
.m .order.done .confirm, .m .order.done .card.new { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.m .order.done .card.new { transition-delay: .7s; }
.typed::after { content: ""; display: inline-block; width: 1px; height: 1em; background: var(--ink); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.typed.end::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qs button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 12px 16px; border: 1px solid var(--rule); font-size: 15px; line-height: 1.4; transition: border-color .2s; }
.qs button:hover { border-color: var(--rule-2); }
.qs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.qs button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 2px 0 var(--ink); }
.answer { min-height: 500px; }
.atext p { margin: 0 0 .8em; }
@media (max-width: 860px) { .order, .ask { grid-template-columns: 1fr; } .board { grid-template-columns: 1fr 1fr; } }

/* A drafted document (Devuelve) */
.draft { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 5vw, 72px); align-items: center; }
.draft .docx { aspect-ratio: auto; max-width: 520px; margin: 0; }
@media (max-width: 860px) { .draft { grid-template-columns: 1fr; } }

/* Collaborators */
.share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px clamp(40px, 7vw, 110px); align-items: center; }
.scope ol { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.scope li { padding: 11px 16px; border: 1px dashed var(--rule); color: var(--rule-2); font-family: var(--mono); font-size: 13px; }
.scope li.on { border: 1px solid var(--ink); color: var(--ink); position: relative; z-index: 1; background: var(--sheet); }
.cap.o { color: var(--ink); }
.gpt { position: relative; z-index: 1; border: 1px solid var(--rule); padding: 20px; font-size: 15px; background: var(--sheet); }
.gpt .bubble { border: 1px solid var(--rule); padding: 10px 14px; margin: 12px 0 16px auto; width: fit-content; max-width: 80%; }
.share .note { grid-column: 1 / -1; }
@media (max-width: 860px) { .share { grid-template-columns: 1fr; } }

/* Where it shows up: a strip of the project, office tiles, map layers, library */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 760px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--pad), calc((100vw - 80rem) / 2 + var(--pad))); padding: 48px max(16px, calc(100% - min(80%, 760px) - max(var(--pad), calc((100vw - 80rem) / 2 + var(--pad))))) 12px max(var(--pad), calc((100vw - 80rem) / 2 + var(--pad))); scrollbar-width: none; cursor: grab; }
.strip .shot { scroll-snap-align: start; }
.strip::-webkit-scrollbar { display: none; }
.strip.dragging { cursor: grabbing; user-select: none; }
.strip.free { scroll-snap-type: none; }
.strip img { -webkit-user-drag: none; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-top: 48px; }
.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; margin: 48px 0 0; }
.terms div { border-top: 1px solid var(--ink); padding-top: 14px; }
.terms dt { font-weight: 600; margin-bottom: 4px; }
.terms dd { margin: 0; color: var(--grey); font-size: 15px; }
@media (max-width: 860px) { .terms, .tiles { grid-template-columns: 1fr; } }

.layers { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; overflow: hidden; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 15px; position: relative; z-index: 1; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend i { width: 22px; height: 16px; border: 1px solid var(--rule-2); flex: none; }
.stage3d { height: clamp(300px, 42vw, 520px); perspective: 1600px; display: grid; place-items: center; }
.stack { position: relative; width: min(56vw, 560px); aspect-ratio: 1.3; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-38deg); }
.layer { position: absolute; inset: 0; border: 1px solid var(--rule-2); transform: translateZ(calc(var(--i) * 2px)); }
.layer svg { width: 100%; height: 100%; display: block; }
.m .layer { transform: translateZ(calc(var(--i) * 64px)); }
.m .in .layer { transform: translateZ(calc(var(--i) * 2px)); transition: transform 1.6s var(--ease) calc(.6s + var(--i) * .12s); }
.m .legend li { opacity: .35; }
.m .in .legend li { opacity: 1; transition: opacity .4s linear calc(.2s + (3 - var(--i)) * .15s); }
.layer.dxf .parcel { fill: color-mix(in srgb, var(--y) 45%, transparent); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.m .layer.dxf .parcel { opacity: 0; }
.m .in .layer.dxf .parcel { opacity: 1; transition: opacity .5s linear 2.6s; }
.parcelcard { position: absolute; right: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 40px); background: var(--sheet); border: 1px solid var(--rule-2); border-left: 2px solid var(--ink); padding: 12px 16px; font-size: 15px; z-index: 1; }
.parcelcard p { margin: 0 0 2px; }
.m .parcelcard { opacity: 0; transform: translateY(8px); }
.m .in .parcelcard { opacity: 1; transform: none; transition: opacity .5s var(--ease) 2.9s, transform .5s var(--ease) 2.9s; }
@media (max-width: 860px) {
  .layers { grid-template-columns: 1fr; }
  .legend { grid-template-columns: 1fr 1fr; }
  .stack { width: 66vw; }
  .parcelcard { position: static; }
}

.library { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, .9fr); gap: 24px clamp(32px, 6vw, 88px); align-items: center; }
.book svg { width: 100%; max-width: 280px; }
.ln { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ln.q { stroke: var(--rule-2); }
.book .cap { margin-top: 12px; }
.fichas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; }
.fichas li { border: 1px solid var(--rule); padding: 10px 10px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.35; color: var(--grey); background: var(--sheet); }
.fichas li::before { content: ""; display: block; aspect-ratio: 4/3; border: 1px solid var(--rule); margin-bottom: 10px; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--rule) 50%, transparent calc(50% + .5px)); }
.fichas li[data-c] { border-color: var(--ink); color: var(--ink); }
.m .fichas li { opacity: 0; transform: translateX(-24px); }
.m .in .fichas li { opacity: 1; transform: none; transition: opacity .5s var(--ease) var(--d), transform .6s var(--ease) var(--d); }
.library .note { grid-column: 1 / -1; }
@media (max-width: 860px) { .library { grid-template-columns: 1fr; } .book svg { max-width: 200px; } }

/* Your data: what stays in the studio and what leaves it */
.bounds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(48px, 9vw, 140px); align-items: center; }
.studio { position: relative; z-index: 1; border: 1px dashed var(--rule-2); padding: 22px; display: grid; gap: 14px; }
.team { display: flex; align-items: center; gap: 2px; margin: 4px 0 0; font-family: var(--mono); font-size: 12px; color: var(--grey); }
.team span { margin-left: 8px; }
@media (max-width: 860px) { .bounds { grid-template-columns: 1fr; } }

/* ── Contact, legal pages and guides ───────────────────────── */
.mailto { display: inline-block; margin: 40px 0 0; font-size: clamp(30px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; text-decoration: none; background: var(--y); padding: 0 .15em; }
.prose .wrap > * { max-width: 68ch; }
.prose h1 { max-width: none; }
.prose h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin: 48px 0 12px; }
.prose .updated { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--grey); margin: 20px 0 0; }
.prose .lede { margin: 28px 0 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 0 0 .5em; }
.prose .facts { margin: 0 0 1em; display: grid; gap: 10px; }
.prose .facts div { display: grid; grid-template-columns: 11em 1fr; gap: 16px; padding-top: 10px; border-top: 1px solid var(--rule); margin: 0; }
.prose .facts dt { font: 600 16px/1.5 var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); }
.prose .facts dd { margin: 0; font-size: 17px; color: var(--ink); }
@media (max-width: 560px) { .prose .facts div { grid-template-columns: 1fr; gap: 2px; } }
.prose h3 { font-size: 19px; letter-spacing: -.01em; margin: 32px 0 8px; }
.prose ol { padding-left: 1.4em; }
.prose code { font-family: var(--mono); font-size: .86em; border: 1px solid var(--rule); padding: 0 4px; overflow-wrap: anywhere; }
.prose .table { overflow-x: auto; margin: 0 0 1.4em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-top: 1px solid var(--rule); }
.prose th { font-weight: 600; }
.prose .wrap > figure { max-width: 960px; margin: 40px 0; }
.prose figure.phone { max-width: 320px; }
.prose figure img { width: 100%; border: 1px solid var(--rule); }
.guides { list-style: none; padding: 0 !important; margin: 48px 0 0; }
.guides li { margin: 0; border-top: 1px solid var(--rule); }
.guides li:last-child { border-bottom: 1px solid var(--rule); }
.guides a { display: block; padding: 18px 0; text-decoration: none; }
.guides b { display: block; font-weight: 600; font-size: 19px; }
.guides a:hover b { text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 4px; }
.guides span { color: var(--grey); font-size: 16px; }
.pager { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule); }
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.pager a:last-child:not(:first-child) { text-align: right; }
.pager span { display: block; font-size: 14px; color: var(--grey); }
.prose .tree { list-style: none; padding: 14px 18px !important; margin: 0 0 1.4em; border: 1px solid var(--rule); font-size: 15px; }
.prose .tree li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 2px 16px; margin: 0; padding: 3px 0; }
.prose .tree code { border: 0; padding: 0; font-size: 13.5px; }
.prose .tree .l1 code { padding-left: 1.2em; }
.prose .tree .l2 code { padding-left: 2.4em; }
.prose .tree span { color: var(--grey); }
@media (max-width: 560px) { .prose .tree li { grid-template-columns: 1fr; } .prose .tree .l1 span { padding-left: 1.2em; } .prose .tree .l2 span { padding-left: 2.4em; } }

/* Zoom: a screenshot, enlarged to fit the window on white. */
.shot img { cursor: zoom-in; }
.zoom[open] { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); background: var(--sheet); cursor: zoom-out; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; }
.zoom::backdrop { background: var(--sheet); }
.zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border: 1px solid var(--rule); }
.m .zoom[open] img { animation: zoomin .35s var(--ease); }
@keyframes zoomin { from { opacity: 0; transform: scale(.96); } }