/* ============================================================
   Lane Dye Studio — design tokens (v1)
   Palette pulled from the glazes themselves:
   parchment/ink = stoneware body, clay = exposed foot-ring,
   indigo/sage/gold = the stained-glass panel colors
   ============================================================ */
:root{
  --parchment: #EEE7D9;
  --parchment-soft: #F5F0E6;
  --ink: #241C16;
  --ink-soft: #4A4038;
  --clay: #A6512B;
  --clay-deep: #7C3A1E;
  --indigo: #33435F;
  --sage: #74804B;
  --gold: #C99A3D;
  --line: rgba(36,28,22,0.14);
  --hairline: rgba(36,28,22,0.09);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-0.01em;}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* -------------------- Nav -------------------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);
  background:rgba(238,231,217,0.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site-nav.scrolled{border-bottom-color:var(--line);}
.wordmark{
  display:inline-flex;align-items:flex-end;gap:14px;
  font-family:var(--display);
  font-size:15px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.wordmark-icon{height:42px;width:auto;display:block;flex:none;}
.wordmark-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left;gap:3px;}
.wordmark-text span{color:var(--clay);}
.nav-links{display:flex;gap:clamp(18px,3vw,36px);list-style:none;margin:0;padding:0;}
.nav-links a{
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--clay);
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1);transform-origin:left;}
.nav-links a.active{color:var(--clay-deep);}

/* -------------------- Buttons / small links -------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:0.1em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--ink);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--ink);color:var(--parchment);}
.btn.alt{border-color:var(--clay);color:var(--clay-deep);}
.btn.alt:hover{background:var(--clay);color:var(--parchment-soft);border-color:var(--clay);}

/* -------------------- Hero -------------------- */
.hero{
  position:relative;
  display:flex;align-items:flex-end;
  width:100%;
  aspect-ratio:2/1;
  min-height:460px;
  max-height:88vh;
  overflow:hidden;
}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 45%;
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, rgba(10,8,6,0) 38%, rgba(10,8,6,0.42) 100%),
    linear-gradient(180deg, rgba(20,15,11,0) 0%, rgba(20,15,11,0.10) 48%, rgba(16,12,9,0.66) 100%);
}
.hero-content{
  position:relative;z-index:2;color:var(--parchment-soft);
  padding:0 var(--pad) clamp(48px,9vh,120px);
  width:100%;
}
.hero-eyebrow{
  font-size:12px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;display:block;
  text-shadow:0 2px 14px rgba(0,0,0,0.6);
}
.hero h1{
  font-size:clamp(2.4rem,5.4vw,4.2rem);
  line-height:1.04;
  max-width:15ch;
  text-shadow:0 2px 12px rgba(0,0,0,0.4);
}
.hero p{
  max-width:46ch;margin-top:16px;font-size:17px;
  color:rgba(245,240,230,0.95);
  text-shadow:0 1px 8px rgba(0,0,0,0.45);
}
.hero-location{
  display:block;margin-top:12px;
  font-size:13px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 1px 8px rgba(0,0,0,0.5);
}

/* -------------------- Section scaffolding -------------------- */
section{padding:clamp(56px,9vw,110px) 0;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:clamp(28px,4vw,52px);
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
}
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);}
.section-num{
  font-family:var(--body);font-size:12px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* -------------------- Gallery / arch cards (signature element) -------------------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px 28px;
}
.piece{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.piece.in-view{opacity:1;transform:translateY(0);}
.piece-frame{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  aspect-ratio:4/5;
}
.piece-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);
  transition:transform .6s ease;
}
.piece:hover .piece-frame img{transform:scale(1.06);}
.piece-cap{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:12px;border-top:2px solid var(--clay);
}
.piece[data-cat="glass"] .piece-cap{border-top-color:var(--indigo);}
.piece-title{font-family:var(--display);font-size:15px;}
.piece-med{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);}

/* -------------------- Selected Work collage (homepage) -------------------- */
.collage{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.collage-col{
  display:flex;
  flex-direction:column;
  gap:24px;
  flex:1;
  min-width:0;
}
.collage-item{
  position:relative;
  display:block;
  overflow:hidden;
  cursor:pointer;
  background:var(--bg-alt, var(--parchment-soft));
  box-shadow:0 1px 3px rgba(36,28,22,0.18);
  transition:box-shadow .4s ease, transform .4s ease;
}
.collage-item img{
  width:100%;height:auto;display:block;
  transition:transform .6s cubic-bezier(.22,.8,.28,1);
}
.collage-item:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(36,28,22,0.24);
  z-index:5;
}
.collage-item:hover img{transform:scale(1.06);}
.collage-caption{
  position:absolute;inset:auto 0 0 0;
  padding:16px 18px;
  background:linear-gradient(180deg, rgba(36,28,22,0) 0%, rgba(22,16,12,0.85) 100%);
  color:var(--parchment-soft);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.22,.8,.28,1);
}
.collage-item:hover .collage-caption{transform:translateY(0);}
.collage-caption .t{font-family:var(--display);font-size:14px;display:block;line-height:1.3;}
.collage-caption .m{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;}

