/* Aslı Dündar Özcan — site
   Palette is sampled from the photographs: each room takes the backdrop tone of its own photo,
   text blocks take the pale grey of uncut aerated concrete. */

:root{
  --paper:#e4e4e2;
  --paper-ink:#1a1a1a;
  --paper-soft:#595959;
  --paper-line:rgb(26 26 26 / .2);
  --pale:#efefed;
  --ink:#1a1a1a;
  --m:clamp(20px, 3.3vw, 52px);
  --top:76px;
  --serif:'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }
body{
  margin:0; background:#1d1d1d; color:var(--ink);
  font:400 15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body:has(.viewer[open]){ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
p,h1,h2,h3,figure,ul,ol{ margin:0; }
::selection{ background:var(--ink); color:var(--pale); }
:focus-visible{ outline:1px solid currentColor; outline-offset:5px; }

.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip{ position:fixed; z-index:30; left:var(--m); top:10px; padding:8px 12px; background:var(--ink); color:var(--pale);
  font-size:13px; text-decoration:none; transform:translateY(-200%); }
.skip:focus{ transform:none; }


/* ---------- masthead ---------- */
.mast{
  position:fixed; z-index:20; inset:0 0 auto 0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:20px var(--m) 16px;
  color:var(--ink); pointer-events:none;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:color .4s ease, background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.mast[data-tone="dark"]{ color:var(--pale); }
.mast.is-scrolled{
  background:rgb(239 239 237 / .55);
  border-bottom-color:rgb(26 26 26 / .08);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
          backdrop-filter:blur(18px) saturate(1.4);
}
.mast.is-scrolled[data-tone="dark"]{
  background:rgb(29 29 29 / .5);
  border-bottom-color:rgb(239 239 237 / .08);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mast.is-scrolled{ background:rgb(239 239 237 / .92); }
  .mast.is-scrolled[data-tone="dark"]{ background:rgb(29 29 29 / .9); }
}
.mast a{ pointer-events:auto; text-decoration:none; }
.mast__home{ display:flex; align-items:center; gap:14px; }
.mast__name{ font:400 17px/1 var(--serif); letter-spacing:-.005em; }
.mast__nav{ display:flex; gap:clamp(18px, 2.6vw, 40px); }
.mast__nav a{ display:grid; font:400 12.5px/1.3 var(--sans); font-stretch:92%; }
.mast__nav a:hover span,
.mast__nav a:focus-visible span{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

/* transparent logo used as a mask, so it simply takes the current text colour */
.mark{
  display:block; flex:none; width:37px; height:21px; background:currentColor;
  -webkit-mask:url(../img/mark.svg) center / contain no-repeat;
          mask:url(../img/mark.svg) center / contain no-repeat;
}


/* ---------- opening ---------- */
.opening{
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:calc(var(--top) + 5vh) var(--m) 24px;
  background:var(--paper); color:var(--paper-ink);
}
.opening__hero{ flex:1; display:grid; place-items:center; padding:4vh 0 2vh; }
.mark--hero{ width:max(20vw, 150px); height:auto; aspect-ratio:1840 / 1040; background:#f6f6f6; }

/* the index: every work as a window of its own outer size, one scale, one floor */
.lineup{ padding-top:2vh; }
.lineup__scroll{
  container-type:inline-size;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding:14px 0 16px;
  scrollbar-width:thin;
}
.lineup__row{
  --g:clamp(8px, 1.1vw, 20px);
  --k:clamp(.9px, calc((100cqw - 28px - 14 * var(--g)) / 612), .213svh);
  position:relative;
  list-style:none; padding:0 28px 0 0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--g);
  min-width:max-content;
}
.lineup__row::after{ content:""; position:absolute; left:0; right:0; bottom:0; border-bottom:1px solid currentColor; }
.lineup__row > li{ display:flex; }

.unit{ position:relative; display:flex; align-items:flex-end; gap:calc(4 * var(--k)); text-decoration:none; outline-offset:8px; }
.unit .box{
  display:block;
  width:calc(var(--w) * var(--k)); height:calc(var(--h) * var(--k));
  background-color:var(--c, #a3a3a2); background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
  outline:1px solid transparent; outline-offset:3px;
  transition:outline-color .18s ease;
}
.unit .box--l{ background-size:200% auto; background-position:0 50%; }
.unit .box--r{ background-size:200% auto; background-position:100% 50%; }
.unit:hover .box, .unit:focus-visible .box{ outline-color:currentColor; }




/* ---------- rooms (one per work) ---------- */
/* Each photo sits on a lit studio sweep. Its left and right edge colours were sampled at twelve
   heights (see room palette at the end); the stage extends those edges sideways and lets them fall
   off into the wall colour, so the photograph has no seam and the floor light continues. */
.room{
  --side:clamp(220px, 17vw, 300px);
  --gap:clamp(20px, 2.4vw, 40px);
  --stage-w:calc(min(100vw - 2 * var(--m) - 2 * var(--side) - 2 * var(--gap),
                     (100svh - var(--top)) * var(--ar, 1)) * var(--s, 1));
  --my:linear-gradient(180deg, transparent, #000 var(--ft, 8%));
  position:relative; min-height:100svh; overflow:clip;
  display:grid; grid-template-columns:var(--side) minmax(0, 1fr) var(--side); column-gap:var(--gap);
  padding:var(--top) var(--m) 0;
  background:var(--room); color:var(--ink);
  box-shadow:inset 0 1px 0 rgb(0 0 0 / .25);
}

.room__stage{
  grid-column:2; grid-row:1; align-self:end; justify-self:center;
  position:relative; display:block; cursor:zoom-in; outline-offset:-6px;
  width:var(--stage-w); max-width:100%; aspect-ratio:var(--ar, 1);
}
.room__stage img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  --mx:linear-gradient(90deg, transparent, #000 var(--fx, 3%), #000 calc(100% - var(--fx, 3%)), transparent);
  -webkit-mask-image:var(--mx), var(--my); -webkit-mask-composite:source-in;
          mask-image:var(--mx), var(--my);         mask-composite:intersect;
}
.room__stage::before,
.room__stage::after{
  content:""; position:absolute; top:0; bottom:0;
  width:calc(var(--halo, 75%) + var(--fx, 3%));
  pointer-events:none;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.room__stage::before{
  right:calc(100% - var(--fx, 3%));
  background:var(--pl, var(--room));
  --hx:linear-gradient(270deg, #000 6%, rgb(0 0 0 / .62) 30%, rgb(0 0 0 / .22) 62%, transparent);
  -webkit-mask-image:var(--hx), var(--my); mask-image:var(--hx), var(--my);
}
.room__stage::after{
  left:calc(100% - var(--fx, 3%));
  background:var(--pr, var(--room));
  --hx:linear-gradient(90deg, #000 6%, rgb(0 0 0 / .62) 30%, rgb(0 0 0 / .22) 62%, transparent);
  -webkit-mask-image:var(--hx), var(--my); mask-image:var(--hx), var(--my);
}

/* wall label: a printed paper künye beside the work, readable over any light */
.room__label{
  grid-column:1; grid-row:1; align-self:end; justify-self:start;
  position:relative; z-index:2;
  width:min(100%, 300px); margin-bottom:max(48px, 20vh);
  padding:18px 22px 22px;
  background:var(--paper); color:var(--paper-ink);
}
.room__no{ margin-bottom:22px; font:400 12px/1 var(--sans); font-stretch:88%; font-variant-numeric:tabular-nums; color:var(--paper-soft); }
.room__title{
  margin-bottom:16px;
  font:400 clamp(23px, 1.85vw, 30px)/1.1 var(--serif);
  letter-spacing:-.01em; text-wrap:balance;
}
.room__title > span{ display:block; }
.room__title .alt{ font-style:italic; font-weight:350; }
.room__meta{ font:400 13px/1.55 var(--sans); font-stretch:94%; font-variant-numeric:tabular-nums lining-nums; }

.room__aside{
  grid-column:3; grid-row:1; align-self:end; justify-self:end;
  position:relative; z-index:2;
  margin-bottom:max(48px, 20vh);
}
/* even rooms mirror, like the verso/recto spreads of her catalogue */
@media (min-width:1100px){
  .room:nth-of-type(even) .room__label{ grid-column:3; justify-self:end; }
  .room:nth-of-type(even) .room__aside{ grid-column:1; justify-self:start; }
}


.views{ --tw:58px; list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, var(--tw)); gap:6px; }
.views li:only-child{ grid-column:1 / -1; }
.views a{ display:block; cursor:zoom-in; outline-offset:3px; }
.views img{ width:100%; aspect-ratio:3 / 4; object-fit:cover; background:rgb(0 0 0 / .14); transition:opacity .2s; }
.views li:only-child img{ aspect-ratio:auto; }
.views a:hover img{ opacity:.82; }


/* ---------- paintings ---------- */
.paintings{
  padding:calc(var(--top) + 8vh) var(--m) 15vh;
  background:#f1f0ed; color:var(--paper-ink);
}
.paintings__intro{
  display:flex; justify-content:space-between; align-items:end; gap:20px;
  padding-bottom:24px; border-bottom:1px solid var(--paper-line);
}
.paintings__intro h2{ font:400 clamp(40px, 5vw, 76px)/1.1 var(--serif); }
.paintings__intro h2 span + span{ display:block; font-style:italic; color:var(--paper-soft); }
.paintings__intro > span, .painting__no{ font:400 12px/1.4 var(--sans); font-variant-numeric:tabular-nums; color:var(--paper-soft); }
.paintings__group{ margin:10vh 0 3vh; font:400 13px/1.4 var(--sans); }
.paintings__grid{ display:grid; gap:clamp(36px, 5vw, 80px) clamp(18px, 3vw, 50px); }
.paintings__grid--canvas{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.paintings__grid--paper{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.painting{ min-width:0; }
.painting > a{
  position:relative; display:block; width:100%;
  height:clamp(260px, 31vw, 470px); cursor:zoom-in;
}
.painting > a img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 7px rgb(26 26 26 / .15)); }
.painting > a:hover img{ filter:drop-shadow(0 4px 10px rgb(26 26 26 / .25)); }
.paintings__grid--canvas .painting:first-child{ grid-column:1 / -1; }
.paintings__grid--canvas .painting:first-child > a{ height:clamp(380px, 60vw, 680px); }
.painting__info{
  display:grid; grid-template-columns:2.25rem minmax(0, 1fr); align-items:baseline;
  margin-top:18px; padding-top:12px; border-top:1px solid var(--paper-line);
}
.painting__title{ grid-column:2; margin:0; font:400 clamp(19px, 1.5vw, 24px)/1.2 var(--serif); letter-spacing:-.005em; text-wrap:balance; }
.painting__title .alt{ font-style:italic; font-weight:350; }
.painting__title > span + span::before{ content:"/ "; font-style:normal; }
.painting__meta{
  grid-column:2; margin-top:10px;
  font:400 13px/1.55 var(--sans); font-stretch:94%; font-variant-numeric:tabular-nums lining-nums;
  color:var(--paper-soft);
}


/* ---------- collages ---------- */
.collages{
  padding:calc(var(--top) + 8vh) var(--m) 15vh;
  background:var(--paper); color:var(--paper-ink);
}
.collages__intro{
  display:flex; justify-content:space-between; align-items:end; gap:20px;
  padding-bottom:24px; border-bottom:1px solid var(--paper-line);
}
.collages__intro h2{ font:400 clamp(40px, 5vw, 76px)/1.1 var(--serif); }
.collages__intro h2 span + span{ display:block; font-style:italic; color:var(--paper-soft); }
.collages__intro > span{ font:400 12px/1.4 var(--sans); font-variant-numeric:tabular-nums; color:var(--paper-soft); }
.collages__grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(32px, 4vw, 64px) clamp(18px, 3vw, 50px);
  padding-top:clamp(48px, 7vw, 110px);
}
.collage{ position:relative; display:block; width:100%; height:clamp(250px, 31vw, 460px); cursor:zoom-in; }
.collage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 7px rgb(26 26 26 / .12)); }
.collage:hover img{ filter:drop-shadow(0 4px 10px rgb(26 26 26 / .2)); }


/* ---------- text blocks ---------- */
.text{
  padding:calc(var(--top) + 9vh) var(--m) 14vh;
  background:var(--paper); color:var(--paper-ink);
  box-shadow:inset 0 1px 0 rgb(0 0 0 / .14);
}
.text__kicker{ margin-bottom:8vh; font:400 13px/1.3 var(--sans); font-stretch:92%; }
.text__kicker--sub{ margin:12vh 0 3vh; }
.text__cols{
  position:relative; max-width:1480px;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:clamp(32px, 6.5vw, 120px);
}
.text__cols::before{ content:""; position:absolute; top:.4em; bottom:1.4em; left:50%; border-left:1px solid var(--paper-line); }
.text__cols p{
  margin-bottom:1.15em;
  font:370 clamp(19px, 1.55vw, 26px)/1.5 var(--serif);
  hanging-punctuation:first;
}
.text__cols [lang="en"]{ grid-column:1; }
.text__cols [lang="tr"]{ grid-column:2; }
.bio__born{ margin:-5vh 0 6vh; font:400 13px/1.3 var(--sans); font-variant-numeric:tabular-nums; color:var(--paper-soft); }

.shows{ width:100%; max-width:1480px; border-collapse:collapse; font:400 13.5px/1.4 var(--sans); font-stretch:94%; }
.shows th, .shows td{ padding:15px 24px 15px 0; text-align:left; font-weight:400; vertical-align:baseline; border-top:1px solid var(--paper-line); }
.shows tr:last-child > *{ border-bottom:1px solid var(--paper-line); }
.shows th{ width:7.5em; font-variant-numeric:tabular-nums; }
.shows__v{ width:40%; font:400 clamp(18px, 1.45vw, 23px)/1.25 var(--serif) !important; }


/* ---------- footer ---------- */
.foot{
  display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:32px;
  padding:14vh var(--m) 36px;
  background:#1d1d1d; color:var(--pale);
  font:400 13px/1.55 var(--sans); font-stretch:94%;
}
.foot .mark{ width:53px; height:30px; }
.foot__text{ display:grid; gap:10px; }
.foot__top{ text-decoration:none; }
.foot__top:hover{ text-decoration:underline; text-underline-offset:3px; }


/* ---------- viewer ---------- */
.viewer{
  width:100vw; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:0; border:0;
  background:#151515; color:var(--pale);
}
.viewer::backdrop{ background:rgb(20 17 14 / .7); }
.viewer__fig{ height:100%; display:grid; grid-template-rows:minmax(0, 1fr) auto; padding:28px var(--m) 0; outline:0; }
.viewer__img{ width:100%; height:100%; object-fit:contain; cursor:e-resize; user-select:none; -webkit-user-drag:none; }
.viewer__bar{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:12px 0 16px; font:400 13px/1.3 var(--sans); }
.viewer__title{ font:400 17px/1.25 var(--serif); }
.viewer__title > span{ display:inline; }
.viewer__title > span + span::before{ content:" / "; font-style:normal; }
.viewer__title .alt{ font-style:italic; }
.viewer__ctrl{ display:flex; align-items:center; gap:2px; flex:none; }
.viewer button{ min-width:44px; min-height:44px; padding:8px 12px; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.viewer button:hover{ text-decoration:underline; text-underline-offset:3px; }
.viewer__count{ min-width:5ch; text-align:center; font-variant-numeric:tabular-nums; }
.viewer.is-single .viewer__prev, .viewer.is-single .viewer__next, .viewer.is-single .viewer__count{ visibility:hidden; }


/* ---------- narrower screens ---------- */
@media (max-width:1099px){
  .room{
    --stage-w:calc(min(100%, (100svh - 180px) * var(--ar, 1)) * var(--s, 1));
    --my:linear-gradient(180deg, transparent, #000 var(--ft, 8%), #000 84%, transparent);
    grid-template-columns:minmax(0, 1fr) auto; row-gap:28px; align-items:end;
    min-height:0; padding:84px var(--m) 56px;
  }
  .room__stage{ grid-column:1 / -1; grid-row:1; }
  .room__label, .room__aside{ grid-row:2; margin-bottom:0; }
  .room__label{ grid-column:1; }
  .room__aside{ grid-column:2; }
  .paintings__grid--paper{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .collages__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:700px){
  :root{ --top:84px; }
  .mast{ display:grid; justify-content:start; gap:9px; padding:14px var(--m) 8px; background:var(--paper); color:var(--ink) !important; }
  .mast.is-scrolled,
  .mast.is-scrolled[data-tone="dark"]{ background:rgb(228 228 226 / .75); border-bottom-color:rgb(26 26 26 / .08); }
  .mast__name{ font-size:15px; }
  .mast__nav{ gap:clamp(8px, 2.5vw, 18px); max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .mast__nav a{ flex:none; font-size:11px; }

  .opening{ min-height:0; padding-top:calc(var(--top) + 5vh); }
  .opening__hero{ padding:12vh 0 6vh; }
  .lineup{ margin-top:0; padding-top:9vh; }
  .lineup__scroll{ -webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent); }

  .room{ grid-template-columns:1fr; padding-top:94px; }
  .room__label{ width:auto; max-width:420px; }
  .room__aside{ grid-column:1; grid-row:3; justify-self:start; }

  .paintings__group{ margin-top:8vh; }
  .paintings__grid--canvas{ grid-template-columns:1fr; }
  .paintings__grid--canvas .painting:first-child{ grid-column:auto; }
  .painting > a, .paintings__grid--canvas .painting:first-child > a{ height:clamp(260px, 85vw, 480px); }
  .painting__info{ margin-top:10px; }
  .collage{ height:clamp(240px, 56vw, 420px); }

  .text__cols{ grid-template-columns:1fr; }
  .text__cols::before{ display:none; }
  .text__cols [lang]{ grid-column:1; }
  .text__cols [lang="en"]{ order:1; }
  .text__cols [lang="tr"]{ order:2; }
  .text__cols .tr-first{ margin-top:.8em; padding-top:1.4em; border-top:1px solid var(--paper-line); }

  .shows tr{ display:grid; grid-template-columns:4.2em 1fr; border-top:1px solid var(--paper-line); padding:12px 0; }
  .shows tr:last-child{ border-bottom:1px solid var(--paper-line); }
  .shows th, .shows td, .shows tr:last-child > *{ border:0; padding:0; width:auto; }
  .shows td{ grid-column:2; }
  .shows__v{ margin-bottom:4px; }

  .foot{ grid-template-columns:1fr; }
  .viewer__bar{ flex-direction:column; align-items:flex-start; gap:4px; }
}

@media (max-width:520px){
  .paintings__grid--paper{ grid-template-columns:1fr; }
  .collages__grid{ grid-template-columns:1fr; }
  .collage{ height:clamp(280px, 95vw, 460px); }
}


/* ---------- room palette ----------
   Photos are white-balanced on their own backdrop and lifted with a tone curve to a neutral light grey.
   --room: wall tone under the header (light enough for dark header text, ≥ 4.6:1)
   --pl / --pr: left and right photo-edge colours sampled at 12 heights
   --s: stage scale (small works hang smaller) */
#denge-2010{ --room:#9a9b99; --ar:2400 / 1792; --s:.74; --ft:8%;
  --pl:linear-gradient(#9e9f9e 4%, #a4a3a2 13%, #a6a6a5 21%, #a9aaa9 29%, #adadad 38%, #afafb0 46%, #b0b0b2 54%, #afafb1 63%, #b2b2b5 71%, #c1c3c8 79%, #c9cbd0 88%, #c9cdd2 96%);
  --pr:linear-gradient(#9f9f9d 4%, #a2a1a0 13%, #a4a3a1 21%, #a5a5a4 29%, #a7a6a7 38%, #a8a7aa 46%, #aaaaac 54%, #a7a7a9 63%, #9f9e9f 71%, #84807e 79%, #afb0b3 88%, #b9bdc0 96%); }
#balance-2023{ --room:#898887; --s:.9; --ft:10%;
  --pl:linear-gradient(#7d7c7a 4%, #838382 13%, #898889 21%, #8f8f8e 29%, #959595 38%, #a1a2a4 46%, #b4b8bb 54%, #b2b6ba 63%, #b6b9be 71%, #bfc2c7 79%, #babec2 88%, #b3b8bb 96%);
  --pr:linear-gradient(#858585 4%, #8d8c8d 13%, #949392 21%, #9a999a 29%, #a1a1a1 38%, #adafb0 46%, #b1b4b6 54%, #afb2b4 63%, #bfc2c7 71%, #babec2 79%, #b4b8bb 88%, #adb1b3 96%); }
#suppressed{ --room:#929291; --s:.9; --ft:6%;
  --pl:linear-gradient(#8d8d8b 4%, #959594 13%, #9b9b9b 21%, #9f9f9f 29%, #a1a1a1 38%, #a1a1a1 46%, #a0a0a0 54%, #a4a5a5 63%, #a6a7a7 71%, #a6a8a8 79%, #b2b6b7 88%, #b9bdc0 96%);
  --pr:linear-gradient(#a0a0a1 4%, #a4a6a5 13%, #a7a8a7 21%, #a9a9a9 29%, #a9a9a9 38%, #a8a8a8 46%, #a4a4a4 54%, #a7a7a7 63%, #a9a9a9 71%, #a5a7a6 79%, #979795 88%, #a1a2a1 96%); }
#repressed{ --room:#939291; --s:.9; --ft:8%;
  --pl:linear-gradient(#939290 4%, #9e9e9e 13%, #a7a7a7 21%, #aeaeae 29%, #b3b3b4 38%, #b6b6b9 46%, #b9b9bd 54%, #bbbabf 63%, #bababe 71%, #b8b8bc 79%, #c5c7cc 88%, #cbcfd5 96%);
  --pr:linear-gradient(#9c9c9b 4%, #a2a2a1 13%, #a5a5a5 21%, #a7a7a7 29%, #a6a6a6 38%, #a4a4a4 46%, #a5a5a5 54%, #a6a6a6 63%, #a5a5a5 71%, #9c9c9b 79%, #989897 88%, #b8b9bc 96%); }
#fullocracy{ --room:#868683; --ft:8%;
  --pl:linear-gradient(#8b8b87 4%, #9a9a99 13%, #a4a4a5 21%, #a9a9ab 29%, #ababad 38%, #ababad 46%, #a8a8aa 54%, #9e9e9f 63%, #959595 71%, #929292 79%, #99999b 88%, #9d9d9f 96%);
  --pr:linear-gradient(#82827e 4%, #91918f 13%, #9c9c9c 21%, #a4a4a5 29%, #a8a8aa 38%, #ababad 46%, #aaaaac 54%, #a6a6a8 63%, #9e9e9f 71%, #9d9d9f 79%, #99999b 88%, #9f9fa0 96%); }
#girls-break-free{ --room:#8a8988; --ft:8%;
  --pl:linear-gradient(#989898 4%, #9d9d9d 13%, #a1a1a1 21%, #a3a4a4 29%, #a4a5a6 38%, #a6a7a8 46%, #a9a9ab 54%, #ababad 63%, #acadaf 71%, #aaaaac 79%, #9e9f9f 88%, #b3b5b8 96%);
  --pr:linear-gradient(#858380 4%, #8f8e8c 13%, #979695 21%, #9c9c9c 29%, #a1a1a1 38%, #a4a5a5 46%, #a6a7a8 54%, #aaaaac 63%, #adaeb0 71%, #b4b5b8 79%, #c6c9cf 88%, #cbced5 96%); }
#rest-in-freedom{ --room:#878785; --ft:10%;
  --pl:linear-gradient(#64635e 4%, #6a6864 13%, #6f6c68 21%, #74726f 29%, #797775 38%, #7d7c7a 46%, #81807f 54%, #858585 63%, #8d8d90 71%, #b1b5bd 79%, #cdd3df 88%, #c9cfda 96%);
  --pr:linear-gradient(#8b8b8b 4%, #8f9092 13%, #929395 21%, #959699 29%, #97989c 38%, #999a9e 46%, #9c9da1 54%, #9e9fa3 63%, #a0a1a5 71%, #a9acb2 79%, #b1b5bc 88%, #b0b5bb 96%); }
#trilogy{ --room:#898886; --s:.9; --ft:10%;
  --pl:linear-gradient(#aaaaaa 4%, #aaaaaa 13%, #aaacab 21%, #acacad 29%, #abacac 38%, #adadae 46%, #afb0b1 54%, #b0b0b2 63%, #acacad 71%, #a3a3a2 79%, #a09f9e 88%, #9d9c9b 96%);
  --pr:linear-gradient(#6a6663 4%, #6c6a67 13%, #797573 21%, #969593 29%, #b7b8ba 38%, #c9cbcf 46%, #cdd0d5 54%, #cdd0d5 63%, #cacdd1 71%, #c6c8cc 79%, #c1c2c5 88%, #bcbdbf 96%); }
#monstera{ --room:#868583; --s:.9; --ft:8%;
  --pl:linear-gradient(#817e7a 4%, #888685 13%, #8c8c8c 21%, #919191 29%, #949492 38%, #979797 46%, #9a9b9b 54%, #9e9fa0 63%, #a1a2a6 71%, #abadb2 79%, #c0c5cb 88%, #c7cdd3 96%);
  --pr:linear-gradient(#949494 4%, #979797 13%, #9a9a9b 21%, #9d9e9f 29%, #9fa0a2 38%, #a2a2a4 46%, #a5a5a7 54%, #a9aaac 63%, #aeafb1 71%, #b1b2b3 79%, #a5a5a4 88%, #b7babe 96%); }
#stathusiasm{ --room:#9f9f9f; --ft:8%;
  --pl:linear-gradient(#a2a2a2 4%, #aaaaaa 13%, #b0b0b0 21%, #b2b2b3 29%, #afafaf 38%, #adadad 46%, #acacac 54%, #c5c5c6 63%, #cfcfcf 71%, #bbbbbb 79%, #a9aaa8 88%, #c5c5c7 96%);
  --pr:linear-gradient(#a6a6a6 4%, #acacac 13%, #b0b0b0 21%, #b2b2b2 29%, #adadad 38%, #aaaaaa 46%, #a8a8a8 54%, #bdbdbd 63%, #d8d8d8 71%, #e3e3e3 79%, #e2e4e3 88%, #dee0df 96%); }
#fixture{ --room:#8f8e8c; --ft:8%;
  --pl:linear-gradient(#8e8d8b 4%, #949391 13%, #9a9897 21%, #9e9d9d 29%, #a2a2a2 38%, #aaabab 46%, #bcbec1 54%, #c4c7cc 63%, #c9ccd1 71%, #cacdd1 79%, #c8cbd0 88%, #c5c9cc 96%);
  --pr:linear-gradient(#999897 4%, #9e9d9c 13%, #a1a1a0 21%, #a5a5a5 29%, #a9a9a9 38%, #afb0b2 46%, #bdbec2 54%, #bcbdbf 63%, #b9b9b9 71%, #bcbdbf 79%, #c2c4c7 88%, #c2c3c7 96%); }
#raised{ --room:#969595; --ft:6%;
  --pl:linear-gradient(#959492 4%, #9c9c9b 13%, #a2a2a2 21%, #a5a7a6 29%, #a8a9aa 38%, #aaabad 46%, #acadaf 54%, #aeafb1 63%, #adaeb0 71%, #adafb1 79%, #bdc0c5 88%, #c4c9ce 96%);
  --pr:linear-gradient(#a1a0a0 4%, #a5a5a5 13%, #a7a7a7 21%, #a8a8a8 29%, #a5a5a6 38%, #a2a2a2 46%, #9f9f9f 54%, #9e9e9e 63%, #9c9c9a 71%, #969593 79%, #9c9c9d 88%, #aeb1b4 96%); }
#depressed{ --room:#868583; --ft:5%;
  --pl:linear-gradient(#7f7e7b 4%, #8f8e8c 13%, #9a9a9a 21%, #a2a2a3 29%, #a7a7a9 38%, #a9a9ab 46%, #a8a9ab 54%, #a7a7a9 63%, #a8a9ab 71%, #a5a7a9 79%, #b4b7bc 88%, #c1c6cc 96%);
  --pr:linear-gradient(#949493 4%, #a0a0a0 13%, #a7a7a8 21%, #aaabac 29%, #aaaaab 38%, #a7a7a8 46%, #9b9a9a 54%, #8e8d8b 63%, #8b8a88 71%, #8a8987 79%, #9c9c9d 88%, #b8bbbe 96%); }
#t{ --room:#989797; --s:.74; --ft:6%;
  --pl:linear-gradient(#9a9999 4%, #9d9d9d 13%, #a0a09f 21%, #a2a2a2 29%, #a3a3a3 38%, #a5a5a5 46%, #a7a7a7 54%, #a9aaab 63%, #acadae 71%, #aeaeb0 79%, #b0b1b3 88%, #babbbf 96%);
  --pr:linear-gradient(#9f9f9f 4%, #a2a2a2 13%, #a3a3a3 21%, #a5a5a5 29%, #a6a6a6 38%, #a7a7a7 46%, #a8a9aa 54%, #ababac 63%, #adaeb0 71%, #afb0b2 79%, #b1b2b4 88%, #b8babd 96%); }
#bronze-men{ --room:#878786; --s:.74; --ft:10%;
  --pl:linear-gradient(#555352 4%, #616060 13%, #707070 21%, #7e7f7f 29%, #88898a 38%, #919294 46%, #9b9ea1 54%, #b4bac0 63%, #c4ced7 71%, #bfc8cf 79%, #b7bec3 88%, #b0b4b9 96%);
  --pr:linear-gradient(#6b6b6a 4%, #70706e 13%, #757472 21%, #787775 29%, #7a7979 38%, #7e7d7d 46%, #818181 54%, #8c8d8f 63%, #818182 71%, #838485 79%, #9b9ea2 88%, #9a9ea1 96%); }