/* What: the public home's own pieces - the live countdown strip, the "who it is for" ticket, the journey and its artefacts, the reveals, the wall of partner plaques.
   Use: linked by Site/views/home.php after app.css; home.js drives the clock, the autoplay, the tilt, the light on the plaque and the reveals.
   Needs: tokens.css, app.css (.card-hero, .ticket, .btn-gold). Logical properties only. */

/* ---------- 1. The hero ---------- */
/* The photographs lean a little toward the pointer: the one place on the page a visitor's hand moves
   something. home.js writes --tilt-x and --tilt-y; without it they are 0 and the mosaic lies flat. */
.hero-mosaic[data-tilt] { transform: perspective(1100px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform 260ms var(--ease-out); will-change: transform; }
.hero-mosaic figure { transition: box-shadow var(--dur-base) var(--ease-out); }
.hero-mosaic figure:hover { box-shadow: var(--shadow-3); }

/* The next workshop, as one line under the hero - under the photographs, never over them. A clock
   that runs to the second, what it is counting to, and the whole strip is the way down to the seat. */
.next-strip { position: relative; display: grid; gap: var(--space-4) var(--space-7); align-items: center;
  grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-8); padding: var(--space-5) var(--space-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2); color: var(--text); text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.next-strip:hover { border-color: var(--teal-100); box-shadow: var(--shadow-3); text-decoration: none; }
.next-strip:hover .next-go .icon { transform: translateY(3px); }
.next-count { display: grid; gap: var(--space-2); justify-items: start; }
.next-count .eyebrow { margin: 0; }
.next-cells { display: flex; gap: var(--space-2); }
.next-cells > span { display: grid; justify-items: center; min-inline-size: 62px; padding: var(--space-2) var(--space-3);
  background: var(--ink-50); border: 1px solid var(--border); border-radius: var(--radius-md); }
.next-cells b { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 26px; font-weight: 600;
  line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--primary); }
.next-cells small { font-size: 11px; font-weight: 500; color: var(--text-muted); }
/* The seconds are the part that moves, so they are the part allowed to draw the eye. */
.next-cells > span:last-child { background: var(--primary-soft); border-color: var(--teal-100); }
.next-running { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--fs-xl); font-weight: 600;
  font-family: var(--font-display), var(--font-arabic), sans-serif; color: var(--primary); }
.next-running i { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--primary);
  animation: home-pulse 1.8s var(--ease-out) infinite; }
@keyframes home-pulse { from { box-shadow: 0 0 0 0 var(--primary-soft); } to { box-shadow: 0 0 0 12px transparent; } }
.next-what { display: grid; gap: 4px; min-inline-size: 0; }
.next-what strong { font-family: var(--font-display), var(--font-arabic), sans-serif; font-size: var(--fs-xl);
  font-weight: 600; line-height: 1.35; }
.next-what > span { font-size: var(--fs-sm); color: var(--text-muted); }
.next-go { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; font-size: var(--fs-sm);
  font-weight: 600; color: var(--primary); white-space: nowrap; }
.next-go .icon { inline-size: 18px; block-size: 18px; transition: transform var(--dur-fast) var(--ease-out); }
@media (min-width: 900px) {
  .next-strip { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--space-5) var(--space-7); }
  .next-what { padding-inline-start: var(--space-7); border-inline-start: 1px solid var(--border); }
  .next-go { justify-self: end; }
}
@media (max-width: 479px) { .next-cells > span { min-inline-size: 0; flex: 1; } .next-cells { inline-size: 100%; } }

/* ---------- 2. The ticket: stub, body, seat ---------- */
/* A real ticket is three parts with a perforation between each. The START DATE is the stub: full
   height, labelled, in the deep green of the mark. The body reads like a boarding pass - the title,
   then labelled fields, and the first of them, WHO IS IT FOR, carries the one filled mark. The seat
   is the part that tears off. Two loose green boxes beside the title said the same things with none
   of that order, and squeezed the title onto two lines. */
.site-main > .section:last-of-type { margin-block-end: 0; }
.ticket-pass { display: grid; grid-template-columns: minmax(0, 1fr); box-shadow: var(--shadow-2); }

