/* akfsp — light draft.
 *
 * Related to the Cuchi app by its bones, not its mood: the same milk-grey
 * ground, the same white surfaces on it, the same charcoal ink, the same
 * Figtree. What is left behind is what made Cuchi playful — the pill radii,
 * the circles, the 800-weight display type and the lavender/peach accents.
 * Here the radius is 3px, the heaviest weight is 600, and the accent is one
 * fixed cool tone instead of a colour per item.
 *
 * Three palettes live side by side; pick one with ?p=ice | sage | petrol.
 */

/* ---- the spine, shared by all three palettes --------------------------- */

:root{
  --phi: 1.6180339887;

  --r:    3px;                          /* squares, chips, small buttons */
  --r-lg: 6px;                          /* cards and panels */

  --u: 1;                               /* drives every tile measure */
  --gap:   calc(6 * var(--u) * 1px);
  --reach: calc(14 * var(--u) * 1px);   /* mark to first tile */

  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --track: .42em;                       /* wordmark letter-spacing */

  --edge: clamp(20px, 5vw, 64px);
  --dust-gain: 2.4;                     /* grains need more body on a light ground */

  --z-dust: 2;
  --z-scrim: 30;
  --z-card: 40;
}

/* ---- ice: cool blue, the most reserved of the three -------------------- */
:root,
:root[data-palette="ice"]{
  --ground:    #F3F6F8;
  --surface:   #FFFFFF;
  --surface-2: #E9EFF4;
  --ink:       #1B242B;
  --ink-rgb:   27, 36, 43;
  --dim:       #64727C;
  --faint:     #A0ADB6;
  --line:      rgba(27,36,43,.10);
  --line-2:    rgba(27,36,43,.18);
  --tint:      #D6E6F0;
  --tint-soft: rgba(63,110,136,.10);
  --accent:    #3F6E88;
  --dust-a:    #8CB9D4;
  --dust-b:    #9BC9C4;
}

/* ---- sage: soft green, the warmest ------------------------------------- */
:root[data-palette="sage"]{
  --ground:    #F2F5F1;
  --surface:   #FFFFFF;
  --surface-2: #E9EFE6;
  --ink:       #1F2720;
  --ink-rgb:   31, 39, 32;
  --dim:       #68756A;
  --faint:     #A3AE9F;
  --line:      rgba(31,39,32,.10);
  --line-2:    rgba(31,39,32,.18);
  --tint:      #D9E7D3;
  --tint-soft: rgba(76,107,70,.10);
  --accent:    #4C6B46;
  --dust-a:    #9CC095;
  --dust-b:    #AFCFB4;
}

/* ---- petrol: muted teal, the most serious ------------------------------ */
:root[data-palette="petrol"]{
  --ground:    #EEF3F3;
  --surface:   #FFFFFF;
  --surface-2: #E2EAEA;
  --ink:       #14222A;
  --ink-rgb:   20, 34, 42;
  --dim:       #5C7076;
  --faint:     #99A9AE;
  --line:      rgba(20,34,42,.10);
  --line-2:    rgba(20,34,42,.18);
  --tint:      #CCE0DE;
  --tint-soft: rgba(46,94,99,.10);
  --accent:    #2E5E63;
  --dust-a:    #7FB3B0;
  --dust-b:    #93C3B4;
}

:root{
  --shadow:    0 6px 20px rgba(var(--ink-rgb), .07);
  --shadow-lg: 0 18px 50px rgba(var(--ink-rgb), .12);
}

/* ---- ground rules ------------------------------------------------------ */

*, *::before, *::after{ box-sizing: border-box; }

/* No focus rings anywhere. Keyboard focus is shown the same way the pointer
   shows it — the mark darkens, a square fills, a link changes colour — so
   nothing on this page ever draws a box around itself. */
:focus, :focus-visible{ outline: none; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.sr-only{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.wrap{ width: min(1040px, 100% - 2 * var(--edge)); margin-inline: auto; }

/* ---- the dust ---------------------------------------------------------- */

.dust{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-dust);
  pointer-events: none;
  transition: opacity 400ms ease;
}
body.past-hero .dust{ opacity: 0; }

/* ======================================================= hero =========== */

.hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
}

