@charset "UTF-8";
/* Web fonts are imported once for every page. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600&family=DM+Mono:wght@400;500&family=Bodoni+Moda:wght@400;500;600&family=Roboto:wght@400;500&family=Space+Grotesk:wght@400;500&family=Unbounded:wght@400;500&family=Work+Sans:ital,wght@0,400;0,500;0,600;1,600&display=swap');


/* İLKE ŞAHİN — V0.34 shared styles for all 18 pages.
   Edit layouts/spacing here. Edit palette and font options in personalise.js. */
:root {
  --page-background: #ffffff;
  --page-text: #151515;
  --page-font: "Work Sans", "Trebuchet MS", sans-serif;
  --side: clamp(22px, 5.2vw, 74px);
  --frame: #d0d0d0;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--page-background); font-family: var(--page-font); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-background);
  color: var(--page-text);
  font-family: var(--page-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.28;
  -webkit-font-smoothing: antialiased;
  transition: background-color .12s linear, color .12s linear;
}
a, button { color: inherit; font: inherit; }
a:hover { opacity: .63; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.site-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.site-header {
  padding: 76px var(--side) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding-right: clamp(23px, 3.18vw, 45px);
}
.site-name { white-space: nowrap; text-decoration: none; }
.site-nav {
  display: grid;
  grid-template-columns: 82px 80px 113px;
  gap: clamp(40px, 5vw, 70px);
  font-size: 14px; /* slightly smaller than site name (15px) */
  align-items: start;
  margin-left: auto;
}
.site-nav a { display: inline-block; text-decoration: none; line-height: 1.22; }
.site-nav a[aria-current="page"] { text-decoration: none; }
.site-nav a[aria-current="page"]:hover { opacity: .63; }
.site-nav a span { display: block; }

/* Main content intentionally spacious, matching the supplied reference. */
.site-main { flex: 1; min-width: 0; }
.home-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 130px 22px 110px;
}
.home-artwork {
  margin: 0;
  width: min(40.1vw, 567px);
  flex: 0 1 auto;
  transform: translateX(min(7.4vw, 105px));
  position: relative;
}
.home-artwork img { display: block; width: 100%; height: auto; }
.home-artwork.is-missing img { display: none; }
.image-placeholder { display: none; }
.home-artwork.is-missing .image-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid #ebebeb;
  background: rgba(250,250,250,.83);
  color: #929292;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.image-placeholder small { color: #aaa; font-size: 12px; }
.inner-main { padding: 132px var(--side) 140px; }
.inner-main h1 { margin: 0; font-size: 18px; font-weight: 400; }

/* On EVERY page, including the home page: shared footer picker. */
.site-personalise {
  width: 100%;
  padding: 0 var(--side) 46px;
  margin-top: auto;
}
.personalise-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  font-family: var(--page-font);
  line-height: 1.22;
}
.personalise-heading::before,
.personalise-heading::after {
  content: "";
  display: block;
  background: currentColor;
  height: 1.5px;
  flex-shrink: 0;
}
.personalise-heading::before { width: 31px; }
.personalise-heading::after { flex: 1; }
.personalise-heading span { white-space: nowrap; }

