@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --paper:      #f0e8d8;
  --paper-dim:  #e6dcc5;
  --ink:        #2e3b46;
  --ink-soft:   #5c6b76;
  --lake:       #d9a441;
  --lake-deep:  #b8842f;
  --granite:    #8c8577;
  --manzanita:  #c1573f;
  --mist:       #e4dcc8;
  --hairline:   rgba(46,59,70,0.16);

  --display: 'Fraunces', serif;
  --body:    'Work Sans', sans-serif;
  --mono:    'JetBrains Mono', monospace;
}

:root[data-theme="dark"]{
  --paper:      #1b2126;
  --paper-dim:  #232a30;
  --ink:        #ede4d2;
  --ink-soft:   #a8a99a;
  --lake:       #e6b660;
  --lake-deep:  #c99a48;
  --granite:    #9c9484;
  --manzanita:  #d97862;
  --mist:       #262d33;
  --hairline:   rgba(237,228,210,0.14);
}

*{ box-sizing:border-box; }

*, *::before, *::after{
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--lake); color:var(--paper); }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--manzanita);
  outline-offset:3px;
}

.wrap{ max-width:980px; margin:0 auto; padding:0 28px; }
.wrap-wide{ max-width:1400px; margin:0 auto; padding:0 28px; }

/* ---------- Title banner + tabs ---------- */
header.banner{
  border-bottom:1px solid var(--hairline);
  background:var(--paper);
}
.banner-inner{
  max-width:980px; margin:0 auto; padding:44px 28px 0;
  text-align:center;
}
.banner-inner .name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem, 5vw, 2.9rem);
  letter-spacing:-0.01em; margin:0;
}
.banner-inner .name a{ text-decoration:none; }
.banner-inner .tagline{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft); margin:10px 0 30px;
}

nav.tabs{
  display:flex; justify-content:center; align-items:center; gap:2px; flex-wrap:wrap;
  border-top:1px solid var(--hairline);
}
nav.tabs a{
  display:inline-block;
  padding:15px 22px;
  text-decoration:none;
  font-size:0.88rem; font-weight:500;
  color:var(--ink-soft);
  border-bottom:2px solid transparent;
  letter-spacing:0.01em;
}
nav.tabs a:hover{ color:var(--ink); }
nav.tabs a.active{
  color:var(--ink);
  border-bottom-color:var(--manzanita);
  font-weight:600;
}
nav.tabs a.tab-ig{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 20px; margin-left:4px; border-left:1px solid var(--hairline);
  color:var(--ink-soft);
}
nav.tabs a.tab-ig:hover{ color:var(--ink); }
nav.tabs a.tab-ig svg{ width:17px; height:17px; }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 18px; margin:0; border:none; border-left:1px solid var(--hairline);
  background:none; color:var(--ink-soft); cursor:pointer;
  font-family:inherit;
}
.theme-toggle:hover{ color:var(--ink); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

/* ---------- Page scaffolding ---------- */
main{
  flex:1 1 auto;
  min-height:0;
  padding:64px 0 96px;
}
main.tight-top{ padding-top:32px; }
.page-head{ text-align:center; margin-bottom:56px; }
.page-head .tag{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--manzanita); margin:0 0 12px;
}
.page-head h1{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.6rem); margin:0 0 14px; letter-spacing:-0.005em;
}
.page-head p{ color:var(--ink-soft); max-width:520px; margin:0 auto; font-size:1rem; }

.about-head{
  display:flex; align-items:center; justify-content:center; gap:20px;
}
.about-head .portrait{
  width:216px; height:216px; border-radius:50%; object-fit:cover;
  flex-shrink:0; border:1px solid var(--hairline);
}
.about-head h1{ margin:0; }
@media (max-width:640px){
  .about-head{ flex-direction:column; gap:16px; }
}

/* ---------- Home ---------- */
.home-intro{ max-width:600px; margin:0 auto 64px; text-align:center; }
.home-intro p{ font-size:1.08rem; color:var(--ink-soft); margin:0 0 22px; }
.home-intro .btn{ margin:0 6px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:2px;
  font-family:var(--body); font-weight:600; font-size:0.9rem;
  text-decoration:none; border:1px solid var(--ink);
  transition:background 0.15s ease, color 0.15s ease;
}
.btn.primary{ background:var(--lake-deep); color:var(--paper); border-color:var(--lake-deep); }
.btn.primary:hover{ background:var(--lake); border-color:var(--lake); }
.btn.ghost{ color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }

.section-label{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--hairline); padding-bottom:14px; margin-bottom:32px;
}
.section-label h2{
  font-family:var(--display); font-weight:500; font-size:1.4rem; margin:0;
}
.section-label a{ font-size:0.85rem; font-weight:600; text-decoration:none; color:var(--lake-deep); }
.section-label a:hover{ text-decoration:underline; }

