/* Ember skin — component layer, drawn from the Axiom Power Webflow template (the template's name, not the skin's): Archivo (width 100) and IBM Plex Mono with
   Pretendard / IBM Plex Sans KR for Hangul (no serif faces), carbon neutrals, 1px hairlines, one orange (#ff4d00),
   mono uppercase eyebrows with a square mark, text rows that roll on hover, arrow boxes on link buttons, a floating
   glass bar, stat cards, an orange statement and footer. Sizes and tracking follow the template at 1440 px: display
   98/1.0/-0.03em, statement 48/1.2, card titles 21/1.2 500, body 14/1.5, eyebrows 10.5 px mono +0.15em uppercase.
   Colours of every other rule come from ember-base.css (generated). Everything is scoped to html[data-skin="ember"]. */

html[data-skin="ember"] {
  --em-bg: #0b0c0d; --em-c900: #141517; --em-c800: #1e2124; --em-c700: #2b2f33;
  --em-hair: #2e3236; --em-ui: #5e6266; --em-text: #f3f1ec; --em-text2: #a5a29a; --em-text3: #83847d;
  --em-light-10: rgba(243,241,236,.1); --em-light-20: rgba(243,241,236,.2);
  --em-veil: rgba(28,29,31,.62); --em-veil-95: rgba(18,19,21,.94);
  --em-brand: #ff4d00; --em-brand-400: #ff6b1f; --em-brand-200: #ffd9c4; --em-amber: #e3a13b; --em-on-brand-2: rgba(11,12,13,.6);
  --em-ease: cubic-bezier(.77,0,.175,1); --em-ease-out: cubic-bezier(.25,1,.5,1);
  --em-sans: "Archivo", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --em-mono: "IBM Plex Mono", "IBM Plex Sans KR", "Pretendard Variable", Pretendard, ui-monospace, monospace;
  --em-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17.4'/%3E%3Cpath d='m15.2 6.8 5.2 5.2-5.2 5.2'/%3E%3C/svg%3E");
  --em-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0c0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17.4'/%3E%3Cpath d='m15.2 6.8 5.2 5.2-5.2 5.2'/%3E%3C/svg%3E");
  /* the site's own variables, on the Ember palette */
  --navy-950: #0b0c0d; --navy-900: #0b0c0d; --navy-850: #141517; --navy-800: #1e2124; --navy-700: #2b2f33;
  --ink: #f3f1ec; --muted: #a5a29a; --line: #2e3236; --paper: #0b0c0d; --card: #141517;
  --blue: #f3f1ec; --blue-soft: rgba(243,241,236,.08); --teal: #f3f1ec; --amber: #e3a13b; --rose: #ff6b1f; --shadow: none;
  font-family: var(--em-sans);
  color: var(--em-text);
  background: var(--em-bg);
  color-scheme: dark;
}
html[data-skin="ember"], html[data-skin="ember"] :is(.topbar, .nav-panel, .platform-shell) { --argus: #f3f1ec; --ariadne: #d8d5cc; --hermes: #a5a29a; --mentor: #83847d; --talos: #e3a13b; }
html[data-skin="ember"] body { background: var(--em-bg); color: var(--em-text); font-family: var(--em-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; word-break: keep-all; }
html[data-skin="ember"] :is(button, input, select, textarea) { font-family: var(--em-sans); }
html[data-skin="ember"] ::selection { background: var(--em-brand); color: var(--em-bg); }
html[data-skin="ember"] :focus-visible { outline: 1px solid var(--em-brand); outline-offset: 2px; }
html[data-skin="ember"] #theme-toggle { display: none; }
html[data-skin="ember"] :is(h1, h2, h3, h4) { font-weight: 400; }
html[data-skin="ember"] :is(.mono, .card-id, .ledger-id, .branch-code, time) { font-family: var(--em-mono); }

/* Lenis (as the template) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- text rows that roll up on hover ---- */
html[data-skin="ember"] .em-roll { display: inline-block; height: 1.4em; overflow: hidden; line-height: 1.4; vertical-align: middle; }
html[data-skin="ember"] .em-roll__t { display: block; text-shadow: 0 1.4em currentColor; transition: transform .6s var(--em-ease); }
html[data-skin="ember"] :is(a, button):is(:hover, :focus-visible) > .em-roll > .em-roll__t { transform: translate3d(0, -1.4em, 0); }

/* ---- eyebrows: mono, uppercase, a square mark ---- */
html[data-skin="ember"] .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--em-mono); font-size: 10.5px; font-weight: 400; line-height: 1.1; letter-spacing: .15em; text-transform: uppercase; color: var(--em-text2); }
html[data-skin="ember"] .eyebrow::before { content: ""; flex: none; width: 4px; height: 4px; background: var(--em-brand); }
html[data-skin="ember"] .eyebrow.light { color: var(--em-text2); }
/* Hangul in the mono labels: close tracking (skins.js marks them). */
html[data-skin="ember"] [data-em-hangul] { letter-spacing: .02em !important; }

