/* toosi studio: cream and ultramarine, Libre Caslon Text (display), DM Mono (functional), Fraunces (email) */
:root{
  --cream:#f2eee2;
  --ultra:#2a3acb;
  --pad:3.5rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:clamp(0.7188rem,0.84vw,0.9688rem)}
body{margin:0;background:var(--cream);color:var(--ultra);font-family:'DM Mono',ui-monospace,monospace;min-height:100vh;min-height:100dvh}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}
.disp{font-family:'Libre Caslon Text',Georgia,serif;font-weight:700;text-transform:uppercase;line-height:.8;letter-spacing:-0.02em}
.mono{font-family:'DM Mono',ui-monospace,monospace;font-weight:400;text-transform:uppercase}
.md{font-size:1.125rem;font-weight:500}
.sm{font-size:0.875rem}
.email{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-0.01em;text-transform:none;overflow-wrap:anywhere}
.nl{transition:opacity .3s}
.nav:hover .nl{opacity:.4}
.nav .nl:hover{opacity:1}
a:focus-visible{outline:2px solid currentColor;outline-offset:0.25rem}
.foot a:focus-visible{outline-color:var(--cream)}

/* home */
.home-wrap{position:relative;min-height:100vh;min-height:100dvh;padding:var(--pad)}
.home-nav{display:flex;flex-direction:column;align-items:flex-start}
.home-link{font-size:1.5rem;line-height:2.375rem}
.lockup{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 2rem);right:var(--pad)}
.mark{font-size:min(7.6vw,8.6rem);white-space:nowrap}
.mark span{display:inline}
.phrase{font-size:1.125rem;line-height:2rem;margin-top:1.75rem}

/* inner pages */
.cur-scope{min-height:100vh;min-height:100dvh}
.inner .cur-scope{display:flex;flex-direction:column}
.top{height:4rem;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);border-bottom:1px solid var(--ultra)}
.logo{font-size:1.625rem;line-height:1;letter-spacing:-0.03em}
.top .nav{display:flex;gap:2.25rem}
.hd{font-size:1.125rem;padding-bottom:2px;border-bottom:1px solid transparent}
.hd[aria-current="page"]{border-bottom-color:currentColor}
.hero{height:9.375rem;flex:none;display:flex;align-items:flex-end;padding:0 var(--pad) 2.25rem}
.page-title{font-size:4rem}
.main{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem var(--pad);text-align:center;font-size:1rem}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:60rem}
.col{display:flex;flex-direction:column;align-items:center;gap:0.75rem}
.col:first-child{border-right:1px solid var(--ultra)}
.about{max-width:45rem;font-size:1.125rem;line-height:1.55}
.stack{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.big-email{font-size:3.25rem;line-height:1.1}
.foot{flex:none;background:var(--ultra);color:var(--cream);padding:2.5rem var(--pad);display:grid;grid-template-columns:auto auto 1fr;column-gap:6rem;row-gap:1.5rem;align-items:start;min-height:12.5rem}
.foot > p{order:3;justify-self:end;align-self:end}
.foot h2{margin-bottom:1rem}
.sm-email{font-size:1.375rem}
.foot-links{display:flex;flex-direction:column;align-items:flex-start;gap:0.625rem}

@media (max-width:760px){
  html{font-size:16px}
  :root{--pad:1.25rem}
  .home-wrap{padding:2rem var(--pad)}
  .home-link{font-size:1.5rem;line-height:2.375rem}
  .lockup{bottom:2rem}
  .mark{font-size:21.2vw;white-space:normal}
  .mark span{display:block}
  .phrase{margin-top:1.75rem}
  .top{height:auto;flex-direction:column;align-items:stretch;padding:0}
  .logo{padding:0 var(--pad);height:3.25rem;display:flex;align-items:center}
  .top .nav{height:2.75rem;border-top:1px solid var(--ultra);padding:0 var(--pad);align-items:center;justify-content:space-between;gap:0.5rem}
  .hd{font-size:1rem}
  .hero{height:6.875rem;padding-bottom:1.5rem}
  .page-title{font-size:2.125rem}
  .cols{grid-template-columns:1fr;gap:1.375rem}
  .col:first-child{border-right:0;border-bottom:1px solid var(--ultra);padding-bottom:1.375rem}
  .about{font-size:1rem}
  .big-email{font-size:1.625rem}
  html:has(body.inner){background:var(--ultra)}
  body.inner{background:var(--ultra)}
  .inner .top,.inner .hero,.inner .main{background:var(--cream)}
  .foot{grid-template-columns:1fr;min-height:0;padding:1.125rem var(--pad) 1rem;gap:0.875rem}
  .foot h2{margin-bottom:0.375rem}
  .foot .nav{display:none}
  .foot > p{order:3;justify-self:start;align-self:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}