.ticket-day { position: relative; margin: 0; display: flex; align-items: baseline; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); color: var(--text-on-brand);
  background: linear-gradient(165deg, color-mix(in srgb, var(--teal-700) 86%, #fff) 0%, var(--teal-700) 58%);
  border-start-start-radius: calc(var(--radius-xl) - 1px); border-start-end-radius: calc(var(--radius-xl) - 1px); }
.ticket-day small { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--teal-100); }
.ticket-day b { font-family: var(--font-display), sans-serif; font-size: 30px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; }
.ticket-day span { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-400); }
.ticket-day i { font-style: normal; font-size: var(--fs-xs); font-weight: 500; color: var(--teal-100); }
html[lang="ar"] :is(.ticket-day small, .ticket-day span, .ticket-fields dt) { font-family: var(--font-body), var(--font-arabic), sans-serif;
  letter-spacing: 0; text-transform: none; }
html[lang="ar"] .ticket-day small, html[lang="ar"] .ticket-fields dt { font-size: var(--fs-xs); font-weight: 600; }

.ticket-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: center; min-inline-size: 0; padding: var(--space-6); }
.ticket-head { display: grid; gap: 4px; }
.ticket-head .eyebrow { margin: 0; }
.ticket-head h2 { margin: 0; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35; }
.ticket-head h2 a { color: var(--text); text-decoration: none; }
.ticket-head h2 a:hover { color: var(--primary); }

/* The boarding-pass row: a small label over each value, all on one baseline. */
.ticket-fields { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin: 0; }
.ticket-fields > div { display: grid; gap: 6px; align-content: start; }
.ticket-fields dt { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.ticket-fields dd { margin: 0; min-block-size: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.for-pill { display: inline-flex; align-items: center; gap: 7px; min-block-size: 30px; padding-block: 2px; padding-inline: 11px 14px;
  border-radius: var(--radius-pill); background: var(--primary); color: var(--text-on-brand);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; box-shadow: 0 6px 14px -8px var(--primary); }
.for-pill .icon { flex: none; inline-size: 15px; block-size: 15px; }

/* The topic reel itself (.topic-reel, .reel-cell) lives in app.css: the workshop's own page uses it too. On a ticket it is THIN
   (owner, 2026-09-21: every ticket the size of the first) - one line of three tabs, its label printed on the hairline above them
   the way a boarding pass names its sections. The lit tab opens to its full words; the other two wait, cut short, until the light
   or a pointer reaches them. On a phone the three are full-width lines, nothing cut. */
/* minmax(0, 1fr): the tabs' words do not wrap, and an auto track would grow to fit them and push the row under the seat. */
.topic-reel.is-thin { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding-block-start: var(--space-5); }
.topic-reel.is-thin .topic-reel-label { position: absolute; inset-block-start: 0; inset-inline-start: 0; translate: 0 -50%;
  padding-inline-end: var(--space-3); background: var(--surface); }
.topic-reel.is-thin ul { display: flex; flex-direction: column; gap: 6px; }
.topic-reel.is-thin li { min-inline-size: 0; }
.topic-reel.is-thin .reel-cell { display: flex; align-items: center; block-size: auto; min-block-size: 38px; padding: 6px var(--space-4);
  border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: 1.45; }
.topic-reel.is-thin .reel-cell > span[dir] { flex: 1 1 auto; min-inline-size: 0; }
.topic-reel.is-thin .reel-bar { block-size: 2px; }
.topic-reel.is-thin .reel-cell:hover, .topic-reel.is-thin .reel-cell:focus-visible, .topic-reel.is-thin li.is-on .reel-cell { transform: none; box-shadow: var(--shadow-1); }
@media (min-width: 640px) {
  .topic-reel.is-thin ul { flex-direction: row; gap: var(--space-2); }
  .topic-reel.is-thin li { flex: 1 1 0; transition: flex-grow 520ms var(--ease-out); }
  .topic-reel.is-thin li:is(.is-on, :hover, :focus-within) { flex-grow: 2.2; }
  .topic-reel.is-thin .reel-cell { padding-block: 0; }
  .topic-reel.is-thin .reel-cell > span[dir] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .topic-reel.is-thin li { transition: none; } }
/* Every upcoming workshop is a ticket; they stand one under the other with room to breathe. */
.ticket-stack { display: grid; gap: var(--space-6); }
/* Every seat is gold now, so the sheens take turns instead of crossing all the buttons at the same instant. */
.ticket-stack .ticket:nth-child(odd) .btn-gold::after { animation-delay: 3.1s; }
.ticket-stack .ticket:nth-child(even) .btn-gold::after { animation-delay: 4.9s; }

/* The seat sells in the space the first ticket has: the "Save 33%" flag is a sticker on the ticket's corner, not a line of its own. */
.ticket-aside .sale { gap: var(--space-1); }
.ticket-aside .sale-flag { position: absolute; inset-block-start: calc(-1 * var(--space-3)); inset-inline-end: var(--space-5); rotate: 3deg; }

.ticket-pass > .ticket-aside { border-block-start: 1.5px dashed var(--border-strong); }

@media (min-width: 1024px) {
  .ticket-pass { grid-template-columns: 136px minmax(0, 1fr) minmax(0, 23rem); min-block-size: 20.5rem; }
  /* The stub stands up: the label, the day, the month, the year, centred down its height. */
  .ticket-day { flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--space-6) var(--space-3);
    border-start-end-radius: 0; border-end-start-radius: calc(var(--radius-xl) - 1px); }
  .ticket-day b { font-size: 56px; margin-block: 2px; }
  .ticket-day span { font-size: var(--fs-md); }
  /* The perforation: a column of holes punched through to the band behind the ticket. */
  .ticket-day::after { content: ""; position: absolute; inset-block: 14px; inset-inline-end: -5px; inline-size: 10px;
    background: radial-gradient(circle, var(--ink-50) 3.2px, transparent 3.6px) center / 10px 16px repeat-y; }
  .ticket-main { padding: var(--space-7) var(--space-8); }
  .ticket-pass > .ticket-aside { border-block-start: 0; border-inline-start: 1.5px dashed var(--border-strong); }
  .ticket-pass > .ticket-aside::before, .ticket-pass > .ticket-aside::after { content: ""; position: absolute;
    inset-inline-start: -12px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--ink-50); }
  .ticket-pass > .ticket-aside::before { inset-block-start: -12px; }
  .ticket-pass > .ticket-aside::after { inset-block-end: -12px; }
}

