/* Current v2.1 artwork. Keep supplied viewBoxes and aspect ratios intact. */
.brand-art,.footer-crest,.king-introduction,.king-story{display:block;object-fit:contain;aspect-ratio:1;height:auto}
.brand-emblem .brand-art{width:100%;height:100%}
header .wordmark{display:inline-flex;align-items:center;gap:10px}
header .wordmark .brand-art{width:38px;flex:none}
footer .wordmark{display:flex;align-items:center;gap:12px}
footer .wordmark .brand-art{width:44px;flex:none}
footer>.brand{display:flex;align-items:center;gap:16px}
.footer-crest{width:88px;flex:none}
.hero-orbit .brand-art{width:100%;height:100%;opacity:.065}
.chapter-watermark .brand-art{width:100%;height:100%}
.poker-introduction-heading>.suit-mark{display:none}
.king-introduction{width:clamp(130px,13vw,190px);margin:0 0 22px -12px}
.why-company .king-story{position:absolute;left:var(--gutter);bottom:150px;width:min(28vw,350px)}
.dialog-aside .application-seal{width:190px;height:190px;margin:-12px 0 0 -18px;flex:none}
.application-seal .brand-art{width:100%;height:100%}
.dialog-aside>p{font-size:46px}
/* Wreath and chip resolve separately without changing the approved geometry. */
.intro-seal{width:310px;height:310px;margin-bottom:18px}
.intro-seal .opening-crest{width:100%;height:100%;overflow:visible}
.intro-pending .crest-frame{animation:crest-arrive 1.5s .3s cubic-bezier(.22,1,.36,1) both;transform-origin:512px 512px}
.intro-pending .crest-chip{animation:crest-arrive 1.1s 1.15s cubic-bezier(.22,1,.36,1) both;transform-origin:512px 512px}
@keyframes crest-arrive{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.table-chip{opacity:1}
@media(max-width:760px){
 .intro-seal{width:250px;height:250px;margin-bottom:16px}
 .king-introduction{width:136px;margin-bottom:18px;margin-left:-9px}
 .why-company .king-story{position:static;width:180px;margin:36px 0 0 -12px}
 .why-company .company-line{margin-top:35px}
 .footer-crest{width:70px}
 header .wordmark .brand-art{width:30px}
 header .wordmark{gap:8px}
}
@media(max-height:620px){.intro-seal{width:180px;height:180px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.crest-frame,.crest-chip,.table-chip{animation:none!important;opacity:1!important;transform:none!important}}

.company-art.has-entered .table-chip{animation:table-chip-arrive .85s cubic-bezier(.22,1,.36,1) both;transform-origin:160px 120px}
@keyframes table-chip-arrive{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
body.motion-paused .company-art .table-chip{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.company-art.has-entered .table-chip{animation:none!important}}
/* A real grid keeps the illustration clear of story copy at tablet widths. */
@media(min-width:761px){
 .why-company{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:7vw}
 .why-company>.small-label,.why-company>h2,.why-company>.company-line{grid-column:1/-1}
 .why-company>.story-body{grid-column:2;grid-row:3;width:100%;margin:55px 0 0}
 .why-company .king-story{position:static;grid-column:1;grid-row:3;align-self:center;width:min(100%,300px);margin-top:55px}
}
/* Revision 2: legible small marks, visible footer, sequential assembly. */
body>header .brand-emblem{width:56px;height:56px;overflow:visible}
body>header .brand-emblem .brand-art{width:100%;height:100%;transform:scale(1.18);transform-origin:center}
header .wordmark .brand-art{width:46px;transform:scale(1.12)}
body>header .brand{gap:13px}
footer .footer-crest{width:112px;height:112px;object-fit:contain}
footer .legal-links{display:flex;gap:24px;grid-column:1/-1;flex-wrap:wrap;font-size:12px;justify-content:flex-start}
.intro-pending .crest-chip{animation:crest-step .65s .15s cubic-bezier(.22,1,.36,1) both}
.intro-pending .crest-wreath{animation:wreath-build 1.15s 1.4s cubic-bezier(.22,1,.36,1) both}
.intro-pending .crest-crown{animation:crest-step .65s 2.8s cubic-bezier(.22,1,.36,1) both}
@keyframes crest-step{from{opacity:0}to{opacity:1}}
@keyframes wreath-build{from{clip-path:inset(100% 0 0);opacity:0}15%{opacity:1}to{clip-path:inset(0);opacity:1}}
.intro-name span{animation-duration:.55s;animation-delay:calc(3.5s + var(--i)*.045s)}
.intro-place{animation-duration:.6s;animation-delay:4.2s}
.intro-pending .intro-status>span{animation:intro-status-beat 1.3s calc(.1s + var(--beat)*1.3s) cubic-bezier(.22,1,.36,1) both}
.intro-pending .intro-status>.intro-status-final{animation:intro-status-last .45s 4.1s cubic-bezier(.22,1,.36,1) both}
.intro-pending .brand-intro{animation-delay:5.2s}
@media(max-width:760px){
 body>header .brand-emblem{width:42px;height:42px;flex:none}
 body>header .brand{gap:10px;font-size:23px}
 header .wordmark .brand-art{width:36px}
 footer .footer-crest{width:96px;height:96px}
}
@media(max-width:350px){body>header .brand{font-size:21px;gap:8px}body>header .brand-emblem{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.crest-wreath,.crest-crown,.crest-chip{animation:none!important;transform:none!important;opacity:1!important;clip-path:none}}
/* Each completed piece advances one dot: chip → wreath → crown. */
.intro-progress{display:flex;gap:9px;position:absolute;top:-4px;left:50%;transform:translateX(-50%)}
.intro-progress i{width:5px;height:5px;border:1px solid #f0f0e980;border-radius:50%}
.intro-pending .intro-progress i{animation:progress-fill .2s .8s both}
.intro-pending .intro-progress i:nth-child(2){animation-delay:2.5s}
.intro-pending .intro-progress i:nth-child(3){animation-delay:3.5s}
@keyframes progress-fill{from{background:transparent}to{background:#f0f0e9}}
.intro-pending .crest-chip{animation:chip-settle .7s .15s cubic-bezier(.22,1,.36,1) both;transform-origin:512px 512px}
@keyframes chip-settle{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:none}}
.intro-pending .crest-wreath{animation:none}
.intro-pending .crest-wreath-left{animation:wreath-left .8s 1.35s cubic-bezier(.22,1,.36,1) both}
.intro-pending .crest-wreath-right{animation:wreath-right .8s 1.55s cubic-bezier(.22,1,.36,1) both}
.intro-pending .crest-wreath-base{animation:crest-step .5s 1.9s both}
.intro-pending .crest-crown{animation:crown-land .7s 2.8s cubic-bezier(.22,1,.36,1) both}
@keyframes wreath-left{from{opacity:0;transform:translateX(-95px)}to{opacity:1;transform:none}}
@keyframes wreath-right{from{opacity:0;transform:translateX(95px)}to{opacity:1;transform:none}}
@keyframes crown-land{from{opacity:0;transform:translateY(-65px)}to{opacity:1;transform:none}}
.legal-page{max-width:780px;margin:0 auto;padding:70px 0 110px}
.legal-page h1{font-size:clamp(44px,6vw,78px);line-height:1.1;margin:20px 0 28px}
.legal-page h2{font-size:30px;margin:38px 0 14px}
.legal-page p{max-width:none;line-height:1.75;margin:14px 0}
.legal-page .lead{font-size:23px;line-height:1.5}
@media(max-width:760px){.legal-page{padding:38px 0 70px}.legal-page h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.crest-wreath-left,.crest-wreath-right,.crest-wreath-base,.crest-crown,.crest-chip,.intro-progress i{animation:none!important;opacity:1!important;transform:none!important}}
@media(max-width:760px){.editorial footer .wordmark{flex-direction:column;align-items:flex-start;gap:8px;white-space:normal}.editorial footer .footer-crest{margin-left:-14px}.editorial footer{grid-template-columns:minmax(0,1fr)}}

/* Legible, consistent navigation with explicit page destinations. */
body>header nav{gap:24px}
body>header nav>a,body>header nav>button{font-size:15px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
body>header nav [aria-current="page"]{font-weight:600;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
@media(min-width:761px) and (max-width:1150px){
 body>header{height:auto;min-height:82px;flex-wrap:wrap;gap:18px}
 body>header nav{width:100%;justify-content:space-between;gap:14px}
}
@media(max-width:760px){
 body.pacific>header nav>a,body.pacific>header nav>button{font-size:16px}
 body.pacific>header nav{gap:0}
 body.editorial>header nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;width:100%}
 body.editorial>header nav>a{font-size:14px;white-space:normal}
 body.editorial>header nav .apply-link{justify-self:start}
}

/* Editorial navigation polish: a distinct application action and quiet feedback. */
body>header nav>button[data-apply],body>header nav>.apply-link{
 background:var(--ink);color:var(--paper);border:0;border-radius:999px;
 padding:12px 22px;justify-content:center;line-height:1.25;text-decoration:none;
 transition:background .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
}
body>header nav>button[data-apply]:hover,body>header nav>.apply-link:hover{background:#27554a}
body>header nav>button[data-apply]:active,body>header nav>.apply-link:active{transform:scale(.98)}
body>header nav>a:not(.apply-link){transition:color .22s cubic-bezier(.22,1,.36,1)}
body>header nav>a:not(.apply-link):hover{text-decoration:underline;text-underline-offset:7px}
@media(max-width:760px){
 body.pacific>header.menu-open nav{animation:navigation-arrive .22s cubic-bezier(.22,1,.36,1) both}
 body.pacific>header nav>button[data-apply]{margin-top:16px;min-height:48px}
 body.editorial>header nav>.apply-link{padding:12px 18px}
}
@keyframes navigation-arrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body.pacific>header.menu-open nav{animation:none}body>header nav>a,body>header nav>button{transition:none}}

/* Same persistent mobile header and menu on every public page. */
body.editorial>header .menu-toggle{display:none}
@media(max-width:760px){
 html{scroll-padding-top:90px}
 body.pacific>header,body.editorial>header{position:sticky;top:0;z-index:20;background:var(--paper);height:72px;padding:0 22px;display:flex;flex-wrap:nowrap;gap:12px;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
 body.editorial>header .wordmark{font-size:23px;gap:8px;letter-spacing:-.04em}
 body.editorial>header .wordmark .brand-art{width:38px;flex-shrink:0}
 body>header .menu-toggle{display:block;margin-left:auto;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--hair);padding:10px 0;min-height:44px;font:14px var(--sans);cursor:pointer}
 body.pacific>header nav,body.editorial>header nav{display:none;position:absolute;top:100%;left:0;right:0;width:100%;margin:0;padding:16px 22px 24px;max-height:calc(100dvh - 72px);overflow-y:auto;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--hair);box-shadow:0 18px 32px -24px #143c3433;gap:0;align-items:stretch}
 body.pacific>header.menu-open nav,body.editorial>header.menu-open nav{display:flex;flex-direction:column}
 body>header nav>a,body.editorial>header nav>a{display:flex;font-size:16px;padding:13px 0;min-height:48px;white-space:normal}
 body>header nav>.apply-link{margin-top:16px;align-self:stretch;justify-self:auto;padding:14px 22px}
 body.pacific:not(.why-page) .hero{height:calc(100svh - 72px)}
}
@media(max-width:760px){body.editorial>header .menu-toggle{display:block}}

/* Keep desktop navigation available, with room for anchor destinations below it. */
@media(min-width:761px){
 body.pacific>header,body.editorial>header{position:sticky;top:0;z-index:20;background:var(--paper)}
 html{scroll-padding-top:var(--header-anchor-offset,110px)}
 body.editorial aside{top:var(--header-anchor-offset,110px)}
}
