:root{
  --cream:#f4ede0;
  --cream-2:#e8dfc9;
  --cream-3:#ede4cf;
  --ink:#1d1a14;
  --ink-2:#2a2620;
  --gold:#b89968;
  --gold-d:#8d7445;
  --gold-l:#d4bb8b;
  --mute:#7a7367;
  --rule:rgba(141,116,69,0.45);
  --serif:"Cormorant Garamond", "Cormorant", "Times New Roman", serif;
  --mono:"DM Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:var(--cream); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  font-size:17px;
  line-height:1.5;
  overflow-x:hidden;
  font-feature-settings:"liga","dlig","kern";
}

a{color:inherit; text-decoration:none;}
button{font:inherit; background:none; border:0; color:inherit; cursor:pointer; padding:0;}
ul{list-style:none; margin:0; padding:0;}

.skip{position:absolute; left:-9999px; top:0;}
.skip:focus{left:1rem; top:1rem; background:var(--ink); color:var(--cream); padding:.5rem .75rem; z-index:100;}

::selection{background:var(--gold); color:var(--cream);}

/* ------------ Topbar ------------ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:22px 36px;
  mix-blend-mode:multiply;
}
.topbar__inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:32px;
}
.mark{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--ink);
}
.mark__glyph{width:22px; height:22px; color:var(--ink); opacity:.92;}
.mark__type{
  font-family:var(--mono); font-weight:400; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
}
.mark__type em{ color:var(--gold-d); font-style:normal; padding:0 .2em;}
.nav ul{
  display:flex; gap:30px; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
}
.nav a{ position:relative; padding:6px 0; opacity:.86; transition: opacity .5s ease;}
.nav a:hover{ opacity:1;}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold-d);
  transform:scaleX(0); transform-origin:left;
  transition: transform .7s cubic-bezier(.2,.7,.1,1);
}
.nav a:hover::after{ transform:scaleX(1);}
.lang{
  justify-self:end;
  display:inline-flex; gap:10px; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
}
.lang__btn{ opacity:.55; transition: opacity .5s;}
.lang__btn.is-active, .lang__btn:hover{ opacity:1; color:var(--gold-d);}
.lang__sep{ opacity:.4;}

/* ------------ Section labels ------------ */
.section-label{
  font-family:var(--mono); font-weight:400; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--mute);
  margin:0;
}
.section-label--gold{ color:var(--gold-d);}

/* ------------ Hero ------------ */
.hero{
  position:relative;
  min-height:100vh;
  padding:140px 36px 80px;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(184,153,104,0.08), transparent 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(141,116,69,0.08), transparent 60%);
  pointer-events:none;
}

.rule{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center; gap:24px;
  padding:24px 0 64px;
}
.rule__line{
  display:block;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-d) 12%, var(--gold-d) 88%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  opacity:.7;
}
.rule__label{
  font-family:var(--mono); font-size:10.5px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-d);
  white-space:nowrap;
  opacity:0;
}

.hero__inner{
  position:relative; z-index:2;
  max-width:1480px; margin:0 auto;
}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mute);
  margin:0 0 28px;
  opacity:0;
}
.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size: clamp(80px, 14vw, 240px);
  line-height:.95;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
}
.hero__line{ display:block;}
.hero__line--it{ padding-left: clamp(40px, 8vw, 180px);}
.hero__line--it em{ font-style:italic; font-weight:300;}
.hero__mask{ display:block; overflow:hidden; padding:0 .04em .12em;}
.hero__word{ display:block; visibility:hidden;}

.hero__foot{
  margin-top:56px;
  display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:end;
}
.hero__sub{
  font-family:var(--mono); font-size:12px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute);
  margin:0; max-width:540px;
  opacity:0;
}
.hero__cta{
  display:inline-flex; align-items:baseline; gap:14px;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:22px; color:var(--ink);
  border-bottom:1px solid var(--rule);
  padding-bottom:6px;
  opacity:0;
  transition: gap .8s cubic-bezier(.2,.7,.1,1), border-color .5s;
}
.hero__cta:hover{ gap:22px; border-color:var(--gold-d);}
.hero__cta-arrow{ font-style:normal; color:var(--gold-d); font-size:18px;}

.ornament{
  position:absolute;
  right: 36px; top: 220px;
  width:120px; height:60px;
  color:var(--gold-d);
  opacity:0;
}

.hero__edge{
  position:absolute; left:36px; bottom:36px;
  display:flex; gap:16px; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute);
}
.hero__edge-num{ color:var(--gold-d);}

