/* OSS typography and palette sampled from onesmallstep.hk, 25 October 2026. */
@font-face{font-family:"OSS Playfair";src:url('/assets/fonts/oss-playfair-display.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"OSS Garamond";src:url('/assets/fonts/oss-eb-garamond.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"OSS Aboreto";src:url('/assets/fonts/oss-aboreto.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--oss-blue:#86b7c8;--oss-teal:#659ca3;--oss-aqua:#badcde;--oss-reading:#355e64}
#projects .about-oss{color:var(--oss-teal)}
#projects .about-oss .about-caption{font-family:"OSS Garamond",Georgia,serif;font-size:20px;letter-spacing:0;color:#4b7a80}
#projects .about-oss .about-arrow{font-family:Helvetica,Arial,sans-serif}
.step{background:var(--oss-aqua);color:var(--oss-reading);font-family:"OSS Garamond",Georgia,serif}
.step h2{font-family:"OSS Playfair",Georgia,serif;font-weight:400!important;letter-spacing:-.035em!important;font-size:clamp(38px,3.65vw,58px);line-height:1.1;color:#3e7077}
.step .brand-description{font-size:21px;line-height:1.35;letter-spacing:0;color:var(--oss-reading)}
.step .story-body,.cinematic .step .story-body{font-size:18px;line-height:1.45;letter-spacing:0;color:var(--oss-reading)}
.step-story .eyebrow,.cinematic .step-story .eyebrow{font-family:"OSS Aboreto",Georgia,serif;font-weight:400;letter-spacing:.11em;color:#3e7077}
.step .button-dark,.cinematic .step .button-dark{font-family:"OSS Aboreto",Georgia,serif;font-size:11px;font-weight:400;letter-spacing:.02em;background:#477a81;color:#fff}
.step .button-dark:hover,.cinematic .step .button-dark:hover{background:#355e64}
.step .chapter-next,.cinematic .step .chapter-next{font-family:"Avenir Next",Avenir,Helvetica,sans-serif;color:var(--oss-reading)}
@media(max-width:600px){.step h2{font-size:42px}.step .brand-description{font-size:20px}.step .story-body,.cinematic .step .story-body{font-size:18px}.step .button-dark{font-size:10px}#projects .about-oss .about-caption{font-size:19px}}

/* Each venue gets a landscape photograph, followed by its own introduction. */
.venue{display:flex;flex-direction:column;min-height:100svh;padding:82px 0 0}
.venue .step-photo{height:56svh;min-height:260px;max-height:680px;flex:none;width:100%}
.venue .step-photo img{object-position:50% 53%;filter:none}
.venue .step-story{padding:30px 8.3% 24px;display:flex;flex:1;justify-content:center}
.venue .venue-copy{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}
.venue .eyebrow{margin-bottom:12px;font-size:10px}
.venue h2{font-size:clamp(36px,3.7vw,56px);margin:0;line-height:1.05}
.venue h2 span{display:block;font-size:.6em;line-height:1.3;margin-top:5px;letter-spacing:-.02em}
.venue .brand-description{max-width:none;font-size:21px;margin:0 0 9px}
.venue .story-body{max-width:520px;font-size:18px;line-height:1.4;margin:0 0 15px}
.venue-link{display:inline-flex;align-items:center;gap:26px;min-height:36px;border-bottom:1px solid currentColor;font-family:"OSS Aboreto",Georgia,serif;font-size:10px;color:#355e64}
.venue-link span[aria-hidden]{font:18px Helvetica,Arial,sans-serif}
.venue-link:hover{opacity:.7}
.venue .chapter-next{margin:12px 0 0;align-self:flex-end;padding:6px 0;min-height:32px;font-size:10px}
.observatory{background:#ede2d1}
.observatory h2,.observatory .brand-description,.observatory .story-body,.cinematic .observatory .story-body,.observatory .eyebrow,.cinematic .observatory .eyebrow,.observatory .chapter-next,.cinematic .observatory .chapter-next,.observatory .venue-link{color:#695440}
@media(max-width:700px){
  .venue{padding-top:82px}
  .venue .step-photo{height:auto;min-height:0;max-height:none;aspect-ratio:1600/1010}
  .observatory .step-photo{aspect-ratio:1600/906}
  .venue .step-photo img{object-fit:contain}
  .venue .step-story{padding:28px 8% 26px;justify-content:flex-start}
  .venue .venue-copy{grid-template-columns:1fr;gap:22px}
  .venue h2{font-size:42px}
  .venue .eyebrow{font-size:9px;margin-bottom:11px}
  .venue .brand-description{font-size:20px;margin-bottom:10px}
  .venue .story-body,.cinematic .venue .story-body{font-size:18px;line-height:1.4;margin-bottom:12px}
  .venue .chapter-next{align-self:flex-start;margin-top:auto;padding-top:22px}
  .venue-link{min-height:44px}
}
@media(min-width:701px) and (max-height:760px){.venue .step-photo{height:48svh;min-height:230px}.venue .step-story{padding-top:24px}.venue h2{font-size:38px}.venue .brand-description{font-size:20px}.venue .story-body{font-size:17px}}
/* Preserve the complete venue view, including the play structures and floor. */
.venue .step-photo{height:56svh;min-height:260px;max-height:720px}
.venue .step-photo img{object-fit:contain;object-position:center}
@media(max-width:700px){.venue .step-photo{height:auto;min-height:0;max-height:none}}