@import url('/brand.css');
@font-face {
  font-family:'Source Han';
  src:url('/assets/SourceHanSansSC-Regular-latin.woff') format('woff');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:'Source Han';
  src:url('/assets/SourceHanSansSC-Medium-latin.woff') format('woff');
  font-weight:500 800;
  font-display:swap
}
@font-face {
  font-family:Fraunces;
  src:url('/assets/Fraunces.ttf') format('truetype');
  font-weight:100 900;
  font-display:swap
}
:root {
  --paper:var(--awf-paper);
  --white:var(--awf-white);
  --ink:var(--awf-ink);
  --muted:var(--awf-ink);
  --ground:var(--awf-blue-surface);
  --accent:var(--awf-ink);
  --accent-ink:var(--awf-white);
  --focus:var(--awf-ink);
  --purple:var(--awf-purple-base);
  --green:var(--awf-green-base);
  --blue:var(--awf-blue-base);
  --yellow:var(--awf-yellow-base);
  --analysts:var(--awf-purple-surface);
  --diplomats:var(--awf-green-surface);
  --sentinels:var(--awf-blue-surface);
  --explorers:var(--awf-yellow-surface);
  --group-base:var(--awf-ink);
  --group-deep:var(--awf-ink);
  --group-surface:var(--awf-blue-surface);
  --group-ink:var(--awf-ink);
  --body:17px;
  --small:14px;
  --display:clamp(56px,6.1vw,88px);
  --heading:clamp(36px,3.4vw,48px);
  --subhead:28px;
  --serif:Fraunces,Georgia,serif;
  --sans:'Source Han',Arial,sans-serif;
  --pad:clamp(20px,3.3vw,48px);
  --space:112px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
.analysts {
  --group-base:var(--purple);
  --group-deep:var(--awf-purple-deep);
  --group-surface:var(--analysts);
  --group-ink:var(--awf-purple-deep)
}
.diplomats {
  --group-base:var(--green);
  --group-deep:var(--awf-green-deep);
  --group-surface:var(--diplomats);
  --group-ink:var(--awf-green-deep)
}
.sentinels {
  --group-base:var(--blue);
  --group-deep:var(--awf-blue-deep);
  --group-surface:var(--sentinels);
  --group-ink:var(--awf-blue-deep)
}
.explorers {
  --group-base:var(--yellow);
  --group-deep:var(--ink);
  --group-surface:var(--explorers);
  --group-ink:var(--ink)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--body)/1.6 var(--sans)
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.035em;
  text-wrap:balance
}
h1 {
  font-size:var(--display)
}
h2 {
  font-size:var(--heading)
}
h3 {
  font-size:var(--subhead)
}
p {
  max-width:68ch;
  text-wrap:pretty
}
p+p {
  margin-top:20px
}
a {
  color:inherit;
  text-decoration-thickness:1.5px;
  text-underline-offset:5px
}
button,input,select {
  font:inherit
}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button,summary {
  cursor:pointer
}
button {
  color:inherit
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
button,a,summary {
  transition:background-color .18s,color .18s,transform .2s var(--ease)
}
button:active,.button:active {
  transform:translateY(2px)
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px
}
::selection {
  background:var(--awf-yellow-light);
  color:var(--ink)
}
[hidden] {
  display:none!important
}
img {
  max-width:100%
}
fieldset {
  border:0;
  margin:0;
  padding:0;
  min-width:0
}
legend {
  padding:0
}
main:focus {
  outline:none
}
.wrap {
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--pad)
}
.skip-link {
  position:absolute;
  width:1px;
  height:1px; /* taste-skill-ignore: visually hidden skip link, revealed on keyboard focus; not a divider. */
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.skip-link:focus {
  left:20px;
  top:15px;
  z-index:30;
  width:auto;
  height:auto;
  padding:15px;
  overflow:visible;
  clip-path:none;
  background:var(--paper)
}
.site-header {
  min-height:96px;
  padding:20px var(--pad);
  display:flex;
  align-items:center;
  gap:36px;
  max-width:1536px;
  margin:auto
}
.wordmark {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font:600 32px/1.2 var(--serif);
  letter-spacing:-1.2px
}
.book-mark {
  flex:none;
  height:auto
}
.desktop-nav {
  display:flex;
  gap:32px;
  margin-left:auto;
  margin-right:16px
}
.desktop-nav a {
  font-size:var(--body);
  text-decoration:none;
  padding-block:10px
}
.desktop-nav a:hover,.desktop-nav a[aria-current] {
  text-decoration:underline
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:52px;
  padding:14px 24px;
  border:0;
  border-radius:0;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:var(--body);
  font-weight:500;
  text-decoration:none;
  line-height:1.4
}
.button:hover {
  background:var(--awf-purple-deep);
  color:var(--white)
}
.header-cta {
  font-size:var(--small);
  min-height:46px;
  padding:12px 20px
}
.secondary {
  background:var(--ground);
  color:var(--ink)
}
.secondary:hover {
  background:var(--awf-blue-light);
  color:var(--ink)
}
.text-link,.quiet-link,.back-link {
  display:inline-block;
  font-size:var(--body)
}
.text-link {
  font-weight:500
}
.text-link:hover,.quiet-link:hover,.back-link:hover {
  color:var(--awf-purple-deep)
}
.back-link {
  font-size:var(--small);
  margin-bottom:30px
}
.small-link {
  margin-left:auto
}
.mobile-nav {
  display:none
}
summary {
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
/* The opening spread: a real questionnaire beside its editorial introduction. */
.hero-ground {
  max-width:1440px;
  margin:auto;
  padding:0 var(--pad)
}
.hero-paper {
  display:grid;
  grid-template-columns:42% 58%;
  background:var(--white)
}
.hero-copy {
  padding:40px 40px 28px 0;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.hero-copy h1 {
  font-size:clamp(56px,5.65vw,82px);
  max-width:10ch;
  line-height:1.02
}
.hero-note {
  font-size:var(--body);
  max-width:38ch;
  margin-top:24px
}
.hero-facts {
  display:flex;
  gap:32px;
  margin:25px 0
}
.hero-facts span {
  font-size:var(--small)
}
.hero-facts strong {
  display:block;
  font:500 var(--subhead)/1.2 var(--serif);
  margin-bottom:4px
}
.hero-copy .quiet-link {
  font-size:var(--small)
}
.hero-photo {
  width:100%;
  height:136px;
  overflow:hidden;
  margin-top:30px
}
.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 38%;
  animation:photo-settle 1.1s var(--ease) both
}
.first-question {
  padding:40px clamp(28px,4vw,58px);
  display:flex;
  flex-direction:column;
  justify-content:center
}
.question-count {
  font-size:var(--small);
  margin-bottom:18px
}
.first-question legend {
  font:500 var(--subhead)/1.25 var(--serif);
  letter-spacing:-.02em;
  margin-bottom:25px;
  max-width:29ch
}
.quick-options,.answer-list {
  display:grid;
  gap:8px
}
.quick-options label,.answer-option {
  display:flex;
  align-items:center;
  gap:16px;
  position:relative;
  background:var(--paper);
  cursor:pointer;
  min-height:48px;
  padding:12px 18px;
  font-size:var(--body)
}
.quick-options input,.answer-option input {
  width:22px;
  height:22px;
  accent-color:var(--ink);
  flex:none;
  margin:0
}
.quick-options label:hover,.answer-option:hover {
  background:var(--sentinels)
}
.quick-options label:has(input:checked),.answer-option:has(input:checked) {
  background:var(--sentinels);
  outline:2px solid var(--awf-blue-deep);
  outline-offset:-2px
}
.first-question .button {
  width:100%;
  margin-top:24px
}
.form-note,.small-note {
  font-size:var(--small);
  margin-top:16px
}
.form-note {
  text-align:center
}
.hero-families {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:8px;
  gap:8px
}
.family-tab {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:24px;
  text-decoration:none;
  --focus:var(--ink)
}
.family-tab>span:first-child {
  font:500 var(--subhead)/1.15 var(--serif);
  letter-spacing:-.02em
}
.family-tab.analysts {
  background:var(--purple);
  color:var(--white);
  --focus:var(--ink)
}
.family-tab.diplomats {
  background:var(--awf-green-light)
}
.family-tab.sentinels {
  background:var(--awf-blue-light)
}
.family-tab.explorers {
  background:var(--yellow)
}
.family-codes {
  font-size:var(--small);
  white-space:nowrap
}
.family-arrow {
  position:absolute;
  top:22px;
  right:18px;
  transition:transform .2s
}
.family-tab:hover .family-arrow {
  transform:translate(3px,-3px)
}
.hero-footnote {
  font-size:var(--small);
  margin:20px 0 0;
  max-width:none
}
.intro-section {
  display:grid;
  grid-template-columns:42% 58%;
  padding-block:var(--space)
}
.intro-section>div:first-child {
  padding-right:38px
}
.intro-text {
  max-width:54ch;
  padding-left:40px
}
.section-note {
  margin-top:24px;
  font-size:var(--small);
  max-width:31ch
}
.section-top {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:24px
}
.section-top p {
  max-width:30ch
}
.section-intro {
  margin-bottom:38px;
  max-width:55ch
}
.type-library {
  padding-bottom:var(--space)
}
.group-shelves {
  display:grid;
  gap:8px
}
.group-shelf {
  background:var(--group-surface)
}
.group-shelf summary {
  display:flex;
  align-items:center;
  gap:30px;
  padding:26px 32px;
  font:500 var(--subhead)/1.2 var(--serif)
}
.group-shelf summary:hover {
  background:var(--group-deep);
  color:var(--white)
}
.group-shelf.explorers summary:hover {
  background:var(--yellow);
  color:var(--ink)
}
.shelf-codes {
  font:400 var(--small)/1.5 var(--sans);
  margin-left:auto
}
.disclosure {
  font:400 var(--subhead)/1 var(--sans);
  margin-left:auto;
  transition:transform .2s
}
.group-shelf[open] .disclosure {
  transform:rotate(45deg)
}
.group-shelf[open] .shelf-codes {
  display:none
}
.group-shelf:not([open])>.shelf-inner {
  display:none
}
.shelf-inner {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:4px 24px 24px
}
.type-entry {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:12px;
  text-decoration:none;
  background:var(--group-surface);
  padding:28px;
  --focus:var(--group-deep)
}
.type-code {
  font:500 var(--heading)/1.05 var(--serif);
  letter-spacing:-.03em;
  color:var(--group-ink)
}
.type-name {
  font-size:var(--body);
  font-weight:500;
  line-height:1.4
}
.type-description {
  font-size:var(--small);
  line-height:1.6;
  max-width:27ch
}
.type-entry:hover {
  background:var(--white);
  transform:translateY(-3px)
}
.type-entry:hover .entry-mark {
  transform:translate(3px,-3px)
}
.entry-mark {
  position:absolute;
  top:28px;
  right:22px;
  transition:transform .2s
}
.shelf-inner .type-entry {
  padding:24px 16px
}
.shelf-inner .entry-mark {
  display:none
}
.functions-feature {
  background:var(--awf-blue-deep);
  color:var(--white);
  padding-block:76px;
  --focus:var(--white)
}
.functions-inner {
  display:grid;
  grid-template-columns:42% 58%;
  align-items:center
}
.functions-inner>div:last-child {
  padding-left:56px
}
.functions-inner h2 {
  max-width:13ch
}
.functions-inner p {
  margin:24px 0;
  max-width:43ch
}
.functions-feature .button {
  background:var(--white);
  color:var(--ink)
}
.functions-feature .button:hover {
  background:var(--awf-blue-light)
}
.functions-feature .small-note {
  font-size:var(--small);
  margin-bottom:0
}
.function-print {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px
}
.function-print a {
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1;
  text-decoration:none;
  background:var(--paper);
  color:var(--ink);
  font:500 var(--heading)/1 var(--serif)
}
.function-print a:nth-child(even) {
  background:var(--awf-blue-light)
}
.function-print a:hover {
  transform:translateY(-5px);
  background:var(--white)
}
.reading-section {
  padding-block:var(--space)
}
.reading-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:48px 28px;
  margin-top:40px
}
.reading-link {
  grid-column:span 4;
  min-width:0
}
.reading-link:first-child {
  grid-column:span 8;
  grid-row:span 2
}
.reading-link:nth-child(4) {
  grid-column:span 12;
  display:grid;
  grid-template-columns:42% 58%;
  align-items:center;
  margin-top:8px
}
.reading-link a {
  text-decoration:none
}
.reading-link h3 {
  font-size:var(--subhead);
  max-width:24ch
}
.reading-link p {
  margin-top:16px;
  font-size:var(--body);
  max-width:48ch
}
.image-frame {
  overflow:hidden;
  margin-bottom:22px;
  aspect-ratio:1.5;
  background:var(--sentinels)
}
.image-frame img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease)
}
.reading-link:first-child .image-frame {
  aspect-ratio:.95
}
.reading-link:first-child img {
  animation:reading-drift 25s ease-in-out infinite alternate
}
.reading-link:hover img {
  transform:scale(1.035)
}
.reading-link:first-child h3 {
  font-size:var(--heading)
}
.reading-link:nth-child(4)>a {
  display:grid;
  grid-template-columns:1fr
}
.reading-link:nth-child(4)>p {
  padding-left:56px;
  margin:0
}
.reading-link:nth-child(4) .image-frame {
  aspect-ratio:1.5
}
.faq-section>h2 {
  max-width:1440px;
  margin:auto;
  padding:0 var(--pad) 42px
}
.faq-row {
  display:grid;
  grid-template-columns:42% 58%;
  padding:40px max(var(--pad),calc((100vw - 1344px)/2));
  background:var(--white)
}
.faq-row:nth-child(even) {
  background:var(--sentinels)
}
.faq-row h3 {
  padding-right:48px;
  font-size:var(--subhead)
}
.faq-row p {
  max-width:59ch;
  padding-left:40px;
  font-size:var(--body)
}
.last-invitation {
  margin-top:var(--space);
  padding-block:60px;
  display:flex;
  justify-content:space-between;
  gap:36px;
  align-items:center;
  background:var(--awf-yellow-light)
}
.last-invitation h2 {
  max-width:16ch
}
.site-footer {
  background:var(--ink);
  color:var(--paper);
  padding:70px var(--pad) 28px;
  margin-top:8px;
  --focus:var(--paper)
}
.footer-top,.footer-base {
  max-width:1344px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:60px
}
.footer-heading {
  font:500 var(--heading)/1.1 var(--serif);
  letter-spacing:-.035em
}
.footer-top p+p {
  font-size:var(--small);
  margin-top:28px
}
.aswefeel-name {
  font-family:var(--sans);
  font-weight:500
}
.footer-top nav {
  display:grid;
  gap:12px;
  align-content:start;
  font-size:var(--body);
  min-width:250px
}
.footer-top nav a {
  padding:3px 0
}
.footer-wordmark {
  display:block;
  max-width:1344px;
  margin:60px auto 30px;
  font:500 clamp(70px,15vw,216px)/1 var(--serif);
  letter-spacing:-.06em;
  text-decoration:none
}
.footer-base p {
  font-size:var(--small);
  margin:0
}
.footer-base p:last-child {
  text-align:right
}
/* Encyclopaedia indexes and reading pages. */
.usage-note {
  margin-block:32px;
  color:var(--muted);
  font-size:var(--small);
  line-height:1.6
}
.page-intro {
  padding-block:54px 60px
}
.page-intro h1 {
  max-width:17ch
}
.lead {
  font-size:21px;
  line-height:1.55;
  max-width:60ch;
  margin-top:25px
}
.index-content {
  padding-bottom:var(--space)
}
.library-controls {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:24px;
  padding:28px;
  background:var(--white)
}
.library-controls label {
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:var(--small)
}
.library-controls input,.library-controls select {
  width:100%;
  min-height:52px;
  border:0;
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  padding:12px 16px;
  font-size:var(--body)
}
#type-count {
  margin:24px 0
}
.all-types {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}
.all-types .type-entry {
  min-height:255px;
  border-top:6px solid var(--group-base)
}
.reading-note {
  background:var(--sentinels);
  padding:44px;
  margin:60px auto 0
}
.reading-note h2 {
  margin-bottom:25px
}
.reading-note p {
  max-width:75ch
}
.reading-note .text-link {
  margin-top:24px;
  margin-right:25px
}
.empty-search {
  padding:64px 24px;
  text-align:center;
  background:var(--white)
}
.empty-search p {
  margin:18px auto 26px
}
.function-index {
  display:grid;
  grid-template-columns:34% 1fr;
  gap:8%;
  padding-bottom:60px
}
.function-explainer {
  align-self:start;
  position:sticky;
  top:32px
}
.function-explainer h2 {
  margin-bottom:26px
}
.function-explainer p {
  margin-bottom:24px
}
.function-explainer .button {
  margin-top:8px
}
.function-list {
  display:grid;
  gap:8px
}
.function-list>a {
  display:grid;
  grid-template-columns:68px minmax(0,1fr) 24px;
  align-items:start;
  gap:24px;
  background:var(--white);
  padding:28px;
  text-decoration:none
}
.function-list>a:nth-child(even) {
  background:var(--sentinels)
}
.function-list>a:hover {
  background:var(--awf-blue-light)
}
.function-list strong {
  font:500 var(--heading)/1 var(--serif)
}
.function-list h2 {
  font-size:var(--subhead)
}
.function-list p {
  font-size:var(--body);
  margin:14px 0
}
.function-list .small-note {
  display:block;
  margin:0
}
.function-index-page .reading-note {
  margin-bottom:70px
}
.article-heading {
  padding-block:30px 60px;
  background:var(--group-surface)
}
.article-heading h1 {
  max-width:20ch;
  line-height:1.07;
  font-size:clamp(44px,5.4vw,76px);
  color:var(--group-ink)
}
.type-subtitle {
  font:500 var(--subhead)/1.2 var(--serif);
  margin-top:20px
}
.article-heading .lead {
  max-width:70ch;
  font-size:21px
}
.article-byline {
  font-size:var(--small);
  margin-top:28px
}
.article-layout {
  display:grid;
  grid-template-columns:minmax(200px,28%) minmax(0,1fr);
  gap:9%;
  padding-block:60px var(--space)
}
.article-index {
  position:sticky;
  top:30px;
  align-self:start;
  max-height:calc(100vh - 60px);
  overflow:auto;
  padding-right:8px
}
.article-index>p {
  font-size:var(--small);
  margin-bottom:16px
}
.article-index nav {
  display:grid;
  gap:3px
}
.article-index nav a {
  font-size:var(--small);
  padding:9px 12px;
  text-decoration:none
}
.article-index nav a:hover {
  background:var(--group-surface)
}
.article-index nav a[aria-current] {
  background:var(--group-deep);
  color:var(--white);
  font-weight:500
}
.article-index>.text-link {
  margin-top:28px;
  font-size:var(--small)
}
.article-toc {
  display:none
}
.article-body {
  min-width:0;
  max-width:780px
}
.article-body section {
  scroll-margin-top:30px;
  margin-bottom:56px
}
.article-body h2 {
  font-size:36px;
  margin-bottom:24px;
  max-width:28ch
}
.article-body h3 {
  font-size:var(--subhead);
  margin:28px 0 16px
}
.article-body p,.article-body li {
  font-size:18px;
  line-height:1.75
}
.article-body li+li {
  margin-top:12px
}
.article-body ul,.article-body ol {
  padding-left:24px
}
.article-body a {
  color:var(--group-ink)
}
.article-body a:hover {
  text-decoration-thickness:3px
}
.article-body blockquote {
  margin:28px 0;
  background:var(--group-surface);
  padding:28px;
  font-size:21px
}
.article-body table {
  border-collapse:collapse;
  width:100%;
  margin:30px 0;
  font-size:var(--body)
}
.article-body th,.article-body td {
  padding:18px;
  text-align:left;
  vertical-align:top;
  border:1px solid var(--ink)
}
.article-body th {
  background:var(--group-surface);
  font-weight:500
}
.sources {
  background:var(--white);
  padding:32px
}
.sources p,.sources li {
  font-size:var(--small)
}
.sources a {
  overflow-wrap:anywhere
}
.article-next {
  display:grid;
  gap:14px
}
.article-next h2 {
  margin:0 0 6px
}
.privacy-button {
  margin-top:36px
}
#clear-status {
  margin-top:20px
}
.noscript {
  background:var(--awf-yellow-light);
  padding:24px;
  max-width:none
}
.not-found {
  padding:100px var(--pad);
  min-height:65vh
}
.not-found p {
  margin:28px 0
}
/* A quiet, focused questionnaire with clear selection and progression states. */
.quiz-page {
  --ground:var(--sentinels);
  background:var(--sentinels)
}
.function-quiz {
  --ground:var(--analysts);
  background:var(--analysts)
}
.quiz-intro {
  max-width:960px;
  padding-block:24px 32px
}
.quiz-intro h1 {
  font-size:48px
}
.quiz-intro .back-link {
  margin-bottom:20px
}
.quiz-intro p {
  margin-top:20px;
  max-width:64ch
}
.quiz-sheet {
  max-width:864px;
  margin:0 auto 80px;
  padding:36px 44px;
  background:var(--white)
}
.quiz-progress-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:var(--small)
}
.link-button {
  background:none;
  border:0;
  padding:10px 0;
  text-decoration:underline;
  text-underline-offset:5px;
  font-size:var(--small)
}
progress {
  width:100%;
  height:7px;
  appearance:none;
  border:0;
  margin:18px 0 30px;
  background:var(--ground)
}
progress::-webkit-progress-bar {
  background:var(--ground)
}
progress::-webkit-progress-value {
  background:var(--awf-blue-deep)
}
progress::-moz-progress-bar {
  background:var(--awf-blue-deep)
}
.function-quiz progress::-webkit-progress-value {
  background:var(--awf-purple-deep)
}
#quiz-question legend {
  font:500 32px/1.25 var(--serif);
  letter-spacing:-.02em;
  margin-bottom:26px;
  min-height:80px;
  width:100%
}
#quiz-question legend:focus {
  outline:none
}
.answer-option {
  min-height:52px
}
.answer-option:has(input:checked) {
  background:var(--ground)
}
.quiz-navigation {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:28px
}
.quiz-navigation .button {
  min-width:160px
}
.quiz-sheet>.quiet-link {
  display:block;
  text-align:center;
  margin-top:20px;
  font-size:var(--small)
}
.resume-note {
  background:var(--sentinels);
  padding:14px 18px;
  margin-bottom:20px;
  font-size:var(--small)
}
/* Results and their shared image use the same group palette. */
.result-page {
  background:var(--group-surface);
  --accent:var(--group-deep);
  --ground:var(--group-surface)
}
.result-container {
  max-width:1180px;
  padding:0 var(--pad);
  margin:28px auto 80px
}
.result-paper {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  background:var(--white);
  padding:48px
}
.result-paper h1 {
  font-size:36px
}
.result-type {
  font:500 clamp(88px,9vw,128px)/1 var(--serif);
  letter-spacing:-.06em;
  color:var(--group-ink);
  margin:24px 0 18px
}
.result-type-title {
  font:500 var(--subhead)/1.2 var(--serif);
  margin-bottom:20px
}
.result-description {
  font-size:var(--body)
}
.result-eyebrow,.result-intro,.result-nav {
  font-size:var(--small)
}
.result-nav {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px
}
.result-bars {
  display:grid;
  gap:26px;
  align-content:center
}
.axis {
  --axis-color:var(--ink);
  --axis-surface:var(--paper)
}
.axis-ei {
  --axis-color:var(--awf-blue-deep);
  --axis-surface:var(--sentinels)
}
.axis-sn {
  --axis-color:var(--awf-purple-deep);
  --axis-surface:var(--analysts)
}
.axis-tf {
  --axis-color:var(--awf-green-deep);
  --axis-surface:var(--diplomats)
}
.axis-jp {
  --axis-color:var(--awf-yellow-dark);
  --axis-surface:var(--explorers)
}
.axis-heading {
  font-size:var(--small);
  margin-bottom:8px;
  font-weight:500
}
.axis-label {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:var(--small)
}
.axis-endpoint {
  display:flex;
  flex-direction:column;
  gap:4px
}
.axis-endpoint:last-child {
  text-align:right
}
.axis-endpoint.is-leading {
  font-weight:500
}
.axis-track {
  height:12px;
  background:var(--axis-surface);
  margin-top:10px
}
.axis-track>span {
  height:100%;
  display:block;
  background:var(--axis-color)
}
.axis-note {
  font-size:var(--small);
  margin-top:12px;
  line-height:1.55
}
.balanced-notice {
  background:var(--explorers);
  padding:24px;
  margin-top:28px;
  font-size:var(--body)
}
.share-panel {
  display:grid;
  grid-template-columns:1fr 120px;
  gap:32px;
  padding:36px 48px;
  background:var(--group-surface);
  align-items:center
}
.share-panel h2 {
  font-size:32px;
  margin-bottom:20px
}
.share-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.share-actions .button {
  font-size:var(--small);
  min-height:48px;
  padding:12px 18px
}
.share-panel img {
  width:120px;
  height:auto;
  display:block;
  background:var(--white)
}
.share-panel p {
  font-size:var(--small);
  margin-top:18px
}
.result-report {
  padding:48px;
  background:var(--white);
  margin-top:8px
}
.result-report>h2 {
  font-size:var(--heading);
  margin-bottom:32px
}
.report-section {
  margin-top:34px
}
.report-section h3 {
  font-size:var(--subhead);
  margin-bottom:18px
}
.report-section ul {
  padding-left:24px
}
.report-section li+li {
  margin-top:12px
}
.function-result-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 40px;
  margin:32px 0
}
.function-result-list h2 {
  font-size:var(--subhead)
}
.function-result-list .axis-track>span {
  background:var(--awf-blue-deep)
}
.result-links {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:30px
}
.nearby-type {
  display:block;
  background:var(--group-surface);
  padding:22px;
  margin-top:12px;
  text-decoration:none
}
.nearby-type:hover {
  background:var(--paper)
}
.nearby-type strong {
  font-size:var(--subhead);
  font-family:var(--serif)
}
.nearby-type span {
  display:block;
  margin-top:8px
}
.result-summary {
  margin-top:20px
}
.result-group {
  display:inline-block;
  font-size:var(--small);
  margin-top:15px
}
.result-card-note {
  font-size:var(--small)
}
.reveal {
  animation:enter .65s var(--ease) both
}
.hero-copy h1,.hero-note,.hero-facts,.hero-copy .quiet-link,.first-question,.family-tab {
  animation:enter .7s var(--ease) both
}
.hero-note {
  animation-delay:.07s
}
.hero-facts {
  animation-delay:.14s
}
.first-question {
  animation-delay:.12s
}
.family-tab:nth-child(2) {
  animation-delay:.08s
}
.family-tab:nth-child(3) {
  animation-delay:.16s
}
.family-tab:nth-child(4) {
  animation-delay:.24s
}
@keyframes enter {
  from {
    opacity:.25;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes photo-settle {
  from {
    transform:scale(1.1)
  }
  to {
    transform:scale(1)
  }
}
@keyframes reading-drift {
  from {
    transform:scale(1)
  }
  to {
    transform:scale(1.045)
  }
}
@media(max-width:1100px) {
  .desktop-nav {
    gap:18px;
    margin-right:0
  }
  .site-header {
    gap:22px
  }
  .hero-copy {
    padding-right:28px
  }
  .hero-copy h1 {
    font-size:62px
  }
  .hero-facts {
    gap:24px
  }
  .first-question {
    padding:32px
  }
  .family-tab {
    padding:22px 18px
  }
  .family-codes {
    font-size:13px
  }
  .family-arrow {
    display:none
  }
  .shelf-inner {
    grid-template-columns:repeat(2,1fr)
  }
  .reading-link:first-child .image-frame {
    aspect-ratio:.74
  }
  .all-types {
    grid-template-columns:repeat(3,1fr)
  }
  .result-paper {
    gap:36px;
    padding:36px
  }
  .result-container {
    padding:0 24px
  }
  .function-index {
    grid-template-columns:30% 1fr;
    gap:6%
  }
  .function-list>a {
    gap:16px;
    padding:24px
  }
  .function-list h2 {
    font-size:26px
  }
}
@media(max-width:800px) {
  :root {
    --pad:24px;
    --space:80px;
    --display:60px;
    --heading:38px;
    --subhead:26px
  }
  .site-header {
    min-height:84px;
    gap:20px
  }
  .desktop-nav {
    display:none
  }
  .header-cta {
    margin-left:auto
  }
  .mobile-nav {
    display:block;
    position:relative
  }
  .mobile-nav summary {
    min-height:44px;
    display:flex;
    align-items:center;
    font-size:var(--small);
    padding:8px
  }
  .mobile-nav nav {
    position:absolute;
    right:0;
    top:54px;
    background:var(--ink);
    color:var(--white);
    z-index:20;
    min-width:270px;
    padding:20px;
    display:grid;
    --focus:var(--white)
  }
  .mobile-nav:not([open]) nav {
    display:none
  }
  .mobile-nav nav a {
    display:block;
    min-height:48px;
    padding:12px;
    text-decoration:none
  }
  .mobile-nav nav a:hover {
    background:var(--awf-blue-deep)
  }
  .hero-paper {
    grid-template-columns:42% 58%
  }
  .hero-copy {
    padding:24px 24px 24px 0
  }
  .hero-copy h1 {
    font-size:49px
  }
  .hero-facts {
    gap:18px;
    flex-wrap:wrap
  }
  .hero-facts span {
    font-size:13px
  }
  .hero-facts strong {
    font-size:26px
  }
  .hero-photo {
    height:146px;
    margin-top:auto
  }
  .first-question {
    padding:28px
  }
  .first-question legend {
    font-size:26px
  }
  .quick-options label {
    font-size:16px;
    padding:12px
  }
  .hero-families {
    grid-template-columns:repeat(2,1fr)
  }
  .family-tab {
    padding:22px
  }
  .family-arrow {
    display:block
  }
  .family-codes {
    font-size:var(--small)
  }
  .intro-text {
    padding-left:28px
  }
  .functions-inner>div:last-child {
    padding-left:32px
  }
  .function-print {
    grid-template-columns:repeat(2,1fr)
  }
  .function-print a {
    aspect-ratio:1.5
  }
  .reading-grid {
    gap:32px 24px;
    grid-template-columns:1fr 1fr
  }
  .reading-link,.reading-link:first-child {
    grid-column:auto;
    grid-row:auto
  }
  .reading-link:first-child .image-frame,.image-frame {
    aspect-ratio:1.2
  }
  .reading-link:first-child h3 {
    font-size:var(--subhead)
  }
  .reading-link:nth-child(4) {
    grid-column:auto;
    display:block;
    margin-top:0
  }
  .reading-link:nth-child(4)>p {
    padding:0;
    margin-top:16px
  }
  .reading-link:nth-child(4) .image-frame {
    aspect-ratio:1.2
  }
  .faq-row {
    grid-template-columns:40% 60%;
    padding-inline:var(--pad)
  }
  .faq-row p {
    padding-left:20px
  }
  .faq-row h3 {
    padding-right:20px
  }
  .footer-top {
    gap:32px
  }
  .footer-top nav {
    min-width:220px
  }
  .footer-base {
    gap:25px
  }
  .all-types {
    grid-template-columns:repeat(2,1fr)
  }
  .library-controls {
    grid-template-columns:1fr 230px;
    padding:22px
  }
  .function-index {
    grid-template-columns:1fr;
    gap:36px
  }
  .function-explainer {
    position:static;
    max-width:65ch
  }
  .function-explainer p {
    margin-bottom:18px
  }
  .article-heading {
    padding-block:24px 40px
  }
  .article-heading h1 {
    font-size:54px
  }
  .article-layout {
    display:block;
    padding-top:28px
  }
  .article-index {
    display:none
  }
  .article-toc {
    display:block;
    margin-bottom:36px;
    background:var(--white);
    padding:0 24px
  }
  .article-toc summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 0;
    font-weight:500;
    min-height:58px
  }
  .article-toc summary span {
    font-size:26px
  }
  .article-toc[open] summary span {
    transform:rotate(45deg)
  }
  .article-toc nav {
    display:grid;
    gap:4px;
    padding-bottom:20px
  }
  .article-toc:not([open]) nav {
    display:none
  }
  .article-toc nav a {
    padding:10px 12px;
    font-size:var(--small);
    text-decoration:none
  }
  .article-toc nav a[aria-current] {
    background:var(--group-surface);
    font-weight:500
  }
  .article-body {
    max-width:100%
  }
  .article-body h2 {
    font-size:32px
  }
  .quiz-intro {
    max-width:720px
  }
  .quiz-sheet {
    margin:0 24px 60px;
    padding:30px
  }
  .quiz-intro h1 {
    font-size:42px
  }
  .result-paper {
    gap:30px;
    padding:30px
  }
  .result-paper h1 {
    font-size:30px
  }
  .result-type {
    font-size:88px
  }
  .result-type-title {
    font-size:26px
  }
  .share-panel {
    padding:30px
  }
  .result-report {
    padding:30px
  }
  .result-bars {
    gap:22px
  }
  .axis-label {
    font-size:13px
  }
}
@media(max-width:560px) {
  :root {
    --pad:20px;
    --space:64px;
    --body:16px;
    --small:14px;
    --display:48px;
    --heading:36px;
    --subhead:26px
  }
  .site-header {
    padding:14px 20px;
    min-height:72px
  }
  .wordmark {
    font-size:30px
  }
  .wordmark svg {
    width:36px
  }
  .header-cta {
    display:none
  }
  .mobile-nav {
    margin-left:auto
  }
  .hero-ground {
    padding:0 14px
  }
  .hero-paper {
    display:block;
    background:var(--paper)
  }
  .hero-copy {
    padding:20px 6px 26px
  }
  .hero-copy h1 {
    font-size:49px;
    max-width:none;
    line-height:1.04
  }
  .hero-note {
    margin-top:20px;
    font-size:16px;
    max-width:34ch
  }
  .hero-facts {
    margin:22px 0 18px;
    gap:32px
  }
  .hero-facts span {
    font-size:14px
  }
  .hero-facts strong {
    font-size:26px
  }
  .hero-copy .quiet-link {
    font-size:14px
  }
  .hero-photo {
    display:none
  }
  .first-question {
    padding:26px 20px;
    background:var(--white)
  }
  .question-count {
    display:none
  }
  .first-question legend {
    font-size:25px;
    line-height:1.25;
    margin-bottom:22px;
    max-width:none
  }
  .quick-options {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px
  }
  .quick-options label {
    flex-direction:column;
    justify-content:flex-start;
    gap:10px;
    padding:14px 2px;
    min-height:100px;
    text-align:center
  }
  .quick-options label span {
    font-size:13px;
    line-height:1.4
  }
  .quick-options input {
    width:22px;
    height:22px
  }
  .first-question .button {
    margin-top:20px;
    padding-inline:16px;
    gap:16px;
    font-size:16px
  }
  .first-question .form-note {
    font-size:13px;
    margin-top:14px
  }
  .hero-families {
    gap:6px;
    margin-top:6px
  }
  .family-tab {
    padding:22px 15px;
    gap:10px
  }
  .family-tab>span:first-child {
    font-size:25px
  }
  .family-codes {
    font-size:12px;
    line-height:1.6;
    white-space:normal;
    max-width:14ch
  }
  .family-arrow {
    top:20px;
    right:12px
  }
  .hero-footnote {
    font-size:13px;
    margin:18px 6px 0
  }
  .intro-section {
    display:block
  }
  .intro-section>div:first-child {
    padding:0
  }
  .intro-text {
    padding:0;
    margin-top:28px
  }
  .intro-section h2 {
    font-size:36px
  }
  .section-note {
    font-size:14px;
    margin-top:16px;
    max-width:none
  }
  .section-top {
    display:block;
    margin-bottom:20px
  }
  .section-top .text-link,.section-top p {
    margin-top:20px
  }
  .section-top h2 {
    font-size:34px
  }
  .section-intro {
    font-size:16px;
    margin-bottom:28px
  }
  .group-shelf summary {
    padding:23px 20px;
    gap:12px;
    flex-wrap:wrap;
    font-size:26px
  }
  .shelf-codes {
    order:3;
    flex-basis:100%;
    font-size:13px
  }
  .shelf-inner {
    padding:0 12px 14px;
    gap:4px
  }
  .shelf-inner .type-entry {
    padding:20px 10px;
    gap:12px
  }
  .type-code {
    font-size:40px
  }
  .type-name {
    font-size:15px
  }
  .type-description {
    font-size:14px
  }
  .functions-feature {
    padding-block:48px
  }
  .functions-inner {
    display:flex;
    flex-direction:column-reverse;
    gap:36px
  }
  .functions-inner>div:last-child {
    padding:0
  }
  .functions-inner h2 {
    max-width:none;
    font-size:36px
  }
  .functions-inner p {
    margin:22px 0
  }
  .functions-feature .small-note {
    font-size:14px
  }
  .function-print {
    width:100%;
    grid-template-columns:repeat(4,1fr);
    gap:6px
  }
  .function-print a {
    aspect-ratio:1;
    font-size:36px
  }
  .reading-grid {
    grid-template-columns:1fr;
    gap:38px;
    margin-top:32px
  }
  .reading-link .image-frame,.reading-link:first-child .image-frame,.reading-link:nth-child(4) .image-frame {
    aspect-ratio:1.4;
    margin-bottom:20px
  }
  .reading-link h3,.reading-link:first-child h3 {
    font-size:28px;
    max-width:none
  }
  .reading-link p {
    margin-top:16px;
    font-size:16px
  }
  .faq-section>h2 {
    padding-bottom:30px
  }
  .faq-row {
    display:block;
    padding:30px 20px
  }
  .faq-row h3 {
    font-size:24px;
    padding:0;
    margin-bottom:18px;
    max-width:28ch
  }
  .faq-row p {
    padding:0;
    font-size:16px
  }
  .last-invitation {
    padding-block:36px;
    display:block
  }
  .last-invitation h2 {
    font-size:36px
  }
  .last-invitation .button {
    margin-top:26px
  }
  .site-footer {
    padding:42px 20px 24px
  }
  .footer-top {
    display:block
  }
  .footer-heading {
    font-size:36px
  }
  .footer-top p+p {
    font-size:14px;
    margin-top:22px
  }
  .footer-top nav {
    margin-top:32px;
    gap:5px;
    font-size:16px
  }
  .footer-top nav a {
    padding:10px 0
  }
  .footer-wordmark {
    font-size:17vw;
    margin:42px 0 30px
  }
  .footer-base {
    display:block
  }
  .footer-base p {
    font-size:13px
  }
  .footer-base p:last-child {
    text-align:left;
    margin-top:14px
  }
  .page-intro {
    padding-block:28px 34px
  }
  .page-intro h1 {
    font-size:44px
  }
  .lead {
    font-size:18px;
    margin-top:22px
  }
  .library-controls {
    display:block;
    padding:20px
  }
  .library-controls label+label {
    margin-top:20px
  }
  .library-controls label {
    font-size:14px
  }
  .library-controls input,.library-controls select {
    font-size:16px
  }
  .all-types {
    gap:8px
  }
  .all-types .type-entry {
    padding:22px 16px;
    min-height:265px
  }
  .all-types .type-code {
    font-size:36px
  }
  .all-types .entry-mark {
    display:none
  }
  .reading-note {
    padding:28px 22px;
    margin-top:36px
  }
  .reading-note h2 {
    font-size:30px
  }
  .reading-note .text-link {
    margin-right:0
  }
  .function-list>a {
    grid-template-columns:44px minmax(0,1fr);
    gap:18px;
    padding:24px 18px
  }
  .function-list>a>span {
    display:none
  }
  .function-list strong {
    font-size:34px
  }
  .function-list h2 {
    font-size:26px
  }
  .function-list p {
    font-size:16px
  }
  .function-list .small-note {
    font-size:14px
  }
  .article-heading {
    padding-block:24px 36px
  }
  .article-heading .back-link {
    margin-bottom:24px
  }
  .article-heading h1 {
    font-size:42px;
    max-width:18ch
  }
  .article-heading .lead {
    font-size:18px
  }
  .type-subtitle {
    font-size:25px;
    margin-top:18px
  }
  .article-byline {
    font-size:13px;
    margin-top:25px
  }
  .article-layout {
    padding-block:22px 56px
  }
  .article-toc {
    padding:0 20px;
    margin-bottom:32px
  }
  .article-body h2 {
    font-size:29px;
    max-width:24ch
  }
  .article-body h3 {
    font-size:25px
  }
  .article-body p,.article-body li {
    font-size:16px;
    line-height:1.75
  }
  .article-body section {
    margin-bottom:44px
  }
  .article-body table {
    display:block;
    overflow-x:auto
  }
  .sources {
    padding:24px 20px
  }
  .article-body blockquote {
    padding:24px 20px;
    font-size:18px
  }
  .quiz-intro {
    padding:14px 20px 26px
  }
  .quiz-intro h1 {
    font-size:34px
  }
  .quiz-intro p {
    font-size:16px;
    margin-top:18px
  }
  .quiz-intro .back-link {
    font-size:14px;
    margin-bottom:20px
  }
  .quiz-sheet {
    margin:0 14px 48px;
    padding:24px 20px
  }
  .quiz-progress-row {
    font-size:14px
  }
  .quiz-progress-row .link-button {
    font-size:14px
  }
  .quiz-progress-row p {
    white-space:nowrap
  }
  progress {
    margin:14px 0 20px
  }
  #quiz-question legend {
    font-size:24px;
    line-height:1.3;
    min-height:94px;
    margin-bottom:18px
  }
  .answer-option {
    font-size:16px;
    min-height:48px;
    padding:10px 14px
  }
  .answer-list {
    gap:6px
  }
  .quiz-navigation {
    gap:12px;
    margin-top:20px
  }
  .quiz-navigation .button {
    min-width:0;
    flex:1;
    padding:14px 12px;
    font-size:16px
  }
  .quiz-sheet .form-note {
    font-size:13px
  }
  .result-container {
    padding:0 14px;
    margin:16px auto 48px
  }
  .result-nav {
    font-size:14px;
    gap:16px
  }
  .result-paper {
    display:block;
    padding:28px 22px
  }
  .result-paper h1 {
    font-size:32px
  }
  .result-type {
    font-size:100px;
    margin:24px 0 18px
  }
  .result-type-title {
    font-size:26px
  }
  .result-bars {
    margin-top:36px;
    gap:26px
  }
  .axis-label {
    font-size:14px
  }
  .share-panel {
    display:block;
    padding:28px 22px
  }
  .share-panel h2 {
    font-size:30px
  }
  .share-actions {
    gap:8px
  }
  .share-actions .button {
    padding:12px 14px;
    font-size:14px
  }
  .share-panel img {
    width:100px;
    margin-top:24px
  }
  .share-panel p {
    font-size:14px
  }
  .result-report {
    padding:28px 22px
  }
  .result-report>h2 {
    font-size:32px
  }
  .report-section h3 {
    font-size:26px
  }
  .function-result-list {
    grid-template-columns:1fr;
    gap:28px
  }
  .function-result-list h2 {
    font-size:26px
  }
  .result-links {
    gap:18px;
    font-size:16px
  }
  .balanced-notice {
    padding:22px;
    font-size:16px
  }
  .not-found {
    padding:60px 20px
  }
  .not-found h1 {
    font-size:44px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .reveal {
    opacity:1;
    transform:none
  }
}
/* Result reading and comparison rhythm. */
.result-topline {
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:var(--small);
  margin-bottom:24px
}
.result-topline .back-link {
  margin:0
}
.result-group {
  margin:0 0 0 12px;
  color:var(--group-ink);
  font-weight:500
}
.result-tagline {
  font:500 var(--subhead)/1.3 var(--serif);
  margin-top:22px
}
.result-description {
  margin-top:22px
}
.result-jump-links {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:28px;
  font-size:var(--small)
}
.result-bars-heading {
  font-size:var(--subhead)
}
.axis-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.axis-tendency {
  font-size:var(--small);
  font-weight:400
}
.axis-endpoint strong {
  font-size:26px;
  line-height:1.3
}
.result-explainer {
  font-size:var(--small);
  margin-top:6px
}
.result-explainer summary {
  padding:12px 0;
  text-decoration:underline;
  text-underline-offset:4px
}
.result-explainer .text-link {
  font-size:var(--small);
  margin-top:16px
}
.report-heading h2 {
  font-size:var(--heading);
  margin-bottom:20px
}
.report-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 44px
}
.report-grid .report-section {
  margin-top:38px
}
.report-grid h3 {
  font-size:var(--subhead);
  max-width:20ch
}
.growth-section {
  padding:32px;
  background:var(--group-surface);
  margin-top:40px
}
.growth-section p {
  margin-top:16px
}
.nearby-types {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px
}
.nearby-type {
  position:relative;
  margin:0
}
.nearby-type .nearby-type-code {
  font:500 var(--heading)/1 var(--serif);
  color:var(--group-ink);
  margin:0 0 18px
}
.nearby-type .nearby-type-name {
  font:500 var(--body)/1.4 var(--sans);
  display:block
}
.nearby-type .nearby-type-reason,.nearby-type .nearby-type-description {
  font-size:var(--small)
}
.nearby-type .entry-mark {
  display:block;
  margin:0
}
.share-panel .share-intro {
  margin:0 0 24px;
  font-size:var(--body)
}
.share-qr {
  margin:0
}
.share-qr figcaption {
  font-size:13px;
  margin-top:10px
}
.function-result-intro h1 {
  font-size:54px;
  max-width:20ch
}
.function-score-header {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end
}
.function-score-header h2 a {
  display:flex;
  flex-direction:column;
  gap:10px;
  text-decoration:none
}
.function-code {
  font-size:var(--heading);
  line-height:1
}
.function-name {
  font:400 var(--small)/1.5 var(--sans);
  letter-spacing:0
}
.function-score-value {
  white-space:nowrap;
  line-height:1
}
.function-score-value strong {
  font:500 32px/1 var(--serif)
}
.function-score-value>span {
  font-size:var(--small);
  margin-left:5px
}
.function-score-item .axis-note {
  display:flex;
  justify-content:space-between;
  gap:16px
}
.function-reflection {
  padding:32px;
  background:var(--sentinels);
  margin-top:40px
}
.function-reflection h2 {
  font-size:32px;
  margin-bottom:20px
}
@media(max-width:560px) {
  .family-codes {
    font-size:13px
  }
  .result-topline {
    display:block
  }
  .result-topline>span {
    display:block;
    margin-top:8px
  }
  .result-group {
    margin-left:8px
  }
  .result-bars-heading {
    font-size:26px
  }
  .axis-heading {
    font-size:14px;
    gap:12px
  }
  .axis-tendency {
    font-size:13px
  }
  .result-jump-links {
    gap:18px
  }
  .report-grid {
    display:block
  }
  .report-heading h2 {
    font-size:32px
  }
  .growth-section,.function-reflection {
    padding:24px 20px
  }
  .growth-section h3 {
    font-size:26px
  }
  .nearby-types {
    grid-template-columns:1fr
  }
  .nearby-type .nearby-type-code {
    font-size:36px
  }
  .share-qr {
    margin-top:24px
  }
  .share-qr img {
    margin-top:0
  }
  .function-result-intro h1 {
    font-size:38px
  }
  .function-code {
    font-size:36px
  }
  .function-score-header {
    gap:14px
  }
  .function-score-value strong {
    font-size:30px
  }
  .function-reflection h2 {
    font-size:28px
  }
  .function-score-item .axis-note {
    font-size:13px
  }
}
.group-shelf .disclosure {
  font-family:inherit
}
@media(min-width:561px) and (max-width:1000px) {
  .hero-paper {
    grid-template-columns:50% 50%
  }
  .hero-copy h1 {
    max-width:none;
    font-size:49px
  }
  .hero-photo {
    margin-top:28px
  }
  .first-question {
    padding:28px 24px
  }
  .hero-copy .quiet-link {
    max-width:28ch
  }
}
@media(max-width:560px) {
  .home h1 {
    font-size:48px
  }
  .home .wordmark {
    font-size:32px
  }
  .home h2,.home .section-top h2 {
    font-size:36px
  }
  .home h3,.home .reading-link:first-child h3,.home .family-tab>span:first-child,.home .first-question legend {
    font-size:26px
  }
  .home .type-code {
    font-size:36px
  }
  .home .type-name {
    font-size:16px
  }
}
@media(max-width:560px) {
  .result-paper h1 {
    font-size:28px
  }
  .result-tagline {
    font-size:20px;
    line-height:1.4;
    margin-top:18px
  }
  .result-type {
    font-size:88px;
    margin-top:20px
  }
  .result-intro .small-note {
    margin-top:18px
  }
  .result-jump-links {
    margin-top:22px
  }
}