/* ------------ Atelier ------------ */
.atelier{
  position:relative;
  padding: 160px 36px 160px;
  background:var(--cream);
}
.atelier__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  max-width:1480px; margin:0 auto;
  align-items:start;
}
.atelier__copy{ padding-right:24px; max-width:640px;}
.atelier__quote{
  margin:48px 0 80px;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size: clamp(40px, 5vw, 80px);
  line-height:1.04; letter-spacing:-0.015em;
  color:var(--ink);
}
.atelier__quote p{ margin:0;}
.atelier__quote em{ color:var(--gold-d); font-style:italic;}
.atelier__quote cite{
  display:block;
  margin-top:36px;
  font-style:normal;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute);
}
.atelier__list{
  display:flex; flex-direction:column; gap:36px;
  border-top:1px solid var(--rule);
  padding-top:36px;
}
.atelier__item{
  display:grid; grid-template-columns: 60px 1fr; gap:24px;
  padding-bottom:36px;
  border-bottom:1px solid var(--rule);
}
.atelier__item:last-child{ border-bottom:0; padding-bottom:0;}
.atelier__num{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-d);
  padding-top:8px;
}
.atelier__item h3{
  margin:0 0 8px;
  font-family:var(--serif); font-weight:400; font-size:26px;
  letter-spacing:-0.01em;
}
.atelier__item h3 em{ font-style:italic; font-weight:300; color:var(--mute);}
.atelier__sep{ color:var(--gold-d); padding:0 .2em;}
.atelier__item p{ margin:0; color:var(--mute); font-size:16px; line-height:1.55;}

.atelier__visual{
  position:relative;
  height: 92vh;
}
.fabric{
  position:absolute; inset:0;
  overflow:hidden;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path, transform;
}
.fabric__panel{
  position:absolute; inset:-4% -4%;
  background:
    linear-gradient(135deg,
      #b89968 0%,
      #e8dfc9 18%,
      #f4ede0 35%,
      #d4bb8b 50%,
      #8d7445 70%,
      #5a4623 100%);
  background-size: 140% 140%;
  background-position: 0% 0%;
  filter: saturate(1.05);
}
.fabric__panel::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      118deg,
      rgba(29,26,20,0.0) 0px,
      rgba(29,26,20,0.0) 22px,
      rgba(29,26,20,0.06) 23px,
      rgba(29,26,20,0.0) 24px
    ),
    repeating-linear-gradient(
      62deg,
      rgba(244,237,224,0.0) 0px,
      rgba(244,237,224,0.0) 38px,
      rgba(244,237,224,0.10) 39px,
      rgba(244,237,224,0.0) 40px
    );
  mix-blend-mode: overlay;
  opacity:.7;
}
.fabric__panel::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(244,237,224,0.4), transparent 60%),
    radial-gradient(50% 70% at 80% 90%, rgba(29,26,20,0.35), transparent 60%);
  mix-blend-mode: soft-light;
}
.fabric__shadow{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(29,26,20,0.18), transparent 35%, transparent 70%, rgba(29,26,20,0.22));
  pointer-events:none;
}
.fabric__shine{
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 35%, rgba(244,237,224,0.18) 48%, transparent 62%);
  mix-blend-mode: screen;
  opacity:.55;
  pointer-events:none;
}
.fabric__caption{
  position:absolute; left:24px; bottom:24px;
  display:flex; flex-direction:column; gap:4px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cream);
  text-shadow: 0 1px 8px rgba(29,26,20,.4);
  z-index:2;
}

/* ------------ Collection ------------ */
.collection{
  padding: 180px 36px 160px;
  background: var(--cream);
  position:relative;
}
.collection::before{
  content:""; position:absolute; left:36px; right:36px; top:0;
  height:1px; background: linear-gradient(90deg, transparent, var(--rule), transparent);
}
.collection__head{
  max-width:1480px; margin: 0 auto 100px;
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:end;
}
.collection__title{
  margin:18px 0 0;
  font-family:var(--serif); font-weight:300;
  font-size: clamp(56px, 8vw, 140px);
  line-height:.95; letter-spacing:-0.02em;
}
.collection__title em{ font-style:italic; color:var(--gold-d);}
.collection__intro{
  margin:0;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size: clamp(18px, 1.4vw, 22px);
  color:var(--mute); max-width:420px; line-height:1.5;
  justify-self:end;
}

