/* MONDKIM — portfolio.html. Builds on base.css tokens (paper · ink · gutter · serif/sans · ease). */
:root{
  --head:calc(2*clamp(24px,3vw,40px) + clamp(116px,10.5vw,150px)*.16); /* height of .site-header */
  --col-gap:clamp(16px,2vw,32px);
  --section:clamp(120px,15vw,232px);   /* rest between sections */
}
main{display:block;min-height:70vh;outline:0}
.empty{padding:var(--section) var(--gutter);color:var(--ink-2)}

/* ---------- First screen: one painting on a white wall ---------- */
.hero{--hero-h:clamp(380px,calc(100svh - var(--head) - clamp(56px,9vh,104px)),1240px);--art-w:min(calc(var(--hero-h)*var(--r,.8)),calc(100vw - 2*var(--gutter) - 2*clamp(24px,3vw,56px) - 2*clamp(215px,17vw,300px)));display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;column-gap:clamp(24px,3vw,56px);padding:clamp(0px,1.4vh,18px) var(--gutter) 0}
.hero-art{grid-column:2;grid-row:1;display:block;width:var(--art-w);cursor:zoom-in}
.hero-art img{display:block;width:100%;height:auto}
.js .hero img.fade{transition:opacity 1.2s var(--ease)}
.hero-cap{grid-column:1;grid-row:1;justify-self:start;margin:0;padding-bottom:2px}
/* the label names the series once, then the work: 01 of Rose in Flux, at the same scale as 02 and 03 below */
.hero-head{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(12px,1.4vw,20px)}
.hero-series{margin:0;font:400 var(--fs-xs)/1.7 var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2)}
.hero-head .hero-no{margin:0}
.hero-title{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1.1;letter-spacing:0;font-variant-numeric:lining-nums}
.hero-meta{margin:12px 0 0;font-size:13.5px;font-weight:400;color:var(--ink-2)}
/* meta lines break only at their middle dots; the dimension cross comes from the serif, light and in proportion */
.nb{white-space:nowrap}
.x{position:relative;top:-.04em;font-family:var(--serif);font-size:1.5em;line-height:0}
.hero-aside{grid-column:3;grid-row:1;justify-self:end;margin:0;padding-bottom:2px}
.js .hero .reveal{transition-delay:calc(var(--reveal-delay,0s) + .7s)}

