/* kraimerstudios.com — shared styles. Palette and type are locked (see CLAUDE.md, Visual system). */
:root{--paper:#EFE9DE;--ink:#111110;--body:#4A4740;--muted:#6E6A63;--bronze:#8C7A5E;--dark:#0A0A0A;
  --rule:rgba(17,17,16,.1);--rule-2:rgba(17,17,16,.22);--serif:'Cormorant Garamond',Georgia,serif;--sans:Archivo,system-ui,sans-serif;
  --gutter:clamp(1.25rem,5vw,4rem)}
html{font-size:clamp(16px,0.268vw + 12.14px,19px)}
html,body{margin:0;padding:0}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--bronze)}
button{font-family:inherit;cursor:pointer;color:var(--ink)}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid var(--bronze);outline-offset:3px}
em{font-style:italic}

/* page-to-page crossfade: paper overlay fades out on load, back in on a link click (site.js) */
.fader{position:fixed;inset:0;z-index:401;background:var(--paper);pointer-events:none;opacity:1;transition:opacity .62s cubic-bezier(.33,0,.2,1)}
.fader.out{opacity:0}
@media (prefers-reduced-motion:reduce){.fader{display:none}}

/* type */
.display{font-family:var(--serif);font-weight:300;line-height:1.08;letter-spacing:-.015em}
.eyebrow{display:block;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze)}
.label{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.body{font-size:.94rem;line-height:1.85;color:var(--body);text-wrap:pretty}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;padding:1.05rem 2.4rem;border:1px solid var(--ink);transition:all .45s cubic-bezier(.2,.7,.3,1)}
.btn:hover{background:transparent;color:var(--ink)}
.btn-block{display:block;text-align:center;padding:1.15rem 1.6rem}

/* nav */
.nav{display:flex;align-items:center;gap:clamp(.5rem,2vw,1.5rem);padding:clamp(1rem,3vw,1.4rem) clamp(.9rem,4vw,3rem);background:var(--paper);border-bottom:1px solid var(--rule);position:relative;z-index:30}
.nav-side{display:flex;gap:clamp(.7rem,2vw,1.8rem);align-items:center;flex:1 1 0;white-space:nowrap}
.nav-right{justify-content:flex-end}
.nav-side a,.nav-side span{font-size:clamp(.56rem,1.7vw,.74rem);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.nav-side a:hover{color:var(--ink)}
.nav-side [aria-current]{color:var(--ink)}
.nav-inquire.nav-inquire{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.nav-mark{flex:0 0 auto;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(.72rem,2.6vw,1.34rem);letter-spacing:clamp(.1em,.5vw,.26em);text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.dd{position:relative}
.dd>span{display:block;cursor:default}
.dd-panel{position:absolute;top:100%;left:0;z-index:60;padding-top:.9rem;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible}
.dd-panel>a{display:block;background:var(--paper);padding:.62rem 1.1rem;font-size:.68rem;min-width:170px;border-left:1px solid rgba(17,17,16,.14);border-right:1px solid rgba(17,17,16,.14)}
.dd-panel>a:first-child{border-top:1px solid rgba(17,17,16,.14);padding-top:1.1rem}
.dd-panel>a:last-child{border-bottom:1px solid rgba(17,17,16,.14);padding-bottom:1.1rem;box-shadow:0 18px 40px rgba(17,17,16,.12)}
.dd-panel>a:hover{color:var(--ink);background:#E7E0D2}
.nav-burger{display:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;padding:.35rem 0;flex-direction:column;gap:5px;width:26px;margin-left:auto;order:3}
.nav-burger span{display:block;height:1px;width:22px;background:currentColor}
.nav-burger span:last-child{width:14px}
.nav-panel{position:fixed;inset:0;z-index:120;background:var(--paper)}
.nav-panel[hidden]{display:none}
.nav-panel-head{display:flex;align-items:center;justify-content:space-between;padding:clamp(1rem,3vw,1.4rem) clamp(1.1rem,4vw,3rem);border-bottom:1px solid rgba(17,17,16,.12)}
.nav-panel-head a{font-family:var(--serif);font-weight:400;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase}
.nav-close{background:transparent;border:0;-webkit-appearance:none;appearance:none;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);padding:0}
.nav-panel-links{display:flex;flex-direction:column;padding:clamp(1.4rem,5vh,2.6rem) clamp(1.1rem,4vw,3rem);gap:1.3rem}
.nav-panel-links a{font-family:var(--serif);font-weight:300;font-size:1.9rem;line-height:1.1}
.nav-panel-links a.sub{padding-left:1.1rem}
.nav-panel-links a.ig{margin-top:.6rem;font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
@media (max-width:699px){
  .nav-side{display:none}
  .nav-burger{display:flex}
  .nav-mark{flex:1 1 0;margin-left:26px}
}

/* contact block (every page) */
.contact{background:var(--paper);border-top:1px solid rgba(17,17,16,.14);padding:clamp(3.5rem,9vh,6rem) var(--gutter)}
.contact-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(2.5rem,5vw,5rem);align-items:start}
.contact-title{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:normal;margin:1.1rem 0 0;max-width:20ch}
.contact .body{margin:1.3rem 0 0;max-width:42ch}
.contact .contact-call{margin:1.1rem 0 1.4rem;max-width:38ch}
.contact-rows{display:grid;gap:1.2rem;margin-top:clamp(1.8rem,4vh,2.6rem)}
.contact-rows>div{border-top:1px solid rgba(17,17,16,.12);padding-top:.9rem}
.contact-rows .value{font-family:var(--serif);font-size:1.15rem;margin-top:.35rem}
.contact .btn{margin-top:clamp(1.8rem,4vh,2.6rem)}
.cal-frame{border-top:1px solid rgba(17,17,16,.14);padding-top:.6rem;margin:0 -.75rem}
.cal-frame iframe{border:0;display:block;mix-blend-mode:multiply;background:transparent}
.cal-btn{display:none;border-top:1px solid rgba(17,17,16,.14);padding-top:1.4rem}
.cal-note{font-size:.78rem;line-height:1.7;color:var(--muted);margin-top:.9rem}
@media (max-width:699px){.cal-frame{display:none}.cal-btn{display:block}}

/* footer */
.footer{background:var(--dark);overflow:hidden}
.footer-cta{padding:clamp(3.5rem,8vh,6rem) var(--gutter) clamp(2.5rem,6vh,4rem);text-align:center;border-top:1px solid rgba(239,233,222,.1)}
.footer-cta h2{font-size:clamp(1.8rem,4.6vw,3.4rem);line-height:1.15;margin:0 auto;max-width:22ch;color:var(--paper)}
.footer-mail{margin-top:1.6rem;font-size:.8rem;color:rgba(239,233,222,.55)}
.footer-mail a{color:rgba(239,233,222,.75);border-bottom:1px solid rgba(239,233,222,.3)}
.footer-start{display:inline-block;margin-top:2.2rem;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--paper);border-bottom:1px solid rgba(239,233,222,.5);padding-bottom:4px}
.footer-wordmark{line-height:.72;padding-bottom:.4rem}
.footer-wordmark div{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,10.9vw,21rem);letter-spacing:-.01em;color:rgba(239,233,222,.72);white-space:nowrap;text-align:center}
.footer-meta{display:flex;justify-content:center;align-items:center;text-align:center;flex-wrap:wrap;gap:.9rem 2.4rem;padding:1.4rem var(--gutter) 1.8rem;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,233,222,.45)}
.footer-links{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center}
.footer-meta a{color:rgba(239,233,222,.45)}
.footer-meta a:hover{color:var(--paper)}