.card-for { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm);
  font-weight: 600; color: var(--teal-700); }
.card-for .icon { flex: none; inline-size: 16px; block-size: 16px; }

/* ---------- 3. The journey ---------- */
/* Five steps on a rail, and each one shows the thing a participant holds at that step. It plays by
   itself - the bar under the current step is its clock - and stops the moment somebody chooses. A
   radio group underneath: arrow keys work, and with no script the first step is simply open.
   Kept slim (owner 2026-09-24: "this part is so big, make it more thin"): the band breathes less, the
   rail's number sits beside its name, and the open step is one low strip with a small drawing. */
.band-slim { padding-block: var(--space-7); }
.band-slim .section-head { margin-block-end: var(--space-4); }
.journey { position: relative; display: grid; gap: var(--space-4); }
.journey > input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.journey-rail { display: none; }
/* A phone reads the five steps as one short numbered list: no drawings, which the words already say. */
.journey-panels { display: grid; gap: var(--space-2); }
.journey-panel { display: grid; gap: var(--space-4); align-items: center; grid-template-columns: minmax(0, 1fr);
  padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.journey-words { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-3); align-items: baseline; }
.journey-big { grid-row: span 2; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 500;
  letter-spacing: .12em; color: var(--gold-600); }
.journey-words h3 { margin: 0; font-size: var(--fs-lg); }
.journey-words p { margin: 0; max-inline-size: 34em; font-size: var(--fs-md); color: var(--ink-700); }
.journey-panel .artefact { display: none; }
@media (max-width: 899px) { .journey > input { display: none; } }

