/* shared base for all three directions */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { text-decoration: none; }

.placeholder-text, .ph-text, .ph { font-style: italic; opacity: 0.7; border-bottom: 1px dashed currentColor; padding-bottom: 1px; }
.back-to-picker { position: fixed; left: 18px; bottom: 18px; z-index: 60; padding: 10px 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; backdrop-filter: blur(8px); border: 1px solid; }

/* shared section frame */
.block { padding: 100px 32px; }
.section-head { max-width: 1180px; margin: 0 auto 56px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: end; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; gap: 12px; } .block { padding: 70px 24px; } }
.section-num { font-size: 78px; line-height: 0.8; font-weight: 400; }
.section-meta small { display: block; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; margin-bottom: 8px; }
.section-meta h2 { font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
.section-meta h2 em { font-style: italic; font-weight: 400; }

/* gallery */
.gal-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.gal-cell { padding: 4px; border: 1px solid currentColor; }
.gal-cell image-slot { width: 100%; height: 100%; display: block; }
.g1 { grid-column: span 7; aspect-ratio: 4/3; }
.g2 { grid-column: span 5; aspect-ratio: 4/5; grid-row: span 2; }
.g3 { grid-column: span 4; aspect-ratio: 1/1; }
.g4 { grid-column: span 3; aspect-ratio: 1/1; }
.g5 { grid-column: span 4; aspect-ratio: 4/3; }
.g6 { grid-column: span 8; aspect-ratio: 16/9; }
@media (max-width: 760px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } .g1,.g2,.g3,.g4,.g5,.g6 { grid-column: span 2; aspect-ratio: 4/3; grid-row: auto; } }

/* video tiles */
.vid-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 760px) { .vid-grid { grid-template-columns: 1fr; } }
.vid { aspect-ratio: 16/9; position: relative; display: grid; place-items: center; border: 1px solid currentColor; }
.vid .play { width: 64px; height: 64px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; }
.vid .play::after { content: ""; width: 0; height: 0; border-left: 14px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.vid .label { position: absolute; bottom: 14px; left: 16px; right: 16px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; display: flex; justify-content: space-between; }

/* timeline */
.tl-rail { max-width: 980px; margin: 0 auto; }
.tl-row { padding: 22px 0; border-bottom: 1px solid currentColor; display: grid; grid-template-columns: 110px 1fr; gap: 28px; align-items: baseline; }
.tl-row:last-child { border-bottom: 0; }
.tl-row .y { font-size: 22px; font-weight: 400; }
.tl-row h4 { font-weight: 500; font-size: 22px; margin: 0; }
.tl-row p { margin: 6px 0 0; line-height: 1.55; }
@media (max-width: 760px) { .tl-row { grid-template-columns: 1fr; gap: 6px; } }

/* service notify form */
.notify-form { display: flex; max-width: 480px; margin: 0 auto; border: 1px solid currentColor; }
.notify-form input { flex: 1; background: transparent; border: 0; outline: none; padding: 14px 18px; font: inherit; font-size: 14px; color: inherit; }
.notify-form button { border: 0; padding: 0 22px; font: inherit; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 600; cursor: pointer; }