/* The Hallway Art: shared styles for every page */
:root{
  --paper:#faf8f3;
  --paper-deep:#f1ede4;
  --ink:#1c1b19;
  --graphite:#55524c;
  --line:#d9d3c6;
  --accent:#8a7a5c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
a{color:inherit;text-decoration:none}

/* ---------- Nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem 4vw;
  background:linear-gradient(to bottom, rgba(250,248,243,.96), rgba(250,248,243,.82) 70%, transparent);
  backdrop-filter:blur(6px);
}
.wordmark{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
}
.wordmark span{color:var(--accent)}
nav ul{display:flex;gap:2.6rem;list-style:none}
nav ul a{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite);
  padding-bottom:4px;border-bottom:1px solid transparent;transition:all .25s;
}
nav ul a:hover,nav ul a[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent)}
.nav-cta{border:1px solid var(--ink);padding:.55rem 1.3rem;border-radius:99px;color:var(--ink)!important;transition:all .25s;white-space:nowrap}
.nav-cta:hover,.nav-cta[aria-current=page]{background:var(--ink);color:var(--paper)!important;border-bottom:1px solid var(--ink)!important}

/* ---------- Hero ---------- */
header{
  min-height:100vh;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:9rem 6vw 4rem 6vw;
}
.eyebrow{
  font-size:.75rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:1.6rem;
}
h1{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(2.6rem, 5vw, 4.6rem);
  line-height:1.08;letter-spacing:.01em;
  margin-bottom:1.8rem;
}
h1 em{font-style:italic;color:var(--graphite)}
.hero-copy p{max-width:26rem;color:var(--graphite);margin-bottom:2.6rem}
.btn-row{display:flex;gap:1.1rem;flex-wrap:wrap}
.btn{
  display:inline-block;padding:.9rem 2rem;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--ink);border-radius:99px;transition:all .25s;white-space:nowrap;
}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.hero-art{
  position:relative;overflow:hidden;background:var(--paper-deep);
}
.hero-art img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
}
.hero-caption{
  position:absolute;bottom:1.4rem;right:1.6rem;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:rgba(28,27,25,.55);padding:.45rem 1rem;border-radius:99px;backdrop-filter:blur(4px);
}

/* ---------- Section scaffolding ---------- */
section{padding:7rem 6vw;scroll-margin-top:3.5rem}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;margin-bottom:3.5rem;flex-wrap:wrap}
h2{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.1;
}
.section-head p{color:var(--graphite);max-width:24rem;font-size:.95rem}
.rule{width:100%;height:1px;background:var(--line)}

/* ---------- Page heading (Gallery and Commission pages) ---------- */
.page-head{padding:10rem 6vw 3rem}
.page-head h1{margin-bottom:1.2rem}
.page-head p{max-width:34rem;color:var(--graphite)}
.jump{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2.2rem;list-style:none}
.jump a{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite);
  padding-bottom:4px;border-bottom:1px solid var(--line);transition:all .25s;white-space:nowrap;
}
.jump a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.page-head + .rule + section{padding-top:4.5rem}

/* ---------- Closing invitation (Gallery page) ---------- */
.invite{text-align:center;background:var(--paper-deep)}
.invite h2{margin-bottom:1.2rem}
.invite p{color:var(--graphite);max-width:30rem;margin:0 auto 2.2rem}

/* ---------- About ---------- */
.about{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:center;
  background:var(--paper-deep);
}
.about-img{position:relative}
.about-img img{width:100%;height:auto;box-shadow:24px 24px 0 0 var(--paper), 24px 24px 0 1px var(--line)}
.about h2{margin-bottom:1.6rem}
.about p{color:var(--graphite);margin-bottom:1.2rem;max-width:34rem}
.signature{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:var(--ink);margin-top:1.6rem;
}

/* ---------- Galleries ---------- */
.masonry{
  columns:3;column-gap:1.6rem;
}
.piece{
  break-inside:avoid;margin-bottom:1.6rem;position:relative;overflow:hidden;cursor:pointer;
}
.piece a{display:block}
.piece img{width:100%;height:auto;transition:transform .6s ease}
.piece:hover img{transform:scale(1.03)}
.piece figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:2.2rem 1.2rem .9rem;
  background:linear-gradient(transparent, rgba(28,27,25,.72));
  color:#fff;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:all .35s ease;
}
.piece:hover figcaption{opacity:1;transform:none}

