/* ══════════════════════════════════════════════════════════════════════
   Yiğit Özen — paintings

   White paper, black ink, one weight. A text serif carries the names and
   the prose; a grotesque carries the chrome — navigation, labels, the
   tombstone under each work. Nothing is centred, nothing is cropped,
   nothing scales on hover. Hierarchy comes from size, italic and air.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#fff;
  --ink:#000;
  --ink-2:rgba(0,0,0,.58);      /* medium, dimensions, dates */
  --ink-3:rgba(0,0,0,.38);      /* credits, counters, inactive */
  --rule:#000;                  /* the structural hairline */
  --hair:rgba(0,0,0,.15);       /* the quiet one */

  --serif:"Freight Text Pro","Minion Pro","Adobe Garamond Pro",Georgia,"Times New Roman",Times,serif;
  --sans:"Helvetica Neue",Helvetica,"Inter",Arial,system-ui,sans-serif;
  --display:Didot,"Bodoni MT","Playfair Display","Didot LT STD","Hoefler Text","Times New Roman",Times,serif;

  --pad:20px;
  --gut:16px;
  --hdr:64px;
  --sec:64px;                   /* space between major sections */

  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:768px){ :root{ --pad:32px; --gut:20px; --hdr:80px; --sec:96px } }
@media (min-width:1024px){ :root{ --pad:40px; --sec:120px } }
@media (min-width:1680px){ :root{ --pad:56px; --gut:24px } }

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.55 var(--serif);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
@media (min-width:1024px){ body{ font-size:17px } }

img{ display:block; max-width:100%; height:auto; border:0; border-radius:0 }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
h1,h2,h3,p,figure,dl,dd{ margin:0 }
em,i,.it{ font-style:italic }

:focus{ outline:none }
:focus-visible{ outline:1px solid var(--ink); outline-offset:2px }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── the trim ──────────────────────────────────────────────────────
   Most of the source files carry a margin of studio floor or wall around
   the painting. Each image knows the box that holds the work itself, so
   the frame takes the painting's own proportion (--ar) and the photograph
   is scaled and offset inside it until only the canvas shows. Nothing is
   distorted: the box is by construction the source's own ratio. */
.crop{
  display:block;                /* a span by default, and inline boxes
                                   ignore both width and aspect-ratio */
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--ar);
  /* a twenty-four pixel copy of the painting, carried in the catalogue
     itself, so the frame is never an empty white rectangle: the work is
     there from the first moment, only out of focus */
  background-image:var(--blur);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.crop img{
  position:absolute;
  top:var(--y,0); left:var(--x,0);
  width:var(--w,100%); height:var(--h,100%);
  max-width:none; max-height:none;
  opacity:0;
  /* slow on purpose: the painting resolves out of the blur rather than
     replacing it */
  transition:opacity 3s cubic-bezier(.25,.1,.25,1);
}
.crop img.in{ opacity:1 }

/* the chrome voice — 11px grotesque, uppercase, generously tracked */
.lbl{
  font-family:var(--sans);
  font-size:11px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}
/* the metadata voice — grotesque, sentence case, never smaller than 12px */
.meta{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.45;
  letter-spacing:.01em;
}
@media (min-width:1024px){ .meta{ font-size:13px } }

/* a section marked the way a wall label is: word, then a black line */
.mark{
  padding-top:12px;
  border-top:1px solid var(--rule);
  margin-bottom:24px;
}

/* ── header ────────────────────────────────────────────────────────── */
#hdr{
  position:sticky; top:0; z-index:60;
  height:var(--hdr);
  padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}

.wordmark{
  display:flex; align-items:center;
  transition:opacity .15s ease;
}
.wordmark:hover{ opacity:.6 }
.wordmark img{ height:40px; width:auto }
@media (min-width:768px){ .wordmark img{ height:52px } }

#nav{ display:none }
@media (min-width:768px){ #nav{ display:flex; align-items:center; gap:28px } }
#nav a{
  padding-block:22px;
  transition:opacity .15s ease;
}
#nav a:hover{ opacity:.6 }
#nav a[aria-current="page"]{
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}

