/* =============================================================================
   STYLINE — the app (phones and small tablets)
   Everything here is under html.app, which the head of every page sets before
   the first paint when the screen is a phone's (assets/js/app.js builds the
   pages). The desktop site is untouched by it.
   ============================================================================= */

.tabbar { display: none; }

html.app {
  --abar: calc(56px + env(safe-area-inset-top));
  --atab: calc(88px + env(safe-area-inset-bottom));
  --ap: max(16px, env(safe-area-inset-left));
  --apr: max(16px, env(safe-area-inset-right));
  --ar: 18px;
  --amax: 720px;
  --copper: #c58a6e;
  --ring: conic-gradient(from 200deg, #c58a6e, #e7bf9c 22%, #9a4a5c 55%, #3e0421 78%, #c58a6e);
  --sky-a: #d9e4ec;
  --sky-b: #f3f3f0;
  --thumb: #ffffff;
  --glass: rgba(246, 246, 243, 0.72);
  --glass-line: rgba(21, 18, 15, 0.1);
  --glass-hi: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 12px 32px rgba(21, 18, 15, 0.16), 0 2px 8px rgba(21, 18, 15, 0.06);
  -webkit-text-size-adjust: 100%;
}
html.app[data-mode="dark"] {
  --sky-a: #1c2731;
  --sky-b: #15120f;
  --thumb: #2e2924;
  --glass: rgba(34, 30, 26, 0.74);
  --glass-line: rgba(243, 243, 240, 0.12);
  --glass-hi: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
}
html.app [hidden] { display: none !important; }
html.app body { -webkit-tap-highlight-color: transparent; }
html.app a, html.app button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* the desktop's furniture */
html.app .nav,
html.app .hdr .clock,
html.app .burger,
html.app .menu,
html.app .dock,
html.app .prog,
html.app .ftr,
html.app .chapters { display: none !important; }

/* the page is built before it shows */
html.app:not(.app-ready) main { opacity: 0; }
html.app main.amain {
  max-width: var(--amax);
  margin: 0 auto;
  padding-bottom: calc(var(--atab) + 10px);
  overflow-x: clip;
}
html.app.app--parametric main.amain { padding-bottom: 0; max-width: none; }

.aic { width: 22px; height: 22px; flex: 0 0 auto; overflow: visible; }

/* arriving in view */
html.app [data-in] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.9s var(--e-out), transform 1.1s var(--e-out);
  transition-delay: var(--d, 0s);
}
html.app [data-in].is-in { opacity: 1; transform: none; }

/* type */
html.app .ahead__t em,
html.app .atitle__h em,
html.app .asys__t em,
html.app .atile__t em,
html.app .arow__t em,
html.app .areel__t em,
html.app .areel__h em,
html.app .acover__t em,
html.app .askyhero__t em,
html.app .anext__t em,
html.app .acta__t em,
html.app .abar__title em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}

/* ------------------------------------------------------------- top bar */
html.app .hdr {
  height: var(--abar);
  padding: env(safe-area-inset-top) var(--apr) 0 var(--ap);
  gap: 8px;
  background: var(--bg);
  color: var(--fg);
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--e-out), border-color 0.35s ease, color 0.45s var(--e-out);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  html.app .hdr {
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
  }
}
html.app .hdr.is-scrolled { border-bottom-color: var(--rule-soft); }
html.app .hdr.is-hidden { transform: none; }
html.app .brand { gap: 9px; color: inherit; }
html.app .brand__mark { width: 27px; }
html.app .brand__type { font-size: 0.84rem; font-weight: 400; letter-spacing: 0.3em; }
html.app .brand__sub { font-size: 0.5rem; margin-top: 0.42em; }
html.app .hdr__right { gap: 8px; }
html.app .hdr .mode,
html.app .hdr .cvbtn {
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  color: var(--fg);
  box-shadow: inset 0 0.5px 0 var(--glass-hi), 0 0 0 0.5px var(--glass-line), 0 4px 14px rgba(21, 18, 15, 0.07);
  transition: transform 0.2s var(--e-out), background-color 0.45s ease, color 0.45s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.app .hdr .mode,
  html.app .hdr .cvbtn { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
}
html.app .hdr .mode:active,
html.app .hdr .cvbtn:active { transform: scale(0.9); }
html.app .hdr .mode [data-mode-label] { display: none; }
html.app .hdr .mode__disc { width: 15px; height: 15px; }
/* the CV: its arrow over the two letters, inside the circle */
html.app .hdr .cvbtn { flex-direction: column; gap: 2px; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1; }
html.app .hdr .cvbtn svg { width: 9px; height: 10px; margin: 0; }
html.app .hdr .mode:hover,
html.app .hdr .cvbtn:hover { color: var(--fg); }
html.app .hdr .cvbtn:hover svg { transform: none; }

/* on a project or a system */
html.app .abar__btn {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: inherit;
  transition: background-color 0.4s var(--e-out), transform 0.25s var(--e-out);
}
html.app .abar__btn .aic { width: 22px; height: 22px; }
html.app .abar__btn:active { transform: scale(0.88); }
html.app .abar__back { margin-left: -6px; }
html.app .abar--detail .brand__type { display: none; }
html.app .abar--detail .brand { margin-left: 2px; }
html.app .abar--detail .brand__mark { width: 24px; }
html.app .abar--detail .mode,
html.app .abar--detail .cvbtn { display: none; }
html.app .abar__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 2px 0 6px;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(0.9rem, 4.1vw, 1.08rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.35s ease, transform 0.5s var(--e-out);
}
html.app .abar--detail.is-solid .abar__title { opacity: 1; transform: none; }
/* over the cover: clear, light, the buttons on glass */
html.app .abar--detail:not(.is-solid) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  color: #f3f3f0;
}
html.app .abar--detail:not(.is-solid) .brand__mark rect { fill: #f3f3f0; }
html.app .abar--detail:not(.is-solid) .abar__btn {
  background: rgba(21, 18, 15, 0.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* a system opens in its sky: the bar stays dark on it */
html.app.app--study .abar--detail:not(.is-solid) { color: var(--fg); }
html.app.app--study .abar--detail:not(.is-solid) .brand__mark rect { fill: var(--fg); }
html.app.app--study .abar--detail:not(.is-solid) .abar__btn { background: rgba(243, 243, 240, 0.5); }
html.app.app--study[data-mode="dark"] .abar--detail:not(.is-solid) .abar__btn { background: rgba(21, 18, 15, 0.4); }

/* ------------------------------------------------------------- tab bar */
/* A floating pill of glass, after the new iOS, a lens under the tab you are
   on (app.js moves it: it stretches on its way to the next tab). */
html.app .tabbar {
  --tbbg: var(--bg);
  position: fixed;
  z-index: 7600;
  left: 50%;
  right: auto;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  width: min(calc(100% - 32px), 420px);
  height: 64px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-radius: 32px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: inset 0 0.5px 0 var(--glass-hi), 0 0 0 0.5px var(--glass-line), var(--glass-shadow);
  transform: translate3d(-50%, 0, 0);
  /* stays on screen through a transition (html.is-entering hides the body) */
  visibility: visible;
  transition: transform 0.6s var(--e-out), background-color 0.45s var(--e-out), color 0.45s var(--e-out), box-shadow 0.45s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.app .tabbar {
    background: var(--glass);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
  }
}
html.app .tabbar__lens {
  position: absolute;
  z-index: 0;
  left: 0; top: 6px;
  width: 20%;
  height: 52px;
  border-radius: 26px;
  background: rgba(21, 18, 15, 0.08);
  box-shadow: inset 0 0 0 0.5px rgba(21, 18, 15, 0.05);
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: transform 0.5s var(--e-out), width 0.5s var(--e-out), background-color 0.45s ease;
}
html.app[data-mode="dark"] .tabbar__lens { background: rgba(243, 243, 240, 0.12); box-shadow: inset 0 0 0 0.5px rgba(243, 243, 240, 0.08); }
html.app .tabbar__a {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 52px;
  border-radius: 26px;
  color: inherit;
  outline: none;
}
/* before the script has put the lens in, the lit tab carries its own */
html.app .tabbar:not(.has-lens) .tabbar__a.is-on { background: rgba(21, 18, 15, 0.08); }
/* a soft press under the finger */
html.app .tabbar__a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: currentColor;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s var(--e-out);
}
html.app .tabbar__a.is-press::after { opacity: 0.07; transform: scale(1); transition-duration: 0.12s, 0.18s; }
html.app .tabbar__a:focus-visible::after { opacity: 1; background: transparent; transform: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
html.app .tabbar__i { width: 27px; height: 27px; overflow: visible; }
html.app .tabbar__i .o { fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linejoin: round; stroke-linecap: round; }
html.app .tabbar__i .f { fill: currentColor; opacity: 0; transition: opacity 0.3s ease; }
html.app .tabbar__i .k { fill: none; stroke: var(--tbbg); stroke-width: 1.55; stroke-linejoin: round; stroke-linecap: round; }
html.app .tabbar__a.is-on .tabbar__i .f { opacity: 1; }
html.app .tabbar__av {
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule);
  transition: box-shadow 0.3s ease;
}
html.app .tabbar__av img { width: 100%; height: 100%; object-fit: cover; }
html.app .tabbar__a.is-on .tabbar__av { box-shadow: 0 0 0 2px var(--tbbg), 0 0 0 3.5px currentColor; }
/* the press, the release, the arrival and the leaving */
html.app .tabbar__i,
html.app .tabbar__av { transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.3s ease; }
html.app .tabbar__a.is-press .tabbar__i,
html.app .tabbar__a.is-press .tabbar__av { transform: scale(0.8); transition-duration: 0.14s; transition-timing-function: ease-out; }
@keyframes atabspring { 0% { transform: scale(0.8); } 45% { transform: scale(1.14); } 75% { transform: scale(0.96); } 100% { transform: scale(1); } }
@keyframes atabenter { 0% { transform: scale(0.7) translateY(3px); } 50% { transform: scale(1.2) translateY(-2px); } 78% { transform: scale(0.96); } 100% { transform: none; } }
@keyframes atableave { 0% { transform: scale(1); } 35% { transform: scale(0.82) rotate(-9deg); } 70% { transform: scale(1.05) rotate(2deg); } 100% { transform: none; } }
html.app .tabbar .is-spring { animation: atabspring 0.5s var(--e-out); }
html.app .tabbar .is-enter { animation: atabenter 0.62s var(--e-out); }
html.app .tabbar .is-leave { animation: atableave 0.55s var(--e-out); }
/* in the contact space the glass is the space's ink */
html.app.contact-open .tabbar {
  --tbbg: #1e1a16;
  background: rgba(30, 26, 22, 0.82);
  color: #f3f3f0;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 0 0 0.5px rgba(243, 243, 240, 0.12), 0 12px 32px rgba(0, 0, 0, 0.45);
}
html.app.contact-open .tabbar__lens { background: rgba(243, 243, 240, 0.14); box-shadow: none; }
html.app.contact-open .tabbar__av { box-shadow: 0 0 0 1px rgba(243, 243, 240, 0.3); }
/* out of the way: the loading screen, a window, the keyboard */
html.app.is-preloading .tabbar,
html.app.viewer-open .tabbar,
html.app.cv-open .tabbar,
html.app.app-typing .tabbar,
html.app.app-modal .tabbar { transform: translate3d(-50%, calc(100% + 30px + env(safe-area-inset-bottom)), 0); }

/* -------------------------------------------------------------- pieces */
html.app .asec { margin-top: 38px; }
html.app .asec--pad { padding: 0 var(--apr) 0 var(--ap); }
html.app .ahead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--apr) 14px var(--ap);
}
html.app .asec--pad .ahead { padding-left: 0; padding-right: 0; }
html.app .ahead__t {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.62rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
html.app .ahead__more {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg-mute);
  white-space: nowrap;
}
html.app .ahead__more .aic { width: 16px; height: 16px; }
html.app .ahead__n { font-size: 0.78rem; color: var(--fg-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }

html.app .abtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.2s var(--e-out), background-color 0.3s ease;
}
html.app .abtn .aic { width: 17px; height: 17px; }
html.app .abtn--solid { background: var(--fg); color: var(--bg); }
html.app .abtn:active { transform: scale(0.96); }

