/* Orli v3 site · Meet the Orlis (orlis/index.html, orlis/<id>.html)
   ---------------------------------------------------------------------------
   One calm template for every Orli. Each section has one job and one focal
   point, and the surfaces alternate so sections never blend:

     hero        world wash   the canonical render (focal), name, one line, facts
     classroom   warm         Adventures and Bites from Orli Schools, two groups
                              (Sasha: one "coming to Orli Schools" card, In
                              development, while her content is hidden there)
     world       canvas       the Higgsfield closer moment (focal), the world's
                              name in outlined Figma Hand (the one handwritten
                              word on the page)
     play        warm         the world's game (or its idea) + Find the Orli
     sheet       canvas       the printable feelings sheet (focal), Print
     pager       canvas       previous · all · next

   The index: the title and lead, Orla's card, the six others, then a warm band
   with the creator faces. System tokens and components only; the approved
   buttons are untouched. Print: an Orli page prints its A4 sheet only.
   ------------------------------------------------------------------------- */

/* ===================================================== an Orli's hero */
.op-hero { background: var(--world-wash); padding-block: var(--o-space-7) var(--o-space-8); }
.op-hero__grid { display: grid; gap: var(--o-space-5); align-items: center; }
@media (min-width: 900px) {
  .op-hero { padding-block: var(--o-space-7); }
  .op-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--o-space-8); }
}
.op-hero__words { display: flex; flex-direction: column; align-items: flex-start; gap: var(--o-gap); }
/* a back link, not a title above the name (Ryan, 3 Nov: no small titles over headings) */
.op-hero__words .op-back { margin: 0 0 calc(var(--o-gap-tight) - var(--o-gap)); font-size: var(--o-text-sm, .9375rem); }
.op-hero__words .op-back .o-link { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--o-ink-2); }
.op-name {
  font: var(--o-weight-title) var(--o-text-display) / var(--o-lh-display) var(--o-font-ui);
  letter-spacing: var(--o-track-display);
}
.op-hero .o-lead { max-inline-size: 30em; }

/* Feels · Colour · World: three short facts on a hairline */
.op-facts {
  display: flex; flex-wrap: wrap; gap: var(--o-space-4) var(--o-space-7);
  margin: var(--o-space-3) 0 0; padding-block-start: var(--o-space-5);
  border-block-start: 1px solid color-mix(in srgb, var(--world-deep) 16%, transparent);
  align-self: stretch;
}
.op-facts > div { display: grid; gap: 2px; }
.op-facts dt { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); }
.op-facts dd { margin: 0; display: flex; align-items: center; min-height: 28px; font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); }
.op-facts dd .o-link { display: inline-flex; align-items: center; min-height: var(--o-target); margin-block: -8px; }
.op-swatch {
  flex: none; width: 14px; height: 14px; margin-inline-end: var(--o-space-2); border-radius: 50%;
  background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(47 46 43 / .18);
}

/* The canonical render on its own soft ground. It breathes, slowly, while
   it's on screen (the page's one ambient animation); still otherwise. */
.op-hero__art {
  position: relative; margin: 0;
  display: grid; place-items: end center;
  block-size: clamp(260px, 60vw, 420px);
}
@media (min-width: 900px) { .op-hero__art { block-size: clamp(340px, 52vh, 470px); } }
.op-hero__art::before {
  content: ""; position: absolute; inset-inline: 20%; inset-block-end: 0; block-size: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 57 50 / .24), rgb(60 57 50 / 0));
  transform-origin: 50% 50%;
}
.op-hero__img {
  position: absolute; inset-inline: 0; inset-block-end: 3.5%; margin-inline: auto;
  inline-size: auto; block-size: 90%; max-inline-size: 100%;
  object-fit: contain; object-position: 50% 100%;
  transform-origin: 50% 100%;
}
@keyframes op-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.014 .986; } }
@keyframes op-breathe-ground { 0%, 100% { scale: 1 1; } 50% { scale: 1.035 1; } }
.op-hero__img { animation: op-breathe 5.2s ease-in-out infinite; }
.op-hero__art::before { animation: op-breathe-ground 5.2s ease-in-out infinite; }
.op-hero__art[data-paused] .op-hero__img, .op-hero__art[data-paused]::before { animation-play-state: paused; }
/* (separate selectors: a pseudo-element inside :is() is dropped, so the
   ground kept breathing under Reduced and Still) */
