/* Hearth page. Quiet luxury: dark first, hairlines, generous space, one serif accent (the headline). Tokens only; diagrams are inline SVG. */
html{font-size:100%}
.hx{gap:var(--space-9);font-size:.9375rem;font-weight:300;letter-spacing:.005em}
.hx .wide{width:min(64rem,calc(100% - 3rem))}
.hx h1{margin:0;font:300 clamp(2.4rem,6.4vw,4.75rem)/1.04 var(--font-display);letter-spacing:-.04em;max-width:16ch}
.hx h1 em{font:400 1.06em/1 var(--font-serif);font-style:italic;letter-spacing:-.01em;color:var(--accent-text)}
[data-theme="dark"] .hx h1 em{color:var(--ember-300)}
.hx-h2{margin:0;font:300 clamp(1.5rem,3.2vw,2.125rem)/1.15 var(--font-display);letter-spacing:-.025em}
.hx .label{font:500 .6875rem/1.3 var(--font-text);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-subtle)}
.hx-hero,.hx-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);justify-items:start}
.hx-hero>*,.hx-sec>*{min-width:0}
.hx-hero{padding-top:var(--space-6);gap:var(--space-5)}
.hx-lead{max-width:32rem;color:var(--ink-muted);font-size:1.125rem;line-height:1.65;font-weight:300}
.hx-sub{max-width:38rem;color:var(--ink-muted);line-height:1.75}
.hx-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.hx .cs-btn{height:2.75rem;padding:0 var(--space-6);font-weight:400;font-size:.875rem;letter-spacing:.04em}
.hx-note{font:400 .6875rem/1.6 var(--font-data);letter-spacing:.04em;color:var(--ink-subtle);text-transform:none}
.hx-note a,.hx-card2 a,.hx-slide a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.hx-feats{list-style:none;margin:var(--space-3) 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(5,1fr);border-block:1px solid var(--line)}
.hx-feats li{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-3);text-align:center;border-inline-start:1px solid var(--line)}
.hx-feats li:first-child{border-inline-start:0}
.hx-feats svg{width:2.25rem;height:2.25rem;fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.hx-feats b{font:400 .9375rem/1.2 var(--font-display);letter-spacing:.02em}
.hx-feats span{color:var(--ink-subtle);font-size:.8125rem;line-height:1.5}
.hx-cozy{gap:var(--space-4)}
.hx-fig{margin:var(--space-3) 0 0;width:100%;display:grid;gap:var(--space-3);padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-xl)}
.hx-fig svg{width:100%;height:auto;display:block;color:var(--ink)}
.hx-research{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);width:100%;margin-top:var(--space-3)}
.hx-card2{display:grid;align-content:start;gap:var(--space-3);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface-raised)}
.hx-card2 h3{margin:0;font:300 1.5rem/1.2 var(--font-display);letter-spacing:-.02em}
.hx-card2 p{color:var(--ink-muted);line-height:1.7}
.hx-card2 .hx-meta{color:var(--ink-subtle)}
.hx-card2 .hx-fine{font-size:.75rem;color:var(--ink-subtle)}
.hx-card2>a{justify-self:start;font-size:.875rem}
.hx-take{display:grid;gap:var(--space-2);width:100%;padding:var(--space-5) 0 0;border-top:1px solid var(--line);margin-top:var(--space-3)}
.hx-take p:last-child{max-width:44rem;color:var(--ink-muted);line-height:1.75}
.hx-clips{list-style:none;margin:var(--space-3) 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.hx-slide{position:relative;min-width:0}
.hx-more{width:100%}.hx-more summary{cursor:pointer;display:inline-block;margin-top:var(--space-4);padding:.5rem 1.1rem;border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-size:.8125rem;letter-spacing:.04em;list-style:none}
.hx-more summary::-webkit-details-marker{display:none}.hx-more summary:hover{background:var(--surface-sunk)}.hx-more[open] summary{margin-bottom:var(--space-1)}
.hx-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--line)}
.hx-game{display:flex;align-items:center;gap:var(--space-3);font-size:1.125rem;font-weight:300;margin:0}
.hx-game b{font-weight:400}
.hx>.hx-hero,.hx>.hx-sec{animation:rise var(--dur-slow) var(--ease-settle) both}
.nav .brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);transition:color var(--dur-quick) var(--ease-settle)}.nav .brand img{width:28px;height:28px;border-radius:8px;flex:none}.nav a.brand:hover{color:var(--ink)}
@media (max-width:860px){.hx-feats{grid-template-columns:repeat(3,1fr)}.hx-feats li:nth-child(4){border-inline-start:0}.hx-feats li:nth-child(n+4){border-top:1px solid var(--line)}.hx-research{grid-template-columns:1fr}}
@media (max-width:600px){.hx{gap:var(--space-8)}.hx-feats{grid-template-columns:repeat(2,1fr)}.hx-feats li{border-inline-start:0;border-top:1px solid var(--line)}.hx-feats li:nth-child(-n+2){border-top:0}.hx-fig{padding:var(--space-3)}.hx-card2{padding:var(--space-5)}}

