/* Aman Singh portfolio. Engineer's markup: navy ink on white, square frames with a label on the border, a red correction pen.
   One file, in cascade layers. A later layer always wins over an earlier one, whatever the selector,
   so a component never has to fight the layout to be seen. Layouts are written for phones first;
   wider screens add to them with min-width queries. */
@layer tokens, base, layout, components, pages, touch, print;

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  @font-face { font-family: "Schibsted"; font-weight: 400; font-display: swap; src: url(/assets/fonts/schibsted-400.woff2) format("woff2"); }
  @font-face { font-family: "Schibsted"; font-weight: 500; font-display: swap; src: url(/assets/fonts/schibsted-500.woff2) format("woff2"); }
  @font-face { font-family: "Schibsted"; font-weight: 700; font-display: swap; src: url(/assets/fonts/schibsted-700.woff2) format("woff2"); }
  /* Built from design-systems/site/tokens.json. Do not edit here. */
  :root {
    --p-color-navy-900: #14202E;
    --p-color-navy-700: #2E3A48;
    --p-color-navy-600: #56606C;
    --p-color-navy-550: #5F6976;
    --p-color-grey-500: #8A94A3;
    --p-color-grey-400: #AEB6C1;
    --p-color-grey-350: #B7BFCA;
    --p-color-grey-300: #CBD2DA;
    --p-color-grey-250: #D5DAE1;
    --p-color-grey-150: #EDF0F4;
    --p-color-grey-120: #EEF1F5;
    --p-color-grey-50: #F7F8FA;
    --p-color-white: #FFFFFF;
    --p-color-red-700: #C8102E;
    --p-color-scrim: rgba(20, 32, 46, .6);
    --p-font-family-sans: "Schibsted", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Arial", sans-serif;
    --p-size-wrap: 1180px;
    --p-size-gutter: 24px;
    --p-size-frame: 1.5px;
    --paper: var(--p-color-white);
    --band: var(--p-color-grey-50);
    --ink: var(--p-color-navy-900);
    --body: var(--p-color-navy-700);
    --muted: var(--p-color-navy-600);
    --faint: var(--p-color-navy-550);
    --rule: var(--p-color-grey-250);
    --soft: var(--p-color-grey-300);
    --grid: var(--p-color-grey-150);
    --field: var(--p-color-grey-500);
    --chip: var(--p-color-grey-350);
    --ghost: var(--p-color-grey-400);
    --picked: var(--p-color-grey-120);
    --scrim: var(--p-color-scrim);
    --mark: var(--p-color-red-700);
    --link: var(--ink);
    --sans: var(--p-font-family-sans);
    --wrap: var(--p-size-wrap);
    --gutter: var(--p-size-gutter);
    --frame: var(--p-size-frame) solid var(--ink);
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--paper); color: var(--body); font: 400 1.0625rem/1.55 var(--sans); overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
         min-height: 100svh; display: flex; flex-direction: column; }
  body > main { flex: 1 0 auto; }
  h1, h2, h3 { text-wrap: balance; }
  p, li, dd, figcaption { text-wrap: pretty; }
  /* body links are navy; the red pen is kept for what matters, and for the link under your pointer */
  a { color: var(--link); text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
  a:hover { text-decoration-color: var(--mark); text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }
  img { max-width: 100%; height: auto; display: block; }
  figure { margin: 36px 0; }
  .skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 9px 12px; z-index: 9; }
  .skip:focus { left: 16px; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (prefers-reduced-motion: no-preference) {
    a, .cbtn, .ex button, .tile2 .more { transition: background-color .15s ease, color .15s ease, border-color .15s ease, text-decoration-thickness .15s ease; }
    .tile2 { transition: box-shadow .15s ease, border-color .15s ease; }
  }
}