/* ---- floating glass bar ---- */
html[data-skin="ember"] .topbar { position: sticky; top: 12px; height: 53px; margin: 12px 17px 0; padding: 0 10px 0 16px; gap: 20px; color: var(--em-text); background: var(--em-veil); border: 0; border-bottom: 1px solid var(--em-hair); border-radius: 12px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
/* the wordmark carries the bar: no strapline, and the mark's tallest bar matches the cap height of AEGIS (.73em of 28px)
   so the two read at one weight */
html[data-skin="ember"] .brand { gap: 11px; min-width: 0; align-items: baseline; transition: opacity .24s var(--em-ease); }
html[data-skin="ember"] .brand:hover { opacity: .7; }
html[data-skin="ember"] .brand strong { font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: .005em; }
html[data-skin="ember"] .brand em { display: none; }
html[data-skin="ember"] .brand-mark { transform: none; gap: 2.5px; width: auto; height: 19.5px; }
html[data-skin="ember"] .brand-mark span { width: 6px; border-radius: 0; background: var(--em-text); opacity: 1; }
html[data-skin="ember"] .brand-mark span:nth-child(1) { height: 11.5px; }
html[data-skin="ember"] .brand-mark span:nth-child(2) { height: 19.5px; background: var(--em-text); }
html[data-skin="ember"] .brand-mark span:nth-child(3) { height: 6.5px; background: var(--em-brand); }
html[data-skin="ember"] .topnav { gap: 26px; }
html[data-skin="ember"] .topnav a, html[data-skin="ember"] .nav-link, html[data-skin="ember"] .nav-branch-button { color: var(--em-text); font-size: 14px; font-weight: 400; letter-spacing: 0; transition: color .24s var(--em-ease); }
html[data-skin="ember"] .topnav a:hover, html[data-skin="ember"] .nav-link:hover, html[data-skin="ember"] .nav-branch-button:hover, html[data-skin="ember"] .topnav a.active, html[data-skin="ember"] .nav-link.active, html[data-skin="ember"] .nav-branch.active .nav-branch-button, html[data-skin="ember"] .nav-branch.open .nav-branch-button { color: var(--em-brand); }
html[data-skin="ember"] .topnav a.active::after, html[data-skin="ember"] .nav-branch.active::after { display: none; }
html[data-skin="ember"] .nav-branch-button { gap: 7px; padding: 6px 0; }
html[data-skin="ember"] .nav-branch-button::after { content: ""; width: 5px; height: 5px; margin: -3px 0 0 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; font-size: 0; color: inherit; transform: rotate(45deg); transition: transform .3s var(--em-ease), margin .3s var(--em-ease); }
html[data-skin="ember"] .nav-branch.open .nav-branch-button::after { margin-top: 3px; transform: rotate(225deg); }
html[data-skin="ember"] .nav-dot { width: 5px; height: 5px; border-radius: 0; }
html[data-skin="ember"] .nav-count { min-width: 0; height: auto; padding: 1px 5px; margin-left: 5px; border-radius: 3px; background: var(--em-light-10); color: var(--em-text2); font-family: var(--em-mono); font-size: 10px; }
html[data-skin="ember"] .topbar-actions { gap: 6px; }
html[data-skin="ember"] :is(.icon-button, .avatar-button) { width: 32px; height: 32px; border: 1px solid var(--em-hair); border-radius: 6px; background: transparent; color: var(--em-text); transition: background-color .24s var(--em-ease), border-color .24s var(--em-ease); }
html[data-skin="ember"] :is(.icon-button, .avatar-button):hover { background: var(--em-light-10); border-color: var(--em-ui); }
html[data-skin="ember"] .avatar-button { border: 0; background: var(--em-brand); color: var(--em-bg); font-weight: 600; }
html[data-skin="ember"] .avatar-button:hover { background: var(--em-brand-400); }

/* mega panel */
html[data-skin="ember"] .nav-panel { top: calc(100% + 8px); border: 1px solid var(--em-hair); border-radius: 12px; background: var(--em-veil-95); color: var(--em-text); box-shadow: none; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); overflow: hidden; animation: em-drop .5s var(--em-ease-out) both; }
html[data-skin="ember"] .nav-menu-inner { max-width: none; padding: 26px 24px 28px; gap: 40px; grid-template-columns: minmax(240px, .8fr) minmax(0, 2.2fr); }
html[data-skin="ember"] .nav-menu-head { gap: 12px; }
html[data-skin="ember"] .nav-menu-head strong { font-size: 32px; font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
html[data-skin="ember"] .nav-menu-summary { color: var(--em-text2); font-size: 14px; font-weight: 300; line-height: 1.5; }
html[data-skin="ember"] .nav-motif { margin-top: 6px; color: var(--em-text3); font-family: var(--em-mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="ember"] .nav-menu-grid { gap: 0 28px; border-top: 1px solid var(--em-hair); }
html[data-skin="ember"] .nav-page { position: relative; gap: 5px; padding: 15px 34px 15px 0; border: 0; border-bottom: 1px solid var(--em-hair); border-radius: 0; background: transparent; color: var(--em-text); transition: padding .24s var(--em-ease); animation: em-fade .6s var(--em-ease-out) both; }
html[data-skin="ember"] .nav-page:nth-child(2) { animation-delay: 40ms; } html[data-skin="ember"] .nav-page:nth-child(3) { animation-delay: 80ms; } html[data-skin="ember"] .nav-page:nth-child(4) { animation-delay: 120ms; } html[data-skin="ember"] .nav-page:nth-child(5) { animation-delay: 160ms; } html[data-skin="ember"] .nav-page:nth-child(n+6) { animation-delay: 200ms; }
html[data-skin="ember"] .nav-page::after { content: ""; position: absolute; right: 4px; top: 50%; width: 15px; height: 15px; background: var(--em-brand); -webkit-mask: var(--em-arrow-light) center / contain no-repeat; mask: var(--em-arrow-light) center / contain no-repeat; opacity: 0; transform: translate3d(-.5em, -50%, 0); transition: opacity .3s var(--em-ease), transform .3s var(--em-ease); }
html[data-skin="ember"] .nav-page:hover, html[data-skin="ember"] .nav-page.active { padding-left: 6px; border-color: var(--em-hair); background: transparent; }
html[data-skin="ember"] .nav-page:is(:hover, :focus-visible)::after { opacity: 1; transform: translate3d(0, -50%, 0); }
html[data-skin="ember"] .nav-page strong { font-size: 17.5px; font-weight: 400; line-height: 1.1; }
html[data-skin="ember"] .nav-page.active strong { color: var(--em-brand); }
html[data-skin="ember"] .nav-page span { color: var(--em-text2); font-size: 12.5px; font-weight: 300; line-height: 1.45; }
html[data-skin="ember"] .nav-page em { font-family: var(--em-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
html[data-skin="ember"] .branch-code { font-family: var(--em-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .15em; }

/* ---- buttons: ghost by default, brand for primary, base (light) in heroes; link buttons carry an arrow box ---- */
html[data-skin="ember"] .button { min-height: 34px; padding: 0 14px; gap: 12px; border: 1px solid var(--em-ui); border-radius: 6px; background: transparent; color: var(--em-text); font-size: 13px; font-weight: 500; letter-spacing: 0; transition: background-color .24s var(--em-ease), border-color .24s var(--em-ease), color .24s var(--em-ease); }
html[data-skin="ember"] .button:hover { background: var(--em-light-10); border-color: var(--em-ui); color: var(--em-text); }
html[data-skin="ember"] .button.primary { background: var(--em-brand); border-color: var(--em-brand); color: var(--em-bg); }
html[data-skin="ember"] .button.primary:hover { background: var(--em-brand-400); border-color: var(--em-brand-400); color: var(--em-bg); }
html[data-skin="ember"] .button.subtle { background: var(--em-c800); border-color: var(--em-c800); color: var(--em-text); }
html[data-skin="ember"] .button.subtle:hover { background: var(--em-c700); border-color: var(--em-c700); }
html[data-skin="ember"] :is(.hero-actions .button:not(.ghost), .map-side-action .button) { background: var(--em-text); border-color: var(--em-text); color: var(--em-bg); }
html[data-skin="ember"] :is(.hero-actions .button:not(.ghost), .map-side-action .button):hover { background: var(--em-brand); border-color: var(--em-brand); color: var(--em-bg); }
html[data-skin="ember"] a.button { padding-right: 6px; }
html[data-skin="ember"] a.button::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 4px; background-color: rgba(243,241,236,.2); background-image: var(--em-arrow-light), var(--em-arrow-light); background-repeat: no-repeat; background-size: 12px 12px; background-position: 50% 50%, -150% 50%; transition: background-position .55s var(--em-ease), background-color .24s var(--em-ease); }
html[data-skin="ember"] :is(a.button.primary, .hero-actions a.button:not(.ghost), .map-side-action a.button)::after { background-color: var(--em-bg); }
html[data-skin="ember"] a.button:is(:hover, :focus-visible)::after { background-position: 250% 50%, 50% 50%; }
html[data-skin="ember"] .em-button-dark { background: var(--em-bg); border-color: var(--em-bg); color: var(--em-text); }
html[data-skin="ember"] .em-button-dark:hover { background: var(--em-c800); border-color: var(--em-c800); color: var(--em-text); }
html[data-skin="ember"] a.em-button-dark::after { background-color: rgba(243,241,236,.2); }

/* pills: mono chips; amber is synthetic */
html[data-skin="ember"] .pill { padding: 4px 7px; gap: 5px; border: 1px solid var(--em-ui); border-radius: 4px; background: transparent; color: var(--em-text2); font-family: var(--em-mono); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
html[data-skin="ember"] .pill.synthetic { border-color: rgba(227,161,59,.5); color: var(--em-amber); background: rgba(227,161,59,.08); }
html[data-skin="ember"] .pill.public { border-color: rgba(243,241,236,.4); color: var(--em-text); }
html[data-skin="ember"] .pill.saved { border-color: var(--em-brand); color: var(--em-brand); }

/* forms */
html[data-skin="ember"] :is(.search-input, .select-input, .map-explorer input, .map-explorer select, textarea) { background: transparent; border: 1px solid var(--em-hair); border-radius: 6px; color: var(--em-text); font-size: 14px; transition: border-color .24s var(--em-ease); }
html[data-skin="ember"] :is(.search-input, .select-input, .map-explorer input, .map-explorer select, textarea):hover { border-color: var(--em-ui); }
html[data-skin="ember"] :is(.search-input, .select-input, .map-explorer input, .map-explorer select, textarea):focus { border-color: var(--em-brand); box-shadow: none; outline: none; }
html[data-skin="ember"] ::placeholder { color: var(--em-text3); }
html[data-skin="ember"] select option { background: var(--em-c900); color: var(--em-text); }

/* ---- pages and headings ---- */
html[data-skin="ember"] .page { max-width: 1440px; padding: 64px 32px 96px; }
html[data-skin="ember"] .page-heading { align-items: flex-end; gap: 40px; margin-bottom: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--em-hair); }
html[data-skin="ember"] .page-heading h1 { margin: 16px 0 0; font-size: clamp(40px, 4.45vw, 64px); font-weight: 400; line-height: 1.02; letter-spacing: -.03em; }
html[data-skin="ember"] .page-heading p { max-width: 520px; margin-top: 18px; color: var(--em-text2); font-size: 14px; font-weight: 300; line-height: 1.5; }
html[data-skin="ember"] .muted { color: var(--em-text2); }
html[data-skin="ember"] .section-title { display: flex; align-items: center; gap: 12px; margin: 112px 0 32px; font-size: clamp(32px, 2.95vw, 42px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
html[data-skin="ember"] .section-title::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--em-brand); }

/* ---- home: hero on the dotted orbit and orange light lines ---- */
html[data-skin="ember"] .home-page { padding-top: 0; }
html[data-skin="ember"] .home-page section { margin-bottom: 0; }
html[data-skin="ember"] .hero-panel { position: relative; isolation: isolate; min-height: calc(100vh - 65px); margin: -65px -32px 0; padding: 150px 32px 32px; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); align-items: end; gap: 40px; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
html[data-skin="ember"] .hero-panel::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/ember-hero.svg") 62% 42% / cover no-repeat; animation: em-drift 26s ease-in-out infinite alternate; }
html[data-skin="ember"] .hero-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,12,13,.75), rgba(11,12,13,.2) 15%, transparent 36%), linear-gradient(100deg, rgba(11,12,13,.9) 8%, rgba(11,12,13,.35) 48%, transparent 70%), linear-gradient(0deg, var(--em-bg), transparent 28%); }
html[data-skin="ember"] .hero-main { gap: 28px; align-content: end; }
html[data-skin="ember"] .hero-main h1 { max-width: 11.5em; font-size: clamp(48px, 6.8vw, 98px); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
html[data-skin="ember"] .hero-main > p:not(.hero-fresh) { max-width: 322px; color: var(--em-text); font-size: 14px; line-height: 1.5; }
html[data-skin="ember"] .home-page:has(.em-statement) .hero-main > p:not(.hero-fresh) { display: none; }
html[data-skin="ember"] .hero-actions { gap: 8px; margin-top: 0; }
html[data-skin="ember"] .hero-fresh { margin: 0; color: var(--em-text3); font-family: var(--em-mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="ember"] .hero-stats { grid-template-columns: 1fr; gap: 0; margin: 0; padding: 6px 16px; align-self: end; background: var(--em-veil-95); border: 1px solid var(--em-hair); border-radius: 8px; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
html[data-skin="ember"] .hero-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; background: transparent; border-bottom: 1px solid var(--em-hair); transition: padding .24s var(--em-ease); }
html[data-skin="ember"] .hero-stats > div:last-child { border-bottom: 0; }
html[data-skin="ember"] .hero-stats > div:hover { padding-inline: 6px; }
html[data-skin="ember"] .hero-stats dt { display: flex; align-items: center; gap: 8px; color: var(--em-text2); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; }
html[data-skin="ember"] .hero-stats dt::before { content: ""; width: 5px; height: 5px; background: var(--em-text3); }
html[data-skin="ember"] .hero-stats > div:first-child dt::before { background: var(--em-brand); }
html[data-skin="ember"] .hero-stats dd { font-size: 14px; font-weight: 400; letter-spacing: 0; text-align: right; }

/* the title rises letter by letter; lines after the first read secondary */
html[data-skin="ember"] .em-word { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
html[data-skin="ember"] .em-char { display: inline-block; transform: translate3d(0, 110%, 0); animation: em-rise 1.1s var(--em-ease-out) forwards; animation-delay: calc(var(--i) * 24ms + 150ms); }
html[data-skin="ember"] .em-word.em-soft { color: var(--em-text2); }

/* the statement: orange plane, dark text filling line by line */
html[data-skin="ember"] .em-statement { margin: 0 -32px; }
html[data-skin="ember"] .em-statement-inner { --em-open: 1; min-height: 96vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 44px; margin: 0 calc((1 - var(--em-open)) * 12px); padding: 120px calc(32px - (1 - var(--em-open)) * 12px); border-radius: calc((1 - var(--em-open)) * 12px); background: var(--em-brand); color: var(--em-bg); }
html[data-skin="ember"] .em-statement .eyebrow { color: rgba(11,12,13,.72); }
html[data-skin="ember"] .em-statement .eyebrow::before { background: var(--em-bg); }
html[data-skin="ember"] .em-statement-text { max-width: 1376px; margin: 0; font-size: clamp(28px, 3.34vw, 48px); font-weight: 400; line-height: 1.2; letter-spacing: -.005em; color: var(--em-bg); }
html[data-skin="ember"] .em-sw { opacity: .25; transition: opacity .25s linear; }

/* attention: stat cards */
html[data-skin="ember"] .attention-grid { gap: 14px; }
html[data-skin="ember"] .attention-card { position: relative; min-height: 300px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; align-content: stretch; gap: 18px 16px; padding: 28px 30px 30px; border: 0; border-left: 0; border-radius: 12px; background: var(--em-c900); color: var(--em-text); transition: background-color .3s var(--em-ease); }
/* as the template's stat cards: label top left, the figure top right, the note bottom left */
html[data-skin="ember"] .attention-card > .eyebrow { grid-area: 1 / 1; align-self: start; }
html[data-skin="ember"] .attention-card > strong { grid-area: 1 / 2 / 3 / 3; align-self: start; text-align: right; }
html[data-skin="ember"] .attention-card > span:last-child { grid-area: 3 / 1 / 4 / 3; align-self: end; }
html[data-skin="ember"] .attention-card:hover { background: var(--em-c800); border-left-color: transparent; transform: none; }
html[data-skin="ember"] .attention-card strong { font-size: clamp(56px, 5.6vw, 88px); font-weight: 300; line-height: .85; letter-spacing: -.02em; }
html[data-skin="ember"] .attention-card span:last-child { max-width: 30em; color: var(--em-text2); font-size: 14px; font-weight: 300; line-height: 1.5; }

/* five branches: one ruled spec list */
html[data-skin="ember"] .branch-cards { gap: 0; border: 1px solid var(--em-hair); border-radius: 8px; overflow: hidden; }
html[data-skin="ember"] .branch-card { gap: 40px; padding: 28px 24px 24px; border: 0; border-top: 0; border-right: 1px solid var(--em-hair); border-radius: 0; background: transparent; transition: background-color .3s var(--em-ease); }
html[data-skin="ember"] .branch-card:last-child { border-right: 0; }
html[data-skin="ember"] .branch-card:hover { background: rgba(243,241,236,.03); transform: none; }
html[data-skin="ember"] .branch-card .branch-code { display: inline-flex; align-items: center; gap: 8px; color: var(--em-text2); }
html[data-skin="ember"] .branch-card .branch-code::before { content: ""; width: 5px; height: 5px; background: var(--em-text3); }
html[data-skin="ember"] :is(.branch-card.talos .branch-code::before) { background: var(--em-amber); }
html[data-skin="ember"] .branch-card h3 { margin: 22px 0 10px; font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
html[data-skin="ember"] .branch-card h3 a { color: var(--em-text); transition: color .24s var(--em-ease); }
html[data-skin="ember"] .branch-card h3 a:hover { color: var(--em-brand); }
html[data-skin="ember"] .branch-card p { color: var(--em-text2); font-size: 14px; font-weight: 300; line-height: 1.3; }
html[data-skin="ember"] .branch-card .branch-stats { margin-top: 14px; color: var(--em-text3); font-family: var(--em-mono); font-size: 10.5px; font-weight: 400; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="ember"] .branch-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
html[data-skin="ember"] .branch-links a { color: var(--em-text2); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; transition: color .24s var(--em-ease); }
html[data-skin="ember"] .branch-links a:hover { color: var(--em-brand); }
html[data-skin="ember"] .flow-note { margin-top: 18px; color: var(--em-text3); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; }

/* status strip: readout rows */
html[data-skin="ember"] .status-strip { gap: 0; margin: 96px 0 0; border-top: 1px solid var(--em-hair); }
html[data-skin="ember"] .status-tile { gap: 10px; padding: 22px 20px 24px 0; border: 0; border-right: 1px solid var(--em-hair); border-radius: 0; background: transparent; transition: padding .24s var(--em-ease), background-color .24s var(--em-ease); }
html[data-skin="ember"] .status-tile + .status-tile { padding-left: 20px; }
html[data-skin="ember"] .status-tile:last-child { border-right: 0; }
html[data-skin="ember"] a.status-tile:hover { border-color: var(--em-hair); background: rgba(243,241,236,.03); }
html[data-skin="ember"] .status-tile span { display: flex; align-items: center; gap: 8px; color: var(--em-text2); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .15em; }
html[data-skin="ember"] .status-tile span::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--em-text3); }
html[data-skin="ember"] .status-tile strong { font-size: 32px; font-weight: 300; line-height: 1; letter-spacing: -.01em; }
html[data-skin="ember"] .status-tile small { color: var(--em-text3); font-size: 13px; font-weight: 300; line-height: 1.4; }

/* entry cards: bordered cards, content at the bottom */
html[data-skin="ember"] .case-list-heading { margin-top: 96px; }
html[data-skin="ember"] .case-list-heading h2 { font-size: clamp(32px, 2.95vw, 42px); font-weight: 400; letter-spacing: -.02em; }
html[data-skin="ember"] .entry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
html[data-skin="ember"] .entry-card { min-height: 230px; align-content: space-between; gap: 14px; padding: 22px 24px 24px; border: 1px solid var(--em-hair); border-radius: 8px; background: transparent; color: var(--em-text); transition: border-color .3s var(--em-ease), background-color .3s var(--em-ease); }
html[data-skin="ember"] .entry-card:hover { border-color: var(--em-light-20); background: rgba(243,241,236,.02); transform: none; }
html[data-skin="ember"] .entry-card strong { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
html[data-skin="ember"] .entry-card span:last-child { color: var(--em-text2); font-size: 14px; font-weight: 300; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* principles: mono chips with square marks */
html[data-skin="ember"] .principles-strip { gap: 12px 28px; margin-top: 56px; padding: 22px 0 0; border-top: 1px solid var(--em-hair); color: var(--em-text2); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="ember"] .principles-strip span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 9px 2px 0; background: var(--em-brand); vertical-align: middle; }
html[data-skin="ember"] .principles-strip a { color: var(--em-text); font-weight: 400; transition: color .24s var(--em-ease); }
html[data-skin="ember"] .principles-strip a:hover { color: var(--em-brand); }

/* ---- cards, panels, stats, lists ---- */
html[data-skin="ember"] .panel { padding: 26px 28px; border: 0; border-radius: 12px; background: var(--em-c900); }
html[data-skin="ember"] .panel-heading { margin-bottom: 20px; }
html[data-skin="ember"] .panel-heading h2 { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
html[data-skin="ember"] .panel-heading a { color: var(--em-text2); font-family: var(--em-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; transition: color .24s var(--em-ease); }
html[data-skin="ember"] .panel-heading a:hover { color: var(--em-brand); }
html[data-skin="ember"] .stat-row { gap: 14px; margin: 24px 0 40px; }
html[data-skin="ember"] .stat-card { display: grid; align-content: space-between; gap: 10px; min-height: 176px; padding: 22px 24px; border: 0; border-radius: 12px; background: var(--em-c900); }
html[data-skin="ember"] button.stat-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color .25s var(--em-ease), box-shadow .25s var(--em-ease); }
html[data-skin="ember"] button.stat-card:hover { background: var(--em-c800, var(--em-c900)); }
html[data-skin="ember"] button.stat-card[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--em-brand); }
html[data-skin="ember"] button.stat-card[aria-pressed="true"] .stat-label { color: var(--em-brand); }
html[data-skin="ember"] button.stat-card:focus-visible { outline: 2px solid var(--em-brand); outline-offset: 3px; }
html[data-skin="ember"] .stat-card .stat-label { display: flex; align-items: center; gap: 8px; color: var(--em-text2); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; }
html[data-skin="ember"] .stat-card .stat-label::before { content: ""; width: 5px; height: 5px; background: var(--em-brand); }
html[data-skin="ember"] .stat-card strong { margin-top: 0; font-size: 56px; font-weight: 300; line-height: .85; letter-spacing: -.02em; }
html[data-skin="ember"] .stat-card small { color: var(--em-text3); font-size: 13px; font-weight: 300; }
html[data-skin="ember"] .activity { gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--em-hair); transition: padding .24s var(--em-ease), background-color .24s var(--em-ease); }
html[data-skin="ember"] .activity:hover { padding-inline: 8px; background: var(--em-light-10); }
html[data-skin="ember"] .activity-dot { width: 5px; height: 5px; margin-top: 7px; border-radius: 0; background: var(--em-brand); }
html[data-skin="ember"] .activity h3 { font-size: 15px; font-weight: 400; line-height: 1.3; }
html[data-skin="ember"] .activity p { color: var(--em-text2); font-size: 13px; font-weight: 300; }
html[data-skin="ember"] .activity time { color: var(--em-text3); font-size: 10.5px; letter-spacing: .12em; }
html[data-skin="ember"] .bar-track { height: 3px; border-radius: 0; background: var(--em-hair); }
html[data-skin="ember"] .bar-fill { border-radius: 0; background: var(--em-text); }
html[data-skin="ember"] .domain-bar-head { color: var(--em-text2); font-size: 13px; }

/* library */
html[data-skin="ember"] .library-toolbar { gap: 8px; padding: 10px; border: 1px solid var(--em-hair); border-radius: 12px; background: var(--em-c900); }
html[data-skin="ember"] .result-count { color: var(--em-text3); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="ember"] .issue-grid { gap: 14px; }
/* 카드는 누를 수 있다. article 이라 기본 커서가 글자 선택이어서 누를 수 있는 줄 몰랐다는 말을 들었다. */
html[data-skin="ember"] .issue-card { position: relative; min-height: 260px; padding: 22px 24px 20px; border: 1px solid var(--em-hair); border-radius: 8px; background: transparent; cursor: pointer; overflow: hidden; isolation: isolate; transition: border-color .3s var(--em-ease), background-color .3s var(--em-ease); }
/* 빛의 모양은 WSTiger 카드와 같다 — 아래에서 올라오는 큰 빛 하나와 오른쪽 위의 작은 빛 하나.
   평소에도 .2 로 깔려 있다가 호버에 1 로 밝아지며 1.1 배로 번진다. 색만 이 사이트의 주황이다.
   테두리는 건드리지 않는다. 한 장만 주황 테두리가 켜지면 목록이 거기서 끊겨 읽힌다. */
html[data-skin="ember"] .issue-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; transform: scale(1); pointer-events: none;
  transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
  background: radial-gradient(110% 85% at 50% 115%, rgba(255,77,0,.50) 0%, transparent 62%), radial-gradient(55% 45% at 88% 8%, rgba(227,161,59,.20) 0%, transparent 70%); }
html[data-skin="ember"] .issue-card:is(:hover, :focus-visible)::before { opacity: 1; transform: scale(1.1); }
html[data-skin="ember"] .issue-card:hover { border-color: var(--em-light-20); background: transparent; box-shadow: none; transform: none; }
html[data-skin="ember"] .issue-card:focus-visible { outline: 2px solid var(--em-brand); outline-offset: 2px; }
html[data-skin="ember"] .issue-card .card-id { color: var(--em-text3); font-size: 10.5px; letter-spacing: .15em; }
html[data-skin="ember"] .issue-card h3 { margin: 26px 0 12px; font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
html[data-skin="ember"] .issue-card p { color: var(--em-text2); font-size: 14px; font-weight: 300; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="ember"] .issue-card .card-date { color: var(--em-text3); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="ember"] .save-toggle { color: var(--em-text2); }
html[data-skin="ember"] .save-toggle.saved { color: var(--em-brand); }

/* ledger and other row lists */
html[data-skin="ember"] :is(.ledger-row, .record-row, .object-row, .changelog-row) { border-color: var(--em-hair); transition: padding .24s var(--em-ease), background-color .24s var(--em-ease); }
html[data-skin="ember"] :is(.ledger-row, .record-row, .object-row):hover { background: var(--em-light-10); }
html[data-skin="ember"] .ledger-id { color: var(--em-text3); font-size: 10.5px; letter-spacing: .15em; }

/* ---- the decision map: dotted plane, corner ticks, mono readouts ---- */
html[data-skin="ember"] .map-shell { border: 1px solid var(--em-hair); border-radius: 12px; background: var(--em-c900); box-shadow: none; }
html[data-skin="ember"] .map-toolbar { height: auto; min-height: 56px; padding: 9px 12px 9px 20px; row-gap: 6px; color: var(--em-text2); border-bottom: 1px solid var(--em-hair); }
html[data-skin="ember"] .map-toolbar strong { display: inline-flex; align-items: center; gap: 8px; color: var(--em-text); font-family: var(--em-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; }
html[data-skin="ember"] .map-toolbar strong::before { content: ""; width: 5px; height: 5px; background: var(--em-brand); }
html[data-skin="ember"] .map-toolbar .map-status { color: var(--em-text3); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="ember"] .map-toolbar output { min-width: 44px; color: var(--em-text2); font-family: var(--em-mono); font-size: 11px; text-align: center; }
html[data-skin="ember"] .map-button { height: 30px; padding: 0 11px; border: 1px solid var(--em-ui); border-radius: 6px; background: transparent; color: var(--em-text); font-size: 12px; transition: background-color .24s var(--em-ease), border-color .24s var(--em-ease), color .24s var(--em-ease); }
html[data-skin="ember"] .map-button:hover { background: var(--em-light-10); border-color: var(--em-ui); color: var(--em-text); }
html[data-skin="ember"] .map-button.active { background: var(--em-text); border-color: var(--em-text); color: var(--em-bg); }
html[data-skin="ember"] .map-explorer { padding: 14px 20px; color: var(--em-text2); border-bottom: 1px solid var(--em-hair); }
html[data-skin="ember"] .map-explorer label { font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="ember"] .map-explorer :is(input, select) { height: 36px; text-transform: none; letter-spacing: 0; font-family: var(--em-sans); font-size: 13px; }
html[data-skin="ember"] .map-area { background: radial-gradient(ellipse 60% 55% at 46% 52%, rgba(255,77,0,.07), transparent 70%), var(--em-bg); }
html[data-skin="ember"] .map-area::before { opacity: 1; background-image: radial-gradient(circle, rgba(243,241,236,.2) .8px, transparent 1.2px); background-size: 22px 22px; background-position: 11px 11px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 85%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 85%); }
html[data-skin="ember"] .map-area::after { content: ""; position: absolute; inset: 14px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--em-ui), var(--em-ui)) left top / 16px 1px no-repeat, linear-gradient(var(--em-ui), var(--em-ui)) left top / 1px 16px no-repeat,
    linear-gradient(var(--em-ui), var(--em-ui)) right top / 16px 1px no-repeat, linear-gradient(var(--em-ui), var(--em-ui)) right top / 1px 16px no-repeat,
    linear-gradient(var(--em-ui), var(--em-ui)) left bottom / 16px 1px no-repeat, linear-gradient(var(--em-ui), var(--em-ui)) left bottom / 1px 16px no-repeat,
    linear-gradient(var(--em-ui), var(--em-ui)) right bottom / 16px 1px no-repeat, linear-gradient(var(--em-ui), var(--em-ui)) right bottom / 1px 16px no-repeat; }
html[data-skin="ember"] .map-renderer-status { left: 28px; top: 26px; color: var(--em-text2); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; }
html[data-skin="ember"] .map-label { font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .07em; color: var(--em-text2); text-shadow: 0 1px 8px rgba(0,0,0,.92); }
html[data-skin="ember"] .map-label.near { color: var(--em-text); font-weight: 400; }
html[data-skin="ember"] .map-preview { padding: 24px 24px 20px; border: 1px solid var(--em-hair); border-radius: 10px; background: var(--em-veil-95); color: var(--em-text); box-shadow: none; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
html[data-skin="ember"] .map-preview h3 { margin: 15px 0 10px; font-size: 20.5px; font-weight: 400; line-height: 1.25; letter-spacing: 0; }
html[data-skin="ember"] .map-preview p { color: var(--em-text2); font-size: 14.5px; font-weight: 300; line-height: 1.55; }
html[data-skin="ember"] .map-preview .preview-footer { margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--em-hair); color: var(--em-text3); font-family: var(--em-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
html[data-skin="ember"] .map-preview .preview-footer strong { color: var(--em-text); font-weight: 400; }
/* 미리보기 카드는 호버로 읽는 자리다. 질문·선택지·입력 상태를 한 화면에서 읽으려면 글자와 폭이 같이 커야 한다. */
html[data-skin="ember"] .map-preview .eyebrow { font-size: 11.5px; letter-spacing: .12em; }
html[data-skin="ember"] .map-preview .preview-lede { font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="ember"] .map-preview .preview-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--em-hair); }
html[data-skin="ember"] .map-preview .preview-block h4 { margin: 0 0 7px; color: var(--em-text3); font-family: var(--em-mono); font-size: 11.5px; font-weight: 400; letter-spacing: .1em; }
html[data-skin="ember"] .map-preview .preview-options { padding-left: 19px; gap: 5px; font-size: 14.5px; line-height: 1.55; }
html[data-skin="ember"] .map-preview .button { margin-top: 18px; height: 40px; font-size: 14px; }
/* 좁은 화면에서는 275px 한 칸으로 돌아가야 하므로 넓은 화면에서만 칸을 키운다. */
@media (min-width: 1101px) { html[data-skin="ember"] .map-area { grid-template-columns: minmax(0, 1fr) minmax(384px, 464px); height: 660px; } }
html[data-skin="ember"] .map-legend { left: 28px; bottom: 26px; gap: 18px; color: var(--em-text2); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="ember"] .legend-dot { width: 6px; height: 6px; border-radius: 0; background: var(--em-text); }
html[data-skin="ember"] .legend-dot.synthetic { background: var(--em-amber); }
html[data-skin="ember"] .legend-line { width: 18px; height: 0; border-top: 1px dashed var(--em-text2); background: transparent; }
html[data-skin="ember"] .map-side-action { right: 28px; bottom: 22px; }
html[data-skin="ember"] .map-shell:fullscreen, html[data-skin="ember"] .map-shell.expanded-map { background: var(--em-bg); border-radius: 0; }

/* ---- detail drawer, overlays, toasts ---- */
html[data-skin="ember"] .overlay { background: rgba(11,12,13,.22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-skin="ember"] .detail-drawer { padding: 30px 32px 48px; background: var(--em-c900); border-left: 1px solid var(--em-hair); box-shadow: none; animation: em-slide .7s var(--em-ease-out) both; }
html[data-skin="ember"] .detail-drawer h2 { margin: 18px 0 16px; font-size: clamp(28px, 2.6vw, 38px); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
html[data-skin="ember"] .detail-lede { color: var(--em-text2); font-size: 15px; font-weight: 300; line-height: 1.55; }
html[data-skin="ember"] .detail-lede.lede-aside { border-left-color: var(--em-hair); color: var(--em-text3); font-size: 14px; line-height: 1.6; }
html[data-skin="ember"] .detail-lede .lede-label { color: var(--em-text3); font-size: 11px; letter-spacing: .1em; }
html[data-skin="ember"] .detail-field { padding: 14px 16px; border: 1px solid var(--em-hair); border-radius: 6px; background: transparent; }
html[data-skin="ember"] .detail-field dt { color: var(--em-text3); font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .15em; }
html[data-skin="ember"] .detail-field dd { font-size: 13px; line-height: 1.5; }
html[data-skin="ember"] .detail-section { border-top: 1px solid var(--em-hair); }
html[data-skin="ember"] .detail-section h3 { font-size: 17.5px; font-weight: 400; }
html[data-skin="ember"] .detail-section :is(p, li) { color: var(--em-text2); font-size: 13.5px; font-weight: 300; line-height: 1.6; }
html[data-skin="ember"] .close-button { border: 1px solid var(--em-hair); border-radius: 6px; background: transparent; color: var(--em-text); }
html[data-skin="ember"] .toast { padding: 12px 16px 12px 14px; border: 1px solid var(--em-hair); border-left: 3px solid var(--em-brand); border-radius: 6px; background: var(--em-c800); color: var(--em-text); font-size: 13px; box-shadow: none; }
html[data-skin="ember"] .case-sort-popover { background: var(--em-veil-95); border: 1px solid var(--em-hair); border-radius: 8px; box-shadow: none; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
html[data-skin="ember"] .case-sort-trigger { border-color: var(--em-ui); border-radius: 6px; background: transparent; color: var(--em-text); }
html[data-skin="ember"] .case-sort-shuffle { border-color: var(--em-ui); border-radius: 6px; background: transparent; color: var(--em-text); }
html[data-skin="ember"] .case-sort-shuffle[aria-pressed="true"] { border-color: var(--em-brand); color: var(--em-brand); }

/* skin switcher on Ember */
html[data-skin="ember"] .skin-menu { background: var(--em-veil-95); border: 1px solid var(--em-hair); border-radius: 8px; box-shadow: none; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); animation: em-drop .4s var(--em-ease-out) both; }
html[data-skin="ember"] .skin-menu button { border-radius: 4px; color: var(--em-text); }
html[data-skin="ember"] .skin-menu button:hover, html[data-skin="ember"] .skin-menu button:focus-visible { background: var(--em-light-10); }
html[data-skin="ember"] .skin-menu button[aria-checked="true"] { background: rgba(255,77,0,.12); }
html[data-skin="ember"] .skin-menu small { color: var(--em-text2); font-family: var(--em-mono); font-size: 10px; letter-spacing: .06em; }

/* ---- the footer: orange plane, facts, sections, the name set large ---- */
html[data-skin="ember"] .em-footer { padding: 96px 12px 12px; }
html[data-skin="ember"] .em-footer-inner { position: relative; overflow: hidden; padding: 56px 32px 0; border-radius: 12px; background: var(--em-brand); color: var(--em-bg); }
html[data-skin="ember"] .em-footer-top { display: flex; justify-content: space-between; align-items: stretch; gap: 56px; }
html[data-skin="ember"] .em-footer-lead h2 { margin: 0; font-size: clamp(32px, 3.4vw, 48px); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
html[data-skin="ember"] .em-footer-lead h2 span { color: var(--em-on-brand-2); }
html[data-skin="ember"] .em-footer-lead p { max-width: 360px; margin: 22px 0 0; font-size: 14px; line-height: 1.5; }
html[data-skin="ember"] .em-footer-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 32px; }
html[data-skin="ember"] .em-footer-stats { display: grid; gap: 10px; min-width: 280px; margin: 0; }
html[data-skin="ember"] .em-footer-stats div { display: flex; justify-content: space-between; gap: 32px; }
html[data-skin="ember"] .em-footer-stats dt { font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; }
html[data-skin="ember"] .em-footer-stats dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
html[data-skin="ember"] .em-footer-divider { height: 1px; margin: 56px 0 32px; background: rgba(11,12,13,.22); }
html[data-skin="ember"] .em-footer-body { display: grid; grid-template-columns: 1.75fr 1fr 1fr; gap: 32px; }
html[data-skin="ember"] .em-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
html[data-skin="ember"] .em-footer-label { margin-bottom: 8px; font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--em-on-brand-2); }
html[data-skin="ember"] .em-footer-col a { position: relative; color: var(--em-bg); font-size: 15.4px; line-height: 1.3; }
html[data-skin="ember"] .em-footer-col a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--em-ease); }
html[data-skin="ember"] .em-footer-col a:hover::after { transform: scaleX(1); }
html[data-skin="ember"] .em-footer-signature { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; font-family: var(--em-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; }
html[data-skin="ember"] .em-footer-name { height: .7em; margin: 28px -.03em 0; overflow: hidden; font-size: clamp(120px, 29vw, 520px); font-weight: 600; line-height: .78; letter-spacing: -.04em; text-align: center; color: var(--em-bg); }

/* ---- reveal ---- */
html[data-skin="ember"] .em-reveal { opacity: 0; transform: translate3d(0, 24px, 0); }
html[data-skin="ember"] .em-reveal.em-in { opacity: 1; transform: none; transition: opacity .9s var(--em-ease-out) var(--em-delay, 0ms), transform 1.1s var(--em-ease-out) var(--em-delay, 0ms); }

@keyframes em-rise { to { transform: none; } }
@keyframes em-fade { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes em-drop { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes em-slide { from { transform: translate3d(40px, 0, 0); opacity: 0; } }
@keyframes em-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.5%, 1%, 0); } }

