/* site.css — the information site's LAYOUT layer. Tokens, base elements, and shared primitives
   (.btn, .card, .term, tables, pre, fonts) all live in the shared design system, loaded FIRST:
       <link rel="stylesheet" href="/i2xp.css">   (shared/i2xp.css)
       <link rel="stylesheet" href="/site.css">   (this — page-specific structure)
   So this file holds only what is unique to i2xp.com: the header, hero, section rhythm, the walk,
   the laws, the vocabulary table, and the footer. Monochrome per STYLE.md — no blue, no green. */

/* header */
header.site {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  backdrop-filter: saturate(1.2) blur(6px);
}
header.site .bar {
  max-width: 64rem; margin: 0 auto; padding: .8rem 1.25rem;
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
header.site b { font-weight: 700; letter-spacing: .01em; font-size: 1.05rem; }
header.site .home { color: inherit; text-decoration: none; }
header.site .home:hover { color: var(--muted); text-decoration: none; }
header.site small { color: var(--muted); }
header.site nav { margin-left: auto; display: flex; gap: 1rem; font-size: .92rem; flex-wrap: wrap; }
header.site nav a { color: var(--muted); }
header.site nav a:hover { color: var(--ink); text-decoration: none; }

/* hero — H1 is Inter 300 Light (STYLE.md §3), ink with a muted line-break rhythm */
.hero-section { padding: clamp(4rem, 11vw, 7rem) 0 clamp(3.5rem, 9vw, 5.5rem); border-bottom: 1px solid var(--line); }
.hero-content { max-width: 48rem; margin: 0 auto; text-align: center; }
.kicker { margin: 0 0 1.4rem; }
.hero-content h1 { font-weight: 300; line-height: 1.08; font-size: clamp(2.4rem, 6vw, 3.7rem); margin: 0 auto 1.1rem; letter-spacing: -.03em; }
/* "gradient" is now a monochrome ink→muted wash — the guide's crisp-ink/soft-gray optical weight */
.gradient-text { color: var(--muted); }   /* visible fallback if background-clip is unsupported */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text { background: linear-gradient(135deg, var(--ink) 0%, var(--muted) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.hero-content .expand { font-family: var(--mono); font-size: .95rem; color: var(--muted); margin: 0 0 1.5rem; letter-spacing: .01em; }
.hero-content .expand b { color: var(--ink); font-weight: 600; }
.hero-content p.lead { font-size: clamp(1.1rem, 2.4vw, 1.32rem); color: var(--muted); line-height: 1.6; margin: 0 auto 2.2rem; max-width: 40rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* sections — H2 is Inter Regular (STYLE.md §3); keyline-separated vertical rhythm */
section { padding: clamp(2.4rem, 6vw, 3.8rem) 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
section > .wrap > h2 { font-weight: 400; font-size: 1.75rem; margin: 0 0 .35rem; letter-spacing: -.02em; text-transform: none; font-family: var(--sans); }
section > .wrap > .h2sub { color: var(--muted); margin: 0 0 1.7rem; font-size: 1rem; }
section p { margin: 0 0 1rem; }

/* the walk — spatial steps */
ol.steps { list-style: none; counter-reset: step; margin: 1.4rem 0 0; padding: 0; }
ol.steps li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .3rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
ol.steps li:last-child { border-bottom: 0; }
ol.steps .k { font-family: var(--mono); font-weight: 600; color: var(--ink); font-size: 1rem; }
ol.steps li.auto .k { color: var(--muted); }   /* tonal, not chromatic — the auto row reads by weight */
ol.steps .v { color: var(--muted); }
ol.steps .v b { color: var(--ink); font-weight: 600; }
@media (max-width: 32rem) { ol.steps li { grid-template-columns: 1fr; } }

/* cards — keyline containers from shared; site adds the title/name/role composition */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .grid.two { grid-template-columns: 1fr 1fr; } }
.card h3 { margin: 0 0 .4rem; font-size: 1.05rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-family: var(--sans); font-weight: 600; text-transform: none; letter-spacing: normal; }
.card h3 .name { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.card h3 .role { font-weight: 400; color: var(--muted); font-size: .92rem; }
.card p { margin: 0; font-size: .95rem; color: var(--muted); }

/* laws — numbered monochrome medallions (ink disc, canvas numeral) */
ol.laws { list-style: none; counter-reset: law; margin: 0; padding: 0; }
ol.laws li { counter-increment: law; position: relative; padding: .85rem 0 .85rem 3rem; border-bottom: 1px solid var(--line); }
ol.laws li:last-child { border-bottom: 0; }
ol.laws li::before { content: counter(law); position: absolute; left: 0; top: .8rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--on-ink); background: var(--ink); }
ol.laws b { font-weight: 700; }
ol.laws .note { color: var(--muted); }

/* vocabulary table — the term words in Space Grotesk ink (shared styles the table frame) */
td .word { font-family: var(--mono); color: var(--ink); font-weight: 600; }

/* the coordinate block — shared `pre` frames it; site sets the margin + comment tone */
pre.coord { line-height: 1.75; margin: 1.2rem 0 0; }
pre.coord .c { color: var(--muted); }

/* footer */
footer.site { border-top: 1px solid var(--line); background: var(--surface); padding: 2.4rem 0 3rem; }
footer.site .wrap { max-width: 64rem; }
footer.site .chain { font-family: var(--mono); font-size: .9rem; color: var(--ink); }
footer.site .chain span { color: var(--muted); }
footer.site .fine { margin-top: 1rem; color: var(--muted); font-size: .85rem; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--ink); }