html:is([data-motion="reduced"], [data-motion="still"]) .op-hero__img,
html:is([data-motion="reduced"], [data-motion="still"]) .op-hero__art::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .op-hero__img,
  html:not([data-motion]) .op-hero__art::before { animation: none; }
}

/* Review only (an Orli marked hidden in orlis-data.mjs, ?verify=1; none
   since Joy joined the public cast, 2 Nov). The words to check carry
   [data-verify], which the shell highlights and tags (shell.css). */
.op-verify {
  max-inline-size: 34em;
  font-size: var(--o-text-small); line-height: 1.7; color: var(--o-ink);
}

/* ============================================== in the classroom */
.op-school__grid { display: grid; gap: var(--o-head-gap); }
.op-school__head { margin: 0; }
.op-school__head .o-small { max-inline-size: 34em; }
@media (min-width: 900px) {
  .op-school__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--o-space-8); align-items: start; }
}
/* On a wide, tall enough window the title stays in view beside the lists. */
@media (min-width: 900px) and (min-height: 640px) {
  .op-school__head { position: sticky; top: calc(var(--o-header-h) + var(--o-space-6)); }
}
.op-groups { display: grid; gap: var(--o-space-7); }
.op-group__head { display: grid; gap: var(--o-space-1); margin-block-end: var(--o-space-4); }
.op-group__head .o-muted { max-inline-size: 46ch; text-wrap: pretty; }
.op-list {
  margin: 0; padding: 0; list-style: none;
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
}
.op-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label time" "title title" "text text";
  align-items: baseline; gap: var(--o-space-1) var(--o-space-5);
  padding: var(--o-space-5);
}
.op-item--bite { grid-template-areas: "title time" "text text"; }
.op-item + .op-item { border-block-start: 1px solid var(--o-line); }
.op-item__label { grid-area: label; font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); }
.op-item__time {
  grid-area: time;
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--o-ink);
}
.op-item__title {
  grid-area: title;
  font: var(--o-weight-title) calc(var(--o-text-body) * 1.06) / 1.3 var(--o-font-ui);
  letter-spacing: -.008em; text-wrap: balance;
}
.op-item__text { grid-area: text; color: var(--o-ink-2); max-inline-size: 56ch; text-wrap: pretty; }
@media (max-width: 459.98px) {
  .op-item { padding: var(--o-space-4) var(--o-space-4) var(--o-space-5); gap: var(--o-space-1) var(--o-space-3); }
}

/* Not in Orli Schools yet (Sasha): one card in the lists' place */
.op-soon {
  display: grid; justify-items: start; gap: var(--o-space-3);
  padding: var(--o-space-6);
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
}
.op-soon .o-pill { margin-block-end: var(--o-space-1); }
.op-soon .o-lead { color: var(--o-ink); text-wrap: balance; }
.op-soon .o-muted { max-inline-size: 46ch; text-wrap: pretty; }
@media (max-width: 459.98px) { .op-soon { padding: var(--o-space-5) var(--o-space-4); } }

/* ======================================================== the world */
.op-world__name .hand { --hand-size: min(calc(var(--o-text-title) * 1.02), calc((100vw - 2 * var(--o-gutter)) / 12.5)); }
.op-world .o-section-head { margin: 0; min-width: 0; }
.op-world__media { margin: 0; }

/* ============================================================== play */
.op-cards { display: grid; gap: var(--o-grid-gap); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .op-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) { .op-cards--one { grid-template-columns: minmax(0, 1fr); max-inline-size: calc(50% - var(--o-grid-gap) / 2); } }
.op-card__art { --ratio: 16 / 9; position: relative; display: grid; place-items: center; }
.op-card .op-island { position: relative; width: 62%; aspect-ratio: 10 / 7; }
.op-card .op-island::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -4%; height: 13%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 57 50 / .22), rgb(60 57 50 / 0));
}
.op-card .op-island img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.op-card__art--find { background: #080808; /* the game's own ground (find-the-orli/lib/game.css) */ }
.op-card__art--find img { width: 100%; height: 100%; object-fit: cover; }
.op-card .o-media__tag .o-pill { --pill-bg: var(--o-paper); --pill-ink: var(--o-ink); box-shadow: 0 1px 2px rgb(47 46 43 / .1); }
.op-card__world {
  display: inline-flex; align-items: center; gap: var(--o-space-2);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--world-deep);
}
.op-card__world::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--world-accent); }
.op-card--find .op-card__world { color: var(--o-ink-2); }
.op-card--find .op-card__world::before { background: var(--o-star); }
.op-card .o-card__text { max-inline-size: 38ch; }
.op-go { font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); color: var(--world-deep); }
.op-card--find .op-go { color: var(--o-ink); }
.op-card--find .o-arrow { background: var(--o-ink); }