/* Character edition: the result is a portable portrait, with actions in reach. */
.result-page { background:var(--paper) }
.result-container { max-width:1320px; margin-top:22px }
.result-topline { margin-bottom:22px }
.result-delivery { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); align-items:center; gap:72px; padding:24px 0 50px }
.result-delivery-copy h1 { font-size:clamp(64px,6vw,88px); color:var(--group-ink); line-height:1 }
.result-delivery-copy h1 span { display:block; margin-top:16px; font:500 clamp(28px,2.5vw,36px)/1.16 var(--serif); letter-spacing:-.025em; color:var(--ink) }
.delivery-description { font-size:20px; max-width:35ch; margin-top:24px }
.result-delivery .share-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; align-items:center }
.result-delivery .share-actions .button { min-width:0; min-height:54px; padding:13px 23px }
.result-delivery .download-card { background:var(--group-deep); color:var(--white) }
.result-delivery .share-actions .secondary { background:var(--group-surface); color:var(--ink) }
.result-delivery .link-button { min-height:44px; padding:8px 0; flex-basis:100%; text-align:left }
.delivery-note,.share-feedback { font-size:var(--small); margin:12px 0 0 }
.share-feedback { min-height:2.6em; max-width:48ch }
.result-card-preview { padding:0; margin:0; background:var(--group-surface); max-width:480px; width:100%; justify-self:end }
.result-card-preview>img { display:block; width:100%; height:auto; aspect-ratio:3/4 }
.result-card-preview figcaption { font-size:13px; margin-top:12px; text-align:center }
.result-jump-links { margin-top:20px; gap:20px }
.result-qr-disclosure { margin-top:18px; font-size:var(--small) }
.result-qr-disclosure summary { width:fit-content; padding:8px 0 }
.result-qr-content { display:grid; grid-template-columns:116px 1fr; align-items:center; gap:18px; margin-top:14px }
.result-qr-content img { height:auto; width:116px }
.result-qr-content p { margin:0 }