#burger{ padding:10px 0 10px 10px }
@media (min-width:768px){ #burger{ display:none } }

/* mobile menu — a full white sheet, not a drawer */
#menu{
  position:fixed; inset:var(--hdr) 0 0 0; z-index:55;
  background:var(--paper);
  padding:0 var(--pad) var(--pad);
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease-out, visibility .2s;
}
body.menu #menu{ opacity:1; visibility:visible }
body.menu,body.lb{ overflow:hidden }
#menu a{
  display:block;
  padding:22px 0;
  font-size:20px;
  border-bottom:1px solid var(--hair);
}
#menu .foot{ padding-top:28px; color:var(--ink-3) }

/* ── shell ─────────────────────────────────────────────────────────── */
#app{ padding:0 var(--pad); min-height:60vh }

.head{ padding:calc(var(--sec)*.55) 0 32px }
.head h1{
  font-size:28px; font-weight:400; line-height:1.15; letter-spacing:-.005em;
}
@media (min-width:768px){ .head h1{ font-size:34px } }
@media (min-width:1024px){ .head h1{ font-size:40px } }
.head .sub{
  margin-top:16px;
  max-width:62ch;
  color:var(--ink-2);
}

/* ── index toolbar: years on the left, grid/list on the right ──────── */
#bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  padding:0 0 14px;
  border-bottom:1px solid var(--rule);
  margin-bottom:calc(var(--sec)*.45);
}
#bar .yrs{ display:flex; flex-wrap:wrap; gap:0 20px }
#bar button{ color:var(--ink-3); transition:color .15s ease }
#bar button:hover{ color:var(--ink) }
#bar button[aria-pressed="true"],
#bar button[aria-current="true"]{
  color:var(--ink);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
}
#bar .modes{ margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--ink-3) }

/* ── grid of works: natural ratios, hung on one baseline ───────────── */
.grid{
  display:grid;
  grid-template-columns:1fr;
  column-gap:var(--gut);
  row-gap:32px;
  padding-bottom:var(--sec);
}
@media (min-width:620px){ .grid{ grid-template-columns:repeat(2,1fr); row-gap:56px } }
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(3,1fr); row-gap:72px } }
@media (min-width:1680px){ .grid{ grid-template-columns:repeat(4,1fr) } }

/* The cards in a row stretch to the tallest of them; each frame grows to
   fill its card and hangs its image off the bottom. Widths are equal, the
   proportions are the paintings' own, so the top edge of a row comes out
   ragged and the captions all start on one line — a wall hang, not a
   product listing. */