/* scroll reveal: add data-reveal to any block; site.js fades it up once */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* Legal pages (terms, privacy): centred head, numbered sections in one column */
.legal-head{padding:clamp(3.5rem,9vh,6.5rem) var(--gutter) clamp(2rem,5vh,3rem);text-align:center}
.legal-title{font-size:clamp(2rem,5.6vw,4.4rem);line-height:1.05;margin:1.2rem auto 0;max-width:22ch}
.legal-intro{margin:1.6rem auto 0;max-width:48ch}
.legal-body{padding:0 var(--gutter) clamp(3rem,7vh,5rem)}
.legal-list{max-width:560px;margin:0 auto;display:grid}
.term{border-top:1px solid rgba(17,17,16,.12);padding:clamp(1.5rem,3.6vh,2.2rem) 0;display:grid;grid-template-columns:clamp(1.5rem,5vw,2.4rem) 1fr;gap:clamp(.8rem,3vw,1.6rem)}
.term:first-child{border-top-color:var(--rule-2)}
.term:last-child{border-bottom:1px solid var(--rule-2)}
.term .numeral{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--bronze);line-height:1.5}
.term h2{font-size:clamp(1.35rem,2.8vw,1.9rem);line-height:1.15;margin:0 0 .8rem}
.term p{font-size:1rem;line-height:1.85;color:var(--body);margin:0;text-wrap:pretty}
.term p+p{margin-top:.9rem}
.term a.ul{border-bottom:1px solid rgba(17,17,16,.3)}

/* Client wall (studio, work, portfolios): names in Cormorant on black, alphabetical; a single column on phones */
.clients{background:var(--dark);padding:clamp(4rem,10vh,7rem) var(--gutter);text-align:center}
.clients .eyebrow{color:rgba(239,233,222,.45)}
.client-wall{max-width:1000px;margin:2.6rem auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:1.8rem 3.2rem}
.client-wall span{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.9vw,1.6rem);letter-spacing:.04em;color:rgba(239,233,222,.82);line-height:normal}
@media (max-width:699px){.client-wall{flex-direction:column;gap:1.05rem}}