/* The site kit (STEP 0 of phase B-SITE): the sticky header and its features dropdown, the title-block footer, the sheet frame, the draft motion, the feature grid,
   the check-to-ribbon animation and the glass-over-aurora section. Tokens only (no colour literals, SP-14.09); no inline CSS anywhere. Logical properties throughout (he = rtl, en = ltr). */

#content { width: 100%; max-width: 1280px; margin-inline: auto; }

/* Hebrew labels are Heebo, never mono (the design rule); the mono code style is for Latin codes only */
.fg-title, .fgroup-name, .fg-card .badge-plugin, .fg-card .badge, .cr-tab { font-family: var(--vit-f-heb); text-transform: none; letter-spacing: 0; font-size: 13px; }

/* ── sheet frame ── */
.sheetframe { position: relative; display: grid; grid-template-rows: 1fr auto; border: 1px solid var(--vit-ink); margin: var(--vit-space-6) 0; background: var(--vit-paper); }
.sheetframe .axes { position: absolute; display: flex; justify-content: space-around; margin: 0; padding: 0; list-style: none; font-family: var(--vit-f-mono); font-size: 11px; color: var(--vit-ink-3); pointer-events: none; }
.sheetframe .axes li { max-width: none; }
.sheetframe .axes-x { inset-inline: 0; inset-block-start: 2px; }
.sheetframe .axes-y { inset-block: 0; inset-inline-start: 4px; flex-direction: column; align-items: center; }
.sheetframe-body { padding: var(--vit-space-6) var(--vit-space-6) var(--vit-space-5); }
/* the cell borders are the 1px gap over an ink background, so every wrap keeps consistent lines (no stray stub between rows) */
.titleblock { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px; margin: 0; background: var(--vit-ink); border-top: 1px solid var(--vit-ink); }
.titleblock > div { padding: var(--vit-space-2) var(--vit-space-3); background: var(--vit-paper); min-width: 0; }
.titleblock .tb-title { grid-column: span 2; }
.titleblock dt { display: block; font-size: 10.5px; }
.titleblock dd { margin: 0; font-family: var(--vit-f-heb); font-weight: 500; font-size: 14px; }
@media (max-width: 640px) { .sheetframe-body { padding: var(--vit-space-5) var(--vit-space-4); } .titleblock { grid-template-columns: 1fr 1fr; } .titleblock .tb-title { grid-column: 1 / -1; order: -1; } }   /* the title on its own row first, then SHEET|SCALE and PEN|DRAWN: the four small cells fill the two columns, so no empty cell shows the ink behind the 1px gaps */

/* ── draft motion: strokes draw in once ── */
.draft { display: block; width: 100%; max-width: 240px; height: auto; fill: none; stroke: var(--vit-ink); stroke-width: 1.2; stroke-linecap: square; }
.draft path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .draft path { stroke-dashoffset: 1; animation: kit-draw 1.1s ease-out forwards; }
  .draft path:nth-child(2) { animation-delay: .25s; }
  .draft path:nth-child(3) { animation-delay: .5s; }
  .draft path:nth-child(4) { animation-delay: .75s; }
}
@keyframes kit-draw { to { stroke-dashoffset: 0; } }

/* ── feature grid ── */
.featuregrid { display: grid; gap: var(--vit-space-6); }
.fg-title { margin: 0 0 var(--vit-space-3); }
.fg-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--vit-space-4); }
.fg-card { max-width: none; position: relative; }
.fg-link { display: grid; grid-template-rows: auto auto 1fr; gap: var(--vit-space-2); height: 100%; padding: var(--vit-space-4); text-decoration: none; color: var(--vit-ink); background: var(--vit-paper); border: 1px solid var(--vit-ink); border-radius: var(--vit-r-sm); }
a.fg-link:hover { background: var(--vit-paper-2); box-shadow: 3px 3px 0 var(--vit-ink); }
.fg-link h4 { margin: 0; font-size: 18px; }
.fg-link p { margin: 0; font-size: 14.5px; color: var(--vit-ink-2); }
.fg-card .ficon { width: 32px; height: 32px; color: var(--vit-ink); }
.fg-group[data-group="plugin"] .fg-link { border-inline-start-width: 6px; border-inline-start-color: var(--vit-clay); }
.fg-group[data-group="standalone"] .fg-link { border-style: dashed; }
.fg-card .badge-plugin, .fg-card .badge { justify-self: start; padding: 0 var(--vit-space-2); border: 1px solid var(--vit-ink); border-radius: var(--vit-r-pill); font-size: 11px; }
.fg-card .badge { background: var(--vit-clay); color: var(--vit-on-clay); }
.badge-soon { position: absolute; inset-block-start: var(--vit-space-3); inset-inline-end: var(--vit-space-3); padding: 0 var(--vit-space-2); font-size: 12px; font-weight: 500; color: var(--vit-ink-2); border: 1px solid var(--vit-line-strong); border-radius: var(--vit-r-pill); background: var(--vit-paper-2); }
.fg-card.is-soon .fg-link { background: var(--vit-paper-2); }