html.app .arail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ap);
  padding: 0 var(--apr) 8px var(--ap);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
html.app .arail::-webkit-scrollbar { display: none; }

/* the foot of a page */
html.app .aend {
  margin-top: 52px;
  padding: 30px var(--apr) 12px var(--ap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  border-top: 1px solid var(--rule-soft);
}
html.app .aend__mark { width: 44px; color: var(--fg); }
html.app .aend__sig { width: 118px; height: auto; margin-top: 4px; }
html.app[data-mode="dark"] .aend__sig,
html.app[data-mode="dark"] .abio__sig { filter: invert(1) brightness(1.7); }
html.app .aend__line { font-size: 0.74rem; color: var(--fg); }
html.app .aend__line--mute { color: var(--fg-mute); }
html.app .aend .clock { font-size: inherit; letter-spacing: 0.02em; color: inherit; }

/* a word at the foot */
.atoast {
  position: fixed;
  z-index: 7800;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom) + 6px);
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.82rem;
  opacity: 0;
  transform: translate3d(-50%, 18px, 0);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.45s var(--e-out);
}
.atoast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ------------------------------------------------------------------ Home */
/* the first screen: the mark and the name, nothing else */
html.app .hero.ahero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: calc(var(--abar) + 18px) var(--apr) calc(var(--atab) + 4px) var(--ap);
}
html.app .ahero__k { color: var(--fg-mute); }
html.app .ahero__mid { flex: 1 1 auto; display: flex; align-items: center; }
html.app .ahero .hero__name { margin-top: 0; font-size: clamp(2.8rem, 14.6vw, 5rem); }
html.app .ahero .hero__markline { flex-direction: row; align-items: center; gap: 0.16em; }
html.app .ahero .hero__mark { width: 1.42em; }
html.app .ahero .hero__by { padding-left: 0; margin-top: 0.34em; font-size: 0.44em; }
html.app .ahero__cue {
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
html.app .ahero__cue i {
  width: 1px; height: 36px;
  background: linear-gradient(var(--fg-mute), rgba(0, 0, 0, 0));
  transform-origin: 50% 0;
  animation: acue 2.2s var(--e-io) infinite;
}
@keyframes acue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* parametric, as cards in their sky */
html.app .asys {
  flex: 0 0 70%;
  max-width: 300px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-a), var(--sky-b));
  box-shadow: inset 0 0 0 0.5px var(--glass-line);
  color: var(--fg);
  transition: transform 0.25s var(--e-out);
}
html.app .asys:active { transform: scale(0.97); }
html.app .asys__fig { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
html.app .asys__fig img {
  position: absolute;
  left: 12px; right: 12px; top: 16px; bottom: 0;
  width: calc(100% - 24px);
  height: calc(100% - 16px);
  object-fit: contain;
  object-position: 50% 100%;
}
html.app .asys__b { display: block; padding: 12px 16px 16px; }
html.app .asys__k { display: block; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
html.app .asys__t { display: block; margin-top: 4px; font-family: var(--f-display); font-weight: 300; font-size: 1.3rem; line-height: 1.1; }

/* what I do */
html.app .alist { border-top: 1px solid var(--rule-soft); }
html.app .alist__i { border-bottom: 1px solid var(--rule-soft); }
html.app .alist__h {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr 18px;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  text-align: left;
  color: var(--fg);
}
html.app .alist__n { font-size: 0.7rem; color: var(--fg-mute); font-variant-numeric: tabular-nums; }
html.app .alist__t { font-family: var(--f-display); font-size: 1.14rem; font-weight: 300; line-height: 1.2; }
html.app .alist__pm { position: relative; width: 14px; height: 14px; justify-self: end; }
html.app .alist__pm::before,
html.app .alist__pm::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.45s var(--e-out);
}
html.app .alist__pm::after { transform: rotate(90deg); }
html.app .alist__i.is-open .alist__pm::after { transform: rotate(0deg); }
html.app .alist__b { height: 0; overflow: hidden; transition: height 0.5s var(--e-out); }
html.app .alist__b p { padding: 0 0 18px 38px; font-size: 0.92rem; line-height: 1.58; color: var(--fg-mute); }

/* the numbers */
html.app .astats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.app .astat { padding: 18px 16px 16px; border-radius: 22px; background: var(--bg-2); }
html.app .astat b {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
html.app .astat sup { margin-left: 2px; font-family: var(--f-display); font-size: 1.2rem; color: var(--accent); vertical-align: top; }
html.app .astat span { display: block; margin-top: 10px; font-size: 0.76rem; line-height: 1.38; color: var(--fg-mute); }

/* where I have been */
html.app .atl { position: relative; list-style: none; padding-left: 22px; }
html.app .atl::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 14px; width: 1px; background: var(--rule); }
html.app .atl__i { position: relative; display: flex; flex-direction: column; padding-bottom: 22px; }
html.app .atl__i::before {
  content: "";
  position: absolute;
  left: -22px; top: 5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--fg);
}
html.app .atl__i:first-child::before { background: var(--accent); box-shadow: 0 0 0 4px var(--veil); }
html.app .atl__y { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); }
html.app .atl__r { margin-top: 4px; font-family: var(--f-display); font-size: 1.12rem; font-weight: 400; line-height: 1.2; }
html.app .atl__o { margin-top: 2px; font-size: 0.84rem; line-height: 1.42; color: var(--fg-mute); }
html.app .atl__d { margin-top: 8px; list-style: none; font-size: 0.85rem; line-height: 1.5; }
html.app .atl__d li { position: relative; padding-left: 14px; }
html.app .atl__d li + li { margin-top: 3px; }
html.app .atl__d li::before { content: ""; position: absolute; left: 1px; top: 0.72em; width: 6px; height: 1px; background: var(--fg-mute); }

