.h-xl {
  font-family: var(--f-display); font-weight: 650; letter-spacing: -.04em; line-height: .95;
  font-size: clamp(42px, 7.4vw, 120px); text-wrap: balance;
}

.morph { color: var(--gold); }
.morph-line { font: 400 clamp(24px, 3vw, 40px)/1.2 var(--f-display); letter-spacing: -.02em; color: var(--mute); }

.jca-book--siddur, .jca-book--tehillim { width: calc(var(--u) * 118); height: calc(var(--u) * 162); }
.jca-book--siddur { --c1: #36528d; --c2: #2c4479; --spine: #243863; --back: #1b2a50; }
.jca-book--tehillim { --c1: #8a343c; --c2: #742a32; --spine: #5c2127; --back: #461a1f; }
.jca-book--siddur .jca-book__frame, .jca-book--tehillim .jca-book__frame { left: calc(var(--u) * 23); gap: calc(var(--u) * 12); }
.jca-book__emblem { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }

/* prayers */
.jca-sec--tight { margin: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 8); }
.jca-group { margin: 0 calc(var(--u) * 19); }
.jca-tool { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 14); height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 14); }
.jca-tool + .jca-tool::before { content: ""; position: absolute; top: 0; left: calc(var(--u) * 61); right: 0; height: calc(var(--u) * 1); background: var(--jca-edge); }
.jca-tool .jca-ic { width: calc(var(--u) * 33); height: calc(var(--u) * 33); }
.jca-tool b { display: block; font-size: calc(var(--u) * 15); font-weight: 600; color: var(--jca-navy); }
.jca-tool > div > span { display: block; margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 11); color: var(--jca-mute); }
.jca-sec--books { margin-top: calc(var(--u) * 30); }
.jca-books { margin: calc(var(--u) * 14) calc(var(--u) * 20) 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 12); }
.jca-books > div { display: grid; justify-items: center; gap: calc(var(--u) * 20); }
.jca-books > div > span { font-size: calc(var(--u) * 11.5); color: var(--jca-mute); }

/* ---------- phones and touch screens ----------
   Everything below only applies to touch input or narrow screens,
   so the desktop layout is untouched. */
.only-touch { display: none; }
@media (hover: none) {

  .only-hover { display: none; }
  .only-touch { display: inline; }}