/* The three rows line up in seven fixed columns. */
.personalise-scroller { overflow: visible; }
.picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: clamp(16px, 3.6vw, 51px);
}
.picker-column {
  min-width: 0;
  display: grid;
  grid-template-rows: 47px 47px 47px;
  row-gap: 37px;
  align-items: center;
}
.picker {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  width: 100%;
  height: 47px;
  padding: 5px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 14px;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
.picker:hover:not([aria-pressed="true"]) { outline: 1px solid #ddd; outline-offset: -1px; }
.picker[aria-pressed="true"] { border-color: var(--frame); }
.picker-font { color: var(--page-text); }









.picker-text { font-family: var(--page-font); }







.picker-background { padding: 0; }
.picker-background .swatch { width: 100%; height: 100%; display: block; }







/* Always show the selected frame, including for a white swatch. */
.picker-background[aria-pressed="true"] { padding: 1px; }
.picker-background[aria-pressed="true"] .swatch { width: 100%; height: 100%; }

main[hidden] { display: none !important; }

/* Responsive layout: same shared menu and picker, scroll sideways on phones. */
@media (max-width: 950px) {
  .site-header { padding-top: 42px; }
  .site-nav { grid-template-columns: auto auto auto; gap: 28px; }
  .home-main { padding-top: 105px; }
  .home-artwork { width: min(48vw, 567px); transform: translateX(4vw); }
  .picker-grid { gap: 12px; }
  .picker { font-size: 12px; }
  
  
}
@media (max-width: 690px) {
  :root { --side: 22px; }
  .site-header { padding-top: 23px; flex-direction: column; gap: 25px; }
  .site-nav { margin: 0; width: 100%; grid-template-columns: auto auto auto; justify-content: space-between; gap: 13px; }
  .site-nav a { font-size: 11.5px; }
  .home-main { padding: 70px 22px 90px; }
  .home-artwork { width: min(85vw, 430px); transform: none; }
  .inner-main { padding: 90px var(--side) 100px; }
  .site-personalise { padding-bottom: 26px; }
  .personalise-heading { font-size: 11.5px; gap: 11px; margin-bottom: 24px; }
  .personalise-heading::before { width: 18px; }
  .personalise-scroller { overflow-x: auto; overscroll-behavior-x: contain; padding: 1px 2px 9px; margin: 0 -2px; scrollbar-width: thin; }
  .picker-grid { grid-template-columns: repeat(7, 120px); gap: 16px; width: max-content; }
  .picker-column { grid-template-rows: 42px 42px 42px; row-gap: 17px; }
  .picker { font-size: 13px; height: 42px; }
  
  
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}


/* ABOUT — typography and spacing only; global header, footer and palette untouched. */
.about-content { width: min(100%, 780px); }
.about-section + .about-section { margin-top: 76px; }
.about-section h1,
.about-section h2 {
  margin: 0 0 26px;
  font-family: var(--page-font);
  color: var(--page-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
}
.about-section p {
  margin: 0;
  font-family: var(--page-font);
  color: var(--page-text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.about-section p + p { margin-top: 22px; }
@media (max-width: 690px) {
  .about-section + .about-section { margin-top: 56px; }
  .about-section h1, .about-section h2 { font-size: 15px; margin-bottom: 20px; }
  .about-section p { font-size: 14px; line-height: 1.65; }
  .about-section p + p { margin-top: 18px; }
}


/* About: artist CV — year and entry with a shared left edge, all site fonts/colours inherited. */
.cv-section { padding-bottom: 8px; }
.cv-group + .cv-group { margin-top: 42px; }
.cv-group h3 {
  font-family: var(--page-font);
  color: var(--page-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 17px;
}
.cv-list { padding: 0; margin: 0; }
.cv-row {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  font-family: var(--page-font);
  color: var(--page-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.63;
  overflow-wrap: anywhere;
}
.cv-row + .cv-row { margin-top: 9px; }
.cv-row dt, .cv-row dd { margin: 0; }
.cv-row dt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-row i { font-style: italic; }
@media (max-width: 690px) {
  .cv-group + .cv-group { margin-top: 37px; }
  .cv-group h3 { font-size: 14px; margin-bottom: 14px; }
  .cv-row { grid-template-columns: 74px minmax(0, 1fr); gap: 11px; font-size: 13px; line-height: 1.57; }
  .cv-row + .cv-row { margin-top: 10px; }
}

/* V0.15: exhibition list only. Years at left; two aligned, non-italic text columns. */
.cv-exhibitions-group {
  width: min(1110px, calc(100vw - 2 * var(--side)));
  max-width: calc(100vw - 2 * var(--side));
}
.cv-exhibitions-list { margin: 0; padding: 0; }
.cv-exhibition-year-group {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 0;
  padding: 0;
  font-family: var(--page-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--page-text);
}
.cv-exhibition-year-group + .cv-exhibition-year-group { margin-top: 11px; }
.cv-exhibition-year-group dt { font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; }
.cv-exhibition-year-group dd { margin: 0; min-width: 0; }
.cv-exhibition-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .90fr);
  column-gap: 32px;
  align-items: baseline;
  font-weight: 400;
  font-style: normal;
  overflow-wrap: anywhere;
}
.cv-exhibition-entry + .cv-exhibition-entry { margin-top: 10px; }
.cv-exhibition-title, .cv-exhibition-venue { font-style: normal; }
@media (max-width: 720px) {
  .cv-exhibition-year-group { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; font-size: 12px; }
  .cv-exhibition-entry { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); column-gap: 14px; align-items: start; }
  .cv-exhibition-entry + .cv-exhibition-entry { margin-top: 11px; }
  .cv-exhibition-year-group + .cv-exhibition-year-group { margin-top: 18px; }
}
@media (max-width: 390px) {
  .cv-exhibition-year-group { grid-template-columns: 43px minmax(0,1fr); gap: 8px; font-size: 11.5px; }
  .cv-exhibition-entry { column-gap: 10px; }
}

/* V0.15 — related photography projects under the CV role. */
.cv-project-links { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 8px; }
.cv-project-links a { color: var(--page-text); font-family: var(--page-font); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cv-project-links a:hover { opacity: .62; }



/* About CV refinements, retained from V0.33. */
.cv-row dt { font-weight: 700; }
.cv-exhibition-year-group dt { font-weight: 700; }

/* ABOUT V0.23 — clean, slightly finer link underlines in CV only. */
.cv-section a.cv-link,
.cv-section .cv-project-links a {
  color: var(--page-text);
  font-family: var(--page-font);
  font-weight: inherit;
  font-style: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.75px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}
.cv-section a.cv-link:hover,
.cv-section .cv-project-links a:hover { opacity: .62; }



/* Shared extraction of about.html stylesheet #2 */

    /* About only: bring exhibition venues closer to the exhibition titles. */
    .cv-exhibition-entry {
      grid-template-columns: minmax(0, 405px) minmax(0, 1fr);
      column-gap: 18px;
    }
    @media (max-width: 720px) {
      .cv-exhibition-entry {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr);
        column-gap: 10px;
      }
    }
    @media (max-width: 390px) {
      .cv-exhibition-entry { column-gap: 8px; }
    }
  

/* Shared extraction of about.html stylesheet #3 */

/* V0.28 — discreet grayscale social icons; site typography and colour controls unchanged. */
.about-social-links {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:13px;
  margin-top:30px;
}
.about-social-links a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:33px; height:33px;
  border:1px solid #d3d3d3;
  border-radius:3px;
  color:#727272;
  background:#fbfbfb;
  text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.about-social-links a svg {display:block;width:17px;height:17px;}
.about-social-links a:hover, .about-social-links a:focus-visible {
  background:#6d6d6d;color:#fff;border-color:#6d6d6d;
}
.about-social-links a:focus-visible {outline:2px solid #4e4e4e;outline-offset:3px;}
@media(max-width:690px){.about-social-links{gap:10px;margin-top:22px;}.about-social-links a{width:32px;height:32px;}}


/* Shared extraction of artworks.html stylesheet #2 */

    /* Selected Artworks — screenshot-inspired layout; affects only this page. */
    .site-nav a[aria-current="page"]:not([href="/about.html"]) {
      font-weight: 600;
      position: relative;
    }
    .site-nav a[aria-current="page"]:not([href="/about.html"])::after {
      content: "";
      position: absolute;
      top: calc(100% + 14px);
      left: 0;
      right: 0;
      height: 1px;
      background: currentColor;
    }
    .selected-main {
      padding: 165px clamp(22px, 6.5vw, 90px) 140px;
      min-height: max(850px, calc(100vh - 12px));
    }
    .selected-gallery {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(22px, 4vw, 55px);
      max-width: 1300px;
      margin: 0 auto;
    }
    .selected-tile { min-width: 0; margin: 0; }
    .selected-image-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: rgba(250, 250, 250, 0.9);
      border: 1px solid #d4d4d4;
      overflow: hidden;
    }
    .selected-image-frame img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
    .selected-image-frame:not(.has-image) img { display: none; }
    .selected-placeholder {
      position: absolute;
      top: 49px;
      left: 12px;
      color: #767676;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.3;
      font-family: var(--page-font);
    }
    .selected-image-frame.has-image .selected-placeholder { display: none; }
    @media (max-width: 900px) {
      .selected-main { padding-top: 125px; }
      .selected-gallery { gap: 20px; }
      .selected-placeholder { top: 25px; font-size: 13px; }
    }
    @media (max-width: 690px) {
      .selected-main {
        min-height: 0;
        padding: 90px 22px 110px;
      }
      .selected-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }
      .selected-placeholder { top: 22px; left: 9px; font-size: 12px; }
    }
    @media (max-width: 420px) {
      .selected-gallery { grid-template-columns: 1fr; gap: 30px; }
      .selected-image-frame { max-width: 420px; }
      .selected-placeholder { top: 45px; left: 12px; font-size: 14px; }
    }
  

/* Shared extraction of artworks.html stylesheet #3 */
.selected-artwork-link { color: inherit; display:block; text-decoration:none; }
.selected-artwork-link:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.selected-artwork-link:hover .selected-image-frame { opacity:.78; transition:opacity .15s ease; }

/* Shared extraction of artworks.html stylesheet #4 */
/* V0.24: following rows continue the original three-column Selected Artworks grid. */
.selected-gallery { row-gap: clamp(34px, 4.7vw, 68px); }
@media(max-width:690px) { .selected-gallery { row-gap: 25px; } }


/* Shared extraction of bark.html stylesheet #2 */

    /* Bark project page only. Shared header, footer, and personalisation remain unchanged. */
    .site-nav a[aria-current="page"]:not([href="/about.html"]) {
      font-weight: 600;
      position: relative;
    }
    .site-nav a[aria-current="page"]:not([href="/about.html"])::after {
      content: "";
      position: absolute;
      top: calc(100% + 14px);
      left: 0;
      right: 0;
      height: 1px;
      background: currentColor;
    }
    .bark-main {
      width: 100%;
      padding: 158px var(--side) 160px;
    }
    .bark-gallery {
      display: grid;
      grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
      column-gap: clamp(26px, 4vw, 60px);
      row-gap: 40px;
      align-items: start;
      max-width: 1430px;
      margin-inline: auto;
    }
    .bark-photo {
      grid-column: 1;
      min-width: 0;
      width: 100%;
      margin: 0;
      position: relative;
      background: rgba(145, 145, 145, 0.035);
      /* Temporary area for unloaded photos. No frames or borders. */
      aspect-ratio: 3 / 2;
    }
    .bark-photo-1 { aspect-ratio: 5 / 3; }
    .bark-photo.has-image { background: transparent; aspect-ratio: auto; }
    .bark-photo img { display: block; width: 100%; height: auto; max-width: 100%; }
    .bark-photo.is-missing img { display: none; }
    .bark-photo-placeholder {
      display: none;
      position: absolute;
      top: 40px;
      left: 22px;
      color: #777;
      font-family: var(--page-font);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.3;
    }
    .bark-photo.is-missing .bark-photo-placeholder { display: block; }
    .bark-photo.has-image .bark-photo-placeholder { display: none; }
    .bark-artwork-details {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      padding-bottom: 3px;
      color: var(--page-text);
      font: 400 14px/1.65 var(--page-font);
    }
    .bark-artwork-details h1 {
      margin: 0 0 7px;
      font: 600 14px/1.45 var(--page-font);
      color: inherit;
    }
    .bark-artwork-details p { margin: 0; }
    @media (max-width: 950px) {
      .bark-main { padding-top: 115px; }
      .bark-gallery { row-gap: 30px; }
      .bark-photo-placeholder { top: 22px; left: 15px; font-size: 12px; }
      .bark-artwork-details, .bark-artwork-details h1 { font-size: 12px; }
    }
    @media (max-width: 690px) {
      .bark-main { padding: 82px var(--side) 110px; }
      .bark-gallery { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
      .bark-photo { grid-column: 1; }
      .bark-artwork-details {
        grid-column: 1;
        grid-row: auto;
        align-self: start;
        font-size: 13px;
        margin-top: -8px;
        margin-bottom: 10px;
      }
      .bark-artwork-details h1 { font-size: 13px; }
      .bark-photo-placeholder { font-size: 13px; top: 22px; left: 14px; }
    }
  

/* Shared extraction of reachIII.html stylesheet #2 */

    /* Bark project page only. Shared header, footer, and personalisation remain unchanged. */
    .site-nav a[aria-current="page"]:not([href="/about.html"]) {
      font-weight: 600;
      position: relative;
    }
    .site-nav a[aria-current="page"]:not([href="/about.html"])::after {
      content: "";
      position: absolute;
      top: calc(100% + 14px);
      left: 0;
      right: 0;
      height: 1px;
      background: currentColor;
    }
    .artwork-main {
      width: 100%;
      padding: 158px var(--side) 160px;
    }
    .artwork-gallery {
      display: grid;
      grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
      column-gap: clamp(26px, 4vw, 60px);
      row-gap: 40px;
      align-items: start;
      max-width: 1430px;
      margin-inline: auto;
    }
    .artwork-photo {
      grid-column: 1;
      min-width: 0;
      width: 100%;
      margin: 0;
      position: relative;
      background: rgba(145, 145, 145, 0.035);
      /* Temporary area for unloaded photos. No frames or borders. */
      aspect-ratio: 3 / 2;
    }
    .artwork-photo-1 { aspect-ratio: 5 / 3; }
    .artwork-photo.has-image { background: transparent; aspect-ratio: auto; }
    .artwork-photo img { display: block; width: 100%; height: auto; max-width: 100%; }
    .artwork-photo.is-missing img { display: none; }
    .artwork-photo-placeholder {
      display: none;
      position: absolute;
      top: 40px;
      left: 22px;
      color: #777;
      font-family: var(--page-font);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.3;
    }
    .artwork-photo.is-missing .artwork-photo-placeholder { display: block; }
    .artwork-photo.has-image .artwork-photo-placeholder { display: none; }
    .artwork-artwork-details {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      padding-bottom: 3px;
      color: var(--page-text);
      font: 400 14px/1.65 var(--page-font);
    }
    .artwork-artwork-details h1 {
      margin: 0 0 7px;
      font: 600 14px/1.45 var(--page-font);
      color: inherit;
    }
    .artwork-artwork-details p { margin: 0; }
    @media (max-width: 950px) {
      .artwork-main { padding-top: 115px; }
      .artwork-gallery { row-gap: 30px; }
      .artwork-photo-placeholder { top: 22px; left: 15px; font-size: 12px; }
      .artwork-artwork-details, .artwork-artwork-details h1 { font-size: 12px; }
    }
    @media (max-width: 690px) {
      .artwork-main { padding: 82px var(--side) 110px; }
      .artwork-gallery { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
      .artwork-photo { grid-column: 1; }
      .artwork-artwork-details {
        grid-column: 1;
        grid-row: auto;
        align-self: start;
        font-size: 13px;
        margin-top: -8px;
        margin-bottom: 10px;
      }
      .artwork-artwork-details h1 { font-size: 13px; }
      .artwork-photo-placeholder { font-size: 13px; top: 22px; left: 14px; }
    }
  

/* Shared extraction of bark.html stylesheet #3 */

/* V0.26 — Selected works navigation on LEFT for desktop only. Mobile unchanged. */
.artwork-content { min-width: 0; }
.selected-artwork-sidebar { display: none; }
@media (min-width: 1051px) {
  .bark-main, .artwork-main {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: clamp(25px, 3.3vw, 52px);
    align-items: start;
  }
  .bark-main > .artwork-content, .artwork-main > .artwork-content {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
  }
  .artwork-content .bark-gallery, .artwork-content .artwork-gallery {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 61%) minmax(0, 1fr);
    column-gap: clamp(22px, 2.8vw, 42px);
  }
  .selected-artwork-sidebar {
    display: block;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 32px;
    align-self: start;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    scrollbar-width: thin;
    color: var(--page-text);
    font-family: var(--page-font);
  }
}
.selected-artwork-sidebar h2 {
  font: 500 13px/1.4 var(--page-font);
  color: var(--page-text);
  margin: 0 0 23px;
}
.selected-artwork-sidebar ol { list-style: none; padding: 0; margin: 0; }
.selected-artwork-sidebar li { margin: 0 0 14px; }
.selected-artwork-sidebar a {
  font: 400 13px/1.45 var(--page-font);
  color: var(--page-text);
  text-decoration: none;
  overflow-wrap: anywhere;
  display: inline-block;
}
.selected-artwork-sidebar a[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (max-width: 1050px) {
  .selected-artwork-sidebar { display: none !important; }
  .artwork-content { display: block; width: 100%; }
}


/* Shared extraction of buyalnizcabir.html stylesheet #2 */

/* V0.28 — new project detail; shared site navigation and picker unchanged. */
.project-detail {width:min(100%,1010px);margin:0 auto;}
.project-detail-intro {margin-bottom:34px;}
.project-detail-intro h1 {font:500 19px/1.4 var(--page-font);color:var(--page-text);margin:0 0 18px;}
.project-detail-intro p {font:400 15px/1.5 var(--page-font);color:var(--page-text);margin:0 0 8px;}
.project-detail-intro a{color:var(--page-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.project-detail-intro a:hover {opacity:.65;}
.project-detail-photo {max-width:720px;margin:0;}
.project-detail-photo img {display:block;max-width:100%;height:auto;}
.project-detail-photo:not(.has-image) img{display:none;}
.project-detail-placeholder{display:none;}
.project-detail-photo:not(.has-image) .project-detail-placeholder{display:flex;align-items:center;justify-content:center;min-height:360px;max-width:720px;border:1px solid #ddd;color:#777;font:400 13px/1.5 var(--page-font);background:#fafafa;}
@media(max-width:690px){.project-detail-photo:not(.has-image) .project-detail-placeholder{min-height:220px;}}


/* Shared extraction of panels.html stylesheet #3 */
/* Keep Panel I and Panel II as distinct works on the shared detail page. */
.bark-main > .bark-gallery + .bark-gallery { margin-top: clamp(90px, 10vw, 165px); }

/* Long font names are slightly smaller, as in the V0.33 picker. */
.picker-font-compact { font-size: 12px; }
@media (max-width: 950px) { .picker-font-compact { font-size: 11px; } }


/* V0.36 — Animated flame background with mouse repulsion (last background swatch).
   Runs behind the content, never blocks clicks, and honours reduced motion. */
.site-shell { position: relative; z-index: 1; }
.flame-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}
.flame-anchor {
  position: absolute;
  display: block;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}
.flame-emoji {
  position: relative;
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: var(--flame-size, 28px);
  line-height: 1;
  opacity: var(--flame-opacity, .5);
  filter: saturate(1.12);
  transform: translate3d(0, 6px, 0) rotate(-7deg);
  animation: flame-float var(--flame-duration, 7s) ease-in-out var(--flame-delay, 0s) infinite alternate;
}
@keyframes flame-float {
  0% { transform: translate3d(0, 9px, 0) rotate(-11deg) scale(.88); }
  100% { transform: translate3d(var(--flame-shift, 8px), -23px, 0) rotate(9deg) scale(1.10); }
}
/* The moving emoji is not an added border or new colour swatch. */
.picker-background-flames .swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 23px;
  line-height: 1;
}
@media (max-width: 690px) {
  .flame-anchor:nth-child(n+49) { display: none; }
  .picker-background-flames .swatch { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .flame-emoji { animation: none; transform: none; }
}


/* V0.38 — winding illustrated pixel snake for the fourth (lavender) background. */
.site-pixel-snake {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
}
.picker-background-snake .swatch {
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-background-snake svg {
  display: block;
  width: min(65px, 82%);
  height: 34px;
  shape-rendering: crispEdges;
}