/* The front page (site/index.html), on top of styles.css. Calm by rule:
   quiet plates on utility blocks (a border, no torn clip), one decoration per
   section (the kicker chip), mono meta never under 12px, single column under
   720. The numbering matches the Figma pages (00 README, 01 Product, 02 v2
   screens, 03 Design System, 09 Archive) so a reader never has to translate
   between the two. */
:root{
  --h-meta:12px;
  --h-max:1240px;
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--page);color:var(--paper);font-family:var(--ui);line-height:1.5}
body::before{display:none}
a.h-inl{color:var(--or);text-decoration:none;border-bottom:1px solid currentColor}
a.h-inl:hover{color:var(--yel)}

/* the sticky bar: the mark and the six parts */
.h-top{position:sticky;top:0;z-index:20;background:rgba(14,13,12,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--line-soft)}
.h-top-in{max-width:var(--h-max);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:22px}
.h-mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper);flex:none}
.h-mark img{height:34px;width:auto}
.h-mark span{font-family:var(--mono);font-size:var(--h-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.h-nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;min-width:0}
.h-nav::-webkit-scrollbar{display:none}
.h-nav a{font-family:var(--dsp);font-style:oblique;font-weight:500;text-transform:uppercase;font-size:16px;letter-spacing:.02em;color:var(--paper);text-decoration:none;padding:8px 12px;white-space:nowrap;border-bottom:2px solid transparent}
.h-nav a b{font-family:var(--mono);font-style:normal;font-weight:700;font-size:12px;color:var(--or);margin-right:6px;letter-spacing:.04em}
.h-nav a.on,.h-nav a:hover{border-bottom-color:var(--or)}

/* sections */
.h-wrap{max-width:var(--h-max);margin:0 auto;padding:0 24px}
.h-sec{padding:76px 0 28px;border-top:1px solid var(--line-soft)}
.h-sec:first-of-type{border-top:0}
.h-kicker{display:inline-block;font-family:var(--mono);font-weight:700;font-size:var(--h-meta);letter-spacing:.12em;text-transform:uppercase;color:#141414;background:var(--yel);padding:7px 34px 6px 18px;margin-bottom:18px;clip-path:var(--tear-chip)}
.h-sec h2{font-size:clamp(40px,5.6vw,64px);line-height:.98;margin:0 0 16px;font-style:oblique;font-weight:500}
.h-lede{font-size:17px;max-width:780px;color:var(--paper);margin:0 0 20px;line-height:1.6}
.h-lede b{color:var(--yel);font-weight:400}
.h-lede.h-one{margin:0}
.h-meta{font-family:var(--mono);font-size:var(--h-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);line-height:1.7;margin:0 0 6px}
.h-note{font-size:14px;color:var(--dim);max-width:900px;margin:14px 0 0;line-height:1.6}
.h-h3{font-family:var(--dsp);font-style:oblique;font-weight:500;text-transform:uppercase;font-size:28px;margin:52px 0 6px}
.h-h3 + .h-meta{margin-bottom:18px}

/* 00: the map and the link rows */
.h-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:30px 0 14px}
.h-map a{display:block;text-decoration:none;color:var(--paper);background:var(--panel);border:2px solid var(--line-soft);padding:20px 20px 22px;transition:border-color .15s}
.h-map a:hover{border-color:var(--or)}
.h-map b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--or);margin-bottom:8px}
.h-map strong{display:block;font-family:var(--dsp);font-style:oblique;font-weight:500;text-transform:uppercase;font-size:24px;line-height:1;margin-bottom:8px}
.h-map span{font-size:14px;color:var(--dim);line-height:1.5}
.h-rows{margin:30px 0 8px;display:grid;gap:14px}
.h-row{display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:start;padding-top:14px;border-top:1px solid var(--line-soft)}
.h-row-l{font-family:var(--mono);font-size:var(--h-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-top:11px}
.h-links{display:flex;flex-wrap:wrap;gap:10px}
.h-links a{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--paper);text-decoration:none;border:2px solid var(--line);padding:9px 13px;background:var(--panel)}
.h-links a:hover{border-color:var(--or);color:var(--or)}