.card{ height:100% }
.card figure{ display:flex; flex-direction:column; height:100% }
.card .frame{
  flex:1 1 auto;
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.card .frame .crop{ width:100% }
.card .frame img.in{ opacity:1 }
@media (hover:hover){
  .card:hover .frame img.in{ opacity:.85 }
  .card:hover .t{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
}

figcaption{ padding-top:12px }
figcaption .t{ display:block; font-size:17px; line-height:1.25 }
@media (min-width:1024px){ figcaption .t{ font-size:19px } }
figcaption .m{ display:block; color:var(--ink-2) }
figcaption .m + .m{ margin-top:1px }
figcaption .plates{ display:block; margin-top:6px; color:var(--ink-3) }

/* ── list view — the index as a plain register ─────────────────────── */
.list{ padding-bottom:var(--sec) }
.list a{
  display:grid;
  grid-template-columns:2.6rem 1fr;
  gap:4px 16px;
  padding:16px 0;
  border-bottom:1px solid var(--hair);
  transition:opacity .15s ease;
}
@media (min-width:768px){
  .list a{ grid-template-columns:3rem minmax(0,2fr) 5rem minmax(0,1.4fr) minmax(0,1fr); align-items:baseline }
}
.list a:hover{ opacity:.55 }
.list .no{ color:var(--ink-3); font-variant-numeric:tabular-nums }
.list .t{ font-style:italic }
.list .c{ color:var(--ink-2) }
@media (max-width:767px){
  .list .no{ grid-row:1 }
  .list .t,.list .c{ grid-column:2 }
}

/* ── single work ───────────────────────────────────────────────────── */
.work{ padding-bottom:var(--sec) }
/* shared by the work and its reading: whatever sits here stays left, the
   sequence number is always pushed to the right edge */
.top{
  display:flex; align-items:baseline; gap:16px;
  padding:24px 0;
  color:var(--ink-3);
}
.top a{ transition:opacity .15s ease }
.top a:hover{ opacity:.55 }
.top .seq{ margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap }

/* The way back. Quiet enough to ignore while looking at the painting, and
   in the same place at the head and at the foot of every page, so it is
   never somewhere you have to go and find. The arrow moves a little
   towards where it is going. */
.back{
  display:inline-flex; align-items:baseline; gap:.7em;
  color:var(--ink-2);
  transition:color .15s ease;
  overflow:hidden;
  max-width:100%;
}
.back:hover{ color:var(--ink) }
.back .arw{
  display:inline-block;
  transition:transform .2s var(--ease);
}
@media (hover:hover){ .back:hover .arw{ transform:translateX(-3px) } }
.top .back{ min-width:0 }
.top .back,.foot-back .back{ white-space:nowrap }
/* a work is named, not labelled, even on the way back to it */
.back .nm{
  font-family:var(--serif); font-style:italic;
  text-transform:none; letter-spacing:0;
  font-size:15px; line-height:1;
  overflow:hidden; text-overflow:ellipsis;
}
@media (min-width:768px){ .back .nm{ font-size:16px } }

/* at the foot, on its own line above the neighbouring works */
.foot-back{
  padding-top:24px;
  margin-top:var(--sec);
  border-top:1px solid var(--hair);
}
/* the pager follows straight on, so it does not repeat the rule */
.foot-back + .pager{ margin-top:24px; padding-top:0; border-top:0 }

/* every plate of the work, stacked down the page at its own proportion */
.plate{ margin-bottom:48px }
@media (min-width:1024px){ .plate{ margin-bottom:80px } }
.plate:last-of-type{ margin-bottom:0 }
.plate .shot{
  display:flex; align-items:flex-start; justify-content:flex-start;
  cursor:zoom-in;
}
/* the work sits at the height the viewport can hold, never edge to edge —
   a painting with air around it beats a painting filling a box */
.plate .shot .crop{ width:min(100%, calc(70vh * var(--ar))) }
.plate .cap{ padding-top:12px; color:var(--ink-3) }

/* tombstone left, reading right */
/* the name of the work follows the work itself, close enough to be read
   without leaving it; everything else on the page comes after */
.band{
  display:grid; grid-template-columns:1fr; gap:32px;
  padding-top:clamp(18px,2.4vw,28px);
  margin-top:clamp(18px,2.4vw,28px);
  border-top:1px solid var(--rule);
}
@media (min-width:900px){
  .band{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--gut) }
}
.band h1{
  font-size:26px; font-weight:400; font-style:italic;
  line-height:1.2; letter-spacing:-.005em;
}
@media (min-width:1024px){ .band h1{ font-size:34px } }
.band .tomb{ margin-top:14px; color:var(--ink-2) }
.band .tomb span{ display:block }
.band .tomb .cr{ margin-top:10px; color:var(--ink-3) }
.band .note{ max-width:62ch }
.band .more{
  display:inline-block; margin-top:24px;
  border-bottom:1px solid var(--hair); padding-bottom:2px;
  color:var(--ink-2);
  transition:color .15s ease, border-color .15s ease;
}
.band .more:hover{ color:var(--ink); border-color:var(--ink) }

.pager{
  display:flex; justify-content:space-between; gap:20px;
  padding-top:24px; margin-top:var(--sec);
  border-top:1px solid var(--hair);
}
.pager a{ max-width:46%; transition:opacity .15s ease }
.pager a:hover{ opacity:.55 }
.pager .dir{ display:block; color:var(--ink-3); margin-bottom:8px }
/* the neighbouring works are named, not labelled — serif, sentence case */
.pager .nm{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--serif); text-transform:none; letter-spacing:0;
  font-style:italic; font-size:16px; line-height:1.3;
}
@media (min-width:1024px){ .pager .nm{ font-size:18px } }
.pager .next{ text-align:right; margin-left:auto }

/* ── about ─────────────────────────────────────────────────────────── */
.prose{ max-width:62ch }
.prose p{ margin-bottom:1.2em }
.prose p:last-child{ margin-bottom:0 }

/* the particulars: a plain two-column register, term against value */
.dl{ max-width:62ch }
.dl div{
  display:grid; grid-template-columns:1fr; gap:3px;
  padding:14px 0; border-bottom:1px solid var(--hair);
}
@media (min-width:620px){
  .dl div{ grid-template-columns:11rem 1fr; gap:20px; align-items:baseline }
}
.dl div:first-child{ border-top:1px solid var(--hair) }
.dl dt{ color:var(--ink-3) }
.dl a{ border-bottom:1px solid var(--hair); transition:border-color .15s ease }
.dl a:hover{ border-color:var(--ink) }

