@font-face{
  font-family:'GT America Standard';
  src:url('/fonts/gt-america-standard-regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#0e1116;
  --muted:#5a6573;
  --line:#e7eaee;
  --bg:#ffffff;
}

*{box-sizing:border-box}
html,body{background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;padding:0}
body{background-color:var(--bg)}
body{
  font-family:'GT America Standard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.45;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.wrapper{max-width:1100px;margin:0 auto;padding:24px}
header{border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:44px;width:auto;display:block}
.brand .wordmark{
  font-family:"Libre Caslon Display", serif;
  font-size:22px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap}
nav a{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
nav a.active{color:var(--ink);text-decoration:underline;text-underline-offset:6px}

.hero{padding:0; position:relative}
.hero h1{
  font-family:"Libre Caslon Display", serif;
  font-weight:400;
  font-size:40px;
  margin:0 0 8px;
}
.hero p{margin:0;color:var(--muted);max-width:62ch}

/* Splash landing (homepage) */
.splash{min-height:72vh;display:flex;align-items:center;justify-content:center;position:relative;background:url("/assets/landing.jpg") center/cover no-repeat}

.splash::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.20));}
.splash-inner{position:relative}
.splash-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;padding:40px 0}
.splash-logo{max-width:min(520px, 85vw);height:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.btn:hover{border-color:#c7c7c7}

.section-title{
  font-family:"Libre Caslon Display", serif;
  font-weight:400;
  font-size:24px;
  margin:28px 0 14px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}
@media (max-width: 980px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 720px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 420px){ .grid{grid-template-columns:1fr} }

.card{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.card .img{
  aspect-ratio: 4/5;
  background:#f4f6f8;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card .meta{padding:12px 12px 14px}
.card .name{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 6px;
}
.card .price{font-size:13px;color:var(--muted);margin:0}

.filters{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
  margin:18px 0 18px;
}
@media (max-width: 980px){ .filters{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 520px){ .filters{grid-template-columns:repeat(2,1fr)} }
.filters label{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:6px}
.filters select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px}
.filters .actions{display:flex;gap:10px;align-items:end}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--ink);
  color:#fff;
  cursor:pointer;
}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{border-color:var(--ink)}

.product{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
  padding:26px 0;
}
@media (max-width: 900px){ .product{grid-template-columns:1fr} }
.gallery{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#f4f6f8;
}
.gallery img{width:100%;height:auto;display:block}
.pinfo h1{
  font-family:"Libre Caslon Display", serif;
  font-weight:400;
  font-size:34px;
  margin:0 0 10px;
}
.pinfo .pprice{color:var(--muted);margin:0 0 16px}
.pinfo .desc{color:var(--ink)}
.pinfo .details{margin:16px 0 18px;color:var(--muted);font-size:13px}
.pinfo .details ul{margin:8px 0 0 18px}
.footer{border-top:1px solid var(--line);margin-top:40px;padding:18px 0;color:var(--muted);font-size:12px}
.article h1{font-family:"Libre Caslon Display", serif;font-weight:400;font-size:38px;margin:0 0 6px}
.article .meta{color:var(--muted);margin:0 0 18px}
.article p{max-width:75ch}
.bullets{margin:10px 0 0 18px;color:var(--text);line-height:1.6}
.bullets li{margin:6px 0}

/* Landing page hero – full-bleed, edge-to-edge */
.landing-only{margin:0;padding:0}
.landing-only main{padding:0;margin:0}
.landing-only .footer{display:none}
.hero{position:relative;width:100vw;height:100vh;overflow:hidden;margin:0;padding:0}
.hero-img{display:block;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;background:linear-gradient(180deg,rgba(0,0,0,0.10) 0%,rgba(0,0,0,0.25) 100%)}
.btn-hero{font-family:'GT America Standard',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em}
.btn-secondary{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:#fff}

/* Feature block under hero */
.feature{padding:48px 16px}
.feature-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.feature-img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.feature-title{margin:0 0 10px;font-family:'Libre Caslon Display',serif;font-size:40px;line-height:1.05}
.feature-text{margin:0 0 18px;color:var(--muted);font-size:16px;line-height:1.5}

@media (max-width: 900px){
  .feature-grid{grid-template-columns:1fr}
  .feature-title{font-size:34px}
}


.landing-wordmark{max-width:min(560px, 86vw);height:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.25));margin:0 auto}

/* Landing brand: stacked vertically, all centered */
.landing-anchor{height:80px;width:auto;display:block;margin:0 auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.25))}
@media (min-width:600px){.landing-anchor{height:120px}}

.btn-hero{background:rgba(255,255,255,0.90);border-color:rgba(255,255,255,0.35);backdrop-filter: blur(6px);color:#000;text-shadow:none;}
.btn-hero:hover{background:rgba(255,255,255,0.98)}


/* Product gallery */
.gallery{display:flex;flex-direction:column;gap:12px}
.product-main-image{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.thumb{border:1px solid var(--line);border-radius:10px;background:#fff;padding:0;cursor:pointer;flex:0 0 auto;line-height:0}
.thumb img{display:block;width:68px;height:68px;object-fit:cover;border-radius:10px}
.thumb.active{border-color:#0e1116}
@media (min-width: 700px){
  .thumb img{width:72px;height:72px}
}