/* A. Kamen Studio — v66 "atelier" · Nov 10 2026
   Home rebuilt as: person-led hero → live proof strip → consultation ledger → six method cards → one closing invitation.
   Loaded last. Motion stays behind html.motion (prefers-reduced-motion: no-preference). */

/* ── tokens: readable metal for small text (ivory AA), a mat for screenshots ── */
html,html[data-theme="ivory"]{--metal-text:#875847;--win-mat:#fbf6ee;--win-bar:#f3e9dc}
html[data-theme="emerald"]{--metal-text:var(--metal);--win-mat:color-mix(in srgb,var(--metal) 15%,var(--paper-3));--win-bar:color-mix(in srgb,var(--metal) 14%,var(--paper-3))}
html[data-theme="navy"]{--metal-text:var(--metal);--win-mat:color-mix(in srgb,var(--metal) 15%,var(--paper-3));--win-bar:color-mix(in srgb,var(--metal) 14%,var(--paper-3))}

/* ── small caps: never tiny and faint ── */
.eyebrow,.eyebrow.eyebrow{font-size:11px;letter-spacing:.3em;color:var(--metal-text)}
.tlink,.text-link{font-size:11px;letter-spacing:.26em}
.btn{font-size:11px;letter-spacing:.3em}
.tlink.quiet{color:var(--muted)}
.site-menu a[aria-current="location"]{color:var(--metal-text)}
@media (min-width:1180px){
 .site-menu,.site-menu[hidden]{gap:34px}
 .site-menu a{font-size:11px;letter-spacing:.2em}
 .site-menu a[data-tab="home"]{display:none}
}

/* ── hero: the person and the promise ── */
.at-hero{max-width:1328px;margin:0 auto;padding:76px 56px 132px;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:104px;align-items:center}
.at-copy h1{font-size:70px;line-height:1.0;margin:24px 0 30px;color:var(--ink);max-width:650px;text-wrap:balance}
.at-copy h1 em{color:var(--metal)}
.at-sub{font-family:var(--serif);font-size:23px;line-height:1.48;color:var(--ink-2);max-width:470px;text-wrap:pretty}
.at-ctas{display:flex;gap:36px;align-items:center;flex-wrap:wrap;margin-top:44px}
.at-host{display:none}
.at-portrait{margin:11px}
.at-portrait .vit{--vp:22px}
.at-portrait .win img{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover;object-position:50% 24%}
.at-portrait figcaption{display:flex;flex-direction:column;gap:8px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line-2)}
.at-portrait figcaption b{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink);letter-spacing:.005em}
.at-portrait figcaption span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--metal-text)}

/* ── shared section heads ── */
.at-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:44px}
.at-head h2,.at-ohead h2,.at-close h2{color:var(--ink)}
.at-head h2{font-size:54px}