.grid{
  max-width:1480px; margin:0 auto;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 8vh;
  gap: 28px 28px;
}
.piece{ position:relative;}
.piece__image{
  width:100%; height:100%;
  position:relative; overflow:hidden;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
  background: var(--cream-2);
}
.piece__body{
  padding-top:18px;
  display:flex; flex-direction:column;
  opacity:0;
}
.piece__num{
  margin:0 0 6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-d);
}
.piece__title{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size: clamp(22px, 1.8vw, 30px);
  letter-spacing:-0.01em;
  position:relative;
  display:inline-block;
  padding-bottom:6px;
}
.piece__under{
  position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold-d);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.2,.7,.1,1);
}
.piece__desc{
  margin:6px 0 0;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size: 17px; color:var(--mute);
}
.piece--hoverable .piece__title{ }
.piece--hoverable:hover .piece__under{ transform: scaleX(1);}

.piece--a{ grid-column: 1 / span 4; grid-row: span 8;}
.piece--b{ grid-column: 6 / span 5; grid-row: span 6;}
.piece--c{ grid-column: 1 / span 3; grid-row: span 5;}
.piece--d{ grid-column: 5 / span 3; grid-row: span 7;}
.piece--e{ grid-column: 9 / span 4; grid-row: span 9;}

.piece__image--a{
  background:
    radial-gradient(120% 90% at 30% 20%, #efe3c8 0%, #d8c6a0 45%, #b89968 100%);
}
.piece__image--a .piece__rule{
  position:absolute; left:8%; right:8%; bottom:14%;
  height:1px; background:var(--gold-d); opacity:.6;
}
.piece__image--b{
  background:
    radial-gradient(140% 100% at 70% 30%, #3a3225 0%, #1d1a14 60%),
    linear-gradient(115deg, #1d1a14, #2a2620);
  background-blend-mode: screen;
  position:relative;
}
.piece__image--b::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 60% at 78% 30%, rgba(212,187,139,0.55), transparent 60%),
    repeating-linear-gradient(120deg, transparent 0 30px, rgba(184,153,104,0.06) 31px, transparent 32px);
}
.piece__image--c{
  background:
    radial-gradient(120% 80% at 20% 80%, #4a1820 0%, #2c0e15 60%, #1a060a 100%);
  position:relative;
}
.piece__image--c::after{
  content:""; position:absolute; left:6%; right:6%; top:50%;
  height:1px; background:var(--gold); opacity:.85; transform:translateY(-.5px);
}
.piece__highlight{
  position:absolute; right:14%; top:18%; width:42%; height:42%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(212,187,139,0.45), transparent 70%);
  filter: blur(2px);
}
.piece__image--d{
  background:
    linear-gradient(160deg, #f4ede0 0%, #e8dfc9 60%, #ede4cf 100%);
  position:relative;
}
.piece__image--d::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(141,116,69,0.05) 61px, transparent 62px),
    radial-gradient(80% 60% at 50% 100%, rgba(141,116,69,0.08), transparent 60%);
}
.piece__image--e{
  background:
    radial-gradient(120% 100% at 50% 60%, #14110c 0%, #0a0807 70%);
  position:relative;
}
.piece__image--e::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(184,153,104,0.04) 9px, transparent 10px);
}
.piece__spark{
  position:absolute; left:50%; top:38%;
  width:1px; height:42%;
  background: linear-gradient(180deg, transparent, var(--gold-l) 30%, var(--gold-d) 70%, transparent);
  transform: translateX(-.5px);
  opacity:.85;
}
.piece__spark::after{
  content:""; position:absolute; left:50%; top:50%;
  width:14px; height:14px; transform:translate(-50%,-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(212,187,139,0.55), transparent 70%);
  border-radius:50%;
}

/* ------------ Journal ------------ */
.journal{
  padding: 160px 36px 100px;
  background:var(--cream);
  border-top: 1px solid var(--rule);
}
.journal__head{
  max-width:1480px; margin:0 auto 80px;
  display:grid; grid-template-columns: 1fr 2fr; gap:60px; align-items:end;
}
.journal__title{
  margin:18px 0 0;
  font-family:var(--serif); font-weight:300;
  font-size: clamp(48px, 6vw, 110px);
  line-height:.95; letter-spacing:-0.02em;
}
.journal__title em{ font-style:italic;}

.journal__list{
  max-width:1480px; margin:0 auto;
  border-top:1px solid var(--rule);
}
.journal__entry{
  display:grid; grid-template-columns: 180px 1fr auto;
  align-items:baseline; gap:32px;
  padding: 36px 0;
  border-bottom:1px solid var(--rule);
  cursor:pointer;
  position:relative;
}
.journal__date{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-d);
}
.journal__h{
  margin:0;
  font-family:var(--serif); font-weight:300;
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing:-0.015em;
  transition: transform .9s cubic-bezier(.2,.7,.1,1), color .5s;
}
.journal__h em{ font-style:italic;}
.journal__arrow{
  font-family:var(--serif); font-size:22px; color:var(--mute);
  transition: transform .9s cubic-bezier(.2,.7,.1,1), color .5s;
}
.journal__entry:hover .journal__h{ transform: translateX(12px); color:var(--gold-d);}
.journal__entry:hover .journal__arrow{ transform: translateX(8px); color:var(--gold-d);}

