@font-face{
  font-family:'Canela';
  src:url('fonts/Canela-Medium.otf') format('opentype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

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

:root{
  --graphite:#2C2B28;
  --limestone:#C8BFB0;
  --sage:#7A8B73;
  --sage-light:#94A78D;
  --paper:#F4F1EC;
  --paper-deep:#EDE8E0;
  --warm-white:#FAF8F5;
  --line:rgba(200,191,176,.38);
  --line-soft:rgba(200,191,176,.22);
  --shadow:0 28px 60px rgba(44,43,40,.08);
  --logo:'Canela','Cormorant Garamond',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --page-max:1180px;
  --section-max:760px;
}

html{
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  background:
    radial-gradient(circle at top, rgba(237,232,224,.88) 0, rgba(237,232,224,0) 38%),
    linear-gradient(180deg, var(--warm-white) 0%, var(--paper) 100%);
  color:var(--graphite);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}

a{
  color:inherit;
}

img,svg{
  display:block;
  max-width:100%;
}

main{
  overflow:hidden;
}

section,
footer{
  scroll-margin-top:6rem;
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  display:flex;
  align-items:baseline;
  gap:1.35rem;
  padding:.95rem 2rem;
  background:rgba(250,248,245,.92);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transform:translateY(calc(-100% - .5rem));
  transition:opacity .3s ease, transform .3s ease;
}

.topbar.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.topbar-brand{
  font-family:var(--logo);
  font-size:1rem;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1;
  text-decoration:none;
  flex-shrink:0;
}

.topbar-divider{
  width:1px;
  height:1rem;
  background:var(--limestone);
  opacity:.8;
  align-self:center;
  flex-shrink:0;
}

.topbar-nav{
  display:flex;
  align-items:baseline;
  gap:1.1rem;
  flex-wrap:wrap;
}

.topbar-nav a{
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(44,43,40,.58);
  transition:color .25s ease,opacity .25s ease;
}

.topbar-nav a:hover{
  color:var(--graphite);
}

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3.25rem 2rem 2.5rem;
  border-bottom:1px solid var(--line-soft);
}

.hero-stage{
  position:relative;
  z-index:1;
  width:min(100%, 420px);
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  text-align:center;
}

.hero-mark{
  width:min(132px, calc(100vw - 8rem));
  height:auto;
  margin:0 auto 1rem;
  opacity:0;
  animation:fadeUp .9s ease forwards;
}

.hero-name{
  font-family:var(--logo);
  font-size:clamp(1.3rem,2.2vw,2rem);
  font-weight:500;
  letter-spacing:.15em;
  text-transform:lowercase;
  margin-bottom:.35rem;
  opacity:0;
  animation:fadeUp .9s ease .15s forwards;
}

.hero-tagline{
  font-family:var(--sans);
  font-size:.5rem;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:lowercase;
  color:var(--sage);
  margin-bottom:.95rem;
  opacity:0;
  animation:fadeUp .9s ease .3s forwards;
}

.hero-intro{
  max-width:360px;
  margin:0 auto;
  font-family:var(--serif);
  font-size:clamp(.78rem,1.15vw,.94rem);
  font-weight:300;
  line-height:1.76;
  color:rgba(44,43,40,.78);
  opacity:0;
  animation:fadeUp .9s ease .45s forwards;
}

.hero-scroll{
  position:absolute;
  left:50%;
  bottom:1.45rem;
  transform:translateX(-50%);
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(200,191,176,.92);
  opacity:0;
  animation:fadeUp .9s ease .65s forwards;
}

.hero-scroll::after{
  content:'';
  display:block;
  width:1px;
  height:22px;
  margin:7px auto 0;
  background:var(--limestone);
  animation:pulse 2.5s ease-in-out infinite;
}

.section-shell{
  width:min(100% - 4rem, var(--section-max));
  margin:0 auto;
}

.section-label{
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:1rem;
}

.section-title{
  font-family:var(--serif);
  font-size:clamp(1.75rem,3vw,2.6rem);
  font-weight:300;
  letter-spacing:.04em;
  line-height:1.18;
  margin-bottom:1.35rem;
}

.section-copy{
  max-width:600px;
  margin:0 auto;
  font-size:.92rem;
  line-height:1.85;
  color:rgba(44,43,40,.62);
}

.intro{
  padding:6.5rem 0 5.5rem;
  border-bottom:1px solid var(--line-soft);
}

.intro .section-shell{
  text-align:center;
}

.intro-copy{
  max-width:640px;
  margin:0 auto;
  font-family:var(--serif);
  font-size:clamp(1.18rem,2.3vw,1.48rem);
  font-weight:300;
  line-height:1.86;
  color:rgba(44,43,40,.78);
}

.intro-copy em{
  font-style:italic;
  color:var(--sage);
}

.portfolio{
  padding:2.5rem 2rem 6rem;
}

.portfolio-head{
  text-align:center;
  padding:0 0 2.6rem;
  margin-bottom:2.6rem;
  border-bottom:1px solid var(--line-soft);
}

.piece{
  width:min(100%, var(--page-max));
  margin:0 auto 2rem;
  display:grid;
  grid-template-columns:minmax(320px, 1.05fr) minmax(320px, .95fr);
  background:rgba(250,248,245,.72);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.piece:last-child{
  margin-bottom:0;
}

.piece:nth-of-type(even){
  direction:rtl;
}

.piece:nth-of-type(even) > *{
  direction:ltr;
}

.piece-image{
  position:relative;
  min-height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(2rem,5vw,4rem);
  overflow:hidden;
}

.piece-image::after{
  content:'';
  position:absolute;
  inset:1.25rem;
  border:1px solid rgba(255,255,255,.28);
  opacity:.9;
  pointer-events:none;
}

.piece:nth-of-type(1) .piece-image{background:#E2DDD4;}
.piece:nth-of-type(2) .piece-image{background:#D9DED5;}
.piece:nth-of-type(3) .piece-image{background:#DDD8D0;}
.piece:nth-of-type(4) .piece-image{background:#D5DAD6;}

.piece-image svg{
  width:min(68%, 340px);
  height:auto;
  opacity:.84;
  transition:transform .8s cubic-bezier(.25,.1,.25,1),opacity .5s ease;
}

.piece:hover .piece-image svg{
  transform:scale(1.035);
  opacity:.92;
}

.piece-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(2.5rem,4vw,4rem);
}

.piece-label{
  display:block;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:1.5rem;
}

.piece-title{
  font-family:var(--serif);
  font-size:clamp(1.8rem,3vw,2.55rem);
  font-weight:300;
  letter-spacing:.04em;
  line-height:1.18;
  margin-bottom:1.15rem;
}

.piece-desc{
  max-width:420px;
  font-size:.9rem;
  font-weight:300;
  line-height:1.84;
  color:rgba(44,43,40,.66);
  margin-bottom:1.9rem;
}

.piece-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.95rem 1.6rem;
}

.piece-meta span{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.18em;
  color:var(--sage);
  border-left:1.5px solid var(--sage);
  padding-left:.72rem;
}

.footer{
  padding:5rem 2rem 5.5rem;
  border-top:1px solid var(--line-soft);
}

.footer-shell{
  text-align:center;
}

.footer-mark{
  width:60px;
  height:auto;
  margin:0 auto 1.4rem;
}

.footer-name{
  font-family:var(--logo);
  font-size:1.45rem;
  font-weight:500;
  letter-spacing:.15em;
  margin-bottom:.45rem;
}

.footer-tagline{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:lowercase;
  color:var(--sage);
  margin-bottom:1.5rem;
}

.footer-note{
  max-width:540px;
  margin:0 auto 2rem;
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:300;
  line-height:1.8;
  color:rgba(44,43,40,.72);
}

.footer-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.9rem 1.4rem;
}

.footer-links a{
  font-family:var(--sans);
  font-size:.73rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(44,43,40,.66);
  padding-bottom:.2rem;
  border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease;
}

.footer-links a:hover{
  color:var(--graphite);
  border-color:var(--sage);
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes pulse{
  0%,100%{opacity:.3;transform:scaleY(1)}
  50%{opacity:.7;transform:scaleY(1.15)}
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease,transform .75s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:980px){
  .piece{
    grid-template-columns:1fr;
  }

  .piece:nth-of-type(even){
    direction:ltr;
  }

  .piece-image{
    min-height:52vw;
  }
}

@media(max-width:700px){
  .topbar{
    padding:.85rem 1rem;
    gap:.9rem;
  }

  .topbar-nav{
    gap:.7rem;
  }

  .topbar-nav a{
    font-size:.63rem;
    letter-spacing:.16em;
  }

  .hero{
    padding:2.75rem 1rem 2.4rem;
  }

  .hero-stage{
    width:min(100%, 320px);
  }

  .hero-mark{
    width:min(112px, calc(100vw - 6rem));
  }

  .hero-name{
    letter-spacing:.1em;
  }

  .hero-tagline{
    font-size:.46rem;
  }

  .hero-intro{
    font-size:.82rem;
    max-width:300px;
  }

  .section-shell{
    width:min(100% - 2rem, var(--section-max));
  }

  .portfolio{
    padding:2rem 1rem 5rem;
  }

  .piece-info{
    padding:2.2rem 1.35rem 2.6rem;
  }

  .piece-image{
    min-height:70vw;
    padding:2rem;
  }

  .piece-image svg{
    width:min(72%, 300px);
  }

  .footer{
    padding:4rem 1rem 4.5rem;
  }

  .footer-links{
    flex-direction:column;
    gap:.75rem;
  }
}

@media(max-height:820px){
  .hero{
    padding:2.4rem 1.5rem 1.9rem;
  }

  .hero-stage{
    width:min(100%, 360px);
  }

  .hero-mark{
    width:min(108px, calc(100vw - 7rem));
    margin-bottom:.8rem;
  }

  .hero-name{
    font-size:clamp(1.18rem,2vw,1.72rem);
    margin-bottom:.28rem;
  }

  .hero-tagline{
    font-size:.45rem;
    margin-bottom:.75rem;
  }

  .hero-intro{
    max-width:320px;
    font-size:.78rem;
    line-height:1.68;
  }

  .hero-scroll{
    bottom:.9rem;
    font-size:.52rem;
  }

  .hero-scroll::after{
    height:18px;
    margin-top:6px;
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .hero-mark,
  .hero-name,
  .hero-tagline,
  .hero-intro,
  .hero-scroll{
    animation:none;
    opacity:1;
  }

  .hero-scroll::after,
  .piece-image svg,
  .reveal{
    animation:none;
    transition:none;
  }

  .reveal{
    opacity:1;
    transform:none;
  }
}