/* ---------- Quote ---------- */
.quote{
  text-align:center;padding:8rem 6vw;
}
.quote blockquote{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.35;max-width:46rem;margin:0 auto 1.6rem;
}
.quote cite{font-style:normal;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}

/* ---------- Commission ---------- */
.commission{
  background:var(--ink);color:var(--paper);
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.commission h2{color:var(--paper)}
.commission p{color:#b9b4a9;max-width:30rem;margin:1.4rem 0 2.4rem}
.commission .btn{border-color:var(--paper);color:var(--paper)}
.commission .btn:hover{background:var(--paper);color:var(--ink)}
.steps{list-style:none;display:grid;gap:1.8rem}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:baseline}
.steps .num{
  font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--accent);font-style:italic;
}
.steps b{display:block;font-weight:500;letter-spacing:.08em;margin-bottom:.2rem}
.steps span{color:#b9b4a9;font-size:.92rem}

/* ---------- Commission form ---------- */
.form{display:grid;gap:1.5rem;background:rgba(250,248,243,.04);border:1px solid #3a3733;padding:2.4rem}
.form label{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:#b9b4a9;display:block;margin-bottom:.5rem}
.form input,.form select,.form textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid #4a463f;
  color:var(--paper);font-family:'Jost',sans-serif;font-weight:300;font-size:1rem;
  padding:.5rem 0;outline:none;transition:border-color .25s;border-radius:0;
}
.form input:focus,.form select:focus,.form textarea:focus{border-bottom-color:var(--accent)}
.form select{cursor:pointer}
.form select option{color:var(--ink);background:var(--paper)}
.form textarea{resize:vertical;min-height:110px}
.form button.btn{
  justify-self:start;cursor:pointer;background:transparent;
  font-family:'Jost',sans-serif;border-color:var(--paper);color:var(--paper);
}
.form button.btn:hover{background:var(--paper);color:var(--ink)}
.form button.btn[disabled]{opacity:.55;cursor:wait}
.form-note{border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1rem;color:#d8d3c8;font-size:.92rem;line-height:1.6}
.form-note[hidden]{display:none}
.form-note a{color:var(--paper);border-bottom:1px solid var(--accent)}
.form-thanks{background:rgba(250,248,243,.04);border:1px solid #3a3733;padding:2.4rem}
.form-thanks h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2rem;line-height:1.15;color:var(--paper);margin-bottom:.6rem}
.form-thanks p{color:#b9b4a9;margin:0}

/* ---------- Footer ---------- */
footer{
  padding:4rem 6vw;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
}
footer .wordmark{font-size:1.1rem}
.contact-row{display:flex;gap:2.4rem;flex-wrap:wrap;font-size:.85rem;color:var(--graphite)}
.contact-row a:hover{color:var(--ink)}

@media (max-width:900px){
  header{grid-template-columns:1fr}
  .hero-art{min-height:56vh;order:-1}
  .hero-copy{padding-top:3rem}
  nav ul li.wide-only{display:none}
  nav ul{gap:1.6rem;align-items:center}
  .about{grid-template-columns:1fr;gap:3rem}
  .masonry{columns:2}
  .commission{grid-template-columns:1fr}
}
@media (max-width:560px){
  .masonry{columns:1}
  nav{padding:1rem 3vw;gap:.8rem}
  .wordmark{font-size:.92rem;letter-spacing:.1em}
  .nav-cta{padding:.42rem .8rem;font-size:.62rem;letter-spacing:.08em}
  nav ul{gap:.9rem}
  nav ul a:not(.nav-cta){font-size:.62rem;letter-spacing:.1em}
  .cta-long{display:none}
  .page-head{padding:7rem 5vw 2rem}
  section{padding:4.5rem 5vw}
  .quote{padding:5.5rem 6vw}
  .form,.form-thanks{padding:1.5rem}
  .about{gap:2.2rem}
  .about-img img{box-shadow:12px 12px 0 0 var(--paper), 12px 12px 0 1px var(--line)}
  .hero-copy{padding-bottom:3.5rem}
}