.closing{
  max-width:1480px; margin: 220px auto 80px;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size: clamp(48px, 6vw, 100px);
  line-height:1.02; letter-spacing:-0.02em;
  color:var(--ink);
  text-align:center;
}
.closing__line{ display:block; overflow:hidden; padding: 0 .04em .14em;}
.closing__inner{ display:inline-block;}
.closing__inner em{ font-style:italic;}

/* ------------ Footer ------------ */
.footer{
  background: var(--cream);
  border-top:1px solid var(--rule);
  padding: 80px 36px 36px;
  color:var(--ink);
}
.footer__cols{
  max-width:1480px; margin:0 auto;
  display:grid; grid-template-columns: 1.2fr 1.5fr 1fr 1fr; gap:60px;
  padding-bottom:60px;
  border-bottom:1px solid var(--rule);
}
.footer__col p{ margin: 14px 0; font-size:15px; color:var(--ink-2); line-height:1.55;}
.footer__col .section-label{ margin-bottom:18px;}
.footer__links li{ margin: 8px 0;}
.footer__links a{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink); position:relative; padding-bottom:2px; border-bottom:1px solid transparent; transition: border-color .6s;}
.footer__links a:hover{ border-color:var(--gold-d);}
.footer__col--mark{ text-align:right;}
.footer__col--mark svg{ width:34px; height:34px; color:var(--ink); margin-bottom:12px;}
.footer__col--mark p{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--mute);}
.footer__col--mark em{ font-style:italic; color:var(--ink);}
.footer__base{
  max-width:1480px; margin: 28px auto 0;
  display:flex; justify-content:space-between; gap:20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute);
}

/* ------------ Responsive ------------ */
@media (max-width: 900px){
  .topbar{ padding:18px 22px; mix-blend-mode:normal; background: linear-gradient(180deg, rgba(244,237,224,.95), rgba(244,237,224,0));}
  .topbar__inner{ grid-template-columns: 1fr auto;}
  .nav{ display:none;}
  .hero{ padding: 120px 22px 60px;}
  .rule{ grid-template-columns: 1fr; gap:14px; padding: 14px 0 44px; text-align:center;}
  .rule__line{ height:1px;}
  .hero__title{ font-size: clamp(56px, 16vw, 110px);}
  .hero__line--it{ padding-left: 0;}
  .hero__foot{ grid-template-columns: 1fr; gap:36px;}
  .ornament{ display:none;}
  .hero__edge{ display:none;}
  .atelier{ padding: 100px 22px 100px;}
  .atelier__inner{ grid-template-columns: 1fr; gap:60px;}
  .atelier__copy{ max-width:none; padding-right:0;}
  .atelier__quote{ font-size: clamp(34px, 9vw, 56px); margin:32px 0 56px;}
  .atelier__visual{ height: 70vh;}
  .collection{ padding: 100px 22px 100px;}
  .collection__head{ grid-template-columns: 1fr; gap:24px;}
  .collection__intro{ justify-self:start;}
  .collection__title{ font-size: clamp(44px, 12vw, 72px);}
  .grid{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 56px;
  }
  .piece--a,.piece--b,.piece--c,.piece--d,.piece--e{
    grid-column: 1 / -1;
  }
  .piece__image{ aspect-ratio: 4/5;}
  .piece--b .piece__image{ aspect-ratio: 4/3;}
  .piece--c .piece__image{ aspect-ratio: 1/1;}
  .piece--d .piece__image{ aspect-ratio: 3/4;}
  .piece--e .piece__image{ aspect-ratio: 4/5;}
  .journal{ padding: 100px 22px 60px;}
  .journal__head{ grid-template-columns: 1fr; gap:18px;}
  .journal__title{ font-size: clamp(38px, 10vw, 60px);}
  .journal__entry{ grid-template-columns: 1fr; gap:8px; padding: 28px 0;}
  .journal__arrow{ display:none;}
  .closing{ font-size: clamp(34px, 9vw, 60px); margin:120px auto 60px;}
  .footer{ padding: 60px 22px 28px;}
  .footer__cols{ grid-template-columns: 1fr 1fr; gap:36px;}
  .footer__col--mark{ text-align:left;}
  .footer__base{ flex-direction:column; gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important;}
}