@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap');
:root{
  --paper:#F7F5F1;
  --ink:#19181C;
  --accent:#3450D8;
  --muted:#8C887E;
  --line:#DDD9D0;
  --card:#FFFFFF;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:var(--paper);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.mono{
  font-family:'DM Sans', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.02em;
}

.wrap{max-width:1100px; margin:0 auto; padding:0 32px;}

/* HEADER */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,245,241,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
}
.logo{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.1rem;}
nav{display:flex; gap:28px; align-items:center;}
nav a{color:var(--muted); transition:color .2s ease;}
nav a:hover{color:var(--ink);}
nav a.resume{
  color:var(--ink); border:1px solid var(--ink);
  padding:7px 14px; border-radius:2px;
}
nav a.resume:hover{background:var(--ink); color:var(--paper);}

footer{border-top:1px solid var(--line); padding:56px 0 48px; margin-top:40px;}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
.footer-inner .mono{color:var(--muted);}
.footer-links{display:flex; gap:24px;}
.footer-links a{color:var(--muted);}
.footer-links a:hover{color:var(--ink);}

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

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

/* ============ HOME PAGE ============ */
.hero{padding:120px 0 100px; border-bottom:1px solid var(--line);}
.hero-eyebrow{color:var(--accent); margin-bottom:28px; display:block;}
.hero-eyebrow::before{content:"// "; opacity:0.6;}
.hero h1{
  font-family:'Cormorant Garamond', serif; font-weight:400;
  font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:1.06;
  letter-spacing:-0.01em; max-width:14ch;
}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero-close{margin-top:28px; color:var(--muted);}
.hero-close::before{content:"// "; opacity:0.6; color:var(--accent);}
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:64px; gap:24px; flex-wrap:wrap;
}
.hero-foot p{max-width:36ch; color:var(--muted); font-size:0.95rem;}
.scroll-cue{color:var(--muted); white-space:nowrap;}

.work{padding:90px 0 60px;}
.section-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:48px; gap:16px; flex-wrap:wrap;
}
.section-head h2{font-family:'Cormorant Garamond', serif; font-weight:400; font-size:2rem;}
.section-head .mono{color:var(--muted);}

.grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.card{
  background:var(--card); padding:36px;
  display:flex; flex-direction:column; min-height:340px;
  transition:background .25s ease;
}
.card:hover{background:#FCFBF9;}
.card-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:24px;
}
.card-tag{color:var(--accent);}
.card-tag.personal{color:var(--muted);}
.card-num{color:var(--muted);}

.card-thumb{
  flex:1; border-radius:3px; background:var(--paper);
  border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; overflow:hidden; margin-bottom:24px; min-height:140px;
}
.card-thumb img{
  max-width:78%; max-height:70%; object-fit:contain;
  filter:grayscale(15%); transition:transform .35s ease;
}
.card:hover .card-thumb img{transform:scale(1.04);}

