:root{
  --clay-bg:#e8ded3;
  --clay-card:#f3ece1;
  --clay-card-2:#ede2d5;
  --shadow-dark:#c5b3a5;
  --shadow-light:#fffbf6;
  --ink:#3a302c;
  --muted:#7a6a5e;
  --solder:#7c2a30;
  --solder-deep:#4f1b1f;
  --copper:#b97544;
  --hole-bg:#e8ded3;
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--clay-bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}

.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--solder);
}

a{color:inherit;text-decoration:none;}

/* ---------- clay primitives ---------- */
.clay-raised{
  background:var(--clay-card);
  border-radius:28px;
  box-shadow:
    9px 9px 18px var(--shadow-dark),
    -9px -9px 18px var(--shadow-light);
}
.clay-pressed{
  background:var(--clay-bg);
  border-radius:28px;
  box-shadow:
    inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light);
}
.hole{
  position:absolute;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--hole-bg);
  box-shadow:
    inset 2px 2px 4px var(--shadow-dark),
    inset -1px -1px 2px var(--shadow-light);
}
.hole.tl{top:14px;left:14px;}
.hole.tr{top:14px;right:14px;}
.hole.bl{bottom:14px;left:14px;}
.hole.br{bottom:14px;right:14px;}

@media(prefers-reduced-motion:no-preference){
  .clay-btn, .card, .chip, .icon-btn{transition:transform .18s ease, box-shadow .18s ease;}
}

/* ---------- nav ---------- */
nav{
  position:fixed;
  top:22px;left:50%;
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  gap:4px;
  padding:6px;
  border-radius:999px;
  background:var(--clay-card);
  box-shadow:9px 9px 18px var(--shadow-dark), -9px -9px 18px var(--shadow-light);
}
nav a{
  font-family:'Space Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:10px 16px;
  border-radius:999px;
  color:var(--muted);
}
nav a:hover{color:var(--ink);}
nav a.active{
  color:var(--solder);
  background:var(--clay-bg);
  box-shadow:inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

section{
  max-width:1080px;
  margin:0 auto;
  padding:140px 24px 60px;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  scroll-snap-align:start;
}
section#about, section#projects, section#resume, section#project{padding-top:110px;}

/* ---------- hero ---------- */
#home{
  padding-top:120px;
  padding-bottom:32px;
  text-align:center;
  position:relative;
}
.blob-frame{
  width:476px;height:476px;
  margin:0 auto 18px;
  background:var(--clay-card);
  border-radius:62% 38% 55% 45% / 55% 45% 62% 38%;
  box-shadow:9px 9px 20px var(--shadow-dark), -9px -9px 20px var(--shadow-light);
  padding:10px;
  display:flex;align-items:center;justify-content:center;
}
.blob-frame img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:62% 38% 55% 45% / 55% 45% 62% 38%;
}
h1.name{font-size:clamp(2.2rem,4.4vw,3.1rem);}
.role{
  font-family:'Space Mono',monospace;
  color:var(--muted);
  font-size:0.85rem;
  letter-spacing:0.06em;
  margin-top:10px;
}
.trace{
  display:block;
  margin:20px auto;
  width:220px;
  opacity:0.55;
}
.cta-row{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-top:4px;
  flex-wrap:wrap;
}
.clay-btn{
  font-family:'Space Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:16px 28px;
  border-radius:20px;
  background:var(--clay-card);
  box-shadow:7px 7px 14px var(--shadow-dark), -7px -7px 14px var(--shadow-light);
  color:var(--ink);
  cursor:pointer;
  display:inline-block;
}
.clay-btn:hover{transform:translateY(-2px);}
.clay-btn:active, .clay-btn.press{
  box-shadow:inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
  transform:translateY(0);
}
.clay-btn.solid{
  background:var(--solder);
  color:#f2ecdf;
  box-shadow:7px 7px 14px var(--shadow-dark), -4px -4px 10px rgba(255,255,255,0.08);
}

/* ---------- section headers ---------- */
.sec-head{margin-bottom:44px;}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-top:8px;}

