* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body { margin: 0; background: var(--sonalon-paper); color: var(--sonalon-ink); font: 1.0625rem/1.6 var(--font-body); }
a { color: var(--sonalon-teal); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.18; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -.04em; margin: .3em 0; }
h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 24ch; margin: .3em 0 .7em; }
h3 { font-size: 1.5rem; margin: .2em 0 .7em; }
p { max-width: 70ch; }
.site-header, main, footer { width: min(calc(100% - 3rem), var(--content-max)); margin-inline: auto; }
.site-header { display: flex; align-items: center; gap: 2rem; padding-block: 1.5rem; border-bottom: 1px solid var(--sonalon-line); }
.wordmark { color: var(--sonalon-ink); font: 2rem var(--font-display); letter-spacing: -.045em; text-decoration: none; }
.desktop-nav { display: flex; gap: 1.5rem; margin-left: auto; font-size: .9375rem; }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.action { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); padding: .65rem 1.1rem; border: 1px solid var(--sonalon-teal); border-radius: var(--radius-control); text-decoration: none; font-weight: 700; line-height: 1.4; }
.action:hover { background: var(--sonalon-sage); }
.action.primary { background: var(--sonalon-teal); color: white; }
.action.primary:hover { background: var(--sonalon-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 2rem; }
.hero { padding-block: clamp(3rem, 9vw, 7rem); }
.lead { font-size: clamp(1.2rem, 2vw, 1.5rem); max-width: 42ch; }
.eyebrow { color: var(--sonalon-clay); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.disclosure, .caption { font-size: .875rem; color: var(--sonalon-muted); }
section { padding-block: 3rem 4rem; border-bottom: 1px solid var(--sonalon-line); scroll-margin-block: 1rem; }
.persona-grid, .place-grid, .information-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-block: 2rem; }
.card { padding: clamp(1.25rem, 3vw, 2rem); background: var(--sonalon-white); border: 1px solid var(--sonalon-line); border-radius: var(--radius-card); }
.persona { display: flex; flex-direction: column; align-items: flex-start; scroll-margin-block: 2rem; }
.persona .eyebrow { margin-top: 0; }
.invitation { font: 1.25rem/1.4 var(--font-display); margin: 0; }
.persona details { width: 100%; margin-block: .5rem 1.5rem; }
summary { cursor: pointer; min-height: 44px; padding-block: .6rem; color: var(--sonalon-teal); }
blockquote { border-left: 3px solid var(--sonalon-clay); padding-left: 1rem; margin-inline: 0; font-family: var(--font-display); }
.persona > .action { margin-top: auto; }
.place { background: var(--sonalon-sage); }
.place-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.place-links a, footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.information-grid article { padding-right: 1.5rem; }
.reading { max-width: 70ch; }
.alternative { background: var(--sonalon-soft); padding: 1.5rem 2rem; border-radius: var(--radius-card); margin-top: 2rem; }
.alternative p { margin-block: .5rem; }
.alternative > a { display: inline-flex; align-items: center; min-height: 44px; }
.closing { padding-block: 4rem; }
footer { padding-block: 2rem; }
footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-block: 1rem; }
.skip { position: absolute; top: .5rem; left: .5rem; transform: translateY(-200%); background: white; padding: 1rem; z-index: 5; }
.skip:focus { transform: none; }
.mobile-menu, .mobile-label { display: none; }
@media (max-width: 62rem) { .desktop-nav { display: none; } .header-actions { margin-left: auto; } .mobile-menu { display: block; } .mobile-menu summary { border: 1px solid var(--sonalon-line); border-radius: var(--radius-control); padding: .6rem 1rem; } .mobile-menu nav { position: absolute; top: 5.5rem; right: 1rem; left: 1rem; z-index: 2; padding: 1rem; background: var(--sonalon-paper); border: 1px solid var(--sonalon-line); box-shadow: 0 .5rem 1.5rem #20342f20; border-radius: var(--radius-card); } .mobile-menu nav a { display: block; padding: .75rem; } }
@media (max-width: 40rem) { .site-header, main, footer { width: calc(100% - 2rem); } .desktop-label { display: none; } .mobile-label { display: inline; } .site-header { gap: .5rem; } .persona-grid, .place-grid, .information-grid { grid-template-columns: 1fr; } section { padding-block: 2.5rem; } .information-grid article { padding-right: 0; } }
/* Long names and enlarged text remain within the page rather than clipping. */
body { overflow-wrap: anywhere; }
.site-header { flex-wrap: wrap; }
.header-actions { flex-wrap: wrap; }
.brand-lockup { display:block; width:180px; height:auto; min-width:160px; }
.hero-encounters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:3rem; }
figure { margin:0; }
picture { display:block; }
.hero-encounters img, .encounter img { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; border-radius:var(--radius-card); }
figcaption { font-size:.875rem; color:var(--sonalon-muted); padding-block:.75rem; }
.persona > picture { float:none; margin-bottom:1.5rem; }
.persona > picture img { display:block; width:160px; height:200px; border-radius:.5rem; object-fit:cover; }
.encounter { margin-block:1rem; }
.choices { margin-block:2rem; padding:2rem; background:var(--sonalon-sage); border-radius:var(--radius-card); }
.choices h4 { font-size:1.125rem; margin:0; }
@media(max-width:40rem) { .hero-encounters { grid-template-columns:1fr; } .hero-encounters img,.encounter img { aspect-ratio:4/5; } .persona > picture img { width:128px;height:160px; } .choices { padding:1rem; } .brand-lockup { width:160px; } }
.page-heading { padding-block:3rem 1rem; }
.profile-introduction { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:3rem; }
.profile-portrait { display:block;width:100%;height:auto;border-radius:var(--radius-card); }
.profile-encounter img { display:block;width:100%;height:auto;border-radius:var(--radius-card); }
@media(max-width:40rem) { .profile-introduction { grid-template-columns:1fr;gap:1.5rem; } .profile-encounter img { aspect-ratio:4/5;object-fit:cover; } }
.place > img, .product-previews img { display:block;width:100%;height:auto;border-radius:.5rem; }
.place > img { margin-bottom:.75rem; }
.product-previews { margin-block:2rem; }
.product-previews summary { font-weight:700; }
/* An encounter belongs in the first screen, alongside the invitation. */
.arrival-hero { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.5rem;align-items:center;padding-block:2.5rem; }
.arrival-hero h1 { font-size:clamp(2.75rem,5vw,4.5rem); }
.arrival-hero .lead { font-size:1.125rem; }
.hero-scene img { width:100%;height:auto;display:block;border-radius:var(--radius-card); }
.hero-scene figcaption { padding-top:.8rem; }
.hero-scene blockquote { font-size:1.35rem;margin-block:.5rem; }
.persona .encounter { order:-1;width:100%;margin:0 0 1rem; }
.persona .actions { margin-top:auto;padding-top:1rem;margin-bottom:0; }
.example-turn { max-width:50rem;padding:1rem 1.5rem;border-left:3px solid var(--sonalon-clay);background:var(--sonalon-white);margin-block:1rem;border-radius:var(--radius-card); }
.example-turn h3 { font:700 .875rem var(--font-body);color:var(--sonalon-teal);margin:0; }
.example-turn p { margin-block:.5rem 0; }
.example-turn:nth-child(2) { margin-left:2rem;background:var(--sonalon-sage); }
.notebook-example { max-width:50rem; }
@media(max-width:50rem) { .arrival-hero { grid-template-columns:1fr;gap:1rem;padding-block:1.5rem; } .arrival-hero h1 { font-size:clamp(2.5rem,8vw,4rem); } .arrival-hero .actions { margin-block:1rem; } .hero-scene img { aspect-ratio:8/5;object-fit:cover; } .hero-scene source { display:none; } }
/* Keep the invitation and the complete scene together at the reviewed desktop size. */
@media(min-width:50.01rem) {
  section.arrival-hero { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:2.5rem;padding-block:2.5rem; }
}
.page-heading { padding-block:1.75rem .25rem; }
.page-heading h1 { font-size:clamp(2.25rem,4.5vw,3.5rem);margin-block:.3em; }
#personas:has(.directory-intro) { padding-top:.5rem; }
.directory-intro { margin-block:0 1rem;font-size:1.125rem; }
#personas:has(.directory-intro) .persona-grid { margin-top:1rem; }
.public-update { padding:1rem max(1rem,calc((100vw - var(--content-max))/2));background:var(--sonalon-sage);border-bottom:1px solid var(--sonalon-line);display:flex;gap:1rem;align-items:center;flex-wrap:wrap; }
.public-update p { margin:0; }
.public-update button { font:inherit;cursor:pointer; }
.real-demo-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:start; }
.real-demo-grid .card { padding:1rem; }
.real-demo-grid img { display:block;width:100%;height:auto;border-radius:.4rem; }
.real-demo-grid h3 { font-size:1.25rem; }
@media(max-width:50rem) { .real-demo-grid { grid-template-columns:1fr; } .real-demo-grid figure { max-width:30rem;width:100%;margin-inline:auto; } }