/* ── live proof: four windows, framed like prints ── */
.at-proof{max-width:1328px;margin:0 auto;padding:0 56px 150px}
.at-strip{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.at-strip a{display:block}
.at-win{background:var(--win-mat);padding:0 7px 7px;box-shadow:0 0 0 1px var(--line),0 34px 60px -46px rgba(40,20,10,.55)}
html:is([data-theme="emerald"],[data-theme="navy"]) .at-win{box-shadow:0 0 0 1px color-mix(in srgb,var(--metal) 38%,transparent),0 34px 60px -40px rgba(0,0,0,.7)}
.at-win .bar{display:flex;align-items:center;gap:5px;height:28px;padding:0 3px;position:relative}
.at-win .bar i{width:6px;height:6px;border-radius:50%;border:1px solid var(--line);flex:none}
.at-win .bar span{position:absolute;left:44px;right:44px;text-align:center;font-size:11px;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-win picture{display:block;overflow:hidden;background:#0b0b0b}
.at-win img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.at-strip .cap{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;margin-top:20px}
.at-strip .cap .n{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--metal)}
.at-strip .cap b{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;color:var(--ink)}
.at-strip .cap .k{grid-column:2;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.at-novel{margin-top:58px;display:flex;align-items:center;gap:22px;justify-content:center}
.at-novel:before,.at-novel:after{content:"";flex:1 1 0;max-width:120px;height:1px;background:var(--line-2)}
.at-novel a{font-family:var(--serif);font-size:21px;color:var(--ink);text-align:center}
.at-novel em{color:var(--metal)}
.at-novel a:hover span{color:var(--metal)}

/* ── consultation ledger ── */
.at-offer{max-width:1328px;margin:0 auto;padding:0 56px 150px;display:grid;grid-template-columns:400px minmax(0,1fr);gap:0 104px;align-items:start}
.at-ohead{position:sticky;top:130px}
.at-ohead h2{font-size:58px}
.at-ohead p{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ink-2);margin-top:26px;max-width:380px;text-wrap:pretty}
.at-ledger{list-style:none;border-top:1px solid var(--line)}
.at-ledger li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 0;padding:30px 0 28px;border-bottom:1px solid var(--line-2);align-items:baseline}
.at-ledger .n{font-family:var(--serif);font-style:italic;font-size:22px;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;justify-self:start;padding-right:3px}
.at-ledger b{font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.15;color:var(--ink)}
.at-ledger .l{grid-column:2;font-size:15px;line-height:1.65;color:var(--muted)}
.at-build{grid-column:2;margin-top:40px;font-family:var(--serif);font-size:23px;line-height:1.45;color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px}
.at-build em{color:var(--metal)}

/* ── method: Alex's six cards, lighter and shorter ── */
.cards{padding-top:0;padding-bottom:150px}
.cd-head{margin-bottom:50px}
.card{min-height:0;padding:32px 34px 34px}
.cmark{height:136px;margin:16px 0 6px}
.cmark .medal{width:112px;height:112px}
.cmark .em{width:64px;height:64px}
.cmark .me-chip{width:86px;height:86px}
.cd-foot{margin-top:52px}

/* ── closing invitation ── */
.at-close{max-width:1328px;margin:0 auto;padding:30px 56px 160px;text-align:center}
.at-close .seal{width:44px;height:44px;margin:0 auto;filter:var(--seal-f)}
.at-close h2{font-size:60px;margin:26px auto 42px;max-width:820px}
.at-close .at-ctas{justify-content:center;margin-top:0}

/* ── footer & About links ── */
.at-foot{border-top:0}
.at-foot .at-place{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.at-foot .at-li{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .6s var(--e)}
.at-foot .at-li:hover{color:var(--metal-text)}
.about-more{display:flex;gap:30px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line-2)}
.about-more a{font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.about-more a:hover{color:var(--metal-text)}

/* ── motion: one quiet idea per element ── */
@media (prefers-reduced-motion:no-preference){
 html.motion .at-portrait .vit{animation:framein 1.6s var(--e) .35s both}
 html.motion .at-portrait .win img{animation:settle 3.2s var(--e-settle) .5s both}
 html.motion .at-portrait figcaption{animation:veil 1.4s var(--e) 1.3s both}
 html.motion .at-strip a .at-win{transition:transform 1s var(--e),box-shadow 1s var(--e)}
 html.motion .at-strip a img{transition:transform 1.8s var(--e-slow)}
 html.motion .at-strip a:hover .at-win{transform:translateY(-5px)}
 html.motion .at-strip a:hover img{transform:scale(1.025)}
 html.motion .at-ledger li{background:linear-gradient(var(--metal),var(--metal)) 0 100%/0 1px no-repeat;transition:opacity 1.4s var(--e) var(--d,0s),transform 1.8s var(--e) var(--d,0s),background-size 1.6s var(--e-slow) calc(var(--d,0s) + .3s)}
 html.motion .at-ledger li.in{background-size:72px 1px}
}
.at-strip a:hover b{color:var(--metal)}
.at-strip a:focus-visible{outline:1px solid var(--metal);outline-offset:8px}

/* ── tablet ── */
@media (max-width:1179px){
 .at-hero{grid-template-columns:minmax(0,1fr) 340px;gap:56px;padding:56px 32px 110px}
 .at-copy h1{font-size:56px}
 .at-sub{font-size:21px}
 .at-proof,.at-offer,.at-close{padding-left:32px;padding-right:32px}
 .at-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
 .at-offer{grid-template-columns:1fr;gap:40px}
 .at-ohead{position:static}
 .at-build{grid-column:1}
}
/* ── phone ── */
@media (max-width:820px){
 .at-hero{grid-template-columns:minmax(0,1fr);gap:0;padding:34px 20px 78px}
 .at-portrait{display:none}
 .at-copy h1{font-size:43px;line-height:1.03;margin:16px 0 20px}
 .at-sub{font-size:19.5px;line-height:1.5}
 .at-ctas{gap:24px 28px;margin-top:32px}
 .at-host{display:flex;align-items:center;gap:15px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line-2)}
 .at-host img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--line)}
 .at-host span{display:flex;flex-direction:column;gap:5px}
 .at-host b{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--ink);line-height:1.1}
 .at-host i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--metal-text);line-height:1.5}
 .at-head{margin-bottom:28px;padding-bottom:18px}
 .at-head h2{font-size:38px}
 .at-proof{padding:0 20px 86px}
 .at-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:8px 20px 22px;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .at-strip::-webkit-scrollbar{display:none}
 .at-strip li{flex:0 0 82%;scroll-snap-align:start}
 .at-win{padding:0 5px 5px}
 .at-win .bar{height:24px}
 .at-win .bar span{font-size:11px}
 .at-strip .cap{margin-top:16px}
 .at-strip .cap b{font-size:20px}
 .at-novel{margin-top:30px;gap:14px}
 .at-novel:before,.at-novel:after{max-width:36px}
 .at-novel a{font-size:18px}
 .at-offer{padding:0 20px 86px;gap:30px}
 .at-ohead h2{font-size:42px}
 .at-ohead p{font-size:19px;margin-top:18px}
 .at-ledger li{grid-template-columns:44px minmax(0,1fr);padding:22px 0 20px}
 .at-ledger .n{font-size:19px}
 .at-ledger b{font-size:23px}
 .at-ledger .l{font-size:14.5px}
 .at-build{font-size:20px;margin-top:28px;flex-direction:column;gap:16px}
 html.motion .at-ledger li.in{background-size:44px 1px}
 /* the six cards, compact: medal beside the words */
 .cards{padding-bottom:86px}
 .cd-head{margin-bottom:28px}
 .deck{gap:14px}
 .card{display:grid;grid-template-columns:70px minmax(0,1fr);grid-template-areas:"top top" "mark h" "mark p";column-gap:18px;align-items:start;padding:20px 22px 22px}
 .card .ctop{grid-area:top;padding-bottom:8px;margin-bottom:14px}
 .ctop .num{font-size:24px}
 .card .cmark{grid-area:mark;height:auto;margin:2px 0 0}
 .cmark .medal{width:66px;height:66px}
 .cmark .medal:before{inset:-4px}
 .cmark .medal:after{inset:3px}
 .cmark .em{width:36px;height:36px}
 .cmark .me-chip{width:50px;height:50px;box-shadow:0 0 0 2px var(--ivory),0 0 0 3px var(--metal)}
 .card h3{grid-area:h;text-align:left;font-size:21px;line-height:1.18}
 .card .orn{display:none}
 .card p{grid-area:p;text-align:left;margin-top:6px;font-size:14px;line-height:1.6}
 .cd-foot{margin-top:30px}
 .at-close{padding:10px 20px 96px}
 .at-close h2{font-size:40px;margin:20px auto 32px}
 .at-close .at-ctas{flex-direction:column;gap:22px}
 .at-foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 22px}
 .at-foot .studio-credit{flex-basis:100%}
}
@media (max-width:380px){.at-copy h1{font-size:38px}.at-ohead h2,.at-close h2{font-size:36px}}
/* v67: longer hero eyebrow must not orphan LEAD on phones */
@media (max-width:413px){.at-copy .eyebrow{letter-spacing:.2em}}
/* r2 */
.at-hero{padding-bottom:112px}
.at-portrait figcaption span{letter-spacing:.14em}
@media (max-width:820px){
 .at-head{flex-direction:column;align-items:flex-start;gap:14px}
 .at-head h2{font-size:40px}
 .at-win img{aspect-ratio:4/5}
 .at-novel:before,.at-novel:after{display:none}
 .at-host span{gap:3px}
}
#how-i-work{scroll-margin-top:14px}
@media (max-width:820px){#how-i-work{scroll-margin-top:6px}.at-build span{text-wrap:balance}}
/* r3: phone swipe hairline; tablet-size windows */
.at-track{display:none}
@media (max-width:820px){
 .at-track{display:block;position:relative;height:1px;background:var(--line-2);margin:6px 0 0;overflow:hidden}
 .at-track i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--vis,.3)*100%);background:var(--metal);transform:translateX(calc(var(--p,0)*(1/var(--vis,.3) - 1)*100%));transition:transform .25s linear}
}
@media (min-width:560px) and (max-width:820px){.at-strip li{flex-basis:46%}}