/* ---------- about ---------- */
.about-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:48px;
  align-items:start;
}
.about-collage{
  position:relative;
  padding:34px;
  border-radius:32px;
}
.collage-grid{
  display:flex;
  gap:10px;
  width:100%;
  aspect-ratio:1/1;
}
.collage-col{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.collage-col:first-child{flex:1.15;}
.collage-col:last-child{flex:0.85;}
.collage-col:first-child .collage-tile:first-child{flex:0.8;}
.collage-col:first-child .collage-tile:last-child{flex:1.2;}
.collage-col:last-child .collage-tile:first-child{flex:1.2;}
.collage-col:last-child .collage-tile:last-child{flex:0.8;}
.collage-tile{
  border-radius:18px;
  overflow:hidden;
  background:var(--clay-bg);
}
.collage-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.fact-list{list-style:none;padding:0;margin:20px 0 28px;}
.fact-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
  color:var(--muted);
}
.fact-list li::before{
  content:"";
  position:absolute;left:0;top:9px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--copper);
}
.fact-list-centered{text-align:center;}
.fact-list-centered li{padding-left:0;}
.fact-list-centered li::before{display:none;}
.fact-list-columns{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:0 40px;
}
.fact-list-columns .fact-list{margin:20px 0 8px;}
.fact-list-columns .cta-row{justify-content:center;}
.video-duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:32px;
}
.video-embed{
  position:relative;
  padding:14px;
  border-radius:24px;
  aspect-ratio:16/9;
}
.video-embed iframe{
  position:absolute;
  top:14px;left:14px;right:14px;bottom:14px;
  width:calc(100% - 28px);
  height:calc(100% - 28px);
  border-radius:16px;
  border:0;
}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.chip{
  font-family:'Space Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.03em;
  padding:10px 16px;
  border-radius:999px;
  background:var(--clay-card);
  box-shadow:5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
  color:var(--solder-deep);
}

