/* project page: captions above media, subproject sections, private gate */
.slides .blk { margin: 0; }
.slides .blk.has-cap { margin-top: clamp(48px, 7vw, 96px); }
.slides .blk:first-child.has-cap, .sub-head + .blk.has-cap { margin-top: 0; }
.cap { font-size: 16px; line-height: 1.5; max-width: 34em; margin-bottom: 22px; }
.cap p { margin-bottom: 0.8em; }
.cap p:last-child { margin-bottom: 0; }

.sub { margin-top: clamp(64px, 9vw, 120px); }
.sub:first-child { margin-top: 0; }
.sub-head { margin-bottom: 28px; }
.sub-head h2 { font: 400 clamp(34px, 3.6vw, 52px)/1 var(--display); letter-spacing: -0.04em; }
.sub-desc { margin-top: 16px; font-size: 16px; line-height: 1.5; max-width: 34em; }
.sub-desc p { margin-bottom: 0.8em; }
.sub-lock { font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }

.subnav { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin: 0 0 26px; }
.subnav a { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; transition: color .2s; }
.subnav a:hover { color: var(--pink); }
.lk { color: var(--muted); font-size: inherit; }

/* buttons: Nohemi sits low in its line box; trim it to the cap height so labels are truly centered */
.sq { line-height: 1; }
@supports (text-box: trim-both cap alphabetic) { .sq { text-box: trim-both cap alphabetic; } }
@supports not (text-box: trim-both cap alphabetic) { .sq { padding-bottom: 2px; } }
.info-actions { gap: 10px; }
.info-actions .sq { height: 44px; padding: 0 20px; font-size: 14px; }

/* password form (right column of a project page, and inside the window) */
.gate { border: 1px solid var(--line); border-radius: calc(var(--r) * 2); padding: 20px; margin: 0 0 26px; background: #0a0a0a; }
.gate-head { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--muted); margin-bottom: 16px; }
.gate-head .gate-ic { flex: none; width: 36px; height: 36px; margin-top: -2px; }
.gate-ic { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--fg); border-radius: 999px; color: var(--fg); }
.gate-ic svg { width: 18px; height: 18px; }
.gate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.gate-row input {
  height: 48px; min-width: 0; padding: 0 16px; font: inherit; font-size: 15px; line-height: 1;
  background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s;
}
.gate-row input::placeholder { color: var(--muted); }
.gate-row input:hover { border-color: var(--muted); }
.gate-row input:focus { outline: none; border-color: var(--fg); }
.sq.sq-unlock { height: 48px; padding: 0 22px; font-size: 15px; font-weight: 500; background: var(--fg); color: var(--bg); border-color: var(--fg); }
.sq.sq-unlock:hover { background: transparent; color: var(--fg); }
.sq.sq-unlock.is-busy { opacity: .6; cursor: progress; }
.gate-err { min-height: 1.2em; font-size: 13px; color: var(--fg); margin: 10px 0 0; }
.gate-err:empty { min-height: 0; margin: 0; }
.shake { animation: gate-shake .4s; }
@keyframes gate-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* password window */
.gate-modal { padding: 0; border: 0; background: transparent; color: var(--fg); max-width: calc(100vw - 32px); margin: auto; overflow: visible; }
.gate-modal::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gate-modal[open] { animation: gate-in .35s var(--ease, ease) both; }
@keyframes gate-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.gate-box { position: relative; width: min(440px, calc(100vw - 32px)); padding: 36px 32px 30px; background: var(--bg); border: 1px solid var(--fg); border-radius: calc(var(--r) * 2); text-align: center; }
.gate-box .gate-ic { width: 52px; height: 52px; margin-bottom: 18px; }
.gate-box .gate-ic svg { width: 22px; height: 22px; }
.gate-title { font: 400 clamp(28px, 3vw, 36px)/1 var(--display); letter-spacing: -0.035em; margin-bottom: 10px; }
.gate-text { font-size: 15px; line-height: 1.45; color: var(--muted); margin: 0 auto 22px; max-width: 26em; }
.gate-box .gate-row { text-align: left; }
.gate-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; transition: color .2s, background .2s; }
.gate-x:hover { color: var(--fg); background: rgba(240, 242, 215, .08); }
@media (max-width: 480px) { .gate-box { padding: 32px 20px 24px; } .gate-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gate-modal[open], .shake { animation: none; } }

