:root {
  --ink: #1a1612;
  --ink-soft: #4a4138;
  --paper: #fbf8f3;
  --paper-edge: #f0ebe1;
  --rule: #d9d2c4;
  --accent: #b04a1b;
  --accent-soft: #e07a3a;
  --max-w: 720px;
  --serif: "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
a:hover { border-bottom-color: var(--accent); }

.nav {
  font-family: var(--serif);
  font-size: 16px;
  /* No horizontal padding: the width is the content column itself
     (--max-w minus main's 32px gutters), so the bottom rule lands exactly
     on the text edges instead of overhanging by the gutter. */
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width tracks main's 32px gutters below --max-w, so the rule stays on
     the text edges at every viewport, not just wide ones. */
  width: calc(100% - 64px);
  max-width: calc(var(--max-w) - 64px);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule);
  /* space-between alone lets a long section list crowd the logo;
     the gap is the minimum breathing room it can never fall below. */
  gap: 40px;
}
.nav .brand {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.nav .brand:hover { border-bottom-color: transparent; }
.nav .brand img {
  display: block;
  height: 60px;
  width: auto;
}
.nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; column-gap: 22px; margin: 0; padding: 0; }
.nav ul a { color: var(--ink-soft); }
/* Nav menu wrapper: transparent on desktop (ul lays out inline as before),
   dropdown on mobile (see the @media block for behavior). */
.nav .nav-menu { display: contents; }
.nav .nav-menu > summary { display: none; }

main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 32px;
}
main.wide { max-width: 960px; }

