/* ===================================================================
   BUCK — Brighton painter portfolio
   Tokens pulled directly from the paintings: linen canvas ground,
   the tangled cobalt "vine" line that recurs across his work, the
   burnt-rust / chartreuse / signal-red accents from El Topo.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;900&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --canvas:#f1ece1;
  --ink:#15171c;
  --ink-soft:#1e212a;
  --cobalt:#2a4a8f;
  --cobalt-dim:#1c3157;
  --rust:#c2461f;
  --chartreuse:#a8c22a;
  --signal:#c22424;
  --paper:#faf7f0;

  --display: 'Big Shoulders Display', sans-serif;
  --body: 'Fraunces', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --edge: 1.5rem;
  --max: 78rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:1.05rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }

::selection{ background:var(--rust); color:var(--paper); }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--chartreuse);
  outline-offset:3px;
}

/* ---------- canvas grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll vine (signature element) ---------- */
#vine-wrap{
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
}
#vine{ width:100%; height:100%; }
#vine path{
  fill:none;
  stroke:var(--cobalt);
  stroke-width:3;
  stroke-linecap:round;
  opacity:.55;
}

/* ---------- loader ---------- */
#loader{
  position:fixed; inset:0; z-index:100;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hidden{ opacity:0; visibility:hidden; }
#loader svg{ width:min(46vw,220px); height:auto; }
#loader path{
  fill:none; stroke:var(--rust); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:draw 1.7s cubic-bezier(.65,0,.35,1) forwards;
}
#loader path.b{ stroke:var(--cobalt); animation-delay:.12s; }
#loader path.c{ stroke:var(--chartreuse); animation-delay:.24s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  #loader{ transition:none; }
  #loader path{ animation:none; stroke-dashoffset:0; }
}

/* ---------- layout shell ---------- */
main{ position:relative; z-index:3; }
section{ position:relative; padding:clamp(4rem,9vw,7.5rem) var(--edge); }
.wrap{ max-width:var(--max); margin-inline:auto; }

/* wall-label eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--chartreuse);
  border:1px solid rgba(250,247,240,.25); border-radius:2px;
  padding:.35em .8em; margin-bottom:1.6rem;
}
.eyebrow::before{ content:'●'; font-size:.6em; color:var(--rust); }

h1,h2,h3{ font-family:var(--display); font-weight:900; text-transform:uppercase; margin:0 0 .3em; letter-spacing:.01em; }
h2{ font-size:clamp(2.2rem,5.4vw,4rem); line-height:.95; }
p{ margin:0 0 1em; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.3rem); max-width:42em; color:rgba(250,247,240,.86); }

/* squiggle divider */
.squiggle{ width:120px; height:22px; margin:0 0 1.4rem; opacity:.7; }
.squiggle path{ fill:none; stroke:var(--rust); stroke-width:3; stroke-linecap:round; }

/* ================= HERO ================= */
#hero{
  min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(4.5rem,9vw,5rem);
  background:
    linear-gradient(180deg, rgba(21,23,28,.35) 0%, rgba(21,23,28,.55) 55%, var(--ink) 96%),
    url('../assets/img/paintings/modern-solitude-full.webp') center 38%/cover no-repeat;
}
#hero .wrap{ width:100%; }
#hero .eyebrow{ background:rgba(21,23,28,.55); backdrop-filter:blur(2px); }
.name{
  font-size:clamp(4.5rem,17vw,11rem); line-height:.82; color:var(--paper);
  text-shadow:0 6px 30px rgba(0,0,0,.45);
}
.name .dot{ color:var(--rust); }
.tagline{
  font-family:var(--body); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,2.4vw,1.7rem); max-width:32em; margin-top:.6em;
  color:var(--paper);
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:.5em 1.4em; margin-top:2rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(250,247,240,.7);
}
.scroll-cue{
  position:absolute; bottom:1.6rem; left:var(--edge);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(250,247,240,.55);
  display:flex; align-items:center; gap:.6em;
}
.scroll-cue span{ display:inline-block; width:1px; height:28px; background:currentColor; animation:cue 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(1); opacity:.4; } 50%{ transform:scaleY(.4); opacity:1; } }

/* ================= ABOUT ================= */
#about{ background:var(--ink-soft); }
.about-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:3rem; align-items:start; }
@media(min-width:64rem){ .about-grid{ grid-template-columns: 0.85fr 1.15fr; gap:5rem; } }
.portrait-frame{
  position:relative; border:10px solid var(--paper); box-shadow:0 20px 50px rgba(0,0,0,.4);
  transform:rotate(-1.2deg);
}
.portrait-frame img{ width:100%; }
.portrait-frame figcaption{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--paper); padding:.5em .3em 0; text-align:center;
}
.bio p{ color:rgba(250,247,240,.88); }
.bio p:first-of-type{
  font-family:var(--body); font-style:italic; font-size:1.3em; color:var(--paper);
}
.bio-quote{
  font-family:var(--body); font-style:italic; font-size:clamp(1.2rem,2vw,1.5rem);
  border-left:3px solid var(--rust); padding-left:1.1em; margin:1.8em 0; color:var(--paper);
}