.result-balance { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:80px; padding:64px 48px; background:var(--white); margin:56px 0 }
.result-balance h2 { font-size:36px; max-width:15ch }
.result-balance p { margin-top:20px }
.result-balance .axis-heading { margin-top:0 }
.result-balance .result-bars { gap:28px }
.result-report { margin-top:50px }
.nearby-type { overflow:hidden; min-height:192px }
.nearby-character { float:right; object-fit:contain; height:140px; width:110px; margin:0 -8px 12px 12px }
.premium-compact { background:var(--group-surface); padding:20px 22px; margin-top:26px }
.premium-compact p { font-size:var(--small); margin:8px 0 0 }
.premium-compact a { font-weight:500 }
.premium-offer { background:var(--ink); color:var(--paper); padding:44px; margin:36px 0 60px }
.premium-offer h2 { font-size:36px; max-width:24ch }
.premium-offer>p { margin-top:16px }
.premium-offer__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:32px }
.premium-tier { display:flex; flex-direction:column; align-items:flex-start; background:var(--paper); color:var(--ink); padding:28px 24px }
.premium-tier h3 { font-size:28px }
.premium-tier p { margin-top:12px }
.premium-tier__price { font:500 42px/1.2 var(--serif) }
.premium-tier__features { padding-left:20px; margin:18px 0 28px; font-size:16px }
.premium-tier__features li+li { margin-top:10px }
.premium-tier .button { margin-top:auto; width:100%; min-height:50px }
.premium-offer .commerce-status { font-size:14px; min-height:1.5em }
.premium-offer a:focus-visible,.premium-offer button:focus-visible { outline-color:var(--group-base) }
.premium-offer__note { font-size:14px }
.type-character,.article-character,.reading-character { object-fit:contain }
.type-entry .type-character { width:110px; height:150px }
.article-character { width:240px; height:300px }
.reading-link .image-frame:has(.reading-character) { background:var(--group-surface) }
.reading-link .reading-character { width:100%; height:100%; object-fit:contain; padding:24px }
.type-icon { width:32px; height:32px; object-fit:contain }
.language-switch { display:flex; align-items:center; gap:8px; font-size:14px }
.language-switch a { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:44px; text-decoration:none }
.language-switch a[aria-current] { font-weight:500; text-decoration:underline; text-underline-offset:5px }
@media(max-width:560px){
 .site-header { position:relative }
 .mobile-nav { position:static }
 .mobile-nav nav { left:20px; right:20px; top:calc(100% - 6px); min-width:0 }
}
@media(max-width:380px){
 .site-header { gap:8px }
 .wordmark { font-size:24px; gap:6px; letter-spacing:-.8px }
 .wordmark svg { width:28px }
 .mobile-nav summary { min-width:44px; justify-content:center; padding-inline:6px }
}
@media(max-width:1000px){
 .result-delivery { gap:36px; grid-template-columns:1fr .9fr }
 .result-delivery-copy h1 { font-size:64px }
 .result-delivery-copy h1 span { font-size:28px }
 .result-balance { gap:38px; padding:36px 28px }
 .premium-offer { padding:32px 24px }
 .premium-offer__grid { gap:16px }
 .premium-tier { padding:24px 18px }
}
@media(max-width:700px){
 .result-container { margin-top:12px; padding-inline:20px }
 .result-topline { margin-bottom:16px; font-size:14px }
 .result-delivery { display:flex; flex-direction:column; gap:26px; padding:8px 0 16px; align-items:stretch }
 .result-delivery-copy h1 { font-size:60px }
 .result-delivery-copy h1 span { margin-top:8px; font-size:26px }
 .delivery-description { margin-top:16px; font-size:17px; max-width:36ch }
 .result-delivery .share-actions { margin-top:20px; gap:10px }
 .result-delivery .share-actions .button { padding:13px 15px; min-height:50px; font-size:16px }
 .result-delivery .link-button { flex-basis:auto; margin-left:2px }
 .delivery-note,.share-feedback { font-size:13px }
 .share-feedback { min-height:0; margin-top:8px }
 .result-card-preview { padding:0; max-width:420px; align-self:center }
 .result-card-preview figcaption { font-size:13px; margin-top:8px }
 .premium-compact { padding:16px; margin-top:18px }
 .result-jump-links,.result-qr-disclosure { display:none }
 .result-balance { display:block; padding:26px 20px; margin:32px 0 }
 .result-balance h2 { font-size:28px; max-width:none }
 .result-balance .result-bars { margin-top:30px }
 .result-balance .axis-heading { gap:8px }
 .result-balance .axis-heading>span:first-child { font-size:15px }
 .result-balance .axis-tendency { font-size:13px }
 .result-balance .axis-label { font-size:14px }
 .result-balance .axis-endpoint strong { font-size:24px }
 .result-report { margin-top:32px }
 .result-report h2 { font-size:30px }
 .result-report h3 { font-size:25px }
 .premium-offer { padding:28px 20px; margin:32px 0 }
 .premium-offer h2 { font-size:30px }
 .premium-offer__grid { display:block; margin-top:24px }
 .premium-tier { padding:24px; margin-top:14px }
 .premium-tier h3 { font-size:26px }
 .premium-tier__features { margin-bottom:20px }
 .premium-tier .button { margin-top:4px }
 .nearby-character { width:80px; height:110px }
 .site-header .language-switch { gap:0; margin-left:auto }
 .language-switch a { min-width:32px; font-size:13px }
}
/* Use the same character, unfiltered, wherever its personality is discussed. */
.hero-photo { height:158px; background:var(--awf-green-surface) }
.hero-photo img[src*='/characters/'] { width:100%; height:310px; object-fit:contain; object-position:center top; transform:translateY(-12px) }
.reading-link .image-frame img[src*='/characters/'] { object-fit:contain; padding:22px }
.reading-link:first-child .image-frame,.reading-link:nth-child(2) .image-frame,.reading-link:nth-child(4) .image-frame { background:var(--diplomats) }
.reading-link:nth-child(3) .image-frame { background:var(--analysts) }
.article-heading .article-character { float:right; width:280px; height:340px; margin:0 0 24px 48px; object-fit:contain }
.article-heading:has(.article-character) { min-height:400px }
.all-types .type-character { width:100%; height:220px; object-fit:contain; order:-2; margin:0 0 8px }
.all-types .type-icon { position:absolute; top:24px; left:24px; width:34px; height:34px }
.shelf-inner .type-character { display:none }
.shelf-inner .type-icon { width:32px; height:32px }
.premium-compact strong,.premium-compact span,.premium-compact a { display:block }
.premium-compact span { font-size:14px; margin-top:5px }
.premium-compact a { font-size:14px; margin-top:8px }
.premium-tier__price strong { font-weight:500 }
.premium-tier__price small { display:block; font:400 13px/1.6 var(--sans); margin-top:5px }
.premium-offer__note { margin-top:24px }
.premium-offer .commerce-mode-note { margin-top:24px; padding:14px 18px; background:var(--paper); color:var(--ink); font-size:14px }
@media(max-width:700px){
 .hero-photo { display:none }
 .article-heading .article-character { width:130px; height:185px; margin:0 0 14px 18px }
 .article-heading:has(.article-character) { min-height:0 }
 .all-types .type-character { height:155px; margin-bottom:0 }
 .all-types .type-icon { width:25px; height:25px; left:14px; top:14px }
 .result-card-preview { max-width:420px }
 .result-delivery-copy { display:contents }
 .result-delivery-copy h1 { order:0 }
 .delivery-description { order:1; margin-top:-12px }
 .result-delivery .share-actions { order:2; margin-top:-8px }
 .delivery-note { order:3; margin-top:-20px }
 .share-feedback { order:4; margin-top:-20px }
 .result-card-preview { order:5 }
 .premium-compact { order:6; margin-top:0 }
}

