:root{
  --ice:#F1F2EB;
  --frost:#F1F2EB;
  --deep:#201E1F;
  --glacier:#3E4E50;
  --shelf:color-mix(in srgb,var(--glacier) 28%,var(--ice));
  --melt:#3993DD;
  --beak:#E58F65;
  --measure:64rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ice);
  color:var(--deep);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}

/* ---------- utility type ---------- */
.mono{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--glacier);
}
.display{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-weight:700;
  line-height:.95;
  letter-spacing:-.025em;
}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--ice) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--shelf);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.mark{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;
  letter-spacing:-.02em;font-size:1rem;text-decoration:none;color:var(--deep);
}
.mark span{color:var(--beak)}
.nav{display:flex;gap:1.5rem}
.nav a{
  font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--glacier);
  padding:.25rem 0;border-bottom:1px solid transparent;
}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{color:var(--melt);border-bottom-color:var(--melt)}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr minmax(11rem,20rem);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  padding:clamp(4rem,12vw,8.5rem) 0 clamp(3rem,7vw,5rem);
}
.hero-copy .eyebrow{display:block;margin-bottom:1.75rem}
.hero h1{
  font-size:clamp(3rem,10vw,6.25rem);
  margin-bottom:1.75rem;
}
.hero h1 em{font-style:normal;color:var(--beak)}
.thesis{
  font-size:clamp(1.1rem,2.4vw,1.4rem);
  max-width:42ch;color:var(--deep);
}
.hero-mascot{width:100%;height:auto;display:block}

/* ---------- huddle: the signature motif ---------- */
.huddle{display:flex;align-items:flex-end;gap:5px;height:52px;margin-top:3rem}
.huddle i{display:block;width:9px;background:var(--shelf);border-radius:1px}
.huddle i.on{background:var(--melt)}
.huddle i.hot{background:var(--beak)}

/* ---------- sections ---------- */
section{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--shelf)}
.sechead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2.5rem;gap:1rem}
.sechead h2{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;
  font-size:1.5rem;letter-spacing:-.02em;
}

/* ---------- applications ---------- */
.project{
  display:block;text-decoration:none;color:inherit;
  background:var(--frost);
  border:1px solid var(--shelf);
  border-left:3px solid var(--melt);
  padding:1.6rem 1.8rem;
  margin-bottom:1rem;
  transition:border-left-color .18s ease,transform .18s ease;
}
.project:hover,.project:focus-visible{border-left-color:var(--melt);transform:translateX(3px)}
.project .row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.project h3{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;
  font-size:1.35rem;letter-spacing:-.02em;
}
.project p{margin-top:.6rem;color:var(--glacier);max-width:58ch}
.stage{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.bars{display:flex;gap:3px}
.bars i{display:block;width:6px;height:14px;background:var(--shelf);border-radius:1px}
.bars i.fill{background:var(--melt)}
.tags{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.tag{
  font-family:"JetBrains Mono",monospace;font-size:.65rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--melt);
  border:1px solid color-mix(in srgb,var(--melt) 40%,var(--ice));border-radius:999px;padding:.2rem .6rem;
}

/* ---------- about ---------- */
.portrait-layout{
  display:grid;
  grid-template-columns:minmax(14rem,20rem) 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.portrait{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center 18%;
  display:block;
}
.links{margin-top:1.75rem}
.links a{color:var(--deep);text-decoration:none;border-bottom:1px solid var(--melt)}
.links a:hover,.links a:focus-visible{color:var(--melt)}
.page .links{margin:0 0 2rem}

/* ---------- inner pages ---------- */
.page{padding:clamp(3rem,8vw,5.5rem) 0  clamp(4rem,10vw,7rem)}
.page .eyebrow{display:block;margin-bottom:1.25rem}
.page h1{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;
  font-size:clamp(2.1rem,5vw,3.2rem);letter-spacing:-.025em;
  margin-bottom:1.25rem;line-height:1.1;
}
.page .lede{font-size:1.15rem;max-width:46ch;margin-bottom:2rem}
.page .stage{margin-bottom:.25rem}
.page .tags{margin:1.25rem 0 2rem}
.prose{max-width:58ch}
.prose p+p{margin-top:1rem}
.prose p{color:var(--glacier)}
.back{
  display:inline-block;margin-top:2.5rem;
  font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--glacier);
  border-bottom:1px solid var(--melt);
}
.back:hover,.back:focus-visible{color:var(--deep)}

/* ---------- contact form ---------- */
.form{max-width:36rem;margin-top:.5rem}
.field{margin-bottom:1.2rem}
.field label{
  display:block;
  font-family:"JetBrains Mono",monospace;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--glacier);margin-bottom:.45rem;
}
.field input,.field textarea{
  width:100%;
  background:var(--frost);
  border:1px solid var(--shelf);
  color:var(--deep);
  font:inherit;
  padding:.8rem 1rem;
  border-radius:2px;
}
.field textarea{min-height:10rem;resize:vertical}
.field input:focus,.field textarea:focus{
  outline:2px solid var(--melt);outline-offset:2px;border-color:var(--melt);
}
.honey{position:absolute;left:-9999px;height:0;overflow:hidden}
.btn{
  appearance:none;border:0;cursor:pointer;
  background:var(--melt);color:var(--ice);
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:2px;
}
.btn:hover,.btn:focus-visible{background:var(--deep);color:var(--ice)}

.airtable-wrap{
  border:1px solid var(--shelf);
  background:var(--frost);
  overflow:hidden;
}
.airtable-wrap iframe{
  display:block;
  width:100%;
  height:min(70vh,42rem);
  border:0;
  background:transparent;
}
.airtable-fallback{
  padding:1.6rem 1.8rem;
  color:var(--glacier);
  max-width:58ch;
}
.airtable-fallback p+p{margin-top:1rem}
.airtable-fallback ul{margin:1rem 0 0 1.1rem}
footer{border-top:1px solid var(--shelf);padding:2.5rem 0 3.5rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.rise:nth-child(1){animation-delay:.05s}
.rise:nth-child(2){animation-delay:.14s}
.rise:nth-child(3){animation-delay:.23s}
.rise:nth-child(4){animation-delay:.32s}
.rise:nth-child(5){animation-delay:.41s}
@keyframes rise{to{opacity:1;transform:none}}

:focus-visible{outline:2px solid var(--melt);outline-offset:3px}

@media (max-width:720px){
  .portrait-layout{grid-template-columns:1fr}
  .portrait{max-width:22rem}
  .nav{gap:1rem}
  .hero{grid-template-columns:1fr;padding-top:3.5rem}
  .hero-mascot{max-width:16rem;justify-self:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;animation:none}
  .project{transition:none}
}