/* ==========================================================================
   Marina Christoforou — portfolio
   A dark, quiet gallery: warm near-black walls, antique-gold hairlines,
   Garamond for the voice, Inter for the labels. Both carry full Greek.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:        #0B0A09;
  --bg-soft:   #100F0D;
  --bg-raise:  #171512;
  --bg-veil:   rgba(11,10,9,.82);

  /* ---- Accent colour. Change these four lines to re-tint the whole site. ----
     --accent-rgb must be the same colour as --accent, written as R,G,B — every
     translucent hover, hairline and highlight is derived from it.
       Champagne (current) #CBBBA0 / 203,187,160  light #DBC9A8
       Antique gold        #C9A961 / 201,169,97   light #E3CB98
       Aged bronze         #B07A50 / 176,122,80   light #D2A276
       Sapphire            #5B7FA8 / 91,127,168   light #BCD0E2
     Keep --accent at 4.5:1 or better against --bg: it is also the background of
     the solid buttons, which carry near-black text.                          */
  --accent-rgb:  203,187,160;
  --accent:      #CBBBA0;
  --accent-lt:   #DBC9A8;
  --accent-dim:  rgba(var(--accent-rgb),.30);
  --line:        rgba(var(--accent-rgb),.16);
  --line-soft: rgba(237,231,221,.09);

  --text:      #EDE7DD;
  --muted:     #9A9086;
  --muted-2:   #6C645B;

  --f-display: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --gutter:    clamp(20px, 5vw, 72px);
  --maxw:      1360px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --slow:      .85s var(--ease);
  --med:       .45s var(--ease);

  --nav-h:     72px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

::selection{ background:rgba(var(--accent-rgb),.28); color:#fff; }

/* thin dark scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#26231f; border:3px solid var(--bg); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#3a352d; }

/* ---------- 3. Shared pieces ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#0B0A09; padding:12px 20px; font-size:13px;
}
.skip:focus{ left:12px; top:12px; }

/* film grain over everything — gives the flat black some tooth */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* small letter-spaced label, used above every section title */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:11px; font-weight:400; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); margin:0 0 22px;
}
.eyebrow::before{ content:''; width:44px; height:1px; background:var(--accent-dim); flex:none; }

.s-title{
  font-family:var(--f-display); font-weight:400; font-size:clamp(2.2rem,5.4vw,3.9rem);
  line-height:1.05; letter-spacing:-.012em; margin:0;
}

.rule{ height:1px; background:var(--line); border:0; margin:0; }

section{ position:relative; z-index:2; }

/* scroll-reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--slow), transform var(--slow); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- 4. Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background var(--med), border-color var(--med), height var(--med);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  height:60px;
  background:var(--bg-veil);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
  border-bottom-color:var(--line);
}
.nav__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
          display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ font-family:var(--f-display); font-size:1.12rem; letter-spacing:.06em; white-space:nowrap; }
.brand em{ font-style:italic; color:var(--accent); }

.nav__links{ display:flex; align-items:center; gap:36px; }
.nav__link{
  position:relative; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); padding:6px 0; transition:color var(--med);
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform var(--med);
}
.nav__link:hover,.nav__link.active{ color:var(--text); }
.nav__link:hover::after,.nav__link.active::after{ transform:scaleX(1); transform-origin:left; }

/* burger */
.burger{ display:none; width:40px; height:40px; position:relative; }
.burger span{
  position:absolute; left:9px; width:22px; height:1px; background:var(--text);
  transition:transform var(--med), opacity var(--med);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:23px; }
.burger.open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:55; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; visibility:hidden; transition:opacity var(--med), visibility var(--med);
}
.drawer.open{ opacity:1; visibility:visible; }
.drawer a{
  font-family:var(--f-display); font-size:2rem; color:var(--text);
  padding:14px 0; transition:color var(--med);
}
.drawer a:hover{ color:var(--accent); }