/* ============================================================ the sheet */
.op-print__grid { display: grid; gap: var(--o-head-gap); align-items: center; }
.op-print__head { margin: 0; }
@media (min-width: 900px) {
  .op-print__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--o-space-8); }
}
html:not(.js) .op-print__btn { display: none; }
.op-print__paper { display: grid; justify-items: center; }

/* The sheet is the page that prints: A4 on screen (210 × 297, with the
   print margins as padding) and 186 × 273 mm inside the margins on paper.
   Everything inside is sized in container units, so it's the same drawing
   at any size. */
.op-sheet {
  inline-size: min(100%, 500px); aspect-ratio: 210 / 297;
  padding: calc(100% * 12 / 210);
  container-type: inline-size;
  background: #fff; color: var(--o-ink);
  border-radius: 6px; border: 1px solid var(--o-line);
  box-shadow: var(--o-shadow-raised);
}
.op-sheet__in {
  container-type: inline-size;
  block-size: 100%;
  display: flex; flex-direction: column; align-items: stretch;
}
.op-sheet__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; }
.op-sheet__title {
  font: var(--o-weight-title) 6.4cqw / 1.05 var(--o-font-ui); letter-spacing: -.02em;
}
.op-sheet__name {
  flex: none; display: flex; align-items: flex-end; gap: 1.6cqw;
  font: var(--o-weight-ui) 2.3cqw / 1 var(--o-font-ui); color: var(--o-ink-2);
}
.op-sheet__name span { display: block; inline-size: 26cqw; border-block-end: max(1px, .25cqw) solid var(--o-n3); }
.op-sheet__text {
  margin-block-start: 2.2cqw; max-inline-size: 70cqw;
  font: 400 2.55cqw / 1.4 var(--o-font-body); color: var(--o-ink);
  text-wrap: pretty;
}
.op-sheet__big { flex: 1 1 auto; min-block-size: 0; display: grid; place-items: center; padding-block: 2cqw 1cqw; }
.op-sheet__big .ol { inline-size: auto; block-size: 100%; max-inline-size: 76cqw; max-block-size: 82cqw; }
.op-sheet__faces {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3cqw;
  margin: 3cqw 0 0; padding: 0; list-style: none; align-items: end;
}
.op-sheet__face { display: grid; justify-items: center; gap: 1.2cqw; }
.op-sheet__face .ol { inline-size: 100%; block-size: auto; }
.op-sheet__face--blank span { font: var(--o-weight-ui) 2cqw / 1.2 var(--o-font-ui); color: var(--o-ink-2); }
.op-sheet__face:not(.op-sheet__face--blank) { padding-block-end: 3.6cqw; }
.op-sheet__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 3cqw;
  margin-block-start: 4cqw; padding-block-start: 2.4cqw; border-block-start: max(1px, .2cqw) solid var(--o-line);
  font: 400 1.9cqw / 1.2 var(--o-font-body); color: var(--o-ink-2);
}
.op-sheet__foot img { inline-size: 11cqw; block-size: auto; }

/* The line art (creator parts): the body is an outline to colour in, the
   face stays in ink. Line weight stays the same at every size. */
