/* île Atlas — standalone surface. Additive; design-system.css, studio.css and speaking.css are untouched.
   Same brand family as Classroom and Studio: graphite #0F0F0E ground, cream #EAE0C4, warm-white rgba(230,226,220,X),
   Spectral (light, italic for voice) and DM Sans (UI), hairline .5px rules, one terracotta #C4694A accent.
   Its own character: an atlas. Shelves are numbered "plates"; a shelf is a grid of word tiles; opening a word turns to
   its page — a slightly raised dark surface (no bright light), so long sessions stay easy on the eyes.
   Flat ground on purpose: no .orb glows, no radial gradients, no blur, no box-shadow anywhere on this surface. */

.stage--atlas {
  background: #0F0F0E;
  --at-cream: #EAE0C4;
  --at-ink: rgba(230,226,220,.9);
  --at-mute: rgba(230,226,220,.72);
  --at-faint: rgba(230,226,220,.5);
  --at-rule: rgba(230,226,220,.16);
  --at-tc: #C4694A;
  --at-tc-soft: #D4896D;
  /* on the cream page */
  --at-page-ink: rgba(234,224,196,.95);
  --at-page-mute: rgba(230,226,220,.74);
  --at-page-faint: rgba(230,226,220,.5);
  --at-page-rule: rgba(230,226,220,.16);
  --at-page-tc: #D4896D;
}

.at-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  padding: 56px 56px 96px 40px; box-sizing: border-box;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.at-scroll::-webkit-scrollbar { width: 4px; }
.at-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 2px; }
.at-scroll [hidden] { display: none !important; }
.at-root { max-width: 1120px; margin: 0 auto; }

/* ── Shared type ─────────────────────────────────────────────────────────── */
.at-eyebrow {
  display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--at-mute);
}
.at-scroll button:focus-visible, .at-scroll input:focus-visible {
  outline: 1px solid rgba(234,224,196,.7); outline-offset: 3px;
}

/* ── Masthead + search ───────────────────────────────────────────────────── */
.at-masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 8px 0 36px; }
.at-wordmark { font-size: 14px; letter-spacing: .1em; text-transform: none; }   /* the wordmark "île" stays lowercase (brand) */
.at-masthead-title {
  position: relative; display: inline-block; margin: 14px 0 0; padding-bottom: 14px;
  font-family: 'Spectral', serif; font-style: italic; font-weight: 300; font-size: 48px; line-height: 1.1;
  letter-spacing: .005em; color: rgba(234,224,196,.92);
}
.at-masthead-title::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 64px; background: var(--at-tc); opacity: .75;
}
.at-masthead-sub { margin: 16px 0 0; max-width: 520px; font-family: 'Spectral', serif; font-weight: 300; font-size: 17px; line-height: 1.55; color: var(--at-mute); }
.at-search { flex: 0 1 340px; min-width: 220px; }
.at-search-input {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 18px; border-radius: 20px;
  background: transparent; border: .5px solid rgba(255,255,255,.18); color: var(--at-cream);
  font-family: 'DM Sans', sans-serif; font-size: 13px; letter-spacing: .02em;
}
.at-search-input::placeholder { color: var(--at-faint); }
.at-search-input:focus, .at-scroll .at-search-input:focus-visible { border-color: rgba(234,224,196,.5); outline: none; }
.at-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.at-status { margin: 24px 0 0; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--at-mute); min-height: 1em; }

