/* ============================================================
   NATALIJA CIMEŠA — Academic Painter
   Theme stylesheet — LIGHT / modern kunsthalle
   Paper-white walls, near-black text, a single scarlet accent
   from the toreador cape. Bricolage Grotesque (display/UI) +
   Newsreader italic (titles, quotes). Works hang in a curated,
   asymmetric grid with catalogue-style captions below.
   ============================================================ */

/* ---- Tokens ---------------------------------------------- */
:root{
  --paper:   #FBFBF9;   /* bright, barely-warm white — the wall */
  --paper-2: #F2F1EC;   /* raised panel / soft light */
  --ink:     #16130F;   /* near-black text */
  --ink-2:   #45403A;   /* softened ink */
  --stone:   #8B8478;   /* grey — secondary text, labels */
  --line:    #E4E1D7;   /* hairline */
  --flame:   #C71F1F;   /* scarlet — toreador cape, the one accent */
  --flame-lo:#9C1414;

  --measure: 64ch;
  --edge: clamp(1.25rem, 5vw, 6rem);

  --f-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --f-serif:   "Newsreader", Georgia, "Times New Roman", serif;

  --step--1: clamp(.78rem, .74rem + .18vw, .85rem);
  --step-0:  clamp(1rem, .97rem + .18vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  --step-3:  clamp(2.2rem, 1.55rem + 3.2vw, 4.25rem);
  --step-4:  clamp(3.2rem, 1.7rem + 7.4vw, 9rem);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset-ish ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-serif);
  font-size:var(--step-0);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:600;line-height:1;letter-spacing:-.02em}
p{margin:0 0 1em}
::selection{background:var(--flame);color:#fff}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px}

/* ---- Reusable bits --------------------------------------- */
.wrap{max-width:104rem;margin-inline:auto;padding-inline:var(--edge)}
.eyebrow{
  font-family:var(--f-display);
  font-size:var(--step--1);
  letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--ink);display:inline-flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:1.9rem;height:2px;background:var(--flame)}
.lede{font-family:var(--f-serif);font-size:var(--step-1);color:var(--ink-2);max-width:var(--measure);line-height:1.5}

/* catalogue caption used site-wide */
.cap{margin-top:1rem}
.cap .no{
  font-family:var(--f-display);font-size:var(--step--1);font-weight:600;
  letter-spacing:.14em;color:var(--flame);display:block;margin-bottom:.35rem;
}
.cap .t{
  font-family:var(--f-serif);font-style:italic;font-size:var(--step-1);
  color:var(--ink);display:block;line-height:1.1;
}
.cap .m{
  font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.03em;
  color:var(--stone);display:block;margin-top:.3rem;text-transform:none;font-weight:400;
}

/* ---- Header ---------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.15rem}
.brand{font-family:var(--f-display);font-weight:600;font-size:var(--step-1);letter-spacing:-.02em;line-height:1;display:flex;flex-direction:column}
.brand small{font-family:var(--f-display);font-size:.46em;letter-spacing:.28em;text-transform:uppercase;color:var(--stone);margin-top:.5em;font-weight:500}
.nav{display:flex;gap:2.1rem;align-items:center}
.nav a{
  font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;color:var(--ink-2);
  position:relative;padding-block:.4rem;transition:color .3s var(--ease);
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--flame);transition:width .35s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);padding:.4rem}
.nav-toggle svg{width:26px;height:26px}

/* ---- Hero (editorial, asymmetric) ------------------------ */
.hero{border-bottom:1px solid var(--line);overflow:hidden}
.hero__in{
  display:grid;grid-template-columns:1fr .92fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:center;padding-block:clamp(2.5rem,6vh,6rem);
}
.hero__text{max-width:40rem}
.hero h1{
  font-size:var(--step-4);font-weight:700;letter-spacing:-.045em;
  margin:1rem 0 0;line-height:.92;
}
.hero h1 .l2{display:block;color:var(--flame)}
.hero__tag{font-family:var(--f-serif);font-style:italic;font-size:var(--step-2);color:var(--ink-2);margin:1.4rem 0 0;line-height:1.15;max-width:22ch}
.hero__meta{font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-top:1.8rem}
.hero__meta b{color:var(--ink);font-weight:600}

.hero__plate{position:relative;justify-self:end;width:100%;max-width:38rem}
.hero__plate .frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);
  box-shadow:0 30px 60px -34px rgba(20,15,10,.45),0 2px 10px -4px rgba(20,15,10,.15);
}
.hero__plate .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__plate .cap{position:absolute;left:0;bottom:-.2rem;transform:translateY(100%);padding-top:.9rem}
.hero__scarlet{position:absolute;top:-1rem;right:-1rem;width:4rem;height:4rem;border-top:2px solid var(--flame);border-right:2px solid var(--flame)}

/* ---- Sections -------------------------------------------- */
.section{padding-block:clamp(4rem,10vh,9rem)}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4rem);flex-wrap:wrap}
.section__head .idx{font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;color:var(--flame);font-weight:600;margin-bottom:1rem;display:block}
.section__head h2{font-size:var(--step-3);letter-spacing:-.03em;max-width:14ch;font-weight:700}
.section__head p{max-width:38ch;margin:0;color:var(--stone);font-family:var(--f-serif)}

/* ---- Works — curated asymmetric hang (signature) --------- */
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4.5rem) clamp(1.5rem,3vw,3.5rem)}
.work{grid-column:span 6;margin:0}
.work--l{grid-column:span 7}
.work--s{grid-column:span 5}
.work--wide{grid-column:span 8}
.work--narrow{grid-column:span 4}
.work.offset{margin-top:clamp(2rem,5vw,5rem)}
.work a{display:block}
.work__img{
  position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:4/5;
  box-shadow:0 22px 44px -30px rgba(20,15,10,.5),0 2px 8px -4px rgba(20,15,10,.14);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.work--wide .work__img{aspect-ratio:3/2}
.work--l .work__img{aspect-ratio:1/1}
.work__img img,.work__img .canvas-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work a:hover .work__img{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(20,15,10,.55)}
.work a:hover .work__img img,.work a:hover .work__img .canvas-ph{transform:scale(1.04)}
.work a:hover .cap .t{color:var(--flame)}
.cap .t{transition:color .3s var(--ease)}

/* ---- Oeuvre stat strip ----------------------------------- */
.oeuvre{border-block:1px solid var(--line)}
.oeuvre__in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(2.2rem,4vw,3.4rem) clamp(1rem,2vw,2rem);border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--f-display);font-size:var(--step-3);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.stat b .u{color:var(--flame);font-size:.5em;vertical-align:.4em;margin-left:.05em}
.stat span{font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:.9rem;display:block;font-weight:500}

/* ---- About ----------------------------------------------- */
.about__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5.5rem);align-items:center}
.about__portrait{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);position:relative;box-shadow:0 30px 60px -34px rgba(20,15,10,.45)}
.about__portrait .canvas-ph{position:absolute;inset:0}
.about h2{font-size:var(--step-3);letter-spacing:-.03em;margin-bottom:1.6rem;max-width:15ch;font-weight:700}
.about p{color:var(--ink-2);max-width:54ch;font-family:var(--f-serif)}
.about .pull{font-family:var(--f-serif);font-style:italic;font-size:var(--step-2);color:var(--ink);line-height:1.2;margin:2rem 0 0;padding-left:1.4rem;border-left:2px solid var(--flame);max-width:26ch}

/* ---- Exhibitions ----------------------------------------- */
.expo{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.expo li{display:grid;grid-template-columns:7rem 1fr auto;gap:1.5rem;align-items:baseline;padding-block:1.5rem;border-bottom:1px solid var(--line);transition:padding-inline .3s var(--ease),background .3s var(--ease)}
.expo li:hover{background:var(--paper-2);padding-inline:1.3rem}
.expo .yr{font-family:var(--f-display);font-weight:600;font-size:var(--step-1);color:var(--flame)}
.expo .ttl{font-family:var(--f-serif);font-style:italic;font-size:var(--step-1);color:var(--ink)}
.expo .place{font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--stone);text-align:right;font-weight:500}

/* ---- CTA band -------------------------------------------- */
.cta{background:var(--ink);color:var(--paper)}
.cta__in{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;padding-block:clamp(3rem,7vw,5.5rem)}
.cta h2{color:var(--paper);font-size:var(--step-3);letter-spacing:-.03em;max-width:18ch;font-weight:700}
.cta h2 em{color:var(--flame);font-family:var(--f-serif);font-weight:400}

/* ---- Buttons --------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-display);
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:1rem 1.7rem;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--flame);border-color:var(--flame);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--on-dark{background:var(--flame);border-color:var(--flame)}
.btn--on-dark:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ---- Footer ---------------------------------------------- */
.site-foot{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,5rem)}
.site-foot__in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem}
.site-foot h3{font-family:var(--f-display);font-weight:700;font-size:var(--step-2);letter-spacing:-.03em}
.site-foot h3 span{color:var(--flame)}
.site-foot h4{font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--stone);font-weight:600;margin:0 0 1rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;color:var(--ink-2);font-family:var(--f-serif)}
.site-foot a:hover{color:var(--flame)}
.foot-note{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.05em;color:var(--stone)}

/* ---- Single artwork -------------------------------------- */
.artwork-single{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,5rem);padding-block:clamp(2.5rem,6vh,5rem);align-items:start}
.artwork-single__img{background:var(--paper-2);box-shadow:0 30px 60px -34px rgba(20,15,10,.45)}
.artwork-single__meta{position:sticky;top:6rem}
.artwork-single .no{font-family:var(--f-display);font-weight:600;letter-spacing:.14em;color:var(--flame);font-size:var(--step--1)}
.artwork-single h1{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:var(--step-3);letter-spacing:-.01em;margin:.4rem 0 1.6rem;line-height:1.05}
.spec{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--ink)}
.spec li{display:flex;justify-content:space-between;gap:1rem;padding-block:.9rem;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.03em}
.spec .k{color:var(--stone);text-transform:uppercase;letter-spacing:.12em}
.spec .v{color:var(--ink);text-align:right;font-weight:500}

/* ---- Prose ----------------------------------------------- */
.prose{max-width:var(--measure);margin-inline:auto;font-family:var(--f-serif)}
.prose h2{font-family:var(--f-display);font-weight:700;font-size:var(--step-2);letter-spacing:-.02em;margin:2.6rem 0 1rem}
.prose h3{font-family:var(--f-display);font-weight:600;font-size:var(--step-1);margin:2rem 0 .8rem}
.prose p{color:var(--ink-2)}
.prose blockquote{border-left:2px solid var(--flame);margin:2rem 0;padding:.2rem 0 .2rem 1.6rem;font-style:italic;font-size:var(--step-1);color:var(--ink)}
.prose a{color:var(--flame);text-decoration:underline;text-underline-offset:3px}
.page-hero{padding-block:clamp(3.5rem,8vh,7rem) clamp(1.5rem,3vh,2.5rem);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:var(--step-3);letter-spacing:-.03em;font-weight:700}

/* ---- Series filter --------------------------------------- */
.series-filter{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.series-filter a{font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--stone);padding-bottom:.2rem;border-bottom:2px solid transparent}
.series-filter a:hover{color:var(--ink)}
.series-filter a[aria-current]{color:var(--ink);border-color:var(--flame)}

/* ---- Reveal ---------------------------------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---- Placeholder paintings (demo) ------------------------ */
.canvas-ph{position:absolute;inset:0}
.canvas-ph.bull{background:radial-gradient(58% 68% at 60% 42%,rgba(199,31,31,.92),transparent 62%),radial-gradient(50% 60% at 30% 68%,rgba(214,158,70,.55),transparent 60%),linear-gradient(160deg,#3a2016,#241009)}
.canvas-ph.bull::before{content:"";position:absolute;inset:0;background:conic-gradient(from 200deg at 55% 46%,transparent 0 30%,rgba(20,8,6,.72) 40% 60%,transparent 70%),radial-gradient(26% 38% at 55% 47%,rgba(10,4,3,.85),transparent 70%);mix-blend-mode:multiply}
.canvas-ph.toreador{background:linear-gradient(200deg,#3a201a,#1c0d09),radial-gradient(42% 70% at 60% 46%,rgba(199,31,31,.9),transparent 60%)}
.canvas-ph.toreador::before{content:"";position:absolute;inset:0;background:linear-gradient(28deg,transparent 42%,rgba(214,170,80,.62) 49%,transparent 57%),radial-gradient(28% 52% at 44% 55%,rgba(12,6,4,.8),transparent 70%);mix-blend-mode:screen}
.canvas-ph.portret{background:linear-gradient(165deg,#efe9dc,#d9cfbc),radial-gradient(40% 44% at 50% 40%,rgba(199,31,31,.42),transparent 60%)}
.canvas-ph.portret::before{content:"";position:absolute;inset:0;background:radial-gradient(52% 56% at 50% 86%,rgba(70,45,30,.5),transparent 62%),radial-gradient(22% 26% at 50% 40%,rgba(30,16,10,.35),transparent 70%);mix-blend-mode:multiply}
.canvas-ph.ptica{background:linear-gradient(200deg,#f0e8d8,#e6dcc8),radial-gradient(56% 42% at 45% 55%,rgba(214,158,70,.6),transparent 60%)}
.canvas-ph.ptica::before{content:"";position:absolute;inset:0;background:conic-gradient(from 140deg at 46% 52%,transparent 0 40%,rgba(199,31,31,.6) 46% 58%,transparent 66%);mix-blend-mode:multiply}
.canvas-ph.akt{background:linear-gradient(160deg,#efe7d9,#ddd0bb),radial-gradient(30% 62% at 52% 50%,rgba(160,90,60,.4),transparent 60%)}
.canvas-ph.akt::before{content:"";position:absolute;inset:0;background:radial-gradient(24% 56% at 52% 52%,rgba(199,31,31,.4),transparent 66%);mix-blend-mode:multiply}
.canvas-ph.portrait-photo{background:linear-gradient(165deg,#e9e3d6,#cabfa9),radial-gradient(45% 45% at 50% 40%,rgba(255,255,255,.4),transparent 60%)}

/* ---- Accessibility utilities ----------------------------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:.8rem 1.2rem}
.skip-link:focus{left:1rem;top:1rem}
.search-form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:34rem}
.search-form input{flex:1;min-width:12rem;background:var(--paper);border:1px solid var(--line);color:var(--ink);padding:.9rem 1rem;font-family:var(--f-display)}
.pagination,.nav-links{display:flex;gap:.5rem;flex-wrap:wrap;font-family:var(--f-display);letter-spacing:.08em;text-transform:uppercase;font-size:var(--step--1);margin-top:1rem}
.pagination a,.pagination span,.nav-links a{padding:.6rem .95rem;border:1px solid var(--line);color:var(--ink-2)}
.pagination .current{border-color:var(--flame);color:var(--ink)}
.pagination a:hover,.nav-links a:hover{border-color:var(--ink);color:var(--ink)}

/* ---- Responsive ------------------------------------------ */
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__plate{order:-1;max-width:26rem;justify-self:start}
  .hero__plate .cap{position:static;transform:none;padding-top:1rem}
  .oeuvre__in{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .about__in,.artwork-single{grid-template-columns:1fr}
  .artwork-single__meta{position:static}
  .site-foot__in{grid-template-columns:1fr 1fr}
  .work,.work--l,.work--s,.work--wide,.work--narrow{grid-column:span 12}
  .work.offset{margin-top:0}
  .nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);flex-direction:column;align-items:flex-start;gap:1.4rem;background:var(--paper);padding:5rem 2rem;transform:translateX(100%);transition:transform .4s var(--ease);border-left:1px solid var(--line);box-shadow:-20px 0 60px -30px rgba(20,15,10,.4)}
  .nav.open{transform:none}
  .nav-toggle{display:block;z-index:60}
}
@media (max-width:560px){
  .oeuvre__in{grid-template-columns:1fr 1fr}
  .site-foot__in{grid-template-columns:1fr}
  .expo li{grid-template-columns:4rem 1fr;gap:.8rem}
  .expo .place{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}