/* ==========================================================================
   devanshi jain — spaces (the bars and the scrolling frame are in page.css)
   A day at the studio in five parts (content/spaces.php), each its own grid with its own rhythm:
   arriving (the studio wide, then loose on the paper, as in the brand presentation), the rooms (a pause,
   then pairs), making (the work on the table), showing, and night.
   ========================================================================== */

p, figure { margin: 0; }

/* each part is its own twelve-column grid; the parts sit far apart, like turning a page */
.sp-part {
  --frame-h: calc(100vh - var(--frame-top) - var(--frame-bottom));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px); align-items: start;
  padding: 0 var(--right) 0 var(--side);
}
.sp-part + .sp-part { margin-top: 30vh; }
.sp-part--arriving { padding-top: var(--fade); }
.sp-part:last-child { padding-bottom: calc(var(--fade) + 10vh); }

.sp-fig { position: relative; }
.sp-fig img { display: block; width: 100%; height: auto; background: #efefee; }

.sp-statement { color: var(--ink); line-height: 1.5; max-width: 17em; }
.sp-text { line-height: 1.6; }
.sp-text p + p { margin-top: 1.05em; }
.sp-walk { margin-top: 1.6em !important; }
.sp-walk a { position: relative; color: var(--ink); -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.sp-walk a::after { content: ""; position: absolute; inset: -11px -14px; }
@media (hover: hover) { .sp-walk a:hover { opacity: .6; } }
@media (hover: none) { .sp-walk a:active { opacity: .55; } }

/* ---------- desktop ---------- */
/* arriving: the studio across the page, cropped to fit between the bars; then loose on the paper */
.sp-fig--studio  { grid-column: 1 / 13; grid-row: 1; }
.sp-fig--studio img { aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 62%; max-height: calc(var(--frame-h) - 2 * var(--fade)); }
.sp-statement    { grid-column: 1 / 4;   grid-row: 2; margin-top: 8vh; }
.sp-fig--arch    { grid-column: 5 / 8;   grid-row: 2; margin-top: 12vh; }
.sp-fig--grasses { grid-column: 9 / 12;  grid-row: 2; margin-top: 4vh; }
.sp-fig--entrance { grid-column: 2 / 5;  grid-row: 3; margin-top: 12vh; }
.sp-text         { grid-column: 7 / 10;  grid-row: 3; margin-top: 16vh; }
.sp-fig--glass   { grid-column: 11 / 13; grid-row: 3; margin-top: 34vh; }

/* the rooms: one picture alone, the height of the window, as a pause; then pairs at different heights */
.sp-fig--curtain, .sp-fig--night { grid-column: 1 / 13; grid-row: 1; display: flex; justify-content: center; }
.sp-fig--curtain img, .sp-fig--night img { width: auto; max-width: 100%; height: calc(var(--frame-h) - 2 * var(--fade)); }
.sp-fig--library { grid-column: 1 / 5;   grid-row: 2; margin-top: 26vh; }
.sp-fig--shelves { grid-column: 7 / 10;  grid-row: 2; margin-top: 40vh; }
.sp-fig--stone   { grid-column: 3 / 6;   grid-row: 3; margin-top: 16vh; }
.sp-fig--floor   { grid-column: 8 / 12;  grid-row: 3; margin-top: 6vh; }
.sp-fig--hanging { grid-column: 1 / 4;   grid-row: 4; margin-top: 14vh; }
.sp-fig--dark    { grid-column: 5 / 9;   grid-row: 4; margin-top: 30vh; }
.sp-fig--niche   { grid-column: 10 / 13; grid-row: 4; margin-top: 10vh; }

/* making: the work on the table, loose like the outside, in two rows */
.sp-fig--hands   { grid-column: 1 / 8;   grid-row: 1; }
.sp-fig--bench   { grid-column: 9 / 13;  grid-row: 1; margin-top: 18vh; }
.sp-fig--wall    { grid-column: 2 / 5;   grid-row: 2; margin-top: 14vh; }
.sp-fig--drops   { grid-column: 7 / 10;  grid-row: 2; margin-top: 30vh; }

/* showing: the installation large, the desk over water low beside it */
.sp-fig--ice     { grid-column: 2 / 8;   grid-row: 1; }
/* tall 3:4 pictures never run taller than the window: their width is capped by that height */
.sp-fig--ice img, .sp-fig--library img, .sp-fig--drops img { max-width: calc((var(--frame-h) - 2 * var(--fade)) * .75); }
.sp-fig--desk    { grid-column: 9 / 12;  grid-row: 1; margin-top: 36vh; }

/* night: alone, like the pause in the rooms, and the way back into the forest under it */
.sp-walk--end    { grid-column: 1 / 13;  grid-row: 2; text-align: center; margin-top: 6vh !important; }

@media (max-width: 1100px) {
  .sp-statement { grid-column: 1 / 5; }
  .sp-text { grid-column: 6 / 11; }
}

/* ---------- phones: one column, pictures at varied widths and sides ---------- */
@media (max-width: 719px) {
  .sp-part { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 12px; row-gap: 40px; }
  .sp-part + .sp-part { margin-top: 112px; }
  .sp-part > * { grid-row: auto !important; margin-top: 0 !important; }
  .sp-fig--studio  { grid-column: 1 / 7; }
  .sp-fig--studio img { aspect-ratio: 4 / 3; max-height: none; }
  .sp-statement    { grid-column: 1 / 6; }
  .sp-fig--arch    { grid-column: 2 / 7; }
  .sp-fig--grasses { grid-column: 1 / 5; }
  .sp-fig--entrance { grid-column: 3 / 7; }
  .sp-text         { grid-column: 1 / 7; }
  .sp-fig--glass   { grid-column: 1 / 5; }

  .sp-fig--curtain, .sp-fig--night { grid-column: 1 / 7; }
  .sp-fig--curtain img, .sp-fig--night img { width: 100%; height: auto; }
  .sp-fig--ice img, .sp-fig--library img, .sp-fig--drops img { max-width: 100%; }
  .sp-fig--library { grid-column: 1 / 5; }
  .sp-fig--shelves { grid-column: 3 / 7; }
  .sp-fig--stone   { grid-column: 2 / 7; }
  .sp-fig--floor   { grid-column: 1 / 4; }
  .sp-fig--hanging { grid-column: 4 / 7; margin-top: 18vw !important; }
  .sp-fig--dark    { grid-column: 1 / 7; }
  .sp-fig--niche   { grid-column: 2 / 6; }

  .sp-fig--hands   { grid-column: 1 / 7; }
  .sp-fig--bench   { grid-column: 3 / 7; }
  .sp-fig--wall    { grid-column: 1 / 5; }
  .sp-fig--drops   { grid-column: 2 / 7; }

  .sp-fig--ice     { grid-column: 1 / 7; }
  .sp-fig--desk    { grid-column: 3 / 7; }
  .sp-walk--end    { grid-column: 1 / 7; text-align: left; margin-top: 0 !important; }
}

/* pictures fade up softly from the paper as they come into view (spaces.js adds .sp-reveal and .is-in) */
.sp-reveal .sp-fig, .sp-reveal .sp-statement, .sp-reveal .sp-text {
  opacity: 0; translate: 0 14px; transition: opacity 1.4s cubic-bezier(.2, .6, .3, 1), translate 1.4s cubic-bezier(.2, .6, .3, 1);
}
.sp-reveal .is-in { opacity: 1; translate: 0 0; }

/* arriving (from the forest walk's fade to paper, or any visit): the page resolves softly out of the paper */
.spaces-page .page-frame { animation: sp-arrive 1.1s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes sp-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spaces-page .page-frame { animation: none; } .sp-reveal .sp-fig, .sp-reveal .sp-statement, .sp-reveal .sp-text { opacity: 1; translate: none; transition: none; } }