/* Keep the two primary result actions together on a narrow screen. */
@media(max-width:1000px) and (min-width:701px){
 .premium-offer__grid { grid-template-columns:1fr }
 .premium-tier { display:grid; grid-template-columns:1fr 1.3fr; gap:12px 32px; padding:28px }
 .premium-tier h3 { grid-column:1 }
 .premium-tier__price { grid-column:1; grid-row:2 }
 .premium-tier__features { grid-column:2; grid-row:1 / span 3; margin:0 }
 .premium-tier .button { grid-column:1; margin-top:0 }
}
@media(max-width:700px){
 .result-page .site-header { gap:10px }
 .result-page .site-header>.small-link { white-space:nowrap; font-size:14px }
 .result-delivery .share-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.75fr) }
 .result-delivery .share-actions .button { padding:13px 10px; gap:10px; font-size:15px }
 .result-delivery .link-button { grid-column:1 / -1; min-height:34px; padding:0; margin:0 }
}

@media(max-width:700px){ .result-page .wordmark { font-size:27px; letter-spacing:-1px; gap:8px } }
@media(max-width:380px){
 .result-page .site-header { gap:6px }
 .result-page .wordmark { font-size:20px; gap:5px; letter-spacing:-.6px }
 .result-page .wordmark svg { width:26px }
 .result-page .site-header>.small-link { font-size:12px }
}