/* ---------- Page head + tabs ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;padding:clamp(48px,6.4vw,104px) var(--gutter) clamp(40px,5vw,80px)}
.hero+.page-head{padding-top:var(--section)}
.page-title{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.3vw,64px);line-height:1;letter-spacing:-.005em;font-variant-numeric:lining-nums}
.page-head:has(.is-label){padding-bottom:clamp(28px,3.4vw,52px)}
.page-title.is-label{font-family:var(--sans);font-size:var(--fs-xs);font-weight:400;line-height:1.7;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2)}
.tabs{display:flex;flex-wrap:wrap;gap:0 clamp(4px,1vw,14px);margin:0 -8px -11px}
.tabs a,.hero-link,.feature-link,.feature-more button{position:relative;display:inline-block;padding:11px 0;font-size:var(--fs-s);color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.tabs a{padding:12px 8px;min-width:44px;text-align:center}
/* under the first work the series tabs are a thin index line, not the start of a new page */
.rose-tabs{padding:clamp(72px,8vw,128px) calc(var(--gutter) - 8px) clamp(48px,5vw,80px);margin:0}
.feature-more button{padding:13px 0}
.feature-link{padding:12px 0}
.hero-link,.feature-link,.feature-more button{color:var(--ink)}
.tabs a::after,.hero-link::after,.feature-link::after,.feature-more button::after{content:'';position:absolute;left:0;right:0;bottom:7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.tabs a::after{left:8px;right:8px;bottom:8px}
.feature-more button::after{bottom:9px}
.tabs a:hover,.tabs a[aria-current=page]{color:var(--ink)}
.tabs a:hover::after,.tabs a[aria-current=page]::after,.hero-link:hover::after,.feature-link:hover::after,.feature-more button:hover::after{transform:scaleX(1)}

/* ---------- Features: few works, shown large, alternating sides ---------- */
.features{display:flex;flex-direction:column;gap:clamp(112px,13vw,208px);padding:0 var(--gutter)}
.feature{--cap-h:calc(100svh - 112px);display:flex;align-items:flex-end;gap:clamp(32px,4.6vw,96px)}
.feature:nth-child(even){flex-direction:row-reverse}
.feature-art{flex:none;display:block;width:min(58%,calc(var(--cap-h)*var(--r,1)),calc(var(--nw,4000)*1.1px));cursor:zoom-in}
a.feature-art{cursor:pointer}
.feature-art img{display:block;width:100%;height:auto}
.feature-art:not([style]){width:58%}
.feature-art:not([style]) img{width:auto;max-width:100%;max-height:var(--cap-h)}
.feature.is-broken{flex-direction:row}
.feature.is-broken .feature-art{display:none}
.feature.is-broken .feature-cap{flex:0 1 min(40em,100%)}
.feature-cap{flex:0 1 25em;min-width:0;padding-bottom:2px}
.feature-no{display:block;margin-bottom:clamp(12px,1.4vw,20px);font-family:var(--serif);font-size:clamp(17px,1.3vw,20px);line-height:1.2;letter-spacing:.06em;color:var(--ink-2);font-variant-numeric:lining-nums}
.feature-title{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1.1;letter-spacing:0;font-variant-numeric:lining-nums}
.feature-title.ko{font-family:var(--sans);font-weight:300;font-size:clamp(20px,1.8vw,26px)}
.feature-title a{padding:.26em 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - .26em)/0 1px no-repeat;transition:background-size .7s var(--ease-out)}
.feature-title a:hover{background-size:100% 1px}
.feature-meta{margin:0;font-size:13.5px;font-weight:400;color:var(--ink-2)}
.feature-title+.feature-meta{margin-top:12px}
.feature-cap.is-lead{display:flex;flex-direction:column;align-items:flex-start}
.feature-cap.is-lead .feature-meta{order:-1;margin:0 0 12px}
.feature-text{margin:22px 0 0;max-width:26em;font-size:15px;line-height:1.95}
.feature-link{margin-top:12px}
.feature-more{margin:14px 0 0}
.feature-more button{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase}
.js .feature-art:hover img.fade.is-loaded,.js .tile-art:hover img.fade.is-loaded,.js .hero-art:hover img.fade.is-loaded{opacity:.93}
.js .feature-art img.fade,.js .tile-art img.fade{transition:opacity 1.2s var(--ease)}

/* Journal — text leads, a smaller picture answers on the right; a hairline marks each entry */
.journal{gap:clamp(80px,9vw,144px)}
.journal .feature,.journal .feature:nth-child(even){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start;padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--line)}
/* the text travels beside its picture; the picture reaches the same right edge as the nav and the rule */
.journal .feature-cap{grid-column:1/span 4;grid-row:1;position:sticky;top:clamp(40px,6vh,72px);align-self:start}
.journal .feature-art,.journal .feature-art:not([style]){grid-column:7/-1;grid-row:1;width:auto}