/* ── details: one at a time, moved through with arrows ─────────────── */
.dets{ margin-top:var(--sec) }
.dets .hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-top:12px;
  border-top:1px solid var(--rule);
  margin-bottom:24px;
}
.dets .at{ font-variant-numeric:tabular-nums }
.dets .stage{ display:flex; cursor:zoom-in }
.dets .stage .crop{ width:min(100%, calc(64vh * var(--ar))) }

/* the arrows sit either side of the strip, where the hand already is */
.dets .rail{
  display:flex; align-items:center; gap:14px;
  margin-top:18px;
}
@media (min-width:768px){ .dets .rail{ gap:20px } }
.dets .rail > button{
  flex:0 0 auto;
  font-size:26px; line-height:1;
  padding:8px 4px;
  color:var(--ink-3);
  transition:color .15s ease;
}
.dets .rail > button:hover{ color:var(--ink) }
.dets .strip{
  /* shrink to the thumbnails so the arrows sit beside them, but give way
     and scroll once there are more than the row can hold */
  flex:0 1 auto; min-width:0;
  display:flex; gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.dets .strip::-webkit-scrollbar{ display:none }
.dets .strip button{ flex:0 0 auto }
.dets .strip button{ display:block; width:56px; opacity:.35; transition:opacity .2s ease }
.dets .strip .crop{ width:100% }
@media (min-width:768px){ .dets .strip button{ width:72px } }
.dets .strip button:hover{ opacity:.7 }
.dets .strip button[aria-current="true"]{ opacity:1 }

/* ── the reading ───────────────────────────────────────────────────── */
.reading{ max-width:62ch; padding-bottom:var(--sec) }
.reading section{ margin-top:var(--sec) }
.reading section:first-child{ margin-top:calc(var(--sec)*.5) }
.reading h2{
  padding-top:12px;
  border-top:1px solid var(--rule);
  margin-bottom:26px;
}
/* the summary the reading opens on: italic, a size up, never bold */
.reading .lede{
  font-style:italic;
  font-size:clamp(17px,1.9vw,20px);
  line-height:1.6;
  margin-bottom:1.3em;
}
.reading p{ margin-bottom:1.2em }
.reading p:last-child{ margin-bottom:0 }

/* ── the mark, standing in while something is on its way ───────────── */
#load{
  position:fixed; inset:var(--hdr) 0 0 0; z-index:70;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease-out, visibility .2s;
}
body.load #load{ opacity:1; visibility:visible }
#load img{ height:98px; width:auto }
#load .pulse{ animation:pulse 1.4s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }

/* ── enquire — the last thing on every page ────────────────────────── */
.enq{
  padding-top:12px;
  border-top:1px solid var(--rule);
}
.enq .lede{ max-width:52ch; margin-top:24px }
.enq .acts{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 28px;
  margin-top:28px;
}
/* bare rectangle, no fill and no radius; it inverts rather than lighting up */
.enq .btn{
  display:inline-block;
  padding:13px 28px;
  border:1px solid var(--ink);
  transition:background-color .15s ease, color .15s ease;
}
.enq .btn:hover{ background:var(--ink); color:var(--paper) }
.enq .alt{
  display:inline-block; padding:2px 0;
  border-bottom:1px solid var(--hair);
  color:var(--ink-2);
  transition:color .15s ease, border-color .15s ease;
}
.enq .alt:hover{ color:var(--ink); border-color:var(--ink) }

/* ── about ─────────────────────────────────────────────────────────── */
.about{
  display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,40px);
  margin-bottom:var(--sec);
}
@media (min-width:900px){
  .about{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(30px,5vw,72px) }
}
.about .portrait img{ width:100% }
.about .portrait figcaption{ padding-top:12px; color:var(--ink-3) }
.dl{ margin-bottom:var(--sec) }

.onwork{ margin-bottom:var(--sec) }
.onwork h2{
  padding-top:12px;
  border-top:1px solid var(--rule);
  margin-bottom:26px;
}

