/* ============================================================
   Chantel Zalai Skalns — Handwoven Textile Art
   Shared stylesheet for all pages
   ============================================================ */

:root{
  --linen:#F8F3E9;
  --paper:#FFFDF9;
  --ink:#372D22;
  --ink-soft:#6E6152;
  --ochre:#B98A52;
  --indigo:#5C7285;
  --rust:#C06341;
  --line: rgba(55,45,34,0.13);
  --line-soft: rgba(55,45,34,0.07);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--linen);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}

.eyebrow{
  font-family:'Work Sans', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ochre);
  font-weight:600;
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:450;
  line-height:1.05;
  color:var(--ink);
}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(248,243,233,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.25rem;
  letter-spacing:0.01em;
  text-decoration:none;
}
nav.links{display:flex; gap:36px; font-size:0.9rem;}
nav.links a{text-decoration:none; color:var(--ink-soft); position:relative; padding-bottom:2px;}
nav.links a:hover, nav.links a[aria-current="page"]{color:var(--ink);}
nav.links a[aria-current="page"]{border-bottom:1px solid var(--ochre);}
nav.links a:focus-visible, .brand:focus-visible, .btn:focus-visible{outline:2px solid var(--indigo); outline-offset:3px;}

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--ink); padding:4px 6px;
}
.nav-toggle:focus-visible{outline:2px solid var(--indigo); outline-offset:3px;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:2px;
  font-size:0.88rem;
  letter-spacing:0.03em;
  text-decoration:none;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--indigo);}
.btn-ghost{border:1px solid var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}

section{position:relative; padding:96px 0;}
section + section{border-top:1px solid var(--line-soft);}

/* ---------- HERO (homepage) ---------- */
.hero{position:relative; overflow:hidden; padding:88px 0 0;}
.hero .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.hero-copy .eyebrow{margin-bottom:22px; display:block;}
.hero-copy h1{font-size:clamp(2.6rem, 4.6vw, 4.1rem); max-width:11ch;}
.hero-copy h1 em{font-style:italic; font-weight:400; color:var(--ochre);}
.hero-copy p{margin-top:26px; max-width:46ch; color:var(--ink-soft); font-size:1.05rem;}
.hero-actions{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}
.hero-image{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--paper);}
.hero-image img{width:100%; height:100%; object-fit:cover; object-position:center 20%;}
.hero-image .cap{
  position:absolute; bottom:0; left:0; right:0; padding:16px 18px;
  background:linear-gradient(0deg, rgba(43,36,29,0.55), transparent);
  color:#F8F4EA; font-size:0.78rem; letter-spacing:0.03em;
}
.fringe-divider{height:1px; margin-top:80px; background:var(--line);}

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{padding:160px 0 64px;}
.page-hero .eyebrow{display:block; margin-bottom:18px;}
.page-hero h1{font-size:clamp(2.2rem, 4vw, 3.3rem); max-width:18ch;}
.page-hero p.intro{color:var(--ink-soft); max-width:62ch; margin-top:22px; font-size:1.05rem;}
.page-hero-media{margin-top:48px; max-width:640px;}
.page-hero-media img{width:100%;}
.page-hero-media .cap{margin-top:12px; font-size:0.85rem; color:var(--ink-soft); font-style:italic;}

.intro-split{display:grid; grid-template-columns:1.2fr 0.8fr; gap:56px; align-items:center;}
.intro-split-media{border-radius:4px; overflow:hidden; aspect-ratio:4/5;}
.intro-split-media img{width:100%; height:100%; object-fit:cover;}

/* ---------- ABOUT / STORY (two-col text+image) ---------- */
.about .wrap, .story-section .wrap{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;
}
.about-portrait{position:sticky; top:120px;}
.about-portrait img{width:100%; filter:grayscale(0.06);}
.about-text .eyebrow{margin-bottom:18px;}
.about-text h2, .story-text h2{font-size:clamp(1.9rem, 3vw, 2.6rem); max-width:16ch; margin-bottom:28px;}
.about-text p, .story-text p{color:var(--ink-soft); max-width:60ch; margin-bottom:20px; font-size:1.02rem;}
.about-text p.lede, .story-text p.lede{
  font-family:'Fraunces', serif; font-style:italic; font-size:1.28rem;
  color:var(--ink); line-height:1.5; margin-bottom:30px;
}
.signoff{margin-top:32px; font-family:'Fraunces', serif; font-style:italic; color:var(--ochre); font-size:1.05rem;}

/* ---------- STORY PAGE ---------- */
.story-section{padding:80px 0;}
.story-section .story-image img{width:100%;}
.story-section.reverse .wrap{grid-template-columns:1.1fr 0.9fr;}
.story-section.reverse .story-image{order:2;}
.story-section.reverse .story-text{order:1;}