/* ---------- Groups and tiles ---------- */
.group{padding:0 var(--gutter);margin-top:var(--section)}
.group.is-broken{display:none}
.page-head+.group,.page-head+.archive-wrap,.page-head+.group.is-broken+.archive-wrap{margin-top:0}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-bottom:clamp(28px,3.4vw,56px)}
.group-title{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.3vw,34px);line-height:1.15;letter-spacing:0;font-variant-numeric:lining-nums}
.group-meta{margin:0;font-size:13.5px;font-weight:400;color:var(--ink-2)}
.tiles,.cols{padding:0 var(--gutter)}
.group .tiles,.group .cols{padding:0 0 var(--stagger)}
.tiles{--stagger:clamp(48px,7vw,128px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(56px,6vw,104px) clamp(20px,3vw,48px);align-items:start;padding-bottom:var(--stagger)}
.tiles>*{position:relative}
.tiles>:nth-child(3n+2){top:var(--stagger)}
/* Columns (House, Digital): one gap everywhere, across and down; even columns start a step lower */
.cols{--stagger:clamp(48px,7vw,128px);--col-space:clamp(28px,4.4vw,72px);display:flex;align-items:flex-start;gap:var(--col-space)}
.group .cols{padding:0}
.col{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--col-space)}
.col:nth-child(2n){margin-top:var(--stagger)}
.cols .tile-cap{padding-top:8px}
.tile{margin:0;min-width:0}
.tile.is-broken{display:none}
.tile-art{display:block;width:100%;cursor:zoom-in}
a.tile-art{cursor:pointer}
.tile-art img{display:block;width:100%;height:auto}
.tile-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding-top:14px;line-height:1.45}
.tile-cap.is-quiet{padding:0}
.tile-title,.tile-title.ko{font-family:var(--sans);font-size:var(--fs-m);font-weight:400;letter-spacing:.02em}
.tile-meta{font-size:var(--fs-s);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* Rose Vine Series — a staggered pair */
.vines{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.vines .pair{display:contents}
.vines .group-head{grid-column:8/span 5;grid-row:1;flex-direction:column;gap:6px}
.vines .tile:nth-child(1){grid-column:2/span 4;grid-row:1/span 2}
.vines .tile:nth-child(2){grid-column:8/span 4;grid-row:2;margin-top:clamp(40px,6vw,96px)}

/* ---------- House: one photograph of the house under the title, then room by room ---------- */
.page-head:has(+.house-intro){padding-bottom:clamp(32px,3.4vw,56px)}
.house-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end;padding:0 var(--gutter);margin-bottom:clamp(56px,6vw,96px)}
.house-lead{grid-column:1/span 8;display:block;width:min(100%,calc((100svh - var(--head) - 96px)*var(--r,1.5)))}
.house-lead img{display:block;width:100%;height:auto}
.exhibition-logo{display:block;width:min(100%,210px);height:auto;aspect-ratio:29/10;object-fit:cover;margin:0 0 18px -8px}
.house-text{grid-column:9/-1;padding-left:clamp(0px,2vw,32px);padding-bottom:2px;max-width:30em}
.house-text p{margin:0;font-size:16px;line-height:1.95}
.house-text .house-dates{margin-bottom:18px;font-size:var(--fs-s);color:var(--ink-2);letter-spacing:.04em}
.house-tabs{padding:0 calc(var(--gutter) - 8px);margin:0 0 clamp(48px,5vw,80px)}
.rooms{--col-space:clamp(28px,4.4vw,72px);padding:0 var(--gutter)}
.rooms .cols{--stagger:clamp(36px,4.4vw,72px);padding:0}
.room+.room{margin-top:calc(var(--section)*.6)}
.room-head{display:flex;align-items:flex-end;gap:var(--col-space);margin-bottom:var(--col-space)}
.room:nth-child(odd) .room-head{flex-direction:row-reverse}
.room-lead{flex:none;width:min(66%,calc((100svh - 220px)*var(--r,1.5)))}
.room-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--col-space)}
.room:nth-child(even) .room-side{align-items:flex-end;text-align:right}
.room-side .tile{width:min(100%,calc((100% + var(--col-space))*.62))}
.room-label{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.3vw,34px);line-height:1.15;letter-spacing:0}
.room-side .room-label{order:2}
.room-lead:has(.tile.is-broken){display:none}