.device--phone { width: var(--pw, 240px); aspect-ratio: 9 / 19.3; padding: 3.2%; border-radius: 16% / 7.4%; background: linear-gradient(145deg, #3c3f55, #14161f 55%, #2b2e40); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 50px 100px -40px rgba(0, 0, 0, .9); }
.device--phone .device__screen { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 13% / 6%; background: #000; container-type: inline-size; }
.device__island { position: absolute; z-index: 6; top: 3.2%; left: 50%; width: 31%; height: 4.4%; translate: -50% 0; border-radius: 99px; background: #000; }
.device__sb { position: absolute; z-index: 5; top: 3.6%; left: 9%; font: 600 4cqw/1 -apple-system, "SF Pro Text", var(--f-body); }
.device--browser { width: var(--bw, 520px); border-radius: 14px; overflow: hidden; background: #1a1c2a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 50px 100px -40px rgba(0, 0, 0, .9); }
.device__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #1f2232; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.device__bar > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.device__bar > i:nth-child(2) { background: #febc2e; } .device__bar > i:nth-child(3) { background: #28c840; }
.device__url { flex: 1; min-width: 0; margin: 0 8% 0 10px; height: 18px; border-radius: 6px; background: rgba(255, 255, 255, .06); font: 500 10px/18px var(--f-mono); color: var(--mute); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.device--lg { width: min(100%, 1120px); border-radius: 18px; }
.device--lg .device__bar { height: 40px; padding: 0 16px; }
.device--lg .device__bar > i { width: 11px; height: 11px; }
.device--lg .device__url { height: 22px; line-height: 22px; font-size: 12px; max-width: 420px; margin-inline: auto; }
/* the previews are stills, so they must not be scroll areas: one would catch the wheel and stop the page under the pointer */
.device--lg .device__view { aspect-ratio: 16 / 9; }
.device--lg .device__view:focus-visible { outline: 2px solid var(--case-accent); outline-offset: -2px; }
@media (max-width: 700px) {
 .device--lg .device__view { aspect-ratio: 4 / 5; }}

/* no film grain here: the page is flat colours and big pictures, and the full-screen grain layer on top of them doubled
   the work of drawing every frame of the scroll */
body::after { content: none; }

/* =========================================================
   Portfolio: the palettes. Each project has one calm flat colour, worn by its card in the hero and by its chapter
   below: --w-bg the ground, --w-fg the text on it, --w-mute quieter text, --w-line rules and outlines, --w-acc the
   small accents (labels, the morphing word), --w-btn / --w-btn-fg the main button
   ========================================================= */
.is-jc { --w-bg: #ece2cb; --w-fg: #16203d; --w-mute: rgba(22, 32, 61, .72); --w-line: rgba(22, 32, 61, .2); --w-acc: #8a5d12; --w-btn: #16203d; --w-btn-fg: #f4ecda; }
.is-gh { --w-bg: #f4a6c0; --w-fg: #2b0f24; --w-mute: rgba(43, 15, 36, .74); --w-line: rgba(43, 15, 36, .22); --w-acc: #7d1742; --w-btn: #2b0f24; --w-btn-fg: #fbe3eb; }
.is-hl { --w-bg: #d55a24; --w-fg: #22140d; --w-mute: rgba(34, 20, 13, .76); --w-line: rgba(34, 20, 13, .24); --w-acc: #22140d; --w-btn: #22140d; --w-btn-fg: #f6e6da; }
.is-mr { --w-bg: #123b48; --w-fg: #f3ede2; --w-mute: rgba(243, 237, 226, .78); --w-line: rgba(243, 237, 226, .22); --w-acc: #ff7a47; --w-btn: #ff5b23; --w-btn-fg: #15120f; }
.is-fl { --w-bg: #4a1419; --w-fg: #ede7dd; --w-mute: rgba(237, 231, 221, .78); --w-line: rgba(237, 231, 221, .22); --w-acc: #c9ad80; --w-btn: #ede7dd; --w-btn-fg: #191817; }
.is-kl { --w-bg: #2b1a12; --w-fg: #f3ebe0; --w-mute: rgba(243, 235, 224, .78); --w-line: rgba(243, 235, 224, .22); --w-acc: #ff7a47; --w-btn: #e2552d; --w-btn-fg: #fff; }
.is-la { --w-bg: #102029; --w-fg: #f4f4f1; --w-mute: rgba(244, 244, 241, .76); --w-line: rgba(244, 244, 241, .2); --w-acc: #c9a979; --w-btn: #c9a979; --w-btn-fg: #102029; }

/* =========================================================
   Portfolio hero: the monkey's gallery. Each project hangs on the wall as a framed work in its chapter's colour, with a
   picture light above and a brass plaque below. Click a work and core.js glides down to its chapter.
   Performance: everything here is painted once. A hover only fades the light (opacity) and lifts the work (transform);
   nothing loops. Works lay out in rows of four (two on phones), so more projects just add rows
   ========================================================= */
.pfx {
  position: relative; padding: calc(clamp(108px, 11vw, 150px) + env(safe-area-inset-top, 0px)) 0 clamp(56px, 8vw, 110px);
  /* the gallery wall: a deep plum, lit a touch brighter where the works hang, and a dark skirting at the foot */
  background: radial-gradient(70% 55% at 50% 72%, rgba(143, 125, 255, .07), transparent 70%), linear-gradient(180deg, #0d0b14, #14111e 60%, #110e1a);
}
.pfx::after { content: ""; position: absolute; inset: auto 0 0; height: clamp(18px, 2.4vw, 30px); background: #0a0910; border-top: 1px solid rgba(201, 164, 106, .16); pointer-events: none; }
.pfx__in { display: grid; gap: clamp(36px, 4.5vw, 60px); }
.pfx__head { display: grid; gap: 22px; justify-items: start; }
.pfx__head .h-display { margin: 0; font-size: clamp(52px, min(7vw, 12vh), 128px); }
.pfx__head .lede { margin: 0; }

/* the works: rows of four, each a picture light, the framed work and its plaque */
.pfx__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 46px) clamp(16px, 2vw, 28px); }
.pfx__item { position: relative; margin: 0; display: grid; gap: 12px; justify-items: center; }
/* the picture light: a brass bar on a short arm above the frame */
.pfx__item::before {
  content: ""; position: absolute; z-index: 2; top: -15px; left: 50%; width: 30%; height: 7px; margin-left: -15%;
  border-radius: 4px 4px 7px 7px; background: linear-gradient(180deg, #e0c48c, #8f6c37); box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.pfx__item::after { content: ""; position: absolute; z-index: 1; top: -9px; left: 50%; width: 2px; height: 9px; margin-left: -1px; background: #8f6c37; }
.pfx__card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px; width: 100%;
  aspect-ratio: 1; padding: clamp(18px, 1.8vw, 26px); border-radius: 16px;
  background: var(--w-bg); color: var(--w-fg);
  /* the frame: a dark moulding with a thin gilt edge, and the work's shadow on the wall */
  box-shadow: 0 0 0 5px #1d1828, 0 0 0 6px rgba(201, 164, 106, .35), 0 26px 40px -22px rgba(0, 0, 0, .8);
  transition: transform .5s var(--ease-out);
}
/* the light falling on the work: painted once, it only fades in while you look at it */
.pfx__card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease-out);
  background: radial-gradient(75% 65% at 50% 0%, rgba(255, 244, 222, .5), rgba(255, 244, 222, .12) 55%, transparent 82%);
}
.pfx__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 12px; letter-spacing: .08em; color: var(--w-mute); }
.pfx__go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--w-line); color: var(--w-fg); font-size: 15px; transition: transform .5s var(--ease-out); }
.pfx__name { font: 650 clamp(22px, 2.1vw, 34px)/1 var(--f-display); letter-spacing: -.03em; }
.is-hl .pfx__name { font: 900 clamp(26px, 2.5vw, 40px)/.92 "Big Shoulders Display", Impact, "Arial Narrow", sans-serif; letter-spacing: .01em; text-transform: uppercase; }
.is-mr .pfx__name { font: 400 clamp(28px, 2.6vw, 42px)/.95 "Instrument Serif", "Times New Roman", serif; letter-spacing: -.01em; }
.is-fl .pfx__name { font: italic 400 clamp(28px, 2.6vw, 42px)/.95 "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; letter-spacing: -.01em; }
.is-kl .pfx__name { font: 400 clamp(28px, 2.6vw, 42px)/.95 "Fraunces", Georgia, serif; letter-spacing: -.035em; }
.is-la .pfx__name { font: 400 clamp(28px, 2.6vw, 42px)/.95 "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; letter-spacing: -.02em; }
/* the picture: a phone-shaped still peeking up from the bottom edge */
.pfx__shot {
  position: absolute; z-index: -1; left: 50%; bottom: 0; width: 48%; aspect-ratio: 9 / 16; margin-left: -24%;
  border-radius: 14% / 8%; overflow: hidden; background: var(--w-fg); transform: translateY(50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 18px 40px -16px rgba(0, 0, 0, .45); transition: transform .6s var(--ease-out);
}
.pfx__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* the websites hang as a small browser window instead of a phone: a dark bar with three dots, and the site below it */
.pfx__shot--web {
  display: flex; flex-direction: column; width: 86%; margin-left: -43%; aspect-ratio: auto; border-radius: 9px;
  background: #1a1c2a; transform: translateY(36%);
}
.pfx__bar { flex: none; display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 8px; background: #1f2232; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pfx__bar i { width: 5px; height: 5px; border-radius: 50%; background: #ff5f57; }
.pfx__bar i:nth-child(2) { background: #febc2e; } .pfx__bar i:nth-child(3) { background: #28c840; }
.pfx__shot--web img { height: auto; aspect-ratio: 16 / 9; }
/* the plaque: a small brass label, as in a museum */
.pfx__plaque {
  margin: 0; padding: 6px 12px 5px; border-radius: 3px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; text-align: center;
  color: #2a1f10; background: linear-gradient(180deg, #e6cd97, #b8935a); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 3px 6px -2px rgba(0, 0, 0, .6);
}
.pfx__card:hover, .pfx__card:focus-visible { transform: translateY(-4px); }
.pfx__card:hover::after, .pfx__card:focus-visible::after { opacity: 1; }
.pfx__card:hover .pfx__shot, .pfx__card:focus-visible .pfx__shot { transform: translateY(38%); }
.pfx__card:hover .pfx__go, .pfx__card:focus-visible .pfx__go { transform: rotate(45deg); }
.pfx__card:hover .pfx__shot--web, .pfx__card:focus-visible .pfx__shot--web { transform: translateY(24%); }
.pfx__card:focus-visible { outline: 2px solid var(--fg); outline-offset: 9px; }

@media (max-width: 1000px) {
  .pfx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfx__card { aspect-ratio: 5 / 4; }
  .pfx__shot { width: 34%; margin-left: 0; left: auto; right: 7%; transform: translateY(36%); }
  .pfx__card:hover .pfx__shot, .pfx__card:focus-visible .pfx__shot { transform: translateY(26%); }
  .pfx__shot--web { width: 66%; right: 6%; transform: translateY(30%); }
  .pfx__card:hover .pfx__shot--web, .pfx__card:focus-visible .pfx__shot--web { transform: translateY(20%); }
}
@media (max-width: 560px) {
  .pfx__grid { gap: 28px 12px; }
  .pfx__card { aspect-ratio: 3 / 4; padding: 14px; border-radius: 12px; gap: 6px; box-shadow: 0 0 0 4px #1d1828, 0 0 0 5px rgba(201, 164, 106, .35), 0 18px 30px -18px rgba(0, 0, 0, .8); }
  .pfx__top { font-size: 11px; margin-bottom: 2px; }
  .pfx__go { width: 28px; height: 28px; font-size: 13px; }
  .pfx__name { font-size: 20px; }
  .is-hl .pfx__name { font-size: 24px; } .is-mr .pfx__name { font-size: 26px; } .is-fl .pfx__name, .is-kl .pfx__name, .is-la .pfx__name { font-size: 26px; }
  .pfx__plaque { font-size: 8.5px; padding: 5px 8px 4px; letter-spacing: .07em; }
  .pfx__item::before { top: -13px; height: 6px; }
  .pfx__shot { width: 58%; left: 50%; right: auto; margin-left: -29%; transform: translateY(46%); }
  .pfx__card:hover .pfx__shot, .pfx__card:focus-visible .pfx__shot { transform: translateY(40%); }
  .pfx__shot--web { width: 90%; margin-left: -45%; border-radius: 6px; transform: translateY(24%); }
  .pfx__card:hover .pfx__shot--web, .pfx__card:focus-visible .pfx__shot--web { transform: translateY(16%); }
  .pfx__bar { height: 11px; gap: 3px; padding: 0 5px; } .pfx__bar i { width: 4px; height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .pfx__card, .pfx__card::after, .pfx__shot, .pfx__go { transition: none; }
}

/* =========================================================
   Portfolio: the projects, one chapter each. Every chapter is a screen tall on one calm flat colour (its palette
   above), with the project in it: the apps as still pictures of their home screens, the websites as a still of the
   real site that opens it when clicked. The previews are still: nothing moves with the scroll
   ========================================================= */
.pj { position: relative; } /* clipped: nothing in a chapter is pinned */
.world .world__in { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 0; }
.world__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.world__copy { display: grid; gap: 22px; justify-items: start; }
/* the chapter in its palette (the concepts' own title fonts are set further down) */
.pj .world { background: var(--w-bg); color: var(--w-fg); }
/* the monkey, dressed for the project, posing with its work: a still picture (media/monkeys/*.svg), loaded only as its
   chapter comes near, drawn once and never animated. It never covers the work: beside an app's phone on wide screens,
   otherwise standing on the top edge of the phone or browser window */
.world__mk { position: absolute; z-index: 3; pointer-events: none; height: auto; }
.world--jc .world__mk, .world--gh .world__mk { left: 2%; bottom: 0; width: clamp(120px, 10.5vw, 160px); }
.world--cx .world__mk { right: 7%; bottom: calc(100% - 18px); width: clamp(96px, 8vw, 124px); }
@media (max-width: 860px) {
  .world__stage:has(.world__mk) { margin-top: 96px; }
  .world--jc .world__mk, .world--gh .world__mk, .world--cx .world__mk { left: auto; right: 12%; width: 80px; }
  .world--jc .world__mk, .world--gh .world__mk { bottom: calc(100% - 6px); }
  .world--cx .world__mk { right: 6%; }
}
/* the label is the work's museum plaque on its wall */
.pj .world .world__label { color: var(--w-acc); padding: 7px 11px 6px; border: 1px solid var(--w-line); border-radius: 3px; }
.pj .world .world__title { color: var(--w-fg); }
.pj .world .lede, .pj .world .morph-line, .pj .world .world__meta .mono { color: var(--w-mute); }
.pj .world .morph { color: var(--w-acc); }
.pj .world .wc__note { color: var(--w-fg); }
.pj .world .wc__note::before { color: var(--w-acc); }
.world__title { margin: 0; font-size: clamp(40px, 4.4vw, 72px); }
.world__meta { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.pj .world .world__meta { border-color: var(--w-line); }
.world__meta div { display: grid; gap: 4px; }
.world__meta b { font-weight: 500; font-size: 15px; }
.world__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pj .world .btn { background: transparent; color: var(--w-fg); border-color: var(--w-line); --btn-fill: var(--w-fg); }
.pj .world .btn--solid { background: var(--w-btn); color: var(--w-btn-fg); border-color: transparent; }
.pj .world .btn:hover, .pj .world .btn:focus-visible { color: var(--w-bg); }
.world__stage { position: relative; display: grid; justify-items: center; }

/* the websites: a still from the real site in the window (a phone-shaped one on phones, with the phone layout); a click
   opens the real site */
.device--lg .pv { display: block; overflow: clip; background: #1c1631 top center / cover no-repeat; color: inherit; cursor: pointer; }
.pv__open { position: absolute; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 99px; background: rgba(10, 8, 18, .72); color: #fff; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease-out); }
.pv:hover .pv__open, .pv:focus-visible .pv__open { opacity: 1; transform: none; }
@media (hover: none) {
 .pv__open { opacity: 1; transform: none; }}

@media (max-width: 700px) {
 .device--lg .device__view.pv { aspect-ratio: 390 / 720; }}

.world .morph-line { margin: 0; }
.lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
.world:not(.is-near) .lp * { animation: none !important; }

/* an app's phone: its home screen, recreated from the real app; a still picture */
.lp { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; pointer-events: none; }
.lp__device { --pw: clamp(210px, min(17vw, 28vh), 280px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 40px 70px -34px rgba(0, 0, 0, .55); }
.lp .jca-page { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .55s; }
.lp .jca-page::-webkit-scrollbar { display: none; }
.lp .jca-page:not([data-page="home"]) { transform: translateX(100%); box-shadow: calc(var(--u) * -20) 0 calc(var(--u) * 40) rgba(0, 0, 0, .08); }
.lp .jca-page.is-on { transform: none; }
.lp [data-go] { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, transform .2s; }
.lp [data-go]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.ghp { --u: calc(100cqw / 390); position: absolute; inset: 0; overflow: hidden; color: #fff; text-align: left; font-family: var(--f-body); background: radial-gradient(90% 45% at 50% 0%, #4a1d7a, rgba(74, 29, 122, 0) 70%), linear-gradient(180deg, #1f0c38, #12071f); }
.ghp .device__sb { color: #fff; }
.ghp__head { display: grid; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 16); }
.ghp__head small { font: 600 calc(var(--u) * 12)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #ffb3cf; }
.ghp__head b { font: 800 calc(var(--u) * 32)/1 var(--f-display); letter-spacing: -.03em; }
.ghp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 14) calc(var(--u) * 12); }
.ghp__tile { display: grid; justify-items: center; gap: calc(var(--u) * 6); min-width: 0; color: #fff; -webkit-tap-highlight-color: transparent; }
.ghp__tile i { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: calc(var(--u) * 18); font: 700 calc(var(--u) * 26)/1 var(--f-display); font-style: normal; background: linear-gradient(145deg, hsl(var(--h) 85% 66%), hsl(var(--h) 72% 48%)); box-shadow: 0 calc(var(--u) * 4) 0 hsl(var(--h) 60% 32%), 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(0, 0, 0, .35); transition: transform .45s var(--ease-spring); }
.ghp__tile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--u) * 11.5); opacity: .85; }
.ghp__tile:active i { transform: scale(.9); }
.ghp__scores { display: grid; gap: calc(var(--u) * 10); }
.ghp__scores > span { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 16); background: rgba(255, 255, 255, .07); font-size: calc(var(--u) * 15); }
.ghp__scores i { display: grid; place-items: center; width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: calc(var(--u) * 10); font-style: normal; font-size: calc(var(--u) * 15); background: hsl(var(--h) 80% 58%); }
.ghp__scores b { margin-left: auto; font: 700 calc(var(--u) * 19)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ghp__tabs { position: absolute; left: calc(var(--u) * 22); right: calc(var(--u) * 22); bottom: calc(var(--u) * 22); display: grid; grid-template-columns: 1fr 1fr; padding: calc(var(--u) * 5); border-radius: 99px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ghp__tabs button { padding: calc(var(--u) * 11) 0; border-radius: 99px; font: 600 calc(var(--u) * 14)/1 var(--f-body); color: rgba(255, 255, 255, .7); transition: background .3s, color .3s; }
.ghp__tabs button.is-on { background: var(--candy); color: #fff; }
/* the concepts keep their own sites' title fonts */
.world--cx.world--hl .world__title { font: 900 clamp(56px, 6.4vw, 104px)/.9 "Big Shoulders Display", Impact, "Arial Narrow", sans-serif; letter-spacing: .01em; text-transform: uppercase; }
.world--cx.world--mr .world__title { font: 400 clamp(60px, 6.6vw, 112px)/.95 "Instrument Serif", "Times New Roman", serif; letter-spacing: -.01em; }
.world--cx.world--fl .world__title { font: italic 400 clamp(60px, 6.6vw, 112px)/.95 "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; letter-spacing: -.01em; }
.world--cx.world--kl .world__title { font: 400 clamp(60px, 6.6vw, 112px)/.92 "Fraunces", Georgia, serif; letter-spacing: -.045em; }
.world--cx.world--la .world__title { font: 400 clamp(56px, 6.2vw, 104px)/.95 "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; letter-spacing: -.02em; }
.world--cx .world__title { font: italic 400 clamp(46px, 5vw, 84px)/1 "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; letter-spacing: -.01em; color: #f1e6cc; }
.world--cx .world__label { color: #e9a23b; }
.world--cx .btn--solid { background: #e9a23b; color: #1c1631; }
.world--cx .world__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.world--cx .lede, .world--cx .morph-line, .world--cx .world__meta .mono { color: rgba(241, 230, 204, .8); }
.world--cx .world__meta { border-color: rgba(241, 230, 204, .22); }
.wc__sheet { gap: 14px; padding-top: 16px; }
.wc__sheet .device--lg { position: relative; z-index: 1; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 40px 70px -34px rgba(0, 0, 0, .55); }
.wc__tape { position: absolute; z-index: 2; top: 2px; width: 96px; height: 30px; background: rgba(255, 250, 240, .55); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.wc__tape--l { left: 4%; transform: rotate(-8deg); } .wc__tape--r { right: 4%; transform: rotate(7deg); }
.wc__note { position: relative; z-index: 2; margin: 0; font: 500 clamp(15px, 1.2vw, 19px)/1.2 var(--f-display); font-style: italic; letter-spacing: -.01em; color: #f1e6cc; }
.wc__note::before { content: "↗ "; color: #e9a23b; }
/* the restaurants' menu cards: a bone table card leaning on the browser's corner, with a QR code to scan for the menu.
   Only for scanning, not a link: Filo's leans on the left corner, Little Kiln's on the right */
.menu-qr {
  position: absolute; z-index: 2; left: -3%; bottom: 64px; display: grid; justify-items: center; gap: 7px; width: clamp(118px, 10vw, 148px);
  padding: 14px 14px 12px; border-radius: 3px; background: #ede7dd; color: #191817; transform: rotate(-5deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 22px 34px -16px rgba(0, 0, 0, .65);
}
.menu-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.menu-qr__t { font: italic 400 21px/1 "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; }
.menu-qr__s { font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #57544e; }
.menu-qr--kl { left: auto; right: -3%; background: #f3ebe0; color: #16100c; transform: rotate(5deg); }
.menu-qr--kl .menu-qr__t { font: italic 400 22px/1 "Fraunces", Georgia, serif; letter-spacing: -.02em; }
.menu-qr--kl .menu-qr__s { color: #6b5a4c; }

@media (max-width: 860px) {

  .world__in, .world--cx .world__in { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
  /* on phones the preview comes straight after the title and its line, before the longer text */
  .world__copy { display: contents; }
  .world__label { order: 1; } .world__title { order: 2; } .world .morph-line { order: 3; }
  .world__stage { order: 4; justify-self: stretch; margin-block: 30px 22px; }
  .world .lede { order: 5; } .world__meta { order: 6; } .world__actions { order: 7; }
  .lp__device { --pw: min(290px, 74vw); }
  .wc__tape { width: 70px; height: 24px; }
  .menu-qr { left: -6px; bottom: 54px; width: 96px; padding: 9px 9px 8px; gap: 5px; }
  .menu-qr--kl { left: auto; right: -6px; }
  .menu-qr__t, .menu-qr--kl .menu-qr__t { font-size: 16px; } .menu-qr__s { font-size: 6.5px; letter-spacing: .08em; }}

/* phones: the previews stand at about four fifths of the width, centred, so a chapter's text stays in view beside them */
@media (max-width: 700px) {
  .world__stage { justify-self: center; width: min(310px, 80vw); }
  .lp__device { --pw: min(265px, 68vw); }
  /* the website windows become an iPhone in Safari: the frame and the island, a status bar on top and Safari's
     address bar at the foot (the dots of the desktop window are hidden; the still is already the phone layout) */
  .device--lg { display: flex; flex-direction: column; padding: 9px; border-radius: 46px; background: linear-gradient(145deg, #3c3f55, #14161f 55%, #2b2e40); }
  .device--lg::before { content: "9:41"; flex: none; height: 38px; padding: 15px 0 0 13%; border-radius: 37px 37px 0 0; background: #000; color: #fff; font: 600 12.5px/1 -apple-system, "SF Pro Text", var(--f-body); }
  .device--lg::after { content: ""; position: absolute; top: 19px; left: 50%; width: 30%; height: 21px; translate: -50% 0; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px #111; }
  .device--lg .device__bar { order: 1; position: relative; flex: none; height: auto; padding: 8px 12px 24px; border: 0; border-radius: 0 0 37px 37px; background: #1c1c1e; }
  .device--lg .device__bar > i { display: none; }
  .device--lg .device__url { height: 36px; margin: 0; max-width: none; border-radius: 12px; background: #3a3a3c; color: #fff; font: 500 13px/36px -apple-system, "SF Pro Text", var(--f-body); }
  .device--lg .device__bar::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 36%; height: 4px; translate: -50% 0; border-radius: 99px; background: rgba(255, 255, 255, .85); }}

/* Jewish Companion's live phone: the five books on a carousel, a reading page, Shabbat's rules and lighting steps */
.lp .jca-carousel { overflow: hidden; padding-bottom: calc(var(--u) * 10); }
.lp .jca-book { cursor: pointer; transition: transform .3s var(--ease-out); }
.lp .jca-book:active { transform: scale(.96); }
.lp .jca-arrow { z-index: 1; cursor: pointer; transition: opacity .3s; }
.lp .jca-arrow--prev { opacity: 1; }
.lp .jca-arrow.is-off { opacity: .35; pointer-events: none; }
.lp .jca-dots i:first-child { width: calc(var(--u) * 5); background: #cfd3de; }
.lp .jca-dots i { transition: width .35s, background .35s; }
.lp .jca-dots i.is-on { width: calc(var(--u) * 16); background: #4d63a0; }
.lp .jca-pill span { cursor: pointer; transition: background .3s, color .3s; }
.lp .jca-pill span:first-child { background: none; color: inherit; }
.lp .jca-pill span.is-on { border-radius: calc(var(--u) * 23); background: #dfddd8; color: #a3a3a6; }
.lp .jca-bless__f { cursor: pointer; }
.lp .jca-bless__f svg { transition: transform .3s; }
.lp .jca-page[data-page="shabbat"] { padding-bottom: calc(var(--u) * 86); }
.lp .jca-parasha, .lp .jca-today > div:last-child { cursor: pointer; }