.card h3{
  font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.3rem;
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.card h3 .arrow{
  color:var(--accent); opacity:0; transform:translateX(-4px);
  transition:all .2s ease;
}
.card:hover h3 .arrow{opacity:1; transform:translateX(0);}
.card p{color:var(--muted); font-size:0.92rem; line-height:1.55;}

/* ---- image-only hover-reveal cards (experimental homepage variant) ---- */
.card-v2{
  position:relative; overflow:hidden; padding:0; min-height:340px;
  background:var(--paper);
}
.card-v2 .v2-img{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:50px;
}
.card-v2 .v2-img img{
  max-width:70%; max-height:60%; object-fit:contain;
  filter:grayscale(15%); transition:transform .4s ease;
}
.card-v2:hover .v2-img img{transform:scale(1.05);}
.card-v2 .v2-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:30px; background:linear-gradient(180deg, rgba(25,24,28,0) 35%, rgba(25,24,28,0.94) 100%);
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.card-v2:hover .v2-overlay{opacity:1; transform:translateY(0);}
.card-v2 .v2-top{
  display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:auto;
}
.card-v2 .v2-tag{color:#fff; opacity:0.8;}
.card-v2 .v2-num{color:#fff; opacity:0.6;}
.card-v2 h3{
  font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.3rem;
  color:#fff; margin-bottom:8px; display:flex; align-items:center; gap:8px;
}
.card-v2 h3 .arrow{color:var(--accent); opacity:0; transform:translateX(-4px); transition:all .2s ease;}
.card-v2:hover h3 .arrow{opacity:1; transform:translateX(0);}
.card-v2 p{color:rgba(255,255,255,0.82); font-size:0.92rem; line-height:1.55;}
@media (hover:none){
  .card-v2 .v2-overlay{opacity:1; transform:translateY(0); background:linear-gradient(180deg, rgba(25,24,28,0) 50%, rgba(25,24,28,0.94) 100%);}
}

/* ---- accordion push/expand cards (experimental variant 2) ---- */
.acc-row{
  display:flex; gap:1px; height:420px;
  background:var(--line); border:1px solid var(--line);
  margin-bottom:1px;
}
.acc-card{
  position:relative; overflow:hidden; flex:1 1 0%; min-width:64px;
  background:var(--ink); cursor:pointer;
  transition:flex-grow .6s cubic-bezier(.16,1,.3,1);
}
.acc-card:hover{flex-grow:5;}
.acc-img{
  position:absolute; inset:0;
}
.acc-img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(60%) brightness(0.65); opacity:0.85;
  transition:filter .6s ease, opacity .6s ease, transform .8s ease;
  transform:scale(1.08);
}
.acc-card:hover .acc-img img{
  filter:grayscale(0%) brightness(0.5); opacity:1; transform:scale(1);
}
.acc-spine{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:22px 16px;
}
.acc-num{
  color:rgba(255,255,255,0.65); writing-mode:vertical-rl; transform:rotate(180deg);
  transition:opacity .35s ease;
}
.acc-card:hover .acc-num{opacity:0;}
.acc-title-vertical{
  color:#fff; writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'Cormorant Garamond', serif; font-size:1.1rem; letter-spacing:0.01em;
  transition:opacity .3s ease;
}
.acc-card:hover .acc-title-vertical{opacity:0;}
.acc-details{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:32px; opacity:0; transform:translateY(10px);
  transition:opacity .4s ease .12s, transform .4s ease .12s;
  background:linear-gradient(180deg, rgba(25,24,28,0) 30%, rgba(25,24,28,0.92) 100%);
}
.acc-card:hover .acc-details{opacity:1; transform:translateY(0);}
.acc-details .v2-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:auto;}
.acc-details .v2-tag{color:#fff; opacity:0.8; white-space:nowrap;}
.acc-details .v2-num{color:#fff; opacity:0.6; white-space:nowrap;}
.acc-details h3{
  font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.4rem;
  color:#fff; margin-bottom:8px; display:flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.acc-details h3 .arrow{color:var(--accent);}
.acc-details p{
  color:rgba(255,255,255,0.85); font-size:0.92rem; line-height:1.55;
  max-width:46ch; opacity:0; transition:opacity .3s ease .2s;
}
.acc-card:hover .acc-details p{opacity:1;}

@media (max-width:900px){
  .acc-row{height:auto; flex-direction:column;}
  .acc-card{flex:none; height:90px; transition:height .5s cubic-bezier(.16,1,.3,1);}
  .acc-card:hover, .acc-card:focus-within{height:340px;}
  .acc-num, .acc-title-vertical{writing-mode:horizontal-tb; transform:none;}
  .acc-spine{flex-direction:row; align-items:center; justify-content:space-between;}
}
@media (hover:none){
  .acc-card{flex-grow:1 !important;}
}

/* ============ CASE STUDY PAGE ============ */
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); padding:28px 0 0; margin-left:4px;
}
.back-link:hover{color:var(--ink);}

.cs-hero{padding:24px 0 64px; border-bottom:1px solid var(--line);}
.cs-meta{
  display:flex; gap:24px; flex-wrap:wrap; margin-bottom:24px;
  color:var(--muted);
}
.cs-meta span b{color:var(--ink); font-weight:500;}
.cs-tag{color:var(--accent); margin-bottom:18px; display:block;}
.cs-tag::before{content:"// "; opacity:0.6;}
.cs-hero h1{
  font-family:'Cormorant Garamond', serif; font-weight:400;
  font-size:clamp(2rem, 5vw, 3.4rem); line-height:1.08;
  max-width:18ch; margin-bottom:32px;
}
.cs-cover{
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--card); display:flex; align-items:center; justify-content:center;
  min-height:200px;
}
.cs-cover img{width:100%; height:100%; object-fit:cover; max-height:500px;}

.cs-body{padding:64px 0 40px;}
.cs-body .lede{
  font-family:'Cormorant Garamond', serif; font-size:1.4rem; font-weight:400;
  line-height:1.5; max-width:46ch; margin-bottom:56px; color:var(--ink);
}
.cs-section{
  display:grid; grid-template-columns:200px 1fr; gap:40px;
  padding:40px 0; border-top:1px solid var(--line);
}
.cs-section h2{
  font-family:'DM Sans', sans-serif; font-size:0.85rem;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--accent);
  padding-top:4px;
}
.cs-section-content p{
  color:var(--ink); opacity:0.85; margin-bottom:18px; max-width:62ch;
  font-size:1rem; line-height:1.65;
}
.cs-section-content p:last-child{margin-bottom:0;}
.cs-section-content img{
  border:1px solid var(--line); border-radius:4px; margin:24px 0;
}
.cs-section-content .img-row{
  display:grid; gap:16px; margin:24px 0;
}
.cs-section-content .img-row.two{grid-template-columns:1fr 1fr;}
.cs-section-content .img-row img{margin:0;}
.cs-section-content ul{margin:0 0 18px 20px; color:var(--ink); opacity:0.85;}
.cs-section-content li{margin-bottom:6px;}
.cs-section-content table{
  width:100%; border-collapse:collapse; margin:24px 0; font-size:0.9rem;
}
.cs-section-content th, .cs-section-content td{
  border:1px solid var(--line); padding:10px 12px; text-align:left;
}
.cs-section-content th{
  font-family:'DM Sans', sans-serif; font-size:0.72rem;
  text-transform:uppercase; color:var(--muted); font-weight:500;
}
.cs-section-content blockquote{
  border-left:2px solid var(--accent); padding-left:20px; margin:24px 0;
  font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--ink);
  opacity:0.85; font-size:1.05rem; line-height:1.6;
}
.cs-note{
  color:var(--muted); font-size:0.85rem; font-style:italic; margin-bottom:48px;
}