/* the way in to the contact space */
html.app .acta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 22px 22px;
  border-radius: 28px;
  overflow: hidden;
  background: #15120f;
  color: #f3f3f0;
  isolation: isolate;
  transition: transform 0.25s var(--e-out);
}
html.app .acta::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px; height: 260px;
  right: -90px; top: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 138, 110, 0.42), rgba(197, 138, 110, 0) 70%);
}
html.app[data-mode="dark"] .acta { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--rule); }
html.app .acta:active { transform: scale(0.98); }
html.app .acta__k { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 243, 240, 0.55); }
html.app .acta__t {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 2.3rem;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
html.app .acta__go {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  margin-top: 4px;
  padding: 0 16px 0 20px;
  border-radius: 23px;
  background: var(--copper);
  color: #15120f;
  font-size: 0.84rem;
  font-weight: 600;
}
html.app .acta__go .aic { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ Work */
html.app .atitle { padding: calc(var(--abar) + 26px) var(--apr) 16px var(--ap); }
html.app .atitle__k { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
html.app .atitle__h {
  margin-top: 10px;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.7rem, 13.4vw, 4.2rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
html.app .atitle__p { margin-top: 14px; max-width: 40ch; font-size: 0.95rem; line-height: 1.52; color: var(--fg-mute); }
/* the controls float on glass, the same pill as the tab bar and the same
   circle as light / dark */
html.app .atools {
  position: sticky;
  top: var(--abar);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--apr) 10px var(--ap);
}
html.app .aseg,
html.app .aviews {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-2);
  box-shadow: inset 0 0.5px 0 var(--glass-hi), 0 0 0 0.5px var(--glass-line), 0 6px 18px rgba(21, 18, 15, 0.07);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.app .aseg,
  html.app .aviews {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
  }
}
html.app .aseg { flex: 1 1 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
html.app .aseg button {
  position: relative;
  z-index: 1;
  height: 38px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg-mute);
  transition: color 0.3s ease, transform 0.2s var(--e-out);
}
html.app .aseg button:active { transform: scale(0.95); }
html.app .aseg button.is-on { color: var(--fg); }
html.app .aseg__thumb {
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  border-radius: 999px;
  background: var(--thumb);
  box-shadow: 0 1px 4px rgba(21, 18, 15, 0.14), 0 0 0 0.5px rgba(21, 18, 15, 0.05);
  transition: transform 0.5s cubic-bezier(0.3, 1.25, 0.45, 1), width 0.5s cubic-bezier(0.3, 1.25, 0.45, 1);
}
html.app .aviews { gap: 2px; }
html.app .aviews button {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--fg-mute);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s var(--e-out);
}
html.app .aviews button:active { transform: scale(0.9); }
html.app .aviews button.is-on { background: var(--thumb); color: var(--fg); box-shadow: 0 1px 4px rgba(21, 18, 15, 0.14); }
html.app .aviews .aic { width: 19px; height: 19px; }
html.app .awork { padding: 6px var(--apr) 0 var(--ap); transition: opacity 0.22s ease; }
html.app .awork.is-swapping { opacity: 0; }
html.app .awork[data-view="list"] .agrid,
html.app .awork[data-view="grid"] .arows { display: none; }
html.app .agrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.app .atile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-2);
  color: #f3f3f0;
}
html.app .atile--wide { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
html.app .atile__fig,
html.app .atile__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.app .atile__fig img { transition: transform 0.6s var(--e-out); }
html.app .atile__b {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 46px 14px 14px;
  background: linear-gradient(to top, rgba(21, 18, 15, 0.8), rgba(21, 18, 15, 0));
}
html.app .atile__n { font-size: 0.64rem; letter-spacing: 0.12em; opacity: 0.72; }
html.app .atile__t { margin-top: 3px; font-family: var(--f-display); font-weight: 300; font-size: 1.12rem; line-height: 1.08; }
html.app .atile--wide .atile__t { font-size: 1.7rem; }
html.app .atile__k { margin-top: 4px; font-size: 0.7rem; opacity: 0.78; }
html.app .atile:active .atile__fig img { transform: scale(1.04); }
html.app .arows { display: grid; }
html.app .arow {
  display: grid;
  grid-template-columns: 78px 1fr 18px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--fg);
}
html.app .arow__fig { width: 78px; height: 78px; border-radius: 18px; overflow: hidden; background: var(--bg-2); }
html.app .arow__fig img { width: 100%; height: 100%; object-fit: cover; }
html.app .arow__b { min-width: 0; }
html.app .arow__t { display: block; font-family: var(--f-display); font-size: 1.12rem; font-weight: 400; line-height: 1.15; }
html.app .arow__k { display: block; margin-top: 3px; font-size: 0.72rem; color: var(--fg-mute); }
html.app .arow__s {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--fg-mute);
}
html.app .arow > .aic { width: 18px; height: 18px; color: var(--fg-mute); }
html.app .aprac { list-style: none; border-top: 1px solid var(--rule-soft); }
html.app .aprac__i { display: grid; gap: 3px; padding: 15px 0; border-bottom: 1px solid var(--rule-soft); }
html.app .aprac__t { font-family: var(--f-display); font-size: 1.06rem; line-height: 1.25; }
html.app .aprac__k,
html.app .aprac__r { font-size: 0.78rem; line-height: 1.4; color: var(--fg-mute); }

/* ------------------------------------------------------------ Parametric */
html.app.app-reels { scroll-snap-type: y mandatory; }
html.app .areel {
  position: relative;
  height: 100svh;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(var(--abar) + 8px) var(--apr) calc(var(--atab) + 14px) var(--ap);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 82%);
}
/* the picture's frame runs from screen edge to screen edge; a cut-out sits
   flush with the edges it was cut at (app.js, cut) */