.related-characters { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:30px 0 }
.related-characters a { display:grid; grid-template-columns:1fr auto; gap:12px; text-decoration:none; padding:20px; background:var(--group-surface) }
.related-characters img { grid-column:1 / -1; width:100%; height:220px; object-fit:contain }
.related-characters strong { font:500 28px/1 var(--serif) }
@media(max-width:700px){
 .article-heading:has(.article-character) { display:flex; flex-direction:column; align-items:stretch }
 .article-heading:has(.article-character) h1 { order:0 }
 .article-heading:has(.article-character) .type-subtitle { order:1 }
 .article-heading .article-character { order:2; float:none; align-self:center; width:190px; height:240px; margin:22px 0 }
 .article-heading:has(.article-character) .lead { order:3; margin-top:0 }
 .article-heading:has(.article-character) .article-byline { order:4 }
 .related-characters { gap:8px }
 .related-characters a { padding:10px; gap:6px }
 .related-characters img { height:135px }
 .related-characters strong { font-size:24px }
}

/* Spanish homepage: keep longer family names clear of their navigation arrow. */
@media(max-width:560px) {
  html[lang="es"] .home .hero-families .family-tab>span:first-child { font-size:24px }
  html[lang="es"] .home .hero-families .family-arrow { top:auto; bottom:20px }
}
.function-result-page .result-delivery-copy h1 { font-size:clamp(42px,4.8vw,68px); line-height:1.08 }
@media(max-width:700px){ .function-result-page .result-delivery-copy h1 { font-size:42px } }

