/* ==========================================================================
   ai-in-action.css — /ai-in-action.html (rebuilt 2026-10-04)
   Loaded after menu-engineering.css, whose article shell (.mg-hero, .mg-body,
   .mg-toc, .mg-faq, .mg-sources, .mg-cta) this page reuses as-is.

   TOKENS ARE NOT NEW — the same estate tokens menu-engineering.css documents:
     gold   #E1B168 / #D4A656 (fills)   #9a6b12 / #6f4c08 (gold text on white)
     ink    #1F2937 / #111827 / #374151 / #4B5563 / #6b7280
     wells  #E5E7EB / #F9FAFB / #FBF7F0 / #F1E3CE
     type   'Playfair Display' headings, 'Montserrat' body
     radius 8px cards, 10px panels, 999px pills

   NO-JS FLOOR. Every block below renders complete with JavaScript off or with
   reduced motion on. The explainer film is a four-panel storyboard by default;
   it only becomes a player when an inline script has confirmed motion is
   welcome and added .aia-motion. Start states exist only under .aia-motion /
   .aia-js, which nothing but that script ever adds.
   ========================================================================== */

/* ---------- font-swap layout shift ----------
   The two webfonts use font-display: swap, so text first paints in a system
   font and re-wraps when they arrive. On this page that moved the explainer
   (the largest block above the fold) by enough to score CLS 0.18 on a throttled
   mobile run. These fallbacks are the system fonts resized to the webfonts'
   measured average glyph width and vertical metrics (fontTools, 2026-10-04),
   so the swap changes the letterforms but not the line breaks. */
@font-face { font-family: 'AIA Montserrat Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto');
  size-adjust: 108.6%; ascent-override: 89.1%; descent-override: 23.1%; line-gap-override: 0%; }
@font-face { font-family: 'AIA Playfair Fallback'; src: local('Georgia'), local('Times New Roman'), local('Noto Serif');
  size-adjust: 101.4%; ascent-override: 106.7%; descent-override: 24.8%; line-gap-override: 0%; }
body { font-family: 'Montserrat', 'AIA Montserrat Fallback', sans-serif; }
h1, h2, h3, h4, h5, .mg-hero h1, .mg-body h2, .mg-body h3, .aia-film-title {
  font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif;
}
.aia-cap h3 { font-family: 'Montserrat', 'AIA Montserrat Fallback', sans-serif; }

/* Links that sit on cream or grey wells use the darker estate gold: #9a6b12 on
   #FBF7F0 measures 4.38:1, under AA. #6f4c08 clears it. */