/* private work: only the cover, with a lock badge */
.pcard-img { position: relative; }
.lock-badge {
  position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px 0 10px; font-size: 12px; font-weight: 500; line-height: 1; color: var(--fg);
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(240, 242, 215, .35); border-radius: 999px; transition: background .25s, color .25s;
}
.lock-badge svg { width: 15px; height: 15px; flex: none; }
.is-locked:hover .lock-badge { background: var(--fg); color: var(--bg); }
.locked-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--fg); border-radius: var(--r); overflow: hidden; background: var(--shade); cursor: pointer; }
.locked-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease, ease); }
.locked-cover:hover img { transform: scale(1.02); }
.locked-cover .lock-badge { top: 50%; left: 50%; transform: translate(-50%, -50%); height: 44px; padding: 0 18px 0 14px; font-size: 14px; }
.locked-cover:hover .lock-badge { background: var(--fg); color: var(--bg); }

/* project with subprojects: cards like the Index, one per subproject */
.slides.is-hub .sub-cards { margin-bottom: clamp(48px, 7vw, 96px); }
.slides.is-hub .sub-cards:last-child { margin-bottom: 0; }
.pcard-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 13px; color: var(--muted); }
.pcard.is-locked .pcard-img { background: var(--shade); }
.kicker { font-size: 13px; color: var(--muted); margin-bottom: 10px; }

/* desktop: the work gets the room, the info column stays slim (long tag lists just wrap) */
@media (min-width: 901px) {
  .project { grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 400px); }
  .slides.is-hub .sub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.slides.is-hub .pcard-title { font-size: clamp(22px, 2vw, 30px); }
.specs dd { overflow-wrap: anywhere; }

/* vertical media (9:16 reels, stories): side by side, each fits the screen from top to bottom (desktop) */
.vrow { display: contents; } /* phones and tablets: one under the other, as before */
.blk.is-tall img, .blk.is-tall video { aspect-ratio: var(--ar); object-fit: cover; }
@media (min-width: 901px) {
  .vrow {
    --fit: calc(100svh - var(--header) - 2 * var(--g));
    display: flex; justify-content: center; align-items: flex-start; gap: 16px; margin: 16px 0;
  }
  .vrow:first-child { margin-top: 0; }
  .vrow:last-child { margin-bottom: 0; }
  /* share the row equally, but never wider than what keeps the whole video on screen */
  .vrow > .blk { flex: 1 1 0; min-width: 0; max-width: calc(var(--fit) * var(--arn)); margin: 0; }
  .vrow > .blk.has-cap { margin-top: 0; }
}
.vwrap { position: relative; }
.vwrap video { display: block; cursor: pointer; }
.play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--fg);
  transition: opacity .3s, transform .3s var(--ease, ease);
}
.play svg { width: clamp(56px, 5.5vw, 84px); height: auto; filter: drop-shadow(0 2px 12px rgba(0,0,0,.35)); transition: transform .3s var(--ease, ease); }
.play:hover svg { transform: scale(1.08); }
.play:focus-visible { outline: none; }
.play:focus-visible svg { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 999px; }
.is-playing .play { opacity: 0; pointer-events: none; }

/* PDF (a PDF's first page, or any image with a PDF attached): the image opens it; a button sits right under the image */
.pdf-link { display: block; cursor: zoom-in; }
.pdf-link img { display: block; }
.pdf-open {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; margin: 12px 0 4px;
  font-size: 14px; font-weight: 500; line-height: 1; color: var(--bg); background: var(--fg);
  border: 1px solid var(--fg); border-radius: var(--r); transition: background .2s, color .2s;
}
@supports (text-box: trim-both cap alphabetic) { .pdf-open { text-box: trim-both cap alphabetic; } }
.pdf-open:hover { background: var(--bg); color: var(--fg); }
.pdf-open:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* subproject cards: the image fills its frame and is cropped evenly around the center
   (the page's media rule, natural height, otherwise cut it off at the bottom) */
.slides .pcard-img img, .slides .locked-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- phones: bigger small text and bigger tap areas ----------
   a tap area is added with padding and cancelled with a negative margin, so the spacing stays exactly the same */
@media (max-width: 760px) {
  .pill { font-size: 13px; }
  .pill.sm { font-size: 13px; height: 28px; }
  .count, .box-head, .help-label, .back, .next small, .kicker, .pcard-ph, .contact-top, .contact-msg, .gate-err { font-size: 14px; }
  .pcard-foot, .field > span, .field legend, .footer-base, .table th, .slide-counter, .lock-badge { font-size: 13px; }
  .lock-badge { font-size: 13px; }
  .sq { min-height: 44px; }
  .logo { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .back { padding: 12px 0; margin-top: -12px; margin-bottom: 14px; }
  .footer-cta a, .footer-links a { display: inline-block; padding: 9px 0; margin: -9px 0; }
  .footer-base a { display: inline-block; padding: 13px 0; margin: -13px 0; }
  .card-title-link { display: inline-block; padding: 7px 0; margin: -7px 0; }
}