/* ── Shelves: numbered plates ────────────────────────────────────────────── */
.at-shelf { margin: 0 0 44px; }
.at-shelf-h { margin: 0 0 18px; }
.at-plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.at-plate {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; height: 100%;
  min-height: 168px; padding: 22px 22px 20px; box-sizing: border-box; text-align: left; cursor: pointer;
  background: transparent; color: var(--at-ink); border: .5px solid var(--at-rule); border-radius: 2px;
  transition: border-color .2s, background .2s;
}
.at-plate::before { content: ''; position: absolute; left: 22px; top: 0; width: 28px; height: 1px; background: var(--at-tc); opacity: .8; }
.at-plate:hover { border-color: rgba(234,224,196,.4); background: rgba(255,255,255,.03); }
.at-plate-no { font-family: 'Spectral', serif; font-style: italic; font-weight: 300; font-size: 15px; color: var(--at-tc-soft); }
.at-plate-name { font-family: 'Spectral', serif; font-weight: 300; font-size: 24px; line-height: 1.2; color: rgba(234,224,196,.95); }
.at-plate-blurb { font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.5; color: var(--at-mute); }
.at-plate-tease { margin-top: auto; font-family: 'Spectral', serif; font-style: italic; font-weight: 300; font-size: 14px; color: var(--at-faint); }

/* ── Shelf strip ─────────────────────────────────────────────────────────── */
.at-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 24px; scrollbar-width: none; }
.at-strip::-webkit-scrollbar { display: none; }
.at-chip {
  flex: 0 0 auto; height: 32px; padding: 0 16px; border-radius: 18px; cursor: pointer; white-space: nowrap;
  background: transparent; border: .5px solid rgba(255,255,255,.14); color: var(--at-mute);
  font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: .03em;
  transition: background .2s, border-color .2s, color .2s;
}
.at-chip:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); color: var(--at-cream); }
.at-chip[aria-current="true"] { border-color: rgba(212,137,109,.7); color: var(--at-cream); }
.at-chip-all { color: var(--at-faint); }

/* ── Domain: a grid of word tiles; a click opens the page ───────────────── */
.at-domain-name { margin: 0; font-family: 'Spectral', serif; font-weight: 300; font-size: 26px; line-height: 1.2; color: rgba(234,224,196,.95); }
.at-domain-blurb { margin: 8px 0 0; font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.5; color: var(--at-mute); }
.at-tiles { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.at-tile {
  display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; min-height: 92px; padding: 16px 16px 14px; box-sizing: border-box; text-align: left; cursor: pointer;
  background: transparent; color: var(--at-ink); border: .5px solid var(--at-rule); border-radius: 2px;
  transition: border-color .2s, background .2s;
}
.at-tile:hover { border-color: rgba(234,224,196,.4); background: rgba(255,255,255,.04); }
.at-tile-head { font-family: 'Spectral', serif; font-size: 20px; font-weight: 400; line-height: 1.2; color: rgba(234,224,196,.95); overflow-wrap: anywhere; }
.at-tile-meaning { font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.4; color: var(--at-mute); }
.at-tile-dom { margin-top: auto; padding-top: 6px; font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--at-faint); }

/* ── The page (entry card): the one cream surface ────────────────────────── */
.at-card {
  background: #171715; color: var(--at-page-ink); border: .5px solid var(--at-rule); border-radius: 2px;
  padding: 44px 52px 48px; box-sizing: border-box; min-width: 0; max-width: 780px;
}
.at-back { display: inline-block; margin: 0 0 20px; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: .03em; color: var(--at-page-mute); }
.at-card-head { outline: none; }
.at-card-meta { display: flex; align-items: center; gap: 12px; margin: 0; font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--at-page-faint); }
.at-badge { padding: 2px 10px; border: .5px solid var(--at-page-rule); border-radius: 10px; letter-spacing: .08em; text-transform: none; font-size: 11px; color: var(--at-page-mute); }
.at-card-title { margin: 14px 0 0; font-family: 'Spectral', serif; font-weight: 400; font-size: 40px; line-height: 1.12; color: var(--at-page-ink); overflow-wrap: anywhere; }
.at-card-meaning { margin: 6px 0 0; font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--at-page-mute); }

.at-sentence {
  margin: 32px 0 0; padding: 20px 0 0; border-top: .5px solid var(--at-page-rule);
  font-family: 'Spectral', serif; font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.4; color: var(--at-page-ink);
}
.at-break { margin: 18px 0 0; }
.at-break-row { margin: 0 0 4px; font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; color: var(--at-page-mute); }
.at-break-fr { font-weight: 500; color: var(--at-page-ink); }
.at-break-eq { color: var(--at-page-faint); }
.at-natural { margin: 14px 0 0; font-family: 'Spectral', serif; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--at-page-mute); }