@media (max-width: 1100px) {
  html[data-skin="ember"] .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin="ember"] .branch-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin="ember"] .branch-card { border-bottom: 1px solid var(--em-hair); }
  html[data-skin="ember"] .hero-panel { grid-template-columns: 1fr; }
  html[data-skin="ember"] .em-footer-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  html[data-skin="ember"] .topbar { top: 8px; margin: 8px 8px 0; height: auto; min-height: 53px; }
  html[data-skin="ember"] .brand strong { font-size: 23px; }
  html[data-skin="ember"] .brand-mark { width: auto; height: 16px; gap: 2px; }
  html[data-skin="ember"] .brand-mark span { width: 5px; }
  html[data-skin="ember"] .brand-mark span:nth-child(1) { height: 9.5px; }
  html[data-skin="ember"] .brand-mark span:nth-child(2) { height: 16px; }
  html[data-skin="ember"] .brand-mark span:nth-child(3) { height: 5.5px; }
  html[data-skin="ember"] .page { padding: 40px 16px 72px; }
  html[data-skin="ember"] .hero-panel { margin: -61px -16px 0; padding: 140px 16px 24px; min-height: 92vh; }
  html[data-skin="ember"] .em-statement { margin: 0 -16px; }
  html[data-skin="ember"] .em-statement-inner { min-height: 72vh; padding: 88px 16px; }
  html[data-skin="ember"] :is(.attention-grid, .entry-grid, .branch-cards, .status-strip) { grid-template-columns: 1fr; }
  html[data-skin="ember"] .status-tile, html[data-skin="ember"] .status-tile + .status-tile { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--em-hair); }
  html[data-skin="ember"] .branch-card { border-right: 0; }
  html[data-skin="ember"] .em-footer { padding: 72px 8px 8px; }
  html[data-skin="ember"] .em-footer-inner { padding: 40px 18px 0; }
  html[data-skin="ember"] .em-footer-top { flex-direction: column; }
  html[data-skin="ember"] .em-footer-side { align-items: stretch; }
  html[data-skin="ember"] .em-footer-body { grid-template-columns: 1fr; }
  html[data-skin="ember"] .em-footer-signature { flex-direction: column; }
  html[data-skin="ember"] .section-title { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="ember"] *, html[data-skin="ember"] *::before, html[data-skin="ember"] *::after { animation: none !important; transition: none !important; }
  html[data-skin="ember"] .em-char { transform: none; }
  html[data-skin="ember"] .em-sw { opacity: 1 !important; }
}
html[data-skin="ember"] .lang-button { font-family: var(--em-mono); letter-spacing: .1em; }

