/* Hallmark · genre: editorial · macrostructure: Letter · theme: locked EPHYON pink-and-gold · enrichment: first-party production image · nav: existing N10 · footer: existing corporate footer
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34,49–57)
 */
html,body{overflow-x:clip}.join-page{background:var(--color-paper);color:var(--color-ink)}.join-page>article{max-width:96rem;margin-inline:auto}.join-letter-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(var(--space-5),7vw,var(--space-7));align-items:end;padding:clamp(var(--space-6),9vw,var(--space-8)) clamp(var(--space-3),6vw,var(--space-7)) var(--space-7)}.join-letter-copy{display:grid;gap:var(--space-4);min-width:0}.join-kicker,.join-directions>header>p,.join-values>div>p{margin:0;color:var(--color-gold-deep);font-size:var(--text-sm);font-weight:800;letter-spacing:.12em}.join-letter-hero h1{max-width:10ch;margin:0;font:750 clamp(3.3rem,6vw,6.4rem)/.96 var(--font-display);letter-spacing:-.06em;overflow-wrap:anywhere}.join-letter-body{display:grid;gap:var(--space-3);max-width:58ch}.join-letter-body p{margin:0;font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.75}.join-letter-hero figure{display:grid;gap:var(--space-2);margin:0}.join-letter-hero img{width:100%;height:clamp(22rem,42vw,38rem);object-fit:cover;object-position:center}.join-letter-hero figcaption{max-width:54ch;color:var(--color-muted);font-size:var(--text-sm);line-height:1.6}.join-directions{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(var(--space-5),8vw,var(--space-8));padding:var(--space-7) clamp(var(--space-3),6vw,var(--space-7));border-top:1px solid var(--color-rule)}.join-directions>header{display:grid;align-content:start;gap:var(--space-3);min-width:0}.join-directions h2,.join-values h2,.join-close h2{margin:0;font:750 var(--text-module)/1.06 var(--font-display);letter-spacing:-.045em;overflow-wrap:anywhere}.join-directions ol{display:grid;margin:0;padding:0;list-style:none}.join-directions li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--space-3);padding:var(--space-4) 0;border-top:1px solid var(--color-rule)}.join-directions li:first-child{border-top-color:var(--color-gold-line)}.join-directions li>span{color:var(--color-gold-deep);font-size:var(--text-sm);font-weight:800;font-variant-numeric:tabular-nums}.join-directions h3{margin:0 0 var(--space-2);font:750 var(--text-submodule)/1.1 var(--font-display);letter-spacing:-.035em}.join-directions li p{max-width:58ch;margin:0;color:var(--color-ink-2);font-size:var(--text-base);line-height:1.7}.join-values{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(var(--space-5),9vw,var(--space-8));padding:var(--space-7) clamp(var(--space-3),6vw,var(--space-7));background:var(--color-gold-soft)}.join-values>div{display:grid;align-content:start;gap:var(--space-3);min-width:0}.join-values ul{display:grid;margin:0;padding:0;list-style:none}.join-values li{padding:var(--space-3) 0;border-bottom:1px solid color-mix(in oklch,var(--color-gold-deep),transparent 62%);font-size:clamp(1rem,1.5vw,1.25rem);font-weight:700}.join-values li::before{content:'—';margin-inline-end:var(--space-2);color:var(--color-gold-deep)}.join-close{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);gap:clamp(var(--space-5),9vw,var(--space-8));align-items:end;padding:var(--space-7) clamp(var(--space-3),6vw,var(--space-7));border-bottom:1px solid var(--color-rule)}.join-close>div{display:grid;gap:var(--space-3)}.join-close p{max-width:58ch;margin:0;line-height:1.75}.join-close a,.join-next a{width:max-content;color:var(--color-gold-deep);font-weight:800;text-decoration-thickness:1px;text-underline-offset:.35em;transition:color var(--dur-fast) var(--ease-out)}.join-close a:hover,.join-next a:hover{color:var(--color-pink-deep)}.join-close a:active,.join-next a:active{transform:translateY(1px)}.join-close a:focus-visible,.join-next a:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.join-close>div:last-child{justify-self:end}.join-close>div:last-child p{color:var(--color-muted);font-size:var(--text-sm)}.join-next{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) clamp(var(--space-3),6vw,var(--space-7)) var(--space-7)}html[lang^="zh"] .join-letter-hero h1,html[lang^="zh"] .join-directions h2,html[lang^="zh"] .join-values h2,html[lang^="zh"] .join-close h2,html[lang^="zh"] .join-directions h3{font-family:var(--font-zh);letter-spacing:var(--letter-zh-heading)}html[lang^="zh"] .join-letter-hero h1{max-width:9ch;font-size:var(--text-zh-hero);line-height:1.08}@media(max-width:60rem){.join-letter-hero,.join-directions,.join-values,.join-close{grid-template-columns:minmax(0,1fr)}.join-letter-hero{align-items:start}.join-letter-hero figure{grid-row:1}.join-letter-hero img{height:min(62vw,30rem)}.join-close>div:last-child{justify-self:start}}@media(max-width:40rem){.join-letter-hero,.join-directions,.join-values,.join-close{padding-inline:var(--space-3)}.join-letter-hero{padding-block:var(--space-5)}.join-letter-hero h1{font-size:clamp(2.7rem,12vw,4rem)}.join-letter-hero img{height:62vw;min-height:14rem}.join-directions,.join-values,.join-close{padding-block:var(--space-6)}.join-directions li{grid-template-columns:2.3rem minmax(0,1fr)}.join-next{display:grid;padding-inline:var(--space-3)}.join-next a{min-height:44px;display:flex;align-items:center}}@media(prefers-reduced-motion:reduce){.join-close a,.join-next a{transition:none}}