.at-sec { margin: 32px 0 0; padding: 20px 0 0; border-top: .5px solid var(--at-page-rule); }
.at-sec-h { position: relative; margin: 0 0 12px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--at-page-tc); }
.at-prose { margin: 0 0 10px; max-width: 62ch; font-family: 'Spectral', serif; font-size: 18px; line-height: 1.6; color: var(--at-page-ink); }
.at-with { list-style: none; margin: 0; padding: 0; }
.at-with li { margin: 0 0 6px; font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; color: var(--at-page-mute); }
.at-with-fr { font-weight: 500; color: var(--at-page-ink); }
.at-with-eq { color: var(--at-page-faint); }
.at-see { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.at-link {
  padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; color: var(--at-page-tc);
  border-bottom: 1px solid rgba(212,137,109,.4);
  transition: border-color .2s;
}
.at-link:hover { border-bottom-color: var(--at-page-tc); }

/* ── Pronunciation button (device voice) ── */
.at-title-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.at-title-row .at-card-title { margin: 0; }
.at-say { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: var(--at-page-tc); border: .5px solid rgba(212,137,109,.55); border-radius: 50%; transition: background .2s, border-color .2s; }
.at-say svg { width: 17px; height: 17px; }
.at-say:hover, .at-say-on { background: rgba(212,137,109,.14); border-color: var(--at-tc-soft); }

/* ── Signature motion: the tagline is written, once, by a terracotta caret (language, not decoration) ── */
.at-typed { position: relative; display: inline-block; }
.at-typed-text { display: inline-block; animation: at-write 1.8s steps(28, end) .3s both; }
.at-typed::after {
  content: ''; position: absolute; top: 12%; bottom: 8%; left: 0; width: 1.5px; background: var(--at-tc); opacity: 0;
  animation: at-caret-move 1.8s steps(28, end) .3s both, at-caret-blink .9s steps(1, end) 2.1s 4 forwards;
}
@keyframes at-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes at-caret-move { 0% { left: 0; opacity: 1; } 100% { left: 100%; opacity: 1; } }
@keyframes at-caret-blink { 0% { left: 100%; opacity: 1; } 50%, 100% { left: 100%; opacity: 0; } }
/* a word is underlined in terracotta as its page opens, and as you rest on a tile */
.at-card-title { position: relative; display: inline-block; }
.at-card-title::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%; background: var(--at-tc); transform-origin: left; animation: at-underline .7s ease-out .15s both; }
@keyframes at-underline { from { transform: scaleX(0); } to { transform: scaleX(.28); } }
.at-tile-head { position: relative; align-self: flex-start; }
.at-tile-head::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: var(--at-tc); transform: scaleX(0); transform-origin: left; transition: transform .3s ease-out; }
.at-tile:hover .at-tile-head::after, .at-tile:focus-visible .at-tile-head::after { transform: scaleX(1); }

/* ── Phones: one pane at a time ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .at-scroll { padding: 28px 16px 72px; }
  .at-masthead { padding: 0 0 24px; }
  .at-masthead-title { font-size: 38px; }
  .at-search { flex: 1 1 100%; }
  .at-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .at-plate { min-height: 150px; padding: 18px 16px 16px; }
  .at-plate-name { font-size: 20px; }
  .at-plate-tease { display: none; }
  .at-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .at-card { padding: 28px 22px 32px; }
  .at-card-title { font-size: 32px; }
  .at-sentence { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .at-plate, .at-chip, .at-tile, .at-link, .at-tile-head::after { transition: none; }
  .at-typed-text, .at-typed::after, .at-card-title::after { animation: none; }
  .at-typed::after { opacity: 0; }
  .at-card-title::after { transform: scaleX(.28); }
}