html.app .areel__fig {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 calc(-1 * var(--apr)) 14px calc(-1 * var(--ap));
  overflow: hidden;
}
html.app .areel__fig img {
  position: absolute;
  left: 18px; top: 8px; bottom: 0;
  width: calc(100% - 36px);
  height: calc(100% - 8px);
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 26px 30px rgba(21, 18, 15, 0.14));
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(1.05);
  transform-origin: 50% 100%;
  transition: opacity 1s var(--e-out), transform 1.4s var(--e-out);
}
html.app .areel.is-on .areel__fig img { opacity: 1; transform: none; }
html.app .areel__info { position: relative; z-index: 2; padding-right: 66px; }
html.app .areel__info > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.8s var(--e-out), transform 1s var(--e-out);
}
html.app .areel.is-on .areel__info > * { opacity: 1; transform: none; }
html.app .areel.is-on .areel__info > :nth-child(2) { transition-delay: 0.06s; }
html.app .areel.is-on .areel__info > :nth-child(3) { transition-delay: 0.12s; }
html.app .areel.is-on .areel__info > :nth-child(4) { transition-delay: 0.18s; }
html.app .areel__k { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
html.app .areel__t {
  margin-top: 6px;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.3rem, 11.5vw, 3.6rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
html.app .areel__t em { display: block; font-size: 0.62em; letter-spacing: -0.01em; }
html.app .areel__sum {
  max-width: 34ch;
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.app .areel__go { margin-top: 14px; }
html.app .areel__side {
  position: absolute;
  z-index: 3;
  right: var(--apr);
  bottom: calc(var(--atab) + 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
html.app .areel__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--fg); }
html.app .areel__stat .aic { width: 27px; height: 27px; }
html.app .areel__stat b { font-size: 0.86rem; font-weight: 600; line-height: 1.2; }
html.app .areel__stat small { font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-mute); }
html.app .areel--intro { justify-content: flex-end; background: var(--bg); }
/* the four systems fanned out like cards in a hand; one tap, its reel */
html.app .areel__deck { position: relative; flex: 1 1 auto; min-height: 0; margin-bottom: 18px; }
html.app .areel__card {
  position: absolute;
  left: 50%; top: 50%;
  width: min(44%, 220px);
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-a), var(--sky-b));
  box-shadow: 0 18px 40px rgba(21, 18, 15, 0.14), inset 0 0 0 0.5px var(--glass-line);
  opacity: 0;
  transform: translate3d(-50%, -42%, 0) rotate(0deg);
  transition: transform 1.2s var(--e-out), opacity 0.6s ease;
  transition-delay: calc(var(--k) * 0.07s + 0.1s);
}
html.app.app-in .areel__card {
  opacity: 1;
  transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), 0) rotate(var(--r));
}
html.app .areel__card:active { transform: translate3d(calc(-50% + var(--x)), calc(-54% + var(--y)), 0) rotate(var(--r)) scale(1.03); transition-delay: 0s; }
html.app .areel__card img {
  position: absolute;
  left: 10px; top: 12px; bottom: 0;
  width: calc(100% - 20px);
  height: calc(100% - 12px);
  object-fit: contain;
  object-position: 50% 100%;
}
html.app .areel__h {
  margin-top: 12px;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(3.3rem, 17.5vw, 5.8rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
html.app .areel__lede { max-width: 32ch; margin-top: 16px; font-size: 1rem; line-height: 1.5; color: var(--fg-mute); }
html.app .areel__cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
html.app .areel__cue .aic { width: 18px; height: 18px; animation: abob 1.8s var(--e-io) infinite; }
@keyframes abob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }

/* the cut-outs, flush where they were cut (app.js, cut): across the frame
   from side to side, standing on its foot, or a whole object with room round
   it; where a cut meets an open edge it fades instead */
html.app img.cut { max-width: none; max-height: none; }
html.app img.cut--w {
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: fill !important;
}
html.app img.cut--b { top: auto !important; bottom: 0 !important; object-position: 50% 100% !important; }
html.app img.cut--ft { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%); }
html.app img.cut--fb { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 24%); mask-image: linear-gradient(to top, transparent 0, #000 24%); }
html.app img.cut--ft.cut--fb {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
}

/* ----------------------------------------------------------------- About */
html.app .aab { padding: calc(var(--abar) + 10px) var(--apr) 0 var(--ap); }
html.app .aab__fig {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 30px;
  overflow: hidden;
  background: #15120f;
  color: #f3f3f0;
  box-shadow: 0 18px 40px rgba(21, 18, 15, 0.12);
}
html.app .aab__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 57% 40%;
  transform: scale(1.06);
  transform-origin: 57% 40%;
  will-change: transform;
}
html.app .aab__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(21, 18, 15, 0.82) 0%, rgba(21, 18, 15, 0.2) 44%, rgba(21, 18, 15, 0) 62%);
}
html.app .aab__b { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 24px; display: flex; flex-direction: column; }
html.app .aab__k { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 243, 240, 0.74); }
html.app .aab__t {
  margin-top: 8px;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.8rem, 15vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
html.app .aab__t em { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 0.8em; text-transform: none; letter-spacing: -0.01em; }
html.app .aab__role { margin-top: 10px; font-size: 0.82rem; color: rgba(243, 243, 240, 0.84); }
html.app .aab__cap { margin-top: 10px; padding: 0 4px; font-size: 0.74rem; line-height: 1.42; color: var(--fg-mute); }
html.app .aab__in { margin-top: 30px; }
html.app .aab__lede {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 8.4vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
html.app .aab__lede em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
html.app .aab__p { margin-top: 14px; font-size: 1rem; line-height: 1.62; color: var(--fg-mute); }
html.app .aab__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
/* pills: the tab bar's shape */
html.app .apill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 18px;
  border-radius: 25px;
  background: var(--bg-2);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: inset 0 0.5px 0 var(--glass-hi), 0 0 0 0.5px var(--glass-line);
  transition: transform 0.2s var(--e-out);
}
html.app .apill .aic { width: 18px; height: 18px; }
html.app .apill--solid { background: var(--fg); color: var(--bg); box-shadow: 0 8px 20px rgba(21, 18, 15, 0.18); }
html.app .apill:active { transform: scale(0.96); }
html.app .anums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
html.app .anum { padding: 16px 16px 14px; border-radius: 22px; background: var(--bg-2); }
html.app .anum b {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
html.app .anum sup { margin-left: 2px; font-family: var(--f-display); font-size: 1.1rem; color: var(--accent); vertical-align: top; }
html.app .anum span { display: block; margin-top: 8px; font-size: 0.74rem; line-height: 1.36; color: var(--fg-mute); }
html.app .atools--about { margin-top: 26px; }
html.app .apanels { min-height: 60svh; }
html.app .apanel {
  padding-top: 8px;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.45s var(--e-out), transform 0.6s var(--e-out);
}
html.app .apanel.is-on { opacity: 1; transform: none; }
html.app .apanel .atl--full { margin-top: 18px; }
html.app .asub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 36px 0 14px; }
html.app .asub__t { font-family: var(--f-display); font-weight: 300; font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.02em; }
html.app .asub__t em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
html.app .abio__sig { display: block; width: 128px; height: auto; margin-top: 18px; }
/* photographs side by side at one height, each at its own proportions */
html.app .astrip {
  display: flex;
  gap: 8px;
  height: 260px;
  margin: 0 calc(-1 * var(--apr)) 0 calc(-1 * var(--ap));
  padding: 0 var(--apr) 0 var(--ap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--ap);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
html.app .astrip::-webkit-scrollbar { display: none; }
html.app .aph2 {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-2);
  scroll-snap-align: start;
}
html.app .aph2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--e-out); }
html.app .aph2:active img { transform: scale(0.96); }
html.app .aedu { display: grid; gap: 10px; }
html.app .aedu__i { padding: 18px; border-radius: 22px; background: #15120f; color: #f3f3f0; }
html.app[data-mode="dark"] .aedu__i { background: var(--bg-2); }
html.app .aedu__k { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 243, 240, 0.55); }
html.app .aedu__t { margin-top: 8px; font-family: var(--f-display); font-weight: 300; font-size: 1.3rem; line-height: 1.15; }
html.app .aedu__d { margin-top: 6px; font-size: 0.82rem; line-height: 1.45; color: rgba(243, 243, 240, 0.66); }
html.app .aedu__c { padding: 6px 2px 0; font-size: 0.78rem; line-height: 1.5; color: var(--fg-mute); }
html.app .abox__p { font-size: 0.95rem; line-height: 1.5; }
html.app .atags { display: flex; flex-wrap: wrap; gap: 7px; }
html.app .atags span { padding: 9px 14px; border-radius: 999px; background: var(--bg-2); font-size: 0.8rem; }
html.app .alang { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; padding: 9px 0; }
html.app .alang__n { font-size: 0.95rem; }
html.app .alang__l { font-size: 0.76rem; color: var(--fg-mute); }
html.app .alang__bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--rule-soft); overflow: hidden; }
html.app .alang__bar i { display: block; height: 100%; background: var(--fg); transform-origin: left center; transform: scaleX(var(--v)); }
/* the rooms I have been in */
html.app .aevs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 22px; }
html.app .aev { min-width: 0; }
html.app .aev__b { margin-bottom: 14px; }
html.app .aev__when {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--bg-2);
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
html.app .aev__t { margin-top: 12px; font-family: var(--f-display); font-weight: 300; font-size: 1.45rem; line-height: 1.12; letter-spacing: -0.015em; }
html.app .aev__where { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.82rem; color: var(--fg-mute); }
html.app .aev__where .aic { width: 15px; height: 15px; }
html.app .astrip--ev { height: 240px; }
html.app .aev__film { flex: 0 0 auto; width: auto; height: 100%; aspect-ratio: 16 / 9; border-radius: 20px; scroll-snap-align: start; }
html.app .aev__film .film__play i { width: 58px; }
html.app .aev__film .film__meta { left: 14px; right: 14px; bottom: 12px; }
html.app .aev__note { margin-top: 14px; font-size: 0.92rem; line-height: 1.6; color: var(--fg-mute); }
html.app .aev__note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- Project */
html.app .acover {
  position: relative;
  height: min(84svh, 134vw);
  min-height: 430px;
  overflow: hidden;
  background: #15120f;
  color: #f3f3f0;
}
html.app .acover__fig { position: absolute; inset: 0; }
html.app .acover__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 50% 30%;
  will-change: transform;
}
html.app .acover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(21, 18, 15, 0.84) 0%, rgba(21, 18, 15, 0.22) 46%, rgba(21, 18, 15, 0) 64%),
    linear-gradient(to bottom, rgba(21, 18, 15, 0.4), rgba(21, 18, 15, 0) 22%);
}
html.app .acover__b { position: absolute; z-index: 2; left: var(--ap); right: var(--apr); bottom: 44px; }
html.app .acover__k { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 243, 240, 0.76); }
html.app .acover__t {
  margin-top: 10px;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(2.8rem, 15vw, 4.9rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
html.app .acover__t em { display: block; font-size: 0.8em; letter-spacing: -0.01em; }
html.app .acover__p { margin-top: 12px; font-size: 0.84rem; color: rgba(243, 243, 240, 0.82); }
/* the cover's words arrive once the page is in view */
html.app .acover__b > *,
html.app .askyhero__b > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.9s var(--e-out), transform 1.2s var(--e-out);
}
html.app.app-in .acover__b > *,
html.app.app-in .askyhero__b > * { opacity: 1; transform: none; }
html.app.app-in .acover__b > :nth-child(2),
html.app.app-in .askyhero__b > :nth-child(2) { transition-delay: 0.08s; }
html.app.app-in .acover__b > :nth-child(3) { transition-delay: 0.16s; }
/* the writing, a sheet slid up over the cover */
html.app .asheetbody {
  position: relative;
  z-index: 3;
  margin-top: -26px;
  padding-top: 28px;
  border-radius: 26px 26px 0 0;
  background: var(--bg);
}
html.app .asum {
  padding: 0 var(--apr) 0 var(--ap);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.36;
  letter-spacing: -0.01em;
}
html.app .afacts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--ap);
  padding: 20px var(--apr) 4px var(--ap);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
