/* ============================================
   STUDIO TER WEELE — SHARED STYLESHEET
   One file controls color, type, and spacing
   across every page. Change a value here and
   it updates everywhere the site is used.
   ============================================ */

:root{
  --black:#0a0a0a;
  --black-soft:#111110;
  --ivory:#f0ede4;
  --ivory-dim:rgba(240,237,228,0.62);
  --gold:#c9a54f;
  --gold-dim:rgba(201,165,79,0.6);
  --line:rgba(240,237,228,0.12);
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--ivory);
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.eyebrow, .label, nav a, .btn, .num{
  font-family:'Jost', sans-serif;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.6rem 5%;
  background:linear-gradient(to bottom, rgba(10,10,10,0.9), transparent);
}
nav .logo{font-family:'Cormorant Garamond', serif;font-size:1.3rem;letter-spacing:0.05em;}
nav ul{display:flex;gap:2.2rem;list-style:none;}
nav a{font-size:0.72rem;color:var(--ivory-dim);transition:color 0.3s ease;}
nav a:hover{color:var(--gold);}

/* ---------- HERO ---------- */
.hero{
  min-height:70vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:8rem 5% 4rem;
  border-bottom:1px solid var(--line);
}
.hero .eyebrow{font-size:0.75rem;color:var(--gold-dim);margin-bottom:1.4rem;}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  font-weight:300;line-height:1.05;
  max-width:900px;
}
.hero h1 em{font-style:italic;color:var(--gold);}
.hero .lede{
  margin-top:1.6rem;max-width:620px;
  font-size:1.25rem;color:var(--ivory-dim);
}
.hero-note{
  margin-top:1.2rem;font-family:'Jost',sans-serif;
  font-size:0.82rem;font-style:italic;color:var(--gold-dim);
  letter-spacing:0.02em;text-transform:none;max-width:600px;
}
.back-link{
  margin-top:2.4rem;font-family:'Jost',sans-serif;
  font-size:0.75rem;color:var(--ivory-dim);
  letter-spacing:0.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:0.5rem;
}
.back-link:hover{color:var(--gold);}

/* ---------- PROVENANCE NOTE ---------- */
.provenance{
  max-width:620px;margin-top:1.6rem;
  padding:1.2rem 1.4rem;
  border-left:2px solid var(--gold-dim);
  background:rgba(201,165,79,0.04);
  font-size:1.02rem;color:var(--ivory-dim);font-style:italic;
}

/* ---------- SECTION HEAD ---------- */
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:4rem 5% 2rem;flex-wrap:wrap;gap:1rem;
}
.section-head h2{font-size:2rem;font-weight:300;}
.section-head .eyebrow{font-size:0.75rem;color:var(--ivory-dim);}

/* ---------- WORKS GRID ---------- */
.works{padding:0 5% 5rem;}
.grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 2.5rem;
}
@media (max-width:800px){ .grid{grid-template-columns:1fr;} }

.work-frame{
  width:100%;aspect-ratio:4/5;
  background:var(--black-soft);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.work-frame img{width:100%;height:100%;object-fit:cover;}
.work-frame .placeholder-tag{
  font-family:'Jost',sans-serif;font-size:0.7rem;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold-dim);text-align:center;padding:1rem;
}
.work-title{
  margin-top:1.1rem;font-size:1.4rem;font-weight:300;
  display:flex;align-items:baseline;gap:0.7rem;
}
.work-title .num{font-size:0.7rem;color:var(--gold);}
.work-meta{margin-top:0.6rem;font-size:0.95rem;color:var(--ivory-dim);line-height:1.9;}
.work-meta .fill{color:var(--gold-dim);font-style:italic;}
.inquire-link{
  display:inline-block;margin-top:0.9rem;
  font-family:'Jost',sans-serif;font-size:0.72rem;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid var(--gold-dim);
  padding-bottom:2px;
}
.inquire-link:hover{color:var(--ivory);border-color:var(--ivory);}

/* ---------- STORY BLOCK ---------- */
.story{
  padding:4rem 5%;max-width:760px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.story p{font-size:1.2rem;color:var(--ivory-dim);margin-bottom:1.2rem;}
.story .to-fill{color:var(--gold-dim);font-style:italic;font-family:'Jost',sans-serif;font-size:0.85rem;}

/* ---------- CTA / RESERVE ---------- */
.cta-block{text-align:center;padding:5rem 5%;}
.cta-block .eyebrow{font-size:0.75rem;color:var(--gold-dim);}
.cta-block h2{margin-top:1rem;font-size:2rem;font-weight:300;}
.cta-block p.lede{font-size:1.2rem;color:var(--ivory-dim);max-width:560px;margin:1.2rem auto 2.2rem;}
.btn{
  display:inline-block;font-size:0.78rem;color:var(--black);
  background:var(--gold);padding:1.1rem 2.6rem;
  transition:background 0.3s ease;border:none;cursor:pointer;
}
.btn:hover{background:var(--ivory);}
.btn-outline{
  display:inline-block;font-size:0.78rem;color:var(--ivory);
  background:transparent;border:1px solid var(--gold-dim);
  padding:1.05rem 2.5rem;transition:all 0.3s ease;
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}

/* ---------- TERMS LIST (trade page) ---------- */
.terms-list{list-style:none;max-width:640px;}
.terms-list li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--line);
  font-size:1.15rem;gap:1rem;flex-wrap:wrap;
}
.terms-list li:last-child{border-bottom:none;}
.terms-list .label{font-family:'Jost',sans-serif;font-size:0.78rem;color:var(--ivory-dim);}
.terms-list .value{color:var(--ivory);}
.terms-list .fill{color:var(--gold-dim);font-style:italic;}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line);padding:3rem 5%;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-family:'Jost',sans-serif;font-size:0.75rem;color:var(--ivory-dim);
}
footer a:hover{color:var(--gold);}