/* Discoe — painting & sculpture portfolio
   Ground: Gallery White · Accent: Oxide Red · Type: Archivo · Even grid · Subtle drift */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --bg:#FFFFFF;
  --surface-2:#F5F2EC;
  --ink:#1C1B19;
  --ink-soft:#6E6A62;
  --ink-faint:#A5A093;
  --line:#E7E2D6;
  --accent:#9C4A34;
  --accent-ink:#FFFFFF;
  --accent-soft:#F1E1D9;

  --font:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --container:72rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:700;
  line-height:1.12;
  margin:0;
  text-wrap:balance;
  letter-spacing:-.01em;
}
p{margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
button{font-family:var(--font);}

.container{max-width:var(--container); margin:0 auto; padding:0 1.75rem;}
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:.7rem;
}

/* ---------- Header / Nav ---------- */
.site-header{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); z-index:40;}
.header-inner{
  max-width:var(--container); margin:0 auto; padding:1.1rem 1.75rem;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{font-weight:700; font-size:1.15rem; text-decoration:none; letter-spacing:-.01em;}
.main-nav{display:flex; gap:2rem;}
.main-nav a{
  text-decoration:none; font-size:.92rem; font-weight:500; color:var(--ink-soft);
  padding-bottom:.2rem; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{color:var(--ink); border-color:var(--accent);}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:.3rem;
  padding:.4rem .7rem; font-size:.82rem; color:var(--ink); cursor:pointer;
}
.mobile-nav{display:flex; flex-direction:column; border-top:1px solid var(--line); padding:.5rem 1.75rem 1rem;}
.mobile-nav[hidden]{display:none;}
.mobile-nav a{padding:.6rem 0; text-decoration:none; font-size:.95rem; color:var(--ink); border-bottom:1px solid var(--line);}
.mobile-nav a:last-child{border-bottom:none;}

@media (max-width:40rem){
  .main-nav{display:none;}
  .nav-toggle{display:inline-block;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.88rem; font-weight:600; text-decoration:none; cursor:pointer;
  padding:.75rem 1.4rem; border-radius:2rem; border:1px solid var(--ink);
  color:var(--ink); background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover{background:var(--ink); color:var(--bg);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn.primary:hover{background:#823A28; border-color:#823A28;}
.btn:active{transform:scale(.98);}

/* ---------- Hero ---------- */
.hero{padding:3.5rem 0 3rem;}
.hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center;}
@media (max-width:48rem){ .hero-grid{grid-template-columns:1fr; gap:2rem;} }
.hero h1{font-size:clamp(2rem,4.2vw,2.9rem); margin-bottom:1.1rem;}
.hero p.lede{font-size:1.08rem; color:var(--ink-soft); max-width:32rem; line-height:1.65;}
.hero .btn{margin-top:1.6rem;}

/* ---------- Placeholder art blocks ---------- */
.art{
  position:relative; border-radius:.4rem; overflow:hidden; background:var(--surface-2);
}
.art::after{
  content:"Photography pending"; position:absolute; right:.6rem; bottom:.5rem;
  font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(0,0,0,.38); background:rgba(255,255,255,.55); padding:.15rem .4rem; border-radius:.2rem;
}
.art.dark::after{color:rgba(255,255,255,.7); background:rgba(0,0,0,.28);}
.art.portrait{aspect-ratio:4/5;}
.art.wide{aspect-ratio:16/10;}
.art.square{aspect-ratio:1;}
.art.tall{aspect-ratio:3/4;}

.art-1{background:linear-gradient(145deg,#c4623f 0%,#9c4a34 45%,#5c2c22 100%);}
.art-2{background:linear-gradient(155deg,#e3c9a1 0%,#c99a5f 55%,#8a6a3c 100%);}
.art-3{background:linear-gradient(160deg,#48566b 0%,#2c3644 60%,#171b21 100%);}
.art-4{background:linear-gradient(150deg,#d9c9b8 0%,#a98f78 55%,#6b543f 100%);}
.art-5{background:linear-gradient(140deg,#7c8a6b 0%,#4f5c42 55%,#2c331f 100%);}
.art-6{background:linear-gradient(150deg,#e0958a 0%,#b85a49 55%,#6f2f24 100%);}
.art-7{background:linear-gradient(150deg,#b9b2a4 0%,#847c6c 55%,#4c473c 100%);}
.art-8{background:linear-gradient(160deg,#d7d2c4 0%,#a39d8c 55%,#5f5a4c 100%);}
.sculpt-1{background:radial-gradient(circle at 35% 25%,#9a9488 0%,#5c584d 55%,#2a2822 100%);}
.sculpt-2{background:radial-gradient(circle at 40% 30%,#b7a374 0%,#7a6743 60%,#3a3020 100%);}
.sculpt-3{background:radial-gradient(circle at 30% 20%,#a8ab9e 0%,#63665a 55%,#2c2e27 100%);}
.sculpt-4{background:radial-gradient(circle at 45% 30%,#c2b18a 0%,#8a7650 60%,#463a24 100%);}
.art.dark{}
.art-3::after,.art-5::after,.art-7::after,.sculpt-1::after,.sculpt-2::after,.sculpt-3::after,.sculpt-4::after{color:rgba(255,255,255,.75); background:rgba(0,0,0,.3);}

/* ---------- Fade-in on scroll (subtle drift) ---------- */
.fade-up{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.fade-up.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .fade-up{opacity:1; transform:none; transition:none;}
}

/* ---------- Sections ---------- */
section{padding:3.2rem 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.8rem; flex-wrap:wrap;}
.section-head h2{font-size:1.5rem;}
.section-head a{font-size:.85rem; font-weight:600; text-decoration:none; color:var(--accent); white-space:nowrap;}
.section-head a:hover{text-decoration:underline;}

/* ---------- Work grid ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
@media (max-width:56rem){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:32rem){ .grid{grid-template-columns:1fr;} }

.piece-card{text-decoration:none; color:inherit; display:block;}
.piece-card .art{margin-bottom:.85rem; transition:transform .3s ease, box-shadow .3s ease;}
.piece-card:hover .art{transform:translateY(-3px); box-shadow:0 10px 24px -14px rgba(28,27,25,.35);}
.piece-card h3{font-size:1rem; font-weight:600; margin-bottom:.15rem;}
.piece-card .meta{font-size:.82rem; color:var(--ink-soft);}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:.6rem; margin-bottom:2rem;}
.tab{
  font-size:.85rem; font-weight:600; padding:.5rem 1.1rem; border-radius:2rem;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:all .2s ease;
}
.tab.active{border-color:var(--ink); color:var(--ink); background:var(--surface-2);}
.tab:hover{border-color:var(--ink-faint);}

/* ---------- Piece detail ---------- */
.piece-layout{display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; align-items:start;}
@media (max-width:52rem){ .piece-layout{grid-template-columns:1fr;} }
.piece-info h1{font-size:1.7rem; margin-bottom:.4rem;}
.piece-info .meta-line{font-size:.9rem; color:var(--ink-soft); margin-bottom:1.4rem;}
.piece-info .meta-line span{display:block;}
.piece-info p.note{font-size:1rem; line-height:1.65; color:var(--ink); margin-bottom:1.6rem;}
.back-link{font-size:.85rem; color:var(--ink-soft); text-decoration:none; display:inline-block; margin-bottom:1.6rem;}
.back-link:hover{color:var(--ink);}

/* ---------- About ---------- */
.about-layout{display:grid; grid-template-columns:18rem 1fr; gap:3rem;}
@media (max-width:48rem){ .about-layout{grid-template-columns:1fr;} }
.about-copy p{font-size:1.02rem; line-height:1.7; color:var(--ink); margin-bottom:1.2rem; max-width:38rem;}
.about-copy p:last-child{margin-bottom:0;}

.cv-block{margin-top:3rem; border-top:1px solid var(--line); padding-top:2rem;}
.cv-row{display:grid; grid-template-columns:5rem 1fr; gap:1.2rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.92rem;}
.cv-row:last-child{border-bottom:none;}
.cv-row .yr{color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.cv-group h4{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:2rem 0 .6rem;}
.cv-group:first-child h4{margin-top:0;}

/* ---------- Contact ---------- */
.contact-simple{padding:5rem 0 6rem; text-align:center;}
.contact-simple .container{max-width:34rem;}
.contact-simple h1{margin-bottom:.8rem;}
.contact-simple p{color:var(--ink-soft); font-size:1.02rem; line-height:1.6; margin:0 auto 2.2rem; max-width:28rem;}
.email-link{
  display:inline-block; font-size:clamp(1.3rem,3.4vw,1.7rem); font-weight:600;
  color:var(--accent); text-decoration:none; border-bottom:2px solid var(--accent-soft);
  padding-bottom:.2rem; transition:border-color .2s ease;
}
.email-link:hover{border-color:var(--accent);}

/* ---------- Journal ---------- */
.journal-crumb{font-size:.78rem; color:var(--ink-faint); margin-bottom:1.2rem; display:block;}
.journal-list{display:flex; flex-direction:column;}
.journal-item{
  display:grid; grid-template-columns:9rem 1fr; gap:1.6rem; padding:1.8rem 0;
  border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
}
.journal-item:first-child{padding-top:0;}
@media (max-width:36rem){ .journal-item{grid-template-columns:1fr;} .journal-item .art{aspect-ratio:16/9;} }
.journal-item .art{aspect-ratio:4/3;}
.journal-item h3{font-size:1.15rem; margin-bottom:.3rem;}
.journal-item .date{font-size:.78rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; display:block;}
.journal-item .excerpt{font-size:.92rem; color:var(--ink-soft); line-height:1.6;}
.journal-entry-body p{font-size:1.02rem; line-height:1.75; color:var(--ink); max-width:38rem; margin-bottom:1.3rem;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); background:var(--surface-2); margin-top:2rem;}
.footer-inner{
  max-width:var(--container); margin:0 auto; padding:2rem 1.75rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.85rem; color:var(--ink-soft);
}
.footer-links{display:flex; gap:1.5rem;}
.footer-links a{text-decoration:none; color:var(--ink-soft); transition:color .2s ease;}
.footer-links a:hover{color:var(--accent);}

/* ---------- Utility ---------- */
.pagehead{padding:2.6rem 0 0;}
.pagehead h1{font-size:clamp(1.8rem,3.6vw,2.4rem); margin-bottom:.6rem;}
.pagehead p{color:var(--ink-soft); font-size:1rem; max-width:34rem;}
.empty-state{padding:4rem 0; text-align:center; color:var(--ink-soft);}