/* =========================================================
   Satyam Saxena: portfolio
   All sizes derive from the 1440×1024 Figma frame via --u
   (1 design px), so proportions hold at every desktop size.
   ========================================================= */

:root {
  --ink: #141414;
  --ink-soft: #4a4a4a;
  --ink-faint: #8c8c8c;
  --accent: #ac7f5e;
  --paper: #fbfbfa;
  --card: #fff;
  --line: #2a2a2a;

  --u: min(calc(100vw / 1440), calc(100dvh / 1024), 1.35px);
  --mu: calc(var(--u) * 1.3);              /* the brewing corner is drawn 30% larger */

  --fs-name: calc(48 * var(--u));
  --fs-nav: calc(32 * var(--u));
  --fs-lede: calc(48 * var(--u));
  --lh-lede: 1.22;
  --fs-tab: calc(22 * var(--u));
  --fs-jam: calc(20 * var(--u));
  --fs-card: calc(17 * var(--u));

  --pad-x: calc(80 * var(--u));
  --pad-r: calc(65 * var(--u));
  --top: calc(40 * var(--u));

  --card-w: calc(252 * var(--u));
  --card-h: calc(334 * var(--u));
  --card-gap: calc(22 * var(--u));
  --rail-w: calc(940 * var(--u));

  --card-shadow: 0 1px 2px rgba(0,0,0,.07), -1px 4px 12px rgba(0,0,0,.08);
  --lift-shadow: 0 2px 4px rgba(0,0,0,.05), -4px 22px 48px rgba(0,0,0,.16);

  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .3);
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: "Amiri", "Iowan Old Style", Georgia, serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .38s ease;
}
body.is-leaving-page { opacity: 0; }

/* Paper: the texture spans the window's width and repeats down, at 35% */
.paper {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  pointer-events: none;
}
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/paper.jpg") center top / 100% auto repeat-y;
  opacity: .35;
}
@media (max-width: 900px) {
  .paper::before { background-image: url("assets/img/paper-sm.jpg"); }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.accent { color: var(--accent); }
em { font-style: italic; letter-spacing: -.005em; }

/* Underlined labels (tabs, links, "coffee not your jam?").
   Underline sits a fixed fraction of the type size below the baseline. */
.ul {
  position: relative;
  display: inline-block;
  padding-bottom: .34em;
  line-height: 1;
  letter-spacing: .012em;
  transition: color .3s ease;
}
.ul::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .9;
  transform-origin: left;
}
@media (hover: hover) {
  .ul:hover { color: var(--accent); }
  .ul:hover::after { animation: reline .6s var(--ease-out); }
}
@keyframes reline {
  0% { transform: scaleX(1); transform-origin: right; }
  45% { transform: scaleX(0); transform-origin: right; }
  46% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ---------------- Header ---------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--top) var(--pad-r) 0 var(--pad-x);
  z-index: 20;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.brand {
  font-size: var(--fs-name);
  line-height: 1;
  letter-spacing: -.008em;
  margin-left: -.02em;               /* optical: the S overhangs its box */
}

.nav {
  display: flex;
  gap: calc(47 * var(--u));
  font-size: var(--fs-nav);
  line-height: 1;
  letter-spacing: .004em;
}
.nav a {
  position: relative;
  transition: color .35s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -.24em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
@media (hover: hover) {
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.nav a.is-current { color: var(--accent); }

.menu-btn { display: none; }

/* ---------------- Pages ---------------- */

.stage { position: fixed; inset: 0; }

.page {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.page.is-active,
.page.is-leaving { visibility: visible; }
.page.is-active { pointer-events: auto; }

.inner {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: calc(150 * var(--u)) 0 calc(40 * var(--u)) var(--pad-x);
}
.inner::-webkit-scrollbar { display: none; }
.inner > * { flex-shrink: 0; }
@media (min-width: 761px) {
  #hello .inner { padding-bottom: calc(110 * var(--u)); }
  #reach-out .inner { padding-bottom: calc(300 * var(--u)); }
}

.lede {
  margin: 0;
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  letter-spacing: -.009em;
  word-spacing: -.01em;
  white-space: nowrap;
  font-variant-numeric: oldstyle-nums;
}
.lede p { margin: 0; }
.lede p + p { margin-top: calc(var(--fs-lede) * var(--lh-lede)); }

/* Scroll cue: a hairline with ink running down it */
.cue {
  position: relative;
  display: block;
  width: calc(36 * var(--u));
  height: calc(70 * var(--u));
  margin-top: calc(72 * var(--u));
  color: var(--ink);
}
.cue-line {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  overflow: hidden;
  background: rgba(20, 20, 20, .16);
  transition: background .3s ease;
}
.cue-line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: 42%;
  background: currentColor;
  animation: cue-down 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
.cue::after {                         /* arrow tip */
  content: "";
  position: absolute;
  left: calc(-3.5 * var(--u) + .5px);
  bottom: 1px;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: opacity .3s ease;
}
.cue-up .cue-line::after { animation-name: cue-up; }
.cue-up::after { bottom: auto; top: 1px; transform: rotate(-135deg); }
.carousel + .cue, .after-strip + .cue { margin-top: calc(40 * var(--u)); }
.after-strip { position: relative; z-index: 3; }
.cue-up { position: absolute; bottom: calc(92 * var(--u)); left: var(--pad-x); margin: 0; }
@media (hover: hover) {
  .cue:hover { color: var(--accent); }
  .cue:hover .cue-line { background: rgba(172, 127, 94, .35); }
  .cue:hover::after { opacity: 1; }
}
@keyframes cue-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(240%); } }
@keyframes cue-up { 0% { transform: translateY(240%); } 100% { transform: translateY(-100%); } }

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--u)) calc(40 * var(--u));
  margin-top: calc(22 * var(--u));
  font-size: var(--fs-tab);
}
.tabs button { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--accent); }

/* Footer links */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--u)) calc(36 * var(--u));
  margin-top: calc(46 * var(--u));
  font-size: var(--fs-tab);
}

.after-strip { margin-top: calc(6 * var(--u)); font-size: var(--fs-tab); }

/* ---------------- Polaroid cards ---------------- */

