:root{
  --bg:#080a0e;
  --bg-2:#0c0f14;
  --ink:#f3f0ec;
  --muted:#b5bbc2;
  --dim:#7e8791;
  --copper:#d89b64;
  --copper-light:#f1c99e;
  --copper-dark:#79441f;
  --rule:rgba(216,155,100,.18);
  --shell:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.shell{width:min(var(--shell),calc(100% - 48px));margin:auto}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.035;
  background-image:
   radial-gradient(circle at 15% 25%,#fff 0 .4px,transparent .6px),
   radial-gradient(circle at 80% 55%,#fff 0 .35px,transparent .55px),
   radial-gradient(circle at 40% 85%,#fff 0 .35px,transparent .55px);
  background-size:15px 15px,19px 19px,23px 23px;
  mix-blend-mode:soft-light
}
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(7,9,12,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(216,155,100,.10)
}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between}
.logo{width:92px;height:64px;overflow:hidden;display:flex;align-items:center}
.logo img{width:92px;height:62px;object-fit:cover;object-position:center 48%;border-radius:2px}
nav{display:flex;gap:34px}
nav a{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:#d8ac82}
nav a:hover{color:#ffe0bf}
.hero{
  min-height:760px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  border-bottom:1px solid var(--rule);
  background:
   radial-gradient(circle at 80% 20%,rgba(193,112,53,.22),transparent 30%),
   linear-gradient(90deg,#07090c 0%,#090c11 55%,#1b1009 100%)
}
.portrait{
  position:absolute;right:-2%;top:0;width:50%;height:100%;
  background-image:url("assets/portrait.jpg");
  background-size:cover;background-position:center 15%;
  opacity:.62;
  filter:saturate(.78) contrast(1.06)
}
.hero-fade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#07090d 0%,rgba(7,9,13,.98) 43%,rgba(7,9,13,.58) 69%,rgba(7,9,13,.28) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.42))
}
.hero-layout{
  position:relative;z-index:3;display:grid;grid-template-columns:1fr 310px;gap:70px;align-items:end
}
.overline{
  margin:0 0 16px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--copper);font-weight:900
}
h1{
  margin:0;font-size:clamp(68px,9.2vw,136px);line-height:.88;letter-spacing:-.075em;
  max-width:900px;text-shadow:0 20px 80px rgba(0,0,0,.45)
}
.intro{font-size:21px;max-width:760px;color:#c9ced4;margin:30px 0 0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.button{
  min-height:46px;padding:0 19px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(216,155,100,.27);font-size:13px;font-weight:850;
  transition:.2s ease
}
.button:hover{transform:translateY(-1px)}
.button.primary{
  color:#20140b;background:linear-gradient(135deg,var(--copper-light),var(--copper));
  border-color:rgba(241,201,158,.9);box-shadow:0 14px 38px rgba(121,68,31,.25)
}
.button.secondary{color:#f1c99e;background:rgba(216,155,100,.04)}
.hero-note{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:20px 0;align-self:end;margin-bottom:10px
}
.hero-note span{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--copper);font-weight:900}
.hero-note p{margin:10px 0 0;color:#c3c9cf;font-size:17px}
.hero-bottom{
  position:relative;z-index:3;display:flex;gap:38px;margin-top:76px;
  color:#aab1b8;font-size:11px;text-transform:uppercase;letter-spacing:.14em
}

.work-section{padding:100px 0 110px;background:#090b0f}
.section-title{display:grid;grid-template-columns:1fr 1.2fr;column-gap:60px;align-items:end;margin-bottom:52px}
.section-title .overline{grid-column:1/-1}
.section-title h2,.profile-heading h2,.contact-section h2{
  margin:0;font-size:clamp(42px,5.5vw,74px);line-height:.98;letter-spacing:-.055em
}
.section-title>p:last-child{color:#aeb6be;margin:0 0 5px;font-size:17px}
.gallery{
  display:grid;grid-template-columns:1.15fr .85fr;
  grid-template-areas:
   "a b"
   "a c"
   "d d";
  gap:18px
}
.piece{margin:0;position:relative;overflow:hidden;background:#0f1319;border:1px solid var(--rule);isolation:isolate}
.piece-a{grid-area:a}
.piece-b{grid-area:b}
.piece-c{grid-area:c}
.piece-d{grid-area:d}
.art-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
.piece-a{min-height:960px}
.piece-b,.piece-c{min-height:470px}
.piece-d{min-height:720px}
.art-558{background-image:url("assets/cover-558.jpg")}
.art-576{background-image:url("assets/cover-576.jpg")}
.art-social{background-image:url("assets/social-visual.jpg")}
.art-579{background-image:url("assets/cover-579.jpg");background-position:center 44%}
.piece:hover .art-image{transform:scale(1.018);filter:brightness(.72)}
.piece figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:70px 24px 22px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
  display:flex;align-items:end;justify-content:space-between;gap:24px;
  opacity:.94
}
.piece figcaption div{display:grid;gap:4px}
.piece figcaption span{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:#e0ad7c;font-weight:900}
.piece figcaption strong{font-size:21px}
.piece figcaption em{font-style:normal;color:#b7c0c8;font-size:12px;text-align:right}
.work-footer{padding-top:22px;border-top:1px solid var(--rule);margin-top:26px;color:#89939d;font-size:13px}

.profile-section{
  padding:100px 0;background:
  radial-gradient(circle at 78% 20%,rgba(159,87,35,.15),transparent 24%),
  #0b0e13;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)
}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.profile-copy>p{margin:0 0 34px;color:#c1c8cf;font-size:19px}
.facts{border-top:1px solid var(--rule)}
.facts div{
  display:grid;grid-template-columns:150px 1fr;gap:30px;padding:18px 0;border-bottom:1px solid var(--rule)
}
.facts span{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#ba8b60;font-weight:900}
.facts strong{font-size:17px}

.contact-section{padding:100px 0 110px}
.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}
.contact-lead{color:#b7c0c8;font-size:18px;max-width:540px}
.contact-list{border-top:1px solid var(--rule)}
.contact-list p{
  margin:0;padding:18px 0;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:24px
}
.contact-list span{color:#909ba6}
.contact-list a{color:#efc494;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(239,196,148,.38)}
footer{border-top:1px solid var(--rule);padding:28px 0;color:#a67a55}
.footer-line{display:flex;justify-content:space-between;gap:20px;font-size:12px}

@media(max-width:1000px){
  .portrait{width:62%;opacity:.42}
  .hero-layout,.profile-grid,.contact-layout,.section-title{grid-template-columns:1fr}
  .hero-note{max-width:500px}
  .gallery{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"a b" "c d"
  }
  .piece-a,.piece-b,.piece-c,.piece-d{min-height:620px}
  .hero-bottom{flex-wrap:wrap}
}
@media(max-width:720px){
  .shell{width:min(var(--shell),calc(100% - 28px))}
  nav{display:none}
  .portrait{right:-30%;width:95%;opacity:.32}
  .hero{min-height:720px}
  .hero-layout{gap:40px}
  h1{font-size:clamp(52px,15vw,88px)}
  .intro{font-size:18px}
  .hero-bottom{gap:14px 24px;margin-top:48px}
  .gallery{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d"}
  .piece-a,.piece-b,.piece-c,.piece-d{min-height:auto;aspect-ratio:4/5}
  .piece-d{aspect-ratio:4/5}
  .piece figcaption{padding:60px 16px 16px;flex-direction:column;align-items:flex-start}
  .piece figcaption em{text-align:left}
  .facts div{grid-template-columns:1fr;gap:6px}
  .contact-list p,.footer-line{flex-direction:column;gap:5px}
}


/* FINAL POLISH */
.logo{width:104px;height:70px}
.logo img{width:104px;height:68px}

.hero-note{
  transform:translate(20px,72px);
  max-width:290px;
  padding:18px 0;
  background:linear-gradient(90deg,rgba(7,9,13,.78),rgba(7,9,13,.18));
}

/* Artwork protection/deterrence */
.protected-gallery{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.piece::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:auto;
  background:transparent;
}
.piece figcaption{
  z-index:3;
  pointer-events:none;
}
.preview-note{
  display:block;
  margin-top:8px;
  color:#73543a;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
}

/* extra subtle premium edge on artwork */
.piece{
  box-shadow:
    0 28px 70px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(239,196,148,.025);
}

/* Keep the face cleaner on narrower desktop widths */
@media(max-width:1180px){
  .hero-note{transform:none;max-width:500px}
}
@media(max-width:720px){
  .logo{width:82px;height:62px}
  .logo img{width:82px;height:60px}
  .hero-note{transform:none}
}