@media (prefers-reduced-motion: reduce){
  .collage-item, .collage-item img, .collage-caption{transition:none;}
}
.statement{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:32px;
  align-items:start;
  padding-top:44px;
  padding-bottom:44px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.statement-label{
  font-family:var(--display);font-weight:600;letter-spacing:-0.01em;
  font-size:clamp(1.6rem,3vw,2.3rem);
  color:var(--ink);
}
.statement-text{
  font-family:var(--body);font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  max-width:72ch;
  margin:0;
}
@media (max-width:700px){
  .statement{grid-template-columns:1fr;gap:14px;}
}

/* -------------------- Footer -------------------- */
footer{
  padding:36px var(--pad) 48px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);
  flex-wrap:wrap;gap:14px;
}

/* -------------------- Multi-photo piece groups (Work page) -------------------- */
.piece-group .piece-frame{position:relative;}
.piece-thumbs{
  position:absolute;left:10px;right:10px;bottom:10px;
  display:flex;gap:8px;flex-wrap:wrap;
}
.piece-thumbs button{
  width:32px;height:32px;flex:none;
  border-radius:2px;border:2px solid rgba(245,240,230,0.9);
  background-size:cover;background-position:center;
  cursor:pointer;padding:0;
  opacity:.72;transition:opacity .2s ease, transform .2s ease, border-color .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.35);
}
.piece-thumbs button:hover{opacity:1;}
.piece-thumbs button.active{opacity:1;border-color:var(--clay);transform:translateY(-2px);}
.piece-view-count{color:var(--ink-soft);}

/* -------------------- Lightbox (Work page) -------------------- */
.piece-frame img{cursor:zoom-in;}
.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(18,17,16,0.94);
  display:flex;align-items:center;justify-content:center;
  padding:56px;
}
.lightbox[hidden]{display:none;}
.lightbox-img{
  max-width:88vw;max-height:84vh;
  width:auto;height:auto;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close{
  position:absolute;top:20px;right:24px;
  background:none;border:none;color:var(--parchment-soft);
  font-size:34px;line-height:1;cursor:pointer;
  padding:8px;font-family:var(--body);
}
.lightbox-prev,.lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--parchment-soft);
  font-size:42px;line-height:1;cursor:pointer;padding:12px 18px;
  opacity:0.65;transition:opacity .2s ease;
  font-family:var(--body);
}
.lightbox-prev:hover,.lightbox-next:hover{opacity:1;}
.lightbox-prev{left:8px;}
.lightbox-next{right:8px;}
@media (max-width:640px){
  .lightbox{padding:24px;}
  .lightbox-prev,.lightbox-next{font-size:32px;padding:10px;}
}
.tabs{display:flex;gap:clamp(20px,4vw,40px);margin-bottom:8px;}
.tab{
  font-family:var(--display);font-size:clamp(1.1rem,2vw,1.5rem);
  color:var(--ink-soft);position:relative;padding-bottom:10px;cursor:pointer;
  background:none;border:none;font-weight:600;letter-spacing:-0.01em;
}
.tab::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--clay);transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.tab[data-cat="glass"]::after{background:var(--indigo);}
.tab.active{color:var(--ink);}
.tab.active::after{transform:scaleX(1);}

.empty-state{
  border:1px dashed var(--line);padding:56px 32px;text-align:center;
  color:var(--ink-soft);
}
.empty-state h3{font-size:1.3rem;margin-bottom:10px;color:var(--ink);}
.empty-state p{max-width:42ch;margin:0 auto;}

/* -------------------- About -------------------- */
.about-grid{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(32px,6vw,80px);
  align-items:start;
}
.portrait-frame{aspect-ratio:4/5;}
.about-statement p{font-size:17px;line-height:1.6;color:var(--ink-soft);margin:0 0 16px;max-width:56ch;}
.about-statement .about-lead{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--clay-deep);line-height:1.4;
  margin:0 0 20px;
}
.about-photos{display:grid;gap:20px;}
.about-meta{margin-top:36px;padding-top:28px;border-top:1px solid var(--line);}
.about-meta dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:14px;}
.about-meta dt{color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.08em;font-size:11px;padding-top:2px;}
.about-meta dd{margin:0;}

/* -------------------- Contact -------------------- */
.contact-stack{max-width:56ch;}
.contact-email{
  font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.6rem);
  color:var(--clay-deep);word-break:break-word;
  border-bottom:2px solid var(--clay);display:inline-block;padding-bottom:6px;
}
.contact-note{margin-top:22px;max-width:48ch;color:var(--ink-soft);}
.contact-links{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:12px;}
.contact-links a{font-size:14px;letter-spacing:0.04em;}
.contact-meta{margin-top:40px;padding-top:28px;border-top:1px solid var(--line);}
.contact-meta-label{
  display:block;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:12px;
}
.contact-meta p{font-size:15px;color:var(--ink-soft);max-width:52ch;margin:0;}

@media (max-width:860px){
  .gallery{grid-template-columns:repeat(2, 1fr);}
  .about-grid{grid-template-columns:1fr;}
  .about-photos{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .hero{min-height:100vh;min-height:100svh;}
  .gallery{grid-template-columns:1fr;}
  .site-nav{padding:16px 20px;}
  .wordmark{gap:9px;font-size:11px;}
  .wordmark-icon{height:30px;}
  .nav-links{gap:13px;}
  .nav-links a{font-size:10.5px;}
  .section-head{gap:12px;}
  .section-head .btn{font-size:10.5px;padding:10px 14px;white-space:nowrap;}
  .about-photos{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .piece{transition:none;opacity:1;transform:none;}
  .piece-frame img{transition:none;}
}