/* HPAD v5: the inner pages. The same rhythm as the landing page: a full photograph, one line, photographs
   with one word. Built from _work/src/pages.py. */

.cover { position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; color: var(--ice); background: var(--aubergine); }
.cover-img { position: absolute; inset: 0; overflow: hidden; }
.cover-img > div { position: absolute; inset: -9% 0; }
.cover-img img { width: 100%; height: 100%; object-fit: cover; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 12, 24, .6), rgba(18, 12, 24, .05) 55%), linear-gradient(to bottom, rgba(18, 12, 24, .3), rgba(18, 12, 24, 0) 22%); pointer-events: none; }
.cover-words { position: absolute; left: 0; right: 0; bottom: clamp(40px, 9vh, 100px); z-index: 1; display: grid; gap: 14px; }
.cover-words .label { opacity: .85; }
.cover-words .h2 { max-width: 16ch; }
.cover-line { font-size: clamp(1.05rem, .9rem + .5vw, 1.4rem); font-weight: 300; max-width: 38ch; }
.cover-cap { position: absolute; right: var(--gut); top: calc(var(--hd-h) + 22px); z-index: 1; color: var(--ice); opacity: .85; }
.cover-mark { width: clamp(90px, 9vw, 140px); aspect-ratio: 1100 / 509; height: auto; color: var(--ice); margin-bottom: 10px; }
@media (max-width: 699px) { .cover-cap { top: auto; bottom: 14px; right: auto; left: var(--gut); opacity: .7; } .cover-words { bottom: 50px; } }