@media (min-width: 900px) {
  .journey-rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    list-style: none; margin: 0; padding: 0; }
  /* The rail itself: one hairline through the middle of the nodes. */
  .journey-rail::before { content: ""; position: absolute; inset-block-start: 19px; inset-inline: 10%; block-size: 2px;
    background: var(--border-strong); }
  /* The node on top; under it the number and the name on one line; the clock under both. */
  .journey-rail label { position: relative; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: baseline;
    gap: 4px var(--space-2); padding: 0 var(--space-3) var(--space-2); text-align: center; cursor: pointer; }
  .journey-rail label > .journey-node { grid-column: 1 / -1; justify-self: center; }
  .journey-rail label > .journey-bar { grid-column: 1 / -1; justify-self: center; }
  .journey-node { position: relative; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--border-strong); color: var(--ink-400);
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .journey-node .icon { inline-size: 18px; block-size: 18px; }
  .journey-rail label:hover .journey-node { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
  .journey-no { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: var(--fs-xs); font-weight: 500;
    letter-spacing: .14em; color: var(--ink-400); }
  .journey-title { font-family: var(--font-display), var(--font-arabic), sans-serif; font-size: var(--fs-md); font-weight: 600;
    color: var(--ink-700); }
  .journey-bar { position: relative; inline-size: min(96px, 80%); block-size: 3px; margin-block-start: 2px; overflow: hidden;
    border-radius: var(--radius-pill); background: transparent; }
  .journey-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0;
    border-radius: inherit; background: var(--gold-500); }

  /* The open step: its words and a small drawing of what the participant holds, in one low strip. */
  /* All five share one cell and only the open one is visible, so the strip is as tall as the tallest step and the page under it
     does not move while the steps play. */
  .journey-panels > .journey-panel { grid-area: 1 / 1; visibility: hidden; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-7); padding: var(--space-4) var(--space-7); border-radius: var(--radius-xl); }
  .journey-panel .artefact { display: grid; }
  .journey-words { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .journey-big { display: none; }
  .journey-words h3 { font-size: var(--fs-xl); }

  .journey > input:nth-of-type(1):checked ~ .journey-panels > :nth-child(1),
  .journey > input:nth-of-type(2):checked ~ .journey-panels > :nth-child(2),
  .journey > input:nth-of-type(3):checked ~ .journey-panels > :nth-child(3),
  .journey > input:nth-of-type(4):checked ~ .journey-panels > :nth-child(4),
  .journey > input:nth-of-type(5):checked ~ .journey-panels > :nth-child(5) { visibility: visible; animation: journey-in 420ms var(--ease-out) both; }

  .journey > input:nth-of-type(1):checked ~ .journey-rail > :nth-child(1) .journey-node,
  .journey > input:nth-of-type(2):checked ~ .journey-rail > :nth-child(2) .journey-node,
  .journey > input:nth-of-type(3):checked ~ .journey-rail > :nth-child(3) .journey-node,
  .journey > input:nth-of-type(4):checked ~ .journey-rail > :nth-child(4) .journey-node,
  .journey > input:nth-of-type(5):checked ~ .journey-rail > :nth-child(5) .journey-node { background: var(--primary);
    border-color: var(--primary); color: var(--text-on-brand); transform: scale(1.08); box-shadow: 0 0 0 6px var(--primary-soft); }
  .journey > input:nth-of-type(1):checked ~ .journey-rail > :nth-child(1) :is(.journey-no, .journey-title),
  .journey > input:nth-of-type(2):checked ~ .journey-rail > :nth-child(2) :is(.journey-no, .journey-title),
  .journey > input:nth-of-type(3):checked ~ .journey-rail > :nth-child(3) :is(.journey-no, .journey-title),
  .journey > input:nth-of-type(4):checked ~ .journey-rail > :nth-child(4) :is(.journey-no, .journey-title),
  .journey > input:nth-of-type(5):checked ~ .journey-rail > :nth-child(5) :is(.journey-no, .journey-title) { color: var(--primary); }

  /* The steps already walked stay lit, so the rail reads as progress and not as five tabs. */
  .journey > input:nth-of-type(2):checked ~ .journey-rail > :nth-child(-n + 1) .journey-node,
  .journey > input:nth-of-type(3):checked ~ .journey-rail > :nth-child(-n + 2) .journey-node,
  .journey > input:nth-of-type(4):checked ~ .journey-rail > :nth-child(-n + 3) .journey-node,
  .journey > input:nth-of-type(5):checked ~ .journey-rail > :nth-child(-n + 4) .journey-node { background: var(--teal-50);
    border-color: var(--teal-100); color: var(--teal-700); }

  /* While it plays, the bar under the current step fills; when it is full home.js moves on. */
  .journey.is-auto > input:nth-of-type(1):checked ~ .journey-rail > :nth-child(1) .journey-bar,
  .journey.is-auto > input:nth-of-type(2):checked ~ .journey-rail > :nth-child(2) .journey-bar,
  .journey.is-auto > input:nth-of-type(3):checked ~ .journey-rail > :nth-child(3) .journey-bar,
  .journey.is-auto > input:nth-of-type(4):checked ~ .journey-rail > :nth-child(4) .journey-bar,
  .journey.is-auto > input:nth-of-type(5):checked ~ .journey-rail > :nth-child(5) .journey-bar { background: var(--ink-100); }
  .journey.is-auto > input:nth-of-type(1):checked ~ .journey-rail > :nth-child(1) .journey-bar::after,
  .journey.is-auto > input:nth-of-type(2):checked ~ .journey-rail > :nth-child(2) .journey-bar::after,
  .journey.is-auto > input:nth-of-type(3):checked ~ .journey-rail > :nth-child(3) .journey-bar::after,
  .journey.is-auto > input:nth-of-type(4):checked ~ .journey-rail > :nth-child(4) .journey-bar::after,
  .journey.is-auto > input:nth-of-type(5):checked ~ .journey-rail > :nth-child(5) .journey-bar::after {
    animation: journey-fill 5.5s linear both; }
  .journey.is-auto.is-paused .journey-bar::after { animation-play-state: paused; }

  .journey > input:nth-of-type(1):focus-visible ~ .journey-rail > :nth-child(1) .journey-node,
  .journey > input:nth-of-type(2):focus-visible ~ .journey-rail > :nth-child(2) .journey-node,
  .journey > input:nth-of-type(3):focus-visible ~ .journey-rail > :nth-child(3) .journey-node,
  .journey > input:nth-of-type(4):focus-visible ~ .journey-rail > :nth-child(4) .journey-node,
  .journey > input:nth-of-type(5):focus-visible ~ .journey-rail > :nth-child(5) .journey-node {
    outline: 2px solid var(--focus); outline-offset: 3px; }
}
@keyframes journey-fill { from { inline-size: 0; } to { inline-size: 100%; } }
@keyframes journey-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 4. The artefacts ---------- */
/* Small drawings of the platform's own screens, built from its own parts. They are pictures, so the
   page hides them from a screen reader; the words beside each one say what it shows. */