/* 01: product cards, the capture cropped to its top, never stretched */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;margin:16px 0 8px}
.p-card{background:var(--panel);border:2px solid var(--line-soft);display:flex;flex-direction:column}
.p-card a.shot{display:block;background:#000;aspect-ratio:4/5;overflow:hidden}
.p-card a.shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.p-card.phone a.shot img{object-fit:contain;object-position:top}
.p-card a.shot:hover{outline:2px solid var(--or);outline-offset:-2px}
.p-card .cap{padding:12px 14px 14px}
.p-card .cap b{display:block;font-family:var(--dsp);font-style:oblique;font-weight:500;text-transform:uppercase;font-size:20px;line-height:1.05}
.p-card .cap span{display:block;font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:6px;letter-spacing:.02em;overflow-wrap:anywhere}

/* 02: the v2 screens keep the catalogue's card, only the type is re-set to the one display weight */
.mm-foot p{font-family:var(--dsp);font-style:oblique;font-weight:500;text-transform:uppercase;font-size:20px;margin:0}
.mm-foot p.mm-line{font-family:var(--mono);font-size:var(--h-meta);color:var(--dim);margin:4px 0 0;letter-spacing:.02em;text-transform:none}
.mm-foot .btn{font-weight:500;font-style:oblique;flex:none}

/* 03: tokens */
.t-table{width:100%;border-collapse:collapse;margin:12px 0 8px;font-family:var(--mono);font-size:12.5px}
.t-table th{text-align:left;font-weight:700;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;font-size:12px;padding:10px 10px;border-bottom:1px solid var(--line)}
.t-table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--paper)}
.t-table td.j{color:var(--dim);font-family:var(--ui);font-size:14px}
.t-table td.old{color:var(--yel)}
.t-table td.old.same{color:var(--olive)}
.t-sw{display:inline-block;width:26px;height:18px;vertical-align:middle;margin-right:10px;border:1.5px solid #000;box-shadow:2px 2px 0 #000}
.t-table tr:hover td{background:#141312}
.t-copy{cursor:pointer}
/* type */
.ty-row{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.ty-row .n{font-family:var(--mono);font-size:var(--h-meta);color:var(--dim);letter-spacing:.06em;text-transform:uppercase;line-height:1.6}
.ty-row .s{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ty-disp{font-family:var(--dsp);font-style:oblique;font-weight:500;text-transform:uppercase;line-height:1.05}
.ty-body{font-family:var(--ui);font-weight:400}
.ty-mono{font-family:var(--mono);font-weight:800}
/* shadows */
.sh-row{display:flex;flex-wrap:wrap;gap:28px;margin:18px 0 8px}
.sh-row div{width:130px;height:74px;background:var(--paper);border:2px solid #000;display:grid;place-items:end start;padding:8px 10px;font-family:var(--mono);font-size:12px;color:#141414}
/* silhouettes */
.sil-host{margin:10px 0 0}
.sil-group{margin:22px 0 0}
.sil-group h4{font-family:var(--mono);font-style:normal;font-weight:700;font-size:var(--h-meta);letter-spacing:.1em;color:var(--or);margin:0 0 12px;text-transform:uppercase}
.sil-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.sil-row-wide{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.sil{margin:0;background:var(--panel);border:2px solid var(--line-soft);padding:18px 16px 14px;display:flex;flex-direction:column}
.sil svg{display:block;width:100%;height:104px;filter:drop-shadow(4px 4px 0 #000)}
.sil figcaption{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.sil figcaption b{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--paper);letter-spacing:.02em}
.sil-meta{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.02em;overflow-wrap:anywhere}
.sil-use{font-size:14px;color:var(--paper);line-height:1.45}
.sil-ours{font-size:13.5px;color:var(--dim);line-height:1.45}
/* components */
.c-table{width:100%;border-collapse:collapse;margin:12px 0}
.c-table th{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:10px 10px;border-bottom:1px solid var(--line)}
.c-table td{padding:12px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:14px}
.c-table td.name{font-family:var(--dsp);font-style:oblique;font-weight:500;text-transform:uppercase;font-size:20px;white-space:nowrap}
.c-table td.ours{font-family:var(--mono);font-size:12.5px;color:var(--yel);white-space:nowrap}
.c-table td.theirs{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.c-table td.what{color:var(--paper)}
.c-table .new{font-family:var(--mono);font-style:normal;font-weight:700;font-size:12px;letter-spacing:.06em;background:var(--or);color:#141414;padding:1px 6px;margin-left:8px;vertical-align:middle}
/* the kits kept from the catalogue, their meta lifted to the floor and their display to the one weight */
.icon-tile span{font-size:12px}
.icon-dl a{font-family:var(--mono);font-size:12px;color:var(--dim);text-decoration:none;background:#000;border:1px solid var(--line-soft);padding:2px 7px}
.icon-dl a:hover{color:var(--or);border-color:var(--or)}
.bk-meta b{font-style:oblique;font-weight:500}
.bk-meta span,.bk-w{font-size:12px}

/* 04: handover */
.hv-steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:18px 0}
.hv-steps div{background:var(--panel);border:2px solid var(--line-soft);padding:20px 22px 22px;counter-increment:s}
.hv-steps div::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-weight:800;font-size:13px;color:var(--or);display:block;margin-bottom:8px;letter-spacing:.08em}
.hv-steps b{display:block;font-family:var(--dsp);font-style:oblique;font-weight:500;text-transform:uppercase;font-size:22px;line-height:1.05;margin-bottom:8px}
.hv-steps p{margin:0;font-size:14px;color:var(--dim);line-height:1.55}
.hv-steps code,.h-lede code,.hv-rules code{font-family:var(--mono);font-size:12.5px;color:var(--paper);background:#000;padding:1px 5px}
pre.hv-code{background:#000;border:2px solid var(--line-soft);padding:16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--paper);overflow:auto;margin:14px 0}
.hv-rules{margin:10px 0 0;padding-left:18px;font-size:15px;color:var(--paper);max-width:980px}
.hv-rules li{margin:8px 0;line-height:1.55}

/* footer */
.h-foot{border-top:1px solid var(--line-soft);margin-top:80px;padding:34px 0 60px}
.h-foot .h-wrap{display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;font-family:var(--mono);font-size:var(--h-meta);color:var(--dim);letter-spacing:.04em}
.h-foot a{color:var(--paper);text-decoration:none}
.h-foot a:hover{color:var(--or)}

@media (max-width:860px){
  .ty-row{grid-template-columns:1fr;gap:6px}
  .t-table td.j{display:none}
  .t-table th:nth-child(3){display:none}
  .h-row{grid-template-columns:1fr;gap:8px}
  .h-row-l{padding-top:0}
}
@media (max-width:720px){
  .h-top-in{padding:10px 16px;gap:12px}
  .h-mark span{display:none}
  .h-mark img{height:28px}
  .h-nav a{font-size:14px;padding:8px 8px}
  .h-wrap{padding:0 16px}
  .h-sec{padding:52px 0 18px}
  .h-sec h2{font-size:40px}
  .h-lede{font-size:15.5px}
  .p-grid,.hv-steps,.sil-row,.sil-row-wide,.h-map{grid-template-columns:1fr}
  .c-table td.theirs{display:none}
  .c-table th:nth-child(3){display:none}
  .c-table td.name{white-space:normal;font-size:18px}
  .c-table td.ours{white-space:normal}
  .t-table{font-size:12px}
  .ty-row .s{white-space:normal}
  .mm-foot{flex-wrap:wrap}
}

/* JetBrains Mono joins ">-" into an arrow; paths here must read as typed */
code,.hv-code,pre{font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0}

/* Current work is visible before the documentation map. */
.h-feature{display:grid;grid-template-columns:1.25fr 1fr;background:var(--panel);border:1px solid var(--line);margin:30px 0 36px;overflow:hidden}.h-feature-art{display:block;min-width:0;border-right:1px solid var(--line);max-height:410px;overflow:hidden}.h-feature-art img{width:100%;height:100%;object-fit:cover;object-position:top}.h-feature-copy{padding:32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.h-status{display:inline-block;font:12px/1.5 var(--mono);letter-spacing:.045em;color:var(--yel);margin-bottom:12px}.h-feature-copy h3{font-size:42px;font-weight:500;font-style:oblique;text-transform:uppercase;line-height:1.05;margin:0 0 16px}.h-feature-copy>p{font-size:18px;color:var(--dim);line-height:1.5;margin:0 0 20px}.h-actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:20px}.h-actions .btn{min-height:48px;padding:12px 18px}.h-feature-copy .h-feature-note{font-size:13px;margin:0}.h-component-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 36px}.h-component-links a{padding:24px;border:1px solid var(--line);background:var(--panel);color:var(--paper);text-decoration:none}.h-component-links a:hover{border-color:var(--or)}.h-component-links b{display:block;font:26px var(--dsp);font-style:oblique;text-transform:uppercase;margin-bottom:12px}.h-component-links span{font:16px/1.5 var(--ui);color:var(--dim)}.mm-foot .h-status{display:block;margin:8px 0 0}.h-nav a{min-height:44px}a:focus-visible{outline:3px solid var(--yel);outline-offset:4px}.h-map a:focus-visible,.h-component-links a:focus-visible{border-color:var(--yel)}
@media(max-width:850px){.h-feature{grid-template-columns:1fr}.h-feature-art{max-height:350px;border-right:0;border-bottom:1px solid var(--line)}.h-feature-copy{padding:26px}.h-component-links{grid-template-columns:1fr}.h-feature-copy h3{font-size:36px}}@media(max-width:450px){.h-feature-art{max-height:245px}.h-feature-copy{padding:22px}.h-feature-copy>p{font-size:17px}.h-actions{gap:16px}.h-feature-copy h3{font-size:34px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.h-table-scroll{width:100%;max-width:100%;overflow-x:auto}.h-table-scroll:focus-visible{outline:2px solid var(--yel);outline-offset:3px}.token-copy{font:inherit;color:inherit;background:none;border:0;padding:8px 2px;min-height:44px;cursor:pointer}.token-copy:focus-visible{outline:2px solid var(--yel);outline-offset:2px}