.mg-body .mg-note a, .mg-body .aia-steps a, .mg-body .mg-cta a, .mg-body .aia-try a { color: #6f4c08; }

:root { --aia-ease: cubic-bezier(0.22, 1, 0.36, 1); --aia-scene: 6000ms; }

/* ---------- film band: the explainer overlaps the hero ---------- */

.aia-filmband { background: linear-gradient(#1F2937 0 72px, #fff 72px); padding: 0 1rem 0.5rem; }
.aia-film {
  max-width: 920px; margin: 0 auto; background: #111827; color: #F3F4F6;
  border-radius: 10px; padding: 1.25rem; box-shadow: 0 18px 40px rgba(17, 24, 39, 0.18);
  border: 1px solid #374151;
}
.aia-film-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.aia-film-kicker {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #E1B168; margin: 0;
}
.aia-film-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.125rem, 2.6vw, 1.375rem); color: #fff; margin: 0.25rem 0 0; line-height: 1.3; }
.aia-film-len { font-size: 0.8125rem; color: #9CA3AF; margin: 0; }

.aia-scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .aia-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.aia-scene { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.aia-stage {
  position: relative; background: #FBF7F0; border-radius: 8px; color: #1F2937;
  min-height: 236px; padding: 1.125rem; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.aia-scene-n {
  position: absolute; top: 0.625rem; left: 0.625rem; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; color: #6f4c08; background: #F1E3CE; border-radius: 999px; padding: 0.15rem 0.55rem;
}
.aia-cap { padding: 0.75rem 0.125rem 0; }
.aia-cap h3 { font-family: 'Montserrat', sans-serif; font-size: 0.9375rem; font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.aia-cap p { font-size: 0.875rem; line-height: 1.6; color: #D1D5DB; margin: 0; }

/* scene 1 — the phone */
.aia-phone {
  width: 100%; max-width: 250px; background: #fff; border: 6px solid #1F2937; border-radius: 22px;
  padding: 0.875rem 0.75rem 1rem; box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12);
}
.aia-phone-bar { width: 38%; height: 5px; border-radius: 999px; background: #E5E7EB; margin: 0 auto 0.875rem; }
.aia-phone-label { font-size: 0.6875rem; font-weight: 600; color: #6b7280; margin: 0 0 0.375rem; }
.aia-ask {
  border: 1.5px solid #E1B168; border-radius: 14px; padding: 0.625rem 0.75rem; font-size: 0.875rem;
  line-height: 1.45; color: #111827; background: #FBF7F0; margin: 0;
}
.aia-ask-go { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.aia-ask-go span { font-size: 0.75rem; font-weight: 700; background: #1F2937; color: #fff; border-radius: 999px; padding: 0.3rem 0.75rem; }

/* scene 2 — what the assistant checks */
.aia-checks { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 300px; display: grid; gap: 0.5rem; }
.aia-checks li {
  display: flex; align-items: center; gap: 0.625rem; background: #fff; border: 1px solid #E5E7EB;
  border-radius: 8px; padding: 0.5rem 0.625rem; font-size: 0.8125rem; line-height: 1.35; margin: 0; color: #1F2937;
}
.aia-dot {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #E1B168; color: #1F2937;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
}

/* scene 3 — results */
.aia-results { width: 100%; max-width: 300px; display: grid; gap: 0.5rem; }
.aia-res { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 0.625rem 0.75rem; }
.aia-res b { display: block; font-size: 0.875rem; color: #111827; }
.aia-res small { display: block; font-size: 0.75rem; color: #6b7280; margin: 0.1rem 0 0.4rem; }
.aia-slots { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.aia-slot { font-size: 0.75rem; font-weight: 600; border: 1.5px solid #D4A656; color: #6f4c08; border-radius: 999px; padding: 0.15rem 0.55rem; }
.aia-book { font-size: 0.75rem; font-weight: 700; background: #1F2937; color: #fff; border-radius: 999px; padding: 0.2rem 0.7rem; margin-left: auto; }
.aia-res.is-off { background: #F9FAFB; }
.aia-res.is-off b { color: #4B5563; }
.aia-res.is-off .aia-none { font-size: 0.75rem; color: #4B5563; font-style: italic; }

/* scene 4 — the confirmation */
.aia-ticket {
  width: 100%; max-width: 280px; background: #fff; border: 1px solid #E5E7EB; border-top: 4px solid #E1B168;
  border-radius: 8px; padding: 0.875rem 1rem; text-align: left;
}
.aia-ticket-top { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-weight: 700; color: #111827; font-size: 0.9375rem; }
.aia-tick { width: 26px; height: 26px; flex: 0 0 26px; }
.aia-tick circle { fill: #F1E3CE; }
.aia-tick path { fill: none; stroke: #6f4c08; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.aia-ticket dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; font-size: 0.8125rem; }
.aia-ticket dt { color: #6b7280; }
.aia-ticket dd { margin: 0; color: #111827; font-weight: 600; }
.aia-ticket-note { margin: 0.625rem 0 0; padding-top: 0.5rem; border-top: 1px dashed #E5E7EB; font-size: 0.75rem; color: #4B5563; }

/* controls — only exist visually in player mode */
.aia-controls { display: none; }
.aia-film-foot { font-size: 0.75rem; color: #9CA3AF; margin: 0.875rem 0 0; line-height: 1.6; }

/* ---------- player mode (inline script adds .aia-motion) ---------- */

.aia-film.aia-motion .aia-scenes { grid-template-columns: 1fr; }
.aia-film.aia-motion .aia-scene {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(18px);
  transition: opacity 520ms var(--aia-ease), transform 520ms var(--aia-ease), visibility 0s linear 520ms;
}
.aia-film.aia-motion .aia-stage { min-height: 280px; }
.aia-film.aia-motion[data-scene="1"] .aia-scene[data-n="1"],
.aia-film.aia-motion[data-scene="2"] .aia-scene[data-n="2"],
.aia-film.aia-motion[data-scene="3"] .aia-scene[data-n="3"],
.aia-film.aia-motion[data-scene="4"] .aia-scene[data-n="4"] {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}

.aia-film.aia-motion .aia-controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.aia-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; font: 600 0.8125rem 'Montserrat', sans-serif;
  background: #E1B168; color: #1F2937; border: 0; border-radius: 999px; padding: 0.5rem 0.95rem; cursor: pointer;
  min-height: 40px;
}
.aia-btn:focus-visible, .aia-seg:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.aia-btn svg { width: 14px; height: 14px; fill: currentColor; }
.aia-segs { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; }
.aia-seg {
  position: relative; height: 40px; background: transparent; border: 0; padding: 0; cursor: pointer;
}
.aia-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 999px; background: #374151; }
.aia-seg i { position: absolute; left: 0; top: 18px; height: 4px; width: 0; border-radius: 999px; background: #E1B168; }
.aia-seg.is-done i { width: 100%; }
.aia-film[data-run] .aia-seg.is-on i { animation: aia-fill var(--aia-scene) linear forwards; }
.aia-film[data-paused] .aia-seg.is-on i,
.aia-film[data-paused] .aia-scene * { animation-play-state: paused !important; }

/* the moves inside each scene — attached only while that scene is running */
.aia-film[data-run][data-scene="1"] .aia-ask-text { animation: aia-type 1400ms steps(42, end) 350ms both; }
.aia-film[data-run][data-scene="1"] .aia-ask-go span { animation: aia-pop 420ms var(--aia-ease) 1850ms both; }
.aia-film[data-run][data-scene="2"] .aia-checks li { animation: aia-rise 520ms var(--aia-ease) both; }
.aia-film[data-run][data-scene="2"] .aia-checks li:nth-child(2) { animation-delay: 650ms; }
.aia-film[data-run][data-scene="2"] .aia-checks li:nth-child(3) { animation-delay: 1300ms; }
.aia-film[data-run][data-scene="2"] .aia-dot { animation: aia-pop 420ms var(--aia-ease) both; }
.aia-film[data-run][data-scene="2"] li:nth-child(1) .aia-dot { animation-delay: 300ms; }
.aia-film[data-run][data-scene="2"] li:nth-child(2) .aia-dot { animation-delay: 950ms; }
.aia-film[data-run][data-scene="2"] li:nth-child(3) .aia-dot { animation-delay: 1600ms; }
.aia-film[data-run][data-scene="3"] .aia-res { animation: aia-rise 560ms var(--aia-ease) both; }
.aia-film[data-run][data-scene="3"] .aia-res.is-off { animation-name: aia-fade-dim; animation-delay: 700ms; }
.aia-film[data-run][data-scene="3"] .aia-book { animation: aia-ring 1200ms ease-out 1500ms 1 both; }
.aia-film[data-run][data-scene="4"] .aia-ticket { animation: aia-rise 560ms var(--aia-ease) both; }
.aia-film[data-run][data-scene="4"] .aia-tick path { animation: aia-draw 700ms var(--aia-ease) 450ms both; }

@keyframes aia-fill { from { width: 0; } to { width: 100%; } }
@keyframes aia-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes aia-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes aia-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aia-fade-dim { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aia-ring { 0% { box-shadow: 0 0 0 0 rgba(225, 177, 104, 0.6); } 100% { box-shadow: 0 0 0 12px rgba(225, 177, 104, 0); } }
@keyframes aia-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* ---------- news timeline ---------- */

.aia-news { list-style: none; margin: 1.5rem 0 1rem; padding: 0 0 0 1.375rem; position: relative; }
.aia-news::before { content: ""; position: absolute; left: 5px; top: 0.5rem; bottom: 0.5rem; width: 2px; background: #F1E3CE; }
.aia-news-item { position: relative; margin: 0 0 1.25rem; padding: 1rem 1.125rem; border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; }
.aia-news-item::before {
  content: ""; position: absolute; left: calc(-1.375rem + 0px); top: 1.25rem; width: 12px; height: 12px;
  border-radius: 50%; background: #E1B168; box-shadow: 0 0 0 3px #fff;
}
.aia-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.375rem !important; font-size: 0.8125rem !important; color: #6b7280 !important; }
.aia-tag { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.1rem 0.55rem; background: #F1E3CE; color: #6f4c08; }
.aia-tag-rules { background: #1F2937; color: #fff; }
.aia-tag-booking { background: #E1B168; color: #1F2937; }
.mg-body .aia-news-item h3 { margin: 0 0 0.5rem; font-size: 1.125rem; line-height: 1.35; }
.mg-body .aia-news-item p { font-size: 0.9875rem; line-height: 1.7; margin: 0 0 0.625rem; }
.mg-body .aia-news-item .aia-mean { background: #FBF7F0; border-left: 3px solid #E1B168; padding: 0.5rem 0.75rem; border-radius: 0 8px 8px 0; color: #1F2937; }
.mg-body .aia-news-item .aia-src { font-size: 0.8125rem; color: #6b7280; margin: 0; }

.aia-js .aia-news-item { opacity: 0; transform: translateY(14px); }
.aia-js .aia-news-item.is-in { opacity: 1; transform: none; transition: opacity 600ms var(--aia-ease), transform 600ms var(--aia-ease); }

/* ---------- numbered steps (AI booking checklist) ---------- */

.aia-steps { list-style: none; counter-reset: aia; margin: 1.25rem 0 1.5rem !important; padding: 0 !important; display: grid; gap: 0.75rem; }
.aia-steps > li {
  counter-increment: aia; position: relative; margin: 0 !important; padding: 0.875rem 1rem 0.875rem 3.25rem;
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px;
}
.aia-steps > li::before {
  content: counter(aia); position: absolute; left: 0.875rem; top: 0.875rem; width: 26px; height: 26px; border-radius: 50%;
  background: #1F2937; color: #E1B168; font-weight: 700; font-size: 0.8125rem; display: grid; place-items: center;
}
.mg-body .aia-steps > li { font-size: 1rem; line-height: 1.65; }

/* ---------- tool cards ---------- */

.aia-tools { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 640px) { .aia-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aia-tool { border: 1px solid #E5E7EB; border-radius: 10px; padding: 1.125rem; background: #fff; display: flex; flex-direction: column; }
.aia-tool-job { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9a6b12 !important; margin: 0 0 0.5rem !important; }
.aia-ico { width: 22px; height: 22px; fill: none; stroke: #9a6b12; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mg-body .aia-tool h3 { margin: 0 0 0.625rem; font-size: 1.0625rem; line-height: 1.35; }
.mg-body .aia-tool p { font-size: 0.9375rem; line-height: 1.65; margin: 0 0 0.5rem; }
.mg-body .aia-tool .aia-tool-link { margin: auto 0 0; padding-top: 0.5rem; font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) {
  .aia-tool { transition: transform 240ms var(--aia-ease), box-shadow 240ms var(--aia-ease), border-color 240ms var(--aia-ease); }
  .aia-tool:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08); border-color: #E1B168; }
}

/* ---------- exercises with copyable prompts ---------- */

.aia-try { border: 1px solid #E9DCC5; background: #FBF7F0; border-radius: 10px; padding: 1.125rem 1.25rem; margin: 1.25rem 0; }
.mg-body .aia-try h3 { margin: 0 0 0.375rem; }
.aia-time { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: #fff; color: #6f4c08; border: 1px solid #E9DCC5; border-radius: 999px; padding: 0.1rem 0.55rem; margin-left: 0.375rem; vertical-align: middle; }
.aia-prompt-wrap { position: relative; margin: 0.75rem 0; background: #1F2937; border-radius: 8px; }
.aia-prompt-label {
  font-family: 'Montserrat', sans-serif; font-size: 0.6875rem !important; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #E1B168 !important; margin: 0 !important; padding: 0 1rem; height: 2.5rem; line-height: 2.5rem;
  border-bottom: 1px solid #374151;
}
.aia-prompt {
  white-space: pre-wrap; word-wrap: break-word; font: 0.875rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #F3F4F6; padding: 0.875rem 1rem; margin: 0; background: transparent;
}
.aia-copy {
  position: absolute; top: 0.3rem; right: 0.4rem; font: 600 0.75rem 'Montserrat', sans-serif; background: #E1B168; color: #1F2937;
  border: 0; border-radius: 999px; padding: 0 0.85rem; height: 1.9rem; cursor: pointer;
}
.aia-copy:hover { background: #D4A656; }
.aia-copy:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- allowed-or-risky quiz ---------- */

.aia-quiz { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin: 1.25rem 0 1.5rem; }
@media (min-width: 640px) { .aia-quiz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aia-quiz details { border: 1px solid #E5E7EB; border-radius: 10px; background: #fff; }
.aia-quiz summary {
  list-style: none; cursor: pointer; padding: 1rem 1rem 1rem 1rem; font-size: 0.9875rem; line-height: 1.55; color: #111827;
  display: flex; flex-direction: column; gap: 0.5rem; border-radius: 10px;
}
.aia-quiz summary::-webkit-details-marker { display: none; }
.aia-quiz summary:focus-visible { outline: 3px solid #9a6b12; outline-offset: 2px; }
.aia-reveal { align-self: flex-start; font-size: 0.75rem; font-weight: 700; color: #6f4c08; background: #F1E3CE; border-radius: 999px; padding: 0.2rem 0.7rem; }
.aia-quiz details[open] .aia-reveal { display: none; }
.aia-ans { padding: 0 1rem 1rem; }
.mg-body .aia-ans p { font-size: 0.9375rem; line-height: 1.65; margin: 0; }
.aia-verdict { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.2rem 0.65rem; margin: 0 0 0.5rem; }
.aia-verdict.is-ok { background: #F1E3CE; color: #6f4c08; }
.aia-verdict.is-risk { background: #1F2937; color: #E1B168; }
.aia-verdict.is-no { background: #111827; color: #fff; }
.aia-quiz details[open] .aia-ans { animation: aia-rise 420ms var(--aia-ease) both; }

/* ---------- newsletter + closing ---------- */

.aia-pass { border: 1px solid #374151; background: #1F2937; color: #F3F4F6; border-radius: 10px; padding: 1.5rem; margin: 2.5rem 0 1rem; }
.mg-body .aia-pass h2 { color: #fff; margin: 0 0 0.5rem; }
.mg-body .aia-pass p { color: #D1D5DB; font-size: 0.9875rem; }
.aia-pass form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.aia-pass input[type="email"] { flex: 1 1 220px; min-height: 44px; border-radius: 8px; border: 1px solid #4B5563; background: #111827; color: #fff; padding: 0.625rem 0.875rem; font: inherit; }
.aia-pass input[type="email"]::placeholder { color: #9CA3AF; }
.aia-pass input[type="email"]:focus-visible { outline: 3px solid #E1B168; outline-offset: 1px; }
.aia-pass button { min-height: 44px; border: 0; border-radius: 8px; background: #E1B168; color: #1F2937; font-weight: 700; padding: 0.625rem 1.25rem; cursor: pointer; }
.aia-pass button:hover { background: #D4A656; }
.aia-pass button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mg-body .aia-pass .aia-pass-small { font-size: 0.8125rem; color: #9CA3AF; margin: 0.625rem 0 0; }
.mg-body .aia-pass .edc-news-msg { color: #E1B168; font-weight: 600; margin: 0.5rem 0 0; }

/* ---------- reduced motion & print: always the finished, static state ---------- */

@media (prefers-reduced-motion: reduce) {
  .aia-film *, .aia-news-item, .aia-tool, .aia-quiz * { animation: none !important; transition: none !important; }
  .aia-js .aia-news-item { opacity: 1; transform: none; }
}
@media print {
  .aia-film.aia-motion .aia-scene { opacity: 1 !important; visibility: visible !important; transform: none !important; grid-area: auto !important; }
  .aia-controls, .aia-copy { display: none !important; }
  .aia-js .aia-news-item { opacity: 1; transform: none; }
}

/* ==========================================================================
   Sunday-magazine layer (added 2026-10-04, second pass)
   A photographic cover behind the headline, wide section-opening photographs
   with captions, small section kickers, a drop cap and one pull quote. Same
   tokens as above; no new colours or fonts. Every photograph is static HTML
   with fixed dimensions, lazy below the fold, and captioned as AI-generated.
   ========================================================================== */

/* ---------- cover ---------- */
.aia-cover { position: relative; overflow: hidden; background: #111827; padding: 2.75rem 0 6.5rem; }
.aia-cover-img { position: absolute; inset: 0; margin: 0; }
.aia-cover-img img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; display: block; }
/* Text contrast is held by the overlay, not the photo: wherever text can sit the
   overlay is at least 0.88 of #111827, so even a white pixel underneath reads as
   about rgb(45,45,45) — #9CA3AF meta text stays above 5:1 against that. */
/* Phones: the photograph shows clearly across the top, then fades into the
   ground the text sits on. Text starts at 230px, below the 220px point where
   the overlay has reached 0.9. */
@media (max-width: 899px) {
  .aia-cover { padding-top: 230px; }
  .aia-cover-img { bottom: auto; height: 300px; }
}
.aia-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17,24,39,0.12) 0, rgba(17,24,39,0.12) 110px, rgba(17,24,39,0.9) 220px, rgba(17,24,39,0.94) 100%);
}
@media (min-width: 900px) {
  .aia-cover { padding: 4.5rem 0 8rem; min-height: 520px; }
  .aia-cover::before {
    background: linear-gradient(90deg, rgba(17,24,39,0.96) 0%, rgba(17,24,39,0.9) 46%, rgba(17,24,39,0.5) 68%, rgba(17,24,39,0.12) 100%);
  }
  .aia-cover .mg-wrap { max-width: 1120px; padding: 0 2rem; }
  .aia-cover .aia-cover-text { max-width: 600px; }
  .aia-cover .mg-standfirst { max-width: 56ch; }
}
.aia-cover .mg-wrap { position: relative; z-index: 2; }
.aia-issue {
  display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #1F2937; background: #E1B168; padding: 0.3rem 0.65rem; margin: 0 0 1.125rem;
}
.aia-cover h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); }
.aia-cover .mg-meta { color: #D1D5DB; }
.aia-filmband { margin-top: -4.5rem; position: relative; z-index: 3; background: none; }
@media (min-width: 900px) { .aia-filmband { margin-top: -6rem; } }

/* ---------- section openers ---------- */
.aia-opener { margin: 3rem -1rem 1.5rem; }
@media (min-width: 820px) {
  .aia-opener { width: min(1040px, calc(100vw - 4rem)); margin: 3.5rem 0 1.75rem calc(50% - min(520px, 50vw - 2rem)); }
}
.aia-opener img { display: block; width: 100%; height: auto; aspect-ratio: 1365 / 768; object-fit: cover; background: #F1E3CE; }
@media (min-width: 820px) { .aia-opener img { border-radius: 4px; } }
.aia-opener figcaption {
  font-size: 0.8125rem; line-height: 1.6; color: #4B5563; margin: 0.625rem 1rem 0; padding-left: 0.75rem;
  border-left: 2px solid #E1B168; font-style: italic;
}
@media (min-width: 820px) { .aia-opener figcaption { margin: 0.75rem 0 0; max-width: 760px; } }
.aia-opener figcaption b { font-style: normal; font-weight: 700; color: #1F2937; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.6875rem; margin-right: 0.35rem; }

.aia-kicker {
  font-family: 'Montserrat', 'AIA Montserrat Fallback', sans-serif; font-size: 0.75rem !important; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9a6b12 !important; margin: 2.75rem 0 0.375rem !important;
  display: flex; align-items: center; gap: 0.625rem;
}
.aia-kicker::after { content: ""; flex: 0 0 40px; height: 2px; background: #E1B168; }
.aia-opener + .aia-kicker { margin-top: 1.5rem !important; }
.mg-body .aia-kicker + h2 { margin-top: 0; }

/* ---------- drop cap + pull quote ---------- */
.mg-body .mg-lede::first-letter {
  float: left; font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif; font-size: 4.1em; line-height: 0.82;
  padding: 0.08em 0.12em 0 0; color: #9a6b12; font-weight: 600;
}
.aia-pull { margin: 2rem 0; padding: 1.25rem 0 1.25rem 1.5rem; border-left: 3px solid #E1B168; }
.aia-pull p {
  font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif !important; font-size: clamp(1.375rem, 3.2vw, 1.75rem) !important;
  line-height: 1.35 !important; color: #111827 !important; margin: 0 !important; font-style: italic;
}

/* ==========================================================================
   Interactive layer (added 2026-10-05): the fortnightly round, the AI-ready
   check, and the returning-visitor strip. Everything renders as plain content
   without JavaScript; .is-live is added by assets/js/ai-in-action.js.
   ========================================================================== */

.aia-new-badge {
  display: inline-block; font: 700 0.6875rem/1 'Montserrat', sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  background: #1F2937; color: #E1B168; border-radius: 999px; padding: 0.3rem 0.6rem; margin: 0 0 0.5rem;
}
.aia-new-badge[hidden] { display: none; }
legend .aia-new-badge { margin: 0 0 0 0.5rem; vertical-align: middle; }

/* returning visitors */
.aia-since { background: #1F2937; color: #F3F4F6; border-radius: 10px; padding: 1rem 1.125rem; margin: 0 0 1.75rem; border-left: 4px solid #E1B168; }
.mg-body .aia-since p { color: #F3F4F6; margin: 0 0 0.375rem; font-size: 0.9875rem; }
.aia-since ul { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 0.25rem 0; }
.mg-body .aia-since li { margin: 0; font-size: 0.9375rem; color: #D1D5DB; }
.aia-since li + li::before { content: "\00B7"; margin: 0 0.5rem; color: #9CA3AF; }
.mg-body .aia-since a { color: #E1B168; }

/* shared panel */
.aia-play { border: 1px solid #E5E7EB; border-radius: 12px; background: #FBF7F0; padding: 1.25rem; margin: 2.25rem 0; }
@media (min-width: 640px) { .aia-play { padding: 1.75rem; } }
.aia-play .aia-kicker { margin-top: 0 !important; }
.mg-body .aia-play-note { font-size: 0.8125rem; color: #4B5563; margin: 1rem 0 0; }
.aia-btn-ghost { background: transparent; color: #1F2937; border: 1.5px solid #1F2937; text-decoration: none !important; }
.aia-btn-dark { background: #1F2937; color: #fff; }
.aia-btn:focus-visible, .aia-btn-ghost:focus-visible { outline: 3px solid #9a6b12; outline-offset: 2px; }
.aia-play .aia-btn { text-decoration: none; }

/* the round */
.mg-body .aia-round-meta { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: #6f4c08; margin: 0 0 0.75rem; }
.aia-qs { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 0.875rem; counter-reset: aiaq; }
.aia-q { counter-increment: aiaq; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 1rem 1.125rem; margin: 0 !important; }
.aia-q[hidden] { display: none; }
.mg-body .aia-q-text { font-weight: 600; color: #111827; margin: 0 0 0.75rem; font-size: 1.0125rem; line-height: 1.5; }
.aia-q-text::before { content: counter(aiaq) ". "; color: #9a6b12; }
.aia-opts { list-style: none; margin: 0 0 0.5rem !important; padding: 0 !important; display: grid; gap: 0.5rem; }
.aia-opts li { margin: 0 !important; }
.aia-opt {
  width: 100%; display: flex; align-items: center; gap: 0.625rem; text-align: left; font: 500 0.9375rem/1.45 'Montserrat', 'AIA Montserrat Fallback', sans-serif;
  color: #1F2937; background: #F9FAFB; border: 1.5px solid #E5E7EB; border-radius: 8px; padding: 0.625rem 0.75rem; min-height: 44px;
}
.aia-opt:disabled { cursor: default; opacity: 1; color: #1F2937; }
.aia-round.is-live .aia-opt:not(:disabled) { cursor: pointer; }
.aia-opt-l { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #F1E3CE; color: #6f4c08; font-weight: 700; font-size: 0.8125rem; }
.aia-opt:focus-visible { outline: 3px solid #9a6b12; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .aia-round.is-live .aia-opt:not(:disabled) { transition: border-color 200ms var(--aia-ease), background-color 200ms var(--aia-ease); }
  .aia-round.is-live .aia-opt:not(:disabled):hover { border-color: #E1B168; background: #fff; }
}
.aia-opt.is-right { border-color: #1F2937; background: #1F2937; color: #fff; }
.aia-opt.is-right .aia-opt-l { background: #E1B168; color: #1F2937; }
.aia-opt.is-right::after { content: "Correct"; margin-left: auto; font-size: 0.75rem; font-weight: 700; color: #E1B168; letter-spacing: 0.04em; }
.aia-opt.is-wrong { border-color: #9a6b12; background: #fff; text-decoration: line-through; text-decoration-color: #9a6b12; }
.aia-opt.is-wrong::after { content: "Your answer"; margin-left: auto; font-size: 0.75rem; font-weight: 700; color: #6f4c08; text-decoration: none; }
.aia-q.is-done .aia-opt:not(.is-right):not(.is-wrong) { opacity: 0.6; }
.aia-q-ans summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: #6f4c08; padding: 0.25rem 0; }
.aia-q-ans summary:focus-visible { outline: 3px solid #9a6b12; outline-offset: 2px; }
.aia-round.is-live .aia-q-ans.is-locked { display: none; }
.aia-round.is-live .aia-q-ans summary { list-style: none; }
.aia-round.is-live .aia-q-ans summary::-webkit-details-marker { display: none; }
.mg-body .aia-q-ans p { font-size: 0.9375rem; line-height: 1.65; margin: 0.375rem 0 0; }
.aia-q-src { display: block; font-size: 0.8125rem; color: #6b7280; margin-top: 0.25rem; }
.mg-body .aia-q-stats { font-size: 0.8125rem !important; font-weight: 600; color: #1F2937; }
.mg-body .aia-q-stats:empty { display: none; }
.aia-q.is-done .aia-q-ans[open] > p:first-of-type { animation: aia-rise 420ms var(--aia-ease) both; }
.aia-more { margin-top: 0.875rem; }
.aia-more > summary { cursor: pointer; font-weight: 600; color: #6f4c08; padding: 0.5rem 0; }
.aia-more[hidden] { display: none; }
.aia-more .aia-qs { margin-top: 0.5rem !important; }

.aia-result { margin-top: 1.25rem; background: #1F2937; color: #F3F4F6; border-radius: 10px; padding: 1.25rem; }
.aia-result[hidden] { display: none; }
.mg-body .aia-result p { color: #D1D5DB; margin: 0 0 0.5rem; }
.mg-body .aia-result .aia-result-score { font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif; font-size: 1.5rem; color: #fff; }
.aia-result b { color: #E1B168; }
.aia-result-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.875rem; }
.aia-result .aia-btn-ghost { color: #fff; border-color: #E1B168; }
.aia-result .aia-btn[hidden] { display: none; }
.aia-result:not([hidden]) { animation: aia-rise 480ms var(--aia-ease) both; }

/* the check */
.aia-progress { position: sticky; top: 84px; z-index: 5; background: #1F2937; color: #F3F4F6; border-radius: 10px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.aia-progress[hidden] { display: none; }
.aia-progress-bar { height: 6px; border-radius: 999px; background: #374151; overflow: hidden; margin-bottom: 0.5rem; }
.aia-progress-bar i { display: block; height: 100%; width: 0; background: #E1B168; transition: width 500ms var(--aia-ease); }
.mg-body .aia-progress p { margin: 0; font-size: 0.875rem; color: #D1D5DB; }
.aia-progress b { color: #E1B168; }
.aia-checklist { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 0.625rem; }
.aia-ci { margin: 0 !important; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 0.875rem 1rem; }
.aia-ci fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.aia-ci legend { font-weight: 600; color: #111827; font-size: 0.9875rem; line-height: 1.5; padding: 0; margin: 0 0 0.625rem; }
.aia-ci-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aia-ci-opts label {
  display: inline-flex; align-items: center; gap: 0.4rem; border: 1.5px solid #E5E7EB; border-radius: 999px; padding: 0.4rem 0.85rem;
  font-size: 0.875rem; cursor: pointer; background: #F9FAFB; min-height: 40px;
}
.aia-ci-opts input { accent-color: #1F2937; width: 16px; height: 16px; margin: 0; }
.aia-ci-opts label:has(input:checked) { border-color: #1F2937; background: #fff; font-weight: 600; }
.aia-ci-opts label:has(input:focus-visible) { outline: 3px solid #9a6b12; outline-offset: 2px; }
.mg-body .aia-ci-fix { font-size: 0.9rem; line-height: 1.6; margin: 0.625rem 0 0; color: #374151; background: #FBF7F0; border-left: 3px solid #E1B168; padding: 0.5rem 0.75rem; border-radius: 0 8px 8px 0; }
.aia-check.is-live .aia-ci .aia-ci-fix { display: none; }
.aia-check.is-live .aia-ci[data-state="no"] .aia-ci-fix { display: block; animation: aia-rise 360ms var(--aia-ease) both; }
.aia-check.is-live .aia-ci[data-state="no"] { border-color: #E1B168; }
.aia-check.is-live .aia-ci[data-state="yes"] legend::before { content: "\2713  "; color: #9a6b12; font-weight: 700; }
.aia-check.is-live .aia-ci[data-state="na"] { opacity: 0.7; }

.aia-send { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #E9DCC5; }
.mg-body .aia-send h3 { margin: 0 0 0.375rem; }
.aia-send-grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin: 0.75rem 0; }
@media (min-width: 560px) { .aia-send-grid { grid-template-columns: 1fr 1fr; } .aia-send-wide { grid-column: 1 / -1; } }
.aia-send-grid label { display: grid; gap: 0.3rem; font-size: 0.875rem; font-weight: 600; color: #1F2937; }
.aia-opt-hint { font-weight: 400; color: #6b7280; }
.aia-send-grid input, .aia-send-grid textarea {
  font: 400 0.9375rem/1.5 'Montserrat', 'AIA Montserrat Fallback', sans-serif; border: 1.5px solid #D1D5DB; border-radius: 8px;
  padding: 0.6rem 0.75rem; background: #fff; color: #111827; min-height: 44px; width: 100%;
}
.aia-send-grid input:focus-visible, .aia-send-grid textarea:focus-visible { outline: 3px solid #9a6b12; outline-offset: 1px; border-color: #1F2937; }
.aia-send-pass { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.875rem; color: #374151; margin: 0.25rem 0 1rem; }
.aia-send-pass input { accent-color: #1F2937; margin-top: 0.2rem; }
.aia-send-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.mg-body .aia-send-msg { font-weight: 600; color: #1F2937; margin: 0.75rem 0 0; }
.mg-body .aia-send-msg:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .aia-play *, .aia-result { animation: none !important; transition: none !important; }
}
.aia-play .aia-kicker, .mg-body .aia-play .aia-round-meta { color: #6f4c08 !important; }
.mg-body .aia-play a:not(.aia-btn) { color: #6f4c08; }

/* ==========================================================================
   pass-word.css — "The Pass Word", the daily word game on /ai-in-action.html.
   Added 2026-10-05. Estate tokens only:
     gold #E1B168 / #D4A656, gold text #9a6b12 / #6f4c08, ink #111827 / #1F2937 /
     #374151 / #4B5563, wells #F1E3CE / #FBF7F0, Playfair Display + Montserrat.

   Tile states are told apart by SHAPE as well as colour, so they read for
   colour-blind players:  correct = solid gold · present = gold outline ·
   absent = slate fill.

   Motion: a pop when a letter lands (200ms), a flip as each guess is revealed
   (500ms per tile, staggered), a shake for an invalid word (400ms), a bounce on
   a win. All once per action, none looping; all removed under reduced motion.
   ========================================================================== */

.pw {
  --pw-gold: #E1B168; --pw-ink: #111827; --pw-slate: #374151; --pw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pw-t: max(40px, min(15.5vw, 60px, calc((100vh - 330px) / 6.6)));
  --pw-t: max(40px, min(15.5vw, 60px, calc((100svh - 330px) / 6.6)));
  position: relative; margin: 2.5rem -1rem; padding: 1.75rem 1rem 1.5rem; color: #F3F4F6;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(225, 177, 104, 0.16), rgba(225, 177, 104, 0) 60%),
    linear-gradient(180deg, #1F2937 0%, #111827 100%);
  overflow: hidden;
}
@media (min-width: 640px) {
  .pw { margin: 2.75rem 0; border-radius: 16px; padding: 2.25rem 2rem 1.75rem; box-shadow: 0 24px 48px rgba(17, 24, 39, 0.22); border: 1px solid #374151; }
}
.pw::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

.pw-head { text-align: center; max-width: 30rem; margin: 0 auto 1.25rem; }
.mg-body .pw-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pw-gold); margin: 0 0 0.5rem; }
.pw-kicker::before, .pw-kicker::after { content: ""; width: 22px; height: 1px; background: var(--pw-gold); opacity: 0.7; }
.mg-body .pw h2 { font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif; color: #fff; font-size: clamp(1.9rem, 6vw, 2.5rem); margin: 0 0 0.5rem; letter-spacing: 0.01em; }
.mg-body .pw-intro { color: #D1D5DB; font-size: 0.9875rem; line-height: 1.6; margin: 0 0 0.75rem; }
.mg-body .pw-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem 1rem; font-size: 0.75rem; letter-spacing: 0.04em; color: #9CA3AF; margin: 0; }
.pw-meta b { color: var(--pw-gold); }
.pw-meta [hidden] { display: none; }

/* the clue: space reserved as soon as the page knows JavaScript is running, so the
   board never jumps when the clue arrives; absent entirely without JavaScript */
.pw-clue { display: none; }
.pw-js .pw-clue {
  display: block; text-align: center; max-width: 26rem; min-height: 5.25rem; margin: 0 auto 1rem;
  padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid rgba(225, 177, 104, 0.35); background: rgba(225, 177, 104, 0.06);
}
.mg-body .pw-clue-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pw-gold); margin: 0 0 0.3rem; }
.mg-body .pw-clue-text {
  font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif; font-style: italic; font-size: 1.1875rem; line-height: 1.4;
  color: #fff; margin: 0;
}

/* board */
.pw-board { display: grid; gap: 6px; justify-content: center; margin: 0 auto; touch-action: manipulation; }
.pw-row { display: grid; grid-template-columns: repeat(5, var(--pw-t)); gap: 6px; }
.pw-tile {
  width: var(--pw-t); height: var(--pw-t); display: grid; place-items: center; box-sizing: border-box;
  font: 700 calc(var(--pw-t) * 0.5)/1 'Montserrat', 'AIA Montserrat Fallback', sans-serif; text-transform: uppercase; color: #fff;
  border: 2px solid #374151; border-radius: 8px; background: rgba(255, 255, 255, 0.02); user-select: none;
}
.pw-tile.is-filled { border-color: #9CA3AF; }
.pw-tile.is-correct { background: var(--pw-gold); border-color: var(--pw-gold); color: var(--pw-ink); }
.pw-tile.is-present { background: rgba(225, 177, 104, 0.08); border-color: var(--pw-gold); color: var(--pw-gold); box-shadow: inset 0 0 0 1px var(--pw-gold); }
.pw-tile.is-absent { background: #374151; border-color: #374151; color: #D1D5DB; }

/* keyboard */
.pw-keys { display: grid; gap: 7px; margin: 0.25rem auto 0; max-width: 500px; touch-action: manipulation; user-select: none; }
.pw-krow { display: flex; gap: 6px; justify-content: center; }
.pw-krow:nth-child(2) { padding: 0 4.5%; }
.pw-keys button {
  flex: 1 1 0; min-width: 0; height: 54px; border: 0; border-radius: 8px; cursor: pointer;
  font: 700 0.9375rem/1 'Montserrat', 'AIA Montserrat Fallback', sans-serif; color: #F3F4F6; background: #4B5563;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; padding: 0;
}
.pw-keys .pw-wide { flex: 1.55 1 0; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.pw-keys svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pw-keys button.is-correct { background: var(--pw-gold); color: var(--pw-ink); }
.pw-keys button.is-present { background: #1F2937; color: var(--pw-gold); box-shadow: inset 0 0 0 2px var(--pw-gold); }
.pw-keys button.is-absent { background: #1F2937; color: #6B7280; }
.pw-keys button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pw-keys button:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .pw-keys button { transition: background-color 200ms var(--pw-ease), filter 200ms var(--pw-ease); }
  .pw-keys button:hover { filter: brightness(1.15); }
}
.pw:not(.is-live) .pw-keys button { cursor: default; opacity: 0.55; }
.pw:not(.is-live) .pw-keys button:active { transform: none; }

.mg-body .pw-toast {
  min-height: 1.375rem; margin: 0.5rem 0 0; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--pw-gold);
}
.mg-body .pw-nojs { text-align: center; color: #D1D5DB; font-size: 0.9375rem; margin: 1rem 0 0; }

.pw.is-done .pw-keys { display: none; }
.pw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* end card */
.pw-end { margin: 1.5rem auto 0; max-width: 30rem; text-align: center; border-top: 1px solid #374151; padding-top: 1.5rem; }
.pw-end[hidden] { display: none; }
.mg-body .pw-end-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pw-gold); margin: 0 0 0.375rem; }
.mg-body .pw-end-word { font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif; font-size: 2.5rem; letter-spacing: 0.18em; color: #fff; margin: 0 0 0.75rem; }
.mg-body .pw-end-lesson { font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif; font-style: italic; font-size: 1.1875rem; line-height: 1.55; color: #F3F4F6; margin: 0 0 0.625rem; }
.mg-body .pw-end-link { font-size: 0.875rem; margin: 0 0 1.25rem; }
.mg-body .pw a { color: var(--pw-gold); }
.pw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0 0 1rem; }
.mg-body .pw-stats p { margin: 0; display: grid; gap: 0.125rem; color: #9CA3AF; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.pw-stats b { font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif; font-size: 1.75rem; color: #fff; letter-spacing: 0; text-transform: none; }
.pw-dist { list-style: none; margin: 0 0 1.25rem !important; padding: 0 !important; display: grid; gap: 4px; }
.pw-dist li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; align-items: center; margin: 0 !important; font-size: 0.75rem; color: #9CA3AF; }
.pw-dist i { display: block; height: 18px; }
.pw-dist b { display: block; height: 100%; min-width: 22px; width: 0; border-radius: 4px; background: #4B5563; color: #fff; font: 700 0.6875rem/18px 'Montserrat', sans-serif; text-align: right; padding: 0 6px; box-sizing: border-box; }
.pw-dist li.is-today b { background: var(--pw-gold); color: var(--pw-ink); }
.pw-end.is-bonus .pw-stats, .pw-end.is-bonus .pw-dist { display: none; }
.pw-bonus { margin: 0 0 1.25rem; }
.pw-bonus-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0 1.5rem; border: 0; border-radius: 999px;
  cursor: pointer; font: 700 0.9375rem/1 'Montserrat', 'AIA Montserrat Fallback', sans-serif; color: var(--pw-ink);
  background: linear-gradient(180deg, #F1E3CE 0%, #E1B168 100%); box-shadow: 0 10px 24px rgba(225, 177, 104, 0.25);
}
.pw-bonus-btn:hover { filter: brightness(1.05); }
.pw-bonus-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pw-bonus-btn[hidden], .pw-bonus-line[hidden] { display: none; }
.mg-body .pw-bonus-line { font-size: 0.875rem; color: #D1D5DB; margin: 0; }
.pw-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; }
.pw-share, .pw-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.25rem; border-radius: 999px;
  font: 700 0.875rem/1 'Montserrat', 'AIA Montserrat Fallback', sans-serif; text-decoration: none !important; cursor: pointer;
}
.pw-share { background: var(--pw-gold); color: var(--pw-ink); border: 0; }
.pw-share:hover { background: #D4A656; }
.mg-body .pw .pw-ghost { color: #fff; border: 1.5px solid var(--pw-gold); background: transparent; }
.pw-share:focus-visible, .pw-ghost:focus-visible, .pw summary:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mg-body .pw-next { font-size: 0.75rem; color: #9CA3AF; margin: 1rem 0 0; }

/* how to play + archive */
.pw-how, .pw-arch { max-width: 30rem; margin: 1.25rem auto 0; border-top: 1px solid #374151; padding-top: 0.75rem; }
.pw-how + .pw-arch { margin-top: 0.5rem; }
.pw-how summary, .pw-arch summary { cursor: pointer; color: #F3F4F6; font-weight: 600; font-size: 0.9375rem; padding: 0.375rem 0; }
.mg-body .pw-how p, .mg-body .pw-arch p { color: #D1D5DB; font-size: 0.9rem; line-height: 1.6; margin: 0.5rem 0; }
.pw-how b { color: #fff; }
.pw-ex { display: flex; gap: 5px; margin: 0.75rem 0 0.25rem; }
.pw-ex .pw-tile { --pw-t: 40px; width: 40px; height: 40px; font-size: 1.125rem; }
.pw-arch-list { list-style: none; margin: 0.5rem 0 0 !important; padding: 0 !important; display: grid; gap: 0.875rem; max-height: 26rem; overflow: auto; padding-right: 0.25rem !important; }
.pw-arch-list li { margin: 0 !important; }
.mg-body .pw-arch-w { margin: 0 0 0.125rem !important; }
.pw-arch-w b { font-family: 'Playfair Display', 'AIA Playfair Fallback', Georgia, serif; letter-spacing: 0.14em; color: var(--pw-gold); font-size: 1.0625rem; }
.pw-arch-w span { font-size: 0.75rem; color: #9CA3AF; margin-left: 0.375rem; }

/* cover call to action */
.pw-cta-wrap { margin: 1.25rem 0 0; }
.pw-cta {
  display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none !important; color: #111827 !important;
  background: #E1B168; border-radius: 999px; padding: 0.45rem 1.1rem 0.45rem 0.5rem; font: 700 0.875rem/1 'Montserrat', sans-serif;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.pw-cta:hover { background: #D4A656; }
.pw-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pw-cta-tiles { display: inline-flex; gap: 3px; }
.pw-cta-tiles i { width: 22px; height: 22px; display: grid; place-items: center; font-style: normal; font-size: 0.75rem; border-radius: 4px; background: #111827; color: #E1B168; }

/* motion */
.pw-tile.is-pop { animation: pw-pop 200ms var(--pw-ease); }
.pw-row.is-shake { animation: pw-shake 400ms ease; }
.pw-tile.is-flip { animation: pw-flip 500ms ease both; animation-delay: var(--pw-d, 0ms); }
.pw-tile.is-flip.is-correct, .pw-tile.is-flip.is-present, .pw-tile.is-flip.is-absent {
  transition: background-color 0s linear calc(var(--pw-d, 0ms) + 250ms), border-color 0s linear calc(var(--pw-d, 0ms) + 250ms),
              color 0s linear calc(var(--pw-d, 0ms) + 250ms), box-shadow 0s linear calc(var(--pw-d, 0ms) + 250ms);
}
.pw-tile.is-win { animation: pw-bounce 600ms var(--pw-ease) both; animation-delay: var(--pw-d, 0ms); }
.pw-end:not([hidden]) { animation: pw-rise 600ms var(--pw-ease) both; }
@keyframes pw-pop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes pw-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes pw-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
@keyframes pw-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 70% { transform: translateY(2px); } }
@keyframes pw-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pw *, .pw-end { animation: none !important; transition: none !important; }
}

/* The site's floating back-to-top button sits over the Delete key on phones;
   it steps aside while the board is on screen. */
html.pw-playing #back-to-top { opacity: 0 !important; pointer-events: none !important; }