/* The hero's light lines, inlined so each one can answer the pointer. The background image stands in until they are. */
html[data-skin="ember"] .hero-panel.em-rays-live::before { display: none; }
/* The rays bleed the whole width of the window, and 100vw counts a scrollbar the page's own width leaves out — on a
   machine showing classic scrollbars that is 15px of horizontal overflow and a scrollbar along the bottom. Clip the
   page rather than narrow the bleed; `clip`, not `hidden`, so the top bar stays sticky. */
html[data-skin="ember"] { overflow-x: clip; }
html[data-skin="ember"] .hero-panel.em-rays-live { overflow: visible; clip-path: inset(0 -100vw); }
html[data-skin="ember"] .em-hero-rays { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -2; overflow: hidden; pointer-events: none; animation: em-drift 26s ease-in-out infinite alternate; }
html[data-skin="ember"] .em-hero-rays svg { display: block; width: 100%; height: 100%; }
html[data-skin="ember"] .em-hero-rays path[stroke^="url("] { transition: none; }

html[data-skin="ember"] .issue-more span { color: var(--em-text2); font-family: var(--em-mono); font-size: 11px; letter-spacing: .06em; }

/* The board's in-map control sits on the map itself: it takes the skin's dark panel, or its text would be the same
   near-white as the panel under it and disappear. */
html[data-skin="ember"] .cop-map-control { background: var(--em-veil-95); border: 1px solid var(--em-hair); box-shadow: none; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-skin="ember"] :is(.cop-map-control, .cop-map-control-head strong, .cop-map-control label em) { color: var(--em-text); }
html[data-skin="ember"] :is(.cop-map-control-head span, .cop-map-control span) { color: var(--em-text2); }

/* Google draws the map-type and fullscreen buttons itself, in white. On the skin's dark map they were the brightest
   thing on screen, so they take the same panel as the layer control. The attribution and the logo are left alone. */
html[data-skin="ember"] .gm-style :is(.gm-style-mtc > button, button.gm-control-active) { background: var(--em-veil-95); color: var(--em-text); border: 1px solid var(--em-hair); box-shadow: none; }
html[data-skin="ember"] .gm-style .gm-style-mtc > button[aria-checked="true"] { background: var(--em-c700); }
html[data-skin="ember"] .gm-style button.gm-control-active > img { filter: invert(1) brightness(1.4); }