@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Jost:wght@200;300;400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#041120;
  --ink2:#4083da;
  --mist:#c8dde8;
  --foam:#e8f4f8;
  --silver:#7fa8c0;
  --accent:#2e7da8;
  --gold:#b8956a;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Jost', sans-serif;
  background: var(--ink);
  color: var(--foam);
  overflow-x: hidden;
  position: relative;
  cursor: default;
}

canvas#wc{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
}

.page{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
  padding:0 2rem 6rem;
}

header{
  padding:6rem 0 4rem;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  border-bottom:0.5px solid rgba(200,221,232,0.2);
  margin-bottom:5rem;
  animation:fadeUp .8s ease forwards;
}

.name{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3rem,7vw,5.5rem);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--foam);
}
.name em{font-style:italic;color:var(--mist)}

.tagline{
  font-size:.78rem;
  font-weight:200;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--silver);
  margin-top:1rem;
}

nav{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;padding-bottom:.4rem}
nav a{
  font-size:.75rem;font-weight:300;letter-spacing:.15em;
  text-transform:uppercase;color:var(--silver);
  text-decoration:none;transition:color .3s;cursor:pointer;
}
nav a:hover{color:var(--foam)}

.section-label{
  font-size:.7rem;font-weight:300;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:2rem;display:flex;align-items:center;gap:1rem;
}
.section-label::after{content:'';flex:1;height:.5px;background:rgba(184,149,106,.3)}

.about {
  margin-bottom: 6rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  animation: fadeUp .8s .1s ease both;
}
.about .section-label {
  justify-content: center;
}

.about-text h2{
  font-family:'Cormorant Garamond',serif;
  font-size:1.9rem;font-weight:300;line-height:1.3;
  margin-bottom:1.2rem;color:var(--foam);
}
.about-text p{font-size:.88rem;font-weight:300;line-height:1.85;color:var(--mist);margin-bottom:1rem}

.skills-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-bottom:6rem;border:.5px solid rgba(200,221,232,.1);
  animation:fadeUp .8s .2s ease both;
}

.skill-item{
  padding:1.5rem;background:rgba(10,22,40,.6);
  border:.5px solid rgba(200,221,232,.07);
  backdrop-filter:blur(4px);transition:background .3s;cursor:pointer;
}
.skill-item:hover{background:rgba(30,58,95,.5)}
.skill-name{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:300;color:var(--foam);margin-bottom:.5rem}
.skill-desc{font-size:.75rem;font-weight:200;color:var(--silver);line-height:1.6}
.skill-bar{margin-top:1rem;height:1px;background:rgba(200,221,232,.1);position:relative}
.skill-fill{position:absolute;top:0;left:0;height:100%;background:var(--accent);transition:width 1s ease}

.projects{margin-bottom:6rem;animation:fadeUp .8s .3s ease both}

.project{
  display:grid;grid-template-columns:auto 1fr auto;gap:2rem;
  align-items:start;padding:2rem 0;
  border-bottom:.5px solid rgba(200,221,232,.1);cursor:pointer;
}
.project:first-child{border-top:.5px solid rgba(200,221,232,.1)}
.project:hover .project-title{color:var(--mist)}

.project-num{font-family:'Cormorant Garamond',serif;font-size:.9rem;color:var(--gold);opacity:.7;padding-top:.2rem;min-width:2rem}
.project-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.85rem;
  font-weight: 300;
  color: var(--foam);
  margin-bottom: .4rem;
  transition: color .3s;
}
.project-desc {
  font-size: 1rem;
  font-weight: 200;
  color: var(--silver);
  line-height: 1.7;
}
.project-tags{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.tag {
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: .5px solid rgba(67, 183, 245, 0.726);
  padding: .3rem .8rem;
  border-radius: 2px;
}
.project-year {
  font-size: .8rem;
  font-weight: 200;
  color: #b8956a;
  opacity: .6;
  padding-top: .3rem;
  white-space: nowrap;
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 4rem;
  animation: fadeUp .8s .4s ease both;
}
.contact h2{font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:300;line-height:1.2;color:var(--foam);margin-bottom:1rem}
.contact p{font-size: 1rem;font-weight:200;color:var(--silver);line-height:1.8}

.contact-links{display:flex;flex-direction:column;gap:1.2rem;padding-top:.5rem}
.contact-link{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--mist);font-size:.82rem;font-weight:300;transition:color .3s,gap .3s;cursor:pointer}
.contact-link:hover{color:var(--foam);gap:1.4rem}
.link-line{height:.5px;width:2rem;background:var(--gold);flex-shrink:0;transition:width .3s}
.contact-link:hover .link-line{width:3rem}

footer{border-top:.5px solid rgba(200,221,232,.1);padding-top:2rem;display:flex;justify-content:space-between}
footer span{font-size:.7rem;font-weight:200;letter-spacing:.15em;color:var(--silver);opacity:.5;text-transform:uppercase}

.hint{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(127,168,192,.4);z-index:10;pointer-events:none;
  animation:pulse 3s ease infinite;
}

@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.9}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.skill-arrow {
  font-size: .8rem;
  color: var(--silver);
  transition: transform .3s;
  display: inline-block;
}

.skill-detail {
  display: none;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .8rem;
}

.skill-item.open .skill-detail {
  display: flex;
}

.skill-item.open .skill-arrow {
  transform: rotate(180deg);
}

.skill-tag {
  font-size: .65rem;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  background: rgba(46,125,168,.15);
  border: .5px solid rgba(46,125,168,.3);
  padding: .25rem .6rem;
  border-radius: 2px;
}

.contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity .3s;
}

.contact-link:hover .contact-icon {
  opacity: 1;
}

.timeline {
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}

.tl-line {
  position: relative;
  height: 0.5px;
  background: rgba(184,149,106,.2);
  margin: 0 0 0 0;
  top: 52px;
}

.tl-line-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width 1.5s ease;
}

.tl-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
  margin-top: 1rem;
}
.tl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}

.tl-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid rgba(184,149,106,.4);
  margin-bottom: 1rem;
  transition: all .3s;
  flex-shrink: 0;
}

.tl-dot--active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(184,149,106,.5);
  width: 14px;
  height: 14px;
}

.tl-dot--future {
  border-color: rgba(184,149,106,.2);
  border-style: dashed;
}

.tl-item:hover .tl-dot {
  border-color: var(--gold);
  background: var(--gold);
}

.tl-content {
  text-align: center;
  padding: 0 .5rem;
  margin-top: 1.5rem;
}

.tl-year {
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
}

.tl-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 300;
  color: var(--foam);
  margin-bottom: .5rem;
}

.tl-item--future .tl-title {
  color: var(--silver);
  opacity: .6;
}

.tl-sub {
  font-size: .7rem;
  font-weight: 200;
  color: var(--silver);
  line-height: 1.7;
}

footer {
  border-top: 0.5px solid rgba(200,221,232,.1);
  padding-top: 2rem;
  display: flex;
  justify-content: center;
}