@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500&family=Jost:wght@400;500;600&display=swap');

:root{
  --bg: #FFFFFF;
  --paper: #FFFFFF;
  --ink: #111111;
  --stone: #A0A0A0;
  --stone-soft: #E2E2E2;
  --accent: #2C5752;
  --line: #E2E2E2;
  --font-display: 'Cormorant', serif;
  --font-body: 'Jost', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body::before{ content:""; display:block; height:5px; background:var(--accent); }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:400; margin:0; }

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
}
.wordmark{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.14em;
}
nav.primary{ display:flex; gap:32px; }
.nav-item{ position:relative; padding:6px 0; }
.nav-item > a{
  font-size:12px; letter-spacing:.12em; font-weight:500;
  display:inline-block; padding:4px 2px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav-item:hover > a, .nav-item:focus-within > a, .nav-item.active > a{ border-color:var(--accent); }

.dropdown{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.18);
  padding:18px;
  display:flex; gap:18px;
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease;
  white-space:nowrap;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.drop-cell{ width:104px; text-align:left; }
.drop-thumb{
  width:104px; height:78px; object-fit:cover;
  background:linear-gradient(135deg,var(--stone-soft),var(--stone));
  margin-bottom:8px;
}
.drop-cell span{ font-size:11px; letter-spacing:.06em; }

.lang-toggle{
  background:none; border:1px solid var(--line);
  font-size:11px; letter-spacing:.1em; padding:6px 12px;
  cursor:pointer; color:var(--ink);
}
.lang-toggle:hover{ border-color:var(--accent); }
.lang-toggle:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.hamburger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.hamburger span{ width:22px; height:1.5px; background:var(--ink); display:block; }
.hamburger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.mobile-drawer{ display:none; border-bottom:1px solid var(--line); background:var(--paper); }
.mobile-drawer.open{ display:block; }
.mobile-drawer ul{ list-style:none; margin:0; padding:0; }
.mobile-drawer > ul > li{ border-top:1px solid var(--line); }
.mobile-drawer a, .mobile-drawer summary{
  display:block; padding:16px 32px; font-size:13px; letter-spacing:.1em;
  cursor:pointer;
}
.mobile-drawer summary::-webkit-details-marker{ display:none; }
.mobile-drawer details ul{ padding:0 0 8px; }
.mobile-drawer details ul li{ border-top:none; }
.mobile-drawer details ul li a{ padding:10px 32px 10px 44px; font-size:12px; color:#555; }

@media (max-width:880px){
  nav.primary{ display:none; }
  .hamburger{ display:flex; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative; width:100%; aspect-ratio:16/9; max-height:680px; min-height:340px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-track{
  position:absolute; inset:0; z-index:0;
  display:flex; height:100%; width:500%;
}
.hero-panel{ flex:0 0 10%; height:100%; position:relative; }
.hero-panel img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 32%, rgba(0,0,0,0) 62%);
}
.hero-caption{
  position:relative; z-index:2; padding:48px 32px; max-width:1280px; margin:0 auto; width:100%;
  color:#fff;
}
.hero-caption h1{ font-size:52px; margin-bottom:10px; text-shadow:0 2px 24px rgba(0,0,0,.55); }
.hero-caption p{ font-size:15px; letter-spacing:.16em; margin:0; text-shadow:0 1px 12px rgba(0,0,0,.6); }

@media (max-width:880px){
  .hero{ aspect-ratio:4/5; max-height:560px; }
  .hero-track{ width:1000%; }
  .hero-caption{ padding:28px 20px; }
  .hero-caption h1{ font-size:32px; }
  .hero-caption p{ font-size:12px; letter-spacing:.12em; }
}

/* ---------- TILES (home + section landing) ---------- */
.tiles{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  padding:2px 0;
}
.tiles.cols-2{ grid-template-columns:repeat(2,1fr); }
.tiles.cols-3{ grid-template-columns:repeat(3,1fr); }
.tile{
  position:relative; aspect-ratio:3/4;
  overflow:hidden; display:block;
}
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tile:hover img{ transform:scale(1.03); }
.tile span{
  position:absolute; left:16px; bottom:16px;
  font-size:12px; letter-spacing:.1em; color:var(--ink);
  background:rgba(255,255,255,.88); padding:4px 8px;
  border-bottom:2px solid var(--accent);
}

@media (max-width:880px){
  .tiles{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- SECTION DIVIDER / INTRO ---------- */
.section-intro{
  max-width:760px; margin:0 auto; padding:56px 32px 0;
  text-align:center;
}
.section-intro p{ font-size:14px; line-height:1.7; color:#333; white-space:pre-line; }

/* ---------- SUBPAGE VIEW ---------- */
.subpage{ max-width:1280px; margin:0 auto; padding:24px 32px 80px; }
.breadcrumb{ font-size:11px; letter-spacing:.12em; color:#6f6a5e; margin-bottom:10px; }
.breadcrumb b{ color:var(--ink); }
.breadcrumb a:hover{ text-decoration:underline; }
.subpage h2{ font-size:28px; margin-bottom:14px; display:inline-block; border-bottom:3px solid var(--accent); padding-bottom:10px; }
.subpage .intro-text{ font-size:14px; line-height:1.7; color:#333; max-width:680px; margin:0 0 32px; white-space:pre-line; }

/* ---------- FILTER TABS ---------- */
.filters{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;
}
.filter-btn{
  border:1px solid var(--line); background:none; color:var(--ink);
  font-size:11px; letter-spacing:.08em; padding:8px 14px; cursor:pointer;
}
.filter-btn.active{ border-color:var(--accent); color:var(--accent); }

/* ---------- GALLERY GRID ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.gallery figure{ margin:0; position:relative; aspect-ratio:4/5; overflow:hidden; cursor:pointer; background:var(--stone-soft); }
.gallery figure img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery figure:hover img{ transform:scale(1.035); }
.gallery figure.hidden{ display:none; }

@media (max-width:880px){
  .gallery{ grid-template-columns:repeat(2,1fr); gap:10px; }
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(10,10,10,.94); z-index:200;
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; margin:0 auto; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:none; border:none; color:#fff; cursor:pointer;
  font-size:28px; padding:12px; line-height:1;
}
.lightbox-close{ top:16px; right:16px; font-size:22px; }
.lightbox-prev{ left:8px; top:50%; transform:translateY(-50%); font-size:36px; }
.lightbox-next{ right:8px; top:50%; transform:translateY(-50%); font-size:36px; }
.lightbox-count{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:#ccc; font-size:11px; letter-spacing:.1em; }

/* ---------- SHOP ---------- */
.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.product figure{ margin:0 0 14px; aspect-ratio:4/5; overflow:hidden; cursor:pointer; background:var(--stone-soft); }
.product figure img{ width:100%; height:100%; object-fit:cover; }
.product h3{ font-family:var(--font-body); font-size:14px; font-weight:500; margin:0 0 4px; }
.product .price{ font-size:12px; letter-spacing:.04em; color:#666; margin:0 0 12px; }
.formats{ display:flex; gap:8px; margin-bottom:14px; }
.formats button{
  border:1px solid var(--line); background:none; font-size:11px;
  padding:6px 12px; cursor:pointer; color:var(--ink);
}
.formats button.active{ border-color:var(--accent); color:var(--accent); }
.buy-btn{
  display:inline-block;
  border:1px solid var(--accent); background:none; color:var(--accent);
  padding:10px 20px; font-size:11px; letter-spacing:.12em; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.buy-btn:hover{ background:var(--accent); color:#fff; }
@media (max-width:880px){ .shop-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } }

/* ---------- ABOUT / CONTACT ---------- */
.text-page{ max-width:640px; margin:0 auto; padding:64px 32px 96px; }
.text-page h2{ font-size:30px; margin-bottom:28px; display:inline-block; border-bottom:3px solid var(--accent); padding-bottom:10px; }
.text-page p{ font-size:15px; line-height:1.8; color:#222; margin:0 0 20px; white-space:pre-line; }
.contact-links{ margin-top:32px; display:flex; flex-direction:column; gap:10px; }
.contact-links a{ font-size:14px; border-bottom:1px solid var(--line); padding-bottom:2px; display:inline-block; width:fit-content; }
.contact-links a:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line);
  padding:32px; max-width:1280px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:11px; letter-spacing:.08em; color:#6f6a5e;
}
footer nav{ display:flex; gap:16px; }