/* LODE2: the Lode product site (v11). One 12-column grid: 1248 px of content at 1440 (96 px margins min 48), 24 px
   gutters; under 760 px a 4-column grid with 20 px margins. 8 px spacing scale. Tokens and painted tiles follow the v10
   home (WEB14 to WEB20); the product windows are real Studio captures (tools/MEDIA.json). */
@font-face { font-family: "Switzer"; src: url("/fonts/Switzer-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --canvas: #f4f3f0; --ink-1: #0d0d0c; --ink-grey: #847f78; --ink-2: #57534e; --ink-3: #6e6a64; --hair: #e3e0db;
  --link: #2a56c6; --gut: 24px; --mx: max(48px, calc((100vw - 1248px) / 2));
  --r-tile: 16px; --r-win: 12px;
  --white: #ffffff; --ink-hover: #2b2a28; --paint-base: #9dbcc8;
  --win-shadow: 0 0 0 1px rgb(30 28 24 / 0.08), 0 1px 2px rgb(30 28 24 / 0.06), 0 24px 56px -24px rgb(40 44 52 / 0.28);
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink-1); font-family: "Switzer", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; line-height: 24px; overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.wrap { width: 100%; padding: 0 var(--mx); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.grey { color: var(--ink-grey); }

/* ---- type ---- */
.h1 { font-size: 56px; line-height: 64px; font-weight: 500; letter-spacing: -0.035em; }
.h2 { font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -0.03em; }
.h3 { font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.02em; }
.h4 { font-size: 18px; line-height: 24px; font-weight: 520; letter-spacing: -0.01em; }
.sub { font-size: 18px; line-height: 28px; color: var(--ink-2); }
.line { font-size: 16px; line-height: 24px; color: var(--ink-2); }
.num, .eyebrow { font-size: 14px; line-height: 20px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--canvas); box-shadow: 0 1px 0 var(--hair); }
.nav__in { height: 64px; display: flex; align-items: center; gap: 40px; }
.nav__brand { display: flex; align-items: center; gap: 8px; font-size: 19px; line-height: 24px; font-weight: 560; letter-spacing: -0.02em; }
.nav__links { display: flex; gap: 28px; font-size: 15px; }
.nav__links a, .nav__cta, .foot a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; transition: text-decoration-color 160ms; }
.nav__links a:hover, .nav__cta:hover, .foot a:hover { text-decoration-color: currentColor; }
.nav__links a { color: var(--ink-2); }
.nav__links a[aria-current="page"] { color: var(--ink-1); }
.nav__cta { margin-left: auto; font-size: 15px; }
.nav__menu { display: none; margin-left: auto; position: relative; }
.nav__menu summary { list-style: none; cursor: pointer; font-size: 15px; height: 40px; display: flex; align-items: center; padding: 0 4px; }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__sheet { position: fixed; top: 64px; left: 0; right: 0; background: var(--canvas); box-shadow: 0 1px 0 var(--hair), 0 16px 32px -16px rgb(0 0 0 / 0.18);
  display: flex; flex-direction: column; padding: 8px 20px 16px; }
.nav__sheet a { font-size: 18px; line-height: 24px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.nav__sheet a:last-child { border-bottom: 0; }

/* ---- buttons and links ---- */
.ctas { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px; background: var(--ink-1); color: var(--white);
  font-size: 16px; letter-spacing: -0.01em; transition: background-color 140ms ease; }
.btn:hover { background: var(--ink-hover); }   /* SWEEP1 (founder): hover is a light lightness shift only; nothing moves */
.explore { display: inline-flex; align-items: center; gap: 8px; color: var(--link); font-size: 16px; line-height: 24px; }
.explore__t { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 160ms; }
.explore:hover .explore__t, .card:hover .explore__t { text-decoration-color: currentColor; }
.explore__chev { font-size: 18px; }

/* ---- painted tiles (LODE4): a family of painted backdrops, one hue per tile, made by tools/make_backdrops.py ---- */
.tile { position: relative; overflow: hidden; border-radius: var(--r-tile); isolation: isolate; background-color: var(--paint-base); }
.paint::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg) center / cover no-repeat; }
.paint--blue  { --paint-base: #a9c6d0; --bg: url("/media/bg_blue.webp"); }
.paint--sage  { --paint-base: #b4c0ac; --bg: url("/media/bg_sage.webp"); }
.paint--sand  { --paint-base: #d2c6b2; --bg: url("/media/bg_sand.webp"); }
.paint--lilac { --paint-base: #c4bed6; --bg: url("/media/bg_lilac.webp"); }
.paint--peach { --paint-base: #dfc5bc; --bg: url("/media/bg_peach.webp"); }
.paint--slate { --paint-base: #a9b3bc; --bg: url("/media/bg_slate.webp"); }
.paint--rose  { --paint-base: #ccb3b9; --bg: url("/media/bg_rose.webp"); }
.paint--dusk  { --paint-base: #b3b1c8; --bg: url("/media/bg_dusk.webp"); }

/* ---- product windows: real captures with a soft frame ---- */
.win { border-radius: var(--r-win); overflow: hidden; background: var(--white); box-shadow: var(--win-shadow); }
.win img, .win video { width: 100%; height: auto; }
.cad img { width: 100%; height: auto; }

/* ---- hero ---- */
.hero { padding: 104px 0 0; }
.hero__h { grid-column: 1 / 10; }
.hero__sub { grid-column: 1 / 7; margin-top: 24px; }
.hero__ctas { grid-column: 1 / 13; margin-top: 40px; }
.hero__win { grid-column: 1 / 13; margin-top: 72px; padding: 56px 56px 0; height: 720px; }
.hero__win .win { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hero__win--cad { padding: 24px; display: flex; align-items: center; justify-content: center; }
.hero__win--cad .cad { width: min(820px, 100%); }
.hero--feature .hero__win { height: 680px; }
.hero--feature .hero__win:not(.hero__win--cad) .win { width: min(var(--nw, 100%), 100%); margin: 0 auto; }
.eyebrow { grid-column: 1 / 13; margin-bottom: 16px; }

/* ---- section heads ---- */
.sec-head { padding: 160px 0 64px; }
.sec-head__h { grid-column: 1 / 10; }

/* ---- cards (feature grid) ---- */
.cards .grid { row-gap: 64px; }
.card { grid-column: span 4; display: flex; flex-direction: column; }
.card .tile { height: 300px; }
.card .h4 { margin-top: 24px; }
.card .line { margin-top: 8px; }
.card .explore { margin-top: 12px; }
.tile__win { position: absolute; left: 32px; top: 32px; width: calc(var(--nw) * 0.78); border-radius: 10px; overflow: hidden; background: var(--white); box-shadow: var(--win-shadow);
  transition: box-shadow 140ms ease; }
.card:hover .tile__win { box-shadow: var(--win-shadow-hover); }
.tile__win img { width: 100%; height: auto; }
.tile__cad { position: absolute; inset: 16px; display: flex; align-items: center; justify-content: center; }
.tile__cad img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* ---- numbered sections ---- */
.feat { padding-top: 96px; }
.feat__win { grid-column: 1 / 8; height: 560px; padding: 48px 0 0 48px; }
.feat__win .win { width: min(var(--nw, 100%), 140%); }
.feat__win--cad { padding: 24px; display: flex; align-items: center; justify-content: center; }
.feat__win--cad .cad { width: 100%; }
.feat__text { grid-column: 9 / 13; align-self: center; }
.feat__text .h3 { margin-top: 8px; }
.feat__text .line { margin-top: 16px; }
.feat__text .explore { margin-top: 16px; }
.feat--flip .feat__win { grid-column: 6 / 13; grid-row: 1; }
.feat--flip .feat__text { grid-column: 1 / 5; grid-row: 1; }

/* ---- pair ---- */
.pair { padding-top: 120px; }
.pair__item { grid-column: span 6; }
.pair__item .tile { height: 440px; }
.pair__item .tile__win { width: min(calc(var(--nw) * 0.9), 130%); }
.pair__item .h4 { margin-top: 24px; }
.pair__item .line { margin-top: 8px; }

.figs { grid-column: 1 / 13; margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); border-top: 1px solid var(--hair); padding-top: 24px; }
.fig__n { font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fig__l { margin-top: 4px; color: var(--ink-3); font-size: 15px; }


/* ---- close + footer ---- */
.close { padding: 200px 0 160px; text-align: center; }
.close__h { text-align: center; }
.close .ctas { justify-content: center; margin-top: 40px; }
.foot { border-top: 1px solid var(--hair); padding: 48px 0 64px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.foot__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 32px; }
.foot__brand { grid-column: 1 / 5; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 560; color: var(--ink-1); }
.foot__col { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; }
.foot__col p { color: var(--ink-1); }
.foot__parent { grid-column: 1 / 13; color: var(--ink-3); }
.foot__parent a { color: var(--ink-1); }

/* ---- smaller screens ---- */
@media (max-width: 1180px) {
  .nav__links { gap: 20px; }
  .hero__win { height: 560px; padding: 40px 40px 0; }
  .hero--feature .hero__win { height: 560px; }
  .feat__win { height: 460px; padding: 32px 0 0 32px; }
  .card .tile { height: 240px; }
  .tile__win { left: 24px; top: 24px; width: calc(var(--nw) * 0.62); }
}
@media (max-width: 960px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: block; }
}
@media (max-width: 760px) {
  :root { --mx: 20px; --gut: 16px; }
  .grid, .foot__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h1 { font-size: 36px; line-height: 44px; }
  .h2 { font-size: 28px; line-height: 36px; }
  .h3 { font-size: 24px; line-height: 32px; }
  .sub { font-size: 17px; line-height: 26px; }
  .hero { padding-top: 48px; }
  .hero__h, .hero__sub, .hero__ctas, .hero__win, .eyebrow, .sec-head__h, .card, .feat__win, .feat__text, .feat--flip .feat__win, .feat--flip .feat__text,
  .pair__item, .figs, .foot__brand, .foot__parent { grid-column: 1 / -1; }
  .feat--flip .feat__win, .feat--flip .feat__text { grid-row: auto; }
  .hero__ctas { margin-top: 32px; gap: 24px; }
  .hero__win, .hero--feature .hero__win { margin-top: 48px; height: 400px; padding: 24px 0 0 24px; }
  .hero__win .win { width: 820px; }
  .hero--feature .hero__win:not(.hero__win--cad) .win { width: min(var(--nw, 100%), 720px); margin: 0; }
  .hero__win--cad { padding: 16px; }
  .sec-head { padding: 104px 0 40px; }
  .cards .grid { row-gap: 48px; }
  .card .tile { height: 240px; }
  .tile__win { width: calc(var(--nw) * 0.62); }
  .feat { padding-top: 64px; }
  .feat__win { height: 380px; padding: 24px 0 0 24px; }
  .feat__win .win { width: min(var(--nw, 100%), 600px); }
  .feat__win--cad { padding: 16px; height: auto; }
  .feat__text { margin-top: 24px; }
  .pair { padding-top: 64px; }
  .pair .grid { row-gap: 48px; }
  .pair__item .tile { height: 320px; }
  .pair__item .tile__win { width: calc(var(--nw) * 0.7); }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; margin-top: 48px; }
  .fig__n { font-size: 28px; line-height: 36px; }
  .close { padding: 128px 0 104px; }
  .foot__col { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---- LODE2 fixes: short windows sit whole in their tile; wide sections; footer ---- */
.feat__win.tile--fit { height: auto; padding: 48px; display: flex; align-items: center; justify-content: center; min-height: 400px; }
.feat__win.tile--fit .win { width: min(var(--nw, 100%), 100%); }
.hero__win.tile--fit { height: auto; padding: 56px; display: flex; justify-content: center; }
.hero__win.tile--fit .win { border-radius: var(--r-win); }
.feat--wide .feat__win { grid-column: 1 / 13; }
.feat--wide .feat__text { grid-column: 1 / 7; margin-top: 32px; }
.foot__brand { align-self: start; }
@media (max-width: 760px) {
  .feat__win.tile--fit, .hero__win.tile--fit { padding: 16px; min-height: 0; }
  .feat--wide .feat__text { grid-column: 1 / -1; }
  .feat--wide .feat__win .win { width: 820px; }
  .feat--wide .feat__win.tile--fit { justify-content: flex-start; overflow: hidden; }
  .feat--wide .feat__win.tile--fit > .win { flex: none; }
}
.h1, .h2 { text-wrap: balance; }
@media (max-width: 1180px) { .hero__h { grid-column: 1 / -1; } .hero__sub { grid-column: 1 / 9; } }

/* ---- LODE3: stills only (the film is gone). Two windows side by side; the closing band of figures ---- */
.duo { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; }
.duo .win { flex: 0 1 var(--nw); min-width: 0; }
.band { padding-top: 160px; }
.band__text { grid-column: 1 / 8; }
.band__text .line { margin-top: 24px; max-width: 560px; }
.band__win { grid-column: 1 / 13; margin-top: 56px; }
.band__win .win { width: min(var(--nw), 100%); }
@media (max-width: 760px) {
  .hero__win.tile--fit { justify-content: flex-start; overflow: hidden; }
  .hero__win.tile--fit > .win { flex: none; }
  .duo .win + .win { display: none; }
  .hero--feature .hero__win .duo .win { flex: none; width: 100%; margin: 0; }
  .band { padding-top: 104px; }
  .band__text, .band__win { grid-column: 1 / -1; }
  .band__win { margin-top: 32px; overflow: hidden; }
  .band__win .win { width: 820px; flex: none; }
}

/* ---- LODE4: the home hero on a phone shows the conversation alone, whole and readable ---- */
@media (max-width: 760px) {
  .hero__win .win.win--hero { width: 100%; max-width: 440px; flex: 1 1 auto; }
  .hero__sub { grid-column: 1 / -1; }   /* the 1180 px rule's 1 / 9 made implicit columns and narrowed the hero */
  .hero__win.tile--fit:has(.win--hero) { padding: 12px; }
}

/* ---- SWEEP1 (LODE-WEB-SWEEP1, 10-16): states, keyboard, rhythm. Nothing on the site moves on hover: buttons shift
   lightness (140 ms ease), press darkens, links change colour and underline, cards deepen the window shadow. ---- */
:root { color-scheme: light; --ink-press: #000000; --link-hover: #1f45a8;
  --win-shadow-hover: 0 0 0 1px rgb(30 28 24 / 0.10), 0 1px 2px rgb(30 28 24 / 0.07), 0 28px 64px -24px rgb(40 44 52 / 0.36); }
html { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: rgb(42 86 198 / 0.18); }
main:focus { outline: none; }

/* buttons: rest, hover (lighter), press (darker), focus ring; no transform anywhere */
.btn { -webkit-user-select: none; user-select: none; }
.btn:active { background: var(--ink-press); transition-duration: 60ms; }
.btn:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 999px; }

/* links: colour plus underline, never movement */
.explore { transition: color 140ms ease; }
.explore:hover, .card:hover .explore { color: var(--link-hover); }
.explore:active { color: var(--ink-1); }
.nav__links a { transition: color 140ms ease, text-decoration-color 140ms ease; }
.nav__links a:hover { color: var(--ink-1); }
.nav__links a[aria-current="page"] { text-decoration-color: var(--ink-grey); }
.foot a { transition: color 140ms ease, text-decoration-color 140ms ease; }
.foot a:hover { color: var(--ink-1); }
.card:focus-visible { outline-offset: 6px; border-radius: calc(var(--r-tile) + 4px); }

/* skip link: the first Tab stop on every page */
.skip { position: absolute; left: 16px; top: 8px; z-index: 60; transform: translateY(-200%); background: var(--ink-1); color: var(--white);
  padding: 10px 16px; border-radius: 999px; font-size: 15px; line-height: 20px; }
.skip:focus-visible { transform: none; outline-offset: 3px; }

/* the phone menu: a 44 px target, an open state */
.nav__menu summary { height: 44px; padding: 0 8px; margin-right: -8px; border-radius: 8px; transition: background-color 140ms ease; }
.nav__menu summary:hover, .nav__menu[open] summary { background: rgb(13 13 12 / 0.05); }

/* wrapping: no orphans in body copy, balanced short heads */
.sub, .line { text-wrap: pretty; }
.h3, .h4 { text-wrap: balance; }

/* rhythm: a section head and its first step sit 64 px apart, like the cards; the close matches the other heads */
.sec-head + .feat { padding-top: 0; }
.close { padding: 160px 0; }

/* CLS: the home hero window had no width of its own (a flex item sized by an image sized by it), so for a frame
   before the picture decoded it was 120 px tall and then grew; it now takes the tile's width from the first frame */
.hero__win .win--hero { width: 100%; }

/* 404: the pages to go to */
.lost { grid-column: 1 / 13; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.hero:has(.lost) { padding-bottom: 200px; }

@media (prefers-contrast: more) { :root { --ink-grey: #5f5a54; --ink-3: #57534e; --ink-2: #3d3a36; } }
@media (max-width: 760px) {
  .foot__col { gap: 0; }
  .foot__col p { margin-bottom: 4px; }
  .foot__col a { padding: 6px 0; }                    /* 32 px touch targets in the footer */
  .close { padding: 104px 0; }
  .lost { grid-column: 1 / -1; }
  .hero:has(.lost) { padding-bottom: 120px; }
  /* Design hero on a phone: the part as designed, not the requirements list that section 01 shows next */
  .duo .win:first-child:has(+ .win) { display: none; }
  .duo .win + .win { display: block; }
  .hero--feature .hero__win .duo .win + .win { flex: none; width: 100%; margin: 0; }
}