/* ==========================================================
   styles.css
   Everything: header, nav, hero, layout, AND the gallery
   widget (formerly rs-gallery.css — merged in for one file
   to maintain instead of two).

   Palette is pulled from the actual work rather than invented:
   - canvas / ink   → raw canvas and charcoal, the base materials
   - oxblood        → blood, used as material in Drip, Heartstrings,
                       Burden of Creation — the primary accent
   - ember          → from "Orange" (2015) — warm secondary accent
   - dusk           → from "Image at the Edge of Sleep (blue)" (2008)
                       — cool accent used sparingly for contrast
   - wood/stretcher → the varnished wood and exposed stretcher bars
   ========================================================== */

:root{
  --canvas:      #EDE7DA;
  --canvas-dim:  #E2DACB;
  --canvas-alt:  #E6DEC9;   /* slightly deeper cream, for alternating sections */
  --ink:         #18140F;
  --ink-soft:    #3A342C;
  --oxblood:     #7A231F;   /* blood — primary accent */
  --ember:       #B85C2C;   /* "Orange", 2015 — secondary accent */
  --dusk:        #5C93B8;   /* "Portal", 2016 — blue brushstroke, sampled directly */
  --blush:       #DDA7BC;   /* "Portal", 2016 — dusty pink accent */
  --wood:        #6B6154;
  --stretcher:   #B7A98C;
  --line:        rgba(24,20,15,0.16);
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; margin:0; }
p{ margin:0; }

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
.row{ display:flex; align-items:center; }

/* thin accent stripe pulled straight from the work: blood / orange / Portal's blue and pink */
.accent-stripe{
  height:6px;
  background:linear-gradient(90deg, var(--oxblood) 0%, var(--oxblood) 25%, var(--ember) 25%, var(--ember) 50%, var(--dusk) 50%, var(--dusk) 75%, var(--blush) 75%, var(--blush) 100%);
}

/* ---- header / nav ---- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(24,20,15,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(241,236,223,0.14);
}
header .container.row{
  padding-top:18px;
  padding-bottom:18px;
}
.nav{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.nav_list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:24px;
  margin:0;
  padding:0;
}
.nav_primary .nav_link{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  color:var(--canvas);
}
.nav_secondary .nav_link{
  font-size:0.9rem;
  color:var(--stretcher);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.nav_secondary .nav_link:hover{
  color:var(--canvas);
  border-color:var(--ember);
}
.nav_link--button{
  border:1px solid var(--ember) !important;
  padding:8px 18px !important;
  color:var(--canvas) !important;
}
.nav_link--button:hover{
  background:var(--ember);
  color:var(--ink) !important;
}

/* ---- hero ---- */
.hero{
  position:relative;
  min-height:56vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.85;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(24,20,15,0) 30%, rgba(24,20,15,0.88) 100%);
}
.hero .container{
  position:relative;
  z-index:1;
  max-width:680px;
  padding-top:40px;
  padding-bottom:44px;
}
.hero p{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.15rem, 2.4vw, 1.5rem);
  line-height:1.5;
  color:var(--canvas);
}

/* ---- about / contact sections ---- */
.info-section{
  padding:72px 0;
  border-bottom:1px solid var(--line);
}
.info-section:nth-of-type(odd){ background:var(--canvas-alt); }
.info-section .container{ max-width:640px; text-align:left; }
.info-section h2{
  font-size:1.7rem;
  margin-bottom:18px;
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}
.info-section h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:36px;
  height:2px;
  background:var(--ember);
}
.info-section p{
  line-height:1.65;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.mail-link{
  display:inline-block;
  margin-top:6px;
  font-family:var(--serif);
  font-size:1.1rem;
  border-bottom:1px solid var(--oxblood);
  transition:color .15s ease;
}
.mail-link:hover{ color:var(--oxblood); }

/* ---- main / old flat-list fallback ---- */
.main{ padding-bottom:60px; }
.col{ padding:16px; }
.col h3{ margin:12px 0 4px; font-size:1.1rem; }
.col p{ font-size:0.9rem; color:var(--wood); line-height:1.5; }

@media (max-width:640px){
  .container{ padding:0 20px; }
  .nav_list{ gap:14px; }
  .hero{ min-height:44vh; }
  .info-section{ padding:52px 0; }
}


/* ==========================================================
   GALLERY WIDGET
   (formerly rs-gallery.css)
   ========================================================== */

.rs-gallery-root{
  font-family:var(--sans);
  color:var(--ink);
}
.rs-gallery-root *{ box-sizing:border-box; }
.rs-gallery-root img{ max-width:100%; display:block; }

/* ---- controls ---- */
.rs-controls{
  position:sticky;
  top:var(--rs-header-offset, 0px);
  z-index:20;
  background:var(--canvas);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  padding:14px 0 18px;
  border-bottom:1px solid var(--line);
  margin-bottom:2px;
}
.rs-filter-group{ display:flex; gap:6px; }
.rs-chip{
  font-family:var(--sans);
  font-size:0.85rem;
  padding:6px 14px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.rs-chip:hover{ border-color:var(--ink-soft); }
.rs-chip[aria-pressed="true"]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--canvas);
}
.rs-sort-select{
  font-family:var(--sans);
  font-size:0.85rem;
  padding:6px 10px;
  border:1px solid var(--line);
  background:var(--canvas);
  color:var(--ink-soft);
  transition:border-color .15s ease;
}
.rs-sort-select:hover, .rs-sort-select:focus{ border-color:var(--dusk); }
.rs-count{ margin-left:auto; font-size:0.82rem; color:var(--wood); }