.artefact { display: grid; place-items: center; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--ink-50), var(--primary-soft)); border: 1px solid var(--border); }
.art-card { position: relative; display: grid; gap: var(--space-2); inline-size: min(280px, 100%); padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.art-card p { margin: 0; }
.art-title { font-weight: 600; font-size: var(--fs-sm); }
.art-line, .art-field { display: block; block-size: 10px; border-radius: var(--radius-pill); background: var(--ink-100); }
.art-line-short { inline-size: 55%; }
.art-line-name { block-size: 14px; inline-size: 80%; background: var(--ink-300); }
.art-field { position: relative; block-size: 24px; border-radius: var(--radius-md); background: var(--surface);
  border: 1px solid var(--border-strong); overflow: hidden; }
.art-field i { position: absolute; inset-block: 8px; inset-inline-start: 10px; inline-size: 0; border-radius: var(--radius-pill);
  background: var(--ink-300); }
.art-field-short { inline-size: 60%; }
.art-gold { display: grid; place-items: center; min-block-size: 28px; border-radius: var(--radius-md); font-size: var(--fs-xs);
  font-weight: 700; color: #33240A; border: 1px solid #A47718;
  background: linear-gradient(180deg, #F8E7AE, #ECCB6A 30%, #D2A436 62%, #B48317); }
.art-stamp { position: absolute; inset-block-start: -12px; inset-inline-end: -10px; display: inline-flex; align-items: center;
  gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--teal-50); border: 1px solid var(--teal-100);
  color: var(--teal-700); font-size: var(--fs-xs); font-weight: 600; transform: rotate(4deg); }
.art-stamp .icon { inline-size: 14px; block-size: 14px; }

.art-pass { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.art-pass > div { display: grid; gap: var(--space-2); }
.art-date { display: grid; place-items: center; inline-size: 46px; block-size: 48px; border-radius: var(--radius-md);
  background: var(--teal-700); color: var(--text-on-brand); font-family: var(--font-display), sans-serif; font-size: 20px; font-weight: 600; }
.art-live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--primary); }
.art-live i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--primary); }
.art-join { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 28px; border-radius: var(--radius-md); background: var(--primary); color: var(--text-on-brand);
  font-size: var(--fs-sm); font-weight: 600; }
.art-join .icon { inline-size: 16px; block-size: 16px; }

.art-row { display: flex; align-items: center; gap: var(--space-3); padding: 5px var(--space-3); border-radius: var(--radius-md);
  background: var(--ink-50); font-size: var(--fs-sm); font-weight: 500; }
.art-row > .icon { inline-size: 16px; block-size: 16px; color: var(--primary); }
.art-row span { flex: 1; }
.art-row b { display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--teal-50);
  color: var(--teal-700); }
.art-row b .icon { inline-size: 12px; block-size: 12px; }

.art-stars { display: flex; gap: 6px; color: var(--ink-300); }
.art-stars .icon { inline-size: 22px; block-size: 22px; }