.plate { background: var(--ice); padding: clamp(10px, 2vw, 26px) 0; }
.plate-img { position: relative; height: 92vh; height: 92svh; min-height: 420px; overflow: hidden; }
.plate-narrow .plate-img { height: auto; aspect-ratio: 16 / 9; margin-inline: var(--gut); }
.plate-img > div { position: absolute; inset: -8% 0; }
.plate-img img { width: 100%; height: 100%; object-fit: cover; }
.plate-img figcaption { position: absolute; left: var(--gut); bottom: 20px; color: var(--ice); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

.line-block { background: var(--ice); color: var(--purple); padding: clamp(60px, 11vh, 130px) 0; }
.line-block .label { color: var(--grey); margin-bottom: 18px; }
.line-text { font-family: var(--sans); font-weight: 300; font-size: clamp(1.25rem, .85rem + 1.25vw, 2.05rem); line-height: 1.32; letter-spacing: -.01em; max-width: 34ch; }
.line-big .line-text { font-size: clamp(1.7rem, .8rem + 3vw, 4.2rem); line-height: 1.02; letter-spacing: -.04em; max-width: 22ch; }
.line-after { margin-top: 28px; }
.line-text a { border-bottom: 1px solid currentColor; }
[data-theme="purple"].line-block { background: var(--purple); color: var(--ice); }
[data-theme="purple"].line-block .label { color: rgba(244, 249, 253, .6); }
[data-theme="hpar"].line-block, [data-theme="hpar"].pair { background: var(--aubergine); color: var(--ice); }
[data-theme="hpar"].line-block .label, [data-theme="hpar"] figcaption { color: rgba(244, 249, 253, .7); }
[data-theme="hpac"].line-block, [data-theme="hpac"].pair { background: var(--cream); color: var(--plum); --btn-bg: var(--plum); --btn-ink: var(--cream); --btn-hover: var(--deep-plum); }
[data-theme="hpac"].line-block .label, [data-theme="hpac"] figcaption { color: var(--mauve); }
[data-theme="hpar"].line-block .btn-fill { --btn-bg: var(--ice); --btn-ink: var(--aubergine); --btn-hover: #fff; }

.pair, .trio { background: var(--ice); padding: clamp(10px, 2vw, 26px) 0; }
.pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); }
.trio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); }
.pair-grid figure, .trio-grid figure { position: relative; overflow: hidden; background: #e4e5ea; aspect-ratio: 4 / 3; }
.pair-grid.pair-whole figure { aspect-ratio: auto; background: var(--ice); }
.pair-grid.pair-whole figure > div { position: static; inset: auto; }
.pair-grid.pair-whole img { height: auto; object-fit: contain; }
/* works shown whole hang like a gallery wall: same height, captions on one line */
.pair-grid.pair-whole { align-items: end; }
.pair-grid.pair-whole img { width: 100%; height: clamp(300px, 56vh, 620px); }
.pair-grid.pair-whole figcaption { color: var(--grey); text-shadow: none; position: static; padding-top: 10px; }
.trio-grid figure { aspect-ratio: 3 / 4; }
.pair-grid figure > div, .trio-grid figure > div { position: absolute; inset: -8% 0; }
.pair-grid img, .trio-grid img { width: 100%; height: 100%; object-fit: cover; }
.pair-grid figcaption, .trio-grid figcaption { position: absolute; left: 14px; bottom: 12px; color: var(--ice); text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
@media (max-width: 699px) { .pair-grid, .trio-grid { grid-template-columns: 1fr; } .plate-img { height: 70svh; } .plate-narrow .plate-img { aspect-ratio: 4 / 3; } }

/* departments page */
.dept-page { background: var(--ice); padding-top: clamp(70px, 12vh, 140px); }
.dept-head { display: grid; gap: 12px; justify-items: start; margin-bottom: clamp(26px, 4vh, 44px); }
.dept-head .dept-art { width: 56px; }
/* on a laptop the department's pictogram draws itself large in the right half */
@media (min-width: 900px) {
  .dept-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 6vw; align-items: center; }
  .dept-head > :not(.dept-art) { grid-column: 1; }
  .dept-head .dept-art { grid-column: 2; grid-row: 1 / span 3; width: clamp(150px, 15vw, 250px); justify-self: end; }
}
.dept-head .label { color: var(--grey); }
.dept-line { max-width: 38ch; font-weight: 300; font-size: clamp(1.05rem, .9rem + .5vw, 1.4rem); }
.dept-hero { position: relative; height: 90vh; height: 90svh; min-height: 420px; overflow: hidden; }
.dept-hero > div { position: absolute; inset: -8% 0; }
.dept-hero img { width: 100%; height: 100%; object-fit: cover; }
.dept-pair { padding-top: clamp(14px, 1.8vw, 28px); }
.dept-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: clamp(26px, 4vh, 44px); padding-bottom: clamp(30px, 5vh, 60px); }
.link-arrow { display: inline-flex; align-items: center; gap: .5em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-arrow::after { content: ""; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.work-all { margin-left: 18px; }
@media (max-width: 699px) { .dept-hero { height: 62svh; } }

/* founder on the Hiren page */
.founder-page { min-height: 80vh; }

/* contact */
.contact-block { background: var(--ice); color: var(--purple); padding: clamp(60px, 10vh, 120px) 0; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vh, 60px) clamp(30px, 5vw, 90px); }
.contact-grid .label { color: var(--grey); margin-bottom: 10px; }
.contact-big { font-family: var(--mono); text-transform: uppercase; font-size: clamp(1.1rem, .8rem + 1vw, 1.8rem); letter-spacing: -.02em; line-height: 1.15; word-break: break-word; }
.contact-big a { border-bottom: 1px solid rgba(73, 61, 81, .35); }
.contact-big a:hover { border-bottom-color: var(--purple); }
.contact-addr { margin-top: 10px; font-weight: 300; color: var(--grey); }
.contact-ig { margin-top: 10px; }
.contact-ig a { border-bottom: 1px solid rgba(73, 61, 81, .35); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: clamp(40px, 7vh, 80px); }
@media (max-width: 699px) { .contact-grid { grid-template-columns: 1fr; } }

/* realty and construction pages reuse the landing sections */
.cover-realty { background: var(--aubergine); }
.hpac-page .hpac-head { padding-top: calc(var(--hd-h) + 10vh); }
.worlds-page .world:first-child { margin-top: 0; }

/* QC round 2: on a phone the drawings sit at their own height, caption right under */
@media (max-width: 699px) { .pair-grid.pair-whole img { height: auto; } }