/* ---------- Gallery grid ---------- */
.filter-row{ display:flex; justify-content:center; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
.filter-btn{
  font-family:var(--mono); font-size:0.74rem; letter-spacing:0.05em;
  padding:8px 15px; border:1px solid var(--ink); background:transparent;
  color:var(--ink); cursor:pointer; border-radius:2px;
}
.filter-btn.active{ background:var(--ink); color:var(--paper); }

.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px 26px; }
@media (max-width: 860px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns:1fr; } }

figure.piece{ margin:0; }
.piece .frame{
  aspect-ratio:4/5; overflow:hidden; border:1px solid var(--hairline); background:var(--paper);
}
.piece .frame img{ width:100%; height:100%; object-fit:cover; }
.piece figcaption{ margin-top:11px; }
.piece .name{
  display:block; font-family:var(--body); font-weight:600; font-size:0.95rem; color:var(--ink);
}
.piece .meta{
  display:block; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.04em;
  color:var(--ink-soft); margin-top:4px;
}

/* ---------- About ---------- */
.about-body{ max-width:640px; margin:0 auto; }
.about-body p{ font-size:1.02rem; color:var(--ink-soft); margin:0 0 20px; }
.fact-list{
  margin:44px auto 0; max-width:640px; border-top:1px solid var(--hairline);
}
.fact-list dl{ margin:0; }
.fact-row{
  display:grid; grid-template-columns:160px 1fr; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--hairline);
}
.fact-row dt{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--ink-soft); margin:0;
}
.fact-row dd{ margin:0; font-size:0.95rem; }
@media (max-width:600px){ .fact-row{ grid-template-columns:1fr; gap:4px; } }

/* ---------- Events / where to find ---------- */
.event-list{ max-width:700px; margin:0 auto; border-top:1px solid var(--hairline); }
.event-row{
  display:grid; grid-template-columns:190px 1fr; gap:24px;
  padding:24px 0; border-bottom:1px solid var(--hairline);
}
.event-row .when{
  font-family:var(--mono); font-size:0.74rem; color:var(--manzanita); letter-spacing:0.02em;
  line-height:1.5; display:flex; flex-direction:column; gap:4px;
}
.event-row .when .where{
  color:var(--ink-soft); font-size:0.68rem; letter-spacing:0.03em; text-transform:uppercase;
}
.event-row h3{ font-family:var(--display); font-weight:500; font-size:1.15rem; margin:0 0 6px; }
.event-row h3 a{
  color:var(--ink); text-decoration:none; border-bottom:1px solid transparent;
}
.event-row h3 a:hover{ color:var(--lake-deep); border-bottom-color:var(--lake-deep); }
.event-row p{ margin:0; color:var(--ink-soft); font-size:0.92rem; }
@media (max-width:600px){ .event-row{ grid-template-columns:1fr; gap:6px; } }

.note-box{
  max-width:700px; margin:48px auto 0; padding:20px 24px;
  border:1px dashed var(--granite); font-size:0.9rem; color:var(--ink-soft); text-align:center;
}
.note-box strong{
  display:block; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink); margin-bottom:6px;
}

/* ---------- Contact ---------- */
.contact-body{ max-width:480px; margin:0 auto; text-align:center; }
.contact-body p{ color:var(--ink-soft); font-size:1.02rem; margin:0 0 30px; }
.contact-links{ display:flex; flex-direction:row; justify-content:center; gap:48px; margin-bottom:40px; }
.contact-links > div{ display:flex; flex-direction:column; align-items:center; }
.contact-links a{
  font-family:var(--display); font-size:1.3rem; text-decoration:none; color:var(--lake-deep);
}
.contact-links a:hover{ text-decoration:underline; }
.contact-links .label{
  display:block; font-family:var(--mono); font-size:0.65rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px;
}
.contact-links .ig-link,
.contact-links .email-link{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--lake-deep);
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
}
.contact-links .ig-link:hover,
.contact-links .email-link:hover{ color:var(--lake); }
.contact-links .ig-link svg,
.contact-links .email-link svg{ width:30px; height:30px; }