@media(max-width:560px) {
  html[lang="es"] .home .quick-options label span {
    min-width:0;
    width:100%;
    font-size:14px;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
}
.function-score-header h3 a { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap }
/* Long Spanish response labels keep whole words on a phone. */
@media(max-width:560px) {
 html[lang="es"] .home .quick-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px }
 html[lang="es"] .home .quick-options label { flex-direction:row; align-items:center; text-align:left; padding:10px; min-height:58px; gap:8px }
 html[lang="es"] .home .quick-options label:nth-child(3) { grid-column:1 / -1 }
 html[lang="es"] .home .quick-options label span { overflow-wrap:normal; hyphens:none }
}

/* The share card is the first result on a phone, at its actual portrait ratio. */
.result-card-notes { margin-top:12px; max-width:52ch; font-size:16px; line-height:1.65 }
.result-card-notes summary { width:fit-content; padding:8px 0; cursor:pointer }
.result-card-notes p { margin:12px 0 }
.result-card-notes a { text-underline-offset:3px }
@media(max-width:700px){
 .result-delivery { gap:20px }
 .result-delivery-copy h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
 .result-delivery .delivery-description { display:none }
 .result-card-preview { order:0 }
 .result-delivery .share-actions { order:1; margin:0 }
 .result-delivery .share-feedback { order:2; margin:-10px 0 0; font-size:13px }
 .premium-compact { order:3 }
 .result-card-notes { order:4; margin-top:-8px; font-size:16px }
}