.hx-fig{margin:0;width:100%;display:grid;gap:var(--space-3);padding:var(--space-5);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-xl)}
.hx-fig svg{width:100%;height:auto;display:block;color:var(--ink)}
.hx-fig .e path{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-linecap:round}
.hx-fig .n rect{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5}
.hx-fig .n .core{fill:var(--surface-inverse);stroke:none}
.hx-fig text{font-family:var(--font-text);fill:var(--ink)}
.hx-fig .t1{font-size:26px;font-weight:500;letter-spacing:-.02em;fill:#f4f4f4}
.hx-fig .t2{font-size:15px;font-weight:500}
.hx-fig .t3{font-size:12px;font-weight:400;fill:var(--ink-subtle)}
.hx-fig .core ~ .t3{fill:#a3a4ab}
.hx-fig .on{fill:var(--ink)}
.hx-fig .off{fill:none;stroke:var(--ink-subtle);stroke-width:1.5}
.hx-key{display:inline-block;width:.6rem;height:.6rem;margin:0 .4rem 0 1rem;border-radius:50%;border:1.5px solid var(--ink-subtle);vertical-align:-1px}
.hx-key--on{margin-left:0;background:var(--ink);border-color:var(--ink)}
.hx-fig .wall{fill:var(--surface-sunk)}
.hx-fig .floor{fill:var(--line)}
.hx-fig .tv{fill:var(--surface-inverse)}
.hx-fig .sky{fill:var(--ink-muted);opacity:.55}
.hx-fig .sun{fill:var(--surface);opacity:.9}
.hx-fig .b2{fill:var(--ink-muted)}
.hx-fig .b3{fill:var(--ink);opacity:.85}
.hx-fig .road{fill:var(--ink)}
.hx-fig .dash{stroke:var(--surface);stroke-width:3;stroke-dasharray:6 6}
.hx-fig .stand{fill:var(--ink-subtle)}
.hx-fig .couch rect{fill:var(--ink-muted)}
.hx-fig .couch .arm{fill:var(--ink-subtle)}
.hx-fig .p1 circle,.hx-fig .p1 rect{fill:var(--ink)}
.hx-fig .p2 circle,.hx-fig .p2 rect{fill:var(--surface-inverse)}
.hx-fig .pad{fill:var(--surface)!important}

/* lab cards: badges and tags */
.hx-head{display:flex;align-items:center;gap:var(--space-4)}
.hx-badge{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;background:var(--b,var(--ink));color:#fff;font:600 1rem/1 var(--font-display)}
.hx-head h3{margin:2px 0 0}
.hx-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hx-tags li{padding:.25rem .7rem;border:1px solid var(--line-strong);border-radius:var(--radius-pill);font:400 .6875rem/1.3 var(--font-data);letter-spacing:.03em;color:var(--ink-muted)}
/* diagram badges */
.hx-fig .bd{font:600 15px/1 var(--font-display);dominant-baseline:auto}
.hx-fig .bd.s{font-size:12px}
.hx-fig .e path{stroke-opacity:.75;stroke-width:1.75}


.hx-credits{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--space-2) var(--space-6);font-size:.8125rem;width:100%}
.hx-credits a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.hx-credits span{color:var(--ink-subtle);margin-left:.4rem}
.hx-credits span a{margin-right:.35rem;font:400 .75rem/1 var(--font-data)}

/* engine and tools */
.hx-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);width:100%;margin-top:var(--space-3)}
.hx-ico{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;border:1px solid var(--line-strong)}
.hx-ico svg{width:1.4rem;height:1.4rem;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.hx-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.hx-list li{position:relative;padding-left:1.5rem;color:var(--ink-muted);line-height:1.55}
.hx-list li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--ink-subtle)}
.hx-list li.on::before{background:var(--ink);border-color:var(--ink)}
.hx-card2 .hx-fine .hx-key{margin:0 .35rem 0 0;vertical-align:-1px}.hx-card2 .hx-fine .hx-key+*{}
@media (max-width:860px){.hx-duo{grid-template-columns:1fr}}