/* ── check to ribbon ── */
.checkribbon { margin: var(--vit-space-6) 0; display: grid; gap: var(--vit-space-5); max-width: 720px; }
.cr-chips, .cr-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vit-space-3); }
.cr-chip { display: flex; align-items: center; gap: var(--vit-space-2); padding: var(--vit-space-2) var(--vit-space-3); border: 1px solid var(--vit-ink); border-radius: var(--vit-r-sm); background: var(--vit-paper-2); font-size: 14px; }
.cr-tick { color: var(--vit-clay-text); }
.cr-ribbon { border: 1px solid var(--vit-ink); background: var(--vit-paper-3); padding: var(--vit-space-2) var(--vit-space-3) var(--vit-space-3); }
.cr-tab { display: inline-block; margin-bottom: var(--vit-space-2); }
.cr-slot { padding: var(--vit-space-2) var(--vit-space-3); border: 1px solid var(--vit-line-strong); background: var(--vit-clay); font-size: 13px; text-align: center; color: var(--vit-on-clay); }
@media (prefers-reduced-motion: no-preference) {
  .cr-chip { animation: kit-chip 5s ease-in-out infinite; }
  .cr-tick { animation: kit-tick 5s ease-in-out infinite; }
  .cr-slot { animation: kit-slot 5s ease-in-out infinite; }
  .cr-1, .cr-1 .cr-tick, .cr-s1 { animation-delay: .6s; }
  .cr-2, .cr-2 .cr-tick, .cr-s2 { animation-delay: 1.2s; }
}
@keyframes kit-chip { 0%, 8% { background: var(--vit-paper); transform: none; } 18%, 55% { background: var(--vit-paper-2); } 70% { transform: translateY(26px); opacity: .3; } 85%, 100% { transform: none; opacity: 1; } }
@keyframes kit-tick { 0%, 6% { opacity: 0; transform: scale(.4); } 18%, 100% { opacity: 1; transform: scale(1); } }
@keyframes kit-slot { 0%, 60% { background: var(--vit-paper); color: var(--vit-ink); } 75%, 100% { background: var(--vit-clay); color: var(--vit-on-clay); } }

/* ── glass over aurora ── */
.glass-section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 48px); margin-block: var(--vit-space-6); background: var(--vit-ink); }
.aurora { position: absolute; inset: 0; z-index: -1; filter: blur(48px); }
.aurora i { position: absolute; display: block; width: 55%; height: 70%; border-radius: 50%; opacity: .75; }
.aurora i:nth-child(1) { inset-block-start: -15%; inset-inline-start: -5%; background: var(--vit-clay); }
.aurora i:nth-child(2) { inset-block-end: -20%; inset-inline-end: 0; background: var(--vit-clay-ink); }
.aurora i:nth-child(3) { inset-block-start: 20%; inset-inline-start: 30%; width: 40%; background: var(--vit-ink-3); }
.glass { max-width: 720px; margin-inline: auto; padding: var(--vit-space-6); color: var(--vit-ink); background: color-mix(in srgb, var(--vit-paper) 94%, transparent); border: 1px solid color-mix(in srgb, var(--vit-paper) 70%, transparent); border-radius: var(--vit-r-md); box-shadow: 0 8px 32px color-mix(in srgb, var(--vit-ink) 35%, transparent); }
@supports (backdrop-filter: blur(1px)) { .glass { background: color-mix(in srgb, var(--vit-paper) 86%, transparent); backdrop-filter: blur(14px) saturate(1.2); } }
.glass h2, .glass h3 { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .aurora i { animation: kit-drift 18s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation-duration: 24s; animation-delay: -6s; }
  .aurora i:nth-child(3) { animation-duration: 30s; animation-delay: -12s; }
}
@keyframes kit-drift { to { transform: translate(12%, 10%) scale(1.15); } }

/* ── sheet section (R2: open, not boxed): a mono code eyebrow, a large heading and a drafted section line (ink hairline + the dimension mark + the clay ruling that draws on, draft.css).
   The only framed sheet of a page is its hero (SheetFrame). The markup is unchanged: <section.sheetsec> > header.ss-strip (h2 + code + dim) + div.ss-body. ── */
.sheetsec { position: relative; margin-block: var(--vit-space-7) 0; border: 0; background: transparent; }
.ss-strip { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "code dim" "title title"; align-items: center; gap: var(--vit-space-2) var(--vit-space-3); padding: 0 0 var(--vit-space-4); border: 0; border-bottom: 1px solid var(--vit-ink); background: transparent; }
.ss-code { grid-area: code; flex: none; font-size: 11px; color: var(--vit-ink-2); }
.ss-dim { grid-area: dim; margin: 0; }
.ss-title { grid-area: title; margin: 0; font-size: clamp(28px, 4.2vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; }
.ss-body { padding: var(--vit-space-5) 0 0; }
.ss-body > :first-child { margin-top: 0; }
.ss-body > :last-child { margin-bottom: 0; }
.sheetsec-narrow { max-width: 760px; }
.sheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vit-space-6); align-items: start; }
@media (max-width: 900px) { .sheet-row { grid-template-columns: 1fr; gap: 0; } }