/* THE FIRST ARRIVAL (31 Oct 2026). The house's front door is a place, not a
   form: a road at dusk running from your first word up to the books, with the
   five teachers waiting at the foot of it. Each of them walked out of a book
   on the shelf of their own language, and choosing one is choosing the
   language. The scene keeps its colours in light and dark, as the masthead
   does. Everything here paints before any script runs; the figures come to
   life on top of the portraits drawn in the page. */

.front-door { --ar-night: #16284c; --ar-hill-far: #1d3461; --ar-hill-mid: #233f73; --ar-hill-near: #2b4c87;
  --ar-road: #f3e6bf; --ar-glow: #f6c445; --ar-cream: #fffdf5; --ar-mist: #c9d3e8; }
.front-door .house-bar { position: absolute; inset: 0 0 auto; z-index: 3; background: transparent; box-shadow: none; border: 0; }
/* on this page the teachers are the way in */
.front-door .house-nav .btn { display: none; }

.ar-scene { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  overflow: hidden; background: var(--ar-night); color: var(--ar-cream); }
.ar-world { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.ar-clouds { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ar-cloud { position: absolute; left: 0; height: auto; opacity: .1; fill: var(--ar-cream); }
.ar-cloud.one { top: 13%; width: clamp(160px, 22vw, 340px); }
.ar-cloud.two { top: 34%; width: clamp(120px, 15vw, 240px); opacity: .07; }
@media (prefers-reduced-motion: no-preference) {
  .ar-cloud.one { animation: ar-cross 150s linear infinite; animation-delay: -60s; }
  .ar-cloud.two { animation: ar-cross 210s linear infinite; animation-delay: -150s; }
  .ar-star.tw { animation: ar-twinkle 6s ease-in-out infinite; }
  .ar-star.tw.b { animation-delay: -2.4s; animation-duration: 8s; }
  .ar-star.tw.c { animation-delay: -4.1s; animation-duration: 7s; }
}
@keyframes ar-breathe { 50% { transform: scale(.992, 1.022); } }
@keyframes ar-cross { from { transform: translate3d(-40vw, 0, 0); } to { transform: translate3d(120vw, 0, 0); } }
@keyframes ar-twinkle { 50% { opacity: .3; } }

/* the words */
.ar-head { width: min(100%, 1240px); box-sizing: border-box; margin: 0 auto; padding: clamp(84px, 13vh, 132px) clamp(20px, 4vw, 40px) 0; }
.ar-head h1 { margin: 0; max-width: 15.5em; font: 400 clamp(2rem, 1.2rem + 3.3vw, 4rem)/1.07 var(--serif); letter-spacing: -.018em; color: var(--ar-cream); text-wrap: balance; }
/* cream letters do not read on the moon, and most languages run longer than
   the English it was measured against */
html:not([lang="en"]) .ar-head h1 { max-width: 14.6em; }
.ar-head h1 em { font-style: italic; color: var(--ar-glow); }
.ar-head p { margin: clamp(10px, 1.6vh, 18px) 0 0; max-width: 34em; font: 400 clamp(1rem, .9rem + .5vw, 1.25rem)/1.45 var(--serif); color: var(--ar-mist); }

/* the teachers at the foot of the road */
.ar-head .ar-ask { margin: clamp(16px, 4vh, 44px) 0 0; padding: 0; border: 0; font: 500 clamp(1.05rem, 1rem + .5vw, 1.4rem)/1.3 var(--sans); color: var(--ar-cream); }
.ar-head .ar-ask::before { display: none; }
.ar-stage { position: relative; width: min(100%, 1240px); box-sizing: border-box; margin: auto auto 0; padding: 96px clamp(6px, 3vw, 40px) clamp(10px, 2.4vh, 26px); }
/* ul. to outweigh public.css's list indent, which took 22px from the row and
   stood the five off-centre on a phone */
ul.ar-cast { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.ar-cast > li { margin: 0; padding: 0; min-width: 0; }
.ar-door { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 2px 8px; border-radius: 14px;
  color: var(--ar-cream); text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ar-door:hover, .ar-door:focus-visible { color: var(--ar-cream); text-decoration: none; }
.ar-door:focus-visible { outline: 2px solid var(--ar-glow); outline-offset: 2px; }
.ar-fig { position: relative; display: block; width: min(100%, clamp(66px, min(14vw, 25vh), 220px)); aspect-ratio: 1; flex: none; }
.ar-live, .ar-live > svg { display: block; width: 100%; height: 100%; }
.ar-live { position: absolute; inset: 0; }
/* the drawing stands exactly where the rig's canvas will: the board around the figure's box */
.ar-fig img.ar-poster { position: absolute; left: -38.89%; top: -38.89%; width: 177.78%; height: 177.78%; max-width: none; margin: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* a drawing still breathes: the live figure takes its place where Rive is on */
  .ar-fig img.ar-poster { transform-origin: 50% 72%; animation: ar-breathe 3.8s ease-in-out infinite; }
  .ar-cast > li:nth-child(2) .ar-poster { animation-delay: -1.1s; animation-duration: 3.3s; }
  .ar-cast > li:nth-child(3) .ar-poster { animation-delay: -2.3s; animation-duration: 4.6s; }
  .ar-cast > li:nth-child(4) .ar-poster { animation-delay: -.6s; animation-duration: 3.5s; }
  .ar-cast > li:nth-child(5) .ar-poster { animation-delay: -1.7s; animation-duration: 4.1s; }
  .ar-fig { transition: transform .28s cubic-bezier(.2, .9, .3, 1.2); }
  .ar-door:hover .ar-fig, .ar-door:focus-visible .ar-fig { transform: translateY(-5px) scale(1.04); }
}
.ar-lang { margin-top: 6px; font: 600 clamp(.82rem, .7rem + .6vw, 1.2rem)/1.2 var(--sans); }
.ar-native { font: 400 clamp(.72rem, .66rem + .3vw, .94rem)/1.25 var(--serif); color: var(--ar-mist); }
.ar-yours { display: none; margin-top: 4px; padding: 1px 8px; border-radius: 99px; background: var(--ar-glow); color: #17213a; font: 600 var(--t-00)/1.5 var(--sans); }
.ar-door.is-yours .ar-yours { display: inline-block; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the one who is speaking: a single bubble that travels along the line */
.ar-bubble { position: absolute; z-index: 2; left: 0; top: 0; max-width: min(calc(100% - 20px), 340px); box-sizing: border-box; padding: 10px 14px 11px;
  border-radius: 14px; background: var(--ar-cream); color: #17213a; font: italic 400 clamp(.95rem, .9rem + .25vw, 1.08rem)/1.32 var(--serif);
  opacity: 0; transform: translateY(6px) scale(.97); transform-origin: var(--tail, 50%) 100%; pointer-events: none;
  transition: opacity .18s linear, transform .22s cubic-bezier(.2, .9, .3, 1.2); will-change: transform; }
.ar-bubble::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -8px; width: 16px; height: 16px; margin-left: -8px;
  background: inherit; clip-path: polygon(0 0, 100% 0, 50% 58%); }
.ar-bubble.is-on { opacity: 1; transform: none; }

/* meeting one of them */
.ar-meet { position: absolute; inset: 0; z-index: 2; display: none; box-sizing: border-box; padding: clamp(92px, 16vh, 150px) clamp(16px, 4vw, 40px) 24px; overflow-y: auto; }
.is-meeting .ar-meet { display: flex; justify-content: center; }
.ar-meet-in { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 520px); gap: clamp(20px, 4vw, 56px); align-items: start; align-content: start; width: min(100%, 940px); }
.ar-seat { position: relative; width: 100%; aspect-ratio: 1; }
/* the world steps back while one of them is talking to you */
.ar-scene::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ar-night); opacity: 0; pointer-events: none; transition: opacity .3s linear; }
.ar-scene.is-meeting::after { opacity: .86; }
.ar-seat .ar-fig { width: 100%; }
.ar-talk { min-width: 0; }
.ar-say { position: relative; display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px 12px 20px; border-radius: 18px;
  background: var(--ar-cream); color: #17213a; font: 400 clamp(2.1rem, 1.7rem + 2vw, 3.2rem)/1.1 var(--serif); }
.ar-say::after { content: ''; position: absolute; left: -11px; bottom: 16px; width: 18px; height: 18px; background: inherit; clip-path: polygon(100% 0, 100% 100%, 0 70%); }
.ar-say small { font: 400 var(--t-1)/1 var(--sans); color: #46536f; }
.ar-again { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #e7ecf6; color: #244177; cursor: pointer; }
.ar-again:hover { background: #d9e1f1; }
.ar-again:focus-visible { outline: 2px solid #244177; outline-offset: 2px; }
.ar-again svg { width: 22px; height: 22px; fill: currentColor; }
.ar-meet .ar-q { margin: 0 0 14px; padding: 0; border: 0; font: 400 clamp(1.15rem, 1rem + .7vw, 1.5rem)/1.3 var(--serif); color: var(--ar-cream); }
.ar-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.ar-choice { min-height: 56px; padding: 10px 14px; border: 2px solid rgba(255, 253, 245, .4); border-radius: 12px; background: transparent; color: var(--ar-cream);
  font: 600 var(--t-3)/1.2 var(--sans); cursor: pointer; transition: background-color .12s, border-color .12s; }
.ar-choice:hover { border-color: var(--ar-cream); background: rgba(255, 253, 245, .08); }
.ar-choice:focus-visible { outline: 2px solid var(--ar-glow); outline-offset: 2px; }
.ar-meet .ar-told { margin: 0 0 6px; padding: 0; border: 0; font: 600 clamp(1.15rem, 1rem + .7vw, 1.5rem)/1.3 var(--sans); color: var(--ar-cream); }
.ar-told em { font: italic 400 1.08em/1 var(--serif); color: var(--ar-glow); }
.ar-said { margin: 0 0 16px; font: 400 var(--t-2)/1.45 var(--serif); color: var(--ar-mist); }
.ar-story { margin: 0 0 18px; padding: 12px 0 12px 16px; border-left: 3px solid var(--ar-glow); }
.ar-story p { margin: 0; font: italic 400 clamp(1.05rem, 1rem + .4vw, 1.25rem)/1.35 var(--serif); color: var(--ar-cream); }
.ar-story footer { margin-top: 8px; font: 400 var(--t-0)/1.45 var(--sans); color: var(--ar-mist); }
.ar-story cite { font-style: italic; color: var(--ar-cream); }
.ar-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.ar-start { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 26px; border-radius: 12px; background: var(--ar-glow); color: #17213a;
  font: 700 var(--t-3)/1.2 var(--sans); text-decoration: none; }
.ar-start:hover, .ar-start:focus-visible { background: #ffd666; color: #17213a; text-decoration: none; }
.ar-start:focus-visible { outline: 2px solid var(--ar-cream); outline-offset: 2px; }
.ar-free { font: 400 var(--t-0)/1.4 var(--sans); color: var(--ar-mist); }
.ar-quiet { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font: 500 var(--t-1)/1.4 var(--sans); }
.ar-quiet a, .ar-quiet button { display: inline-block; min-height: 32px; padding: 6px 0; border: 0; background: none; color: var(--ar-cream); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ar-quiet a:hover, .ar-quiet button:hover { color: var(--ar-glow); }

.is-meeting .ar-head, .is-meeting .ar-stage { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ar-head, .ar-stage { transition: opacity .24s linear; }
  .ar-talk.is-in { animation: ar-rise .34s cubic-bezier(.2, .8, .2, 1) both; }
  .ar-after.is-in { animation: ar-rise .34s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes ar-rise { from { opacity: 0; transform: translateY(10px); } }

/* any upright screen: the road's far end stays in the picture, under the words */
@media (max-aspect-ratio: 1/1) {
  .ar-world { left: calc(70vw - 90.4vh); right: auto; top: auto; bottom: 0; width: 112vh; height: 70vh; max-width: none; overflow: visible; }
  @supports (height: 1svh) {
    .ar-world { left: calc(70vw - 90.4svh); width: 112svh; height: 70svh; }
  }
}

/* a short laptop. The English was cut to fit this height; the longer languages
   take a third line of heading, and that pushed the five's names off the first
   screen */
@media (min-width: 721px) and (max-height: 820px) {
  html:not([lang="en"]) .ar-head h1 { font-size: clamp(2rem, 1rem + 2.5vw, 3rem); }
  html:not([lang="en"]) .ar-head p { max-width: 44em; }
  html:not([lang="en"]) .ar-cast .ar-fig { width: min(100%, clamp(66px, min(14vw, 21vh), 220px)); }
}

/* phones: the five stand in one line, and meeting one is a sheet of its own */
@media (max-width: 720px) {
  .ar-head { padding-top: 66px; }
  .front-door .house-bar-in { flex-wrap: nowrap; gap: 12px; padding: 10px 16px; }
  .front-door .house-mark { flex-direction: row; align-items: baseline; gap: .4em; }
  .front-door .house-mark .wm-l { font-size: 10.5px; letter-spacing: .14em; }
  .front-door .house-mark .wm-t { font-size: 12px; }
  .front-door .house-nav { display: flex; margin-left: auto; }
  .front-door .house-nav .btn, .front-door .house-nav .nav-break, .front-door .house-nav a:not(.nav-sign) { display: none; }
  .ar-stage { padding-left: 4px; padding-right: 4px; }
  /* the names stand on solid ground, clear of the road */
  .ar-stage::before { content: ''; position: absolute; left: -50vw; right: -50vw; bottom: 0; height: 88px; z-index: -1; background: #1a2f5a; }
  .ar-moon, .ar-sign-near { display: none; }
  .ar-signs text { font-size: 28px; }
  .ar-fig { width: 100%; }
  /* five narrow columns, and «Французский» is not «French»: the names give a
     little, then break at the soft hyphens door_words.py gives them */
  .ar-lang { font-size: clamp(.75rem, 3.3vw, .82rem); overflow-wrap: anywhere; }
  .ar-meet { padding: 56px 16px 18px; }
  .ar-meet-in { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ar-seat { width: min(42vw, 180px); justify-self: center; }
  .ar-say { justify-self: center; }
  .ar-talk { text-align: left; }
}
@media (max-height: 620px) and (max-width: 720px) { .ar-head p { display: none; } }
@media (max-height: 720px) and (max-width: 720px) { .ar-seat { width: 112px; } }

/* below the scene: what the whole thing is */
.ar-road { background: var(--sheet, #fffdf5); color: var(--carbon); }
.ar-road-in { width: min(100%, 1120px); box-sizing: border-box; margin: 0 auto; padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 40px) clamp(32px, 5vw, 56px); }
.ar-road h2 { margin: 0 0 clamp(20px, 3vw, 32px); font: 400 clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem)/1.15 var(--serif); letter-spacing: -.012em; color: var(--pine); }
.ar-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.ar-steps li { margin: 0; counter-increment: step; }
.ar-steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin: 0 0 12px; border-radius: 50%; background: var(--pine); color: var(--on-pine); font: 600 var(--t-0)/1 var(--sans); }
.ar-steps strong { display: block; font: 400 var(--t-4)/1.25 var(--serif); color: var(--carbon); }
.ar-steps p { margin: 6px 0 0; font: 400 var(--t-1)/1.55 var(--sans); color: var(--steel); }
.ar-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: clamp(22px, 3vw, 32px) 0 0; font: 400 var(--t-1)/1.5 var(--sans); color: var(--steel); }
.ar-more a { font-weight: 600; }
@media (max-width: 760px) { .ar-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; } }