/* ================= EXHIBITION ================= */
#show{ background:var(--ink); }
.show-head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; align-items:flex-end; margin-bottom:3rem; }
.show-facts{ font-family:var(--mono); font-size:.85rem; line-height:2; color:rgba(250,247,240,.85); }
.show-facts strong{ color:var(--chartreuse); font-weight:500; }
.show-actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.4rem; }
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.85em 1.4em; border:1px solid var(--paper); border-radius:2px;
  text-decoration:none; transition:background .25s ease, color .25s ease;
}
.btn:hover{ background:var(--paper); color:var(--ink); }
.btn.solid{ background:var(--rust); border-color:var(--rust); color:var(--paper); }
.btn.solid:hover{ background:var(--paper); color:var(--ink); }

.flyers{ display:grid; grid-template-columns:1fr; gap:2.2rem; }
@media(min-width:52rem){ .flyers{ grid-template-columns:1fr 1fr; } }
.flyer{
  background:var(--paper); padding:.6rem .6rem .9rem; box-shadow:0 24px 60px rgba(0,0,0,.45);
  transition:transform .35s ease;
}
.flyer:nth-child(1){ transform:rotate(-1.6deg); }
.flyer:nth-child(2){ transform:rotate(1.3deg); }
.flyer:hover{ transform:rotate(0deg) translateY(-4px); }
.flyer a{ display:block; }
.flyer figcaption{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--ink);
  text-align:center; padding-top:.6em; text-transform:uppercase;
}

/* ================= GALLERY ================= */
#work{ background:var(--ink-soft); }
.gallery{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem;
}
@media(min-width:40rem){ .gallery{ grid-template-columns:repeat(3,1fr); gap:1.8rem; } }
@media(min-width:64rem){ .gallery{ grid-template-columns:repeat(4,1fr); } }

.piece{ margin:0; }
.piece .frame{
  position:relative; overflow:hidden; aspect-ratio:1/1.05; background:var(--ink);
  cursor:zoom-in; border:none; padding:0; display:block; width:100%;
  color:inherit; font:inherit;
}
.piece img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(.92);
}
.piece .frame:hover img{ transform:scale(1.06); filter:saturate(1.12); }

.piece .stripe{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(250,247,240,.55) 45%, transparent 55%);
  transform:translateX(-120%);
}
.piece .frame:hover .stripe{ animation:sweep .6s ease forwards; }
@keyframes sweep{ to{ transform:translateX(120%); } }

.piece .figcap{
  display:block; padding-top:.7em;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:rgba(250,247,240,.75);
}
.piece .figcap .t{ font-family:var(--body); font-style:italic; font-size:1.05rem; color:var(--paper); display:block; margin-bottom:.15em; letter-spacing:0; }

@media (prefers-reduced-motion: reduce){
  .piece img{ transition:none; }
  .piece .frame:hover img{ transform:none; }
  .piece .stripe{ display:none; }
}

/* lightbox */
#lightbox{
  position:fixed; inset:0; z-index:90; background:rgba(10,11,14,.94);
  display:flex; align-items:center; justify-content:center; padding:5vh 4vw;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox figure{ max-width:min(92vw,900px); max-height:90vh; margin:0; text-align:center; }
#lightbox img{ max-height:76vh; margin:0 auto; box-shadow:0 30px 80px rgba(0,0,0,.6); }
#lightbox figcaption{ font-family:var(--mono); font-size:.85rem; color:rgba(250,247,240,.8); margin-top:1.1rem; }
#lightbox figcaption .t{ font-family:var(--body); font-style:italic; font-size:1.3rem; color:var(--paper); display:block; margin-bottom:.2em; }
#lightbox .close{
  position:absolute; top:1.4rem; right:1.4rem; background:none; border:1px solid rgba(250,247,240,.4);
  color:var(--paper); width:2.6rem; height:2.6rem; border-radius:50%; font-size:1.3rem; cursor:pointer; line-height:1;
}
#lightbox .close:hover{ background:var(--paper); color:var(--ink); }
#lightbox .nav{
  position:absolute; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--paper); font-size:2.4rem; cursor:pointer; padding:.6rem 1rem; opacity:.7;
}
#lightbox .nav:hover{ opacity:1; }
#lightbox .prev{ left:.5rem; } #lightbox .next{ right:.5rem; }

/* ================= CONNECT ================= */
#connect{ background:var(--ink); text-align:center; }
#connect .wrap{ display:flex; flex-direction:column; align-items:center; }
.connect-quote{
  font-family:var(--body); font-style:italic; font-size:clamp(1.5rem,3.6vw,2.4rem);
  max-width:20em; margin:0 auto 2.6rem; color:var(--paper);
}
.ig-cta{
  display:inline-flex; align-items:center; gap:.7em; font-family:var(--display); font-weight:700;
  font-size:1.3rem; letter-spacing:.02em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); background:var(--paper); padding:.9em 1.6em; border-radius:2px;
  transition:background .25s ease, color .25s ease;
}
.ig-cta:hover{ background:var(--rust); color:var(--paper); }
.qr-card{
  margin-top:2.4rem; background:var(--paper); padding:.9rem; width:min(220px,55vw);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.qr-card img{ width:100%; }
.qr-hint{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(250,247,240,.55); margin-top:.9rem; }

footer{
  padding:2.4rem var(--edge) 3rem; text-align:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:rgba(250,247,240,.45);
}
footer a{ text-decoration:underline; text-underline-offset:2px; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }