/* ============================================================
   Google Store layer (2026-10-24). Loaded LAST on every page; it replaces the ArtCraft look
   (paper ground, hairline rails, mono labels, square buttons, scroll ruler) with the styling of
   store.google.com product pages: white ground, Google Sans, large rounded cards in soft grays
   and tints, pill buttons, a floating pill nav, centered chapter headlines, no rules between parts.
   ============================================================ */
:root {
  --bg: #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #f1f3f4;
  --g-card: #f1f3f4;          /* card surface on white */
  --g-card-2: #e8eaed;        /* media well inside a card */
  --ink: #202124;
  --ink-2: #3c4043;
  --muted: #5f6368;           /* 6.3:1 on white */
  --line: #dadce0;
  --line-soft: #e8eaed;
  --accent: #0b57d0;          /* Google blue for links and primary buttons, 6.6:1 on white */
  --accent-hover: #0842a0;
  --g-r: 28px; --g-r-md: 20px; --g-r-sm: 14px;
  --g-shadow: 0 1px 2px rgba(60,64,67,.12), 0 2px 8px rgba(60,64,67,.10);
  /* Google Store bento grid (measured on store.google.com/product/pixel_watch_5, 2026-10-26): 12 columns, 24px gaps,
     column = min(screen, 1440px) / 12 - 26px. Text and cards sit in 10 columns (1156px max), headlines in 8 (920px),
     wide media in 12 (1392px). 100cqw is main.wrap's width (a size container in rx.css), or the viewport outside it. */
  --g-col: calc(min(100cqw, 1440px) / 12 - 26px);
  --g-w12: calc(var(--g-col) * 12 + 264px);
  --g-w10: calc(var(--g-col) * 10 + 216px);
  --g-w8: calc(var(--g-col) * 8 + 168px);
  --g-w7: calc(var(--g-col) * 7 + 144px);
  --g-w4: calc(var(--g-col) * 4 + 72px);
  --g-w3: calc(var(--g-col) * 3 + 48px);
  --g-max: var(--g-w10);
  --g-in: calc((100cqw - var(--g-w10)) / 2);        /* inline padding that centers the 10-column content in a full-width band */
  --g-in-wide: calc((100cqw - var(--g-w12)) / 2);   /* the same for 12-column (wide) panels */
  --sans: 'Google Sans', 'Roboto', Arial, sans-serif;
  --display: 'Google Sans', 'Roboto', Arial, sans-serif;
  --mono: 'Google Sans', 'Roboto', Arial, sans-serif;
}
html, body { background: #fff; }
body { color: var(--ink); font-family: var(--sans); }
::selection { background: #c2e7ff; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.ruler { display: none !important; }

/* ---------- type: Google Sans, regular weight headlines, sentence case ---------- */
h1, h2, h3, h4, .blk-title, .prose h2, .page-head h1, .case-hero h1 { font-family: var(--display); font-weight: 400; color: var(--ink); }
.page-head h1, .case-title h1, .case-hero h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1.08; letter-spacing: -.01em; }
.blk-title, .prose h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15; }
p, li, dd { font-family: var(--sans); }
.prose p, .split2 .side p, .step p, .anno p, .spec p, .cap p, li { color: var(--ink-2); }
.eyebrow, .case-meta dt, .stat .lab, .tag, .spec .k, .anno .n, .step .sn, .np-lab, .ex-lab, .plate-kicker, .c-field label, .aha .k {
  font-family: var(--display); font-size: .875rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0;
}
main section .eyebrow .accent, main section .eyebrow .accent::before { display: none; content: none; }
.fig figcaption, .dg-cap { font-family: var(--sans); font-size: .875rem; color: var(--muted); }
a { color: inherit; }
.prose a, .ac-foot ul a:hover { color: var(--accent); }

/* ---------- buttons: pills ---------- */
.cta, .ac-btn { border-radius: 999px; min-height: 44px; padding: 0 1.4rem; font-family: var(--display); font-size: .9375rem; font-weight: 500;
  background: var(--accent); border: 1px solid var(--accent); color: #fff; letter-spacing: 0; text-transform: none; }
.cta:hover, .ac-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.ac-btn.ghost { background: #fff; color: var(--accent); border-color: #747775; }
.ac-btn.ghost:hover { background: #f1f5fd; color: var(--accent); border-color: #747775; }

/* ---------- floating pill nav ---------- */
.hud { position: sticky; top: 10px; z-index: 200; height: 54px; width: min(1100px, calc(100% - 24px)); margin: 10px auto 0;
  padding: 0 7px 0 10px; border: none; border-radius: 999px; background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: var(--g-shadow);
  font-family: var(--display); font-size: .9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; align-items: center; }
.hud .grp { align-items: center; gap: 2px; }
.hud .mark { border: none; padding: 0 .9rem 0 .7rem; height: 40px; font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--ink); }
.hud nav { padding: 0; gap: 2px; align-items: center; }
.hud .sep { border-left: none; margin-left: 4px; }
.hud a.it { padding: 0; color: var(--ink-2); }
.hud a.it span { display: block; padding: .5rem .9rem; border-radius: 999px; transition: background .15s; }
.hud a.it:hover span { background: var(--g-card); color: var(--ink); }
.hud a.it[aria-current] span { background: #e8f0fe; color: #0b57d0; }
.hud .loc { padding: 0 .9rem; color: var(--muted); font-size: .875rem; }
.hud a.go { height: 40px; padding: 0 1.2rem; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; font-size: .875rem; }
.hud a.go:hover { background: #3c4043; }
@media (max-width: 760px) { .hud { top: 8px; height: 50px; } .hud a.it span { padding: .45rem .6rem; } .hud a.go { padding: 0 .9rem; } }

/* ---------- page frame: no rails; full-width bands, content centered ---------- */
main.wrap, .ac-frame { max-width: none; border: none; padding: 0; }
main.wrap > *, .ac-frame > * { padding-left: var(--g-in); padding-right: var(--g-in); }
main.wrap > section.blk, main.wrap > section.plate, main.wrap > section.pull, main.wrap > section.cgroup { border-top: none; }
section.blk { padding-top: clamp(3rem, 9vh, 6rem); padding-bottom: clamp(3rem, 9vh, 6rem); }
main.wrap .statrow, main.wrap .split2, main.wrap .spec-grid, main.wrap .caps, main.wrap .quotes { margin-left: 0; margin-right: 0; }

/* cell grids → separate rounded cards with gaps */
.statrow, .split2, .spec-grid, .caps, .quotes, .c-aside, .annogrid { gap: 12px; background: none; border: none; }
.stat, .split2 .side, .spec, .cap, .quote, .c-cell, .anno { background: var(--g-card); border: none; border-radius: var(--g-r-md); }
.step { border-bottom: none; background: var(--g-card); border-radius: var(--g-r-md); padding: 1.4rem 1.5rem; margin-bottom: 10px; }
.leadlist li { border: none !important; }
.leadlist li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); top: 1.55rem; }
.aha { border: none; border-radius: var(--g-r); background: var(--g-card); }
.exhibit { border-radius: var(--g-r); overflow: hidden; }
.fig .img, .diagram { border: none; border-radius: var(--g-r); background: #fff; overflow: hidden; }
.plate-head { margin-bottom: clamp(1.4rem, 4vh, 2.2rem); }
.plate-title { font-family: var(--display); font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 400; line-height: 1.2; color: var(--ink); text-transform: none; letter-spacing: 0; }
.plate-title .sub { margin-top: .5rem; font-size: 1rem; color: var(--muted); }
.plate-no, .cgroup-no { display: none !important; }

/* ---------- case study: title, cover, hero ---------- */
main.wrap > .case-title { border-bottom: none; text-align: center; padding-top: clamp(2.5rem, 8vh, 5rem); padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
main.wrap > .case-title h1 { margin: 0 auto; max-width: 16ch; }
main.wrap > .case-cover { border: none; background: none; padding-left: var(--g-in); padding-right: var(--g-in); }
main.wrap > .case-cover.ui { background: none; height: auto; padding-top: 0; padding-bottom: 0; display: block; }
main.wrap > .case-cover.ui > * { display: block; margin: 0 auto; }
main.wrap > .case-cover.ui { --ch: clamp(320px, 62vh, 760px); }
.case-cover.ui { position: relative; }
.case-cover.ui::before { content: ""; position: absolute; inset: 0 var(--g-in); border-radius: 36px; background: var(--g-card); z-index: -1; }
main.wrap > .case-cover.ui img, main.wrap > .case-cover.ui video { padding: clamp(18px, 4vh, 44px) 0; width: min(100%, calc((var(--ch) - 2 * var(--cp)) * var(--r, 1))); }
.case-hero { padding-top: clamp(2.5rem, 7vh, 4.5rem); }
.case-hero .lede { font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.case-meta { border-top: none; gap: 10px; }
.case-meta > div { background: var(--g-card); border-radius: var(--g-r-md); padding: 1rem 1.2rem; border: none !important; }
.case-meta dd { font-size: 1rem; color: var(--ink); }
.press { border: none !important; border-radius: var(--g-r) !important; background: var(--g-card) !important; padding: 16px !important; }
.press-th { border-radius: var(--g-r-md); background: #fff !important; }

/* chapter heads: a small colored label over a large centered headline (no numbers) */
main.wrap > section.cgroup { padding-top: clamp(4rem, 12vh, 8rem); padding-bottom: clamp(2rem, 6vh, 4rem); }
.cgroup-head { display: block; text-align: center; }
.cgroup-head > div { max-width: 820px; margin: 0 auto; }
.cgroup-k { font-family: var(--display); font-size: 1.0625rem; font-weight: 500; color: var(--accent); letter-spacing: 0; text-transform: none; }
.cgroup-t { margin: .8rem auto 0; max-width: 26ch; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
[data-tint="warm"] { --px-tint: #fbefe9; --px-card: #fff; --px-deep: #f4ddd2; }
[data-tint="sky"]  { --px-tint: #eaf1fb; --px-card: #fff; --px-deep: #d6e4f7; }
[data-tint="sage"] { --px-tint: #e8f0ea; --px-card: #fff; --px-deep: #d3e3d7; }
[data-tint="sand"] { --px-tint: #f4f1e8; --px-card: #fff; --px-deep: #e6dfcb; }
.px-band { --px-r: 28px; --px-r-sm: 18px; }
.px h3 { font-weight: 400; letter-spacing: -.01em; }
.px-arrow { border: none; background: #fff; box-shadow: var(--g-shadow); }
.px-arrow:not(:disabled):hover { background: var(--ink); color: #fff; }
.px-track { background: rgba(32,33,36,.14); }
.px-pill { background: #fff; border: 1px solid #747775; color: var(--ink); font-family: var(--display); font-weight: 500; }
.px-pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.px-col .tag, .px-split-text .tag-k { color: var(--accent); font-family: var(--display); font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.px-quote-cap .k { font-family: var(--display); font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); }
.cgroup .diagram, .cgroup .fig .img { background: #fff; }
.cgroup .exhibit { box-shadow: none; }

/* feedback quotes: white cards */
main.wrap > section.pull { background: #fff; }
.pull .quote, .qm .quote, .qm figure { border-radius: var(--g-r-md); }

/* next project: one large card */
main.wrap > .nextproj { border-top: none; padding-top: clamp(2rem, 6vh, 3.5rem); padding-bottom: clamp(2rem, 6vh, 3.5rem); }
.nextproj { position: relative; }
.nextproj::before { content: ""; position: absolute; inset: 0 var(--g-in); border-radius: var(--g-r); background: var(--g-card); z-index: -1; }
.nextproj > * { position: relative; }
main.wrap > .nextproj { padding-left: calc(var(--g-in) + clamp(1.4rem, 4vw, 3rem)); padding-right: calc(var(--g-in) + clamp(1.4rem, 4vw, 3rem)); }
.nextproj .np-lab { color: var(--muted); }
.nextproj a { font-family: var(--display); font-weight: 400; }
.nextproj a:hover { color: var(--accent); }

/* ---------- closing CTA and footer ---------- */
.ac-cta { max-width: none; border: none; margin: clamp(2rem, 6vh, 4rem) var(--g-in) 0; padding: clamp(3.5rem, 10vh, 6rem) var(--pad);
  border-radius: 36px; background: var(--g-card); }
.ac-cta .hi { color: var(--ink); background: none; -webkit-background-clip: border-box; background-clip: border-box;
  font-family: var(--display); font-weight: 400; font-size: clamp(3.4rem, 11vw, 8rem); line-height: 1; text-transform: none; }
.ac-cta .hi:hover { color: var(--accent); background: none; }
.ac-foot { border-top: none; margin-top: clamp(2rem, 6vh, 4rem); background: #f8f9fa; }
.ac-foot .cols { max-width: var(--g-max); border: none; padding: 0 var(--pad); }
.ac-foot .col { border: none !important; padding: 2.6rem 0 2.4rem; padding-right: 1.5rem; }
.ac-foot .mark { font-family: var(--display); font-weight: 500; font-size: 1.35rem; }
.ac-foot h2 { font-family: var(--display); font-size: .875rem; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; }
.ac-foot ul a { font-size: .9375rem; color: var(--muted); }
.ac-foot .mail { font-family: var(--display); font-size: .9375rem; text-transform: none; letter-spacing: 0; color: var(--accent); }
.ac-foot .bar { border-top: 1px solid var(--line); }
.ac-foot .bar > div { max-width: var(--g-max); border: none; font-family: var(--display); font-size: .8125rem; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* ---------- Work page ---------- */
.page-head { text-align: center; padding-top: clamp(3rem, 10vh, 6rem); }
.page-head h1, .page-head .sub { margin-left: auto; margin-right: auto; }
.page-head .sub { font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 44ch; }
main.wrap > .pgrid { gap: 16px !important; background: none !important; border-top: none !important; padding-top: 0; padding-bottom: 0; }
.pcell { background: var(--g-card) !important; border-radius: var(--g-r); overflow: hidden; }
.pcell:hover { background: #e9ebee !important; }
.pcell .hd { border-bottom: none !important; height: auto !important; padding-top: 1.1rem !important; font-family: var(--display) !important; font-size: .875rem !important;
  font-weight: 500; color: var(--muted) !important; text-transform: none !important; letter-spacing: 0 !important; }
.pcell .hd span:last-child { display: none; }
.pcell .media, .pcell .media.dev { background: transparent !important; border-bottom: none !important; }
.pcell .bd h2 { font-family: var(--display) !important; font-weight: 400 !important; letter-spacing: -.01em !important; }
.pcell p { color: var(--ink-2); }
.pcell.more .box { border: none; border-radius: 50%; width: 64px; height: 64px; background: #fff; box-shadow: var(--g-shadow); }
.pcell.more .u { font-family: var(--display); text-transform: none; letter-spacing: 0; color: var(--accent); font-size: .9375rem; }
.sec-head { text-align: center; }
.sec-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.75rem); }

/* ---------- Contact page ---------- */
main.wrap > .cgrid { gap: 16px !important; background: none !important; border-top: none !important; }
.cgrid > * { background: var(--g-card) !important; border-radius: var(--g-r); overflow: hidden; }
.cgrid .hd { border-bottom: none !important; font-family: var(--display) !important; font-size: 1rem !important; font-weight: 500; color: var(--ink) !important;
  text-transform: none !important; letter-spacing: 0 !important; height: auto !important; padding-top: 1.4rem !important; }
.cgrid .hd span:last-child { display: none; }
.side .cell { border-bottom: none !important; }
.side { gap: 0; }
.f label { font-family: var(--display) !important; font-size: .875rem !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-2) !important; }
.f input, .f textarea { background: #fff !important; border: 1px solid #747775 !important; border-radius: 12px !important; font-family: var(--sans); }
.f input:focus, .f textarea:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); }
.tags-row { font-family: var(--display) !important; text-transform: none !important; letter-spacing: 0 !important; justify-content: center; gap: .5rem !important; }
.tags-row span { padding: .4rem .9rem; border-radius: 999px; background: var(--g-card); color: var(--ink-2); font-size: .875rem; }
.tags-row span::before { content: none !important; }

/* ---------- Home: the spread becomes a bento of rounded cards on white ---------- */
main.spread { gap: 12px; padding: 12px; background: #fff; }
@media (min-width: 1181px) and (min-height: 700px) { main.spread { height: calc(100vh - 64px); height: calc(100dvh - 64px); } }
@media (min-width: 1400px) { main.spread { margin-right: 0; border-right: none; } }
.spread > * { border-left: none !important; border-radius: var(--g-r); overflow: hidden; }
.spread .id { background: var(--g-card); }
.spread .id .reach { border-top: none; }
.spread .id .ac-btn { width: 100%; }
.spread .tag { left: 12px; top: 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); padding: 6px 12px;
  font-family: var(--display); font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: var(--g-shadow); }
.spread .tag b { color: var(--accent); font-weight: 500; }
.portrait { border-radius: var(--g-r); }
.portrait figcaption { left: 12px; right: 12px; bottom: 12px; border: none; border-radius: 999px; background: rgba(255,255,255,.92); padding: 8px 16px; }
.book { gap: 12px; background: none; border: none !important; }
.cpt { border-bottom: none !important; background: none; gap: 10px; }
.cpt > .hd { border-bottom: none !important; height: auto; padding: 4px 8px 0; color: var(--ink); font-family: var(--display); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cpt > .hd .mono, .cpt > .hd span { font-family: var(--display); letter-spacing: 0; text-transform: none; }
.work-grid { gap: 12px !important; background: none !important; }
.card { background: var(--g-card) !important; border-radius: var(--g-r-md); }
.card:hover { background: #e9ebee !important; }
.halves { gap: 12px !important; }
.vibe .im { border-radius: var(--g-r-sm); background: var(--g-card-2); }
.vibe .im.dev, .vibe .im.fill { background: transparent; }
.cap .go, .pm-ft .go { font-family: var(--display); font-size: .875rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--accent); }
.pm-ti h3, .vibe .cap b { font-family: var(--display); font-weight: 500; letter-spacing: 0; }
.pc-k b, .ph .metric b, .impact .num b { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; }
.vibe.all .box { border: none; border-radius: 50%; background: #fff; box-shadow: var(--g-shadow); }
.impact .row { gap: 12px !important; background: none !important; }
.impact .row > * { background: var(--g-card) !important; border-radius: var(--g-r-md); overflow: hidden; }
.ph figcaption, .ph .pcap { border-top: none !important; }
.ph .metric { border: none !important; border-radius: 999px; margin: 10px; padding: 6px 12px; box-shadow: var(--g-shadow); }
.mono { font-family: var(--display) !important; letter-spacing: 0 !important; text-transform: none !important; }
.agent { border-radius: 16px; }
.mdl { border-radius: var(--g-r); }
.mdl-im.dev { background: var(--g-card); }
.mdl h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.mdl-k { font-family: var(--display); text-transform: none; letter-spacing: 0; color: var(--accent); font-size: .875rem; font-weight: 500; }
.mdl-x { box-shadow: var(--g-shadow); }
@media (max-width: 1180px) { .book { border-top: none !important; } }
@media (max-width: 720px) { main.spread { padding: 8px; gap: 8px; } .portrait { border-top: none !important; } }
main.wrap > .pgrid, main.wrap > .cgrid { padding-left: var(--g-in) !important; padding-right: var(--g-in) !important; }
.pcell .hd { padding-left: 1.6rem !important; padding-right: 1.6rem !important; }
.pcell .bd { padding: 1.2rem 1.6rem 1.8rem !important; }
.cpt > .hd > span:last-child:not(:first-child) { display: none; }   /* section numbers */
/* the rounded panels drawn with ::before need their own stacking context to sit above the page ground */
.case-cover.ui, .nextproj { isolation: isolate; }
/* chapter heads: the label is the headline, the sentence is the short line under it */
.cgroup-k { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 400; line-height: 1.08; color: var(--ink); letter-spacing: -.01em; }
.cgroup-t { max-width: 52ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink-2); margin-top: 1.1rem; letter-spacing: 0; }
.case-hero .case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); justify-items: stretch; max-width: 880px; margin-left: auto; margin-right: auto; }
.case-meta > div { text-align: left; }