.node{
  position: absolute;
  left: calc(100% / var(--phi));
  top:  calc(100% - 100% / var(--phi));
  transform: translate(-50%, -50%);
}

.mark{
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 17px);
  line-height: 1;
  letter-spacing: var(--track);
  color: var(--ink);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* the trailing letter-space would push the optical centre off the golden
   point, so it is clawed back before the box is measured */
.mark-ink{
  display: block;
  margin-right: calc(var(--track) * -1);
  animation: breathe 5.2s ease-in-out infinite;
}
.node.open .mark-ink,
.mark:focus-visible .mark-ink{ animation: none; opacity: 1; }

@keyframes breathe{
  0%, 100%{ opacity: .55; }
  50%     { opacity: 1; }
}

/* ---- the two stacks ---------------------------------------------------- */

.stack{
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--gap);
  pointer-events: none;
  transform: translateX(-50%);
}
.stack-up  { bottom: calc(100% + var(--reach)); flex-direction: column-reverse; }
.stack-down{ top:    calc(100% + var(--reach)); flex-direction: column; }

.node.open .stack{ pointer-events: auto; }

.tile{
  --dx: 0px;
  --i: 0;
  position: relative;
  flex: none;
  width:  calc(var(--s) * var(--u) * 1px);
  height: calc(var(--s) * var(--u) * 1px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .04);

  opacity: 0;
  transform: translateX(calc(var(--dx) * .3)) scaleY(.03);
  /* closing: everything snaps shut together */
  transition: transform 90ms cubic-bezier(.4,0,1,1), opacity 80ms linear,
              border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  transition-delay: 0ms;
}
.stack-up   .tile{ transform-origin: bottom center; }
.stack-down .tile{ transform-origin: top center; }

.tile-live{ cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* opening: blooms outward from the mark, one tile after the next */
.node.open .tile{
  opacity: 1;
  transform: translateX(var(--dx)) scaleY(1);
  transition: transform 70ms cubic-bezier(.2,1.6,.3,1), opacity 60ms linear,
              border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  transition-delay: calc(var(--i) * 18ms);
}

.tile-live:hover,
.tile-live:focus-visible{
  background: var(--tint);
  border-color: transparent;
  color: var(--accent);
}

/* the square hands its place over to the card while that one grows */
.node.open .tile.handing-over{ opacity: 0; transition: opacity 90ms linear; }

.ico{ display: block; }
.ico-tb    { width: 16px; height: 16px; }
.ico-person{ width: 15px; height: 15px; }
.ico-at{
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
}

/* ---- the label beside the square --------------------------------------- */

.tag{
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1;
  white-space: nowrap;
  color: var(--dim);
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}
.tile.tag-left .tag{ left: auto; right: calc(100% + 12px); }

.tile-live:hover .tag,
.tile-live:focus-visible .tag{ opacity: 1; }

/* ---- the scroll cue ---------------------------------------------------- */

.cue{
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 5vh, 54px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--faint);
  transition: color 200ms ease;
}
.cue i{
  display: block;
  width: 1px;
  height: 26px;
  background: currentColor;
}
.cue:hover{ color: var(--accent); }

/* ======================================================= bands ========== */

.band{ padding-block: clamp(64px, 11vh, 132px); }
.band + .band{ border-top: 1px solid var(--line); }

.band-label{
  margin: 0 0 clamp(22px, 3vh, 34px);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--dim);
}

/* the golden section doing structural work: label left, matter right */
.split{ display: grid; grid-template-columns: 38.2% 1fr; gap: 0 clamp(20px, 3vw, 48px); }
.split .band-label{ margin-bottom: 0; }
.split-body{ max-width: 56ch; }

/* ---- services: one hairline grid, four surfaces ------------------------ */

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.cell{
  background: var(--surface);
  padding: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cell-cta{ background: var(--tint); }

.cell-title{
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}

.cell-body{
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--dim);
}

.cell-link{
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--accent);
  text-decoration: none;
}
.cell-link:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* ---- the statement ----------------------------------------------------- */

.statement{
  margin: 0 0 22px;
  font-size: clamp(27px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink);
}
.statement.small{ font-size: clamp(22px, 2.6vw, 31px); }

.prose{
  margin: 0 0 15px;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--dim);
}