/* ---------- 5. Hero ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center 28%;
  transition:opacity 2.6s ease-in-out;
  transform:scale(1.06);
  animation:drift 26s ease-in-out infinite alternate;
}
.hero__slide.on{ opacity:.30; }
@keyframes drift{ from{ transform:scale(1.05) translate3d(0,0,0); } to{ transform:scale(1.14) translate3d(0,-2%,0); } }

/* vignette + floor fade so the type always sits on darkness */
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(115% 85% at 50% 38%, rgba(11,10,9,.34) 0%, rgba(11,10,9,.72) 46%, rgba(11,10,9,.94) 78%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(11,10,9,.86) 0%, rgba(11,10,9,.30) 32%, rgba(11,10,9,.62) 70%, var(--bg) 100%);
}
.hero__in{ position:relative; z-index:2; width:100%; padding-block:calc(var(--nav-h) + 40px) 120px; }

.hero__eyebrow{
  font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--accent);
  margin:0 0 26px;
}
.hero__name{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(3rem,11.5vw,9.5rem); line-height:.92; letter-spacing:-.025em;
  margin:0; text-wrap:balance;
}
.hero__name span{ display:block; }
.hero__name span:last-child{ font-style:italic; color:var(--accent-lt); }

.hero__cta{
  display:inline-flex; align-items:center; gap:14px; margin-top:64px;
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--text);
  padding-bottom:10px; border-bottom:1px solid var(--accent-dim);
  transition:border-color var(--med), gap var(--med), color var(--med);
}
.hero__cta:hover{ border-color:var(--accent); gap:22px; color:var(--accent-lt); }
.hero__cta svg{ width:22px; flex:none; }

.hero__scroll{
  position:absolute; z-index:2; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted-2);
}
.hero__scroll i{ display:block; width:1px; height:52px; background:linear-gradient(var(--accent-dim),transparent); }

/* ---------- 6. Works ---------- */
.works{ padding-block:clamp(80px,12vw,150px) clamp(60px,9vw,110px); }

.works__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:28px; margin-bottom:16px;
}
.works__count{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); }

.sort{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-block:22px 34px; }
.sort__label{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); margin-right:8px; }
.sort__btn{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding:7px 16px; border:1px solid transparent; border-radius:999px;
  transition:color var(--med), border-color var(--med), background var(--med);
}
.sort__btn:hover{ color:var(--text); border-color:var(--line); }
.sort__btn[aria-pressed="true"]{ color:var(--accent-lt); border-color:var(--accent-dim); background:rgba(var(--accent-rgb),.07); }

/* masonry — mixed canvas shapes read better than a forced grid */
.grid{ columns:3; column-gap:clamp(18px,2.4vw,34px); }
@media (max-width:1024px){ .grid{ columns:2; } }
@media (max-width:600px){  .grid{ columns:1; } }

.card{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin-bottom:clamp(24px,3.4vw,48px);
  display:block; width:100%; text-align:left;
}
.card__frame{
  display:block;                       /* spans, so the markup stays valid inside <button> */
  position:relative; overflow:hidden; background:#151310;
  box-shadow:0 18px 44px -28px rgba(0,0,0,.95);
}
.card__frame::after{        /* hairline that lights up on hover */
  content:''; position:absolute; inset:0; pointer-events:none;
  border:1px solid transparent; transition:border-color var(--med);
}
.card:hover .card__frame::after,
.card:focus-visible .card__frame::after{ border-color:var(--accent-dim); }

.card__img{
  width:100%; height:auto; opacity:0;
  transform:scale(1.005);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease), filter var(--med);
  filter:saturate(.94);
}
.card__img.loaded{ opacity:1; }
.card:hover .card__img{ transform:scale(1.045); filter:saturate(1.04); }

.card__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-top:16px; }
.card__title{
  display:block;
  font-family:var(--f-display); font-size:1.2rem; font-weight:400; line-height:1.3; margin:0;
  transition:color var(--med);
}
.card:hover .card__title{ color:var(--accent-lt); }
.card__price{ font-size:12.5px; letter-spacing:.08em; color:var(--muted); white-space:nowrap; }
.card__sub{ display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-top:5px; }

/* ---------- 7. About ---------- */
.about{ padding-block:clamp(80px,12vw,150px); background:var(--bg-soft); border-block:1px solid var(--line-soft); }
.about__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr); gap:clamp(36px,7vw,110px); align-items:start; }
@media (max-width:860px){ .about__grid{ grid-template-columns:1fr; } }

.about__body p{ margin:0 0 1.5em; color:#CFC7BB; font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.95; }
.about__body p:first-child{
  font-family:var(--f-display); font-size:clamp(1.35rem,2.5vw,1.85rem);
  line-height:1.55; color:var(--text); margin-bottom:1.15em;
}
.about__sig{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--f-display); font-style:italic; font-size:1.5rem; color:var(--accent-lt);
}

/* ---------- 8. Exhibitions ---------- */
.exhibitions{ padding-top:clamp(80px,12vw,150px); }
.ex__head{ margin-bottom:clamp(28px,4vw,44px); }

/* upcoming or current show — its invitation large, details beside it */
.ex-feature{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px); align-items:center;
  padding-block:clamp(40px,6vw,80px);
}
.ex-feature + .ex-feature{ border-top:1px solid var(--line-soft); }
.ex-feature > .ex__photos{ grid-column:1 / -1; margin-top:0; }
@media (max-width:900px){ .ex-feature{ grid-template-columns:1fr; } }

.ex-feature__fig,.ex__photo{
  display:block; position:relative; overflow:hidden; padding:0; min-width:0;
  background:#151310; box-shadow:0 18px 44px -28px rgba(0,0,0,.95);
}
.ex-feature__fig::after,.ex__photo::after{     /* hairline that lights up on hover */
  content:''; position:absolute; inset:0; pointer-events:none;
  border:1px solid transparent; transition:border-color var(--med);
}
.ex-feature__fig:hover::after,.ex-feature__fig:focus-visible::after,
.ex__photo:hover::after,.ex__photo:focus-visible::after{ border-color:var(--accent-dim); }
.ex-feature__fig img,.ex__photo img{
  width:100%; height:auto; opacity:0;
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
}
.ex-feature__fig img.loaded,.ex__photo img.loaded{ opacity:1; }
.ex-feature__fig:hover img{ transform:scale(1.02); }
.ex__photo:hover img{ transform:scale(1.05); }

.ex__status{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 24px;
  padding:6px 15px 6px 13px; border:1px solid var(--accent-dim); border-radius:999px;
  background:rgba(var(--accent-rgb),.07);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-lt);
}
.ex__status::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--accent);
  animation:beat 2.4s ease-in-out infinite;
}
@keyframes beat{ 50%{ opacity:.2; } }
@media (prefers-reduced-motion: reduce){ .ex__status::before{ animation:none; } }

.ex__title{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.1; margin:0; }
.ex-feature .ex__title{ font-size:clamp(2.2rem,4.4vw,3.3rem); }
.ex__orig{ margin:8px 0 0; font-family:var(--f-display); font-style:italic; font-size:1.2rem; color:var(--accent); }

.ex__facts{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px 28px;
  margin:30px 0 0; padding-block:22px; border-block:1px solid var(--line);
}
.ex__facts dt{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); padding-top:4px; }
.ex__facts dd{ margin:0; line-height:1.55; }
.ex__facts small{ display:block; margin-top:3px; font-size:13px; color:var(--muted); }
@media (max-width:480px){
  .ex__facts{ grid-template-columns:1fr; gap:2px; }
  .ex__facts dd{ margin-bottom:12px; }
}

.ex__text{ margin:24px 0 0; color:var(--muted); max-width:60ch; }
.ex-feature__body .btn{ margin-top:30px; }

/* past shows — year on the left, story and photos on the right */
.ex-past__label{ margin-top:clamp(30px,4vw,50px); }
.ex-item{
  display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,2fr);
  gap:clamp(14px,5vw,80px);
  padding-block:clamp(40px,5vw,64px);
  border-top:1px solid var(--line-soft);
}
.ex-item:first-child{ border-top:0; }          /* straight after the rule */
@media (max-width:760px){ .ex-item{ grid-template-columns:1fr; } }
.ex-item__year{
  margin:0; font-family:var(--f-display); font-weight:300; font-style:italic;
  font-size:clamp(2.6rem,6vw,4.4rem); line-height:.9; color:var(--accent);
}
.ex__meta{ margin:14px 0 0; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* photos in justified rows: each tile's width follows its photo's shape (--r,
   width ÷ height), so a row lines up at one height without cropping anything */
.ex__photos{ --row:170px; display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.ex__photos::after{ content:''; flex-grow:1000; }   /* stops the last row stretching */
.ex__photo{ flex:var(--r) 1 calc(var(--r) * var(--row)); }
@media (max-width:600px){ .ex__photos{ --row:104px; gap:6px; } }

/* ---------- 9. Contact ---------- */
.contact{ padding-block:clamp(80px,12vw,150px); }
.contact__lead{ max-width:46ch; margin:26px 0 0; color:var(--muted); }

.contact__mail{
  display:inline-block; margin:44px 0 0;
  font-family:var(--f-display); font-size:clamp(1.5rem,4.6vw,3rem); line-height:1.2;
  color:var(--text); word-break:break-word;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat; background-size:0 1px; background-position:0 100%;
  transition:background-size .6s var(--ease), color var(--med);
}
.contact__mail:hover{ color:var(--accent-lt); background-size:100% 1px; }

.contact__row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 26px; border:1px solid var(--line); border-radius:999px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text);
  transition:border-color var(--med), background var(--med), color var(--med);
}
.btn:hover{ border-color:var(--accent-dim); background:rgba(var(--accent-rgb),.08); color:var(--accent-lt); }
.btn--solid{ background:var(--accent); border-color:var(--accent); color:#0B0A09; }
.btn--solid:hover{ background:var(--accent-lt); border-color:var(--accent-lt); color:#0B0A09; }
.btn svg{ width:15px; height:15px; flex:none; }

.contact__meta{ margin-top:46px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }

/* ---------- 10. Footer ---------- */
.foot{ border-top:1px solid var(--line-soft); padding-block:38px; }
.foot__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  font-size:11.5px; letter-spacing:.1em; color:var(--muted-2);
}
.foot a:hover{ color:var(--accent); }

/* ---------- 11. Lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(6,5,5,.97);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lb.open{ display:grid; grid-template-rows:auto 1fr auto; }
.lb__fig{ position:relative; display:flex; align-items:center; justify-content:center; min-height:0; padding:0 clamp(12px,6vw,96px); }
.lb__img{
  max-width:100%; max-height:100%; object-fit:contain;
  box-shadow:0 40px 90px -40px #000;
  opacity:0; transform:scale(.985); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.lb__img.in{ opacity:1; transform:none; }

.lb__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px clamp(16px,4vw,40px); }
.lb__count{ font-size:11.5px; letter-spacing:.24em; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.lb__x{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; transition:border-color var(--med), background var(--med); }
.lb__x:hover{ border-color:var(--accent-dim); background:rgba(var(--accent-rgb),.09); }
.lb__x svg{ width:15px; height:15px; }

.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--muted);
  transition:border-color var(--med), color var(--med), background var(--med);
}
.lb__nav:hover{ border-color:var(--accent-dim); color:var(--accent-lt); background:rgba(var(--accent-rgb),.08); }
.lb__nav--prev{ left:clamp(8px,2vw,28px); }
.lb__nav--next{ right:clamp(8px,2vw,28px); }
.lb__nav svg{ width:17px; height:17px; }
@media (max-width:640px){ .lb__nav{ display:none; } }

.lb__info{
  padding:clamp(18px,3vw,30px) clamp(16px,4vw,40px) clamp(24px,4vw,40px);
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px;
}
.lb__title{ font-family:var(--f-display); font-size:clamp(1.5rem,3.4vw,2.3rem); font-weight:400; margin:0 0 12px; }
.lb__specs{ display:flex; flex-wrap:wrap; gap:10px 30px; font-size:12px; letter-spacing:.12em; color:var(--muted); }
.lb__specs b{ color:var(--muted-2); font-weight:400; text-transform:uppercase; font-size:10.5px; letter-spacing:.22em; margin-right:8px; }
.lb__specs .val--price{ color:var(--accent-lt); }

/* ---------- 12. Narrow screens ---------- */
@media (max-width:820px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .works__head{ align-items:flex-start; }
}

/* ---------- 13. Print ---------- */
@media print{
  .nav,.drawer,.grain,.hero__scroll,.sort,.lb,.hero__bg,.hero__veil{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card__img,.ex-feature__fig img,.ex__photo img{ opacity:1 !important; }
}