.art-cert { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; border-block-start: 3px solid var(--gold-500); }
.art-cert > div { display: grid; gap: var(--space-2); }
.art-seal { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--gold-50);
  border: 1px dashed var(--gold-500); color: var(--gold-600); }
.art-seal .icon { inline-size: 20px; block-size: 20px; }
.art-code { font-size: var(--fs-xs); color: var(--ink-700); letter-spacing: .06em; }
.art-qr { inline-size: 44px; block-size: 44px; border-radius: 6px; background-color: var(--surface);
  background-image: conic-gradient(var(--ink-900) 25%, transparent 0 50%, var(--ink-900) 0 75%, transparent 0);
  background-size: 11px 11px; border: 3px solid var(--ink-900); }

/* Each drawing does its one thing when its step opens: the form fills, the pass goes live, the rows
   tick, the stars light, the seal lands. Keyed to the open panel, so it replays every visit. */
@media (prefers-reduced-motion: no-preference) {
  .journey-panel .art-card { animation: art-in 520ms var(--ease-out) 80ms both; }
  .art-field i { animation: art-type 900ms var(--ease-out) 300ms both; }
  .art-field:nth-of-type(2) i { animation-delay: 650ms; }
  .art-field-short i { animation-delay: 1000ms; }
  .art-stamp { animation: art-stamp 420ms var(--ease-out) 1700ms both; }
  .art-live i { animation: home-pulse 1.6s var(--ease-out) infinite; }
  .art-row { animation: art-in 380ms var(--ease-out) both; }
  .art-row:nth-child(2) { animation-delay: 160ms; }
  .art-row:nth-child(3) { animation-delay: 320ms; }
  .art-stars .icon { animation: art-star 300ms var(--ease-out) both; animation-delay: calc(300ms + var(--i, 0) * 170ms); }
  .art-stars .icon:nth-child(2) { --i: 1; } .art-stars .icon:nth-child(3) { --i: 2; }
  .art-stars .icon:nth-child(4) { --i: 3; } .art-stars .icon:nth-child(5) { --i: 4; }
  .art-seal { animation: art-stamp 460ms var(--ease-out) 500ms both; }
}
.art-field i { inline-size: 62%; }
.art-stars .icon { color: var(--gold-500); fill: var(--gold-400); }
@keyframes art-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes art-type { from { inline-size: 0; } }
@keyframes art-stamp { from { opacity: 0; transform: scale(1.6) rotate(-8deg); } }
@keyframes art-star { from { color: var(--ink-300); fill: transparent; transform: scale(.6); } }

/* ---------- 5. Reveals ---------- */
/* home.js adds .reveal-on to <html> before it watches anything, so without the script nothing is
   ever hidden; with it, a block rises into place the first time it is scrolled to. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on [data-reveal] { opacity: 0; transform: translateY(22px);
    transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
  .reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
}
.card-album { overflow: hidden; }
.card-album .album-cover { transition: transform 600ms var(--ease-out); }
.card-album:hover .album-cover { transform: scale(1.04); }

/* ---------- 6. The partners ---------- */
/* A partner's logo is somebody else's mark, so it is shown the way an institute shows one at its own
   door: alone, on white, in a brass frame with four pins - never cropped, tinted or set in motion.
   What moves is the light. The plaque is a small thing - a door plate, not a poster - and it is not
   a link: only the host under the logo is, so it can be brushed and lit without anybody leaving.

   Nobody is hidden behind a switcher: .partner-wall is a lobby directory - one board, hairlines
   between the places (the 1px gap shows the board's own colour), every partner on it at once. Two
   places to a row from 1100px; an odd one out is the first, and it takes the whole top row with
   the full-size plaque and its workshops beside it (:first-child:nth-last-child(odd) - so one
   partner alone is that row too). home.js passes ONE light over the whole wall: every plaque gets
   the pointer's place in its own box as --at-x/--at-y, so the glint spills from a plaque onto its
   neighbour. The first time the wall is scrolled to, a sheen crosses each plaque in turn. */
.partner-wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--border); }
.partner-cell { display: grid; gap: var(--space-4); align-items: start; min-inline-size: 0; padding: var(--space-4);
  grid-template-columns: 116px minmax(0, 1fr); grid-template-areas: "plaque story" "shots shots";
  background: var(--bg); transition: background var(--dur-slow) var(--ease-out); }