.card {
  position: relative;
  display: block;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  padding: 0;
  text-align: left;
  scroll-snap-align: start;
  background: var(--card);
  box-shadow: var(--card-shadow);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), translate .6s var(--ease-out), opacity .4s;
  cursor: default;
}
.card-img {
  position: absolute;
  left: calc(15 * var(--u));
  right: calc(14 * var(--u));
  top: calc(18 * var(--u));
  height: calc(226 * var(--u));
  overflow: hidden;
  background: #ebe9e4;
}
.card-img img, .card-img video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.card-foot {
  position: absolute;
  left: calc(15 * var(--u));
  right: calc(14 * var(--u));
  top: calc(260 * var(--u));
  bottom: calc(4 * var(--u));
  padding-top: calc(4 * var(--u));
  display: flex;
  align-items: flex-start;   /* captions start at the top of the strip, every card alike */
  gap: calc(10 * var(--u));
  min-width: 0;
}
.card-logo {
  flex: 0 0 auto;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  object-fit: contain;
}
.card-logo.is-mono, .ex-logo.is-mono {
  display: grid;
  place-items: center;
  border: 1px solid #d6d3cd;
  border-radius: 50%;
  font-size: calc(13 * var(--u));
  line-height: 1;
  color: var(--ink-soft);
  padding-top: .12em;
}
.card-title {
  position: relative;
  font-size: var(--fs-card);
  line-height: 1.2;
  letter-spacing: .004em;
  color: var(--ink);
  /* wraps instead of trailing off (room for three lines; most need two) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
  padding-bottom: .12em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .55s var(--ease-out), color .3s;
}
.card-caption {
  font-size: calc(15.5 * var(--u));
  line-height: 1.28;
  letter-spacing: .006em;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Interactive cards say so through motion, not a button */
.card.is-interactive { cursor: pointer; }
@media (hover: hover) {
  .card.is-interactive:hover {
    transform: translateY(calc(-8 * var(--u))) rotate(-.7deg);
    box-shadow: var(--lift-shadow);
  }
  .card.is-interactive:nth-child(even):hover { transform: translateY(calc(-8 * var(--u))) rotate(.7deg); }
  .card.is-interactive:hover .card-img img { transform: scale(1.045); }
  .card.is-interactive:hover .card-title { background-size: 100% 1px; color: var(--accent); }
}
.card.is-lifted { visibility: hidden; }

/* ---------------- Carousel ---------------- */

.carousel {
  /* the track is padded generously so a lifted card's shadow can fade out
     naturally instead of being clipped; negative margins cancel the padding */
  --sp-t: 44px; --sp-b: 76px; --sp-x: 56px;
  position: relative;
  width: calc(var(--rail-w) + var(--sp-x) - 12 * var(--u));
  max-width: calc(100vw - var(--pad-x) + var(--sp-x));
  margin: calc(48 * var(--u) - var(--sp-t)) 0 calc(-1 * var(--sp-b) + 22 * var(--u)) calc(-1 * var(--sp-x));
}
.tabs + .carousel { margin-top: calc(26 * var(--u) - var(--sp-t)); }

.track {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: var(--sp-t) calc(12 * var(--u)) var(--sp-b) var(--sp-x);
  scroll-padding-left: var(--sp-x);
  /* the far card sinks under the paper: a long, eased fade to nothing */
  --fr: calc(250 * var(--u));
  --fl: 0px;
  -webkit-mask-image: linear-gradient(to right,
    var(--l0) calc(var(--sp-x) - 40px), #000 calc(var(--sp-x) - 40px + var(--fl)),
    #000 calc(100% - var(--fr)),
    rgba(0,0,0,.82) calc(100% - var(--fr) * .78),
    rgba(0,0,0,.52) calc(100% - var(--fr) * .55),
    rgba(0,0,0,.22) calc(100% - var(--fr) * .3),
    rgba(0,0,0,.05) calc(100% - var(--fr) * .1),
    transparent 100%);
          mask-image: linear-gradient(to right,
    var(--l0) calc(var(--sp-x) - 40px), #000 calc(var(--sp-x) - 40px + var(--fl)),
    #000 calc(100% - var(--fr)),
    rgba(0,0,0,.82) calc(100% - var(--fr) * .78),
    rgba(0,0,0,.52) calc(100% - var(--fr) * .55),
    rgba(0,0,0,.22) calc(100% - var(--fr) * .3),
    rgba(0,0,0,.05) calc(100% - var(--fr) * .1),
    transparent 100%);
  transition: opacity .25s ease;
}
.track::-webkit-scrollbar { display: none; }
/* a little room after the last card, so its shadow fades out instead of being cut off */
.track::after { content: ""; flex: 0 0 calc(30 * var(--u)); margin-left: calc(-1 * var(--card-gap)); }
.carousel.at-end .track, .carousel.no-overflow .track { --fr: 0px; }
.carousel .track { --fl: 0px; --l0: #000; }
.carousel.scrolled .track { --fl: calc(110 * var(--u)); --l0: transparent; }
.carousel.dragging .track { cursor: grabbing; }
@media (hover: none) { .track { scroll-snap-type: x mandatory; } .card { scroll-snap-align: start; scroll-snap-stop: normal; } }   /* a flick glides past several cards, then settles on one */
.track.is-swapping { opacity: 0; }

/* Invisible edges: hover peeks the strip along, click moves one card */
.edge {
  position: absolute;
  top: var(--sp-t); bottom: var(--sp-b);
  z-index: 2;
  background: none;
}
.edge-next {
  right: 0;
  width: calc(190 * var(--u));
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M8 20h23M24 13l7 7-7 7' stroke='white' stroke-width='4'/><path d='M8 20h23M24 13l7 7-7 7' stroke='%23141414' stroke-width='1.3'/></g></svg>") 20 20, e-resize;
}
.edge-prev {
  left: calc(var(--sp-x) - 30px);
  width: calc(80 * var(--u));
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M32 20H9M16 13l-7 7 7 7' stroke='white' stroke-width='4'/><path d='M32 20H9M16 13l-7 7 7 7' stroke='%23141414' stroke-width='1.3'/></g></svg>") 20 20, w-resize;
  display: none;
}
.carousel.scrolled .edge-prev { display: block; }
.carousel.at-end .edge-next, .carousel.no-overflow .edge-next { display: none; }
.carousel.peek-r .card { translate: calc(-16 * var(--u)) 0; }
.carousel.peek-l .card { translate: calc(16 * var(--u)) 0; }
@media (hover: none) { .edge { display: none !important; } }

/* ---------------- Expanded polaroid ---------------- */

.expand {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.expand[hidden] { display: none; }
.ex-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(250, 250, 248, .74);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
          backdrop-filter: blur(12px) saturate(1.05);
  opacity: 0;
  transition: opacity .5s ease;
}
.expand.is-open .ex-backdrop { opacity: 1; }
.ex-close {
  position: fixed;
  top: 20px; right: 22px;
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .4s ease .2s, color .3s;
}
.expand.is-open .ex-close { opacity: 1; }
.ex-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.ex-close:hover { color: var(--accent); }

.ex-frame {
  position: absolute;
  z-index: 2;
  transform-origin: 0 0;
  pointer-events: none;
}
.is-clone {
  position: relative !important;
  display: block;
  margin: 0 !important;
  translate: none !important;
  rotate: none !important;
  transform: none !important;
  visibility: visible !important;
}
.card.is-clone .card-title { background-size: 0 1px; color: var(--ink); }

.ex-note {
  position: absolute;
  z-index: 1;
  padding: 38px 34px 32px;
  background: #fffdf9;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), -2px 16px 40px rgba(0,0,0,.12);
  overflow: visible;
  transform-origin: 0 50%;
}
.ex-scroll { overflow: hidden; }
.ex-scroll.scrolls { overflow-y: auto; scrollbar-width: thin; }
.ex-note .tape {                       /* a strip of washi tape, overhanging the edge */
  position: absolute;
  top: -15px; left: 50%;
  width: 128px; height: 30px;
  margin-left: -64px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 100%) 0 0 / 7px 100%,
    rgba(214, 199, 166, .62);
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  transform: rotate(-3.5deg);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
}
.ex-co {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.ex-logo { width: 24px; height: 24px; object-fit: contain; }
.ex-logo.is-mono { font-size: 13px; letter-spacing: 0; }
.ex-title {
  margin: 0;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.ex-meta { margin: 8px 0 0; font-size: 16px; letter-spacing: .02em; color: var(--accent); }
.ex-body { margin-top: 20px; font-size: 18px; line-height: 1.58; letter-spacing: .003em; color: #2c2c2c; }
.ex-body p { margin: 0; }
.ex-body p + p { margin-top: .75em; }

/* ---------------- Page transitions ---------------- */

.page.is-entering .rv {
  animation: rv-in 950ms var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 1ms + 140ms);
}
.page.is-leaving .rv {
  animation: rv-out 420ms var(--ease-in) both;
  animation-delay: calc(var(--d, 0) * .3ms);
}
.split .w { display: inline-block; }
.page.is-entering .rv.w { animation-name: rv-in-word; animation-duration: 1000ms; }

@keyframes rv-in {
  from { opacity: 0; transform: translate3d(0, calc(22 * var(--u)), 0); }
  to { opacity: 1; transform: none; }
}
@keyframes rv-in-word {
  from { opacity: 0; transform: translate3d(0, .42em, 0); filter: blur(6px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rv-out {
  from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: translate3d(0, calc(-14 * var(--u)), 0); filter: blur(3px); }
}

.site-header, .coffee { transition: opacity 1.2s ease .1s; }
body.is-loading .site-header,
body.is-loading .coffee { opacity: 0; }
body.is-loading .page { visibility: hidden; }

/* ---------------- The brewing corner ---------------- */

.coffee {
  position: fixed;
  right: calc(104 * var(--u));
  bottom: calc(76 * var(--u));
  width: calc(240 * var(--mu));
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  --drop: 0;
}
.coffee[data-drink="tea"] { --drop: 105; }
.coffee[data-drink="matcha"] { --drop: 120; }
.machine {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 300;
  overflow: visible;
}
.coffee.is-ready .machine { cursor: pointer; }

.jam-wrap {
  position: relative;
  margin-top: calc(10 * var(--u));
  font-size: var(--fs-jam);
}
.jam { color: var(--ink); }
.jam-wrap.is-open .jam { color: var(--accent); }

/* drink picker: appears on hover, under the link */
.picker {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: calc(10 * var(--u));          /* hover bridge */
  transform: translate(-50%, -6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .35s var(--ease-out);
  z-index: 3;
}
.jam-wrap.is-open .picker { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.picker-card {
  position: relative;
  display: flex;
  padding: calc(4 * var(--u)) calc(6 * var(--u));
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.1);
  white-space: nowrap;
}
.picker-card::before {
  content: "";
  position: absolute;
  top: calc(-5 * var(--u)); left: 50%;
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  margin-left: calc(-5 * var(--u));
  background: #fff;
  transform: rotate(45deg);
}
.picker-card button {
  position: relative;
  padding: calc(8 * var(--u)) calc(13 * var(--u)) calc(7 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: 1;
  letter-spacing: .012em;
  color: var(--ink);
  transition: color .25s ease;
}
.picker-card button:hover:not(:disabled) { color: var(--accent); }
.picker-card button:disabled { color: #bdbdbd; cursor: default; }

.clock {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 13 * var(--mu) - var(--drop) * var(--mu) * .94);
  width: calc(44 * var(--u));
  margin-left: calc(-26 * var(--u));
  overflow: visible;
  transition: opacity .8s ease, transform .8s var(--ease-out), bottom .8s var(--ease-out);
}
.clock-face { fill: none; stroke: var(--ink); stroke-width: 1.8; }
/* the clock draws in like the illustrations: the face traces from 12 o'clock, then the hand appears */
.coffee .clock-face { stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 22px 22px; }
.coffee .clock-hand-m, .coffee .clock-pin { opacity: 0; }
.coffee .clock-pin { transform-origin: 22px 22px; }
.clock.is-drawn .clock-face { stroke-dashoffset: 0; }
.clock.is-drawn .clock-hand-m, .clock.is-drawn .clock-pin { opacity: 1; }
.clock-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--clock-off, 1);
  transform: rotate(-90deg);
  transform-origin: 22px 22px;
}
.clock line { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.clock-hand-m { transform-origin: 22px 22px; transform: rotate(var(--clock-rot, 0deg)); }
.coffee.is-ready .clock { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* line art */
.machine .ln { fill: none; stroke: var(--line); stroke-width: 1.05; stroke-linejoin: round; stroke-linecap: round; }
.machine .ln-thin { fill: none; stroke: #6a6a6a; stroke-width: .7; stroke-linejoin: round; stroke-linecap: round; }
.machine .ln-hair { fill: none; stroke: #8a8a8a; stroke-width: .45; stroke-linecap: round; }
.machine .face { fill: #f7f6f3; stroke: var(--line); stroke-width: 1.05; stroke-linejoin: round; }
.machine .face-side { fill: #eeede9; stroke: var(--line); stroke-width: 1.05; stroke-linejoin: round; }
.machine .glass { fill: rgba(255,255,255,.4); stroke: #555; stroke-width: .85; stroke-linejoin: round; }
.machine .water { fill: rgba(150, 180, 195, .16); stroke: #8b9ea8; stroke-width: .6; }
.machine .stream { fill: none; stroke: #5a3a26; stroke-linecap: round; stroke-width: 1.7; }
.machine .drop { fill: #5a3a26; }
.machine .led { fill: transparent; stroke: none; transition: fill .6s ease; }
.machine .led.on { fill: var(--accent); }
.machine .interior { fill: #e4e1db; stroke: none; }
.machine .liq-top, .machine .liq { stroke: none; }
.machine .bar-core { fill: none; stroke: #f7f6f3; stroke-linecap: round; }
.machine .flame { fill: #e08a3e; opacity: .9; }
.machine .bubble { fill: none; stroke: rgba(255,255,255,.75); stroke-width: .6; }
.machine .speck { stroke: none; }
.machine .mesh { fill: rgba(255,255,255,.55); }
.machine .stream-edge { fill: none; stroke: #a9a49a; stroke-width: 2.6; stroke-linecap: round; }
.machine .stream-milk { fill: none; stroke: #f8f5ee; stroke-width: 1.5; stroke-linecap: round; }
.machine .stream-water { fill: none; stroke: #eaf2f4; stroke-width: 1.4; stroke-linecap: round; }
.machine .whisk-handle { fill: #e9dcc0; stroke: var(--line); stroke-width: .8; }
.machine .whisk-tines { fill: #efe5cf; stroke: var(--line); stroke-width: .8; }
.machine .scoop { fill: none; stroke: #b59a6a; stroke-width: 2; stroke-linecap: round; }
.machine .scoop-end { fill: #b59a6a; }
.machine .powder { fill: #6f8c36; stroke: none; }

/* ---------- line art for the chai stove and matcha set ---------- */
.machine .face-dark { fill: #3a3430; stroke: var(--line); stroke-width: 1.05; stroke-linejoin: round; }
.machine .face-dark-top { fill: #4a423c; stroke: var(--line); stroke-width: 1.05; stroke-linejoin: round; }
.machine .ln-gold { fill: none; stroke: #c9a46a; stroke-width: .6; stroke-linecap: round; }
.machine .ln-grain { fill: none; stroke: #d8cfbe; stroke-width: .35; stroke-linecap: round; }
.machine .ln-thread { fill: none; stroke: #8a6a4a; stroke-width: .55; stroke-linecap: round; }
.machine .ln-shine { fill: none; stroke: rgba(255,255,255,.9); stroke-width: .9; stroke-linecap: round; }
.machine .dot { fill: #3a3a3a; }
.machine .dot-soft { fill: #a59a8a; }
.machine .face-wood { fill: #d9c4a3; stroke: var(--line); stroke-width: 1.05; stroke-linejoin: round; }
.machine .face-wood-top { fill: #e6d4b6; stroke: var(--line); stroke-width: 1.05; stroke-linejoin: round; }
.machine .flame-core { fill: #6f8fc9; opacity: .85; }
.machine .spoon-handle-f { fill: #e9e7e2; stroke: #6a6a6a; stroke-width: .7; stroke-linejoin: round; }
.machine .spoon-shine { fill: rgba(255,255,255,.85); }
.machine .scoop-f { fill: #d7c19a; stroke: #8a6e48; stroke-width: .6; stroke-linejoin: round; }
.machine .ln-slat { fill: none; stroke: #9c9790; stroke-width: .45; stroke-linecap: round; }
.machine .foam { fill: #d4e0a3; stroke: none; }

.machine .steam path { fill: none; stroke: #7d7d7d; stroke-width: 1.1; stroke-linecap: round; opacity: 0; }
.scene.is-steaming .steam path { animation: steam 3.2s ease-in-out infinite; }
.scene.is-steaming .steam path:nth-child(2) { animation-delay: 1.05s; }
.scene.is-steaming .steam path:nth-child(3) { animation-delay: 2.1s; }
@keyframes steam {
  0% { opacity: 0; stroke-dashoffset: .55; transform: translateY(4px); }
  25% { opacity: .85; }
  70% { opacity: .5; }
  100% { opacity: 0; stroke-dashoffset: -.9; transform: translateY(-10px); }
}
.machine .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.scene.is-drawn .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.55,.1,.3,1); }
.machine .fill-in { transition: fill-opacity 1s ease .9s; fill-opacity: 0; }
.scene.is-drawn .fill-in { fill-opacity: 1; }
.machine .scene { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.machine .scene.is-current { opacity: 1; visibility: visible; transition: opacity .7s ease .25s; }

/* the "ready" card */
.cta {
  position: absolute;
  bottom: calc(100% + 22 * var(--u) - var(--drop) * var(--mu));
  right: calc(-14 * var(--u));
  min-width: calc(232 * var(--u));
  padding: calc(20 * var(--u)) calc(26 * var(--u)) calc(18 * var(--u)) calc(24 * var(--u));
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), -1px 10px 30px rgba(0,0,0,.11);
  font-size: calc(20 * var(--u));
  line-height: 1.3;
  letter-spacing: .004em;
  opacity: 0;
  transform: translateY(calc(14 * var(--u))) scale(.98);
  transform-origin: bottom right;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), bottom .8s var(--ease-out);
}
.cta.is-shown { opacity: 1; transform: none; }
.cta::after {
  content: "";
  position: absolute;
  right: calc(140 * var(--u));
  bottom: calc(-7 * var(--u));
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,.04);
}
.cta p { margin: 0; }
.cta-title { color: var(--accent); font-size: calc(25 * var(--u)); line-height: 1.15; letter-spacing: -.004em; margin-bottom: calc(4 * var(--u)) !important; }
.cta-links { display: flex; gap: calc(24 * var(--u)); margin-top: calc(14 * var(--u)) !important; font-size: calc(19 * var(--u)); }
.cta-close {
  position: absolute;
  top: calc(8 * var(--u)); right: calc(10 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1;
  color: #a0a0a0;
  padding: 4px;
}
.cta-close:hover { color: var(--ink); }

/* ---------------- Message modal ---------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(250, 250, 248, .78);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .45s ease;
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }
.lb-close {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
  color: var(--ink-soft);
}
.modal-card {
  position: relative;
  width: min(92vw, 520px);
  background: #fff;
  padding: 38px 36px 30px;
  box-shadow: var(--lift-shadow);
  display: grid;
  gap: 18px;
  transform: translateY(18px);
  transition: transform .6s var(--ease-out);
}
.modal.is-open .modal-card { transform: none; }
.modal-title { margin: 0 0 4px; font-size: 30px; line-height: 1.1; color: var(--accent); }
.modal-card label { display: grid; gap: 4px; font-size: 17px; letter-spacing: .02em; color: var(--ink-soft); }
.modal-card input, .modal-card textarea {
  font: inherit;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid #c6c6c6;
  background: transparent;
  padding: 4px 0 6px;
  border-radius: 0;
  resize: vertical;
  transition: border-color .3s;
}
.modal-card input:focus, .modal-card textarea:focus { outline: none; border-color: var(--accent); }
.modal-foot { display: flex; align-items: center; gap: 18px; margin-top: 6px; font-size: 20px; }
.modal-status { font-size: 16px; color: var(--ink-soft); }

/* =========================================================
   Page tracker (home)
   ========================================================= */

.rail {
  position: fixed;
  left: calc(30 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  transition: opacity 1.2s ease .1s;
}
body.is-loading .rail { opacity: 0; }
.rail button {
  position: relative;
  display: block;
  width: calc(34 * var(--u));
  height: calc(22 * var(--u));
}
.rail button::before {                  /* the mark */
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: calc(12 * var(--u));
  height: 1px;
  background: var(--ink);
  opacity: .16;
  transition: width .6s var(--ease-out), opacity .4s ease, background-color .4s ease;
}
.rail button.is-seen::before { opacity: .5; }
.rail button.is-current::before { width: calc(30 * var(--u)); opacity: 1; background: var(--accent); }
.rail-label {
  position: absolute;
  left: calc(42 * var(--u));
  top: 50%;
  transform: translate(-6px, -50%);
  font-size: calc(16 * var(--u));
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink-soft);
  padding: 3px 7px 2px;
  background: rgba(251, 251, 250, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .4s var(--ease-out);
}
@media (hover: hover) {
  .rail:hover .rail-label { opacity: .9; transform: translate(0, -50%); }
  .rail button:hover::before { width: calc(22 * var(--u)); opacity: .9; }
  .rail button.is-current:hover::before { width: calc(30 * var(--u)); }
  .rail button:hover .rail-label { color: var(--accent); }
  .rail button.is-current .rail-label { color: var(--accent); }
}

/* honeypot + sent state */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.modal-card.is-sent .modal-status { color: var(--accent); }

/* =========================================================
   Art & writing page (art.html)
   ========================================================= */

html.doc { height: auto; overflow: auto; overscroll-behavior: auto; }
html.doc body { height: auto; overflow: visible; overscroll-behavior: auto; }
html.doc body { animation: page-in .55s ease both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
html.doc body.is-leaving-page { animation: none; opacity: 0; }
.doc .site-header { position: absolute; }
.art-page {
  padding: calc(150 * var(--u)) var(--pad-r) calc(120 * var(--u)) var(--pad-x);
  min-height: 100vh;
}

/* back arrow */
.back {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: var(--fs-tab);
  line-height: 1;
  letter-spacing: .012em;
  color: var(--ink);
  transition: color .3s ease;
}
.back svg { width: calc(34 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
@media (hover: hover) {
  .back:hover { color: var(--accent); }
  .back:hover svg { transform: translateX(calc(-6 * var(--u))); }
}

/* the bar stays on the paper: same base, same texture, fixed to the window,
   so it is seamless with the page behind it */
.art-bar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: baseline;
  gap: calc(56 * var(--u));
  margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-x));
  padding: calc(24 * var(--u)) var(--pad-r) calc(26 * var(--u)) var(--pad-x);
  isolation: isolate;
}
.art-bar::before, .art-bar::after {
  content: "";
  position: absolute;
  inset: 0 0 calc(-14 * var(--u)) 0;
  z-index: -1;
  -webkit-mask: linear-gradient(#000 calc(100% - 14 * var(--u)), transparent);
          mask: linear-gradient(#000 calc(100% - 14 * var(--u)), transparent);
}
.art-bar::before { background: var(--paper); }
.art-bar::after { background: url("assets/img/paper.jpg") center top / 100vw auto repeat-y fixed; opacity: .35; }
@media (max-width: 900px) { .art-bar::after { background-image: url("assets/img/paper-sm.jpg"); } }
.art-bar .tabs { margin: 0; }
.back { flex: 0 0 auto; }

.panel { padding-top: calc(36 * var(--u)); }
.panel[hidden] { display: none; }
.panel .in { animation: rv-in .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* photography + graphic: justified rows, every image keeps its shape */
.justified { width: 100%; }
.jrow { display: flex; }
.ph {
  position: relative;
  display: block;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  background: #ebe9e4;
  cursor: zoom-in;
  transition: box-shadow .55s var(--ease-out), transform .55s var(--ease-out);
}
.ph img, .ph video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) {
  .ph:hover { transform: translateY(-3px); box-shadow: var(--lift-shadow); z-index: 1; }
  .ph:hover img, .ph:hover video { transform: scale(1.03); }
}
.ph.is-lifted { visibility: hidden; }
.ph.is-clone { box-shadow: var(--lift-shadow); }

/* writing: a quiet index of pieces */
.posts { max-width: calc(920 * var(--u)); margin: 0; padding: 0; list-style: none; }
.post { border-top: 1px solid rgba(20,20,20,.12); }
.post:last-child { border-bottom: 1px solid rgba(20,20,20,.12); }
.post a {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) 1fr calc(200 * var(--u));
  grid-template-areas: "date text thumb";
  align-items: start;
  gap: calc(28 * var(--u));
  padding: calc(28 * var(--u)) 0;
  transition: padding .45s var(--ease-out);
}
.post-date { font-size: calc(17 * var(--u)); letter-spacing: .02em; color: var(--ink-faint); padding-top: .55em; }
.post-title { margin: 0; font-weight: 400; font-size: calc(32 * var(--u)); line-height: 1.15; letter-spacing: -.008em; transition: color .3s; }
.post-ex { margin: calc(8 * var(--u)) 0 0; font-size: calc(19 * var(--u)); line-height: 1.5; color: var(--ink-soft); }
.post-date { grid-area: date; }
.post-text { grid-area: text; }
.post-thumb { grid-area: thumb; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ebe9e4; box-shadow: var(--card-shadow); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) {
  .post a:hover .post-thumb img { transform: scale(1.04); }
  .post a:hover { padding-left: calc(10 * var(--u)); }
  .post a:hover .post-title { color: var(--accent); }
}

/* UX + film: straight prints with a title */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(330 * var(--u)), 1fr));
  gap: calc(44 * var(--u)) calc(40 * var(--u));
}
.tile {
  display: block;
  width: 100%;
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u));
  text-align: left;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.tile-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ebe9e4; }
.grid--film .tile-img { aspect-ratio: 16 / 9; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.tile-title { display: block; margin-top: calc(14 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.2; letter-spacing: -.003em; }
.tile-sub { display: block; margin-top: calc(4 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.4; color: var(--ink-soft); }
.play {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(58 * var(--u)); height: calc(58 * var(--u));
  margin: calc(-29 * var(--u)) 0 0 calc(-29 * var(--u));
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 50%;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: transform .5s var(--ease-out), background .3s;
}
.play::after {
  content: "";
  position: absolute;
  left: 54%; top: 50%;
  border-left: calc(13 * var(--u)) solid #fff;
  border-top: calc(8 * var(--u)) solid transparent;
  border-bottom: calc(8 * var(--u)) solid transparent;
  transform: translate(-50%, -50%);
}
@media (hover: hover) {
  .tile:hover { transform: translateY(calc(-6 * var(--u))); box-shadow: var(--lift-shadow); }
  .tile:hover .tile-img img { transform: scale(1.04); }
  .tile:hover .play { transform: scale(1.08); background: rgba(0,0,0,.28); }
  .tile:hover .tile-title { color: var(--accent); }
}

/* theatre */
.theatre { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 16px; opacity: 0; transition: opacity .45s ease; }
.theatre[hidden] { display: none; }
.theatre.is-open { opacity: 1; }
.th-backdrop { position: fixed; inset: 0; background: rgba(250,250,248,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.theatre .ex-close { opacity: 1; }
.th-frame {
  position: relative;
  width: min(88vw, calc(80dvh * 16 / 9), 1200px);
  aspect-ratio: 16 / 9;
  background: #111;
  box-shadow: var(--lift-shadow);
  transform: translateY(16px) scale(.98);
  transition: transform .7s cubic-bezier(.65,0,.25,1);
}
.theatre.is-open .th-frame { transform: none; }
.th-frame iframe, .th-frame video, .th-frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.th-title { position: relative; margin: 0; font-size: 20px; letter-spacing: .01em; color: var(--ink-soft); }

/* =========================================================
   Reader: articles + case studies (read.html)
   ========================================================= */

.reader { padding: calc(170 * var(--u)) var(--pad-x) calc(140 * var(--u)); }
.read-col { max-width: 700px; margin: 0 auto; }
.reader .back { margin-bottom: calc(44 * var(--u)); }
.read-date { margin: 0 0 12px; font-size: 16px; letter-spacing: .04em; color: var(--ink-faint); }
.read-title { margin: 0; font-weight: 400; font-size: clamp(34px, calc(54 * var(--u)), 60px); line-height: 1.1; letter-spacing: -.014em; text-wrap: balance; }
.read-lede { margin: 18px 0 0; font-size: 22px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.read-cover { margin: 40px 0 8px; }
.read-cover img, .case-hero img { display: block; width: 100%; height: auto; }
.facts { display: flex; flex-wrap: wrap; gap: 18px 48px; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(20,20,20,.12); }
.facts dt { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.facts dd { margin: 4px 0 0; font-size: 19px; }
.case-hero { max-width: 1100px; margin: 54px auto 20px; }

.prose { font-size: 21px; line-height: 1.66; letter-spacing: .002em; color: #222; text-wrap: pretty; hanging-punctuation: first; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2em; font-weight: 400; font-size: 32px; line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.prose h3 { margin-top: 1.6em; font-weight: 700; font-size: 21px; }
.prose figure { margin: 2em 0; }
.prose figure img { display: block; width: 100%; height: auto; }
.prose figcaption { margin-top: 10px; font-size: 16px; color: var(--ink-faint); text-align: center; }
.prose blockquote { margin: 1.8em 0; padding-left: 22px; border-left: 1px solid var(--accent); font-size: 27px; line-height: 1.38; color: var(--accent); }
.prose a.inline { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.read-foot { margin-top: 80px; padding-top: 26px; border-top: 1px solid rgba(20,20,20,.12); display: flex; justify-content: flex-end; }
.read-next { display: inline-flex; align-items: center; gap: 14px; font-size: 22px; transition: color .3s; }
.read-next svg { width: 34px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
@media (hover: hover) { .read-next:hover { color: var(--accent); } .read-next:hover svg { transform: translateX(6px); } }
.read-missing { font-size: 22px; color: var(--ink-faint); }

/* ---------------- Tablet & phone ---------------- */


@media (max-width: 760px) {
  :root {
    --u: calc(100vw / 430);
    --mu: 1px;
    --fs-name: 26px;
    --fs-lede: clamp(25px, 7.3vw, 32px);
    --lh-lede: 1.24;
    --fs-tab: 17px;
    --fs-jam: 13px;
    --fs-card: 14.5px;
    --pad-x: 22px;
    --pad-r: 16px;
    --top: max(18px, env(safe-area-inset-top));
    --card-w: 180px;
    --card-h: 256px;
    --card-gap: 14px;
  }

  .lede { white-space: normal; text-wrap: pretty; letter-spacing: -.006em; }
  .dk { display: none; }

  .site-header { align-items: center; padding-top: var(--top); }

  .menu-btn {
    display: grid;
    gap: 7px;
    width: 44px; height: 44px;
    margin-right: -8px;
    place-content: center;
    z-index: 2;
  }
  .menu-btn span {
    display: block;
    width: 26px; height: 1.4px;
    background: var(--ink);
    transition: transform .45s var(--ease-out);
  }
  .menu-open .menu-btn span:first-child { transform: translateY(4.2px) rotate(45deg); }
  .menu-open .menu-btn span:last-child { transform: translateY(-4.2px) rotate(-45deg); }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 0 var(--pad-x);
    font-size: 40px;
    letter-spacing: -.005em;
    background: rgba(251, 251, 250, .95);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s .4s;
  }
  .nav a { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s var(--ease-out), color .3s; align-self: flex-start; }
  .menu-open .nav { opacity: 1; visibility: visible; transition: opacity .4s ease; }
  .menu-open .nav a { opacity: 1; transform: none; }
  .menu-open .nav a:nth-child(2) { transition-delay: .05s; }
  .menu-open .nav a:nth-child(3) { transition-delay: .1s; }
  .menu-open .nav a:nth-child(4) { transition-delay: .15s; }
  .menu-open .nav a:nth-child(5) { transition-delay: .2s; }

  .inner { justify-content: flex-start; padding: 0 var(--pad-x) 0; }
  .inner::before, .inner::after { content: ""; flex: 1 0 0; }
  .inner::before { min-height: 96px; max-height: 22dvh; }
  .inner::after { min-height: 210px; }

  .lede p + p { margin-top: .9em; }
  .cue { width: 30px; height: 46px; margin-top: 34px; }
  .cue::after { width: 6px; height: 6px; left: -2.5px; }
  .carousel + .cue, .after-strip + .cue { margin-top: 22px; }
  .cue-up { position: static; margin-top: 42px; }

  .tabs { gap: 12px 22px; margin-top: 18px; }
  .links { gap: 16px 24px; margin-top: 30px; }

  .carousel {
    --sp-t: 30px; --sp-b: 54px; --sp-x: 40px;
    width: calc(100vw - var(--pad-x) + var(--sp-x));
    max-width: none;
    margin: calc(26px - var(--sp-t)) 0 calc(18px - var(--sp-b)) calc(-1 * var(--sp-x));
  }
  .tabs + .carousel { margin-top: calc(16px - var(--sp-t)); }
  .track { --fr: 70px; }
  .carousel.scrolled .track { --fl: 26px; }
  .card-img { left: 11px; right: 11px; top: 12px; height: 158px; }
  .card-foot { left: 11px; right: 11px; top: 180px; bottom: 2px; gap: 8px; }
  .card-title { -webkit-line-clamp: 4; }
  .card-logo { width: 28px; height: 28px; }
  .card-logo.is-mono { font-size: 11px; }
  .card-caption { font-size: 13px; }
  .after-strip { margin-top: 2px; }

  .coffee { width: 132px; right: 8px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .jam-wrap { margin-top: 2px; }
  .clock { width: 24px; margin-left: -14px; bottom: calc(100% + 4px - var(--drop) * 132px / 240 * .94); }

  .picker {
    top: auto; left: auto;
    right: calc(100% + 8px);
    bottom: -6px;
    padding: 0;
    transform: translateX(6px);
  }
  .jam-wrap.is-open .picker { transform: none; }
  .picker-card::before { display: none; }
  .picker-card button { font-size: 16px; padding: 10px 11px 9px; }

  .cta {
    right: 2px;
    bottom: calc(100% + 10px - var(--drop) * 132px / 240);
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 15px 36px 13px 17px;
    font-size: 16.5px;
  }
  .cta-title { font-size: 20px; }
  .cta-links { font-size: 15.5px; gap: 18px; margin-top: 9px !important; }
  .cta::after { right: 56px; width: 12px; height: 12px; bottom: -6px; }
  .cta-close { font-size: 22px; top: 6px; right: 8px; }

  .ex-note { padding: 30px 22px 24px; margin-bottom: 40px; }
  .ex-title { font-size: 27px; }
  .ex-body { font-size: 17px; }

  /* art page */
  .art-page { padding: 84px var(--pad-x) 80px; }
  .art-bar { gap: 20px; margin: 0 calc(-1 * var(--pad-x)); padding: 14px var(--pad-x) 14px; overflow-x: auto; scrollbar-width: none; }
  .art-bar .tabs { flex-wrap: nowrap; white-space: nowrap; gap: 22px; }
  .back { font-size: 16px; gap: 8px; }
  .back svg { width: 24px; height: 12px; }
  .panel { padding-top: 18px; }
  .post a { grid-template-columns: 1fr 96px; grid-template-areas: "date thumb" "text thumb"; gap: 6px 16px; padding: 20px 0; }
  .post-thumb { align-self: start; }
  .post-date { font-size: 14px; padding: 0; }
  .post-title { font-size: 25px; }
  .post-ex { font-size: 16.5px; }
  .grid { grid-template-columns: 1fr; gap: 26px; }
  .tile { padding: 10px 10px 14px; }
  .tile-title { font-size: 20px; margin-top: 10px; }
  .tile-sub { font-size: 15.5px; }

  /* tracker: a thin column on the far left */
  .rail { left: 4px; gap: 2px; }
  .rail button { width: 14px; height: 16px; }
  .rail button::before { width: 6px; }
  .rail button.is-current::before { width: 12px; }
  .rail-label { display: none; }

  /* reader */
  .reader { padding: 96px 22px 90px; }
  .reader .back { margin-bottom: 28px; }
  .prose { font-size: 18.5px; line-height: 1.62; }
  .prose h2 { font-size: 26px; }
  .prose blockquote { font-size: 22px; }
  .read-lede { font-size: 19px; }
  .facts { gap: 14px 28px; }
  .facts dd { font-size: 17px; }
  .read-next { font-size: 19px; }
  .th-title { font-size: 17px; }
}

/* Phones held sideways: keep the desktop composition, just smaller */
@media (max-height: 500px) and (min-width: 761px) {
  :root { --u: min(calc(100vw / 1440), calc(100dvh / 760)); }
  .inner { padding-top: calc(120 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
  }
  .page.is-entering .rv, .page.is-leaving .rv { animation: none !important; }
}

/* =========================================================
   Hit areas: every control is clickable across its whole
   rectangle plus a margin of air around it.
   ========================================================= */

/* the strip's shadow padding must never swallow clicks meant for the tabs above or the cue below */
.carousel, .track { pointer-events: none; }
.track > .card, .edge { pointer-events: auto; }
.tabs, .links, .after-strip, .cue { position: relative; z-index: 4; }

.ul::before,
.nav a::before,
.back::before,
.read-next::before,
.post a::before {
  content: "";
  position: absolute;
  inset: -10px -12px;
}
.back, .read-next { position: relative; }
.post a { position: relative; }
.post a::before { inset: 0 -12px; }
.picker-card button::before { content: ""; position: absolute; inset: -4px 0; }
.cue { width: calc(56 * var(--u)); }
.cue::before { content: ""; position: absolute; inset: -14px -14px -14px -18px; }
.cta-close { padding: 8px; margin: -4px; }
.menu-btn { width: 48px; height: 48px; }
@media (max-width: 760px) {
  .tabs .ul::before, .links .ul::before { inset: -9px -10px; }
  .cue { width: 48px; }
}
.modal-card label .opt { font-style: italic; letter-spacing: .01em; color: var(--ink-faint); }

/* tracker: sit closer to the window edge, well clear of the content */
.rail { left: calc(14 * var(--u)); }
.rail button { width: calc(26 * var(--u)); }
.rail button.is-current::before, .rail button.is-current:hover::before { width: calc(22 * var(--u)); }
.rail button::before { width: calc(10 * var(--u)); }
.rail-label { left: calc(32 * var(--u)); }
@media (max-width: 760px) {
  .rail { left: 2px; }
  .rail button { width: 12px; }
  .rail button::before { width: 5px; }
  .rail button.is-current::before { width: 9px; }
}

/* =========================================================
   Round 6: tracker, cue, second typeface
   ========================================================= */

/* tracker: just active and inactive */
.rail button::before,
.rail button.is-seen::before { opacity: .22; }
.rail button.is-current::before { opacity: 1; }
/* labels: only the one you point at, on a solid card so it reads over any text */
.rail:hover .rail-label { opacity: 0; transform: translate(-6px, -50%); }
.rail-label {
  font-family: var(--sans);
  font-size: calc(13 * var(--u));
  letter-spacing: .03em;
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(5 * var(--u));
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.09);
  z-index: 2;
}
@media (hover: hover) {
  .rail button:hover .rail-label { opacity: 1; transform: translate(0, -50%); }
  .rail button.is-current .rail-label { color: var(--accent); }
}

/* scroll cue: same hairline, shorter */
.cue { height: calc(46 * var(--u)); }
.cue-line::after { height: 46%; }
@media (max-width: 760px) { .cue { height: 34px; } }

/* second typeface: Jost for small, functional text.
   Amiri stays for the voice: big sentences, name, nav, tabs, links, titles. */
:root { --sans: "Jost", "Helvetica Neue", Arial, sans-serif; }
.card-title, .card-caption, .card-logo.is-mono, .ex-logo.is-mono,
.cta-body, .cta-links, .picker-card button,
.ex-co, .ex-meta,
.modal-card label, .modal-status, .modal-card input, .modal-card textarea,
.post-date, .tile-title, .tile-sub, .facts, .prose figcaption, .read-date, .th-title, .empty {
  font-family: var(--sans);
  font-feature-settings: "kern" 1;
}
.card-title { font-size: calc(15 * var(--u)); letter-spacing: .01em; padding-bottom: .18em; }
.card-caption { font-size: calc(13.5 * var(--u)); line-height: 1.35; letter-spacing: .01em; }
.card-logo.is-mono { font-size: calc(11 * var(--u)); padding-top: 0; }
.cta-body { font-size: calc(17 * var(--u)); letter-spacing: .005em; margin-top: calc(2 * var(--u)) !important; }
.cta-links { font-size: calc(15.5 * var(--u)); letter-spacing: .02em; }
.cta-links .ul { padding-bottom: .4em; }
.picker-card button { font-size: calc(16 * var(--u)); letter-spacing: .02em; }
.ex-co { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ex-meta { font-size: 14px; letter-spacing: .04em; }
.modal-card label { font-size: 14px; letter-spacing: .04em; }
.modal-card input, .modal-card textarea { font-size: 17px; letter-spacing: .005em; }
.modal-status { font-size: 14px; }
.post-date { font-size: calc(14 * var(--u)); letter-spacing: .06em; padding-top: .9em; }
.tile-title { font-size: calc(18 * var(--u)); letter-spacing: .005em; }
.tile-sub { font-size: calc(14.5 * var(--u)); letter-spacing: .005em; }
.read-date { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.facts dt { font-size: 12px; letter-spacing: .12em; }
.facts dd { font-size: 16px; }
.prose figcaption { font-size: 14px; letter-spacing: .02em; }
.th-title { font-size: 16px; letter-spacing: .04em; }
@media (max-width: 760px) {
  .card-title { font-size: 13.5px; }
  .card-caption { font-size: 12.5px; }
  .card-logo.is-mono { font-size: 10px; }
  .cta-body { font-size: 15px; }
  .cta-links { font-size: 14px; }
  .picker-card button { font-size: 14.5px; }
  .post-date { font-size: 12.5px; padding: 0; }
  .tile-title { font-size: 17px; }
  .tile-sub { font-size: 14px; }
}

/* last page: the up cue sits in the flow, right under the links */
.cue-up { position: relative; bottom: auto; left: auto; margin-top: calc(56 * var(--u)); }
@media (min-width: 761px) { #reach-out .inner { padding-bottom: calc(220 * var(--u)); } }
@media (max-width: 760px) { .cue-up { margin-top: 34px; } }

/* =========================================================
   Round 8: brewing details, rounded ready card + picker
   ========================================================= */

/* the ready card: rounded, text centred */
.cta { border-radius: calc(16 * var(--u)); text-align: center; padding-left: calc(34 * var(--u)); padding-right: calc(34 * var(--u)); }
.cta::after { right: 50%; margin-right: calc(-7 * var(--u)); border-radius: 2px; }
.cta-links { justify-content: center; }
.cta-close { top: calc(6 * var(--u)); right: calc(8 * var(--u)); }
.picker-card { border-radius: calc(12 * var(--u)); }
.picker-card::before { border-radius: 2px; }
.picker-card button { border-radius: calc(8 * var(--u)); }
@media (max-width: 760px) {
  .cta { border-radius: 14px; padding: 15px 30px 13px; }
  .cta::after { right: 50%; margin-right: -6px; }
  .picker-card { border-radius: 12px; }
}

/* drips + ripples */
.machine .drop { fill: #5a3a26; stroke: none; }
.machine .ripple { fill: none; stroke: #b88b63; stroke-width: .6; }

/* steam off the pan: bigger, slower, active only while it boils */
.machine .steam.on path { animation: steam 3.6s ease-in-out infinite; }
.machine .steam.on path:nth-child(2) { animation-delay: 1.2s; }
.machine .steam.on path:nth-child(3) { animation-delay: 2.4s; }
.machine .steam.big path { stroke-width: 1.2; stroke: #8a8a8a; }

/* strainer mesh + spoon */
.machine .mesh-basket { fill: url(#meshp); stroke: none; }
.machine .mesh-top { fill: url(#meshp); stroke: none; opacity: .7; }
.machine .spoon-handle { fill: none; stroke: #8a8a8a; stroke-width: 1.6; stroke-linecap: round; }
.machine .spoon-bowl { fill: #e9e7e2; stroke: #6a6a6a; stroke-width: .7; }
/* the cup's steam cue must not wake the pan's steam */
.scene.is-steaming .steam.big:not(.on) path { animation: none; }

/* =========================================================
   Round 9
   ========================================================= */

/* clock: one hand, one full turn per brew, same place for every drink */
.coffee .clock { bottom: calc(100% + 13 * var(--mu)); }
.clock-pin { fill: var(--ink); }
@media (max-width: 760px) { .coffee .clock { bottom: calc(100% + 4px); } }

/* ready card: centred on the illustration */
.coffee .cta {
  left: 50%;
  right: auto;
  transform: translate(-50%, calc(14 * var(--u))) scale(.98);
  transform-origin: bottom center;
}
.coffee .cta.is-shown { transform: translate(-50%, 0); }
@media (max-width: 760px) {
  /* the corner is at the screen's edge on phones: keep the card on screen */
  .coffee .cta { left: auto; right: 2px; transform: translateY(10px) scale(.98); transform-origin: bottom right; }
  .coffee .cta.is-shown { transform: none; }
  .coffee .cta::after { right: 56px; margin-right: 0; }
}

/* the drink named on the first page swaps with a quick fade */
.swap { display: inline-block; transition: opacity 1.1s cubic-bezier(.4,0,.2,1), filter 1.1s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.4,0,.2,1); }
.swap.is-swapping { opacity: 0; filter: blur(2px); transform: translateY(.06em); transition-duration: .9s; }
.swap { white-space: nowrap; }
.swap.is-italic { font-style: italic; }
.swap.is-sizing { transition: opacity 1.1s cubic-bezier(.4,0,.2,1), filter 1.1s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.4,0,.2,1), width 1.5s cubic-bezier(.45,0,.2,1) .35s; }
.swap.is-sizing.is-swapping { transition-duration: .9s, .9s, .9s, 1.5s; }


/* =========================================================
   Reach out: a polaroid of you, beside the links
   ========================================================= */
.reach-foot { position: relative; }
/* the polaroid leads the page, above the sentence */
.portrait { margin: 0 0 calc(38 * var(--u)) calc(4 * var(--u)); }
.portrait .card { rotate: -2deg; }
/* the headshot is taller than its square frame: crop from the top so there's room above the head */
.portrait .card-img img { object-position: 50% 9%; }
@media (hover: hover) {
  .portrait .card.is-interactive:hover { transform: translateY(calc(-8 * var(--u))) rotate(2deg); }
}
@media (min-width: 761px) { #reach-out .inner { padding-top: calc(118 * var(--u)); padding-bottom: calc(36 * var(--u)); } #reach-out .links { margin-top: calc(38 * var(--u)); } #reach-out .cue-up { margin-top: calc(44 * var(--u)); } }
@media (max-width: 760px) {
  .portrait { margin: 0 0 26px 2px; }
  .portrait .card { rotate: -1.5deg; }
}

/* =========================================================
   Replay: a small circular arrow beside the drink link,
   shown once the drink is ready
   ========================================================= */
.jam-row { position: relative; margin-top: calc(10 * var(--u)); }
.jam-row .jam-wrap { margin-top: 0; }
.replay {
  position: absolute;
  right: calc(100% + 10 * var(--u));
  top: 50%;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin-top: calc(-15 * var(--u));
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity .6s ease, transform .6s var(--ease-out), color .3s ease, visibility 0s .6s;
}
.replay::before { content: ""; position: absolute; inset: -8px; }   /* a generous hit area */
.replay svg {
  width: 72%; height: 72%;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .7s var(--ease-out);
}
.coffee.is-ready .replay { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .4s, transform .6s var(--ease-out) .4s, color .3s ease; }
@media (hover: hover) {
  .replay:hover { color: var(--accent); }
  .replay:hover svg { transform: rotate(-200deg); }
}
.replay.spin svg { animation: replay-spin .8s var(--ease-out); }
@keyframes replay-spin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@media (max-width: 760px) {
  .jam-row { margin-top: 2px; }
  .replay { width: 22px; height: 22px; right: calc(100% + 4px); margin-top: -13px; }
}

/* =========================================================
   Projects with several photos
   ========================================================= */
/* in the opened view: click either half, swipe, or tap a dot */
.ex-gal { position: absolute; z-index: 3; opacity: 0; transition: opacity .5s ease .1s; }
.ex-gal.on { opacity: 1; }
.ex-g-prev, .ex-g-next { position: absolute; top: 0; bottom: 0; width: 50%; background: none; }
.ex-g-prev {
  left: 0;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M32 20H9M16 13l-7 7 7 7' stroke='white' stroke-width='4'/><path d='M32 20H9M16 13l-7 7 7 7' stroke='%23141414' stroke-width='1.3'/></g></svg>") 20 20, w-resize;
}
.ex-g-next {
  right: 0;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M8 20h23M24 13l7 7-7 7' stroke='white' stroke-width='4'/><path d='M8 20h23M24 13l7 7-7 7' stroke='%23141414' stroke-width='1.3'/></g></svg>") 20 20, e-resize;
}
.ex-dots {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(20, 20, 20, .28);
  backdrop-filter: blur(6px);
}
.ex-dots button { position: relative; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .3s, transform .3s; }
.ex-dots button::before { content: ""; position: absolute; inset: -6px -4px; }
.ex-dots button[aria-selected="true"] { background: #fff; transform: scale(1.15); }
.card-img .ex-g-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Case studies (read.html?type=ux): the old site's structure
   (centred header, parts, numbered boxes, image + text rows)
   in this site's type and colours
   ========================================================= */
.case-col { max-width: 1040px; margin: 0 auto; }
.case-head { max-width: 780px; margin: 0 auto; text-align: center; }
.case .case-hero { margin: 0 auto 40px; max-width: 100%; }
.case .case-hero img { display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: min(520px, 56vh); object-fit: contain; }
.case-head .read-title { text-wrap: balance; }
.case-kicker, .case-date, .prose .kicker, .row-cap, .pill {
  font-family: var(--sans); font-feature-settings: "kern" 1;
}
.case-kicker { margin: 14px 0 0; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.case-head .read-lede { margin-top: 26px; text-align: left; }
.case-head .read-lede > * { margin: 0; }
.case-head .read-lede > * + * { margin-top: .8em; }
.case-head .read-lede:has(> :only-child) { text-align: center; }
.case-date { margin: 26px 0 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.link-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.case-head .link-row { margin-top: 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: 1px solid rgba(20,20,20,.75); border-radius: 999px;
  font-size: 14px; letter-spacing: .06em; color: var(--ink);
  transition: background .3s, color .3s, border-color .3s;
}
.pill svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
@media (hover: hover) { .pill:hover { background: var(--ink); border-color: var(--ink); color: #fff; } }

.case-prose { margin-top: 30px; }
/* text keeps a readable measure; pictures and layouts use the full width */
.case-prose > p, .case-prose > ul, .case-prose > ol, .case-prose > h3, .case-prose > blockquote,
.case-prose > .kicker { max-width: 760px; margin-left: auto; margin-right: auto; }
.case-prose h2, .case-prose h3, .case-prose .kicker { text-align: center; }
.case-prose h3 { font-weight: 400; font-size: 26px; line-height: 1.25; color: var(--ink); margin-top: 1.9em; }
.case-prose > h3 + * { margin-top: .9em; }
.prose .kicker { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-top: 2.4em; }
.part { margin-top: 110px !important; padding-top: 70px; border-top: 1px solid rgba(20,20,20,.12); text-align: center; }
.case-prose > .part:first-child { margin-top: 70px !important; }
.part .kicker { margin: 0; }
.part h2 { margin: 10px 0 0; font-size: 40px; }
.part + * { margin-top: 1.5em !important; }
.case-prose blockquote { border: 0; padding: 0; text-align: center; font-style: italic; font-size: 28px; }
.prose ul, .prose ol:not(.cards) { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.prose ul li::marker { color: var(--accent); }

.prose figure.sized { width: var(--w); margin-left: auto; margin-right: auto; }
.case-prose > figure { margin-top: 2.2em; margin-bottom: 2.2em; }
.prose figcaption a.inline { color: inherit; }
.fig-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 3.5%; margin: 2.4em 0 !important; }
.fig-cell { flex: 0 1 calc(var(--r) * 1%); min-width: 0; }
.fig-cell figure { margin: 0; }
.row-cap { flex: 1 0 100%; margin: 0; text-align: center; font-size: 14px; letter-spacing: .02em; color: var(--ink-faint); }
.fig-row + .fig-row { margin-top: -.6em !important; }

.cards { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 1.6em !important; }
.cards li { margin: 0; padding: 30px 34px 32px; border-radius: 6px; background: rgba(20,20,20,.035); box-shadow: inset 0 0 0 1px rgba(20,20,20,.05); font-size: 19px; line-height: 1.55; }
.cards li p { margin: 0; }
.cards li p + p { margin-top: .6em; }
.card-n { display: block; margin-bottom: 10px; font-family: inherit; font-size: 34px; line-height: 1; color: var(--accent); }

.cols { display: grid; grid-template-columns: var(--cols); gap: 5%; align-items: center; margin: 2.6em 0 !important; }
.cols:not(:has(> .col-img)) { align-items: start; }
.col > * { margin: 0; }
.col > * + * { margin-top: 1em; }
.col h3 { margin-top: 0; text-align: left; }
.col figure { margin: 0; }
.col figure.sized { width: auto; }
.col-img figure + figure { margin-top: 20px; }
.cols:has(> .col:nth-child(3)) { gap: 3%; font-size: 18px; line-height: 1.5; }
.cols:has(> .col:nth-child(3)) > .col:first-child:not(.col-img) { text-align: right; }

@media (max-width: 760px) {
  .case .case-hero img { max-height: 340px; }
  .part { margin-top: 70px !important; padding-top: 46px; }
  .part h2 { font-size: 30px; }
  .case-prose h3 { font-size: 22px; }
  .case-prose blockquote { font-size: 22px; }
  .prose figure.sized { width: min(100%, calc(var(--w) * 1.6)); }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .cards li { padding: 22px 22px 24px; font-size: 17px; }
  .cols { grid-template-columns: 1fr; gap: 22px; }
  .cols:has(> .col:nth-child(3)) > .col:first-child:not(.col-img) { text-align: left; }
  .col-img { max-width: 78%; margin: 0 auto; }
  .fig-row { gap: 18px 4%; }
  .fig-cell { flex-basis: calc(min(var(--r) * 2, 100) * 1%); }
}

/* ---------- home strips: per-kind polaroids ---------- */
/* photos and designs keep their own shape: the picture is a fixed height, the card follows */
.card--photo { --ar: 1; --pic-h: calc(226 * var(--u)); --edge: calc(15 * var(--u));
  width: calc(var(--pic-h) * var(--ar) + 2 * var(--edge)); height: calc(var(--pic-h) + 2 * var(--edge)); flex-basis: auto; }
/* no caption, so no chin: the same white border all the way round */
.card--photo .card-img { inset: var(--edge); height: auto; }
/* films: a 16:9 frame with a play button; tapping opens the film in a pop-up */
.card--film { width: calc(286 * var(--u)); flex-basis: auto; height: calc(250 * var(--u)); }
.card--film .card-img { height: calc(257 * var(--u) * 9 / 16); }
.card--film .card-foot { top: calc(18 * var(--u) + 257 * var(--u) * 9 / 16 + 12 * var(--u)); }
.card--film .play { width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u)); }
@media (hover: hover) { .card--film.is-interactive:hover .play { transform: scale(1.08); background: rgba(0,0,0,.28); } }
/* cities: bigger cards, room for the longest caption */
.card--city { width: calc(272 * var(--u)); flex-basis: auto; height: calc(376 * var(--u)); }
.card--city .card-img { height: calc(246 * var(--u)); }
.card--city .card-foot { top: calc(280 * var(--u)); }
.card--city .card-caption { -webkit-line-clamp: 5; }
@media (max-width: 760px) {
  .card--photo { --pic-h: 160px; --edge: 11px; }
  .card--film { width: 240px; height: 206px; }
  .card--film .card-img { height: calc(218px * 9 / 16); }
  .card--film .card-foot { top: calc(12px + 218px * 9 / 16 + 10px); }
  .card--city { width: 214px; height: 312px; }
  .card--city .card-img { height: 190px; }
  .card--city .card-foot { top: 214px; }
}

/* work cards: logo and title sit centred, top to bottom, in the white strip under the photo */
.card--work .card-foot { top: calc(244 * var(--u)); bottom: 0; padding: 0; align-items: center; }
@media (max-width: 760px) { .card--work .card-foot { top: 170px; bottom: 0; } }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  /* first screen: the greeting sits in the middle of the screen; the drink keeps its corner */
  #hello .inner::before { flex: 1 0 auto; height: 66px; min-height: 0; max-height: none; }
  #hello .inner::after { flex: 1 0 auto; height: 66px; min-height: 0; }
  /* on the other pages, reserve only what the corner drink needs (the scroll cue shares its row) */
  .inner::after { min-height: 150px; }
  /* if a page is taller than the screen, its content fades out under the name instead of overlapping it */
  .inner {
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--top) + 34px), #000 calc(var(--top) + 62px));
            mask-image: linear-gradient(to bottom, transparent calc(var(--top) + 34px), #000 calc(var(--top) + 62px));
  }
  /* slightly smaller city cards so the life page fits */
  .card--city { width: 186px; height: 262px; }
  .card--city .card-img { height: 156px; }
  .card--city .card-foot { top: 178px; }
}
/* touch screens: the strips must take the swipe themselves (on desktop they let clicks through to the tabs) */
@media (hover: none) {
  .carousel .track { pointer-events: auto; touch-action: pan-x; }   /* sideways swipes scroll the strip; up/down swipes go to the pager */
}

/* ---------- phones: the drink corner, compacted ---------- */
@media (max-width: 760px) {
  /* pages don't scroll inside themselves: an up/down swipe always turns the page */
  .inner { overflow-y: hidden; }
  /* the clock sits to the left of the machine, halfway up, instead of above it */
  .coffee .clock { left: auto; right: calc(100% + 4px); bottom: 52%; margin: 0; width: 26px; }
  /* "… is ready" opens beside the machine, pointing at it */
  .coffee .cta {
    left: auto;
    right: calc(100% + 12px);
    bottom: 34px;
    transform-origin: right center;
    transform: translateX(10px) scale(.98);
    max-width: calc(100vw - 132px - 40px);
    padding: 14px 34px 12px 18px;
  }
  .coffee .cta.is-shown { transform: none; }
  .coffee .cta::after { right: -6px; left: auto; bottom: auto; top: 50%; margin: -6px 0 0; }
  /* contact links cluster on the left, clear of the machine */
  #reach-out .links { max-width: calc(100% - 140px); gap: 14px 22px; }
}
/* phones with little visible height (Safari's bars showing): everything a step smaller */
@media (max-width: 760px) and (max-height: 760px) {
  :root { --fs-lede: clamp(23px, 6.6vw, 28px); --card-w: 164px; --card-h: 234px; }
  .card-img { height: 142px; }
  .card-foot { top: 162px; }
  .card--work .card-foot { top: 154px; }
  .card--photo { --pic-h: 142px; }
  .card--city { width: 170px; height: 240px; }
  .card--city .card-img { height: 140px; }
  .card--city .card-foot { top: 160px; }
  .portrait .card.card--photo { --pic-h: 120px; }
  .portrait { margin-bottom: 18px; }
  .inner::before { min-height: 70px; }
  .tabs + .carousel { margin-top: calc(10px - var(--sp-t)); }
}