/* ---------- PROCESS ---------- */
.process{background:var(--paper);}
.process .eyebrow{display:block; margin-bottom:18px;}
.process h2{font-size:clamp(1.9rem, 3vw, 2.6rem); max-width:16ch; margin-bottom:20px;}
.process > .wrap > p{color:var(--ink-soft); max-width:60ch; margin-bottom:56px; font-size:1.02rem;}
.process-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.process-card{background:var(--paper); padding:36px 30px;}
.process-card .num{font-family:'Fraunces', serif; font-style:italic; color:var(--ochre); font-size:1.6rem; display:block; margin-bottom:14px;}
.process-card h3{font-size:1.15rem; margin-bottom:12px; font-weight:500;}
.process-card p{color:var(--ink-soft); font-size:0.94rem;}

/* ---------- GALLERY PREVIEW (homepage) ---------- */
.gallery-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px; flex-wrap:wrap; gap:20px;}
.gallery-head h2{font-size:clamp(1.9rem, 3vw, 2.6rem); max-width:16ch;}
.gallery-head p{color:var(--ink-soft); max-width:36ch; font-size:0.95rem;}
.gallery-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:44px 32px;}
.piece figure{background:var(--paper); overflow:hidden; aspect-ratio:3/4; margin-bottom:16px; position:relative;}
.piece figure img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.piece:hover figure img{transform:scale(1.035);}
.piece h3{font-size:1.05rem; font-weight:450; margin-bottom:6px;}
.piece .meta{font-size:0.82rem; color:var(--ink-soft); letter-spacing:0.02em;}
.gallery-note{margin-top:64px; padding-top:36px; border-top:1px solid var(--line-soft); color:var(--ink-soft); font-size:0.92rem; max-width:56ch;}
.gallery-foot{margin-top:56px; text-align:center;}

/* ---------- STATUS PILLS + SOLD TREATMENT ---------- */
.status-pill{
  display:inline-block; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; font-weight:600; margin-bottom:14px;
}
.status-pill.available{background:rgba(92,114,133,0.13); color:var(--indigo);}
.status-pill.sold{background:rgba(192,99,65,0.14); color:var(--rust);}

.sold-ribbon{
  position:absolute; top:22px; right:-42px; z-index:2;
  background:var(--rust); color:var(--paper);
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
  padding:7px 46px; transform:rotate(35deg);
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
.sold-fade{filter:grayscale(35%) opacity(0.68);}

/* ---------- ARTWORKS PAGE (grid + modal) ---------- */
.artwork-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:40px 30px;}
.artwork-tile{cursor:pointer; text-align:left; background:none; border:none; padding:0; font-family:inherit; color:inherit;}
.artwork-tile figure{
  position:relative; background:var(--paper); overflow:hidden; aspect-ratio:3/4; margin-bottom:14px;
}
.artwork-tile figure img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.artwork-tile:hover figure img{transform:scale(1.04);}
.artwork-tile h3{font-size:1.02rem; font-weight:450; margin-bottom:4px;}
.artwork-tile .tile-meta{font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft);}
.artwork-tile .tile-meta.available{color:var(--indigo);}
.artwork-tile .tile-meta.sold{color:var(--rust);}

.series-note{margin:16px 0 40px; padding:40px 0 0; border-top:1px solid var(--line-soft);}
.series-note .eyebrow{display:block; margin-bottom:10px;}
.series-note p{color:var(--ink-soft); max-width:64ch; font-size:0.98rem;}

/* Modal */
.artwork-modal{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(43,36,29,0.55);
  align-items:center; justify-content:center; padding:24px;
}
.artwork-modal.open{display:flex;}
.artwork-modal-inner{
  background:var(--paper); max-width:920px; width:100%; max-height:88vh; overflow-y:auto;
  border-radius:4px; display:grid; grid-template-columns:1fr 1fr; position:relative;
}
.artwork-modal-close{
  position:absolute; top:16px; right:16px; z-index:3;
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); color:var(--paper); font-size:1.1rem; line-height:1;
}
.artwork-modal-figure{position:relative; background:var(--linen);}
.artwork-modal-figure img{width:100%; height:100%; object-fit:cover; display:block;}
.artwork-modal-body{padding:44px 40px; overflow-y:auto;}
.artwork-modal-body h3{font-size:1.6rem; margin-bottom:8px;}
.artwork-modal-body .artwork-materials{font-style:italic; color:var(--ink-soft); font-size:0.92rem; margin:6px 0 22px;}
.artwork-modal-body p{color:var(--ink-soft); font-size:1rem; margin-bottom:14px;}
.artwork-modal-body .artwork-dims{margin-top:18px; font-size:0.82rem; color:var(--ink-soft); letter-spacing:0.03em; text-transform:uppercase;}
@media (max-width:900px){
  .artwork-modal-inner{grid-template-columns:1fr;}
  .artwork-modal-figure{aspect-ratio:4/3;}
}