.partner-cell:hover, .partner-cell:focus-within { background: var(--surface); }
.partner-cell > .plaque { grid-area: plaque; align-self: stretch; }
.partner-cell > .partner-story { grid-area: story; align-self: center; }
.partner-cell > .partner-shots { grid-area: shots; }

.plaque { position: relative; display: grid; justify-items: center; align-items: center; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-2);
  min-block-size: 140px; padding: var(--space-5) var(--space-3) var(--space-4); overflow: hidden; border-radius: 16px;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad-gold) border-box;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px var(--gold-100), var(--shadow-1);
  transform: perspective(1100px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform 260ms var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.plaque::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 230px at var(--at-x, 50%) var(--at-y, 30%), rgba(201, 162, 39, .24), transparent 70%);
  transition: opacity 320ms var(--ease-out); }
.plaque:hover, .plaque:focus-within { box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px var(--gold-400), var(--shadow-2); }
.plaque:hover::after, .plaque:focus-within::after, .partner-wall.is-lit .plaque::after { opacity: 1; }
/* The sheen: a band of brass light that crosses the plaque once. It moves as a background position,
   so it crosses the same way whichever way the page reads. */
.plaque::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(201, 162, 39, .10) 46%, rgba(201, 162, 39, .30) 50%, rgba(201, 162, 39, .10) 54%, transparent 58%) no-repeat;
  background-size: 300% 100%; }
.reveal-on .partner-wall.is-in .plaque::before { animation: plaque-sheen 1300ms var(--ease-in-out) 450ms both; }
.reveal-on .partner-wall.is-in > :nth-child(2) .plaque::before { animation-delay: 600ms; }
.reveal-on .partner-wall.is-in > :nth-child(3) .plaque::before { animation-delay: 750ms; }
.reveal-on .partner-wall.is-in > :nth-child(4) .plaque::before { animation-delay: 900ms; }
.reveal-on .partner-wall.is-in > :nth-child(5) .plaque::before { animation-delay: 1050ms; }
.reveal-on .partner-wall.is-in > :nth-child(6) .plaque::before { animation-delay: 1200ms; }
.reveal-on .partner-wall.is-in > :nth-child(n+7) .plaque::before { animation-delay: 1350ms; }
@keyframes plaque-sheen { 0% { opacity: 0; background-position: 100% 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; background-position: 0% 0; } }
.plaque-pin { position: absolute; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F6E7B0, var(--gold-500) 55%, var(--gold-700));
  box-shadow: 0 1px 1px rgba(11, 31, 26, .28); }
.plaque-pin:nth-of-type(1) { inset-block-start: 12px; inset-inline-start: 12px; }
.plaque-pin:nth-of-type(2) { inset-block-start: 12px; inset-inline-end: 12px; }
.plaque-pin:nth-of-type(3) { inset-block-end: 12px; inset-inline-start: 12px; }
.plaque-pin:nth-of-type(4) { inset-block-end: 12px; inset-inline-end: 12px; }
/* The engraved label needs room: on the narrowest plaque the section's own title says it. */
.plaque-label { display: none; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 9px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--gold-700); }
html[lang="ar"] .plaque-label { font-family: var(--font-body), var(--font-arabic), sans-serif; font-size: var(--fs-xs);
  font-weight: 600; letter-spacing: 0; }
.plaque-logo { display: block; max-inline-size: min(100%, 84px); max-block-size: 84px; object-fit: contain; }
.plaque-host { display: inline-flex; align-items: center; gap: 4px; max-inline-size: 100%; font-size: var(--fs-xs); font-weight: 500;
  line-height: 1.3; text-align: center; overflow-wrap: anywhere; color: var(--primary); text-decoration: none; border-radius: 4px; }
.plaque-host .icon { flex: none; inline-size: 12px; block-size: 12px; }
.plaque-host:hover { text-decoration: underline; }
.plaque-host:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.partner-story { display: grid; gap: var(--space-3); align-content: center; min-inline-size: 0; }
.partner-story h3 { margin: 0; max-inline-size: 24em; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.35; overflow-wrap: anywhere; }
html[lang="ar"] .partner-story h3 { line-height: 1.55; }
.partner-facts { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.partner-facts b { font-family: var(--font-display), sans-serif; font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--primary); }
.partner-facts > span { display: grid; gap: 1px; padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--gold-400); }
.partner-facts strong { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); }
.partner-facts small { font-size: var(--fs-xs); color: var(--text-muted); }
/* Two workshops beside a plaque; the third only where the top row gives it room. */
.partner-shots { display: grid; gap: var(--space-3); max-inline-size: 400px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partner-shots > li { min-inline-size: 0; }
.partner-shots > li:nth-child(n+3) { display: none; }
.partner-shot { display: grid; block-size: 100%; align-content: start; overflow: hidden; text-decoration: none; color: inherit;
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
a.partner-shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--gold-400); }
a.partner-shot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.partner-shot img { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 600ms var(--ease-out); }
a.partner-shot:hover img { transform: scale(1.05); }
.partner-shot-date { display: grid; place-items: center; align-content: center; gap: 2px; aspect-ratio: 16 / 10; color: #fff;
  background: linear-gradient(160deg, var(--teal-600), var(--teal-700)); }