.facts{
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 26px;
}
.facts li{ display: flex; flex-direction: column; gap: 4px; }
.facts strong{ font-size: 13.5px; font-weight: 500; color: var(--ink); }
.facts span{ font-size: 12.5px; line-height: 1.5; color: var(--dim); }

/* ---- selected work ----------------------------------------------------- */

.work-list{ display: flex; flex-direction: column; gap: 14px; }

.work-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.work-mark{
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--tint);
  border-radius: var(--r);
  color: var(--accent);
}
.work-mark svg{ width: 20px; height: 20px; }
.work-mark.is-image{ background: none; overflow: hidden; }
.work-mark.is-image img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.work-title{
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
.work-title span{
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--faint);
  vertical-align: middle;
}
.work-text .cell-body{ max-width: 56ch; }
.ico-cuchi{ width: 16px; height: 16px; }

.work-open{
  flex: none;
  padding: 9px 14px;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--accent);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.work-open:hover,
.work-open:focus-visible{ background: var(--tint); border-color: transparent; }

.aside{
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--faint);
}

.contact-line{ margin: 26px 0 0; font-size: 14px; }

/* ---- foot -------------------------------------------------------------- */

.foot{ border-top: 1px solid var(--line); padding-block: 26px 34px; }
.foot-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--faint);
}
.foot-links{ display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot-row a{ color: var(--faint); text-decoration: none; }
.foot-row a:hover{ color: var(--accent); }

/* ======================================================= the card ======= */

body.reading{ overflow: hidden; }
body.reading main{
  filter: blur(5px);
  opacity: .6;
  pointer-events: none;
  transition: filter 200ms ease, opacity 200ms ease;
}

.scrim{
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(var(--ink-rgb), .13);
  opacity: 0;
  transition: opacity 220ms ease;
}
.scrim.on{ opacity: 1; }

.card{
  position: fixed;
  z-index: var(--z-card);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transition: left 420ms cubic-bezier(.16,.84,.24,1),
              top 420ms cubic-bezier(.16,.84,.24,1),
              width 420ms cubic-bezier(.16,.84,.24,1),
              height 420ms cubic-bezier(.16,.84,.24,1);
}

/* laid out at its final size from the first frame, so the text never reflows
   while the box grows — the box simply stops clipping it */
.card-body{
  --pad: clamp(22px, 3.4vw, 40px);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cardw, 640px);
  height: var(--cardh, 640px);
  padding: var(--pad);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  display: flex;
  flex-direction: column;
  row-gap: clamp(11px, 2.9%, 22px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.card.open .card-body{ opacity: 1; transition-delay: 170ms; }

/* the close stays reachable while the card scrolls */
.card-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  background: var(--surface);
}
.card-head::before,
.card-head::after{
  content: "";
  position: absolute;
  left: calc(var(--pad) * -1);
  right: calc(var(--pad) * -1);
  pointer-events: none;
}
.card-head::before{
  bottom: 100%; height: var(--pad);
  background: var(--surface);
  z-index: -1;
}
.card-head::after{
  top: 100%; height: 16px;
  background: linear-gradient(var(--surface), rgba(255,255,255,0));
}

.eyebrow{
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--dim);
}

.card-close{
  margin: 0; padding: 0 2px;
  border: 0; background: none;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  color: var(--faint);
  cursor: pointer;
  transition: color 140ms ease;
}
.card-close:hover, .card-close:focus-visible{ color: var(--ink); }

.card-title{
  margin: 0;
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.14;
  color: var(--ink);
}

.card-lede{
  margin: -2px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dim);
}

/* ---- the picture rail inside a card ------------------------------------ */

.shots{
  position: relative;
  margin: 0;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
}

/* a scroll-snap rail: swipes on a phone, the arrows drive it on a desktop,
   and it still works with the script switched off */
