/* ============================================================
   WORK — four objects you can touch (home-work.js, 2026-10-04)
   ============================================================
   The page's thesis is that the name is a window. The same idea, applied
   to the objects of the Work section: each tile is a lid, and under it is
   a window in the product's own colour with a small live piece of the
   product, driven by the pointer (or by the scroll on a phone).

   Everything here is additive. The rules that reserve room (the slot, the
   figure's box) apply always, so nothing moves when the script arrives.
   The rest only exists once the script has built it: with JS off or with
   reduced motion the row is the still tile it was.

   Inside a window every size is in em, and the em is a share of the
   window's own width (cqw), so the piece scales with its slot and no text
   is ever scaled by a transform. */

/* ---------- the slot ---------- */

@media (min-width: 901px) {
  /* 224 at the widest before; 296 now, with the tile at 78% of it (231),
     so the tile at rest is the size it was and the window has room. */
  .piece { grid-template-columns: minmax(0, 1fr) clamp(240px, 21vw, 296px); }
  .piece__icon[data-hw] { position: relative; display: grid; place-items: center; }
  .piece__icon[data-hw="crew"], .piece__icon[data-hw="farro"] { aspect-ratio: 1 / 1; }
  .piece__icon[data-hw] > img, .piece__icon[data-hw] > .hw-lid { width: 78%; }
}

@media (max-width: 900px) {
  /* On a phone the tile sat alone at the left of an empty row. The window
     takes that row: same height the tile needs, the full width of the
     column. Designed for the strip, not shrunk from the square. */
  .piece__icon[data-hw="crew"], .piece__icon[data-hw="farro"] {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 335 / 140;
    display: flex;
    align-items: center;
  }
  .piece__icon[data-hw="crew"] > img, .piece__icon[data-hw="crew"] > .hw-lid,
  .piece__icon[data-hw="farro"] > img, .piece__icon[data-hw="farro"] > .hw-lid { width: auto; height: 74.3%; aspect-ratio: 1 / 1; }
  .piece__icon[data-hw="door"] { position: relative; }
}

/* ---------- the lid ---------- */

