/* Nicoboxx — Art & Upholstery Studio */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;600&family=Cormorant+Garamond:wght@300;600&display=swap');

:root{
  --ink:#0d0d0f;
  --ink-2:#16161a;
  --paper:#f4f2ee;
  --muted:#9a978f;
  --line:#2a2a30;
  --accent:#e8412f;
  --gold:#c9a227;
  --green:#7d9b5c;
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(13,13,15,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top .wrap{
  max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.brand{
  font-family:'Anton',sans-serif; font-size:1.45rem; letter-spacing:.02em;
  text-decoration:none; text-transform:lowercase; display:flex; align-items:center; gap:.5rem;
}
.brand .dot{width:.42em;height:.42em;border-radius:50%;background:var(--accent);display:inline-block}
nav{display:flex; gap:22px; flex-wrap:wrap; margin-left:auto}
nav a{
  text-decoration:none; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding-bottom:2px; border-bottom:1px solid transparent;
}
nav a:hover,nav a[aria-current="page"]{color:var(--paper); border-bottom-color:var(--accent)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{padding:88px 0}
.lede{max-width:62ch; font-size:1.16rem; color:#d7d4cd}
.eyebrow{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
h1{font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(2.6rem,7vw,5.4rem);
   line-height:.95; letter-spacing:-.01em; margin:0 0 24px; text-transform:uppercase}
h2{font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(1.9rem,4vw,3rem);
   line-height:1.02; margin:0 0 18px; text-transform:uppercase}
h3{font-size:1.05rem; font-weight:600; letter-spacing:.01em; margin:0 0 6px}

/* ---------- hero ---------- */
.hero{position:relative; min-height:82vh; display:flex; align-items:flex-end;
      border-bottom:1px solid var(--line); overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
          object-position:center 40%; opacity:.55}
.hero .wrap{position:relative; padding-top:100px; padding-bottom:64px; width:100%}
.hero h1{max-width:16ch}
.hero p{max-width:46ch; font-size:1.2rem; color:#e6e3dc}

/* ---------- grid ---------- */
.grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:3px;
  overflow:hidden; text-decoration:none; display:block; transition:.25s;
}
.card:hover{border-color:var(--accent); transform:translateY(-3px)}
.card .ph{aspect-ratio:4/5; overflow:hidden; background:#000}
.card .ph img{width:100%; height:100%; object-fit:cover}
.card .ph.wide{aspect-ratio:16/10}
.card .body{padding:18px 20px 22px}
.card p{margin:4px 0 0; font-size:.9rem; color:var(--muted)}

.figure{margin:0 0 26px}
.figure img{border:1px solid var(--line)}
.figure figcaption{font-size:.86rem; color:var(--muted); padding-top:10px}

/* white plate for black-on-white apparel art */
.plate{background:#fff; padding:6px}
.plate img{border:0}

/* ---------- callout ---------- */
.quote{
  border-left:3px solid var(--accent); padding:6px 0 6px 24px; margin:34px 0;
  font-family:'Cormorant Garamond',Georgia,serif; font-size:1.5rem; font-weight:300;
  line-height:1.35; color:#e6e3dc; max-width:44ch;
}
.band{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---------- cross-links ---------- */
.next{border-top:1px solid var(--line); padding:58px 0 84px}
.next h2{font-size:1.35rem; margin-bottom:24px; color:var(--muted)}
.next .grid{gap:18px}
.xl{
  display:block; text-decoration:none; padding:22px 24px;
  border:1px solid var(--line); border-radius:3px; transition:.22s;
}
.xl:hover{border-color:var(--accent); background:var(--ink-2)}
.xl span{display:block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:8px}
.xl strong{font-family:'Anton',sans-serif; font-weight:400; font-size:1.3rem; text-transform:uppercase; letter-spacing:.01em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:52px 0; font-size:.9rem; color:var(--muted)}
footer .wrap{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
footer a{color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line)}
footer a:hover{border-bottom-color:var(--accent)}

/* ---------- story-ip section runs dark gold ---------- */
.lore{--accent:var(--gold)}
.lore h1,.lore h2{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
                  text-transform:none; letter-spacing:.01em}
.lore h1{font-size:clamp(2.8rem,7vw,5rem)}
.lore .eyebrow{color:var(--gold)}

/* ---------- rv section runs green ---------- */
.rv{--accent:var(--green)}

/* ---------- before/after ---------- */
.ba{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; align-items:start}
.ba .tag{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding:10px 0 0}

@media(max-width:640px){
  section{padding:60px 0}
  nav{gap:16px; margin-left:0; width:100%}
  .hero{min-height:70vh}
}