/* ------------------------------------------------------------------ layout (phones first) */
@layer layout {
  /* header */
  .site { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 16px var(--gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
  .site .name { font-weight: 700; font-size: 1rem; color: var(--ink); white-space: nowrap; text-decoration: none; }
  .site nav { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.84375rem; }
  .site nav a { color: var(--ink); opacity: .8; text-decoration: none; }
  .site nav a:hover, .site nav a[aria-current] { opacity: 1; }
  .site nav a[aria-current] { font-weight: 700; }
  @media (min-width: 30.0625em) { .site { padding: 18px 24px; } .site .name { font-size: 1.0625rem; } .site nav { gap: 24px; font-size: 0.875rem; } }

  /* home hero: on phones the example comes straight after the headline */
  .heroA { max-width: var(--wrap); margin: 0 auto; padding: 32px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1fr);
           grid-template-areas: "h" "s" "l" "ex"; }
  /* the opening, text only: the headline leads on the left, the introduction and the two actions sit on the right */
  .heroS { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; row-gap: 20px; padding-top: 40px; padding-bottom: 56px; }
  .heroA.heroS h1, .heroA.heroS .side, .heroA.heroS .s, .heroA.heroS .l { grid-area: auto; }
  .heroS .side .s { margin-top: 0; max-width: 34em; }
  @media (min-width: 56.3125em) {
    .heroS { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-areas: none; grid-template-rows: auto; column-gap: 64px; align-items: end; padding-top: 72px; padding-bottom: 80px; }
    .heroS h1 { font-size: clamp(3rem, 5.2vw, 4.5rem); }
    .heroS .side { padding-bottom: 6px; }
  }
  .heroA .k { grid-area: k; } .heroA h1 { grid-area: h; } .heroA .s { grid-area: s; } .heroA .l { grid-area: l; } .heroA .ex { grid-area: ex; margin-top: 32px; }
  @media (min-width: 56.3125em) {
    .heroA { padding-top: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 56px;
             grid-template-areas: "h ex" "s ex" "l ex" ". ex"; grid-template-rows: auto auto auto 1fr; align-items: start; }
    .heroA .ex { margin-top: 8px; }
  }

  .band { background-color: var(--band); padding: 40px var(--gutter) 80px; }
  .sechd { margin: 0 0 24px; }
  .sechd p.sub { margin: 0; }
  @media (min-width: 56.25em) { .sechd { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; } .band .sechd h2.sec { margin: 0; } }
  .band > .in { max-width: 1132px; margin: 0 auto; }
  .tiles { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 47.5625em) { .tiles { grid-template-columns: repeat(2, 1fr); } }

  .sayband { max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 72px; }
  @media (min-width: 37.5625em) { .sayband { padding-top: 72px; } }
  .plain { max-width: var(--wrap); margin: 0 auto; padding: 72px var(--gutter); }

  /* case study */
  .cshead { border-bottom: var(--frame); }
  /* one left edge: the case-study header, the article and the simple pages all start where the article does */
  .cshead .in { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gutter) 36px; }
  .cshead .hd { max-width: 740px; }
  @media (min-width: 37.5625em) { .cshead .in { padding-top: 40px; padding-bottom: 48px; } }
  .cs { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 740px); justify-content: start; }
  .toc { display: none; }
  .tocm { margin: 0 0 28px; border: var(--frame); }
  .tocm summary { min-height: 48px; display: flex; align-items: center; padding: 0 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
  .tocm ol { margin: 0; padding: 4px 16px 14px 36px; }
  .tocm li { margin: 0; }
  .tocm a { display: flex; align-items: center; min-height: 48px; color: var(--ink); }
  details.srcs { margin: 0 0 28px; border: var(--frame); }
  details.srcs > summary { min-height: 48px; display: flex; align-items: center; padding: 0 16px; font-weight: 700; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 4px; }
  details.srcs[open] > summary { border-bottom: var(--frame); }
  details.srcs > figure { margin: 16px; }
  details.srcs td > a:only-child { display: inline-flex; align-items: center; min-height: 48px; }
  @media (min-width: 65.0625em) {
    .cshead .in { padding-left: calc(var(--gutter) + 10.625rem + 56px); }
    .cs { padding-top: 40px; grid-template-columns: 10.625rem minmax(0, 740px); gap: 56px; }
    .tocm { display: none; }
    .toc { display: block; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; padding-top: 30px; font-size: 0.8125rem; line-height: 1.35; }
  }
  article section { scroll-margin-top: 24px; padding-top: 40px; }

  /* simple pages */
  .page { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 72px; }
  .page > * { max-width: 740px; }
  @media (min-width: 65.0625em) { .page { padding-left: calc(var(--gutter) + 10.625rem + 56px); } }

  /* contact, at the foot of every page */
  .contact { border-top: var(--frame); }
  .contact .cin { max-width: var(--wrap); margin: 0 auto; padding: 44px var(--gutter) 48px; display: grid; grid-template-columns: 1fr; gap: 24px 64px; align-items: start; }
  @media (min-width: 51.3125em) { .contact .cin { padding-top: 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }
}

/* ------------------------------------------------------------------ components */
@layer components {
  /* hero text */
  .heroA .k { font-size: 0.9375rem; color: var(--muted); margin: 0 0 16px; }
  .heroA h1 { margin: 0; color: var(--ink); font-weight: 700; font-size: clamp(2.75rem, 5.5vw, 4rem); line-height: 1; letter-spacing: -.035em; }
  .ring { position: relative; white-space: nowrap; }
  .ring svg { position: absolute; left: -.16em; top: -.12em; width: calc(100% + .32em); height: calc(100% + .22em); overflow: visible; pointer-events: none; }
  .heroA .s { font-size: 1.25rem; line-height: 1.5; color: var(--body); margin: 20px 0 0; max-width: 30em; }
  .heroA .l { margin: 24px 0 0; font-size: 1.0625rem; font-weight: 500; }
  .heroA .l { display: flex; flex-wrap: wrap; gap: 12px; }
  .heroA .l a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: var(--frame); font-weight: 700; text-decoration: none; color: var(--ink); }
  .heroA .l a.go { background: var(--mark); border-color: var(--mark); color: var(--paper); }
  .heroA .l a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

  /* the trace example on the home page */
  /* the one place the drafting grid stays: the sheet the example is worked out on */
  .ex { position: relative; border: var(--frame); padding: 20px 16px; background-color: var(--paper);
        background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; }
  .ex .tag { display: block; margin: 0 0 12px; font-size: 0.8125rem; color: var(--muted); }
  @media (min-width: 37.5625em) { .ex { padding: 30px 26px 24px; } .ex .tag { position: absolute; top: -11px; left: 18px; margin: 0; padding: 0 8px; background: var(--paper); } }
  .rec { border: 1px solid var(--soft); background: var(--paper); padding: 12px 16px; margin: 0 0 12px; }
  .rec .h { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.8125rem; margin-bottom: 4px; }
  .rec .n { font-weight: 700; font-size: 1.125rem; color: var(--ink); }
  .rec .d { margin-top: 4px; font-size: 0.9375rem; }
  .typo { position: relative; font-weight: 700; color: var(--ink); }
  .ex.done .typo, html:not(.js) .typo { margin: 0 .25em 0 .3em; }
  .typo svg { position: absolute; left: -.45em; top: -.35em; width: calc(100% + .9em); height: calc(100% + .7em); overflow: visible; opacity: 0; }
  .ex.done .typo svg, html:not(.js) .typo svg { opacity: 1; }
  .ex .q { font-size: 0.9375rem; line-height: 1.45; font-weight: 400; color: var(--body); margin: 14px 0 0; }
  .ex .typo { color: var(--mark); font-weight: 700; }
  figure.ex { margin-left: 0; margin-right: 0; }
  .ex .ans { margin: 12px 0 0; font-size: 0.9375rem; line-height: 1.45; }
  .ex .ans p { margin: 0 0 8px; background: var(--paper); }
  .ex .ans b { color: var(--ink); }
  .ex .typo-note { color: var(--mark); font-size: 0.875rem; font-weight: 500; }
  .ex .exlink { margin: 12px 0 0; font-weight: 700; }
  .ex .exlink a { text-decoration-color: var(--mark); text-decoration-thickness: 2px; }
  .ex .foot2 { margin: 18px 0 0; }
  .ex button { font: 700 0.9375rem var(--sans); color: var(--ink); background: var(--paper); border: var(--frame); padding: 10px 14px; min-height: 44px; cursor: pointer; }
  .ex button:hover { background: var(--ink); color: var(--paper); }
  .js .ex:not(.done) .ans { display: none; }
  html:not(.js) .ex .foot2 { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .ex.done .typo svg path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: pen .6s ease-out forwards; }
    @keyframes pen { to { stroke-dashoffset: 0; } }
  }

  /* section headings on the home page */
  .band h2.sec, .plain h2.sec { margin: 0 0 6px; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--ink); letter-spacing: -.025em; }
  .plain h2.sec { margin-bottom: 24px; }
  .band p.sub { margin: 0 0 32px; color: var(--muted); font-size: 1.1875rem; }

  /* case study tiles, drawn as frames */
  .tile2 { background: var(--paper); border: var(--frame); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
  .tile2:hover, .tile2:focus-visible { border-color: var(--mark); box-shadow: 0 0 0 1.5px var(--mark); }
  .tile2 img { width: 100%; aspect-ratio: 1200 / 676; object-fit: cover; object-position: top; border-bottom: var(--frame); }
  .tile2 .tx { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .tile2 .sec2 { font-size: 0.875rem; color: var(--muted); }
  .tile2 h3 { margin: 0; font-size: 1.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
  .tile2 .out { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.45; }
  .tile2 .more { margin-top: auto; padding-top: 12px; color: var(--ink); font-size: 1rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .tile2:hover .more, .tile2:focus-visible .more { text-decoration-thickness: 3px; }
  @media (min-width: 37.5625em) { .tile2 .tx { padding: 26px 30px 30px; } }
  /* an even number of tiles: the first and last lead at full width, the middle pair sits side by side, so the grid has a rhythm */
  @media (min-width: 56.25em) {
    .tiles:not(.lead) .tile2:first-child, .tiles:not(.lead) .tile2:last-child:nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
    .tiles:not(.lead) .tile2:last-child:nth-child(4) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
    .tiles:not(.lead) .tile2:last-child:nth-child(4) img { order: 2; border-right: 0; border-left: var(--frame); }
    .tiles:not(.lead) .tile2:first-child img, .tiles:not(.lead) .tile2:last-child:nth-child(4) img { height: 100%; aspect-ratio: 1200 / 676; border-bottom: 0; border-right: var(--frame); }
    .tiles:not(.lead) .tile2:first-child .tx, .tiles:not(.lead) .tile2:last-child:nth-child(4) .tx { justify-content: center; padding: 36px 40px; }
    .tiles:not(.lead) .tile2:first-child h3, .tiles:not(.lead) .tile2:last-child:nth-child(4) h3 { font-size: 1.875rem; }
  }
  /* an odd number of tiles: the first one leads at full width */
  @media (min-width: 56.25em) {
    .tiles.lead .tile2:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .tiles.lead .tile2:first-child img { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: var(--frame); }
    .tiles.lead .tile2:first-child .tx { justify-content: center; padding: 36px 40px; }
    .tiles.lead .tile2:first-child h3 { font-size: 1.875rem; }
  }

  /* more-to-see rows */
  .rows { list-style: none; margin: 0; padding: 0; border-top: var(--frame); }
  .rows li { border-bottom: 1px solid var(--rule); }
  .rows a { display: grid; grid-template-columns: 1fr; gap: 4px 24px; padding: 18px 0; color: var(--ink); text-decoration: none; }
  .rows .t { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.015em; }
  .rows .s { color: var(--muted); font-size: 0.875rem; }
  .rows .d { grid-column: 1 / -1; color: var(--muted); font-size: 1rem; }
  .rows a:hover .t, .rows a:focus-visible .t { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  @media (min-width: 47.5625em) { .rows a { grid-template-columns: 1fr auto; align-items: baseline; } .rows .s { text-align: right; } }

  /* testimonial */
  .say { margin: 0; position: relative; max-width: 860px; }
  .say blockquote p { text-indent: -0.42em; }
  .say blockquote { margin: 0; }
  .say p { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.5625rem); line-height: 1.45; color: var(--ink); letter-spacing: -.012em; }
  .say figcaption { margin-top: 16px; font-size: 0.9375rem; color: var(--muted); }
  .say figcaption a { color: var(--ink); font-weight: 700; }

  /* case study header */
  .cshead .back { font-size: 0.875rem; margin: 0 0 28px; }
  .cshead .back a { color: var(--ink); font-weight: 500; }
  .cshead .back a::before { content: "\2190\00a0"; }
  .cshead h1 { color: var(--ink); font-weight: 700; font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 24px; max-width: 22ch; }
  .cshead .lede { max-width: 34em; }
  .cshead .lede p { font-size: 1.25rem; line-height: 1.45; color: var(--ink); letter-spacing: -.012em; margin: 0 0 14px; }
  @media (min-width: 37.5625em) { .cshead .lede p { font-size: 1.375rem; } }

  /* contents list */
  .toc .toch { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
  .toc ol { list-style: none; margin: 0; padding: 0; }
  .toc li { margin: 0 0 8px; }
  .toc a { color: var(--muted); display: grid; grid-template-columns: 1.6em 1fr; gap: 0 8px; white-space: nowrap; text-decoration: none; }
  .toc a .n { text-align: right; font-variant-numeric: tabular-nums; }
  .toc a:hover, .toc a.on { color: var(--ink); }
  .toc a.on { font-weight: 700; }

  /* article text */
  article p { font-size: 1.125rem; line-height: 1.58; margin: 0 0 18px; max-width: 66ch; }
  article ul.pts { margin: 0 0 20px; padding: 0 0 0 1.25em; max-width: 66ch; }
  article ul.pts li { font-size: 1.125rem; line-height: 1.5; margin: 0 0 8px; padding-left: 4px; }
  article ul.pts li::marker { color: var(--mark); }

  /* the opening picture of a case study: its own colour, edge to edge, framed by plain walls */
  .cshero { margin: 0; background: var(--plate); border-bottom: var(--frame); }
  .cshero .pl { max-width: var(--wrap); margin: 0 auto; }
  .cshero img { display: block; width: 100%; height: auto; }
  .cshero figcaption { background: var(--paper); border-top: var(--frame); }
  .cshero figcaption span { display: block; max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter); font-size: 0.875rem; color: var(--muted); }
  @media (min-width: 37.5625em) { article p { font-size: 1.1875rem; } }
  article p a { text-underline-offset: 3px; }
  article strong { color: var(--ink); font-weight: 700; }
  article h2 { color: var(--ink); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 1.875rem); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 18px; max-width: 28ch; }
  article p.src { font-size: 0.8125rem; line-height: 1.55; color: var(--muted); margin-top: 28px; }
  article p.close { font-size: 0.9375rem; color: var(--muted); margin-top: 28px; }

  /* at a glance: the spec sheet */
  .glance { margin: 0 0 32px; padding: 28px 20px 22px; border: var(--frame); position: relative; }
  @media (min-width: 37.5625em) { .glance { padding: 34px 34px 28px; } }
  .glance h2 { position: absolute; top: -13px; left: 18px; margin: 0; padding: 0 8px; background: var(--paper); font-size: 0.9375rem; font-weight: 700; letter-spacing: -.025em; }
  .gl { margin: 0; }
  .gl .gr { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 13px 0; border-top: 1px solid var(--rule); }
  .gl .gr:first-child { border-top: 0; padding-top: 0; }
  @media (min-width: 37.5625em) { .gl .gr { grid-template-columns: 10.625rem 1fr; gap: 18px; } }
  .gl dt { font-weight: 700; color: var(--ink); font-size: 0.9375rem; }
  .gl dd { margin: 0; color: var(--body); font-size: 1rem; line-height: 1.5; }
  .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); gap: 14px 24px; margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 0.875rem; }
  .meta dt { color: var(--muted); margin: 0; }
  .meta dd { margin: 2px 0 0; color: var(--ink); font-weight: 500; }
  article p.note { font-size: 0.875rem; line-height: 1.5; color: var(--muted); margin: 20px 0 0; }

  /* link to the prototype inside a case study */
  .trylink { margin: 8px 0 28px; padding: 18px 20px; border: var(--frame); }
  .trylink a { font-weight: 700; }
  .trylink span { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 4px; }

  /* next case study */
  .next { display: block; margin: 64px 0 72px; padding: 28px 0 0; border-top: 1px solid var(--rule); text-decoration: none; }
  .next .k { display: block; font-size: 0.875rem; color: var(--muted); }
  .next .t { display: block; font-size: 1.75rem; font-weight: 700; color: var(--ink); letter-spacing: -.025em; margin: 6px 0 8px; line-height: 1.15; }
  .next:hover .t { text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 4px; }
  .next .d { display: block; font-size: 1.0625rem; color: var(--body); max-width: 60ch; }

  /* contact */
  .contact h2 { margin: 0 0 12px; color: var(--ink); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.03em; line-height: 1.05; }
  .contact .cl p { margin: 0 0 10px; font-size: 1.125rem; line-height: 1.5; color: var(--body); max-width: 34em; }
  .contact .cl .where { color: var(--muted); font-size: 1rem; }
  .contact .cr { display: grid; gap: 10px; }
  .cbtn { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: var(--frame); background: var(--paper); color: var(--ink); font-weight: 700; font-size: 1rem; text-decoration: none; }
  .cbtn svg { width: 22px; height: 22px; flex: none; }
  .cbtn:hover { background: var(--ink); color: var(--paper); }
  .cbtn:hover svg rect[fill="currentColor"] { fill: var(--paper); }
  .cbtn:hover svg [fill="var(--paper)"] { fill: var(--ink); }
  .cbtn.main { background: var(--mark); border-color: var(--mark); color: var(--paper); }
  .cbtn.main:hover { background: var(--ink); border-color: var(--ink); }
  .contact .addr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; font-size: 0.9375rem; color: var(--body); }
  .contact .em { font-variant-ligatures: none; user-select: all; }
  .contact .copy { display: none; font: 500 0.875rem var(--sans); color: var(--ink); background: none; border: 0; padding: 2px 0; text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
  .contact .copy:hover { text-decoration-color: var(--mark); }
  .contact .copy[hidden] { display: none; }
  .js .contact .copy { display: inline; }
  .contact .copied { font-size: 0.875rem; color: var(--mark); font-weight: 500; }
  .contact .nda { grid-column: 1 / -1; margin: 16px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--muted); }
  .contact .fine { grid-column: 1 / -1; margin: -16px 0 0; font-size: 0.875rem; color: var(--muted); }

  /* ---------------- figures: real diagrams in the site's own ink ---------------- */
  .fx { margin: 44px 0 40px; }
  .fx .fb { position: relative; border: var(--frame); background: var(--paper); padding: 26px 16px 18px; }
  @media (min-width: 40.0625em) { .fx .fb { padding: 30px 28px 26px; } }
  .fx .fl { position: absolute; top: -11px; left: 18px; background: var(--paper); padding: 0 8px; font-size: 0.8125rem; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
  .fx figcaption { margin: 12px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); max-width: 64ch; }
  .fx .k { font-size: 0.8125rem; color: var(--muted); letter-spacing: .02em; }
  .fx .red { color: var(--mark); }
  .fx b { color: var(--ink); }

  /* where it started and where it showed */
  .flow { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .flow .node { border: var(--frame); padding: 16px 18px; }
  .flow .node.cause { border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); }
  .flow .node .t { display: block; font-weight: 700; color: var(--ink); font-size: 1.0625rem; margin: 4px 0; }
  .flow .node .d { display: block; font-size: 0.9375rem; color: var(--body); line-height: 1.45; }
  .flow .arr { display: flex; align-items: center; justify-content: center; padding: 6px 0; height: 36px; transform: rotate(90deg); }
  .flow .arr svg { width: 44px; height: 20px; }
  @media (min-width: 40.0625em) { .flow { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); } .flow .arr { padding: 0; height: auto; transform: none; } }

  /* numbered chain */
  .chain { list-style: none; margin: 0; padding: 0; }
  .chain li { position: relative; display: grid; grid-template-columns: 2.125rem 1fr; gap: 0 14px; padding: 0 0 18px; }
  .chain li:last-child { padding-bottom: 0; }
  .chain li:not(:last-child)::after { content: ""; position: absolute; left: .8125rem; top: 1.875rem; bottom: 2px; width: 1.5px; background: var(--ink); }
  .chain .n { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: var(--frame); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; color: var(--ink); background: var(--paper); position: relative; z-index: 1; }
  .chain .t { display: block; font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.3; padding-top: 3px; }
  .chain .d { display: block; font-size: 0.9375rem; color: var(--muted); margin-top: 2px; }
  .chain li.bad .n { border-color: var(--mark); color: var(--mark); }
  .chain li.bad:not(:last-child)::after { background: var(--mark); }
  .chain li.bad .t { color: var(--mark); }

  /* a table that cannot fit (very large text on a phone) scrolls inside its figure, not the page */
  .tw { overflow-x: auto; padding: 2px; margin: -2px; }   /* the padding keeps antialiased edges from being clipped */

  /* comparison tables: rows become cards on phones */
  .ft { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
  .ft th { text-align: left; font-size: 0.8125rem; font-weight: 500; color: var(--muted); padding: 0 14px 10px 0; border-bottom: var(--frame); vertical-align: bottom; }
  .ft td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--body); }
  .ft tr:last-child td { border-bottom: 0; }
  .ft td:first-child { font-weight: 700; color: var(--ink); width: 24%; }
  .ft tr.pick td:first-child { color: var(--mark); }
  .ft .yes { color: var(--ink); font-weight: 700; }
  .ft .no { color: var(--muted); }
  .ft .mark { display: inline-block; position: relative; margin-left: .45em; padding: 0 .15em; color: var(--mark); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
  .ft .mark svg { position: absolute; left: -.3em; top: -.25em; width: calc(100% + .6em); height: calc(100% + .5em); overflow: visible; pointer-events: none; }
  .ft.roles td { font-size: 0.875rem; }
  .ft.roles td:first-child { width: auto; }
  @media (max-width: 40em) {
    .ft.stack thead { display: none; }
    .ft.stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); }
    .ft.stack td { display: block; border: 0; padding: 2px 0; width: auto; }
    .ft.stack td[data-h]::before { content: attr(data-h) ": "; color: var(--muted); font-size: 0.8125rem; }
  }

  /* permission matrix */
  .mx td, .mx th { text-align: center; }
  .mx td:first-child, .mx th:first-child { text-align: left; width: auto; }
  .mx .y { color: var(--ink); font-weight: 700; }
  .mx .x { color: var(--faint); }
  @media (min-width: 26.3125em) { .mx .y::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin-right: 6px; vertical-align: 1px; } }
  @media (max-width: 26.25em) { .mx th, .mx td { padding-right: 8px; font-size: 0.875rem; } }
  /* on the narrowest phones the grid cannot fit, so each permission becomes a short card */
  @media (max-width: 22.4375em) {
    .mx thead { display: none; }
    .mx tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); }
    .mx tr:last-child { border-bottom: 0; }
    .mx td { display: inline-block; border: 0; padding: 0 12px 0 0; text-align: left; }
    .mx td:first-child { display: block; padding: 0 0 4px; }
    .mx td[data-h]::before { content: attr(data-h) ": "; color: var(--muted); font-weight: 400; }
  }

  /* big figures with sources */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: 22px 28px; }
  .stats .v { display: block; font-size: 1.875rem; line-height: 1; font-weight: 700; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }
  @media (min-width: 40.0625em) { .stats .v { font-size: 2.25rem; } }
  .stats .l { display: block; margin-top: 8px; font-size: 0.9375rem; color: var(--body); line-height: 1.4; }
  .stats .s { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--muted); }
  .statq { margin: 22px 0 0; border-top: 1px solid var(--rule); padding-top: 16px; font-size: 1.0625rem; color: var(--ink); line-height: 1.45; }
  .statq .k { display: block; margin-top: 4px; }

  /* horizontal bars with a dashed marker */
  .bars { display: grid; grid-template-columns: 7.375rem minmax(0, 1fr) 3.125rem; gap: 12px 10px; align-items: center; position: relative; }
  @media (min-width: 40.0625em) { .bars { grid-template-columns: 12.5rem minmax(0, 1fr) 4rem; gap: 14px 16px; } }
  .bars .bl { font-size: 0.9375rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
  .bars .bl span { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
  .bars .bl span.f { color: var(--mark); }
  .bars .tr { position: relative; height: 22px; }
  .bars .b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
  .bars .b.fail { background: var(--mark); }
  .bars .b.ghost { background: var(--ghost); }
  .bars .line { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 1.5px dashed var(--mark); }
  .bars .val { font-size: 1rem; font-weight: 700; color: var(--ink); text-align: right; }
  .bars .head { grid-column: 2; font-size: 0.8125rem; color: var(--mark); position: relative; height: 16px; }
  .bars .head span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

  /* form fields drawn as a pattern */
  .pair { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 40.0625em) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pane .k { display: block; margin-bottom: 10px; }
  .pane .lbl { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
  .inp { border: 1.5px solid var(--field); padding: 10px 12px; font-size: 1rem; color: var(--ink); background: var(--paper); min-height: 44px; display: flex; align-items: center; justify-content: flex-start; }
  .inp.sel { border-color: var(--ink); justify-content: space-between; }
  .inp .caret { display: inline-block; width: 1.5px; height: 1.125rem; background: var(--ink); margin-left: 1px; vertical-align: middle; }
  .opts { border: var(--frame); border-top: 0; margin: 0; padding: 6px; list-style: none; font-size: 0.9375rem; }
  .opts li { padding: 8px 10px; color: var(--body); }
  .opts li.on { background: var(--picked); color: var(--ink); font-weight: 700; display: flex; justify-content: space-between; }
  .opts li.add { margin-top: 6px; border-top: 1px dashed var(--soft); padding-top: 10px; color: var(--ink); }
  .pane .res { margin-top: 12px; font-size: 0.9375rem; line-height: 1.45; }
  /* a permission card and the button it replaces (drawings, not controls) */
  .ask { border: var(--frame); background: var(--paper); padding: 14px; font-size: 0.9375rem; color: var(--ink); }
  .ask b { display: block; margin-bottom: 12px; }
  .btns { display: flex; flex-wrap: wrap; gap: 8px; }
  .fbtn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--ink); font-size: 0.875rem; font-weight: 700; color: var(--ink); background: var(--paper); }
  .fbtn.on { background: var(--ink); color: var(--paper); }
  .mand { border: var(--frame); background: var(--paper); }
  .mand .h { display: block; padding: 12px 14px; font-weight: 700; color: var(--ink); border-bottom: 1.5px solid var(--ink); }
  .mand .r { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; line-height: 1.4; color: var(--body); }
  .mand .dt { font-weight: 700; color: var(--ink); }
  .mand .dt.red { color: var(--mark); }
  .mand .btns { padding: 12px 14px; }

  /* a decision record fading over time */
  .decay { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 40.0625em) { .decay { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .decay .col .k { display: block; margin-bottom: 8px; }
  .dcard { border: var(--frame); padding: 14px 14px 10px; font-size: 0.875rem; line-height: 1.4; margin: 0; }
  .dcard div { padding: 7px 0; border-top: 1px solid var(--rule); }
  .dcard div:first-child { border-top: 0; padding-top: 0; }
  .dcard dt { font-size: 0.8125rem; color: var(--muted); }
  .dcard dd { margin: 2px 0 0; color: var(--ink); }
  .dcard dd.gone { color: var(--mark); font-weight: 700; }
  .dcard dd.thin { color: var(--faint); font-style: italic; }

  /* a system sketch */
  .sys { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  @media (min-width: 40.0625em) { .sys { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); } }
  .sys .box { border: var(--frame); padding: 14px 16px; }
  .sys .box .t { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
  .sys .box ul { margin: 0; padding-left: 18px; font-size: 0.9375rem; color: var(--body); }
  .sys .box li { margin: 3px 0; }
  .sys .link { display: flex; align-items: center; justify-content: center; padding: 6px 0; height: 36px; transform: rotate(90deg); }
  @media (min-width: 40.0625em) { .sys .link { padding: 40px 0 0; height: auto; transform: none; } }
  .sys .link svg { width: 40px; height: 20px; }
  .sys .log { grid-column: 1 / -1; margin-top: 16px; border: var(--frame); padding: 12px 16px; font-size: 0.875rem; }
  .sys .log .t { font-weight: 700; color: var(--ink); }
  .sys .log ol { list-style: none; margin: 8px 0 0; padding: 0; }
  .sys .log li { display: grid; grid-template-columns: 6.875rem 1fr; gap: 12px; padding: 5px 0; border-top: 1px solid var(--rule); color: var(--body); }
  .sys .log li span:first-child { color: var(--muted); }

  /* market gap and two-lane journey */
  .spec { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
  @media (min-width: 40.0625em) { .spec { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); } }
  .spec .end { border: var(--frame); padding: 14px 16px; }
  .spec .end ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.9375rem; color: var(--body); }
  .spec .end li { margin: 3px 0; }
  .spec .gap { border: 2px dashed var(--mark); padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 4px; }
  .spec .gap b { font-size: 1.0625rem; color: var(--ink); }
  .spec .gap .d { font-size: 0.875rem; color: var(--muted); }
  .lanes { display: grid; gap: 18px; }
  .lanes ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .lanes li { border: var(--frame); padding: 8px 12px; font-size: 0.9375rem; color: var(--ink); }
  .lanes li.hot { border-color: var(--mark); color: var(--mark); font-weight: 700; box-shadow: inset 0 0 0 1px var(--mark); }

  /* real product screens, each opens full size */
  .shot { display: block; border: var(--frame); background: var(--paper); }
  a.shot { cursor: zoom-in; text-decoration: none; }
  a.shot:hover { box-shadow: 0 0 0 1.5px var(--ink); }
  .shot img { display: block; width: 100%; height: auto; }
  .shots { display: grid; gap: 16px; }
  .shots.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots.c3 { grid-template-columns: 1fr 1fr; }
  @media (min-width: 40.0625em) { .shots.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .shots figure { margin: 0; }
  .shots .cap { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 6px; }

  /* try-it figures */
  .try .tq { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); max-width: 56ch; }
  .try button { font: 700 0.9375rem var(--sans); color: var(--ink); background: var(--paper); border: var(--frame); padding: 10px 16px; cursor: pointer; min-height: 44px; }
  .try button:hover { background: var(--ink); color: var(--paper); }
  .try .nojs { margin: 0; font-size: 0.9375rem; color: var(--body); }
  .js .try .nojs { display: none; }
  html:not(.js) .tryform, html:not(.js) .recs, html:not(.js) .modes, html:not(.js) .tryrow2, html:not(.js) .try .thread { display: none; }
  .tryout { margin: 16px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink); max-width: 60ch; }
  .tryout:empty { margin: 0; }
  .tryout b.red { color: var(--mark); }
  .tryform label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
  .tryrow { display: flex; gap: 10px; max-width: 440px; }
  .tryrow input { flex: 1; min-width: 0; font: 400 1.0625rem var(--sans); color: var(--ink); border: 1.5px solid var(--field); border-radius: 0; padding: 10px 12px; background: var(--paper); }
  .tryrow input:focus { outline: 3px solid var(--mark); outline-offset: 1px; border-color: var(--ink); }
  .tryrow button[type=submit] { background: var(--ink); color: var(--paper); }
  .tryrow button[type=submit]:hover { background: var(--mark); border-color: var(--mark); }
  .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 0.875rem; color: var(--muted); }
  .chips button { font-weight: 500; font-size: 0.875rem; padding: 6px 10px; min-height: 36px; border-color: var(--chip); font-variant-ligatures: none; }
  .recs { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  @media (min-width: 40.0625em) { .recs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .rec2 { border: 1px solid var(--soft); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; font-size: 0.9375rem; }
  .rec2 b { font-size: 1.0625rem; color: var(--ink); }
  .rec2.new { border: 1.5px solid var(--mark); box-shadow: inset 0 0 0 1px var(--mark); }
  .rec2.new .k { color: var(--mark); }
  .rec2[hidden] { display: none; }
  .modes { display: flex; border: var(--frame); margin-bottom: 18px; }
  .modes .mode { flex: 1; border: 0; min-height: 40px; padding: 8px; font-weight: 500; }
  .modes .mode[aria-pressed=true] { background: var(--ink); color: var(--paper); font-weight: 700; }
  @media (min-width: 40.0625em) { .modes { display: inline-flex; } .modes .mode { flex: none; padding: 10px 16px; } }
  .thread { display: grid; gap: 10px; max-width: 640px; }
  .msg { border: 1px solid var(--soft); padding: 10px 14px; font-size: 0.9375rem; line-height: 1.5; color: var(--body); background: var(--paper); }
  .msg .who { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
  .msg.sam[hidden], .resolve[hidden], .stamp[hidden] { display: none; }
  .flag { position: relative; border: 1.5px dashed var(--mark); padding: 16px 12px 10px; margin: 16px 0 10px; font-size: 0.875rem; color: var(--ink); }
  .flag .fh { position: absolute; top: -10px; left: 10px; background: var(--paper); padding: 0 6px; font-size: 0.8125rem; font-weight: 700; color: var(--mark); }
  .flag.fading { opacity: 0; }
  .flag[hidden] { display: none; }
  @media (prefers-reduced-motion: no-preference) { .flag { transition: opacity .4s ease; } }
  .resolve { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .resolve button { font-size: 0.875rem; padding: 6px 12px; min-height: 38px; }
  .stamp { margin: 10px 0 0; font-size: 0.875rem; color: var(--ink); border-top: 1px solid var(--rule); padding-top: 8px; }
  .stamp b { color: var(--mark); }
  .tryrow2 { display: flex; gap: 10px; margin-top: 16px; }
}

/* ------------------------------------------------------------------ pages */
@layer pages {
  .page h1 { color: var(--ink); font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 24px; }
  .page h2 { color: var(--ink); font-size: 1.3125rem; font-weight: 700; letter-spacing: -.015em; margin: 36px 0 8px; }
  .page p, .page li { font-size: 1.125rem; line-height: 1.58; color: var(--body); }
  .page p a { text-underline-offset: 3px; }
  .page ol, .page ul { padding-left: 22px; }
  .page .cvask { margin: 28px 0 12px; }
  .page .cbtn { display: inline-flex; }
  .page .when { color: var(--muted); font-size: 1.0625rem; margin: -10px 0 28px; }
  .page figure img { width: 100%; }
  .page .src { font-size: 0.875rem; color: var(--muted); }
  .page .say { margin: 32px 0 8px; }
  .page .say::before { font-size: 3.5rem; top: -8px; }
  .page .say p { font-size: 1.25rem; line-height: 1.45; }   /* the quote keeps its own measure inside page text */
  .nf .badpath { font-weight: 700; color: var(--ink); text-decoration: underline wavy var(--mark); text-decoration-thickness: 1.5px; text-underline-offset: 6px; overflow-wrap: anywhere; }
  .nf .nflinks { padding-left: 22px; }
  .nf .nflinks li { margin: 0 0 8px; }
  .page .portrait { display: block; width: 136px; height: 136px; object-fit: cover; border: var(--frame); margin: 0 0 24px; }

}

/* ------------------------------------------------------------------ touch screens
   Every control gets a tap area of at least 44 x 44px. An invisible hit area does it where the
   control should look the same; spacing opens up only where two hit areas would otherwise overlap.
   Desktop, with a mouse, is untouched. */
@layer touch {
  @media (pointer: coarse) {
    .site .name, .site nav a, .heroA .l a, .ex button, .chips button, .modes .mode, .resolve button,
    .contact .copy, .cshead .back a, .meta dd a, .trylink a, .ex .exlink a, .nf .nflinks a, .ft td a, .obx-head .back a, .obx-hook-next a, .obx-feedback a, .kbx-head .back a, .kbx-hook-next a, .kbx-feedback a, .kbp-head .back a { position: relative; }
    .site .name::after, .site nav a::after, .heroA .l a::after, .ex button::after, .chips button::after, .modes .mode::after,
    .resolve button::after, .contact .copy::after, .cshead .back a::after, .meta dd a::after, .trylink a::after, .ex .exlink a::after, .nf .nflinks a::after, .ft td a::after, .obx-head .back a::after, .obx-hook-next a::after, .obx-feedback a::after, .kbx-head .back a::after, .kbx-hook-next a::after, .kbx-feedback a::after, .kbp-head .back a::after {
      content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
    }
    /* hit areas need a pixel or two of slack, because browsers round them to whole pixels */
    .chips { row-gap: 10px; }
    .nf .nflinks li { margin-bottom: 12px; }
    .ft td a, .nf .nflinks a { display: inline-block; }
    /* the contents list on touch tablets */
    .toc li { margin: 0 0 2px; }
    .toc a { min-height: 44px; align-items: center; }
  }
  /* room around short menu words like CV */
  @media (pointer: coarse) and (max-width: 30em) { .site nav { gap: 18px; } }
  @media (pointer: coarse) and (max-width: 22.4375em) { .site { column-gap: 6px; } }
}

/* ------------------------------------------------------------------ forced colours (Windows contrast themes) */
@layer touch {
  @media (forced-colors: active) {
    .bars .b { forced-color-adjust: none; background: CanvasText; }
    .bars .b.fail { background: Highlight; }
    .bars .b.ghost { background: GrayText; }
    .modes .mode[aria-pressed=true] { outline: 3px solid Highlight; outline-offset: -5px; }
    .chain li:not(:last-child)::after { forced-color-adjust: none; background: CanvasText; }
    .chain li.bad .n { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
    .chain li.bad .t { text-decoration: underline wavy; text-underline-offset: 3px; }
    .flow .node.cause { border: 4px double CanvasText; }
    .lanes li.hot { border: 4px double CanvasText; }
    .ring svg path, .ft .mark svg path { stroke: Highlight; }
  }
}

/* ------------------------------------------------------------------ print (a case study printed or saved as PDF) */
@layer print {
  @media print {
    .skip, header.site, .toc, .contact, .try, .trylink { display: none !important; }
    body { background: var(--paper); }
    .cs { display: block; padding-top: 0; }
    a { text-decoration: none; color: var(--ink); }
    figure, .glance { break-inside: avoid; }
  }
}

/* ------------------------------------------------------------------ On Behalf prototype
   A sandbox: one story first, then a board the visitor sorts, with every consequence shown beside it.
   The red pen marks only what someone would regret. */
@layer pages {
  .obx, .kbx, .kbp { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 40px var(--gutter) 80px; }
  .obx h2, .kbx h2, .kbp-side h2 { color: var(--ink); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.025em; line-height: 1.1; margin: 0 0 12px; }
  .obx h3, .kbx h3 { color: var(--ink); font-weight: 700; font-size: 1.0625rem; margin: 0; }
  .obx fieldset, .kbx fieldset, .kbp fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .obx legend, .kbx legend, .kbp legend { font-size: 0.875rem; font-weight: 700; color: var(--ink); padding: 0; margin-bottom: 8px; }
  .obx-head, .kbx-head, .kbp-head { max-width: 740px; }
  .obx-head .back, .kbx-head .back, .kbp-head .back { font-size: 0.875rem; margin: 0 0 24px; }
  .obx-head .back a, .kbx-head .back a, .kbp-head .back a { color: var(--ink); font-weight: 500; }
  .obx-head h1, .kbx-head h1, .kbp-head h1 { color: var(--ink); font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 16px; }
  .obx-head .lede, .kbx-head .lede, .kbp-head .lede { font-size: 1.25rem; line-height: 1.45; color: var(--ink); margin: 0 0 10px; }
  .obx-head .fine, .kbx-head .fine, .kbp-head .fine { font-size: 0.9375rem; color: var(--muted); margin: 0; }

  /* buttons and segmented choices */
  .obx-btn, .kbx-btn { min-height: 44px; padding: 0 18px; border: var(--frame); border-radius: 0; background: var(--paper); color: var(--ink); font: 700 0.9375rem var(--sans); cursor: pointer; }
  .obx-btn.on, .kbx-btn.on { background: var(--ink); color: var(--paper); }
  .obx-btn:hover, .kbx-btn:hover { border-color: var(--mark); }
  .obx-btn.on:hover, .kbx-btn.on:hover { background: var(--mark); }
  .obx-segs, .kbx-segs { display: flex; flex-wrap: wrap; gap: 8px; }
  .obx-seg, .kbx-seg { position: relative; display: inline-flex; }
  .obx-seg input, .kbx-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .obx-seg span, .kbx-seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: var(--frame); background: var(--paper); color: var(--ink); font-size: 0.9375rem; font-weight: 500; }
  .obx-seg input:checked + span, .kbx-seg input:checked + span { background: var(--ink); color: var(--paper); font-weight: 700; }
  .obx-seg input:focus-visible + span, .kbx-seg input:focus-visible + span { outline: 3px solid var(--mark); outline-offset: 2px; }
  .obx-seg:hover input:not(:checked) + span, .kbx-seg:hover input:not(:checked) + span { border-color: var(--mark); }

  /* the red pen ring, drawn around whatever someone would regret */
  .obx-ring, .kbx-ring { position: relative; display: inline-block; max-width: 100%; padding: 0 .2em; }
  .obx-ring svg, .kbx-ring svg { position: absolute; left: -.55em; top: -.55em; width: calc(100% + 1.1em); height: calc(100% + 1.1em); overflow: visible; pointer-events: none; }

  /* one tap: the story */
  .obx-hook { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; margin: 40px 0 0; padding: 28px 0 0; border-top: var(--frame); }
  .obx-hook-text p { font-size: 1.1875rem; line-height: 1.5; color: var(--body); margin: 0 0 18px; max-width: 30em; }
  .obx-hook-btns { display: flex; flex-wrap: wrap; gap: 10px; }
  .obx-hook .obx-hook-sum { font-size: 1.0625rem; color: var(--body); border-left: 3px solid var(--mark); padding: 2px 0 2px 14px; }
  .obx-hook-sum b { color: var(--mark); }
  .obx-hook-next a { font-weight: 700; text-decoration-color: var(--mark); text-decoration-thickness: 2px; }
  @media (min-width: 52em) { .obx-hook { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); } }

  /* a phone-shaped message thread */
  .obx-phone { border: 9px solid var(--ink); border-radius: 34px; background: var(--band); height: 30rem; overflow-y: auto; padding: 18px 14px; overscroll-behavior: contain; scrollbar-width: thin; }
  .obx-chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  #hook-chat:empty::before { content: "Press Play to watch the agent handle the sale."; display: block; padding: 40% 12px 0; text-align: center; font-size: 0.9375rem; color: var(--muted); }
  .obx-b.agent.harm { padding-top: 12px; padding-left: 16px; }
  .obx-b { max-width: 86%; background: var(--paper); border: 1.5px solid var(--soft); padding: 9px 12px; font-size: 0.9375rem; line-height: 1.45; color: var(--body); display: flex; flex-direction: column; }
  .obx-b-who { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
  .obx-b-who:empty { display: none; }
  .obx-b-ft { font-size: 0.8125rem; color: var(--muted); margin-top: 4px; }
  .obx-b-ft:empty { display: none; }
  .obx-b.them .obx-b-ft { order: -1; margin: 0 0 2px; }
  .obx-b.agent { align-self: flex-end; border-color: var(--ink); }
  .obx-b.agent.harm .obx-b-tx { color: var(--ink); font-weight: 500; }
  .obx-b.obx-sys { align-self: center; max-width: 100%; background: none; border: 0; padding: 0; font-size: 0.875rem; color: var(--muted); text-align: center; }
  .obx-b.obx-sys.harm { color: var(--mark); font-weight: 700; }
  .obx-b.obx-b-ev { align-self: stretch; max-width: 100%; background: none; border: 0; border-top: 1px dashed var(--muted); border-radius: 0; padding: 8px 0 0; font-size: 0.875rem; color: var(--ink); text-align: center; }
  .obx-b.obx-b-ev .obx-b-who { font-weight: 500; color: var(--muted); }
  .obx-b.obx-b-ev.harm .obx-b-ft { color: var(--mark); font-weight: 700; }
  .obx-typing { width: 4.25rem; height: 2.375rem; justify-content: center; }
  .obx-typing.agent { align-self: flex-end; }
  .obx-typing span { display: block; height: 8px; background: radial-gradient(circle, var(--muted) 3px, transparent 3.5px) 0 0 / 12px 8px repeat-x; width: 36px; }

  /* the sandbox */
  .obx-sand { margin: 72px 0 0; padding: 28px 0 0; border-top: var(--frame); }
  .obx-sand:focus { outline: none; }
  .obx-sand-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
  .obx-sand-top h2 { margin: 0; }
  .obx-how { font-size: 1.0625rem; color: var(--body); margin: 20px 0 16px; max-width: 40em; }
  .obx-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  @media (min-width: 48em) { .obx-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .obx-col { border: var(--frame); background: var(--paper); padding: 14px 14px 16px; min-height: 9rem; }
  .obx-col-never h3 { color: var(--mark); }
  .obx-col h3 { display: flex; align-items: center; gap: 8px; }
  .obx-col-d { font-size: 0.875rem; color: var(--muted); margin: 2px 0 12px; }
  .obx-col.over { background: var(--band); border-color: var(--mark); box-shadow: inset 0 0 0 1.5px var(--mark); }
  .obx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .obx-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 9px 12px; border: var(--frame); border-radius: 0; background: var(--paper); color: var(--ink); font: 500 0.9375rem/1.35 var(--sans); text-align: left; cursor: pointer; }
  .obx-chip:hover { border-color: var(--mark); }
  .obx-chip { -webkit-tap-highlight-color: transparent; }
  .obx-chip[aria-expanded="true"] { border-color: var(--mark); box-shadow: inset 0 0 0 1.5px var(--mark); }
  .obx-chip-u { font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
  .obx-chip-u.hard { color: var(--ink); font-weight: 700; }
  .obx-chip.dragging { z-index: 5; cursor: grabbing; border-color: var(--mark); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
  .obx-empty { font-size: 0.875rem; color: var(--muted); border: 1.5px dashed var(--soft); padding: 10px 12px; }
  .obx-menu { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
  .obx-menu-o { min-height: 36px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: 500 0.875rem var(--sans); cursor: pointer; }
  .obx-menu-o.cur { background: var(--ink); color: var(--paper); }
  .obx-menu-o:hover { border-color: var(--mark); }
  .obx .obx-ends { margin: 28px 0 0; }

  /* the two scores, side by side */
  .obx-score { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin: 36px 0 0; }
  .obx-sc h3 { font-size: 0.9375rem; margin: 0 0 8px; }
  .obx-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin: 0 0 10px; }
  .obx-m-l { font-size: 0.875rem; color: var(--body); }
  .obx-m-n { font-variant-numeric: tabular-nums; font-size: 1.375rem; font-weight: 700; color: var(--ink); line-height: 1; grid-row: 1 / 3; grid-column: 2; min-width: 1.4em; text-align: right; }
  .obx-m-bar { display: block; height: 8px; background: var(--grid); }
  .obx-m-fill { display: block; height: 100%; width: 0; background: var(--ink); }
  .obx-m.regret .obx-m-fill { background: var(--mark); }
  .obx-m.regret .obx-m-n { color: var(--mark); }
  .obx-goal { margin: 12px 0 0; padding: 12px 14px; border: 1.5px dashed var(--mark); font-size: 1rem; color: var(--body); }
  .obx-goal b { color: var(--mark); }
  .obx-goal.met { border: var(--frame); border-style: solid; }
  .obx-goal.met b { color: var(--ink); }

  /* what happens, step by step */
  .obx-cmp-wrap { margin: 28px 0 0; }
  .obx-cmp { list-style: none; margin: 0; padding: 0; border-top: var(--frame); }
  .obx-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
  .obx-ev { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1px; }
  .obx-t { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .obx-from { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
  .obx-say { font-size: 1rem; color: var(--body); line-height: 1.45; }
  .obx-e { font-size: 1rem; font-weight: 700; color: var(--ink); }
  .obx-c { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
  .obx-lab { font-size: 0.75rem; color: var(--muted); }
  .obx-short { font-size: 0.9375rem; line-height: 1.4; color: var(--ink); font-weight: 500; }
  .obx-c.harm .obx-short { margin: 10px 0 8px 10px; }
  .obx-meta { font-size: 0.8125rem; color: var(--muted); }
  .obx-harm { font-size: 0.8125rem; font-weight: 700; color: var(--mark); }
  .obx-dec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
  .obx-dec-q { flex-basis: 100%; font-size: 0.8125rem; color: var(--muted); }
  .obx-dec-b { min-height: 36px; min-width: 3.25rem; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: 700 0.875rem var(--sans); cursor: pointer; }
  .obx-dec-b[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .obx-dec-b:hover { border-color: var(--mark); }
  .obx-hd { display: none; }
  @media (min-width: 60em) {
    .obx-row { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
    .obx-ev { grid-column: auto; }
    .obx-hd { display: grid; padding: 10px 0; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
    .obx-hd span:first-child { font-weight: 400; color: var(--muted); }
    .obx-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
  .obx-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
  .obx-feedback { font-size: 0.9375rem; color: var(--muted); margin: 24px 0 0; }

  /* your version, as messages */
  .obx-dlg { width: min(34rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: var(--frame); border-radius: 0; background: var(--paper); color: var(--body); }
  .obx-dlg::backdrop { background: var(--scrim); }
  .obx-dlg-in { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
  .obx-dlg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font-weight: 700; color: var(--ink); }
  .obx-dlg .obx-phone { height: min(26rem, 52dvh); }
  /* the ask arrives over the phone screen as a notification, drawn with the On Behalf kit */
  .obx-device { position: relative; }
  .obx-dlg .obx-ask { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; }
  @media (prefers-reduced-motion: no-preference) { .obx-dlg .obx-ask.live { animation: obx-drop 220ms ease-out; } }
  @keyframes obx-drop { from { transform: translateY(-16px); opacity: 0; } }
  .obx-dlg .obx-phone:focus { outline: none; }
  .obx-dlg .obx-phone:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }
  .obx-rec h3 { margin: 0 0 4px; }
  .obx-rec-n { font-size: 0.875rem; color: var(--muted); margin: 0 0 8px; }
  .obx-rec ol { list-style: none; margin: 0 0 8px; padding: 0; }
  .obx-rec li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
  .obx-rec .tm { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); }
  .obx-rec .tx { color: var(--body); }
  .obx-rec .by { font-size: 0.8125rem; color: var(--muted); text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; align-self: start; }
  .obx-rec li.harm .tx { color: var(--mark); font-weight: 700; }

  .obx-sr, .kbx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .obx-noscript, .kbx-noscript { margin: 24px 0 0; padding: 12px 14px; border: var(--frame); }

  /* motion only answers what the visitor did */
  @media (prefers-reduced-motion: no-preference) {
    .obx-b { animation: obx-in .22s ease-out; }
    .obx-typing span { animation: obx-dots 1s ease-in-out infinite; }
    .obx-b .obx-ring path, .obx-row.chg .obx-ring path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pen .7s .15s ease-out forwards; }
    .obx-row.chg { animation: obx-chg 1.4s ease-out; }
    .obx-m-fill { transition: width .35s ease-out; }
    .obx-col, .obx-chip { transition: border-color .15s, background-color .15s; }
    @keyframes obx-in { from { opacity: 0; transform: translateY(6px); } }
    @keyframes obx-dots { 50% { opacity: .35; } }
    @keyframes obx-chg { from { background-color: var(--grid); } }
  }
}
@layer touch {
  @media (pointer: fine) { .obx-chip { cursor: grab; touch-action: none; } }
  @media (pointer: coarse) {
    .obx-seg span, .obx-menu-o, .obx-dec-b { min-height: 44px; }
    .obx-dec-b { min-width: 44px; }
    .obx-menu, .obx-dec { gap: 8px; }
  }
  @media (forced-colors: active) {
    .obx-seg input:checked + span, .obx-menu-o.cur, .obx-dec-b[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
    .obx-m-bar { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
    .obx-m-fill { forced-color-adjust: none; background: CanvasText; }
    .obx-m.regret .obx-m-fill { background: Highlight; }
    .obx-ring svg path { stroke: Highlight; }
    .obx-col.over { outline: 3px solid Highlight; }
    .obx-b.harm, .obx-rec li.harm { border-left: 4px double CanvasText; padding-left: 8px; }
  }
}

/* ------------------------------------------------------------------ Kerbside prototype page
   The app inside the phone has its own design system (design-systems/kerbside, built to /assets/kerbside.css).
   This block only places the phone and the notes beside it, in the portfolio's own style. */
@layer pages {
  .kbp-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 56px; margin: 36px 0 0; align-items: start; }
  @media (min-width: 62em) { .kbp-stage { grid-template-columns: auto minmax(0, 1fr); } }
  .kbp-phonecol { display: flex; flex-direction: column; align-items: center; min-width: 0; }
  .kbp-step { width: 100%; max-width: 410px; min-height: 3.2em; margin: 0 0 12px; font-size: 1rem; line-height: 1.45; color: var(--ink); font-weight: 500; }
  .kbp-device { width: 100%; max-width: 430px; }
  .kbp-device .kb-app { width: 100%; height: min(760px, calc(100svh - 120px)); min-height: 560px; border-radius: 28px; border: 1.5px solid var(--ink); }
  @media (min-width: 62em) {
    .kbp-device { width: 412px; max-width: none; padding: 11px; border-radius: 56px; background: var(--ink); }
    .kbp-device .kb-app { width: 390px; height: 780px; border-radius: 45px; border: 0; }
  }
  .kbp-side { max-width: 36rem; }
  .kbp-side h2 { font-size: 1.375rem; margin: 0 0 10px; }
  .kbp-switch { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 0.9375rem; color: var(--ink); cursor: pointer; margin-left: -11px; padding-left: 11px; }
  .kbp-switch input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex: none; }
  .kbp-list { margin: 12px 0 0; padding: 0 0 0 1.6em; }
  .kbp-list li { padding: 10px 0 12px; border-top: 1px solid var(--rule); }
  .kbp-list li::marker { font-weight: 700; color: var(--mark); }
  .kbp-list h3 { margin: 0 0 4px; font-size: 1rem; color: var(--ink); }
  .kbp-list p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--body); }
  .kbp-list .kbp-tag { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); }
  .kbp-ctl { margin: 32px 0 0; padding: 20px 0 0; border-top: var(--frame); }
  .kbp-ctl fieldset { margin: 4px 0 12px; }
  .kbp-switches { display: flex; flex-direction: column; gap: 2px; }
  .kbp-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
  .kbp ~ .contact, .kbp .kbx-feedback { margin-top: 32px; }
}
@layer touch {
  @media (pointer: coarse) { .kbx-seg span { min-height: 44px; } }
  @media (forced-colors: active) { .kbx-seg input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } }
}