/* Shared layout safeguards: retain the existing grids and visual hierarchy. */
body{overflow-wrap:break-word}
main,section,article,figure,form,.hero>*,.course-hero>*,.brief-layout>*,.example>*,.team-grid>*,.light-map>*,.section-heading>*,.purchase-offer>*,.prompt-section>*{min-width:0}
img,video,svg,input,textarea,select{max-width:100%}
pre,code,.reference a,.person-links a,.credits a{overflow-wrap:anywhere;word-break:normal}
pre{white-space:pre-wrap;max-width:100%}
.prompt-scroll{min-width:0;max-width:100%;overflow-x:auto}
.copy-head{flex-wrap:wrap;gap:10px 12px}
.copy-head>span{min-width:0;overflow-wrap:anywhere}
.copy-head .copy{flex-shrink:0;max-width:100%}
.person-links,.hero-figure figcaption{flex-wrap:wrap}
.credits-person{white-space:normal}
.button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* Show the entire reference photograph, including shoes and product edges. */
.hero-figure img,.example figure img{height:auto;aspect-ratio:auto;object-fit:contain}
.hero-figure img{border-radius:8px}
.shot-list{width:100%;table-layout:fixed;border-collapse:collapse}
.shot-list th,.shot-list td{overflow-wrap:anywhere}
@media(max-width:740px){
  .hero h1{font-size:clamp(2.4rem,11.5vw,3.3rem)}
  h2{overflow-wrap:anywhere}
  .course-hero .course-title{font-size:clamp(2.3rem,12.3vw,3rem)}
  .example-text h3{font-size:clamp(1.7rem,8.2vw,2.2rem)}
  .light-map h3{font-size:clamp(1.35rem,6.5vw,1.65rem)}
  .prompt-scroll{padding:18px}
}
@media(max-width:600px){
  .shot-list thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .shot-list,.shot-list tbody{display:block}
  .shot-list tr{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:8px;margin-block:16px;padding:6px 16px;background:var(--paper)}
  .shot-list td{display:block;padding:10px 0!important;border-bottom:1px solid var(--line)}
  .shot-list td:last-child{border-bottom:0!important}
  .shot-list td::before{content:attr(data-label);display:block;font-size:11px;font-weight:650;letter-spacing:.04em;margin-bottom:4px;color:var(--muted)}
}
@media(max-width:380px){
  .hero-action{padding:20px}
  .copy-head{padding:14px 16px}
}