@media (prefers-reduced-motion:reduce){.at-track i{transition:none}}
@media (prefers-reduced-motion:no-preference){html.motion .at-portrait .win img{animation:settle 2.4s var(--e-settle) .3s both}}
/* r4: Selected Work plates get the same lighter mat in the dark palettes (no dark holes) */
html:is([data-theme="emerald"],[data-theme="navy"]) .plate .vit{background:color-mix(in srgb,var(--metal) 15%,var(--paper-3));box-shadow:0 0 0 1px color-mix(in srgb,var(--metal) 38%,transparent),0 0 0 10px var(--paper),0 0 0 11px var(--line),var(--shadow)}
html:is([data-theme="emerald"],[data-theme="navy"]) .plate .vit:before{border-color:color-mix(in srgb,var(--metal) 30%,transparent)}
@media (max-width:820px){html:is([data-theme="emerald"],[data-theme="navy"]) .plate .vit{box-shadow:0 0 0 1px color-mix(in srgb,var(--metal) 38%,transparent),0 0 0 6px var(--paper),0 0 0 7px var(--line),var(--shadow)}}
/* r5: AA for every metal word under 24 px in ivory */
.at-novel em,.at-build em,.at-strip .cap .n,.at-strip a:hover b,.at-novel a:hover span,.cd-foot b{color:var(--metal-text)}
/* r6: the hero italic as rose-gold leaf (large text, ≥3:1 at its lightest) */
html,html[data-theme="ivory"]{--leaf:linear-gradient(100deg,#8a5a49 0%,#a06c58 30%,#b07a64 46%,#93604d 64%,#7e5040 100%)}
html[data-theme="emerald"],html[data-theme="navy"]{--leaf:linear-gradient(100deg,#b8954f 0%,#d9bd7f 32%,#f0dfb0 47%,#cdac68 64%,#b08d4a 100%)}
.at-copy h1 em{background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-right:.04em}
/* r7: the first screen fits short laptop screens (portrait scales with viewport height) */
@media (min-width:1180px){.at-hero{grid-template-columns:minmax(0,1fr) min(430px,max(330px,calc((100vh - 300px)*.8)));padding-top:clamp(40px,7vh,76px)}}
@media (min-width:821px) and (max-width:1179px){.at-hero{grid-template-columns:minmax(0,1fr) min(340px,max(280px,calc((100vh - 300px)*.75)))}}
@media (min-width:600px) and (max-width:820px){.at-hero{padding:56px 40px 90px}.at-copy h1{font-size:58px}.at-sub{font-size:21px;max-width:520px}.at-proof,.at-offer,.cards,.at-close{padding-left:40px;padding-right:40px}.at-strip{margin:0 -40px;padding-left:40px;padding-right:40px;scroll-padding:0 40px}}
/* r8: route changes dissolve instead of cutting; window bars warm on hover */
@media (prefers-reduced-motion:no-preference){
 html.motion.routed main>.tab:not([hidden]){animation:veil .7s var(--e) both}
 html.motion .at-win .bar i{transition:background-color .8s var(--e),border-color .8s var(--e)}
}
.at-strip a:hover .bar i,.at-strip a:focus-visible .bar i{background:var(--metal);border-color:var(--metal)}

/* v70 — Legal: quiet, readable fine print */
.legal-page{max-width:900px}
.legal-page h1{margin-bottom:40px}
.legal-idx{display:flex;flex-wrap:wrap;gap:12px 30px;padding:18px 0;border-top:1px solid var(--line-2,var(--line));border-bottom:1px solid var(--line-2,var(--line))}
.legal-idx a,.legal-updated,.legal-doc h3,.at-foot .at-legal,.at-foot .at-copy{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.legal-idx a{color:var(--muted);transition:color .6s var(--e)}
.legal-idx a:hover,.legal-idx a:focus-visible{color:var(--metal-text)}
.legal-updated{color:var(--metal-text);margin:26px 0 8px}
.legal-doc{scroll-margin-top:96px;padding:56px 0 8px;border-bottom:1px solid var(--line-2,var(--line))}
.legal-doc:last-of-type{border-bottom:0}
.legal-doc h2{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.1;color:var(--ink);margin:0 0 30px}
.legal-doc h2 em{color:var(--metal-text)}
.legal-doc h3{color:var(--metal-text);margin:30px 0 10px;letter-spacing:.2em}
.legal-doc p{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink-2);margin:0 0 14px;max-width:68ch}
.legal-doc p.caps{font-size:17px;font-variant:small-caps;letter-spacing:.01em}
.legal-doc a,.form-privacy a{color:var(--metal-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-copy{margin-top:48px;padding-top:22px;border-top:1px solid var(--line-2,var(--line));font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted)}
.form-privacy{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.at-foot .at-legal{color:var(--muted);transition:color .6s var(--e)}
.at-foot .at-legal:hover,.at-foot .at-legal:focus-visible{color:var(--metal-text)}
.at-foot .at-copy{color:var(--muted);letter-spacing:.14em;font-size:10px;text-transform:none}
@media (max-width:820px){.legal-doc h2{font-size:34px}.legal-doc p{font-size:17.5px}.legal-doc p.caps{font-size:16px}.legal-doc{scroll-margin-top:76px;padding-top:42px}.legal-idx{gap:10px 22px}}