h1 {
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 28px;
  margin: 2em 0 0.5em;
  letter-spacing: -0.005em;
}
h3 {
  font-family: var(--sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 2.5em 0 0.6em;
  font-weight: 600;
}

.lead {
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 2em;
}

.hero { padding: 48px 0 24px; }

/* About: tighter hero-to-content seam. */
.about-hero { padding-bottom: 4px; }
.about-hero .lead { margin-bottom: 0.6em; }

/* Homepage CTA under the hero lead — a text link, not a button, per the
   restrained editorial system. */
.hero-cta {
  margin: 56px 0 0;
  font-size: 19px;
  color: var(--ink);
}
.hero-cta a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
.hero-cta a:hover { border-bottom-width: 2px; }
/* On a phone the question and the invitation wrap into each other mid-phrase.
   Giving the link a line of its own breaks it where the sense breaks. */
@media (max-width: 640px) {
  /* block, not inline-block: inline-block only stops the link breaking
     mid-phrase, it still shares the line when there's room. width:fit-content
     keeps the underline under the words instead of running the full column. */
  .hero-cta a { display: block; width: fit-content; margin-top: 8px; }
}
.hero-cta a:focus-visible,
.contact-direct a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero .kicker {
  font-family: var(--sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 16px;
}

.featured-strip {
  margin: 2em 0 3em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.featured-strip a {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.featured-strip a:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(26, 22, 18, 0.06);
}
.featured-strip .card-body {
  padding: 20px 24px 24px;
}
.featured-strip .card-kicker {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 6px;
}
.featured-strip .card-title {
  font-size: 22px;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.featured-strip .card-desc {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* Artifact tiles — visual preview of what's inside each case study */
.tile {
  height: 400px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

/* Lectio: a page of essay typography */
.tile-lectio {
  background: #fbf8f3;
  padding: 28px 32px;
  font-family: var(--serif);
}
.tile-lectio .dropcap {
  float: left;
  font-size: 52px;
  line-height: 1;
  padding: 4px 8px 0 0;
  color: var(--accent);
  font-weight: 600;
}
.tile-lectio .body {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  column-count: 1;
}

/* Immersion: location label + words floating/falling in target language */
.tile-immersion {
  background: #0f1419;
  color: #e8dfd0;
  padding: 0;
  font-family: var(--serif);
  position: relative;
  overflow: hidden;
}
.tile-immersion .location-pin {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
  z-index: 2;
}
.tile-immersion .location-pin::before {
  content: '◉ ';
  color: var(--accent);
}
.tile-immersion .word-chip {
  position: absolute;
  background: rgba(224, 122, 58, 0.15);
  border: 1px solid rgba(224, 122, 58, 0.4);
  color: #f5e7d4;
  padding: 6px 11px;
  border-radius: 3px;
  font-family: var(--serif);
  font-size: 14px;
  white-space: nowrap;
}
.tile-immersion .word-chip .gloss {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c4a888;
  margin-top: 2px;
}

/* Bubby: aged paper, handwritten letter */
.tile-bubby {
  background:
    linear-gradient(180deg, rgba(176, 74, 27, 0.04), transparent 30%),
    linear-gradient(0deg, rgba(176, 74, 27, 0.04), transparent 30%),
    #f5ecd9;
  padding: 24px 32px;
  font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;
  position: relative;
}
.tile-bubby::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 22px,
    rgba(26, 22, 18, 0.06) 22px 23px
  );
  pointer-events: none;
}
.tile-bubby .letter {
  font-size: 17px;
  line-height: 23px;
  color: #3a2f24;
  position: relative;
}
.tile-bubby .salutation { font-style: italic; margin-bottom: 6px; }
.tile-bubby .corner {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a7860;
}

/* BARC: terminal-style tile showing a tagged JSON record */
.tile-barc {
  background: #0d1117;
  color: #d1d5db;
  padding: 22px 26px;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 11px;
  line-height: 1.5;
  overflow: hidden;
}
.tile-barc .terminal-header {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.tile-barc .terminal-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.tile-barc .terminal-header .dot.r { background: #ff5f57; }
.tile-barc .terminal-header .dot.y { background: #febc2e; }
.tile-barc .terminal-header .dot.g { background: #28c840; }
.tile-barc .prompt { color: #98c379; }
.tile-barc .cmd { color: #d1d5db; }
.tile-barc .out { color: #6b7280; }
.tile-barc .key { color: #61afef; }
.tile-barc .str { color: #e5c07b; }
.tile-barc .meta-out { color: #98c379; }
.tile-barc pre {
  margin: 4px 0 0 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Praxis: A-list of today's priorities */
.tile-praxis {
  background: #fbf8f3;
  padding: 24px 28px;
  font-family: var(--serif);
  position: relative;
}
.tile-praxis .alist-header {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.tile-praxis .alist-header .count {
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.tile-praxis .alist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tile-praxis .alist li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
}
.tile-praxis .alist .box {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}
.tile-praxis .alist .tag {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 1px 6px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  margin-left: 6px;
}
.tile-praxis .queue {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  letter-spacing: 0.04em;
}

/* Animal Funder: mini bar chart */
.tile-funder {
  background: #fff;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.tile-funder .mini-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
}
.tile-funder .mini-bar .lbl {
  width: 90px;
  color: var(--ink-soft);
  text-align: right;
  letter-spacing: 0.02em;
}
.tile-funder .mini-bar .b {
  flex: 1;
  height: 10px;
  background: var(--paper-edge);
  border-radius: 2px;
  overflow: hidden;
}
.tile-funder .mini-bar .b-fill {
  height: 100%;
  background: var(--accent);
}
.tile-funder .mini-bar .v {
  width: 38px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.theme-grid {
  margin: 2em 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.theme-grid a {
  display: block;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  text-align: center;
}
.theme-grid a:hover { border-color: var(--accent); }
.theme-grid .theme-title { font-weight: 600; margin-bottom: 4px; }
.theme-grid .theme-count { color: var(--ink-soft); font-size: 13px; }

.work-section { margin: 2em 0 3em; }
.work-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.work-list li {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  align-items: flex-start;
}
.work-list li:last-child { border-bottom: none; }
.work-list li[hidden] { display: none; }
.work-list .work-body { flex: 1; min-width: 0; }
/* The homepage 'Recently' strip's optional app icon — a hand-placed extra
   for color on an otherwise text-only row, not a generated tile. */
.recent-icon {
  width: 44px; height: 44px; flex: none; border-radius: 11px;
  object-fit: cover; margin-top: 2px;
}
/* Two lines only: title, then one small "<date> <what changed>" line — the
   date in accent color, running straight into the muted description with no
   separator. The color change alone is the seam between the two. */
.recent-list .title { display: block; line-height: 1.2; }
.recent-list .desc { font-size: 13px; margin-top: 2px; }
.recent-list .recent-date { color: var(--accent); }
/* Thumbs double as links to the detail page; suppress the global link
   underline so the tile stays clean. */
.work-list a.work-thumb { border-bottom: none; }
.work-list a.work-thumb:hover { border-bottom: none; }
.work-list .title {
  font-size: 19px;
  color: var(--ink);
  font-weight: 500;
}
.work-list .title:hover { color: var(--accent); }
/* "v1 complete" status pill on work-list cards. Muted sage tone so it reads as
   a positive milestone without competing with the orange --accent meta line. */
.v1-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3f5233;
  background: #e7ecdd;
  border: 1px solid #cdd8bd;
  border-radius: 999px;
  padding: 2px 9px;
  line-height: 1.45;
  white-space: nowrap;
}
.work-list .desc {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.work-list .meta {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

/* Text-only mode: hide the visual thumb and let the body fill the row.
   Used on /analysis, /client-work, and /personal where the visuals aren't
   useful yet — will reintroduce per-project screenshots later. */
.work-list.text-only .work-thumb { display: none; }

/* /work page thumbnails — wide enough for the phone-trio fan to actually spread out. */
.work-thumb {
  width: 288px;
  height: 234px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  background: var(--paper-edge);
}
.work-thumb .tile {
  height: 100%;
  border-bottom: none;
}

/* Wider thumbnail variant for desktop / iPad / landscape content.
   Used together with .tile-wide-swipe (neutral) or .tile-ipad-swipe (iPad chrome). */
.work-thumb.is-wide {
  width: 288px;
  height: 200px;
}

/* In a wide thumb, the funder bar-chart goes back to its horizontal layout
   (the default .work-thumb override stacks it vertically for portrait). */
.work-thumb.is-wide .tile-funder {
  padding: 16px 18px;
  gap: 7px;
  justify-content: center;
}
.work-thumb.is-wide .tile-funder .mini-bar {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 9px;
}
.work-thumb.is-wide .tile-funder .mini-bar .lbl {
  width: 70px;
  text-align: right;
  font-size: 9px;
}
.work-thumb.is-wide .tile-funder .mini-bar .b {
  height: 6px;
}
.work-thumb.is-wide .tile-funder .mini-bar .v {
  width: 34px;
  font-size: 9px;
  text-align: left;
  margin-top: 0;
}


/* Wide swipeable tile — landscape screenshots from desktop apps / CLIs / web tools.
   Horizontal scroll-snap between images. Screenshots fill the tile edge-to-edge
   (object-fit: cover) so the tile matches the flush look of the phone-trio thumbs. */
.tile-wide-swipe {
  background: var(--paper-edge);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}
.tile-wide-swipe .swipe-frame {
  flex: 1;
  overflow: hidden;
}
.tile-wide-swipe .swipe-scroll {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tile-wide-swipe .swipe-scroll::-webkit-scrollbar { display: none; }
.tile-wide-swipe .swipe-scroll img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A screenshot taller than the frame loses its bottom, not its top: the
     header and first rows are what identify the page, and cropping to the
     centre magnifies an arbitrary middle band. */
  object-position: top center;
  scroll-snap-align: start;
  display: block;
}

/* CSS-art tile designs adapted for portrait thumbnail */
.work-thumb .tile-lectio { padding: 16px 14px; }
.work-thumb .tile-lectio .body { font-size: 9px; line-height: 1.45; column-count: 1; }
.work-thumb .tile-lectio .dropcap { font-size: 32px; padding: 2px 5px 0 0; }
.work-thumb .tile-immersion { padding: 0; }
.work-thumb .tile-immersion .location-pin { top: 10px; left: 11px; font-size: 8px; letter-spacing: 0.08em; }
.work-thumb .tile-immersion .word-chip { font-size: 10px; padding: 3px 7px; }
.work-thumb .tile-immersion .word-chip .gloss { font-size: 7px; letter-spacing: 0.06em; margin-top: 1px; }
.work-thumb .tile-bubby { padding: 18px 16px; }
.work-thumb .tile-bubby .corner { top: 8px; right: 10px; font-size: 8px; letter-spacing: 0.06em; }
.work-thumb .tile-bubby .letter { font-size: 12px; line-height: 16px; }
.work-thumb .tile-bubby .salutation { margin-bottom: 4px; }
.work-thumb .tile-bubby::before {
  background: repeating-linear-gradient(
    180deg, transparent 0 15px,
    rgba(26, 22, 18, 0.05) 15px 16px
  );
}
.work-thumb .tile-funder {
  padding: 18px 14px;
  gap: 9px;
  justify-content: flex-start;
}
.work-thumb .tile-funder .mini-bar { gap: 5px; font-size: 8px; flex-direction: column; align-items: stretch; }
.work-thumb .tile-funder .mini-bar .lbl { width: auto; text-align: left; font-size: 8px; }
.work-thumb .tile-funder .mini-bar .b { height: 6px; }
.work-thumb .tile-funder .mini-bar .v { width: auto; font-size: 8px; text-align: right; margin-top: -2px; }
.work-thumb .tile-praxis { padding: 16px 14px; }
.work-thumb .tile-praxis .alist-header { font-size: 8px; margin-bottom: 8px; letter-spacing: 0.1em; }
.work-thumb .tile-praxis .alist { gap: 6px; }
.work-thumb .tile-praxis .alist li { font-size: 10px; line-height: 1.25; gap: 6px; }
.work-thumb .tile-praxis .alist .box { width: 8px; height: 8px; border-width: 1px; }
.work-thumb .tile-praxis .alist .tag { display: none; }
.work-thumb .tile-praxis .queue { display: none; }
.work-thumb .tile-barc { padding: 12px 12px; font-size: 8px; line-height: 1.45; }
.work-thumb .tile-barc .terminal-header { margin-bottom: 9px; }
.work-thumb .tile-barc .terminal-header .dot { width: 6px; height: 6px; }

/* Themed placeholders for projects without real thumbnails yet */
.work-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  position: relative;
}
.work-thumb-placeholder .initial {
  font-size: 56px;
  line-height: 1;
}
.work-thumb-placeholder .pending {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 400;
  opacity: 0.55;
}

/* Theme color variants — match the section the project lives in */
.work-thumb.theme-app-live { background: linear-gradient(135deg, #f5d9c4, #e8b894); }
.work-thumb.theme-app-live .work-thumb-placeholder { color: #6b3015; }
.work-thumb.theme-app-earlier { background: linear-gradient(135deg, #e8e0d2, #c9beaa); }
.work-thumb.theme-app-earlier .work-thumb-placeholder { color: #5a4e3b; }
.work-thumb.theme-family { background: linear-gradient(135deg, #f0e3c8, #dec9a0); }
.work-thumb.theme-family .work-thumb-placeholder { color: #5c4520; }
.work-thumb.theme-cross { background: linear-gradient(135deg, #c8d3e0, #94a5bd); }
.work-thumb.theme-cross .work-thumb-placeholder { color: #2a3a55; }

/* Use real image as a thumbnail */
.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artifact {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 28px 32px;
  margin: 24px 0;
  font-family: var(--serif);
}
.artifact .artifact-label {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.artifact blockquote {
  margin: 0;
  padding: 0;
  font-style: italic;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
}
.artifact cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--sans);
}

.placeholder-image {
  background: linear-gradient(135deg, var(--paper-edge), var(--rule));
  border: 1px solid var(--rule);
  border-radius: 4px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 24px 0;
}

/* Hero visual on case study pages — appears right under headline */
.hero-visual {
  margin: 8px 0 20px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  height: 360px;
  position: relative;
}
.hero-visual .tile {
  height: 100%;
  border-bottom: none;
}

/* Tile variant that displays a real screenshot (used on home featured strip + /work thumbs).
   No height override — .tile sets 400px for the home strip; .work-thumb .tile and
   .hero-visual .tile set 100% in their own contexts. */
.tile-screenshot {
  padding: 0;
  background: #1a1612;
  overflow: hidden;
}
.tile-screenshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* On /work, the thumbnail is portrait-aspect — phone screenshots fit fully, so contain to avoid any crop */
.work-thumb .tile-screenshot img {
  object-fit: contain;
  background: #1a1612;
}

/* On home featured strip: phone-on-gradient mockup style — full screenshot inside a phone frame, on a soft gradient background */
.featured-strip .tile-screenshot {
  background: linear-gradient(135deg, #f5e3d6 0%, #ead4d8 50%, #d8c8e0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 0;
}
.featured-strip .tile-screenshot img {
  width: auto;
  height: 100%;
  max-width: 75%;
  object-fit: contain;
  border-radius: 26px;
  border: 5px solid #0c0c0c;
  box-shadow: 0 14px 36px rgba(26, 22, 18, 0.22), 0 2px 6px rgba(26, 22, 18, 0.12);
  background: #0c0c0c;
}

/* Phone-trio mockup: three phones overlapping (center + left-leaning + right-leaning) */
.featured-strip .tile-screenshot.phone-trio {
  display: block;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.featured-strip .phone-trio .phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  border-radius: 24px;
  border: 4px solid #0c0c0c;
  background: #0c0c0c;
  display: block;
  max-width: none;
  box-shadow: 0 10px 28px rgba(26, 22, 18, 0.22);
}
.featured-strip .phone-trio .phone.center {
  height: 86%;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 14px 34px rgba(26, 22, 18, 0.28), 0 2px 6px rgba(26, 22, 18, 0.14);
}
.featured-strip .phone-trio .phone.left {
  height: 72%;
  transform: translate(calc(-50% - 90px), calc(-50% + 14px)) rotate(-20deg);
  z-index: 1;
}
.featured-strip .phone-trio .phone.right {
  height: 72%;
  transform: translate(calc(-50% + 90px), calc(-50% + 14px)) rotate(20deg);
  z-index: 1;
}

/* Phone-trio mockup at /work thumbnail scale.
   Translates are %-based so the fan scales with the thumb (works for desktop
   320x260, mobile full-width, and any future size adjustments). */
.work-thumb .tile-screenshot.phone-trio,
.hero-visual .tile-screenshot.phone-trio {
  display: block;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f5e3d6 0%, #ead4d8 50%, #d8c8e0 100%);
}

/* Themed phone-trio backdrops — subtle, per-app hues that read as an
   atmosphere for the app rather than decoration. All apply anywhere the
   theme class is used (front-page Latest strip, /apps, etc.).
   theme-ivory  — Lectio       (paper / editorial)
   theme-taupe  — Praxis       (austere / focus)
   theme-sand   — PlaceMind    (map paper + faint grid)
   theme-mist   — Immersion    (cool blue atmosphere; language in the air)
   theme-sage   — Theoria      (soft contemplative green-grey)
   theme-clay   — AskSinger    (warm terracotta / kitchen)
   theme-stone  — LanguageStudy (pale utilitarian neutral) */

/* Lectio: warm off-white + subtle SVG paper grain + soft warm vignette.
   Data-URI SVG uses fractalNoise → feColorMatrix to emit a low-opacity
   warm-tinted noise, layered under a soft warm gradient. */
.tile-screenshot.phone-trio.theme-ivory {
  background-color: #f6efdb;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.38  0 0 0 0 0.28  0 0 0 0 0.16  0 0 0 0.13 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),
    linear-gradient(135deg, #fbf6e6 0%, #f4ecd2 100%);
  background-size: 220px 220px, auto;
  box-shadow: inset 0 0 46px rgba(90, 62, 22, 0.10);
}
.tile-screenshot.phone-trio.theme-taupe {
  background: linear-gradient(135deg, #d6cfc1 0%, #c8c0b0 100%);
}
.tile-screenshot.phone-trio.theme-sand {
  background-color: #e6d5ac;
  background-image:
    repeating-linear-gradient(0deg, rgba(110, 75, 25, 0.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(110, 75, 25, 0.07) 0 1px, transparent 1px 34px),
    linear-gradient(135deg, #ecdcb4 0%, #dcc689 100%);
}
.tile-screenshot.phone-trio.theme-mist {
  background: linear-gradient(135deg, #dfe6ea 0%, #c7d1d8 100%);
}
.tile-screenshot.phone-trio.theme-sage {
  background: linear-gradient(135deg, #d8dfd2 0%, #c1cbba 100%);
}
.tile-screenshot.phone-trio.theme-clay {
  background: linear-gradient(135deg, #ecd6ba 0%, #d9b892 100%);
}
.tile-screenshot.phone-trio.theme-stone {
  background: linear-gradient(135deg, #dfdbcd 0%, #c9c4b1 100%);
}

/* Slightly softer phone frames on the Latest strip and the /apps
   list. #0c0c0c reads as pure black against these warm backgrounds; a warm
   dark charcoal keeps the frame strong without competing so hard with the
   screenshot content. */
.work-list.latest .work-thumb .phone-trio .phone,
.work-list.screens .work-thumb .phone-trio .phone,
.hero-visual .phone-trio .phone {
  border-color: #2d2620;
  background: #2d2620;
}

/* Vertical-stacked phone-trio arrangement — side phones vertical (no rotation),
   tucked partly behind the center with a tiny blur so the center reads as
   foreground focus. Theme-agnostic; opt in with .stack-vertical alongside
   .phone-trio. Used on Lectio (Latest + Apps) and AskSinger (Apps).
   Selector uses .tile-screenshot in addition to .phone-trio.stack-vertical so
   specificity (0,5,0) beats the default `.work-thumb .phone-trio .phone.left`
   (0,4,0) — including the mobile media-query override, since media queries
   don't affect specificity. */
.tile-screenshot.phone-trio.stack-vertical .phone.left,
.tile-screenshot.phone-trio.stack-vertical .phone.right {
  height: 80%;
  filter: blur(1.4px);
  opacity: 0.92;
}
.tile-screenshot.phone-trio.stack-vertical .phone.left {
  transform: translate(calc(-50% - 28%), -50%);
}
.tile-screenshot.phone-trio.stack-vertical .phone.right {
  transform: translate(calc(-50% + 28%), -50%);
}

/* Lectio ivory: brown-black frame + warm phone shadow, overriding the softer
   gray-black used elsewhere on .work-list.latest/.screens. Placed after the
   .latest/.screens frame rule so its border-color / background win by source order. */
.tile-screenshot.phone-trio.theme-ivory .phone {
  border-color: #2a1f16;
  background: #2a1f16;
  box-shadow: 0 4px 10px rgba(90, 62, 22, 0.18);
}
.tile-screenshot.phone-trio.theme-ivory .phone.center {
  box-shadow: 0 6px 14px rgba(90, 62, 22, 0.22), 0 2px 4px rgba(90, 62, 22, 0.10);
}
.work-thumb .phone-trio .phone,
.hero-visual .phone-trio .phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  border-radius: 18px;
  border: 2.5px solid #0c0c0c;
  background: #0c0c0c;
  display: block;
  max-width: none;
  box-shadow: 0 6px 14px rgba(26, 22, 18, 0.22);
}
.work-thumb .phone-trio .phone.center,
.hero-visual .phone-trio .phone.center {
  height: 86%;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 8px 20px rgba(26, 22, 18, 0.3), 0 2px 6px rgba(26, 22, 18, 0.14);
}
.work-thumb .phone-trio .phone.left,
.hero-visual .phone-trio .phone.left {
  height: 72%;
  transform: translate(calc(-50% - 42%), calc(-50% + 3.5%)) rotate(-20deg);
  z-index: 1;
}
.work-thumb .phone-trio .phone.right,
.hero-visual .phone-trio .phone.right {
  height: 72%;
  transform: translate(calc(-50% + 42%), calc(-50% + 3.5%)) rotate(20deg);
  z-index: 1;
}

/* SiteScan: orange dashed polygon over a faux satellite-tile basemap */
.tile-sitescan {
  background: linear-gradient(135deg, #4a5a3a 0%, #3a4530 50%, #2a3322 100%);
  position: relative;
  overflow: hidden;
}
.tile-sitescan .basemap {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 25% 30%, rgba(140, 160, 100, 0.25) 0%, transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(90, 110, 70, 0.3) 0%, transparent 40%);
  background-size: 18px 18px, 18px 18px, auto, auto;
}
.tile-sitescan .polygon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  clip-path: polygon(20% 8%, 92% 22%, 96% 65%, 70% 95%, 18% 88%, 4% 50%);
  background: rgba(220, 130, 60, 0.28);
  border: 2px dashed rgba(255, 200, 100, 0.85);
  box-sizing: border-box;
}
.tile-sitescan .label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255, 220, 180, 0.9);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.work-thumb .tile-sitescan .label { font-size: 8px; letter-spacing: 0.15em; }
.work-thumb .tile-sitescan .basemap { background-size: 10px 10px, 10px 10px, auto, auto; }
.work-thumb .tile-sitescan .polygon { border-width: 1.5px; }
.hero-visual .tile-sitescan .label { font-size: 16px; }
.hero-visual .tile-sitescan .basemap { background-size: 32px 32px, 32px 32px, auto, auto; }

/* DansNews: newspaper masthead + a stack of colored commentary bars */
.tile-dansnews {
  background: #fbf8f1;
  padding: 22px 26px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.tile-dansnews .masthead {
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.tile-dansnews .masthead-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.tile-dansnews .masthead-date {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6a6a;
  margin-top: 3px;
}
.tile-dansnews .lede {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  margin: 2px 0 4px;
}
.tile-dansnews .layer-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tile-dansnews .strip {
  border-left: 3px solid;
  padding: 5px 9px;
  font-size: 11px;
  line-height: 1.35;
  border-radius: 0 3px 3px 0;
}
.tile-dansnews .strip .label {
  display: block;
  font-family: "SF Pro Text", -apple-system, "Helvetica Neue", sans-serif;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1px;
}
.tile-dansnews .strip.context { background: #f4efdf; border-left-color: #b8a668; }
.tile-dansnews .strip.context .label { color: #8a7940; }
.tile-dansnews .strip.analyst { background: #eef0f4; border-left-color: #48607a; }
.tile-dansnews .strip.analyst .label { color: #48607a; }
.tile-dansnews .strip.hitchens {
  background: transparent;
  border-left-color: #6b1a1a;
  font-style: italic;
}
.tile-dansnews .strip.hitchens .label { color: #6b1a1a; font-style: normal; }
.work-thumb .tile-dansnews { padding: 14px 16px; gap: 6px; }
.work-thumb .tile-dansnews .masthead-title { font-size: 18px; }
.work-thumb .tile-dansnews .masthead-date { font-size: 8px; letter-spacing: 0.1em; }
.work-thumb .tile-dansnews .lede { font-size: 10px; margin: 0 0 2px; }
.work-thumb .tile-dansnews .strip { font-size: 8px; padding: 3px 6px; line-height: 1.25; }
.work-thumb .tile-dansnews .strip .label { font-size: 6px; letter-spacing: 0.13em; }
.hero-visual .tile-dansnews .masthead-title { font-size: 32px; }
.hero-visual .tile-dansnews .lede { font-size: 16px; }
.hero-visual .tile-dansnews .strip { font-size: 12.5px; padding: 7px 11px; }

/* Village on the Road: mossy map with pins and dotted trust edges */
.tile-village {
  background:
    radial-gradient(circle at 22% 30%, rgba(220, 214, 190, 0.45) 0%, transparent 42%),
    radial-gradient(circle at 78% 74%, rgba(174, 194, 152, 0.4) 0%, transparent 48%),
    linear-gradient(135deg, #dfe6d4 0%, #c9d6b6 55%, #a9bd8f 100%);
  position: relative;
  overflow: hidden;
}
.tile-village::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(60, 74, 44, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 74, 44, 0.06) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  pointer-events: none;
}
.tile-village .route {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.tile-village .pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f7f5ee;
  border: 2px solid #4a6030;
  box-shadow: 0 2px 4px rgba(30, 40, 20, 0.3);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.tile-village .pin.me {
  background: #4a6030;
  border-color: #2f3f1c;
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 4px rgba(74, 96, 48, 0.2), 0 2px 4px rgba(30, 40, 20, 0.35);
}
.tile-village .pin.l2 {
  background: #f7f5ee;
  border: 2px dashed #6a7a4a;
  opacity: 0.85;
}
.tile-village .pin .kicker {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2f3f1c;
  white-space: nowrap;
  font-weight: 600;
}
.tile-village .caption {
  position: absolute;
  bottom: 12px;
  left: 16px;
  right: 16px;
  font-family: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #2f3f1c;
  z-index: 3;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.tile-village .caption .swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tile-village .caption .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a6030;
  border: 1.5px solid #2f3f1c;
}
.tile-village .caption .dot.l1 { background: #f7f5ee; border-color: #4a6030; }
.tile-village .caption .dot.l2 { background: #f7f5ee; border: 1.5px dashed #6a7a4a; }
.work-thumb .tile-village .pin { width: 10px; height: 10px; border-width: 1.5px; }
.work-thumb .tile-village .pin.me { width: 12px; height: 12px; box-shadow: 0 0 0 3px rgba(74, 96, 48, 0.2); }
.work-thumb .tile-village .pin .kicker { display: none; }
.work-thumb .tile-village::before { background-size: 12px 12px, 12px 12px; }
.work-thumb .tile-village .caption { bottom: 6px; left: 8px; right: 8px; font-size: 7.5px; gap: 8px; }
.work-thumb .tile-village .caption .dot { width: 5px; height: 5px; }
.hero-visual .tile-village .pin { width: 22px; height: 22px; }
.hero-visual .tile-village .pin.me { width: 26px; height: 26px; }
.hero-visual .tile-village .caption { font-size: 13px; bottom: 18px; }

/* Alt-Protein Paper Scout: research-corpus tile with scored papers + hypothesis card */
.tile-altprotein {
  background: linear-gradient(180deg, #f5efe0 0%, #efe6d1 100%);
  padding: 22px 24px;
  font-family: var(--serif);
  color: #1a1612;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.tile-altprotein .corpus-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(90, 60, 20, 0.2);
}
.tile-altprotein .corpus-title {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #5a4020;
  font-weight: 700;
}
.tile-altprotein .corpus-meta {
  font-family: var(--sans);
  font-size: 10px;
  color: #7a5a2f;
  letter-spacing: 0.04em;
}
.tile-altprotein .paper-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.tile-altprotein .score {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  margin-top: 1px;
}
.tile-altprotein .score.s5 { background: #7a5a2f; }
.tile-altprotein .score.s4 { background: #a48548; }
.tile-altprotein .paper-body { flex: 1; min-width: 0; }
.tile-altprotein .paper-title {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  color: #1a1612;
}
.tile-altprotein .paper-why {
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.35;
  color: #6a4a20;
  margin-top: 2px;
  font-style: italic;
}
.tile-altprotein .hypothesis-card {
  background: rgba(255, 250, 235, 0.7);
  border-left: 3px solid #b04a1b;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  border-radius: 0 3px 3px 0;
  color: #3a2f24;
  margin-top: 2px;
}
.tile-altprotein .h-label {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #b04a1b;
  font-weight: 700;
  margin-bottom: 3px;
  font-style: normal;
}
.work-thumb .tile-altprotein { padding: 14px 14px; gap: 6px; }
.work-thumb .tile-altprotein .corpus-title { font-size: 8px; letter-spacing: 0.11em; }
.work-thumb .tile-altprotein .corpus-meta { font-size: 7px; }
.work-thumb .tile-altprotein .score { width: 14px; height: 14px; font-size: 8px; border-radius: 2px; }
.work-thumb .tile-altprotein .paper-title { font-size: 9px; line-height: 1.2; }
.work-thumb .tile-altprotein .paper-why { font-size: 7.5px; margin-top: 1px; }
.work-thumb .tile-altprotein .hypothesis-card { font-size: 8.5px; padding: 5px 7px; line-height: 1.3; }
.work-thumb .tile-altprotein .h-label { font-size: 6.5px; letter-spacing: 0.12em; }
.hero-visual .tile-altprotein .paper-title { font-size: 15px; }
.hero-visual .tile-altprotein .hypothesis-card { font-size: 14px; padding: 12px 16px; }

/* iPad-swipe tile: one landscape iPad with swipeable screen, for Florida Ninja */
.tile-ipad-swipe {
  background: linear-gradient(135deg, #fbb676 0%, #f08a5d 45%, #c14b6f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.tile-ipad-swipe .ipad-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px solid #0c0c0c;
  border-radius: 8px;
  background: #0c0c0c;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(26, 22, 18, 0.35), 0 1px 3px rgba(26, 22, 18, 0.2);
}
.tile-ipad-swipe .ipad-scroll {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tile-ipad-swipe .ipad-scroll::-webkit-scrollbar { display: none; }
.tile-ipad-swipe .ipad-scroll img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
}
/* Bigger bezel on featured/larger contexts */
.featured-strip .tile-ipad-swipe { padding: 24px; }
.featured-strip .tile-ipad-swipe .ipad-frame {
  border-width: 6px;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(26, 22, 18, 0.32), 0 2px 6px rgba(26, 22, 18, 0.18);
}

/* Hero visual with a phone screenshot — centered, full-aspect, on warm background */
.hero-visual.has-phone {
  height: auto;
  min-height: 0;
  background: linear-gradient(135deg, #f5ecd9, #e8dcc0);
  padding: 36px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-visual.has-phone img {
  display: block;
  height: 580px;
  width: auto;
  max-width: 88%;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(26, 22, 18, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Hero visual with a real screenshot/photo */
.hero-visual.has-image {
  height: auto;
  min-height: 0;
  background: #f5ecd9;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual.has-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  background: #fff;
}
.hero-visual .caption {
  position: absolute;
  bottom: 10px;
  right: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  border-radius: 3px;
  z-index: 2;
}

/* Inline artifact image (in-body) */
.artifact-image {
  margin: 24px 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.artifact-image img {
  display: block;
  width: 100%;
  height: auto;
}
.artifact-image .image-caption {
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  background: var(--paper-edge);
}
.hero-visual.tile-lectio,
.hero-visual.tile-immersion,
.hero-visual.tile-bubby,
.hero-visual.tile-funder { padding: 0; }

/* Scale up the tile contents for hero size */
.hero-visual .tile-lectio { padding: 56px 64px; }
.hero-visual .tile-lectio .body { font-size: 16px; line-height: 1.65; column-count: 2; column-gap: 32px; }
.hero-visual .tile-lectio .dropcap { font-size: 76px; padding: 8px 12px 0 0; }

.hero-visual .tile-immersion { padding: 56px 64px; }
.hero-visual .tile-immersion .passage { font-size: 22px; line-height: 1.7; }
.hero-visual .tile-immersion .gloss-bubble { font-size: 13px; padding: 5px 10px; }

.hero-visual .tile-bubby { padding: 48px 64px; }
.hero-visual .tile-bubby .letter { font-size: 24px; line-height: 32px; }
.hero-visual .tile-bubby .corner { font-size: 11px; top: 16px; right: 20px; }
.hero-visual .tile-bubby::before {
  background: repeating-linear-gradient(
    180deg, transparent 0 31px,
    rgba(26, 22, 18, 0.06) 31px 32px
  );
}

.hero-visual .tile-funder { padding: 40px 56px; gap: 16px; }
.hero-visual .tile-funder .mini-bar { font-size: 14px; }
.hero-visual .tile-funder .mini-bar .lbl { width: 140px; }
.hero-visual .tile-funder .mini-bar .b { height: 16px; }
.hero-visual .tile-funder .mini-bar .v { width: 60px; font-size: 14px; }

.hero-visual .tile-barc { padding: 48px 56px; font-size: 14px; }
.hero-visual .tile-barc .terminal-header .dot { width: 13px; height: 13px; }
.hero-visual .tile-barc .terminal-header { margin-bottom: 20px; }

.hero-visual .tile-praxis { padding: 56px 64px; }
.hero-visual .tile-praxis .alist-header { font-size: 13px; margin-bottom: 16px; }
.hero-visual .tile-praxis .alist { gap: 12px; }
.hero-visual .tile-praxis .alist li { font-size: 18px; line-height: 1.4; gap: 14px; }
.hero-visual .tile-praxis .alist .box { width: 14px; height: 14px; }
.hero-visual .tile-praxis .alist .tag { font-size: 11px; padding: 2px 8px; }
.hero-visual .tile-praxis .queue { font-size: 13px; margin-top: 22px; padding-top: 14px; }

/* Contact form — restrained width, warm-paper inputs, serif-led labels. */
.contact-form {
  max-width: 480px;
  margin: 8px 0 40px;
}
.contact-form .field { margin-bottom: 24px; }
.contact-form label {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 12px;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form .form-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.contact-form .is-invalid { border-color: var(--accent); }
.contact-form .field-error {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent);
}
.contact-form .form-submit {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
}
.contact-form .form-submit:hover { background: #963d14; border-color: #963d14; }
.contact-form .form-note {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.contact-direct { color: var(--ink-soft); }

.cta-row {
  display: flex;
  gap: 12px;
  margin: 0 0 28px;
  flex-wrap: wrap;
}
.cta-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 4px;
  border: 1px solid var(--accent);
  transition: background 0.15s;
}
.cta-row a:hover {
  background: #963d14;
  border-color: #963d14;
  border-bottom-color: #963d14;
}
.cta-row a.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--rule);
}
.cta-row a.secondary:hover {
  background: var(--paper-edge);
  color: var(--accent);
  border-color: var(--accent);
}

.chart-placeholder {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 24px;
  margin: 24px 0;
}
.bar-chart { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 13px; }
.bar-row .label { width: 140px; color: var(--ink-soft); text-align: right; }
.bar-row .bar { flex: 1; height: 18px; background: var(--paper-edge); border-radius: 2px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; background: var(--accent); }
.bar-row .value { width: 60px; color: var(--ink); font-variant-numeric: tabular-nums; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
  margin: 24px 0 32px;
}
.meta-row dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-size: 11px;
  margin-bottom: 2px;
}
.meta-row dd { margin: 0; color: var(--ink); }

/* Tech inventory on the About page */
.tech-list {
  border-top: 1px solid var(--rule);
  margin: 16px 0 24px;
}
.tech-list > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.tech-list dt {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.tech-list dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}
.tech-list code {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: rgba(176, 74, 27, 0.07);
  padding: 1px 5px;
  border-radius: 3px;
}
@media (max-width: 640px) {
  .tech-list > div { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .tech-list dd { font-size: 14px; }
}

/* Sheaf-of-papers screenshot composite — a stack of 3–4 landscape screenshots
   laid out like a sheaf of papers slid across a table: front sheet upright,
   subsequent sheets peeking out to the right with subtle rotation. Use for
   desktop-ish tools where a single screenshot is boring: SiteScan, Protein
   Evaluator, MomentumBot, Alt-Protein Paper Scout, BARC.

   Markup:
     <div class="tile tile-sheaf">
       <img class="sheet s1" src="…" alt="">
       <img class="sheet s2" src="…" alt="">
       <img class="sheet s3" src="…" alt="">
       <img class="sheet s4" src="…" alt="">  <!-- s4 optional -->
     </div>
*/
.tile-sheaf {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #f2ead8 0%, #e6dcc4 100%);
}
.tile-sheaf .sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  height: auto;
  max-height: 82%;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(26, 22, 18, 0.14);
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(26, 22, 18, 0.16), 0 1px 3px rgba(26, 22, 18, 0.10);
  display: block;
}
/* Front sheet — closest to camera, straight, on top. */
.tile-sheaf .sheet.s1 {
  transform: translate(-58%, -50%) rotate(-1.2deg);
  z-index: 4;
  box-shadow: 0 10px 24px rgba(26, 22, 18, 0.22), 0 2px 6px rgba(26, 22, 18, 0.14);
}
/* Peeking sheets — each rotated a hair more and offset right + slightly down. */
.tile-sheaf .sheet.s2 {
  transform: translate(-42%, -49%) rotate(1.8deg);
  z-index: 3;
}
.tile-sheaf .sheet.s3 {
  transform: translate(-28%, -47%) rotate(4.5deg);
  z-index: 2;
}
.tile-sheaf .sheet.s4 {
  transform: translate(-16%, -44%) rotate(7deg);
  z-index: 1;
}

/* On the /work single-page hero (bigger canvas), fan a little wider. */
.hero-visual .tile-sheaf .sheet { width: 62%; }
.hero-visual .tile-sheaf .sheet.s1 { transform: translate(-62%, -50%) rotate(-1.5deg); }
.hero-visual .tile-sheaf .sheet.s2 { transform: translate(-44%, -49%) rotate(2deg); }
.hero-visual .tile-sheaf .sheet.s3 { transform: translate(-26%, -46%) rotate(5deg); }
.hero-visual .tile-sheaf .sheet.s4 { transform: translate(-10%, -42%) rotate(8deg); }

footer {
  border-top: 1px solid var(--rule);
  margin-top: 80px;
  padding: 32px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}
footer a { color: var(--ink-soft); margin: 0 12px; }
footer a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.back-link {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-block;
  margin-bottom: 24px;
}
.back-link:hover { color: var(--accent); }

@media (max-width: 900px) {
  main.wide { max-width: 100%; padding: 24px; }
  .hero-visual { height: auto; min-height: 240px; }
  .hero-visual .tile-lectio { padding: 32px 28px; }
  .hero-visual .tile-lectio .body { column-count: 1; font-size: 15px; }
  .hero-visual .tile-lectio .dropcap { font-size: 58px; padding: 4px 8px 0 0; }
  .hero-visual .tile-immersion { padding: 32px 28px; }
  .hero-visual .tile-immersion .passage { font-size: 18px; }
  .hero-visual .tile-bubby { padding: 32px 28px; }
  .hero-visual .tile-bubby .letter { font-size: 20px; line-height: 28px; }
  .hero-visual .tile-funder { padding: 28px 24px; gap: 12px; }
  .hero-visual .tile-funder .mini-bar .lbl { width: 110px; }
}

@media (max-width: 640px) {
  .featured-strip { grid-template-columns: 1fr; gap: 16px; }
  .theme-grid { grid-template-columns: 1fr; }
  main { padding: 20px; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .lead { font-size: 18px; }
  /* Mobile nav: brand left, "Menu" dropdown right (via <details>). */
  /* main drops to 20px padding here, so the nav rule follows it in. */
  .nav { padding: 14px 0; width: calc(100% - 40px); flex-direction: row; align-items: center; gap: 0; position: relative; }

  .nav .nav-menu { display: block; position: relative; align-self: flex-start; }
  /* Hamburger button: three CSS-drawn bars. Bigger tap target
     (min 44x44) and pointer-events:none on the bars so the summary
     itself always catches the tap — avoids iOS Safari flakiness where
     the animated bars intercept touches inconsistently. */
  .nav .nav-menu > summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
    margin: -4px;   /* pull edges to keep visual position but larger hitbox */
    user-select: none;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav .nav-menu > summary::-webkit-details-marker { display: none; }
  .nav .nav-menu > summary .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.15s ease;
    pointer-events: none;   /* let taps fall through to summary */
  }
  /* Collapse into an X when open */
  .nav .nav-menu[open] > summary .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav .nav-menu[open] > summary .bar:nth-child(2) { opacity: 0; }
  .nav .nav-menu[open] > summary .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav .nav-menu > ul {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /* Open/closed is driven by inline `display` from nav.js, not by the
       [open] selector — Safari/Brave don't re-run the native <details>
       content-hiding path when `open` is toggled via JS after
       preventDefault(), so the dropdown would stay painted on close. */
    display: none;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(26, 22, 18, 0.15);
    padding: 6px 0;
    margin: 0;
    flex-direction: column;
    gap: 0;
    row-gap: 0;
    column-gap: 0;
    flex-wrap: nowrap;
    min-width: 180px;
    z-index: 20;
  }
  .nav .nav-menu[open] > ul { display: flex; }
  .nav .nav-menu > ul li { padding: 0; }
  .nav .nav-menu > ul li a {
    display: block;
    padding: 10px 20px;
    color: var(--ink);
    border-bottom: none;
  }
  .nav .nav-menu > ul li a:hover {
    background: var(--paper-edge);
    border-bottom-color: transparent;
  }

  /* Hero visuals on phone */
  .hero-visual { min-height: 200px; margin: 4px 0 16px; }
  .hero-visual .tile-lectio { padding: 22px 20px; }
  .hero-visual .tile-lectio .body { font-size: 14px; line-height: 1.55; }
  .hero-visual .tile-lectio .dropcap { font-size: 46px; padding: 4px 6px 0 0; }
  .hero-visual .tile-immersion { padding: 22px 20px; }
  .hero-visual .tile-immersion .passage { font-size: 16px; line-height: 1.6; }
  .hero-visual .tile-immersion .gloss-bubble { display: inline-block; font-size: 11px; padding: 3px 7px; }
  .hero-visual .tile-bubby { padding: 26px 22px; }
  .hero-visual .tile-bubby .letter { font-size: 17px; line-height: 24px; }
  .hero-visual .tile-bubby .corner { top: 10px; right: 14px; }
  .hero-visual .tile-funder { padding: 22px 18px; gap: 9px; }
  .hero-visual .tile-funder .mini-bar { font-size: 12px; }
  .hero-visual .tile-funder .mini-bar .lbl { width: 90px; }
  .hero-visual .tile-funder .mini-bar .v { width: 50px; font-size: 12px; }

  /* Home page card tiles on phone */
  .tile { height: 360px; }
  .featured-strip .phone-trio .phone.left {
    transform: translate(calc(-50% - 78px), calc(-50% + 12px)) rotate(-20deg);
  }
  .featured-strip .phone-trio .phone.right {
    transform: translate(calc(-50% + 78px), calc(-50% + 12px)) rotate(20deg);
  }
  .tile-lectio { padding: 22px 24px; }
  .tile-lectio .dropcap { font-size: 44px; }
  .tile-lectio .body { font-size: 12px; }
  .tile-immersion { padding: 22px 24px; }
  .tile-immersion .passage { font-size: 14px; }
  .tile-bubby { padding: 22px 26px; }
  .tile-bubby .letter { font-size: 16px; line-height: 22px; }
  .tile-funder { padding: 20px 22px; gap: 8px; }
  .tile-funder .mini-bar .lbl { width: 80px; font-size: 11px; }

  /* In-page chart (Animal Funder body) */
  .bar-row .label { width: 110px; font-size: 12px; }
  .bar-row .value { width: 50px; font-size: 12px; }

  /* Work list — stack each item vertically: meta → title → thumb → desc.
     display: contents on .work-body makes its children flex-children of the li
     so we can order them around the .work-thumb without restructuring HTML. */
  .work-list li {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 22px 0;
  }
  .work-list .work-body { display: contents; }
  .work-list li .meta { order: 1; margin-bottom: 0; }
  .work-list li .title { order: 2; font-size: 22px; }
  .work-list li .v1-badge { order: 2; align-self: flex-start; margin: 2px 0 0; }
  .work-list li .work-thumb { order: 3; margin: 6px 0 4px; }
  .work-list li .desc { order: 4; font-size: 16px; margin-top: 0; }

  /* Thumbnails — full width, aspect ratio per category. */
  .work-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;       /* portrait phone-trio default */
  }
  .work-thumb.is-wide {
    width: 100%;
    height: auto;
    /* 7/5 (=1.4) matches the desktop is-wide 288x200 aspect and the Village on
       the Road screenshots (~1.4), so object-fit: cover on those images doesn't
       crop the top/bottom on mobile. Portrait CSS-art tiles still fit fine. */
    aspect-ratio: 7 / 5;
  }
  .work-thumb-placeholder .initial { font-size: 48px; }
  .work-thumb-placeholder .pending { font-size: 9px; bottom: 8px; }

  /* Phone-trio on /work cards: at mobile widths the work-thumb is
     full-bleed with a 5:4 aspect, so the desktop percent-based translates
     (±28%) drift the side phones too far out vs. featured. Pin to the same
     pixel values featured-strip uses on mobile (±78px / +12px) so the fan
     looks identical across pages. */
  .work-thumb .phone-trio .phone.left,
  .hero-visual .phone-trio .phone.left {
    transform: translate(calc(-50% - 78px), calc(-50% + 12px)) rotate(-20deg);
  }
  .work-thumb .phone-trio .phone.right,
  .hero-visual .phone-trio .phone.right {
    transform: translate(calc(-50% + 78px), calc(-50% + 12px)) rotate(20deg);
  }

  /* Case-study hero with a phone-trio tile: height comes from aspect ratio
     on mobile (matches the /apps card 5:4), not the desktop 360px. */
  .hero-visual.has-trio {
    height: auto;
    aspect-ratio: 5 / 4;
  }

  /* tile-funder in a wide mobile thumb keeps horizontal bars (already
     defined in the .work-thumb.is-wide rule) — just tighten for narrow screens. */
  .work-thumb.is-wide .tile-funder .mini-bar .lbl { width: 60px; font-size: 9px; }
  .work-thumb.is-wide .tile-funder .mini-bar .v { width: 30px; font-size: 9px; }

  /* Phone-screenshot hero shrinks on phone */
  .hero-visual.has-phone { padding: 20px 0; }
  .hero-visual.has-phone img { height: 420px; max-width: 80%; border-radius: 14px; }

  /* Meta row stacks tighter */
  .meta-row { gap: 16px; padding: 14px 0; }

  /* CTA buttons */
  .cta-row { gap: 8px; margin: 0 0 24px; }
  .cta-row a { padding: 11px 16px; font-size: 13px; }

  /* Artifact box */
  .artifact { padding: 22px 22px; }
  .artifact blockquote { font-size: 16px; }

  /* Hero kicker spacing */
  .hero { padding: 32px 0 16px; }

  /* Footer */
  footer { padding: 24px 20px; margin-top: 56px; }
  footer a { margin: 0 8px; }
}

@media (max-width: 380px) {
  h1 { font-size: 28px; }
  .lead { font-size: 17px; }
  .hero-visual .tile-immersion .passage { font-size: 15px; }
  .hero-visual .tile-bubby .letter { font-size: 16px; line-height: 22px; }
}

/* Theories of Change: two-endgame framing tile with a small legend strip. */
.tile-theories {
  background: linear-gradient(180deg, #f6efe0 0%, #efe4cd 100%);
  padding: 22px 24px;
  font-family: var(--serif);
  color: #1a1612;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.tile-theories .toc-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(90, 60, 20, 0.2);
}
.tile-theories .toc-title {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #5a4020;
  font-weight: 700;
}
.tile-theories .toc-meta {
  font-family: var(--sans);
  font-size: 10px;
  color: #7a5a2f;
  letter-spacing: 0.04em;
  font-style: italic;
}
.tile-theories .endgames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tile-theories .card {
  border: 1px solid rgba(60, 40, 20, 0.14);
  border-radius: 5px;
  padding: 10px 12px;
}
.tile-theories .card.demand { background: rgba(246, 236, 211, 0.85); border-color: #e8d59d; }
.tile-theories .card.supply { background: rgba(231, 236, 221, 0.85); border-color: #cdd8bd; }
.tile-theories .card .label {
  font-family: var(--sans);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.tile-theories .card.demand .label { color: #8a5e18; }
.tile-theories .card.supply .label { color: #3f5233; }
.tile-theories .card .headline {
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 4px;
  color: #1a1612;
}
.tile-theories .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 6px;
  border-top: 1px dashed rgba(90, 60, 20, 0.22);
}
.tile-theories .legend .item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: #6c6357;
}
.tile-theories .legend .dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}
.tile-theories .legend .dot.supply { background: #3f5233; }
.tile-theories .legend .dot.demand { background: #8a5e18; }
.tile-theories .legend .dot.political { background: #3f4e6a; }
.tile-theories .legend .dot.cultural { background: #6a3f6a; }

/* Shrunk for /work listing thumbnails (currently hidden on /personal via text-only, but kept for future). */
.work-thumb .tile-theories { padding: 12px 14px; gap: 6px; }
.work-thumb .tile-theories .toc-title { font-size: 8px; letter-spacing: 0.1em; }
.work-thumb .tile-theories .toc-meta { font-size: 7px; }
.work-thumb .tile-theories .card { padding: 5px 7px; }
.work-thumb .tile-theories .card .label { font-size: 7px; letter-spacing: 0.12em; }
.work-thumb .tile-theories .card .headline { font-size: 9px; line-height: 1.2; margin-top: 2px; }
.work-thumb .tile-theories .legend { display: none; }

.hero-visual .tile-theories { padding: 30px 32px; gap: 16px; }
.hero-visual .tile-theories .toc-title { font-size: 13px; letter-spacing: 0.18em; }
.hero-visual .tile-theories .toc-meta { font-size: 12px; }
.hero-visual .tile-theories .card { padding: 14px 16px; }
.hero-visual .tile-theories .card .label { font-size: 11px; }
.hero-visual .tile-theories .card .headline { font-size: 17px; margin-top: 6px; }
.hero-visual .tile-theories .legend .item { font-size: 11px; }
.hero-visual .tile-theories .legend .dot { width: 9px; height: 9px; }

/* ---------------------------------------------------------------
   /qr — one scannable code at a time, picked with the tab row, sized
   to fit one non-scrolling screen. Everything is measured against
   both vw and dvh so nothing pushes past the viewport in either
   orientation. The stage is sized by whichever code is showing, so
   swapping tabs doesn't shift the page.
   --------------------------------------------------------------- */
body.qr-page {
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
}

.qr-main {
  max-width: none;   /* overrides the 720px content column from `main` */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3.5dvh, 40px);
  padding: clamp(16px, 3dvh, 36px) 20px;
  text-align: center;
}

.qr-head { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.qr-head .kicker {
  /* `.kicker` is only styled inside `.hero`, so restate it here. */
  font-family: var(--sans);
  font-size: clamp(11px, 1.2vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  max-width: 100%;
}
.qr-brand { border-bottom: none; }
.qr-brand img {
  height: clamp(28px, 5dvh, 44px);
  width: auto;
  display: block;
}

.qr-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #fff;
}
.qr-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px clamp(12px, 2.2vw, 22px);
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.qr-tab:hover { color: var(--ink); }
.qr-tab.is-on {
  background: var(--ink);
  color: var(--paper);
}

.qr-stage {
  display: flex;
  justify-content: center;
  width: 100%;
}

.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  border-bottom: none;
  padding: clamp(10px, 1.6vw, 18px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
/* `.qr-card` sets display:flex, which would beat the UA rule for [hidden]. */
.qr-card[hidden] { display: none; }
a.qr-card:hover { border-color: var(--accent); }

.qr-svg {
  display: block;
  width: min(78vw, 48dvh, 400px);
  height: auto;
  color: var(--ink);
}

.qr-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.qr-url {
  font-family: var(--sans);
  font-size: clamp(12px, 1.4vw, 15px);
  color: var(--accent);
  max-width: 30ch;
  overflow-wrap: anywhere;
}
/* The contact panel isn't a link, so its caption shouldn't read as one. */
div.qr-card .qr-url { color: var(--ink-soft); }

.qr-foot {
  margin: 0;
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--ink-soft);
}

/* Landscape: height is the binding constraint, so lean on dvh. */
@media (min-aspect-ratio: 1/1) {
  .qr-svg { width: min(40vw, 52dvh, 400px); }
}

/* Small phones: trade the chrome away before the code gets too small to scan. */
@media (max-height: 700px) and (max-aspect-ratio: 1/1) {
  .qr-main { gap: 12px; padding: 12px; }
  .qr-card { gap: 6px; }
  .qr-foot { display: none; }
}

@media (max-height: 520px) {
  .qr-head .kicker, .qr-foot { display: none; }
  .qr-tab { padding: 6px 14px; }
}