html.app .afacts::-webkit-scrollbar { display: none; }
html.app .afact {
  flex: 0 0 auto;
  min-width: 128px;
  max-width: 74%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-2);
  scroll-snap-align: start;
}
html.app .afact__k { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
html.app .afact__v { font-size: 0.86rem; line-height: 1.38; }
html.app .afacts--grid { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; padding: 20px 0 0; }
html.app .afacts--grid .afact { min-width: 0; max-width: none; }
/* the chapters, sticky under the bar */
html.app .achips {
  position: sticky;
  top: var(--abar);
  z-index: 20;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-top: 18px;
  padding: 10px var(--apr) 10px var(--ap);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  scrollbar-width: none;
  transition: border-color 0.3s ease;
}
html.app .achips::-webkit-scrollbar { display: none; }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  html.app .achips {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}
html.app .achips.is-stuck { border-bottom-color: var(--rule-soft); }
html.app .achips a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 15px;
  border-radius: 17px;
  background: var(--bg-2);
  color: var(--fg-mute);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.35s ease, color 0.35s ease;
}
html.app .achips a.is-on { background: var(--fg); color: var(--bg); }
html.app .atext p { margin-top: 14px; font-size: 0.98rem; line-height: 1.66; color: var(--fg-mute); }
html.app .atext .atext__lede { margin-top: 0; font-size: 1.08rem; line-height: 1.58; color: var(--fg); }
html.app .apart { margin-top: 26px; padding: 20px 18px; border-radius: var(--ar); background: var(--bg-2); }
html.app .apart__k { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
html.app .apart__t { margin-top: 8px; font-family: var(--f-display); font-size: 1.14rem; font-weight: 300; line-height: 1.36; }
html.app .apart__l { display: grid; gap: 11px; margin-top: 14px; list-style: none; }
html.app .apart__l li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 0.9rem; line-height: 1.52; }
html.app .apart__l .aic { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
/* the story the brief tells, on a phone */
html.app .astory-wrap { margin-top: 30px; }
html.app .amas { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 6px; padding: 0 var(--apr) 0 var(--ap); }
html.app .amas__c { display: grid; gap: 6px; }
html.app .amas__i { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 10px; background: var(--bg-2); }
html.app .amas__i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--e-out); }
html.app .amas__i:active img { transform: scale(0.96); }
html.app .asheets { display: grid; gap: 20px; }
html.app .asheet__f {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule-soft);
}
html.app .asheet__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
html.app .asheet__z {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(21, 18, 15, 0.72);
  color: #fff;
}
html.app .asheet__z .aic { width: 16px; height: 16px; }
html.app .asheet figcaption { margin-top: 8px; font-size: 0.8rem; line-height: 1.42; color: var(--fg-mute); }
html.app .afilms { display: grid; gap: 22px; }
html.app .afilm .film { border-radius: 14px; }
html.app .afilm--up .film { width: 64%; margin: 0 auto; }
html.app .afilm .film__play i { width: 62px; }
html.app .afilm .film__meta { left: 12px; right: 12px; bottom: 12px; }
html.app .afilm figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
html.app .afilm figcaption b { font-size: 0.92rem; font-weight: 500; }
html.app .afilm figcaption span { font-size: 0.8rem; line-height: 1.42; color: var(--fg-mute); }
html.app .aidea { padding: 24px 20px; border-radius: 24px; background: #15120f; color: #f3f3f0; }
html.app[data-mode="dark"] .aidea { background: var(--bg-2); }
html.app .aidea__k { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper); }
html.app .aidea__lede { margin-top: 12px; font-family: var(--f-display); font-weight: 300; font-size: 1.24rem; line-height: 1.36; }
html.app .aidea__p { margin-top: 12px; font-size: 0.9rem; line-height: 1.6; color: rgba(243, 243, 240, 0.7); }
html.app .aidea__pairs { display: grid; gap: 10px; margin-top: 16px; list-style: none; }
html.app .aidea__pairs li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid rgba(243, 243, 240, 0.14); }
html.app .aidea__pairs b { font-weight: 500; font-size: 0.9rem; }
html.app .aidea__pairs span { font-size: 0.84rem; line-height: 1.5; color: rgba(243, 243, 240, 0.7); }
html.app .aidea__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
html.app .aidea__gk { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); }
html.app .aidea__grid ul { margin-top: 6px; list-style: none; font-size: 0.8rem; line-height: 1.5; color: rgba(243, 243, 240, 0.72); }
html.app .aidea__close { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(243, 243, 240, 0.14); font-size: 0.92rem; line-height: 1.55; }
/* the next one */
html.app .anext {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: #15120f;
  color: #f3f3f0;
  transition: transform 0.25s var(--e-out);
}
html.app .anext:active { transform: scale(0.98); }
html.app .anext__fig,
html.app .anext__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.app .anext__fig img { filter: brightness(0.62); }
html.app .anext__b { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 20px 76px 20px 20px; }
html.app .anext__k { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
html.app .anext__t { margin-top: 6px; font-family: var(--f-display); font-weight: 200; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; }
html.app .anext__go {
  position: absolute;
  right: 18px; bottom: 18px;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f3f3f0;
  color: #15120f;
}
html.app .anext--sky { background: linear-gradient(180deg, var(--sky-a), var(--sky-b)); color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule-soft); }
html.app .anext--sky .anext__fig { bottom: 84px; overflow: hidden; }
html.app .anext--sky .anext__fig img { inset: auto; left: 14px; top: 14px; bottom: 0; width: calc(100% - 28px); height: calc(100% - 14px); object-fit: contain; object-position: 50% 100%; filter: none; }
html.app .anext--sky .anext__go { background: var(--fg); color: var(--bg); }

