/* Fictive Topography · 2021– . The Folly / instrument reading rhythm,
   without the generic collection gallery's grey stages or fake artwork.
   This stylesheet affects only the fictive-topography reading room. */

html:has(.ft-room),
body:has(.ft-room) {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  background: #eeede8;
}
.site-root:has(.ft-room) {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 100svh;
}
.room-view.ft-room {
  --ft-side: clamp(23px, 6vw, 100px);
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  min-height: 100svh;
  height: auto;
  overflow: visible;
  animation: none !important;
  transform: none !important;
  background: #eeede8;
  color: #222922;
}
.ft-room .room-head {
  position: sticky;
  inset: auto;
  top: 0;
  z-index: 80;
  height: 54px;
  border-bottom: 1px solid rgba(36, 41, 37, .14);
  background: rgba(238, 237, 232, .94);
  color: #232a24;
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ft-room .room-head > p,
.ft-room .room-back { color: rgba(36, 41, 37, .53); }
.ft-room .room-head .language button {color: rgba(36, 41, 37, .42);}
.ft-room .room-head .language button.is-active,
.ft-room .room-head .language button:hover {color: #202620;}
.ft-page {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 clamp(110px, 17vh, 240px);
  background: #eeede8;
}
.ft-series-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 26px;
  padding: clamp(66px, 10vh, 118px) var(--ft-side) clamp(47px, 7vh, 84px);
}
.ft-series-head h1 {
  max-width: 100%;
  margin: 0;
  color: #222922;
  font: 400 clamp(37px, 4.3vw, 65px)/1.2 var(--serif), serif;
  letter-spacing: .045em;
  overflow-wrap: anywhere;
}
.ft-series-head > p {
  margin: 0;
  color: rgba(34, 41, 34, .58);
  font: 400 clamp(13px, 1.05vw, 16px)/1.6 var(--serif), serif;
  white-space: nowrap;
}
.ft-about {
  padding: clamp(44px, 8vh, 108px) var(--ft-side) clamp(100px, 15vh, 218px);
  border-top: 1px solid rgba(31, 38, 31, .12);
}
.ft-about h2 {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font: 400 clamp(21px, 1.8vw, 28px)/1.5 var(--serif), serif;
  letter-spacing: .03em;
}
.ft-series-copy {
  width: min(100%, 795px);
}
.ft-series-copy p {
  margin: 0;
  padding: 0;
  color: rgba(33, 40, 34, .85);
  font: 400 clamp(15px, 1.18vw, 18px)/2.06 var(--serif), serif;
  letter-spacing: .012em;
  text-wrap: pretty;
}
.ft-series-copy p + p {margin-top: clamp(17px, 2.5vw, 31px);}
.ft-contents {
  max-width: 795px;
  margin-top: clamp(50px, 7vw, 95px);
  padding-top: 11px;
  border-top: 1px solid rgba(34, 39, 34, .16);
}
.ft-contents > p {
  margin: 0 0 12px;
  color: rgba(37, 45, 38, .46);
  font: 400 clamp(11px, .92vw, 13px)/1.7 var(--serif), serif;
}
.ft-contents ol {list-style: none; margin: 0; padding: 0;}
.ft-contents li {border-bottom: 1px solid rgba(34, 39, 34, .1);}
.ft-contents button {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.8vw, 27px);
  width: 100%;
  padding: clamp(13px, 1.4vw, 19px) 0;
  border: 0;
  background: transparent;
  color: #252c25;
  font: 400 clamp(14px, 1.13vw, 17px)/1.75 var(--serif), serif;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color .2s ease;
}
.ft-contents button > span {
  flex: none;
  color: rgba(38, 45, 39, .45);
  font-size: .82em;
}
.ft-contents button:hover {color: #070d08;}
.ft-work {
  padding: clamp(45px, 6vw, 92px) 0 clamp(100px, 12vw, 175px);
  scroll-margin-top: 60px;
}
.ft-work-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 40px;
  padding: 0 var(--ft-side) 0;
}
.ft-work-heading > div {min-width: 0;}
.ft-work-number {
  margin: 0 0 clamp(16px, 2vw, 27px);
  color: rgba(38, 45, 39, .46);
  font: 400 clamp(12px, 1vw, 14px)/1.6 var(--serif), serif;
}
.ft-work-heading h2 {
  max-width: min(1160px, 100%);
  margin: 0;
  color: #111512;
  font: 400 clamp(32px, 3.7vw, 60px)/1.32 var(--serif), serif;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.ft-work-year {
  flex: none;
  color: rgba(28, 35, 29, .7);
  font: 400 clamp(13px, 1.1vw, 17px)/1.6 var(--serif), serif;
}
.ft-work-meta {
  max-width: 880px;
  margin: clamp(11px, 1.5vw, 19px) var(--ft-side) clamp(29px, 4.5vw, 65px);
  color: rgba(39, 46, 39, .58);
  font: 400 clamp(12px, 1vw, 15px)/1.8 var(--serif), serif;
  letter-spacing: .026em;
}
.ft-photo-pending {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: min(clamp(360px, 51vw, 765px), calc(100% - 2 * var(--ft-side)));
  min-height: clamp(200px, 32vw, 460px);
  margin: 0 var(--ft-side);
  padding: 0 0 8px;
  /* Reserved space, deliberately no frame or grey rectangle. */
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}
.ft-photo-pending-caption {
  color: rgba(35, 43, 37, .37);
  font: 400 clamp(11px, .93vw, 13px)/1.6 var(--serif), serif;
  letter-spacing: .065em;
}
.ft-photo-sequence {
  width: min(1160px, calc(100% - 2 * var(--ft-side)));
  margin: 0 var(--ft-side);
}
.ft-photo {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.ft-photo + .ft-photo {margin-top: clamp(29px, 5vw, 74px);}
.ft-photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(81svh, 870px);
  min-height: 0;
  border: 0;
  object-fit: contain;
  box-shadow: none;
  background: transparent;
  filter: none;
}
.ft-photo figcaption {
  margin-top: 14px;
  color: rgba(40, 47, 40, .58);
  font: 400 clamp(11px, 1vw, 14px)/1.7 var(--serif), serif;
}
.ft-work-copy {
  width: min(850px, calc(100% - 2 * var(--ft-side)));
  margin: clamp(57px, 7.7vw, 112px) var(--ft-side) 0;
  padding: 0;
}
.ft-work-copy p {
  max-width: 795px;
  margin: 0;
  color: rgba(44, 49, 44, .78);
  font: 400 clamp(14px, 1.16vw, 17px)/2.12 var(--serif), serif;
  letter-spacing: .012em;
  text-align: left;
  text-wrap: pretty;
}
.ft-work-copy p + p {margin-top: clamp(18px, 2.5vw, 34px);}
.ft-work-copy .ft-work-data {
  margin-top: clamp(30px, 4vw, 55px);
  color: rgba(39, 47, 40, .48);
  font: 400 clamp(11px, .97vw, 14px)/1.85 var(--serif), serif;
  letter-spacing: .03em;
}
.ft-section-space {
  height: clamp(90px, 12vw, 190px);
  background: transparent;
}
.ft-room button { -webkit-tap-highlight-color: transparent; }

@media (max-width: 700px) {
  .room-view.ft-room { --ft-side: 22px; }
  .ft-room .room-head {height: 50px;}
  .ft-series-head {
    padding-top: 67px;
    padding-bottom: 47px;
  }
  .ft-series-head h1 {font-size: clamp(34px, 8.4vw, 47px);}
  .ft-series-head > p {font-size: 12px;}
  .ft-about {
    padding-top: 48px;
    padding-bottom: 107px;
  }
  .ft-series-copy p {font-size: 14px;line-height: 2.06;}
  .ft-contents {margin-top: 56px;}
  .ft-contents button {font-size: 13px;}
  .ft-work {padding: 47px 0 95px;scroll-margin-top: 52px;}
  .ft-work-heading h2 {font-size: clamp(27px, 6.65vw, 39px);}
  .ft-work-meta {font-size: 11px;margin-bottom: 32px;}
  .ft-photo-pending {
    width: calc(100% - 2 * var(--ft-side));
    min-height: min(61vw, 310px);
  }
  .ft-photo-sequence {width: calc(100% - 2 * var(--ft-side));}
  .ft-photo img {max-height: 75svh;}
  .ft-work-copy {margin-top: 40px;}
  .ft-work-copy p {font-size: 13px;line-height: 2.05;}
  .ft-section-space {height: 70px;}
}
@media (prefers-reduced-motion: reduce) {
  .ft-contents button {transition: none;}
}


/* Vaporware media sequences · v62
   Four independent photo cycles and two small moving-image cards. All the
   image surrounds remain transparent; no gallery-grey panels or frames. */
.ft-room .ft-media-stack {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:clamp(68px,10vw,150px);
  padding:0;
  margin:0;
}
.ft-room .ft-media-unit {
  box-sizing:border-box;
  margin:0;
  border:0;
  background:transparent;
}
.ft-room .ft-media-heading {
  box-sizing:border-box;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  width:min(clamp(360px,51vw,765px),calc(100% - 2 * var(--ft-side)));
  margin:0 var(--ft-side) clamp(15px,2.4vw,31px);
}
.ft-room .ft-media-heading h3,
.ft-room .ft-media-heading > span {
  margin:0;
  color:rgba(39,47,42,.57);
  font:400 clamp(12px,1.04vw,15px)/1.6 var(--serif),serif;
  letter-spacing:.035em;
}
.ft-room .ft-media-heading > span {
  color:rgba(39,47,42,.41);
  font-size:clamp(11px,.9vw,13px);
  font-variant-numeric:tabular-nums;
}
.ft-room .ft-slides {
  width:100%;
}
.ft-room .ft-slide-screen {
  display:block;
  position:relative;
  box-sizing:border-box;
  width:min(clamp(360px,51vw,765px),calc(100% - 2 * var(--ft-side)));
  height:auto;
  min-height:0;
  aspect-ratio:16 / 10;
  margin:0 var(--ft-side);
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  isolation:isolate;
}
.ft-room .ft-slide-image {
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  max-width:100%;
  max-height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  filter:none;
  object-fit:contain;
  opacity:0;
  visibility:visible;
  pointer-events:none;
  transition:opacity .72s cubic-bezier(.24,.66,.33,1);
}
.ft-room .ft-slide-image.is-active {
  z-index:2;
  opacity:1;
}
.ft-room .ft-slide-footer {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:15px 35px;
  width:min(clamp(360px,51vw,765px),calc(100% - 2 * var(--ft-side)));
  margin:clamp(15px,2.1vw,28px) var(--ft-side) 0;
  padding:0;
}
.ft-room .ft-slide-options {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:clamp(13px,1.75vw,23px);
}
.ft-room .ft-slide-choice {
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  min-width:18px;
  min-height:29px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(34,42,36,.41);
  font:400 clamp(12px,1.06vw,15px)/1.3 var(--serif),serif;
  font-variant-numeric:tabular-nums;
  text-align:left;
  cursor:pointer;
  transition:font-size .42s cubic-bezier(.2,.8,.2,1),color .28s ease;
}
.ft-room .ft-slide-choice.is-active {
  color:rgba(23,29,25,.9);
  font-size:clamp(23px,1.95vw,29px);
}
.ft-room .ft-slide-choice:hover,
.ft-room .ft-slide-choice:focus-visible {
  color:rgba(21,29,23,.9);
}
.ft-room .ft-slide-count {
  color:rgba(43,51,45,.44);
  font:400 clamp(11px,.94vw,13px)/1.5 var(--serif),serif;
  font-variant-numeric:tabular-nums;
}
.ft-room .ft-media-cards {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(68px,10vw,130px);
  padding:0 var(--ft-side);
}
.ft-room .ft-media-card-unit {
  width:clamp(216px,30.6vw,459px);
  max-width:100%;
}
.ft-room .ft-media-card-unit .ft-media-heading {
  width:100%;
  margin:0 0 clamp(18px,2.4vw,29px);
}
.ft-room .ft-media-card {
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.ft-room .ft-media-card-screen {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border:0;
  background:transparent;
  isolation:isolate;
  box-shadow:none;
  transition:transform .42s cubic-bezier(.18,.8,.22,1);
}
.ft-room .ft-media-card:hover .ft-media-card-screen,
.ft-room .ft-media-card:focus-visible .ft-media-card-screen {
  transform:scale(1.025);
}
.ft-room .ft-media-gif,
.ft-room .ft-media-video {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-height:100%;
  padding:0;
  border:0;
  background:transparent;
  filter:none;
  object-fit:contain;
}
.ft-room .ft-media-video {
  background:#0b0d0f;
}
.ft-room .ft-media-open-mark {
  position:absolute;
  z-index:2;
  right:12px;
  top:10px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:rgba(246,246,242,.94);
  font:400 22px/1 Georgia,serif;
  text-shadow:0 1px 7px rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .24s ease;
  pointer-events:none;
}
.ft-room .ft-media-card:hover .ft-media-open-mark,
.ft-room .ft-media-card:focus-visible .ft-media-open-mark {
  opacity:1;
}
.ft-room .ft-media-card-caption {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-top:clamp(11px,1.65vw,22px);
  color:rgba(27,34,29,.84);
}
.ft-room .ft-media-card-count {
  flex:none;
  color:rgba(25,32,27,.92);
  font:400 clamp(23px,1.92vw,29px)/1.25 var(--serif),serif;
}
.ft-room .ft-media-card-count small {
  color:rgba(31,40,33,.46);
  font:400 clamp(10px,.83vw,12px)/1.4 var(--serif),serif;
}
.ft-room .ft-media-card-name {
  color:rgba(36,45,38,.75);
  font:400 clamp(12px,1vw,15px)/1.6 var(--serif),serif;
  text-align:right;
  overflow-wrap:anywhere;
}
body.ft-modal-open { overflow:hidden!important; }
.ft-room .ft-viewer[hidden],
.ft-room .ft-viewer-gif[hidden],
.ft-room .ft-viewer-video[hidden] { display:none!important; }
.ft-room .ft-viewer {
  position:fixed;
  z-index:1200;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:clamp(14px,3vw,38px);
  background:rgba(0,0,0,.965);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}
.ft-room .ft-viewer-scrim {
  position:absolute;
  inset:0;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-out;
}
.ft-room .ft-viewer-inner {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:max-content;
  max-width:94vw;
  min-width:0;
  max-height:calc(100dvh - 36px);
  margin:auto;
  padding:0;
  background:transparent;
}
.ft-room .ft-viewer-gif,
.ft-room .ft-viewer-video {
  display:block;
  width:auto;
  max-width:100%;
  max-height:calc(100dvh - 105px);
  height:auto;
  min-width:0;
  object-fit:contain;
  background:transparent;
  border:0;
  box-shadow:none;
}
.ft-room .ft-viewer-video {
  width:min(92vw,1260px);
  background:#000;
}
.ft-room .ft-viewer-caption {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin-top:clamp(11px,1.6vw,20px);
  color:rgba(249,249,244,.82);
  font:400 clamp(12px,1.06vw,16px)/1.6 var(--serif),serif;
  letter-spacing:.025em;
}
.ft-room .ft-viewer-close {
  flex:none;
  margin:0;
  padding:4px 0;
  border:0;
  background:transparent;
  color:rgba(249,249,245,.75);
  font:inherit;
  cursor:pointer;
}
.ft-room .ft-viewer-close:hover {color:white;}
@media(max-width:700px) {
  .ft-room .ft-media-stack {gap:clamp(64px,14vw,95px);}
  .ft-room .ft-media-heading,
  .ft-room .ft-slide-screen,
  .ft-room .ft-slide-footer {
    width:calc(100% - 2 * var(--ft-side));
  }
  .ft-room .ft-slide-screen {aspect-ratio:1.22 / 1;}
  .ft-room .ft-slide-footer {margin-top:15px;}
  .ft-room .ft-slide-options {gap:16px;}
  .ft-room .ft-slide-choice {font-size:13px;}
  .ft-room .ft-slide-choice.is-active {font-size:24px;}
  .ft-room .ft-media-cards {gap:clamp(65px,14vw,90px);}
  .ft-room .ft-media-card-unit {width:clamp(212px,68.4vw,324px);}
  .ft-room .ft-media-card-caption {margin-top:13px;}
  .ft-room .ft-media-card-name {font-size:12px;}
  .ft-room .ft-viewer {padding:14px;}
  .ft-room .ft-viewer-inner {max-width:96vw;}
  .ft-room .ft-viewer-video {width:95vw;}
  .ft-room .ft-viewer-gif {max-width:95vw;}
}
@media(prefers-reduced-motion:reduce) {
  .ft-room .ft-slide-image,
  .ft-room .ft-slide-choice,
  .ft-room .ft-media-card-screen,
  .ft-room .ft-media-open-mark {
    transition:none!important;
  }
}