/* ---------- Archive index ---------- */
.archive-wrap{padding:0 var(--gutter);margin-top:var(--section)}
.archive-label{margin:0 0 16px;font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2)}
.archive{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--line)}
.archive a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--fs-s);letter-spacing:.06em;transition:color var(--t-fast) var(--ease)}
.archive a::after{content:'↗';flex:none;font-family:var(--sans);font-size:var(--fs-s);color:var(--ink-2);transition:transform .6s var(--ease-out),color var(--t-fast) var(--ease)}
.archive a:hover::after{color:var(--ink);transform:translate(2px,-2px)}
.years .archive{grid-template-columns:repeat(4,minmax(0,1fr))}
.years .archive a{min-height:72px;font-family:var(--serif);font-size:clamp(20px,1.7vw,26px);letter-spacing:0;font-variant-numeric:lining-nums}

/* ---------- About ---------- */
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding:0 var(--gutter)}
.artist-identity{grid-column:1/span 4}
.artist-identity h2{display:flex;flex-direction:column-reverse;margin:0;font-weight:300;font-size:15px;line-height:1.6;letter-spacing:.08em}
.artist-identity small{margin-bottom:14px;font-family:var(--serif);font-size:clamp(36px,3.8vw,56px);line-height:1;letter-spacing:.01em}
.bio{grid-column:6/span 6;max-width:36em}
.bio p{margin:0 0 1.6em;font-size:16px;line-height:2}
.signature{display:block;width:180px;height:auto;aspect-ratio:2/1;object-fit:cover;margin:8px 0 0 -14px}
.cv{padding:0 var(--gutter);margin-top:var(--section)}
.cv-section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding:22px 0 clamp(48px,5vw,80px);border-top:1px solid var(--line)}
.cv-section h3{grid-column:1/span 4;margin:0;font-size:var(--fs-s);font-weight:400;letter-spacing:.04em}
.cv-section>div{grid-column:6/span 7}
.cv-row{display:grid;grid-template-columns:7em minmax(0,1fr);gap:0 24px;padding-bottom:14px;line-height:1.85}
.cv-row>span{color:var(--ink-2);font-variant-numeric:tabular-nums}
.cv-row a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease-out)}
.cv-row a:hover{background-size:100% 1px}

/* ---------- Edge rose motion: one faint ink petal per side, in the empty outer margin, wide screens only ---------- */
.edge-motion,.edge-motion-toggle{display:none}
.edge-motion-toggle{min-height:44px;font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap;transition:color var(--t-fast) var(--ease)}
.edge-motion-toggle:hover{color:var(--ink)}
@media(min-width:1440px) and (prefers-reduced-motion:no-preference){
  .edge-motion{display:block;position:fixed;inset:0;z-index:1;pointer-events:none}
  .edge-lane{position:absolute;top:0;bottom:0;width:var(--gutter);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent)}
  .edge-lane--left{left:0}.edge-lane--right{right:0}
  .edge-petal{--petal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath d='M10 30C4 25 0 18 1 11 2 5 6 1 9 3c.5.4.8.4 1.2 0C13 0 18 3 19 10c1 8-3 15-9 20Z'/%3E%3C/svg%3E");position:absolute;top:-40px;left:calc(50% - 9px);width:18px;height:27px;background:radial-gradient(120% 90% at 50% 88%,var(--ink) 0 30%,rgba(20,20,20,.4) 70%,transparent 100%);-webkit-mask:var(--petal) center/contain no-repeat;mask:var(--petal) center/contain no-repeat;opacity:0;animation:petal-fall 82s linear infinite;will-change:transform}
  /* the first glance is clean: nothing falls until the visitor has been looking for a while */
  .petal-1{animation-delay:14s}
  .petal-2{width:15px;height:23px;left:calc(50% - 7px);animation-duration:91s;animation-delay:44s}
  .edge-motion{transition:opacity 1.6s var(--ease)}
  .hero-in-view .edge-motion{opacity:0}
  .edge-motion-toggle{display:inline-block}
}
.art-motion-paused .edge-petal,.motion-hidden .edge-petal{animation-play-state:paused}
/* the petal falls through ~60% of its cycle, then rests unseen — so each side shows at most one at a time */
@keyframes petal-fall{0%{transform:translate3d(-4px,0,0) rotate(-24deg);opacity:0}7%{opacity:.12}30%{transform:translate3d(7px,56vh,0) rotate(48deg)}52%{opacity:.1}60%,100%{transform:translate3d(-3px,112vh,0) rotate(118deg);opacity:0}}