/* ---------------------------------------------------------------- System */
html.app .askyhero {
  position: relative;
  height: min(84svh, 160vw);
  min-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 100%);
}
html.app .askyhero__b { position: relative; z-index: 2; flex: 0 0 auto; padding: calc(var(--abar) + 18px) var(--apr) 0 var(--ap); }
html.app .askyhero__fig { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 10px; will-change: transform; }
html.app .askyhero__k { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
html.app .askyhero__t {
  margin-top: 10px;
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(3rem, 17vw, 5.6rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
html.app .askyhero__t em { display: block; margin-top: 0.16em; font-size: 0.5em; letter-spacing: -0.01em; }
html.app .askyhero__img {
  position: absolute;
  left: 6%; top: 0; bottom: 34px;
  width: 88%;
  height: calc(100% - 34px);
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 26px 30px rgba(21, 18, 15, 0.14));
}
/* a band across the foot comes up larger than the screen is wide, its two
   cut sides running off the edges */
html.app .askyhero__img.cut--w:not(.cut--ft) {
  width: max(100%, calc(30svh * var(--r))) !important;
  left: 50% !important;
  margin-left: calc(max(100%, calc(30svh * var(--r))) / -2);
}
html.app .aiter {
  position: relative;
  margin: 0 calc(-1 * var(--apr)) 0 calc(-1 * var(--ap));
  background: linear-gradient(180deg, var(--sky-a), var(--sky-b));
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
html.app .aiter__stage { position: relative; aspect-ratio: 1 / 1; cursor: ew-resize; }
html.app .aiter__f {
  position: absolute;
  left: 4%; top: 5%;
  width: 92%; height: 90%;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
  -webkit-user-drag: none;
  will-change: opacity;
}
html.app .aiter--foot .aiter__f { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
html.app .aiter--edges .aiter__f { -webkit-mask-image: radial-gradient(ellipse at center, #000 56%, transparent 78%); mask-image: radial-gradient(ellipse at center, #000 56%, transparent 78%); }
html.app .aiter__hint {
  position: absolute;
  left: 50%; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 99px;
  background: rgba(21, 18, 15, 0.64);
  color: #f3f3f0;
  font-size: 0.72rem;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}
html.app .aiter__hint .aic { width: 16px; height: 16px; }
html.app .aiter.is-used .aiter__hint { opacity: 0; }
html.app .aiter__ctl { margin-top: 16px; }
html.app .aiter__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; background: transparent; }
html.app .aiter__range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--rule); }
html.app .aiter__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  margin-top: -11.5px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 0 0 5px var(--bg), 0 2px 10px rgba(0, 0, 0, 0.25);
}
html.app .aiter__range::-moz-range-track { height: 3px; border-radius: 3px; background: var(--rule); }
html.app .aiter__range::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 5px var(--bg); }
html.app .aiter__ticks { display: flex; justify-content: space-between; margin-top: 4px; }
html.app .aiter__ticks button {
  min-width: 36px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.72rem;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.3s ease, color 0.3s ease;
}
html.app .aiter__ticks button.is-on { background: var(--bg-2); color: var(--fg); }
html.app .aiter__note { min-height: 3em; margin-top: 12px; font-size: 0.96rem; line-height: 1.52; transition: opacity 0.16s ease; }
html.app .aiter__note.is-swap { opacity: 0; }
html.app .avals { display: grid; margin-top: 14px; list-style: none; border-top: 1px solid var(--rule-soft); }
html.app .aval { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); }
html.app .aval__n { font-size: 0.88rem; }
html.app .aval__v { font-size: 0.86rem; color: var(--fg-mute); font-variant-numeric: tabular-nums; }
html.app .aval__v b { color: var(--fg); font-weight: 600; }
html.app .aval__bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--rule-soft); overflow: hidden; }
html.app .aval__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left center; }
html.app .aplist { display: grid; gap: 8px; list-style: none; }
html.app .aplist__i { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); }
html.app .aplist__n { font-size: 0.9rem; font-weight: 500; }
html.app .aplist__r { font-size: 0.78rem; color: var(--fg-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.app .aplist__e { grid-column: 1 / -1; font-size: 0.84rem; line-height: 1.46; color: var(--fg-mute); }
html.app .aortho { display: grid; gap: 12px; }
html.app .aortho__f { display: block; width: 100%; padding: 16px; border-radius: 16px; background: var(--bg-2); }
html.app .aortho__f img { display: block; width: 100%; height: auto; max-height: 50vh; object-fit: contain; }
html.app[data-mode="dark"] .aortho--ink img { filter: invert(1) hue-rotate(180deg); }
html.app .aortho__v figcaption { margin-top: 7px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
html.app .anote { margin-top: 12px; font-size: 0.84rem; line-height: 1.52; color: var(--fg-mute); }
html.app .anote b { color: var(--fg); font-weight: 500; }
html.app .asky {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #c9d8e3 0%, #e6ecef 70%, #eef0ee 100%);
  box-shadow: inset 0 0 0 0.5px var(--glass-line);
}
html.app[data-mode="dark"] .asky { background: linear-gradient(180deg, #17222c 0%, #232830 70%, #2a2a2e 100%); }
html.app .asky img { position: absolute; left: 6%; top: 6%; bottom: 0; width: 88%; height: 94%; object-fit: contain; object-position: 50% 100%; }
html.app .asky--stand img { left: 4%; top: auto; bottom: 0; width: 62%; height: 88%; object-position: 0 100%; }
html.app .asky--stand .asky__far { left: auto; right: 5%; width: 32%; height: 54%; object-position: 100% 100%; }
html.app .aunit { margin: 0 var(--apr) 0 var(--ap); padding: 20px; border-radius: 24px; background: #15120f; color: rgba(243, 243, 240, 0.8); }
html.app[data-mode="dark"] .aunit { background: var(--bg-2); }
html.app .aunit img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: contain; }
html.app .aunit p { margin-top: 12px; font-size: 0.84rem; line-height: 1.46; }
html.app .arail--dark { margin-top: 12px; }
html.app .apart2 { flex: 0 0 62%; max-width: 260px; scroll-snap-align: start; padding: 14px; border-radius: 18px; background: #1e1a16; color: #f3f3f0; }
html.app .apart2__f { display: block; aspect-ratio: 1; }
html.app .apart2__f img { width: 100%; height: 100%; object-fit: contain; }
html.app .apart2 figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
html.app .apart2 figcaption b { font-size: 0.9rem; font-weight: 500; }
html.app .apart2 figcaption span { font-size: 0.78rem; line-height: 1.42; color: rgba(243, 243, 240, 0.62); }

/* -------------------------------------------- full screen: photographs */
.aview {
  position: fixed;
  inset: 0;
  z-index: 7700;
  display: flex;
  flex-direction: column;
  background: #0c0a08;
  color: #f3f3f0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.aview.is-on { opacity: 1; }
.aview.is-out { opacity: 0; transition: opacity 0.4s ease, transform 0.4s var(--e-out); }
.aview__bar { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 6px) 8px 6px 18px; }
.aview__n { font-size: 0.8rem; color: rgba(243, 243, 240, 0.66); font-variant-numeric: tabular-nums; }
.aview__n b { color: #f3f3f0; font-weight: 500; }
.aview__x { width: 44px; height: 44px; display: grid; place-items: center; color: #f3f3f0; }
.aview__x .aic { width: 24px; height: 24px; }
.aview__track {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.aview__track::-webkit-scrollbar { display: none; }
.aview__i { position: relative; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.aview__i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.aview__cap { min-height: 4.4em; padding: 12px 18px calc(env(safe-area-inset-bottom) + 18px); font-size: 0.86rem; line-height: 1.46; color: rgba(243, 243, 240, 0.8); }

/* ------------------------------------------------------ the contact space */
html.app .cspace { padding-bottom: var(--atab); }
html.app .cspace__bar { padding-top: calc(env(safe-area-inset-top) + 10px); }

@media (prefers-reduced-motion: reduce) {
  html.app [data-in],
  html.app .areel__info > *,
  html.app .areel__fig img,
  html.app .acover__b > *,
  html.app .askyhero__b > * { opacity: 1; transform: none; transition: none; }
  html.app .tabbar .is-spring,
  html.app .tabbar .is-enter,
  html.app .tabbar .is-leave,
  html.app .ahero__cue i { animation: none; }
}

/* -- the writing, in sections: a numbered heading over each paragraph, the
      facts as a title block of ruled cells -------------------------------- */
html.app .asecs { display: grid; }
html.app .asx { padding: 18px 0 20px; border-top: 1px solid var(--rule-soft); }
html.app .asx:first-child { border-top: 0; padding-top: 2px; }
html.app .asx__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
html.app .asx__h span { font-family: var(--f-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; color: var(--accent); }
html.app .asx__t { margin-top: 8px; font-size: 0.98rem; line-height: 1.68; color: var(--fg); opacity: 0.86; }
/* the facts as a schedule: one row each, the word beside its value */
html.app .afacts--block {
  display: block;
  margin: 22px var(--apr) 0 var(--ap);
  padding: 0;
  border-top: 1px solid var(--rule);
}
html.app .afacts--block .afact {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 12px;
  max-width: none;
  padding: 12px 0 13px;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--rule-soft);
}
html.app .afacts--block .afact__k { padding-top: 0.2em; }
html.app .afacts--block .afact__v { font-size: 0.9rem; }
html.app .afacts--top { margin: 0 0 22px; }

/* -- further than the drawing: the range, on the home page and in About -- */
html.app .arange__p { margin-bottom: 18px; font-size: 0.98rem; line-height: 1.62; color: var(--fg); opacity: 0.86; }
html.app .arange { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; }
html.app .arange__i { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; border-radius: 20px; background: var(--bg-2); }
html.app .arange__n { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; color: var(--accent); }
html.app .arange__t { font-family: var(--f-display); font-size: 1.08rem; font-weight: 400; line-height: 1.15; }
html.app .arange__d { font-size: 0.78rem; line-height: 1.42; color: var(--fg-mute); }
html.app .arange__end { margin-top: 18px; font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; }
html.app .atags--range { margin-top: 4px; }
html.app .atags--range .is-next { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-family: var(--f-serif); font-style: italic; font-size: 0.95rem; }
/* the titles that answer a held finger keep their own lines */
html.app .areel__h .sp-line { display: block; }

/* -- the index on a phone: the services running past, and the approach with
      its distance drawn, as on the computer ------------------------------ */
html.app .marquee.amarquee { margin-top: 4px; padding-block: 18px; }
html.app .amarquee .marquee__item { font-size: 1.6rem; gap: 18px; padding-right: 18px; }
html.app .appr.aappr { max-width: none; padding: 44px var(--apr) 6px var(--ap); }
html.app .aappr .appr__t { margin-top: 16px; font-size: clamp(2.3rem, 11.4vw, 3.6rem); }
html.app .aappr .dim { margin-top: 40px; }
html.app .aappr .dim__end b { font-size: 1.32rem; }
html.app .aappr .dim__line { height: 96px; }
html.app .aappr .dim__lbl { width: 64%; white-space: normal; bottom: calc(38% + 0.6rem); }
html.app .aappr .dim__lbl em { font-size: 1rem; line-height: 1.25; }
html.app .aappr .appr__p { max-width: 34ch; margin-top: 28px; font-size: 0.98rem; }
html.app .ahead__kk { padding: 0 var(--apr) 8px var(--ap); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
html.app .asec--pad .ahead__kk { padding-left: 0; padding-right: 0; }

/* What I do: the computer's section, moved in; two columns of drawn icons */
html.app .wid.awid { max-width: none; margin: 38px 0 0; padding: 0 var(--apr) 0 var(--ap); }
html.app .awid .sec-head { flex-direction: column-reverse; align-items: flex-start; gap: 8px; margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; }
html.app .awid .sec-head .label { font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
html.app .awid .sec-head h2 { font-family: var(--f-display); font-weight: 300; font-size: 1.62rem; line-height: 1.05; letter-spacing: -0.02em; }
html.app .awid .wid__intro { font-size: 0.98rem; line-height: 1.6; opacity: 0.86; }
html.app .awid .wid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; margin-top: 24px; }
html.app .awid .wid__i { padding: 16px 0 22px; }
html.app .awid .wid__ic { width: 40px; }
html.app .awid .wid__n { font-size: 0.62rem; }
html.app .awid .wid__t { margin-top: 12px; font-size: 1.06rem; }
html.app .awid .wid__i--next .wid__t { font-size: 1.22rem; }
html.app .awid .wid__d { margin-top: 5px; font-size: 0.8rem; line-height: 1.45; }

/* the numbers centred in their cards, the plus hanging off the figure */
html.app .astat { position: relative; text-align: center; }
html.app .astat b { display: inline-block; }
html.app .astat sup { position: absolute; margin-left: 2px; translate: 0 0.35em; }
html.app .astat span { max-width: 18ch; margin-inline: auto; }

/* the tools, by what they are for: a monogram tile, the name and its use */
html.app .asoft { display: grid; gap: 18px; }
html.app .asoft__k { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
html.app .asoft ul { margin-top: 8px; list-style: none; border-top: 1px solid var(--rule-soft); }
html.app .atool { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
html.app .atool__m { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-2); font-family: var(--f-display); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.01em; }
html.app .atool__b { display: grid; gap: 2px; min-width: 0; }
html.app .atool__b b { font-size: 0.92rem; font-weight: 500; }
html.app .atool__b span { font-size: 0.78rem; line-height: 1.4; color: var(--fg-mute); }

/* a story's drawing that stays while its steps pass: held just under the
   chapter chips, so none of it is covered */
html.app .astory-wrap .shist__fig { top: calc(var(--abar) + 56px); }
html.app .awid .wid__cats { margin-top: 26px; }
html.app .awid .wid__cat { padding-top: 14px; }
html.app .awid .wid__cat + .wid__cat { margin-top: 30px; }
html.app .awid .wid__ch { grid-template-columns: 30px minmax(0, 1fr); row-gap: 4px; }
html.app .awid .wid__cn { font-size: 0.62rem; }
html.app .awid .wid__ct { font-size: 1.4rem; }
html.app .awid .wid__cd { font-size: 0.82rem; }
html.app .awid .wid__cat .wid__grid { margin-top: 12px; }
html.app .awid .wid__i--next { margin-top: 30px; padding: 16px 0; }

/* ── round of 10 Nov ────────────────────────────────────────────────────────
   The tab bar takes a room's shape; the top bar steps away as you read on;
   a project is rooms; Parametric is a page; the site's footer closes every
   page. */

/* ---- the tab bar, in a room: the room's icon at the left, its own tabs
   beside it (app.js, TB.set / TB.mode). Every tab has its width in pixels,
   so the lens and the icon move as one while the bar changes shape. */
html.app .tabbar { display: flex; align-items: center; }
html.app .tabbar__a { flex: 0 0 auto; width: var(--tw, 20%); min-width: 0; overflow: hidden; transition: width 0.5s var(--e-out), opacity 0.3s ease; }
html.app .tabbar__ctx {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 52px;
  display: flex; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, margin 0.5s var(--e-out), padding 0.5s var(--e-out);
}
html.app .tabbar__ctx::-webkit-scrollbar { display: none; }
html.app .tabbar.is-ctx .tabbar__a:not(.is-on) { width: 0; opacity: 0; pointer-events: none; }
html.app .tabbar.is-ctx .tabbar__a.is-on { width: 52px; }
html.app .tabbar.is-ctx .tabbar__ctx {
  opacity: 1; pointer-events: auto; margin-left: 8px; padding: 0 6px 0 8px;
  box-shadow: inset 1px 0 0 var(--rule-soft);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  transition: opacity 0.4s ease 0.22s, margin 0.5s var(--e-out), padding 0.5s var(--e-out);
}
html.app .tabbar__c {
  position: relative; z-index: 1; flex: 0 0 auto; height: 40px; padding: 0 13px; border-radius: 20px;
  font-family: var(--f-body); font-size: 0.8rem; font-weight: 500; white-space: nowrap; color: var(--fg-mute);
  transition: color 0.3s ease, transform 0.2s var(--e-out);
}
html.app .tabbar__c:active { transform: scale(0.94); }
html.app .tabbar__c.is-on { color: var(--fg); }
html.app .tabbar__c:last-child { margin-right: 12px; }
html.app .tabbar__cthumb {
  position: absolute; left: 0; top: 6px; width: 0; height: 40px; border-radius: 20px;
  background: rgba(21, 18, 15, 0.08); pointer-events: none;
  transition: transform 0.45s var(--e-out), width 0.45s var(--e-out), background-color 0.45s ease;
}
html.app[data-mode="dark"] .tabbar__cthumb, html.app body[data-theme="dark"] .tabbar__cthumb { background: rgba(243, 243, 240, 0.12); }
@media (prefers-reduced-motion: reduce) {
  html.app .tabbar__a, html.app .tabbar__ctx, html.app .tabbar__cthumb { transition: none; }
}

/* ---- the top bar steps away as you scroll down, and comes back as you
   scroll up (site.js: .hdr.is-hidden, html.hdr-off); what holds on under it
   moves up to the top of the screen meanwhile */
html.app .hdr { transition: transform 0.5s var(--e-out), background-color 0.45s var(--e-out), border-color 0.35s ease, color 0.45s var(--e-out); }
html.app .hdr.is-hidden { transform: translate3d(0, -110%, 0); }
html.app .atools { transition: top 0.5s var(--e-out); }
html.app.hdr-off .atools { top: 0; }
html.app .pstory__nav { top: var(--abar); transition: top 0.5s var(--e-out); }
html.app.hdr-off .pstory__nav { top: 0; }

/* ---- Work: what is shown, and the view */
html.app .atools--work { justify-content: space-between; }
html.app .atools__n { padding: 9px 14px; border-radius: 999px; background: var(--bg-2); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); box-shadow: inset 0 0.5px 0 var(--glass-hi), 0 0 0 0.5px var(--glass-line); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.app .atools__n { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
}

/* ---- a project's rooms, and what they are filtered by */
html.app .apane.is-on { animation: apane-in 0.55s var(--e-out) both; }
@keyframes apane-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
html.app .afilter { display: flex; gap: 6px; padding: 0 var(--apr) 14px var(--ap); overflow-x: auto; scrollbar-width: none; }
html.app .afilter::-webkit-scrollbar { display: none; }
html.app .asec--pad .afilter { margin-inline: calc(-1 * var(--ap)) calc(-1 * var(--apr)); }
html.app .afilter button {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 13px; border-radius: 100px;
  background: var(--bg-2); font-size: 0.8rem; font-weight: 500; white-space: nowrap; color: var(--fg-mute);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s var(--e-out);
}
html.app .afilter button:active { transform: scale(0.95); }
html.app .afilter button.is-on { background: var(--fg); color: var(--bg); }
html.app .afilter sup { font-size: 0.68em; opacity: 0.7; }
html.app .amas, html.app .asheets { transition: opacity 0.2s ease; }
html.app .amas.is-swapping, html.app .asheets.is-swapping { opacity: 0; }
html.app .alink { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }

/* the story on a phone: its chapters as a row of chips, one chapter open */
html.app .pchap > .story { padding: 20px var(--apr) 6px var(--ap); }
html.app .pchap > .story.srec { margin: 16px var(--ap) 0; padding: 22px 18px; }
html.app .pchap > .story .sec-head { flex-direction: column-reverse; align-items: flex-start; gap: 8px; margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; }
html.app .pchap > .story .sec-head h2 { font-size: 1.62rem; line-height: 1.08; }
html.app .pchap__foot { margin-top: 26px; padding: 14px var(--apr) 0 var(--ap); }
html.app .pchap__gt { font-size: 1.05rem; }
html.app .shist__steps, html.app .shist--wide .shist__steps { margin-inline: calc(-1 * var(--ap)) calc(-1 * var(--apr)); }
html.app .shist__y { font-size: 1.5rem; }
html.app .shist__t { font-size: 0.92rem; line-height: 1.5; }
html.app .astory-wrap { margin-top: 0; }

/* ---- Parametric: a page like the others, a card for every system */
html.app.app--parametric main.amain { max-width: var(--amax); padding-bottom: 28px; }
html.app .apar { display: grid; gap: 38px; padding: 22px var(--apr) 0 var(--ap); }
html.app .apar__i { scroll-margin-top: 76px; }
html.app .apar__fig { position: relative; display: block; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 82%); }
html.app .apar__fig img {
  position: absolute; left: 16px; top: 14px; bottom: 0; width: calc(100% - 32px); height: calc(100% - 14px);
  object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 22px 26px rgba(21, 18, 15, 0.14));
}
html.app .apar__b { padding: 16px 4px 0; }
html.app .apar__k { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
html.app .apar__t { margin-top: 6px; font-family: var(--f-display); font-weight: 200; font-size: clamp(2.1rem, 10vw, 3.2rem); line-height: 0.96; letter-spacing: -0.03em; text-transform: uppercase; }
html.app .apar__t em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.01em; }
html.app .apar__f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--rule-soft); }
html.app .apar__f div { padding-top: 10px; }
html.app .apar__f div + div { padding-left: 12px; border-left: 1px solid var(--rule-soft); }
html.app .apar__f dt { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
html.app .apar__f dd { margin-top: 3px; font-family: var(--f-display); font-size: 1.3rem; font-weight: 300; }
html.app .apar__u { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
html.app .apar__u > span { margin-right: 2px; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
html.app .apar__ul { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px 6px 12px; border-radius: 100px; background: var(--bg-2); font-size: 0.78rem; }
html.app .apar__ul .aic { width: 13px; height: 13px; }
html.app .apar__go { margin-top: 16px; }
html.app .apar__h .sp-line { display: block; }

/* ---- the foot: the site's own footer, as on a computer (the logo, the
   studio, the time in Duhok, the rooms, the signature), set for a phone */
html.app main.amain { padding-bottom: 28px; }
html.app .ftx { padding: 34px 0 calc(var(--atab) + 22px); }
html.app .ftx__in { padding-inline: var(--ap) var(--apr); }
html.app .ftx__head { padding-bottom: 16px; }
html.app .ftx__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px 0; }
html.app .ftx__side { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 22px; }
html.app .ftx__mark { flex: 0 0 36%; width: auto; max-width: 140px; }
html.app .ftx__info { flex: 1 1 auto; gap: 16px; }
html.app .ftx__v { font-size: 0.95rem; }
html.app .ftx__s { font-size: 0.74rem; }
html.app .ftx__clock { font-size: 2.1rem; }
html.app .ftx__a { grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: 0.6rem; padding: 10px 0; }
html.app .ftx__w { font-size: 2rem; }
html.app .ftx__x { font-size: 0.72rem; }
html.app .ftx__base { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 18px; }
html.app .ftx__base .sig { width: 110px; }

/* the story's chapters on a phone: a row of chips that holds under the top bar */
html.app .pstory__nav { position: sticky; z-index: 6; background: var(--bg); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  html.app .pstory__nav { background: color-mix(in srgb, var(--bg) 95%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
}
html.app .pstory__k, html.app .pstory__g { display: none; }
html.app .pstory__l { display: flex; gap: 6px; margin: 0; padding: 9px var(--apr) 9px var(--ap); overflow-x: auto; scrollbar-width: none; border: 0; }
html.app .pstory__l::-webkit-scrollbar { display: none; }
html.app .pstory__l li { flex: 0 0 auto; }
html.app .pstory__a { display: inline-flex; align-items: baseline; gap: 6px; width: auto; padding: 8px 13px; border-radius: 100px; background: var(--bg-2); font-family: var(--f-body); font-size: 0.8rem; font-weight: 500; white-space: nowrap; transform: none; }
html.app .pstory__a.is-on { background: var(--fg); color: var(--bg); transform: none; }
html.app .pstory__n { font-size: 0.66rem; letter-spacing: 0.06em; opacity: 0.7; }
html.app .pstory__a.is-on .pstory__n { color: inherit; }

/* ── round of 11 Nov: the chapter chips keep their shape; the foot buttons fit ── */
html.app .pstory__nav { padding: 0; border-radius: 0; box-shadow: none; max-height: none; overflow: visible; }
html.app .pstory__head, html.app .pstory__hint, html.app .pstory__go { display: none; }
html.app .pstory__l { display: flex; gap: 6px; margin: 0; }
html.app .pstory__a { color: var(--fg); }
html.app .pstory__a.is-on { color: var(--bg); }
html.app .pstory__a .pstory__n { color: inherit; }
html.app .pchap__foot { gap: 10px; }
html.app .pchap__go { flex: 1 1 0; min-width: 0; padding: 12px 14px; }
html.app .pchap__go--prev { padding-left: 34px; }
html.app .pchap__go--next { padding-right: 34px; }
html.app .pchap__go--prev::after { left: 14px; }
html.app .pchap__go--next::after { right: 14px; }

/* ── round of 11 Nov: the tab bar changes shape on the compositor ───────────
   Nothing is laid out again when the bar goes from the five rooms to a
   page's own tabs: the other icons fade, the room's icon and the lens slide
   (transforms), the tabs fade in beside them. html.dock-ctx is set by the
   page's head script when you arrive from inside the same room with the
   tabs showing, so the bar is drawn in that shape from the first frame. */
html.app .tabbar { --tw: calc((min(100vw - 32px, 420px) - 12px) / 5); }
html.app .tabbar__a {
  flex: 0 0 var(--tw); width: var(--tw); overflow: visible;
  transition: transform 0.6s var(--e-out), opacity 0.28s ease;
}
html.app .tabbar__a:nth-of-type(1) { --i: 0; }
html.app .tabbar__a:nth-of-type(2) { --i: 1; }
html.app .tabbar__a:nth-of-type(3) { --i: 2; }
html.app .tabbar__a:nth-of-type(4) { --i: 3; }
html.app .tabbar__a:nth-of-type(5) { --i: 4; }
html.app .tabbar.is-ctx .tabbar__a:not(.is-on),
html.app.dock-ctx .tabbar .tabbar__a:not(.is-on) { width: var(--tw); opacity: 0; transform: scale(0.72); pointer-events: none; }
html.app .tabbar.is-ctx .tabbar__a.is-on,
html.app.dock-ctx .tabbar .tabbar__a.is-on { width: var(--tw); transform: translate3d(calc(var(--i, 0) * var(--tw) * -1), 0, 0); }
html.app .tabbar:not(.is-ctx) .tabbar__a { transition: transform 0.6s var(--e-out), opacity 0.4s ease 0.14s; }
html.app .tabbar__lens { width: var(--tw); transition: transform 0.6s var(--e-out), background-color 0.45s ease; }
html.app .tabbar__ctx,
html.app .tabbar.is-ctx .tabbar__ctx {
  position: absolute; z-index: 1; left: calc(6px + var(--tw) + 6px); right: 6px; top: 6px; height: 52px; margin: 0; padding: 0 6px 0 8px;
  flex: none; box-shadow: inset 1px 0 0 var(--rule-soft);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
}
html.app .tabbar__ctx { opacity: 0; transform: translate3d(18px, 0, 0); pointer-events: none; transition: opacity 0.22s ease, transform 0.5s var(--e-out); }
html.app .tabbar.is-ctx .tabbar__ctx { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.4s ease 0.16s, transform 0.6s var(--e-out) 0.06s; }
/* the tabs of a page come in one after another, whenever they are set */
html.app .tabbar__c { animation: atabchip 0.5s var(--e-out) backwards; animation-delay: calc(var(--n, 0) * 45ms + 60ms); }
@keyframes atabchip { from { opacity: 0; transform: translate3d(10px, 0, 0); } to { opacity: 1; transform: none; } }
html.app .tabbar__cthumb { top: 6px; }
html.app .tabbar.is-still, html.app .tabbar.is-still * { transition: none !important; }
/* the loading screen keeps its lines; the line of text at the foot, which they crossed, is left out */
html.app .pre__meta { display: none; }
@media (prefers-reduced-motion: reduce) {
  html.app .tabbar__a, html.app .tabbar__lens, html.app .tabbar__ctx { transition: none; }
  html.app .tabbar__c { animation: none; }
}

/* the drawing of a stepper sits close over its cards */
html.app .shist { row-gap: 6px; }
html.app .shist__ctl .stear__key { margin: 14px 0 0; }