/* ---- grid ---- */
.rs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:2px;
  background:var(--line);
  padding:2px;
}
.rs-piece{
  position:relative;
  background:var(--canvas-dim);
  cursor:pointer;
  overflow:hidden;
}
.rs-piece .rs-frame{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#d9d0bd;
}
.rs-piece img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease, opacity .4s ease;
  opacity:0;
}
.rs-piece img.rs-loaded{ opacity:1; }
.rs-piece:hover img{ transform:scale(1.035); }
.rs-piece .rs-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px 12px;
  background:linear-gradient(180deg, rgba(24,20,15,0) 0%, rgba(24,20,15,0.82) 78%);
  color:var(--canvas);
  opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.rs-piece:hover .rs-label, .rs-piece:focus-visible .rs-label{ opacity:1; transform:translateY(0); }
.rs-label h3{ margin:0 0 2px; font-family:var(--serif); font-weight:520; font-size:1.05rem; }
.rs-label .rs-meta{ font-size:0.78rem; color:var(--stretcher); }
.rs-sold-dot{
  position:absolute; top:12px; right:12px;
  display:flex; align-items:center; gap:6px;
  font-size:0.72rem; color:var(--canvas);
  background:rgba(24,20,15,0.55); padding:4px 8px;
}
.rs-sold-dot span{ width:6px; height:6px; background:var(--oxblood); border-radius:50%; display:inline-block; }
.rs-empty-state{
  grid-column:1/-1;
  padding:80px 20px;
  text-align:center;
  color:var(--wood);
  font-family:var(--serif);
  font-size:1.2rem;
}

@media (max-width:640px){
  .rs-count{ width:100%; margin:4px 0 0; }
}

/* ---- modal (appended to <body>, outside .rs-gallery-root) ---- */
#rs-modal{
  position:fixed; inset:0; z-index:9999;
  display:none;
  background:rgba(24,20,15,0.94);
  font-family:var(--sans);
}
#rs-modal.rs-open{ display:flex; }
#rs-modal .rs-modal-inner{
  margin:auto;
  display:flex; flex-direction:column; align-items:center;
  max-width:1100px; width:100%;
  padding:24px;
  max-height:100vh;
}
#rs-modal .rs-modal-img-wrap{
  display:flex; justify-content:center; align-items:center;
  flex:1; min-height:0; width:100%;
}
#rs-modal .rs-modal-img-wrap img{
  max-width:100%; max-height:70vh; object-fit:contain;
  opacity:0;
  transition:opacity .25s ease;
}
#rs-modal .rs-modal-img-wrap img.rs-loaded{ opacity:1; }
#rs-modal .rs-modal-meta{
  color:var(--canvas); text-align:center; padding-top:18px; max-width:560px;
}
#rs-modal .rs-modal-meta h3{
  font-family:var(--serif);
  font-weight:600; font-size:1.5rem; margin:0 0 8px;
}
#rs-modal .rs-modal-meta .rs-medium{ font-size:0.9rem; color:var(--stretcher); line-height:1.5; }
#rs-modal .rs-modal-meta .rs-counter{ font-size:0.78rem; color:#8A8070; margin-top:10px; }
#rs-modal .rs-modal-close, #rs-modal .rs-modal-nav{
  position:fixed;
  background:none; border:none;
  color:var(--canvas); cursor:pointer;
  z-index:10000;
}
#rs-modal .rs-modal-close{ top:20px; right:28px; font-size:1.6rem; line-height:1; }
#rs-modal .rs-modal-nav{ top:50%; transform:translateY(-50%); font-size:2rem; padding:10px 14px; }
#rs-modal .rs-modal-nav.rs-prev{ left:8px; }
#rs-modal .rs-modal-nav.rs-next{ right:8px; }
#rs-modal .rs-modal-close:hover{ color:var(--ember); }
#rs-modal .rs-modal-nav:hover{ color:var(--dusk); }

@media (prefers-reduced-motion: reduce){
  .rs-gallery-root *, #rs-modal *{ transition:none !important; }
}

/* ---- focus visibility (keyboard navigation) ---- */
.rs-gallery-root .rs-piece:focus-visible,
.rs-gallery-root .rs-chip:focus-visible,
.rs-gallery-root .rs-sort-select:focus-visible,
#rs-modal button:focus-visible{
  outline:2px solid var(--oxblood);
  outline-offset:2px;
}