.cs-nav{
  display:flex; justify-content:space-between; padding:48px 0;
  border-top:1px solid var(--line); gap:16px; flex-wrap:wrap;
}
.cs-nav a{
  display:flex; flex-direction:column; gap:6px; max-width:45%;
}
.cs-nav a:last-child{text-align:right; align-items:flex-end; margin-left:auto;}
.cs-nav .mono{color:var(--muted);}
.cs-nav .title{font-family:'Cormorant Garamond', serif; font-size:1.1rem; color:var(--ink);}
.cs-nav a:hover .title{color:var(--accent);}

@media (max-width:760px){
  .grid{grid-template-columns:1fr;}
  .hero{padding:90px 0 70px;}
  .header-inner{padding:16px 20px;}
  .wrap{padding:0 20px;}
  nav{gap:16px;}
  .cs-section{grid-template-columns:1fr; gap:16px;}
  .cs-section-content .img-row.two{grid-template-columns:1fr;}
  .cs-nav a, .cs-nav a:last-child{max-width:100%; text-align:left; align-items:flex-start;}
}

/* ---- type system: Cormorant Garamond for titles, DM Sans for everything else ---- */
h1,h2,h3,.logo,.cs-nav .title{font-family:'Cormorant Garamond',serif;font-weight:500;}
.logo{font-size:1.5rem;}
.hero h1{font-size:clamp(2.8rem,6.6vw,5.6rem);}
.section-head h2{font-size:2.8rem;}
.cs-hero h1{font-size:clamp(2.4rem,5.8vw,4.2rem);}
.cs-body .lede{font-size:1.7rem;}
.cs-nav .title{font-size:1.4rem;}

/* resume sits in the menu like the other links, no box */
nav a.resume,nav a.resume:hover{border:0;border-radius:0;padding:0;background:none;font-size:inherit;}
nav a.resume{color:var(--muted);}
nav a.resume:hover{color:var(--ink);}

/* ---- project pages: same grid and type as the About section ---- */
.wrap{max-width:1700px;}
.header-inner{max-width:1700px;margin:0 auto;}
.cs-cover img{max-height:clamp(420px,70vh,760px);}
.cs-section{grid-template-columns:minmax(200px,1fr) 2fr;column-gap:48px;row-gap:0;padding:72px 0 64px;}
.cs-section h2{grid-column:1;grid-row:1;font-family:'Cormorant Garamond',serif;font-size:2.8rem;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);padding:0;display:block;line-height:1.1;}
.cs-section h2::before{display:none;}
.cs-section-content{display:contents;}
.cs-section-content>*{grid-column:2;}
.cs-section-content>img,.cs-section-content>.img-row,.cs-section-content>video{grid-column:1/-1;width:100%;height:auto;}
.cs-section-content p{font-size:1.2rem;line-height:1.7;max-width:62ch;opacity:1;margin-bottom:22px;}
.cs-section-content ul,.cs-section-content blockquote{max-width:62ch;}
.cs-section-content>img,.cs-section-content>.img-row{margin:32px 0;}
.cs-body .lede{font-size:1.9rem;max-width:40ch;}
@media(min-width:761px){.cs-section{grid-template-columns:minmax(200px,1fr) 2fr !important;column-gap:48px !important;}}
@media(max-width:760px){
  .cs-section{grid-template-columns:1fr !important;padding:44px 0 36px !important;}
  .cs-section h2{font-size:2.2rem;margin-bottom:18px;}
  .cs-section h2,.cs-section-content>*{grid-column:1 !important;}
  .cs-section-content p{font-size:1.08rem;}
}

/* ---- never crop or stretch media: always the original ratio ---- */
.cs-cover img,.cs-cover video{width:100%;height:auto;max-height:none;object-fit:contain;display:block;}
.cs-section-content video,.cs-section-content img{height:auto;object-fit:contain;}
.cs-section-content .img-row{align-items:start;}
.cs-section-content .img-row img{width:100%;height:auto;}

/* ---- generous side margins everywhere ---- */
:root{--gutter:clamp(24px,8vw,140px);}
.wrap{max-width:1900px;padding:0 var(--gutter);}
.header-inner{max-width:1900px;padding:20px var(--gutter);}

/* bigger name for contrast against the small menu */
.logo{font-size:2.3rem;font-weight:600;line-height:1;letter-spacing:-.01em;}
@media(max-width:600px){.logo{font-size:1.7rem;}}