.hw-lid {
  position: relative;
  z-index: 2;
  display: block;
  /* a button shrinks to its content, and its content is a lazy image: without a
     width of its own the tile had no height until the image arrived */
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transform-origin: 50% 50%;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.hw-lid > img { width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.hw-lid:focus-visible { outline: 2px solid var(--crew); outline-offset: -6px; border-radius: 26%; }

/* ---------- the window ---------- */

.hw-win {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: hidden;
  overflow: hidden;
  border-radius: 26px;
  container-type: inline-size;
  color: var(--ink);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.hw.is-open .hw-win { visibility: visible; }
.hw-win--crew { background: var(--crew); }
.hw-win--farro { background: var(--farro); }
.hw-in { position: absolute; inset: 0; font-size: 11.8px; font-size: 4cqw; line-height: 1.3; }
.hw-in p, .hw-in ul { margin: 0; padding: 0; list-style: none; }
.hw-in img { display: block; max-width: none; }

@media (max-width: 900px) {
  .hw-win { border-radius: 20px; }
  .hw-in { font-size: 11px; font-size: 3.3cqw; }
}

/* ---------- Farro: the week on top, the list it writes below ----------
   One yellow field, ink type. The list is not a white card on purpose: on
   a bone page a bone sheet would dissolve the bottom of the window. */

.hwf { display: flex; flex-direction: column; --rh: 1.42em; --ah: 1.8em; }
.hwf__top { flex: none; padding: 1.35em 1.5em 0.9em; }
.hwf__meal { height: 2.8em; padding-right: 3.4em; }
.hwf__meal b, .hwf__meal span { display: block; white-space: nowrap; font-size: 1.14em; line-height: 1.27; letter-spacing: -0.02em; font-weight: 800; }
.hwf__meal span.is-meta, .hwf__meal b.is-open { font-weight: 400; color: rgba(13, 13, 15, 0.62); letter-spacing: -0.005em; }
.hwf__week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 0.75em; }
.hwf__d { display: grid; justify-items: center; gap: 0.2em; }
.hwf__d i { font-style: normal; font-size: 0.66em; font-weight: 500; letter-spacing: 0.04em; color: rgba(13, 13, 15, 0.56); }
.hwf__d b, .hwf__sqn b { display: grid; place-items: center; height: 2.05em; font-size: 0.98em; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the day marker follows the pointer along the week */
.hwf__mk { position: absolute; left: 0; bottom: 0; width: calc(100% / 7); display: grid; place-items: center; font-size: 0.98em; }
.hwf__sq { position: relative; display: block; width: 2.05em; height: 2.05em; border-radius: 0.62em; background: var(--ink); overflow: hidden; }
.hwf__sqn { position: absolute; top: 0; display: grid; grid-template-columns: repeat(7, 1fr); color: var(--farro); }
.hwf__sqn b { font-size: 1em; }

.hwf__list { position: relative; flex: 1; min-height: 0; margin: 0 1.5em; border-top: 1px solid rgba(13, 13, 15, 0.2); }
/* labels and lines all start at the top of their column; the script stacks them */
.hwf__col { position: absolute; left: 0; top: 0.3em; width: 100%; }
.hwf__a, .hwf__r { position: absolute; left: 0; top: 0; width: 100%; }
.hwf__a { display: flex; align-items: flex-end; box-sizing: border-box; height: var(--ah); padding-bottom: 0.45em; overflow: hidden; font-family: var(--mono); font-size: 0.6em; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(13, 13, 15, 0.56); line-height: 1; }
.hwf__r { display: flex; align-items: center; gap: 0.6em; height: var(--rh); overflow: hidden; font-size: 0.98em; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; }
.hwf__r::before { content: ""; flex: none; width: 0.86em; height: 0.86em; box-sizing: border-box; border: 1.5px solid rgba(13, 13, 15, 0.5); border-radius: 0.24em; }
.hwf__r > span { flex: 1; }
/* a quantity that two recipes share rolls from one value to the next */
.hwf__q { flex: none; height: 1.3em; overflow: hidden; font-style: normal; font-size: 0.92em; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.hwf__roll { display: block; }
.hwf__roll b { display: block; height: 1.3em; line-height: 1.3; font-weight: 500; }

@media (max-width: 900px) {
  .hwf { --rh: 1.52em; --ah: 1.85em; }
  .hwf__top { display: flex; align-items: center; gap: 0.8em; padding: 0.8em 2.3em 0.65em 1.1em; }
  .hwf__meal { flex: 1; min-width: 0; height: auto; padding-right: 0; }
  .hwf__meal b, .hwf__meal span { font-size: 0.9em; line-height: 1.25; }
  .hwf__week { flex: none; width: 13.2em; margin-top: 0; }
  .hwf__d { gap: 0; }
  .hwf__d i { font-size: 0.58em; }
  .hwf__d b { font-size: 0.9em; height: 1.8em; }
  .hwf__mk { font-size: 0.9em; }
  .hwf__sq { width: 1.8em; height: 1.8em; border-radius: 0.55em; }
  .hwf__sqn b { height: 1.8em; }
  .hwf__list { margin: 0 1.1em; }
  .hwf__col { top: 0.05em; width: calc(50% - 0.8em); }
  .hwf__col + .hwf__col { left: calc(50% + 0.8em); }
  .hwf__r { font-size: 0.94em; gap: 0.5em; }
}

/* ---------- Crew: one home, four rooms, the walls follow you ---------- */

.hwc__cell { position: absolute; left: 0; top: 0; overflow: hidden; background: var(--bone); border-radius: 1.25em; padding: 0.85em 0.95em; box-sizing: border-box; }
.hwc__h { display: flex; align-items: center; gap: 0.45em; height: 1.6em; margin-bottom: 0.6em; white-space: nowrap; }
.hwc__h img { width: 1.5em; height: 1.5em; flex: none; }
.hwc__h b { font-size: 1em; font-weight: 700; letter-spacing: -0.015em; }
/* laid out once at the window's em, then scaled to its room by the script */
.hwc__b { width: 10.6em; transform-origin: 0 0; white-space: nowrap; line-height: 1.3; }
.hwc__b > p:first-child > b { font-size: 1.05em; }
.hwc__b b { font-weight: 600; letter-spacing: -0.01em; }
.hwc__b small { display: block; font-size: 0.84em; color: rgba(13, 13, 15, 0.56); }
.hwc__line { display: flex; align-items: center; gap: 0.5em; margin-top: 0.45em; }
.hwc__num { font-variant-numeric: tabular-nums; font-weight: 500; }

/* people */
.hwc__av { display: inline-flex; align-items: center; }
.hwc__av i { width: 1.55em; height: 1.55em; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 0.74em; line-height: 1; background: var(--bone-2); box-shadow: 0 0 0 0.1em var(--bone); }
.hwc__av i + i { margin-left: -0.3em; }
.hwc__av i.is-l { background: var(--ink); color: var(--bone); }
.hwc__av i.is-m { background: var(--crew); color: #05312B; }
.hwc__av i.is-j { background: rgba(40, 188, 169, 0.34); }
.hwc__av svg { width: 1.1em; height: 1.1em; margin: 0 0.35em; fill: none; stroke: var(--crew); stroke-width: 1.5; flex: none; }
.hwc__split { padding: 0.3em 0.4em; border-radius: 999px; background: rgba(40, 188, 169, 0.14); }
.hwc__split i { box-shadow: none; }
.hwc__owed { display: flex; align-items: center; gap: 0.4em; margin-top: 0.4em; font-size: 1.7em; letter-spacing: -0.02em; }
.hwc__owed img { width: 1.15em; height: 1.2em; }

/* a chore and its ring: --d is how far it is done (the ring fills, the title is struck through) */
.hwc__tk { --d: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.hwc__tk b { display: block; width: fit-content; font-size: 1.05em; color: color-mix(in srgb, rgba(13, 13, 15, 0.5) calc(var(--d) * 100%), var(--ink)); background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / calc(var(--d) * 100%) 1px; }
.hwc__ring { flex: none; box-sizing: border-box; width: 1.6em; height: 1.6em; border-radius: 50%; border: 1.5px solid var(--crew); background: color-mix(in srgb, var(--crew) calc(var(--d) * 100%), transparent); display: grid; place-items: center; }
.hwc__ring svg { width: 70%; height: 70%; fill: #05312B; opacity: var(--d); }
.hwc__who { display: flex; align-items: center; gap: 0.5em; margin-top: 0.6em; color: rgba(13, 13, 15, 0.56); font-size: 0.92em; }

/* a list */
.hwc__todo { margin-top: 0.3em; }
.hwc__todo li { display: flex; align-items: center; gap: 0.55em; height: 1.75em; }
.hwc__ck { position: relative; flex: none; width: 1.25em; height: 1.25em; }
.hwc__ck img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hwc__ck img + img { visibility: hidden; }
.hwc__todo li.is-done .hwc__ck img { visibility: hidden; }
.hwc__todo li.is-done .hwc__ck img + img { visibility: visible; }
.hwc__todo li.is-done span { text-decoration: line-through; color: rgba(13, 13, 15, 0.5); }

/* the house: the streak chip and the day */
.hwc__chip { display: inline-flex; align-items: center; gap: 0.45em; height: 2em; padding: 0 0.8em 0 0.6em; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--rule-strong); }
.hwc__flame { position: relative; display: block; width: 0.9em; height: 1.15em; }
.hwc__flame::before, .hwc__flame i { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 95%; border-radius: 52% 48% 42% 58% / 70% 72% 28% 30%; background: var(--crew); }
.hwc__flame i { left: 25%; width: 50%; height: 50%; background: var(--bone); }
.hwc__roll { display: inline-block; vertical-align: top; height: 1.3em; overflow: hidden; font-variant-numeric: tabular-nums; }
.hwc__roll > span { display: block; }
.hwc__roll b { display: block; height: 1.3em; line-height: 1.3; font-weight: 700; }
.hwc__today { margin-top: 0.35em; font-size: 1.5em; font-weight: 600; letter-spacing: -0.02em; }
.hwc__rem { display: flex; gap: 0.9em; margin-top: 0.35em; font-size: 0.9em; color: rgba(13, 13, 15, 0.56); }
/* Home's sentence in 1.0.28: what is left for you today, and what you owe, the amount in the app's red */
.hwc__owe { font-style: normal; font-weight: 600; color: #D41F1F; }

@media (max-width: 900px) {
  .hwc__cell { border-radius: 1.05em; padding: 0.7em 0.8em; }
  .hwc__h { margin-bottom: 0.45em; }
  /* the strip is short: each room keeps its three strongest lines */
  .hwc__b small, .hwc__rem { display: none; }
}

/* ---------- the next one: a lid that will not lift ---------- */

.piece__icon[data-hw="door"] .hw-lid { cursor: grab; }
.piece__icon[data-hw="door"] .hw-lid.is-held { cursor: grabbing; }
/* it gives a little, strains, drops, and shakes its head */
.hw-lid.is-no { animation: hw-no 0.92s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
.hw-lid.is-back { animation: hw-back 0.7s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
@keyframes hw-no {
  0% { transform: none; }
  16% { transform: translate(8.5%, -11.5%) scale(0.94); }
  21% { transform: translate(7.6%, -10.3%) scale(0.94); }
  26% { transform: translate(9%, -12.2%) scale(0.94); }
  31% { transform: translate(7.8%, -10.6%) scale(0.94); }
  38% { transform: translate(9.1%, -12.3%) scale(0.94); }
  48% { transform: none; }
  57% { transform: translateX(-6.6%); }
  66% { transform: translateX(5.4%); }
  75% { transform: translateX(-3.8%); }
  84% { transform: translateX(2.3%); }
  92% { transform: translateX(-1%); }
  100% { transform: none; }
}
@keyframes hw-back {
  0% { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
  24% { transform: none; }
  38% { transform: translateX(-6.6%); }
  52% { transform: translateX(5.4%); }
  66% { transform: translateX(-3.8%); }
  80% { transform: translateX(2.3%); }
  90% { transform: translateX(-1%); }
  100% { transform: none; }
}

/* ---------- Wavetype: the card runs ---------- */

/* room under the card for the control the script adds, kept always so the
   tray does not grow when it arrives */
.tool__shot[data-hw="wavetype"] { position: relative; padding-bottom: 46px; }
.hw-again {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 14px 8px 11px;
  gap: 7px;
  font-size: 10px;
  cursor: pointer;
}
.hw-again svg { width: 11px; height: 11px; }
.hw-again:focus-visible { outline: 2px solid var(--crew); outline-offset: 3px; }

.wcard.is-run .ww.is-h { visibility: hidden; }
.wcard.is-run .ww.is-g { color: #8F8F8B; }
.wcard.is-run s.ww:not(.is-x) { text-decoration: none; }
.wcard.is-run s.ww:not(.is-x):not(.is-g) { color: inherit; }
.wcard.is-run mark.ww:not(.is-m) { background: transparent; }
.wcard.is-rec .wcard__dot { animation: hw-blink 1.1s steps(1, end) infinite; }
@keyframes hw-blink { 0% { opacity: 1; } 60% { opacity: 0.25; } 100% { opacity: 1; } }

/* ---------- Mori: the call plays ---------- */

/* the app's own families (OFL, licences beside the files), only what the card sets */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/mori/hanken-grotesk-latin-400-normal-BG6hkEXj.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/mori/hanken-grotesk-latin-500-normal-DrDcrrxK.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/mori/hanken-grotesk-latin-600-normal-CIXX6EOa.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/mori/hanken-grotesk-latin-700-normal-CeQ8H3UY.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/mori/jetbrains-mono-latin-400-normal-V6pRDFza.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/mori/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2") format("woff2"); }

.tool__shot[data-hw="mori"] { position: relative; padding-bottom: 46px; }

/* recording: the two lanes are the whole card, and the tape is written as it is heard */
.mcard.is-run .mcard__lanes { transition: height 0.7s cubic-bezier(0.3, 0.9, 0.25, 1); }
.mcard.is-run .mcard__seg { display: flex; align-items: center; gap: 0; width: calc((var(--r) - var(--l)) * 1%); background: none; transition: opacity 0.4s ease, gap 0.6s ease; }
.mcard.is-run .mcard__seg--a { color: var(--ma); }
.mcard.is-run .mcard__seg--b { color: var(--mb); }
.mcard.is-run .mcard__seg b { flex: 1; height: 100%; background: currentColor; transform: scaleY(0); transition: height 0.7s cubic-bezier(0.3, 0.9, 0.25, 1), border-radius 0.5s ease, transform 0.32s cubic-bezier(0.3, 1.5, 0.5, 1); }
.mcard.is-run .mcard__seg b.is-on { transform: none; }
.mcard.is-run .mcard__seg b:first-child { border-radius: 3px 0 0 3px; }
.mcard.is-run .mcard__seg b:last-child { border-radius: 0 3px 3px 0; }
.mcard.is-rec .mcard__lanes { height: calc(var(--mh) - 106px); }
.mcard.is-rec .mcard__seg { gap: 2px; }
.mcard.is-rec .mcard__seg b { height: var(--h); border-radius: 2px; }
.mcard.is-run .mcard__who em { transition: opacity 0.3s ease; }
.mcard.is-rec .mcard__who em { opacity: 0; }
.mcard.is-rec .mcard__rec { display: flex; }
.mcard.is-rec .mcard__rec i { animation: hw-blink 1.1s steps(1, end) infinite; }
.mcard.is-run .mcard__head { opacity: 0; transition: opacity 0.25s ease; }
.mcard.is-rec .mcard__head, .mcard.is-seek .mcard__head { opacity: 1; }
.mcard.is-seek .mcard__head { transition: opacity 0.25s ease, left 0.8s cubic-bezier(0.3, 0.9, 0.25, 1); }

/* the mark listens: the arch of whoever is talking breathes, the other waits */
.mcard.is-rec .mcard__mark path { opacity: 0.3; transition: opacity 0.2s ease; }
.mcard.is-rec .mcard__mark path.is-on { opacity: 1; animation: mc-voice 0.42s ease-in-out infinite alternate; }
@keyframes mc-voice { from { transform: scaleY(1); } to { transform: scaleY(0.8); } }

/* what was said, what was kept, what was asked: one at a time, in the same place */
.mcard.is-run .mcard__p { visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 0.9, 0.25, 1), visibility 0s 0.3s; }
.mcard.is-run .mcard__p.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mcard.is-run .mcard__p.is-out { transform: translateY(-10px); }
.mcard.is-run .mcard__lines { transition: transform 0.5s cubic-bezier(0.3, 0.9, 0.25, 1); }
.mcard.is-run .mcard__p--said { -webkit-mask-image: linear-gradient(#0000, #000 22px); mask-image: linear-gradient(#0000, #000 22px); }
.mcard.is-run .mcard__line, .mcard.is-run .mk, .mcard.is-run .mcard__src { opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 0.9, 0.25, 1); }
.mcard.is-run .mcard__line.is-in, .mcard.is-run .mk.is-in, .mcard.is-run .mcard__src.is-in { opacity: 1; transform: none; }
.mcard.is-run .mcard__q { transition: opacity 0.2s ease; }
.mcard.is-run .mcard__q.is-h { opacity: 0; }
.mcard.is-run .mcard__q.is-typing span::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; animation: hw-blink 0.9s steps(1, end) infinite; }
.mcard.is-run .mcard__ans .ww { opacity: 0; transition: opacity 0.25s ease; }
.mcard.is-run .mcard__ans .ww.is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hw-lid.is-no, .hw-lid.is-back, .wcard.is-rec .wcard__dot { animation: none; }
}