/* ── lightbox: the wall stays lit ──────────────────────────────────── */
#lb{
  position:fixed; inset:0; z-index:90;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:64px 24px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease-out, visibility .25s;
}
@media (min-width:768px){ #lb{ padding:64px } }
body.lb #lb{ opacity:1; visibility:visible }
#lbi{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  touch-action:none;
  cursor:zoom-out;
}
#lbi.z{ cursor:grab }
#lbi.drag{ cursor:grabbing }
/* without this the browser starts its own image drag on mousedown and
   the pan never gets a pointermove */
#lbi, #lbi img{
  -webkit-user-drag:none;
  user-select:none; -webkit-user-select:none;
}
#lb .crop{
  width:min(100%, calc((100vh - 128px) * var(--ar)));
  transform:translate(var(--px,0px), var(--py,0px)) scale(var(--z,1));
  transform-origin:center center;
  will-change:transform;
}
#lbi:not(.drag) .crop{ transition:transform .18s ease-out }

/* the zoom control: a hairline track and a small handle, nothing more */
#lbz{
  display:flex; align-items:center; gap:12px;
  color:var(--ink-3);
}
#lbz input{
  -webkit-appearance:none; appearance:none;
  width:104px; height:14px;
  background:none; cursor:pointer;
}
@media (min-width:768px){ #lbz input{ width:150px } }
#lbz input::-webkit-slider-runnable-track{ height:1px; background:var(--ink-3) }
#lbz input::-moz-range-track{ height:1px; background:var(--ink-3) }
#lbz input::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:11px; height:11px; margin-top:-5px;
  border-radius:50%; background:var(--ink); border:0;
}
#lbz input::-moz-range-thumb{
  width:11px; height:11px; border:0; border-radius:50%; background:var(--ink);
}
#lbz .v{ font-variant-numeric:tabular-nums; min-width:2.6em }
#lbz button{ transition:color .15s ease }
#lbz button:hover{ color:var(--ink) }
#lb .bar{
  position:absolute; left:0; right:0;
  z-index:2;                       /* the arrows must not reach over these */
  padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:var(--ink-2);
}
/* the chrome here is read against a white wall, so it is a size up on the
   labels elsewhere and a shade darker */
#lb .bar .lbl{ font-size:12px }
@media (min-width:768px){ #lb .bar .lbl{ font-size:12.5px } }
#lbx{ color:var(--ink-2) }
#lbx:hover{ color:var(--ink) }
#lb .bar.t{ top:0; height:var(--hdr) }
#lb .bar.b{ bottom:0; height:var(--hdr) }
#lb .bar button{ transition:color .15s ease }
#lb .bar button:hover{ color:var(--ink) }
#lb .cap{ color:var(--ink-3); max-width:60% }
#lb .cnt{ font-variant-numeric:tabular-nums }
/* the paging zones, direct children only: the small arrow inside the
   Close button carries the same class and must not be styled as one */
#lb > .arw{
  /* inset from the bars, so paging never swallows a press meant for
     Close, the caption or the zoom */
  position:absolute; top:var(--hdr); bottom:var(--hdr); width:22%;
  z-index:1;
  display:flex; align-items:center;
  color:var(--ink-3); font-size:26px; line-height:1;
  background:none;
}
#lb > .arw:hover{ color:var(--ink) }
#lb > .arw.p{ left:0; justify-content:flex-start; padding-left:16px }
#lb > .arw.n{ right:0; justify-content:flex-end; padding-right:16px }
#lb > .arw[hidden]{ display:none }

/* ── footer ────────────────────────────────────────────────────────── */
#ftr{
  margin-top:var(--sec);
  padding:40px var(--pad) 32px;
  border-top:1px solid var(--rule);
}
.fcols{
  display:grid; grid-template-columns:1fr; gap:28px;
}
@media (min-width:620px){ .fcols{ grid-template-columns:repeat(3,1fr); gap:var(--gut) } }
.fcols h2{ color:var(--ink-3); margin-bottom:16px }
.fcols li{ list-style:none }
.fcols ul{ margin:0; padding:0 }
.fcols a,.fcols li{ line-height:2 }
.fcols a{ transition:opacity .15s ease }
.fcols a:hover{ opacity:.6 }
#ftr .end{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  margin-top:40px; color:var(--ink-3);
}
#ftr .end .r{ margin-left:auto }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .crop img{ opacity:1 }
}