.copy-toast{
  position:fixed; left:50%; bottom:44px; transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:0.85rem; letter-spacing:0.01em;
  padding:11px 20px; border-radius:3px;
  opacity:0; pointer-events:none; z-index:200;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.copy-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Home carousel ---------- */
.carousel{ width:100%; max-width:none; margin:0; }
.carousel-frame{
  position:relative; width:100%;
  height:min(calc(100vh - 425px), calc(100vw * var(--carousel-height-ratio, 0.667)), 720px);
  min-height:220px; overflow:hidden;
  border:1px solid var(--hairline); background:var(--paper);
}
.carousel-viewport{ position:relative; width:100%; height:100%; }
.carousel-slide{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.55s ease;
}
.carousel-slide.active{ opacity:1; visibility:visible; }
.carousel-slide img{ width:100%; height:100%; object-fit:contain; object-position:center; }
@media (max-width:640px){
  .carousel-frame{
    height:min(calc(100vh - 390px), calc(100vw * var(--carousel-height-ratio, 0.667)), 580px);
    min-height:180px;
  }
}

.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:12px;
  color:#fff; cursor:pointer;
  opacity:0.55; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  transition:opacity 0.15s ease;
}
.car-arrow svg{ width:30px; height:30px; }
.car-arrow:hover{ opacity:0.95; }
.car-arrow.prev{ left:2px; }
.car-arrow.next{ right:2px; }
@media (min-width:900px){
  .car-arrow svg{ width:42px; height:42px; }
}

.carousel-caption{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:10px; flex-wrap:wrap; gap:4px;
}
.carousel-caption .name{ font-family:var(--body); font-weight:600; font-size:0.98rem; }
.carousel-caption .meta{
  font-family:var(--mono); font-size:0.7rem; color:var(--ink-soft); letter-spacing:0.03em;
}

.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; min-height:7px; margin-bottom:6px; }
.car-dot{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background:var(--hairline); cursor:pointer;
}
.car-dot.active{ background:var(--manzanita); }

/* ---------- Lightbox ---------- */
.lightbox{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(20,24,22,0.92);
  align-items:center; justify-content:center;
  padding:24px;
}
.lightbox.open{ display:flex; }

.lb-content{
  display:flex;
  align-items:flex-start;
  gap:0;
  width:100%;
  max-width:1600px;
  max-height:92vh;
  background:var(--paper);
  border:1px solid var(--hairline);
  overflow:hidden;
}

.lb-image-wrap{
  flex:1 1 68%;
  min-width:0;
  max-height:92vh;
  overflow:hidden;
  background:#1c211f;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  align-self:flex-start;
}
.lb-image-wrap img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:92vh;
  object-fit:contain;
}

.lb-info{
  flex:0 1 32%;
  min-width:300px;
  max-height:92vh;
  overflow:auto;
  padding:32px 30px;
  border-left:1px solid var(--hairline);
  box-sizing:border-box;
}
.lb-info h3{ font-family:var(--display); font-weight:500; font-size:1.4rem; margin:0 0 8px; }
.lb-info .meta{
  display:block; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.04em;
  color:var(--ink-soft); margin:0 0 20px;
}
.lb-info .lb-details{
  display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 20px;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.03em;
}
.lb-info .lb-details span{ color:var(--ink-soft); }
.lb-info .lb-details span strong{ color:var(--ink); font-weight:600; }
.lb-info .blurb{ font-size:0.96rem; color:var(--ink-soft); line-height:1.65; margin:0; }

.lb-close{
  position:absolute; top:18px; right:22px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(241,237,226,0.16); border:1px solid rgba(241,237,226,0.3);
  color:var(--paper); font-size:1.4rem; line-height:1; cursor:pointer;
}
.lb-close:hover{ background:rgba(241,237,226,0.28); }

.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:12px;
  color:#fff; cursor:pointer;
  opacity:0.55; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  transition:opacity 0.15s ease;
}
.lb-arrow svg{ width:30px; height:30px; }
.lb-arrow:hover{ opacity:0.95; }
.lb-prev{ left:12px; }
.lb-next{ right:12px; }

/*
  Switch to the stacked presentation before the row layout becomes cramped.
  This removes the awkward "almost mobile" state that previously appeared
  between the desktop and phone views.
*/
@media (max-width: 900px){
  .lightbox{ padding:16px; align-items:center; }

  .lb-content{
    flex-direction:column;
    width:100%;
    max-width:760px;
    max-height:94vh;
  }

  .lb-image-wrap{
    width:100%;
    max-height:52vh;
    flex:0 0 auto;
  }

  .lb-image-wrap img{
    width:auto;
    max-width:100%;
    max-height:52vh;
  }

  .lb-info{
    width:100%;
    min-width:0;
    max-height:40vh;
    flex:0 1 auto;
    border-left:none;
    border-top:1px solid var(--hairline);
    padding:24px;
  }

  .lb-arrow svg{ width:24px; height:24px; }
  .lb-prev{ left:4px; }
  .lb-next{ right:4px; }
  .lb-close{ top:10px; right:10px; }
}