/* ---------- projects timeline ---------- */
.timeline-track{
  display:flex;
  align-items:flex-start;
  gap:64px;
  overflow-x:auto;
  overflow-y:hidden;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:36px 6vw 24px;
  scrollbar-width:none;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.timeline-track::-webkit-scrollbar{display:none;}

.tl-item{
  position:relative;
  flex:0 0 auto;
  width:380px;
  padding-top:34px;
}
.tl-node{
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:14px;height:14px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 6px var(--clay-bg);
  z-index:2;
}
.tl-item:not(:last-child)::before{
  content:"";
  position:absolute;
  top:6px;
  left:calc(50% + 7px);
  width:calc(100% + 64px - 14px);
  height:2px;
  background:var(--copper);
  opacity:0.4;
  z-index:1;
}

.card{
  position:relative;
  padding:24px;
  padding-bottom:28px;
  height:540px;
  display:flex;
  flex-direction:column;
}
.card:hover{transform:translateY(-4px);}
.card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:14px;
  display:block;
  flex-shrink:0;
}
.card-img-placeholder{
  width:100%;
  aspect-ratio:4/3;
  border-radius:16px;
  margin-bottom:14px;
  flex-shrink:0;
  background:var(--clay-bg);
  box-shadow:inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px;
  font-family:'Space Mono',monospace;
  font-size:0.68rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--muted);
}
.card h3{
  font-size:1.35rem;
  margin:10px 0 8px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card p{
  color:var(--muted);
  font-size:1rem;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:6;
  line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.timeline-hint{
  margin-top:6px;
  display:block;
}

/* ---------- resume ---------- */
.resume-card{
  padding:44px;
  text-align:center;
  position:relative;
}
.resume-card p{color:var(--muted);max-width:440px;margin:14px auto 26px;}

/* ---------- project detail page ---------- */
.back-link{
  display:inline-block;
  font-family:'Space Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:24px;
}
.back-link:hover{color:var(--solder);}
.project-head{margin-bottom:32px;text-align:center;}
.project-head .eyebrow{display:block;margin-bottom:12px;}
.project-head h1{
  font-size:clamp(3rem,9vw,6.5rem);
  line-height:1.02;
}
.project-cover{
  position:relative;
  padding:34px;
  border-radius:32px;
  margin-bottom:32px;
}
.project-cover img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:20px;
  display:block;
}
.project-body{
  max-width:720px;
}
.project-body p{
  font-size:1.05rem;
  color:var(--ink);
}
.project-body h3{
  font-size:1.2rem;
  margin:32px 0 4px;
}
.project-intro{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
  margin-bottom:20px;
}
.project-intro .project-body{
  max-width:none;
}
.cmr-logo-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:150px;
  padding:20px;
  border-radius:24px;
  background:var(--clay-card);
  box-shadow:9px 9px 18px var(--shadow-dark), -9px -9px 18px var(--shadow-light);
  text-align:center;
}
.cmr-logo-card:hover{transform:translateY(-3px);}
.cmr-logo-card img{
  width:100%;
  max-width:90px;
  object-fit:contain;
}
.cmr-logo-card span{
  font-family:'Space Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--solder);
}
.project-subhead{margin:56px 0 28px;}
.board-list{
  display:flex;
  flex-direction:column;
  gap:56px;
}
.board-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.board-row.img-right .board-frame{order:2;}
.board-row.img-right .board-copy{order:1;}
.board-frame{
  position:relative;
  padding:34px;
  border-radius:28px;
}
.board-frame .card-img-placeholder{aspect-ratio:1/1;margin-bottom:0;}
.board-frame img{
  width:100%;
  height:auto;
  border-radius:16px;
  display:block;
}
.board-copy h3{
  font-size:1.4rem;
  margin:0 0 12px;
  line-height:1.25;
}
.board-copy p{
  color:var(--muted);
  font-size:1rem;
  margin:0;
}
.demo-annotated{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:stretch;
}
.demo-video-frame{
  position:relative;
  padding:20px;
  border-radius:28px;
}
.demo-video-frame video{
  width:100%;
  border-radius:16px;
  display:block;
}
.demo-annotations{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:40px;
  padding:12px 0;
}
.demo-note{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.demo-note p{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.15rem;
  line-height:1.35;
  color:var(--ink);
  margin:0;
}
.demo-arrow{
  color:var(--solder);
  flex-shrink:0;
  width:64px;
  height:auto;
}
.demo-thumb{
  position:relative;
  padding:14px;
  border-radius:20px;
  width:100%;
}
.demo-thumb img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
  display:block;
}
.paper-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:fit-content;
  margin:48px auto 0;
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.1rem;
  color:var(--solder);
}
.paper-link:hover{transform:translateY(-2px);}
.paper-icon{
  width:44px;height:44px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--solder);
  display:flex;align-items:center;justify-content:center;
}
.paper-icon svg{width:20px;height:20px;stroke:#f2ecdf;}

/* ---------- contact / footer ---------- */
footer{
  padding:70px 24px 90px;
  text-align:center;
  scroll-snap-align:end;
}
footer .eyebrow{display:block;margin-bottom:18px;}
.icon-row{
  display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
}
.icon-btn{
  width:56px;height:56px;
  border-radius:18px;
  background:var(--clay-card);
  box-shadow:6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
  display:flex;align-items:center;justify-content:center;
}
.icon-btn:hover{transform:translateY(-3px);}
.icon-btn svg{width:22px;height:22px;stroke:var(--solder-deep);}
.foot-note{
  margin-top:36px;
  font-family:'Space Mono',monospace;
  font-size:0.68rem;
  color:var(--muted);
  letter-spacing:0.05em;
}

@media(max-width:720px){
  .about-grid{grid-template-columns:1fr;}
  .about-collage{max-width:280px;margin:0 auto;}
  nav{gap:0;padding:5px;}
  nav a{padding:9px 10px;font-size:0.62rem;}
  .board-row, .board-row.img-right{grid-template-columns:1fr;}
  .board-row.img-right .board-frame, .board-row.img-right .board-copy{order:initial;}
  .project-intro{grid-template-columns:1fr;}
  .cmr-logo-card{width:150px;margin:0 auto;}
  .demo-annotated{grid-template-columns:1fr;gap:28px;}
  .demo-annotations{gap:24px;}
  .fact-list-columns{grid-template-columns:1fr;}
  .video-duo{grid-template-columns:1fr;}
}