/* phones: readable list instead of the shrunken diagram */
.hx-archlist{display:none}
.hx-archlist h4{margin:var(--space-5) 0 var(--space-2);font:500 .6875rem/1.3 var(--font-text);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-subtle)}
.hx-archlist ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.hx-archlist li{display:grid;grid-template-columns:2rem 1fr auto;grid-template-rows:auto auto;column-gap:var(--space-3);align-items:center;padding:var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md)}
.hx-archlist i{grid-row:1/3;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;font:600 .875rem/1 var(--font-display);font-style:normal}
.hx-archlist b{font-weight:400;font-size:.9375rem}.hx-archlist span{grid-column:2;color:var(--ink-subtle);font-size:.8125rem;line-height:1.4}
.hx-archlist em{grid-column:3;grid-row:1/3;width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--ink-subtle)}.hx-archlist em.on{background:var(--ink);border-color:var(--ink)}
.hx-core{display:grid;grid-template-columns:1.5rem 1fr;column-gap:var(--space-3);align-items:center;margin:0;padding:var(--space-4);border-radius:var(--radius-lg);background:var(--surface-inverse);color:#f4f4f4}
[data-theme="dark"] .hx-core{background:var(--ink);color:var(--surface)}
.hx-core svg{grid-row:1/3;width:1.5rem;height:1.5rem}.hx-core b{font:400 1.125rem/1.2 var(--font-display)}.hx-core span{grid-column:2;font-size:.8125rem;opacity:.7}
@media (max-width:860px){.hx-clips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.hx-fig>svg{display:none}.hx-archlist{display:block}.hx-clips{grid-template-columns:1fr}}

/* clip frame: the box owns the 16:9 shape, the video only fills it, so no browser can size the card from the video itself */
.hx-frame{position:relative;width:100%;height:0;padding-top:56.25%;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface-inverse);border:1px solid var(--line);box-sizing:content-box;contain:layout paint}
.hx-frame video{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover;background:var(--surface-inverse)}
.hx-n{position:absolute;top:.75rem;left:.9rem;z-index:1;padding:.15rem .5rem;border-radius:var(--radius-pill);background:rgba(8,9,10,.55);color:#f4f4f4;font:400 .6875rem/1.4 var(--font-data);letter-spacing:.06em;pointer-events:none}

/* expression of interest */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hx-eoi{display:grid;gap:var(--space-3);width:min(36rem,100%);margin-top:var(--space-2)}
.hx-eoi-row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hx-eoi input[type=email],.hx-eoi input[type=text]{width:100%;height:2.75rem;padding:0 var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--ink);font:300 .9375rem var(--font-text)}
.hx-eoi input::placeholder{color:var(--ink-subtle)}
.hx-eoi-row input{flex:1 1 14rem;width:auto}
.hx-eoi input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hx-eoi button[disabled]{opacity:.6;cursor:default}
.hx-note.ok{color:var(--ink)}.hx-note.bad{color:var(--accent-text)}
.hx-rd{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);width:100%;margin-top:var(--space-3)}
.hx-rdcard{align-content:start}
.hx-splat{display:block;width:100%;height:auto;border-radius:var(--radius-md)}
@media (max-width:900px){.hx-rd{grid-template-columns:1fr}}

/* hero with the experience list on the side; videos then architecture follow */
.hx-herotxt{display:grid;gap:var(--space-5);justify-items:start;min-width:0}
.hx-side{display:grid;gap:var(--space-3);justify-items:start;width:100%;min-width:0}
.hx-h3{margin:0;font:400 1.25rem/1.25 var(--font-display);letter-spacing:-.01em}
.hx-side .hx-feats{display:grid;grid-template-columns:1fr;margin:var(--space-1) 0 0;border-block:1px solid var(--line)}
.hx-side .hx-feats li{grid-template-columns:2rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--space-3);row-gap:0;justify-items:start;align-items:center;text-align:left;padding:var(--space-3) 0;border-inline-start:0;border-top:1px solid var(--line)}
.hx-side .hx-feats li:first-child{border-top:0}
.hx-side .hx-feats svg{grid-row:1/span 2;width:1.75rem;height:1.75rem}
.hx-side .hx-feats b{grid-column:2;font-size:.9375rem}
.hx-side .hx-feats span{grid-column:2}
@media (min-width:900px){.hx-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:var(--space-8);align-items:center}}
@media (max-width:600px){.hx-side .hx-feats{grid-template-columns:1fr 1fr;column-gap:var(--space-4)}.hx-side .hx-feats li{padding:var(--space-3) 0}.hx-side .hx-feats li:nth-child(2){border-top:0}.hx-side .hx-feats span{display:none}.hx-side .hx-feats li{grid-template-rows:auto}.hx-side .hx-feats svg{grid-row:1}}