.partner-shot-date b { font-family: var(--font-display), sans-serif; font-size: 28px; font-weight: 700; line-height: 1; }
.partner-shot-date small { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-400); }
html[lang="ar"] .partner-shot-date small { letter-spacing: 0; }
.partner-shot-date .icon { inline-size: 24px; block-size: 24px; }
.partner-shot-words { display: grid; gap: 2px; padding: var(--space-2) var(--space-3) var(--space-3); }
.partner-shot-words b { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.partner-shot-words small { font-size: var(--fs-xs); color: var(--text-muted); }
.partner-shot-words em { font-style: normal; font-weight: 600; color: var(--primary); }

/* From a tablet up the plaque has room for its engraving, and the workshops stand beside it. */
@media (min-width: 700px) {
  .partner-cell { gap: var(--space-4) var(--space-5); padding: var(--space-5);
    grid-template-columns: 196px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "plaque story" "plaque shots"; }
  .partner-cell > .partner-story { align-self: start; }
  /* A partner with no public workshop yet has only its name to say: it says it level with the logo, not from a corner. */
  .partner-cell.is-bare > .partner-story { grid-row: 1 / -1; align-self: center; }
  .partner-cell.is-bare .partner-story h3 { font-size: clamp(18px, 1.7vw, 22px); }
  .plaque { min-block-size: 200px; gap: var(--space-3); }
  .plaque-label { display: block; }
  .plaque-logo { max-inline-size: min(100%, 148px); max-block-size: 128px; }
}
@media (min-width: 1100px) {
  .partner-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The odd one out - or the only one - takes the top row: the full door plate, the name, and three workshops. */
  .partner-cell:first-child:nth-last-child(odd) { grid-column: 1 / -1; align-items: center; gap: var(--space-7); padding: var(--space-6);
    grid-template-columns: 224px minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: "plaque story shots"; }
  .partner-cell:first-child:nth-last-child(odd) > .partner-story { align-self: center; gap: var(--space-4); }
  .partner-cell:first-child:nth-last-child(odd) .partner-story h3 { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; }
  html[lang="ar"] .partner-cell:first-child:nth-last-child(odd) .partner-story h3 { line-height: 1.5; }
  .partner-cell:first-child:nth-last-child(odd) .partner-facts b { font-size: 36px; }
  .partner-cell:first-child:nth-last-child(odd) .partner-facts strong { font-size: var(--fs-md); }
  .partner-cell:first-child:nth-last-child(odd) .partner-facts small { font-size: var(--fs-sm); }
  .partner-cell:first-child:nth-last-child(odd) .plaque { min-block-size: 236px; padding: var(--space-6) var(--space-5) var(--space-5); border-radius: 18px; }
  .partner-cell:first-child:nth-last-child(odd) .plaque-label { font-size: 10px; letter-spacing: .18em; }
  html[lang="ar"] .partner-cell:first-child:nth-last-child(odd) .plaque-label { font-size: var(--fs-xs); letter-spacing: 0; }
  .partner-cell:first-child:nth-last-child(odd) .plaque-logo { max-inline-size: min(100%, 160px); max-block-size: 140px; }
  .partner-cell:first-child:nth-last-child(odd) .plaque-host { gap: 6px; font-size: var(--fs-sm); }
  .partner-cell:first-child:nth-last-child(odd) .plaque-host .icon { inline-size: 14px; block-size: 14px; }
  /* As wide as the workshops there are, and against the far edge: one workshop or three, the row has no hole in it. */
  .partner-cell:first-child:nth-last-child(odd) > .partner-shots { max-inline-size: none; grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 176px; }
  .partner-cell:first-child:nth-last-child(odd) > .partner-shots > li:nth-child(n+3) { display: block; }
}