/* Library revision: readable guide hierarchy and visible routes through the subject. */
.breadcrumbs { padding-block:24px 18px; font-size:14px; color:var(--muted) }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:6px 10px; list-style:none; padding:0; margin:0 }
.breadcrumbs li { display:flex; gap:10px; align-items:baseline }
.breadcrumbs li+li::before { content:'/'; opacity:.5 }
.breadcrumbs a { text-underline-offset:3px }
.article-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:26px }
.article-actions .text-link { font-size:16px }
.article-byline { line-height:1.7; max-width:72ch }
.article-heading { display:flow-root }
.article-body .key-facts { padding:28px; background:var(--group-surface,var(--awf-green-light)) }
.key-facts ul { list-style:none; padding:0; margin:0; display:grid; gap:20px }
.key-facts li { display:grid; gap:5px; margin:0!important }
.key-facts strong { font-size:15px; font-weight:500 }
.key-facts span { font-size:18px; line-height:1.5 }
.related-function-types { margin:24px 0 }
.article-next .related-function-types a { display:inline }
.group-navigation { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px }
.group-navigation a { padding:12px 18px; color:var(--group-ink); background:var(--group-surface); text-decoration:none }
.group-navigation a:hover { text-decoration:underline; text-underline-offset:5px }
.function-table-wrap { overflow:auto; margin:30px 0; max-width:100% }
.function-table { width:100%; border-collapse:collapse; text-align:left; font-size:17px }
.function-table caption { text-align:left; margin-bottom:18px; font-weight:500 }
.function-table th,.function-table td { padding:15px 18px }
.function-table thead { background:var(--sentinels) }
.function-table tbody tr:nth-child(even) { background:var(--white) }
.function-table a { text-underline-offset:5px }
.work-reflection { display:grid; grid-template-columns:1fr 1fr; gap:8%; padding-block:60px; background:var(--diplomats) }
.work-reflection h2,.library-updates h2 { font-size:var(--heading) }
.work-reflection p { margin:22px 0; line-height:1.7 }
.work-reflection .text-link { display:block; width:fit-content; margin:18px 0; font-size:18px }
.library-updates { padding-block:var(--space) }
.library-updates ul { list-style:none; padding:0; margin:30px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px }
.library-updates li>a { font-size:25px; line-height:1.35; text-underline-offset:5px }
.library-updates li>p { margin-top:16px; line-height:1.65 }
.quiz-page .breadcrumbs { max-width:800px }
.quiz-page .quiz-intro { padding-top:12px; padding-bottom:24px }
.quiz-facts { list-style:none; padding:0; margin:24px 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 22px; text-align:left; font-size:14px; line-height:1.5 }
.quiz-facts li { padding-left:12px; border-left:3px solid var(--green) }
.quiz-before { text-align:left; margin-top:20px }
.quiz-before summary { cursor:pointer; font-size:15px; padding:10px 0; width:fit-content; text-decoration:underline; text-underline-offset:5px }
.quiz-before>div { background:var(--white); padding:20px 24px; margin-top:12px }
.quiz-before h3 { font-size:21px; line-height:1.35; margin:22px 0 10px }
.quiz-before p { font-size:16px; line-height:1.7; margin:0 0 18px; max-width:none }
.quiz-library-link { text-align:center; padding:30px 24px 70px; font-size:16px }
@media(max-width:700px) {
 .breadcrumbs { padding-block:18px; font-size:13px }
 .article-heading { padding-top:16px; padding-bottom:30px }
 .article-heading:has(.article-character) { display:grid; grid-template-columns:minmax(0,1fr) 96px; column-gap:12px; align-items:start }
 .article-heading:has(.article-character) h1 { grid-column:1; grid-row:1; font-size:40px; max-width:11ch }
 .article-heading:has(.article-character) .type-subtitle { grid-column:1; grid-row:2; font-size:23px; margin-top:12px }
 .article-heading .article-character { grid-column:2; grid-row:1 / 3; align-self:center; width:100%; height:155px; margin:0 }
 .article-heading:has(.article-character) .lead { grid-column:1 / -1; margin-top:22px; font-size:18px }
 .article-heading:has(.article-character) .article-actions,.article-heading:has(.article-character) .article-byline { grid-column:1 / -1 }
 .article-heading .article-byline { font-size:13px; margin-top:20px }
 .article-actions { gap:16px; margin-top:20px }
 .article-actions .button { font-size:16px; padding:14px 18px }
 .article-body .key-facts { padding:22px }
 .article-body h2 { font-size:30px }
 .article-body h3 { font-size:23px }
 .article-body table { font-size:15px; max-width:100% }
 .article-body th,.article-body td { padding:12px; overflow-wrap:anywhere }
 .function-table { font-size:14px }
 .function-table th,.function-table td { padding:12px 9px }
 .work-reflection { grid-template-columns:1fr; gap:12px; padding-block:36px }
 .work-reflection h2,.library-updates h2 { font-size:36px }
 .library-updates ul { grid-template-columns:1fr; gap:32px }
 .library-updates li>a { font-size:25px }
 .quiz-page .quiz-intro h1 { font-size:38px }
 .quiz-facts { grid-template-columns:repeat(2,minmax(0,1fr)); font-size:13px; gap:12px }
 .quiz-before>div { padding:14px 18px }
 .quiz-before h3 { font-size:21px }
}

@media(max-width:700px) {
 .article-heading:has(.article-character) .lead { grid-row:3 }
 .article-heading:has(.article-character) .article-actions { grid-row:4 }
 .article-heading:has(.article-character) .article-byline { grid-row:5 }
}

.quiz-before h2 { font-size:26px; margin:12px 0 24px }

/* Source Han supplies proportional punctuation through its palt feature. */
body { font-feature-settings:"palt" 1 }
.article-table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain }
.article-table-wrap table { display:table; min-width:660px; margin-block:16px; overflow:visible }
.article-table-wrap th,.article-table-wrap td { overflow-wrap:normal; word-break:normal; hyphens:none }
.article-table-wrap caption { text-align:left; margin-bottom:18px; font-weight:500 }
.table-swipe-hint { display:none }
@media(max-width:700px) {
 .article-body .table-swipe-hint { display:block; font-size:14px; margin:20px 0 6px }
 .article-table-wrap table { font-size:16px; line-height:1.6 }
 .article-table-wrap th,.article-table-wrap td { min-width:140px; padding:16px }
 .article-table-wrap th:first-child { min-width:125px }
}