/* ---------- COMMISSIONS / CONTACT ---------- */
.contact{background:var(--ink); color:var(--paper);}
.contact .eyebrow{color:#C79D6E;}
.contact .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:end;}
.contact h2{color:var(--paper); font-size:clamp(2rem, 3.4vw, 3rem); max-width:16ch;}
.contact p{color:rgba(255,253,249,0.72); max-width:52ch; margin-top:22px; font-size:1.02rem;}
.contact-list{list-style:none;}
.contact-list li{border-top:1px solid rgba(255,253,249,0.18); padding:18px 0; display:flex; justify-content:space-between; align-items:center; font-size:1rem;}
.contact-list li:last-child{border-bottom:1px solid rgba(255,253,249,0.18);}
.contact-list a{text-decoration:none; color:var(--paper);}
.contact-list span.label{color:rgba(255,253,249,0.5); font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase;}
.contact-note{margin-top:56px; padding-top:32px; border-top:1px solid var(--line-soft); color:var(--ink-soft); font-size:0.95rem; max-width:56ch;}

/* ---------- CONTACT PAGE (warm redesign) ---------- */
.contact-hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;}
.contact-hero-image{border-radius:6px; overflow:hidden; aspect-ratio:4/3;}
.contact-hero-image img{width:100%; height:100%; object-fit:cover;}
.contact-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.contact-card{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:30px 26px; transition:border-color .2s ease, transform .2s ease;
}
.contact-card:hover{border-color:var(--ochre); transform:translateY(-3px);}
.contact-card .label{
  display:block; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ochre); margin-bottom:12px; font-weight:600;
}
.contact-card a{font-family:'Fraunces', serif; font-size:1.15rem; text-decoration:none; color:var(--ink); word-break:break-word;}
.contact-card a:hover{color:var(--indigo);}
.contact-signoff{margin-top:72px; text-align:center;}
.contact-signoff p{font-family:'Fraunces', serif; font-style:italic; font-size:1.5rem; color:var(--ink);}
.contact-signoff span{display:block; margin-top:10px; color:var(--ochre); font-family:'Fraunces', serif; font-style:italic; font-size:1.1rem;}

/* ---------- STORY HIGHLIGHTS + COLLAPSIBLE ---------- */
.story-highlights{background:var(--paper); padding-top:88px; padding-bottom:88px;}
.highlight-split{display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center;}
.highlight-flow{display:flex; flex-direction:column;}
.highlight-line{font-family:'Fraunces', serif; font-style:italic; color:var(--ink); line-height:1.42; margin:0;}
.hl-1{font-size:1.9rem; max-width:9ch; align-self:flex-start; margin-bottom:40px;}
.hl-2{font-size:1.35rem; max-width:20ch; align-self:flex-end; text-align:right; color:var(--ochre); margin-bottom:40px; margin-right:6%;}
.hl-3{font-size:1.15rem; max-width:30ch; align-self:flex-start; margin-left:5%; color:var(--ink-soft);}
.highlight-media{border-radius:4px; overflow:hidden; aspect-ratio:4/5;}
.highlight-media img{width:100%; height:100%; object-fit:cover;}
.story-collapsible{position:relative; max-height:280px; overflow:hidden;}
.story-collapsible.expanded{max-height:none;}
.story-collapsible::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:90px;
  background:linear-gradient(to bottom, transparent, var(--linen));
  pointer-events:none;
}
.story-section.reverse .story-collapsible::after{background:linear-gradient(to bottom, transparent, var(--linen));}
.story-collapsible.expanded::after{display:none;}
.continue-btn{margin-top:24px; cursor:pointer; background:none;}

footer{padding:28px 0; text-align:center; font-size:0.78rem; color:var(--ink-soft); background:var(--linen);}

/* ---------- REVEAL ANIMATION ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .piece figure img{transition:none;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  header.site-nav{position:sticky;}
  .nav-toggle{display:block;}
  nav.links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(43,36,29,0.08);
  }
  nav.links.open{display:flex;}
  nav.links a{
    padding:18px 32px; border-bottom:1px solid var(--line-soft); width:100%;
  }
  nav.links a[aria-current="page"]{border-bottom-color:var(--ochre);}
  .hero .wrap, .about .wrap, .story-section .wrap, .story-section.reverse .wrap{grid-template-columns:1fr;}
  .hero{padding-top:56px;}
  .about-portrait{position:static; max-width:340px;}
  .story-section.reverse .story-image, .story-section.reverse .story-text{order:initial;}
  .process-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2, 1fr);}
  .contact .wrap{grid-template-columns:1fr;}
  .artwork-card{grid-template-columns:1fr; padding:48px 0;}
  .page-hero{padding-top:120px;}
  .contact-hero-grid{grid-template-columns:1fr;}
  .contact-cards{grid-template-columns:1fr;}
  .artwork-grid{grid-template-columns:repeat(2, 1fr);}
  .highlight-grid{grid-template-columns:1fr; gap:20px;}
  .intro-split{grid-template-columns:1fr;}
  .intro-split-media{max-width:420px;}
  .highlight-split{grid-template-columns:1fr;}
  .hl-1, .hl-2, .hl-3{max-width:100%; margin-left:0; margin-right:0; text-align:left;}
}
@media (max-width: 560px){
  .wrap{padding:0 20px;}
  .gallery-grid{grid-template-columns:1fr;}
  .artwork-grid{grid-template-columns:1fr;}
}