.ol { display: block; overflow: visible; }
.ol-body { fill: #fff; stroke: var(--o-ink); stroke-width: 2.6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ol-fill { fill: #fff; stroke: var(--o-ink); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ol-ground { fill: rgb(47 46 43 / .07); }
.op-sheet__face .ol-body { stroke-width: 1.8px; }

/* ===================================================== the pager */
.op-pager { padding-block-end: var(--o-section); }
.op-pager__in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--o-space-4);
  padding-block-start: var(--o-space-6); border-block-start: 1px solid var(--o-line);
}
.op-pager__link {
  display: inline-flex; align-items: center; gap: var(--o-space-3);
  min-height: var(--o-target); padding: var(--o-space-2) var(--o-space-3) var(--o-space-2) var(--o-space-2);
  border-radius: var(--o-r-pill); text-decoration: none; color: var(--o-ink);
  transition: background-color var(--o-t-interact) var(--o-ease);
}
.op-pager__link--next { justify-self: end; flex-direction: row-reverse; padding: var(--o-space-2) var(--o-space-2) var(--o-space-2) var(--o-space-3); text-align: end; }
.op-pager__link img { inline-size: 52px; block-size: 52px; object-fit: contain; object-position: 50% 100%; }
.op-pager__link > span { display: grid; }
.op-pager__word { font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: var(--o-ink-2); }
.op-pager__name { font: var(--o-weight-title) var(--o-text-heading) / 1.15 var(--o-font-ui); letter-spacing: var(--o-track-heading); }
@media (hover: hover) and (pointer: fine) { .op-pager__link:hover { background: var(--o-warm); } }
.op-pager__all { justify-self: center; }
@media (max-width: 599.98px) {
  .op-pager__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-pager__all { grid-column: 1 / -1; grid-row: 2; }
  .op-pager__link img { inline-size: 40px; block-size: 40px; }
}

/* ===================================================== the index */
.oi-cast { padding-block-start: var(--o-space-8); }
.oi-head .o-lead { max-inline-size: 36em; }
/* The cast keeps the interface neutral and lets the artwork carry the
   colours (RULES 2): every render stands on the same warm ground. */
.oi-card__art, .oi-feature__art {
  position: relative; display: grid; place-items: end center;
  background: var(--o-warm);
}
.oi-card__art { --ratio: 4 / 3; }
.oi-card__art::before, .oi-feature__art::before {
  content: ""; position: absolute; inset-inline: 30%; inset-block-end: 5%; block-size: 8%;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(60 57 50 / .22), rgb(60 57 50 / 0));
}
.oi-card__art > .oi-card__img, .oi-feature__art > .oi-card__img {
  position: absolute; inset-inline: 0; inset-block-end: 8%; margin-inline: auto;
  inline-size: auto; block-size: 76%; max-inline-size: 80%; object-fit: contain; object-position: 50% 100%;
}
.oi-card__meta { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); }
.oi-card .o-card__text { font-size: var(--o-text-body); }

.oi-feature { margin-block-end: var(--o-grid-gap); }
.oi-feature__art { aspect-ratio: 4 / 3; }
.oi-feature__art > .oi-card__img { block-size: 72%; inset-block-end: 9%; }
.oi-feature__body { justify-content: center; padding: var(--o-space-6); }
.oi-feature__title { font-size: var(--o-text-title); line-height: var(--o-lh-title); letter-spacing: var(--o-track-title); }
.oi-feature .o-card__text { font-size: var(--o-text-lead); line-height: var(--o-lh-lead); max-inline-size: 30em; color: var(--o-ink); }
.oi-feature .o-card__foot { flex: none; margin-block-start: var(--o-space-3); }
@media (min-width: 700px) {
  .oi-feature { flex-direction: row; }
  .oi-feature__art { flex: 0 0 42%; aspect-ratio: auto; min-block-size: 300px; }
  .oi-feature__body { flex: 1; padding: var(--o-space-7); }
}