.quiz-start { margin-top:20px; font-size:16px }
.quiz-before:not([open])>div { display:none }
.quiz-sheet { scroll-margin-top:24px }

@media(max-width:700px) {
 .function-table th,.function-table td { padding-inline:7px }
 .function-index-page .reading-note>.text-link { display:block; width:fit-content; margin-top:18px }
}

/* Result reading flow: a saveable card, then five navigable chapters. */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important }
.chapter-result-page .site-header { margin-bottom:0 }
.report-navigation { position:sticky; top:0; z-index:20; display:flex; gap:30px; align-items:center; overflow-x:auto; padding:16px max(24px,calc((100vw - 1200px)/2)); background:var(--paper); scrollbar-width:none; box-shadow:0 1px 0 #2d354014 } /* taste-skill-ignore: real sticky navigation overlay, permitted shadow; it separates scrolling text. */
.report-navigation::-webkit-scrollbar { display:none }
.report-navigation a { flex:0 0 auto; color:var(--ink); font-size:14px; font-weight:500; padding:8px 0; text-decoration:none; text-underline-offset:8px }
.report-navigation a[aria-current] { color:var(--group-deep); text-decoration:underline; text-decoration-thickness:2px }
.report-navigation .report-nav-card { margin-left:auto }
.personality-report { max-width:920px; margin:24px auto 96px }
.personality-chapter { scroll-margin-top:38px; padding:70px 0 36px }
.personality-chapter+ .personality-chapter { margin-top:36px }
.personality-chapter header { max-width:760px }
.personality-chapter h2 { font:500 clamp(38px,4.4vw,60px)/1.12 var(--serif); color:var(--group-deep); letter-spacing:-.035em; margin:0 0 28px; scroll-margin-top:108px }
.personality-chapter h2:focus { outline:none }
.chapter-teaser { font-size:19px; line-height:1.75; margin-top:18px; max-width:66ch }
.chapter-paywall { position:relative; margin-top:36px; min-height:350px; padding:32px; background:var(--group-surface); overflow:hidden }
.mosaic-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; filter:blur(4px); opacity:.35; user-select:none; pointer-events:none }
.mosaic-paragraph { display:grid; gap:12px; padding:8px }
.mosaic-paragraph i,.mosaic-paragraph span { height:12px; background:repeating-linear-gradient(90deg,var(--group-deep) 0 10px,transparent 10px 15px); display:block } /* taste-skill-ignore: explicitly requested mosaic redaction, not a decorative gradient; no paid words are sent. */
.mosaic-paragraph i { width:65%; height:21px; margin-bottom:12px }
.mosaic-paragraph span:last-child { width:75% }
.chapter-paywall-content { position:absolute; z-index:1; width:calc(100% - 64px); max-width:520px; top:50%; left:50%; transform:translate(-50%,-50%); padding:28px 30px; background:var(--paper); text-align:center }
.chapter-paywall h3 { font-size:21px; line-height:1.3; margin:0 }
.chapter-paywall p { font-size:15px; line-height:1.6; margin:14px 0 22px }
.chapter-paywall .button { background:var(--group-deep); min-height:48px; color:white; width:100%; font-size:16px }
.chapter-paywall small { display:block; font-size:12px; margin-top:12px }
.chapter-guidance { margin-top:36px }
.chapter-score-context { font-size:15px; padding:22px 26px; background:var(--group-surface); line-height:1.7 }
.chapter-practices { list-style:none; padding:0; margin:32px 0; counter-reset:practice }
.chapter-practices li { padding:0 0 26px 44px; position:relative; counter-increment:practice }
.chapter-practices li:before { content:counter(practice)'.'; position:absolute; left:0; font-family:var(--serif); font-size:25px; color:var(--group-deep) }
.chapter-practices h3 { font-size:23px; line-height:1.35; margin:0 0 12px }
.chapter-practices p,.chapter-reflection p { font-size:17px; line-height:1.75; max-width:66ch }
.chapter-reflection { background:var(--group-surface); padding:28px }
.chapter-reflection h3 { font-size:19px; margin-bottom:12px }
.report-access-note { margin:24px 0; display:grid; gap:12px; padding:22px; background:var(--group-surface); font-size:16px }
.celebrity-matches { margin:50px 0 80px; padding:36px 0; scroll-margin-top:100px }
.celebrity-matches header { max-width:720px }
.celebrity-matches h2 { font-size:36px }
.celebrity-matches header p { font-size:15px; margin-top:18px; line-height:1.7 }
.celebrity-matches ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; list-style:none; padding:0; margin-top:32px }
.celebrity-matches li { display:flex; flex-direction:column; gap:9px }
.celebrity-matches li strong { font:500 28px/1.2 var(--serif) }
.celebrity-matches li span { font-size:15px; min-height:3em; line-height:1.5 }
.celebrity-matches li a { font-size:13px }
.entry-card-dialog { border:0; padding:0; background:transparent; overflow:visible; max-width:calc(100vw - 24px); width:min(440px,calc((100dvh - 112px)*.75)); max-height:calc(100dvh - 24px); margin:auto; color:var(--ink) }
.entry-card-dialog::backdrop,.unlock-dialog::backdrop { background:rgb(21 32 41 / .65) }
.entry-card-dialog>img { width:100%; height:auto; aspect-ratio:3/4; display:block; background:var(--paper) }
.entry-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; background:var(--paper); padding:14px }
.entry-card-actions .button { min-width:0; padding:13px 10px; font-size:15px; min-height:48px; background:var(--group-deep); color:white; text-align:center; justify-content:center; line-height:1.3 }
.entry-card-actions .secondary { background:var(--group-surface); color:var(--group-deep) }
body.card-dialog-open,body:has(.unlock-dialog[open]) { overflow:hidden }
.unlock-dialog { width:min(500px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:0; padding:38px; background:var(--paper); color:var(--ink) }
.unlock-dialog form { position:relative }
.dialog-close { position:absolute; right:-18px; top:-22px; width:44px; height:44px; background:none; border:0; font:28px/1 sans-serif; cursor:pointer; color:var(--ink) }
.unlock-edition { font-size:13px; padding-right:30px; margin:0 0 20px }
.unlock-dialog h2 { font:500 38px/1.12 var(--serif); letter-spacing:-.035em; margin:0 0 18px }
.unlock-dialog h2+p { font-size:16px; line-height:1.6; margin:0 0 26px }
.unlock-dialog label { display:block; font-size:15px; font-weight:500; margin-bottom:10px }
.unlock-dialog input { border:1px solid var(--group-deep); border-radius:0; width:100%; padding:14px 12px; color:var(--ink); background:white; font:16px/1.4 var(--sans) }
.unlock-email-note,.unlock-access-note { font-size:12px; line-height:1.6; margin:12px 0 22px }
.unlock-total { display:flex; gap:15px; justify-content:space-between; align-items:center; margin:24px 0 18px; font-size:14px }
.unlock-total strong { font:500 28px/1.2 var(--serif) }
.unlock-dialog [type=submit] { background:var(--group-deep); color:white; width:100%; min-height:52px; font-size:16px }
.unlock-status { font-size:14px; line-height:1.5; margin:12px 0; min-height:1.5em }
.unlock-status:empty { display:none }
.unlock-access-note { margin-bottom:0 }
@media(max-width:700px){
 .report-navigation { gap:22px; padding:10px 20px }
 .report-navigation a { font-size:13px }
 .report-navigation .report-nav-card { margin-left:0 }
 .personality-report { margin-bottom:56px }
 .personality-chapter { padding:42px 0 12px; scroll-margin-top:46px }
 .personality-chapter+ .personality-chapter { margin-top:30px }
 .personality-chapter h2 { font-size:36px; margin-bottom:24px; scroll-margin-top:88px }
 .chapter-teaser { font-size:17px; line-height:1.7 }
 .chapter-paywall { padding:20px 14px; margin-top:26px; min-height:350px }
 .mosaic-preview { gap:12px }
 .chapter-paywall-content { width:calc(100% - 36px); padding:22px 18px }
 .chapter-paywall h3 { font-size:19px }
 .chapter-paywall p { font-size:14px }
 .chapter-paywall .button { font-size:15px; padding:12px }
 .chapter-practices li { padding-left:30px }
 .chapter-practices h3 { font-size:21px }
 .chapter-score-context,.chapter-reflection { padding:20px }
 .celebrity-matches ul { grid-template-columns:1fr; gap:26px }
 .celebrity-matches li span { min-height:0 }
 .celebrity-matches h2 { font-size:30px }
 .unlock-dialog { padding:28px 24px }
 .unlock-dialog h2 { font-size:32px }
 .dialog-close { right:-14px; top:-17px }
}
@media(prefers-reduced-motion:reduce){.personality-chapter{scroll-behavior:auto}}
@media(max-width:360px){.entry-card-actions .button{font-size:14px;padding-inline:6px;white-space:nowrap}}
.quiz-answer-hint { font-size:14px; line-height:1.6; margin:12px 0 22px; max-width:65ch }

.directory-layout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px 44px; padding-top:40px; padding-bottom:88px }
.directory-layout h2 { font-size:30px; margin:0 0 20px }
.directory-layout h3 { font-size:21px; margin:0 0 12px }
.directory-layout ul { list-style:none; padding:0; margin:0 }
.directory-layout li { margin:0 0 12px; line-height:1.6 }
.directory-layout a { text-underline-offset:4px; text-decoration-thickness:1px }
.directory-types { grid-column:1 / -1; padding-top:20px }
.directory-groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin-top:30px }
@media(max-width:900px){.directory-layout{grid-template-columns:1fr 1fr}.directory-groups{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.directory-layout,.directory-groups{grid-template-columns:1fr}.directory-layout{gap:36px;padding-bottom:56px}.directory-layout h2{font-size:28px}.directory-groups{gap:28px}}