/* ---------- Wide screens ---------- */
@media(min-width:861px){
  /* the wall label sits beside its work, bottom-aligned with the canvas */
  .hero-cap{justify-self:end;text-align:right}
  .hero-head{justify-content:flex-end}
  .hero-aside{justify-self:start}
  .hero-link{padding:24px 0 0}
  .hero-link::after{bottom:-3px}
}

/* ---------- Tablets and phones ---------- */
@media(max-width:1100px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles>:nth-child(n){top:0}
  .tiles>:nth-child(2n){top:var(--stagger)}
  .years .archive{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
  :root{--section:clamp(96px,22vw,144px);--head:calc(2*clamp(24px,3vw,40px) + 44px)}
  /* the header stays within reach: it steps aside while reading down and returns on the first move up (portfolio.js) */
  .site-header{position:sticky;top:0;background:var(--paper);transition:transform .5s var(--ease)}
  html.head-up .site-header{transform:translateY(-100%)}
  html.menu-open .site-header{transform:none;transition:none}
  /* the work is centred, its label hangs from its left edge, and label and link stay on the first screen */
  .hero{--art-w:min(100%,calc((100svh - var(--head) - 150px)*var(--r,.8)));display:flex;flex-direction:column;align-items:center;padding-top:0}
  .hero-art,.hero-cap,.hero-aside{width:var(--art-w)}
  .hero-cap{margin-top:18px}
  .hero-aside{margin-top:2px}
  .hero-title{font-size:clamp(26px,7vw,32px)}
  .hero-meta{margin-top:8px}
  .rose-tabs{padding-top:clamp(64px,18vw,96px);padding-bottom:clamp(36px,10vw,56px)}
  .site-footer{font-size:var(--fs-s)}
  .tabs a{font-weight:400}
  .feature-more button{font-size:12px;font-weight:400}
  .hero-link{padding:12px 0;color:var(--ink-2)}
  .page-head{display:block;padding:clamp(40px,12vw,64px) var(--gutter) clamp(36px,10vw,56px)}
  .page-head .tabs{margin-top:18px}
  .features{gap:clamp(88px,22vw,128px)}
  .feature,.feature:nth-child(even){--cap-h:calc(100svh - 150px);flex-direction:column;align-items:flex-start;gap:18px}
  .feature-art,.feature-art:not([style]){width:min(100%,calc(var(--cap-h)*var(--r,1)))}
  .feature:nth-child(even){align-items:flex-end}
  .feature-cap,.feature.is-broken .feature-cap{flex:none;width:100%}
  .feature:nth-child(even) .feature-art{width:min(84%,calc(var(--cap-h)*var(--r,1)))}
  .feature:nth-child(even) .feature-cap{width:84%}
  /* a landscape work keeps the full width: the step is for portrait works only */
  .feature.is-wide .feature-art,.feature.is-wide:nth-child(even) .feature-art{width:100%}
  .feature.is-wide .feature-cap,.feature.is-wide:nth-child(even) .feature-cap{width:100%}
  .feature.is-broken{flex-direction:column}
  .feature-title{font-size:clamp(26px,7vw,32px)}
  .feature-title+.feature-meta{margin-top:8px}
  .feature-text{margin-top:16px}
  .tiles,.cols{--stagger:clamp(32px,10vw,56px)}
  .tiles{gap:40px 14px}
  .cols{--col-space:clamp(24px,7vw,40px)}
  .tile-cap{padding-top:10px}
  /* the scrolls are works: one per row, large enough to read, stepping left then right */
  .vines{grid-template-columns:minmax(0,1fr)}
  .vines .group-head{grid-column:1;grid-row:1;flex-direction:row;gap:4px 14px}
  .vines .tile:nth-child(1){grid-column:1;grid-row:2;width:84%}
  .vines .tile:nth-child(2){grid-column:1;grid-row:3;width:84%;justify-self:end;margin-top:56px}
  .journal .feature,.journal .feature:nth-child(even){grid-template-columns:repeat(6,minmax(0,1fr));row-gap:28px;align-items:start}
  .journal .feature-cap,.journal .feature:nth-child(even) .feature-cap{grid-column:1/-1;grid-row:1;width:auto;position:static}
  .journal .feature-art,.journal .feature-art:not([style]),.journal .feature:nth-child(even) .feature-art{grid-column:2/-1;grid-row:2;width:auto}
  .house-intro,.intro{display:block}
  .house-lead{width:100%;margin-bottom:32px}
  .house-text{padding:0}
  .exhibition-logo{width:190px;margin-bottom:16px}
  .room-head,.room:nth-child(odd) .room-head{flex-direction:column;align-items:stretch;gap:0}
  .room-side{display:contents}
  .room-label{order:0;margin-bottom:16px;font-size:clamp(24px,6.6vw,30px)}
  .room-side .room-label{order:0}
  .room:nth-child(even) .room-side{text-align:left}
  .room-lead{order:1;width:100%}
  .room-side .tile{order:2;align-self:flex-end;width:calc(50% - var(--col-space)/2);margin-top:var(--col-space)}
  .house-text p,.bio p{font-size:15px}
  .artist-identity{margin-bottom:40px}
  .cv-section{display:block;padding-top:20px}
  .cv-section h3{margin-bottom:20px}
  .cv-row{grid-template-columns:5.6em minmax(0,1fr);gap:0 14px;font-size:var(--fs-m)}
  .archive{grid-template-columns:1fr}
  .site-footer a:not(.brand){display:inline-flex;align-items:center;min-height:44px;padding:0}
  .cv-row a{display:inline-block;padding:11px 0;background-position:0 calc(100% - 11px)}
  .years .archive{grid-template-columns:repeat(2,minmax(0,1fr))}
  .years .archive a{min-height:72px}
}
/* tablets upright: a little more room under the work, so label and link are on the first screen with it */
@media(min-width:600px) and (max-width:860px){
  .hero{--art-w:min(100%,calc((100svh - var(--head) - 240px)*var(--r,.8)))}
}
/* phones: the footer ends on two even lines — name and ©, then the two ways to reach the artist */
@media(max-width:600px){
  .site-footer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 24px}
  .site-footer .brand{grid-row:1;grid-column:1}
  .site-footer .push{grid-row:1;grid-column:2;justify-self:end;margin:0}
  .site-footer a[href^="mailto"]{grid-row:2;grid-column:1}
  .site-footer a[href*="instagram"]{grid-row:2;grid-column:2;justify-self:start}
}

/* ---------- Phones turned sideways: the work fills the height below the header, label and link beside it ---------- */
@media(orientation:landscape) and (max-height:520px) and (max-width:1100px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;column-gap:28px;padding-top:0}
  .hero-art{grid-column:2;grid-row:1;width:min(60vw,calc((100svh - 2*clamp(24px,3vw,40px) - 44px - 14px)*var(--r,.8)))}
  .hero-cap{grid-column:1;grid-row:1;justify-self:end;text-align:right;margin:0;width:auto}
  .hero-head{justify-content:flex-end}
  .hero-title{font-size:clamp(22px,3vw,28px)}
  .hero-aside{grid-column:3;grid-row:1;justify-self:start;margin:0;width:auto}
  .hero-link{padding:24px 0 0}
  .hero-link::after{bottom:-3px}
  .feature,.feature:nth-child(even){--cap-h:calc(100svh - 40px)}
}

/* Phones: the eight House rooms sit in two even rows of four instead of leaving two on a second line */
@media(max-width:600px){.house-tabs{display:grid;grid-template-columns:repeat(4,auto);justify-content:start}.house-tabs a{justify-self:start;text-align:left}}