@media (max-width:560px){
  .lightbox{ padding:8px; }

  .lb-content{
    max-height:96vh;
  }

  .lb-image-wrap{
    max-height:50vh;
  }

  .lb-image-wrap img{
    max-height:50vh;
  }

  .lb-info{
    max-height:44vh;
    padding:22px;
  }

  .lb-info h3{ font-size:1.3rem; }
  .lb-info .blurb{ font-size:0.94rem; line-height:1.6; }
}
/* ---------- Footer ---------- */
footer.site{
  flex:0 0 auto;
  border-top:1px solid var(--hairline);
  padding:20px 0;
  text-align:center;
}
footer.site p{
  font-family:var(--mono); font-size:0.7rem; color:var(--ink-soft);
  letter-spacing:0.03em; margin:0;
}

/* Home-specific spacing; footer behavior is shared by every page. */
.home-page main{
  flex:1 1 auto;
  min-height:0;
  padding-top:32px;
  padding-bottom:0;
}

/* ---------- Store (coming soon) ---------- */
.store-panel{
  max-width:560px; margin:0 auto; text-align:center;
  padding:64px 40px; border:1px dashed var(--granite);
}
.store-panel h1{
  font-family:var(--display); font-weight:500; font-size:2rem; margin:0 0 14px;
}
.store-panel p{ color:var(--ink-soft); font-size:1rem; margin:0; }

/* ---------- Blog list ---------- */
.blog-list{ max-width:760px; margin:0 auto; border-top:1px solid var(--hairline); }
.blog-row{
  display:grid; grid-template-columns:220px 1fr; gap:24px;
  padding:26px 0; border-bottom:1px solid var(--hairline);
}
.blog-row .thumb{
  width:220px; aspect-ratio:16/10; height:auto; overflow:hidden;
  border:1px solid var(--hairline); background:var(--mist); flex-shrink:0;
  cursor:pointer;
}
.blog-row .thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-row .blog-body h3{
  font-family:var(--display); font-weight:500; font-size:1.2rem; margin:0 0 6px;
  cursor:pointer; display:inline-block;
}
.blog-row .blog-body h3:hover{ color:var(--lake-deep); }
.blog-row .blog-body .date{
  display:block; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.04em;
  color:var(--manzanita); margin:0 0 10px; text-transform:uppercase;
}
.blog-row .blog-body p{ margin:0; color:var(--ink-soft); font-size:0.94rem; }
@media (max-width:600px){
  .blog-row{ grid-template-columns:1fr; gap:14px; }
  .blog-row .thumb{ width:100%; aspect-ratio:16/9; }
}

/* ---------- Blog overlay ---------- */
.blog-overlay{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(20,24,22,0.92);
  align-items:flex-start; justify-content:center;
  padding:48px 24px; overflow-y:auto;
}
.blog-overlay.open{ display:flex; }
.blog-overlay-content{
  width:100%; max-width:760px; background:var(--paper);
  border:1px solid var(--hairline); padding:48px;
  position:relative;
}
.blog-overlay-close{
  position:absolute; top:18px; right:20px;
  width:40px; height:40px; border-radius:50%;
  background:none; border:1px solid var(--hairline);
  color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer;
}
.blog-overlay-close:hover{ background:var(--paper-dim); }
.blog-overlay-content h2{
  font-family:var(--display); font-weight:500; font-size:1.8rem;
  margin:0 0 10px; padding-right:40px;
}
.blog-overlay-content .banner-img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border:1px solid var(--hairline); margin:0 0 28px;
}
.blog-overlay-content .date{
  display:block; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.04em;
  color:var(--manzanita); text-transform:uppercase; margin:0 0 28px;
}
.blog-overlay-content .body-text p{
  color:var(--ink-soft); font-size:1rem; line-height:1.7; margin:0 0 20px;
}
.blog-overlay-content .body-text h4{
  font-family:var(--display); font-weight:500; font-size:1.15rem;
  color:var(--ink); margin:30px 0 12px;
}
.blog-overlay-content .body-text strong{ color:var(--ink); }
.blog-overlay-content .body-text ul{
  margin:0 0 20px; padding-left:22px; color:var(--ink-soft);
}
.blog-overlay-content .body-text li{ margin-bottom:10px; line-height:1.6; }
.blog-overlay-content .body-text a{
  color:var(--lake-deep); text-decoration:underline; cursor:pointer;
}
.blog-overlay-content .body-text a:hover{ color:var(--lake); }
.blog-overlay-content .body-text img.inline-img{
  width:100%; margin:8px 0 26px; border:1px solid var(--hairline);
}
.blog-overlay-content .post-images{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px; margin-top:12px;
}
.blog-overlay-content .post-images img{
  width:100%; border:1px solid var(--hairline);
}
@media (max-width:600px){
  .blog-overlay-content{ padding:32px 22px; }
}