:root{
  --cream: oklch(97% 0.012 75);
  --ink: oklch(18% 0.02 30);
  --ink-soft: oklch(42% 0.02 40);
  --rose: oklch(56% 0.10 25);
  --berry: oklch(40% 0.10 350);
  --amber: oklch(74% 0.07 78);
  --sage: oklch(52% 0.055 150);
  --plum: oklch(22% 0.05 340);
  --white: oklch(99% 0 0);
  --max: 1400px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; height:100%; }
body{
  margin:0; padding:0; background:var(--cream); color:var(--ink);
  font-family:"Karla", sans-serif; line-height:1.5;
  min-height:100%; display:flex; flex-direction:column;
}
main{ flex:1 0 auto; }
.site-footer{ flex-shrink:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- Header ---------- */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 5vw;
}
.site-title{
  display:flex; align-items:center; gap:10px;
  font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:600;
  font-size:24px; color:var(--cream);
}
.bloom{ width:26px; height:26px; flex:none; }
.site-nav a{
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  color:var(--cream); opacity:0.9;
}
.site-nav a:hover, .site-nav a.on{ color:var(--amber); opacity:1; }

/* ---------- Hero (home / category / piece) ---------- */
.hero{
  position:relative; overflow:hidden;
  height:min(88vh, 820px); min-height:520px;
  background-color:var(--plum);
  background-size:cover; background-position:center;
  background-attachment:fixed;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--cream);
}
.page-hero{ height:min(58vh, 560px); min-height:420px; }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(190deg,
    oklch(22% 0.05 340 / 0.68) 0%,
    oklch(22% 0.05 340 / 0.18) 40%,
    oklch(40% 0.10 350 / 0.30) 70%,
    oklch(56% 0.10 25 / 0.58) 100%);
}
.hero-content{
  position:relative; z-index:2;
  padding:0 5vw 72px 5vw;
  max-width:900px;
}
.hero-content h1{
  font-family:"Cormorant Garamond", serif; font-weight:600;
  font-size:clamp(38px, 5.5vw, 86px); line-height:1.05;
  margin:0 0 22px 0;
}
.hero-content .grad{
  font-style:italic;
  background:linear-gradient(120deg, var(--amber), var(--rose));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-content p{
  font-size:clamp(14px, 1.4vw, 18px); line-height:1.6;
  max-width:460px; margin:0 0 30px 0; opacity:0.92;
}
.eyebrow{
  font-size:13px; letter-spacing:4px; text-transform:uppercase;
  color:var(--amber); font-weight:600; margin-bottom:18px;
}
.crumb{
  display:inline-flex; width:fit-content; padding:7px 16px; border-radius:999px;
  background:linear-gradient(120deg, var(--berry), var(--rose));
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600;
  margin-bottom:16px;
}
.crumb a{ color:var(--cream); }
.back-link{
  display:inline-flex; align-items:center; gap:6px; width:fit-content;
  font-size:13px; letter-spacing:2px; text-transform:uppercase; font-weight:600;
  color:var(--cream); opacity:0.9; margin-bottom:16px;
}
.back-link:hover{ opacity:1; }
.cta{
  display:inline-flex; width:fit-content; font-weight:600; font-size:14px; letter-spacing:1px;
  padding:14px 30px; border-radius:999px; color:var(--plum);
  background:linear-gradient(120deg, var(--amber), var(--rose));
  box-shadow:0 16px 34px -14px oklch(56% 0.10 25 / 0.55);
}
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  color:var(--cream); font-size:22px; opacity:0.85; z-index:2;
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* Gradient hero (About -- no photo) */
.gradient-hero{
  background:linear-gradient(125deg, var(--berry), var(--rose) 55%, var(--amber));
  align-items:center; justify-content:center; text-align:center;
}
.gradient-hero .hero-overlay{ display:none; }
.bloom-big{ width:56px; height:56px; margin-bottom:22px; color:var(--cream); }

/* Piece (single-photo) page -- short band, image shown in full below,
   framed like a matted print rather than cropped into a hero band. */
.piece-hero{ height:220px; min-height:180px; }
.piece-hero .hero-content{ padding-bottom:0; }
.about-hero{ height:240px; min-height:200px; }
.about-hero .hero-content{ padding-bottom:0; }
.about-hero .eyebrow{ margin-bottom:0; }
.frame{ display:flex; justify-content:center; padding:56px 5vw 8px 5vw; }
.frame .mat{
  background:var(--white); padding:20px;
  box-shadow:0 22px 48px -22px oklch(40% 0.10 350 / 0.35);
  max-width:720px; width:100%;
}
.frame .mat img{ display:block; width:100%; height:auto; }

/* ---------- Rounded transition + section heads ---------- */
.tilt-cut{
  position:relative; background:var(--cream);
  margin-top:-48px; border-radius:48px 48px 0 0;
  padding-top:64px;
}
.section-head-wrap{ text-align:center; padding:0 5vw; }
.section-head-wrap h2{ font-family:"Cormorant Garamond", serif; font-weight:600; font-size:clamp(24px, 3vw, 34px); margin:0; }
.rule{
  width:72px; height:5px; border-radius:5px; margin:16px auto 40px auto;
  background:linear-gradient(90deg, var(--berry), var(--rose), var(--amber));
}
.empty-note{ text-align:center; color:var(--ink-soft); padding:0 5vw 40px 5vw; }

/* ---------- Equal-box grid (home categories, category gallery/pieces) ---------- */
.grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:300px; gap:24px;
  max-width:var(--max); margin:0 auto; padding:0 5vw 90px 5vw;
}
.tile-wrap{ padding:3px; border-radius:20px; background:var(--sage); }
.tile{ position:relative; height:100%; overflow:hidden; border-radius:17px; }
.tile img{ width:100%; height:100%; object-fit:cover; }
.tag{
  position:absolute; left:14px; bottom:14px; padding:8px 16px; border-radius:999px;
  background:linear-gradient(120deg, var(--berry), var(--rose));
  color:var(--cream); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  box-shadow:0 10px 20px -10px oklch(40% 0.10 350 / 0.5);
}