.shots-rail{
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.shots-rail::-webkit-scrollbar{ display: none; }
.shots-rail img{
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  display: block;
  scroll-snap-align: center;
}

.shots-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  box-shadow: 0 2px 8px rgba(var(--ink-rgb), .18);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease, background-color 160ms ease;
}
.shots-prev{ left: 10px; }
.shots-next{ right: 10px; }
.shots:hover .shots-nav,
.shots:focus-within .shots-nav{ opacity: 1; }
.shots-nav:disabled{ opacity: 0 !important; pointer-events: none; }
.shots-nav:hover{ background: #fff; }

.shots-dots{
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.shots-dots b{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .3);
  transition: background-color 180ms ease;
}
.shots-dots b.on{ background: #fff; }

/* one picture needs no controls */
.shots-single .shots-nav,
.shots-single .shots-dots{ display: none; }

.hr{ height: 1px; background: var(--line); flex: none; }
.hr-foot{ margin-top: auto; }

.cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.col{ display: flex; flex-direction: column; gap: 8px; }

.list{
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.list-wide{ margin-top: 8px; }
.list-wide li{ color: var(--dim); }

.swatches{
  margin: 8px 0 0; padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.swatches li{ display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.swatches i{
  display: block;
  width: 24px; height: 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.swatches .open-chip{ background: none; border-style: dashed; }
.swatches span{ font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--faint); }

.card-foot{
  padding-top: 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
}

.mail-link{
  font-family: var(--mono);
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .04em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition: border-color 160ms ease;
}
.mail-link:hover, .mail-link:focus-visible{ border-color: var(--accent); }

.mail-small{ color: var(--dim); text-decoration: none; transition: color 160ms ease; }
.mail-small:hover, .mail-small:focus-visible{ color: var(--accent); }

.foot-mail{ color: var(--faint); text-decoration: none; }
.foot-mail:hover{ color: var(--accent); }

.soon-link{ color: var(--faint); position: relative; cursor: default; }
.soon-link em{
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: .22em;
  color: var(--line-2);
  margin-left: 10px;
  opacity: 0;
  transition: opacity 160ms ease;
}
.soon-link:hover em{ opacity: 1; }

.contact-line .soon-link{ font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }

.go-link{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.go-link:hover, .go-link:focus-visible{ border-color: var(--accent); }

/* ======================================================= legal pages ==== */

.doc{ padding-block: clamp(54px, 9vh, 96px) clamp(44px, 8vh, 84px); }
.doc-mark{
  display: inline-block;
  margin-bottom: clamp(30px, 5vh, 54px);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: var(--track);
  color: var(--ink);
  text-decoration: none;
}
.doc-mark span{ margin-right: calc(var(--track) * -1); display: inline-block; }

.doc h1{
  margin: 0 0 8px;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ink);
}
.doc .doc-sub{ margin: 0 0 clamp(28px, 4vh, 44px); font-size: 13px; color: var(--faint); }

.doc h2{
  margin: clamp(30px, 4vh, 44px) 0 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
.doc h3{ margin: 22px 0 6px; font-size: 13.5px; font-weight: 500; color: var(--ink); }

.doc p, .doc li{
  margin: 0 0 11px;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--dim);
}
.doc ul{ margin: 0 0 11px; padding-left: 18px; }
.doc li{ margin-bottom: 5px; }
.doc a{ color: var(--accent); text-underline-offset: 3px; }

.doc address{
  font-style: normal;
  margin: 0 0 11px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}

.doc-note{
  margin: 0 0 11px;
  padding: 16px 18px;
  max-width: 68ch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--dim);
}
.doc-note strong{ color: var(--ink); font-weight: 500; }

/* a placeholder that cannot be missed before this goes live */
.todo{
  background: var(--tint);
  border-radius: var(--r);
  padding: 1px 6px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .88em;
}

/* ======================================================= small windows == */

@media (max-height: 720px){ :root{ --u: .84; } }
@media (max-width: 720px) { :root{ --u: .8; } }

@media (max-width: 760px){
  .split{ grid-template-columns: 1fr; }
  .split .band-label{ margin-bottom: 20px; }
  .work-list{ display: flex; flex-direction: column; gap: 14px; }

.work-row{ grid-template-columns: auto 1fr; }
  .work-open{ grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 640px){
  .cols{ grid-template-columns: 1fr; gap: 14px; }
  .card-body{ row-gap: 12px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .mark-ink{ animation: none; opacity: 1; }
  .tile,
  .node.open .tile{ transition: none; transition-delay: 0ms; }
  .card{ transition: none; }
  .card.open .card-body{ transition-delay: 0ms; }
}