.oi-grid {
  display: grid; gap: var(--o-grid-gap); margin: 0; padding: 0; list-style: none;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .oi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* (three across from 1100px: spacing rules, 2 Nov) */
@media (min-width: 1100px) { .oi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Seven under Orla since Joy joined (2 Nov): the one left over on the last
   row sits in the middle, the same width as the rest, not at the left edge. */
@media (min-width: 640px) and (max-width: 1099.98px) {
  .oi-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; inline-size: calc((100% - var(--o-grid-gap)) / 2); }
}
@media (min-width: 1100px) { .oi-grid > li:last-child:nth-child(3n + 1) { grid-column: 2; } }
html:not([data-verify="on"]) [data-verify-only] { display: none; }
.oi-note { margin-block-start: var(--o-space-6); color: var(--o-ink-2); max-inline-size: var(--o-measure); }

.oi-feel .o-section-head { margin: 0; }
.oi-faces { margin: 0; display: grid; gap: var(--o-space-3); }
.oi-faces .oi-faces__row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--o-space-4);
  margin: 0; padding: var(--o-space-7) var(--o-space-6); list-style: none; align-items: end;
  background: #fff; border: 1px solid var(--o-line); border-radius: var(--o-r-card); box-shadow: var(--o-shadow);
}
.oi-faces__row .ol { inline-size: 100%; block-size: auto; }
.oi-faces__row .ol-body { stroke-width: 2px; }
@media (max-width: 479.98px) { .oi-faces .oi-faces__row { gap: var(--o-space-2); padding: var(--o-space-5) var(--o-space-3); } }

/* ===================================================== forced colours */
@media (forced-colors: active) {
  .op-hero__art::before, .oi-card__art::before, .oi-feature__art::before, .op-card .op-island::before { display: none; }
  .ol-body, .ol-fill { stroke: CanvasText; fill: Canvas; }
  .ol [fill="#2f2e2b"] { fill: CanvasText; }
  .ol [stroke="#2f2e2b"] { stroke: CanvasText; }
  .ol-ground { fill: none; }
  .op-swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
  .op-sheet { border-color: CanvasText; }
}

/* ===================================================== print
   An Orli page prints its feelings sheet, on one A4 page. The index prints
   the cast as a plain list. */
@page { size: A4 portrait; margin: 12mm; }
@media print {
  orli-header, orli-footer, .o-skip, .s-toast, [popover] { display: none !important; }
  html, body { background: #fff !important; }
  body[data-page="orli"] main > :not(#sheet) { display: none !important; }
  body[data-page="orli"] #sheet { padding: 0 !important; background: none !important; }
  body[data-page="orli"] .op-print__grid { display: block; inline-size: auto; }
  body[data-page="orli"] .op-print__head { display: none !important; }
  body[data-page="orli"] .op-sheet {
    inline-size: 186mm; block-size: 272mm; aspect-ratio: auto; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
    break-inside: avoid; page-break-inside: avoid;
  }
  body[data-page="orli"] .op-print__paper { display: block; }
  .ol-ground { fill: #eeebe5; }

  body[data-page="orlis"] .oi-feel, body[data-page="orlis"] .o-card__foot, body[data-page="orlis"] .oi-note a { display: none !important; }
  body[data-page="orlis"] .oi-cast { padding: 0; }
  body[data-page="orlis"] .o-container { inline-size: auto; }
  body[data-page="orlis"] .o-section-head { margin-block-end: 6mm; }
  body[data-page="orlis"] .o-display { font-size: 26pt; }
  body[data-page="orlis"] .o-lead { font-size: 12pt; }
  body[data-page="orlis"] .o-card { box-shadow: none; break-inside: avoid; flex-direction: row; }
  body[data-page="orlis"] .oi-cast > .o-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5mm; }
  body[data-page="orlis"] .oi-cast > .o-container > :is(.oi-head, .oi-note) { grid-column: 1 / -1; }
  body[data-page="orlis"] .oi-grid { display: contents; }
  body[data-page="orlis"] .oi-feature { margin: 0; }
  body[data-page="orlis"] :is(.oi-card__art, .oi-feature__art) { flex: 0 0 34%; aspect-ratio: auto; min-block-size: 34mm; }
  body[data-page="orlis"] .o-card__body { padding: 4mm; gap: 1mm; }
  body[data-page="orlis"] :is(.o-card__title, .oi-feature__title) { font-size: 14pt; }
  body[data-page="orlis"] :is(.oi-card .o-card__text, .oi-feature .o-card__text) { font-size: 9.5pt; line-height: 1.4; color: var(--o-ink); }
  body[data-page="orlis"] .oi-card__meta { font-size: 8.5pt; }
  body[data-page="orlis"] .oi-note { font-size: 9.5pt; margin: 0; }
  .op-hero__img, .op-hero__art::before { animation: none !important; }
}