/* ---------- Piece detail ---------- */
.meta{ text-align:center; max-width:640px; margin:0 auto; padding:0 5vw; }
.meta p{ font-size:17px; line-height:1.7; color:var(--ink-soft); margin:0 0 40px 0; }
.piece-nav{
  display:flex; justify-content:center; flex-wrap:wrap; gap:18px;
  padding:36px 5vw 90px 5vw;
}
.piece-nav a{
  padding:13px 28px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:1px;
  background:linear-gradient(120deg, var(--amber), var(--rose)); color:var(--plum);
  box-shadow:0 12px 26px -14px oklch(56% 0.10 25 / 0.5);
}

/* ---------- About ---------- */
.about-wrap{
  display:flex; gap:60px; flex-wrap:wrap;
  max-width:var(--max); margin:0 auto; padding:0 5vw 100px 5vw;
}
.about-side{ flex:0 0 240px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.avatar{
  width:200px; height:200px; border-radius:50%; overflow:hidden;
  background:linear-gradient(145deg, oklch(90% 0.03 30), oklch(90% 0.025 150));
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  box-shadow:0 18px 36px -18px oklch(40% 0.10 350 / 0.35);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar span{
  font-family:"Cormorant Garamond", serif; font-style:italic; font-size:72px;
  background:linear-gradient(120deg, var(--berry), var(--rose));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-side h2{ font-family:"Cormorant Garamond", serif; font-weight:600; font-size:23px; margin:0 0 6px 0; }
.about-side .role{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); }
.about-bio{ flex:1; min-width:280px; max-width:560px; }
.about-bio p{ font-size:17px; line-height:1.75; margin:0 0 24px 0; }
.about-bio h1{
  font-family:"Cormorant Garamond", serif; font-weight:600; font-style:italic;
  font-size:34px; line-height:1.2; margin:0 0 18px 0;
}
.about-bio h2{
  font-family:"Cormorant Garamond", serif; font-weight:600;
  font-size:22px; color:var(--rose); margin:36px 0 14px 0;
}
.about-bio strong{ color:var(--rose); }

/* ---------- Footer ---------- */
.site-footer{
  background:linear-gradient(115deg, var(--berry), var(--rose) 55%, var(--amber));
  color:var(--cream); padding:44px 5vw; text-align:center;
}
.site-footer .bloom{ width:28px; height:28px; margin:0 auto 12px auto; color:var(--cream); }
.site-footer p{ margin:0; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; opacity:0.92; font-weight:600; }

/* ---------- 404 ---------- */
.not-found{ padding:180px 5vw 120px 5vw; text-align:center; }
.not-found h1{ font-family:"Cormorant Garamond", serif; font-size:36px; }

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  .hero{ background-attachment:scroll; height:640px; min-height:0; }
  .page-hero{ height:420px; }
  .gradient-hero{ height:340px; }
  .piece-hero{ height:160px; min-height:140px; }
  .about-hero{ height:200px; min-height:170px; }
  .hero-content{ padding:0 6vw 48px 6vw; }
  .frame{ padding:36px 6vw 4px 6vw; }
  .frame .mat{ padding:12px; }
  .grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:220px; gap:16px; padding:0 6vw 64px 6vw; }
  .tilt-cut{ margin-top:-32px; border-radius:32px 32px 0 0; padding-top:44px; }
  .about-wrap{ padding:0 6vw 64px 6vw; gap:36px; justify-content:center; }
  .site-header{ padding:18px 6vw; }
  .site-title{ font-size:16px; gap:8px; }
  .bloom{ width:20px; height:20px; }
}