/* Community: slate, bronze and paper, with no burgundy surfaces. */

/* Keep the stage portrait inside the bounded desktop column on wide monitors.
   The former edge-to-edge negative margin widened the crop until his face disappeared. */
@media(min-width:801px){
  .hero-visual{margin-right:0}
  .hero-visual>img{object-position:50% 0;transform-origin:50% 0;animation-name:opening-portrait-depth}
}
@keyframes opening-portrait-depth{from{transform:scale(1.015) rotateY(-1deg)}to{transform:scale(1.045) rotateY(1deg)}}
body[data-page="community"]{--wine:#36535b;--ink:#202c30}
.community-hero{background:radial-gradient(ellipse at 85% 15%,#455b60,#23363e 70%)}
.community-hero .page-heading>p:not(.eyebrow){color:#d7e1dd}
.community-hero figure img{box-shadow:18px 18px 0 #b5915633}
.community-hero figcaption{color:#c6d4cf}
body[data-page="community"] .simple-invitation{background:#2d4349}
body[data-page="community"] .simple-invitation p{color:#d4dfda}
body[data-page="community"] .story-card .eyebrow{color:#36535b}
body[data-page="community"] .cause-feature{background:linear-gradient(125deg,#2b3c40,#222e35)}
body[data-page="community"] .btn:not(.gold):not(.outline):not(.light-outline):hover{background:#43666f}

/* Shared phone and tablet layout. The same URLs adapt to each screen. */
.wrap>*{min-width:0}
main h1,main h2,main h3{overflow-wrap:break-word}
@media(max-width:800px){
  html{scroll-padding-top:24px}
  .nav-toggle{min-width:64px;min-height:46px;font-size:1rem}
  .nav-links{max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 24px}
  .nav-links a,.nav-more summary{min-height:48px;font-size:1rem}
  .nav-links .more-menu a{font-size:1rem;white-space:normal}
  .nav-links .btn{font-size:1rem;padding:14px}
  .btn{font-size:1rem;min-height:48px;max-width:100%;gap:16px}
  .text-link,.book-availability-link{font-size:1rem;min-height:44px;align-items:center;overflow-wrap:anywhere}
  .all-pages-footer a,.all-pages-footer button{font-size:1rem;min-height:44px;display:inline-flex;align-items:center}
  .all-pages-footer>div{gap:5px}
  .all-pages-footer strong{font-size:.875rem;margin-bottom:12px}
  .all-pages-footer .page-motion-control{white-space:normal}
  .signup-form input[type=email],.demo-form input,.demo-form select,.demo-form textarea,.demo-input{font-size:1rem;min-height:48px}
  .signup-form label,.signup-form .consent,.demo-form label,.updates-signup fieldset label,.updates-signup legend{font-size:1rem}
  .signup-form .consent{align-items:flex-start;padding:10px 0}
  .signup-form .consent input{width:22px;height:22px;margin:0;flex:none}
  .updates-signup fieldset label{min-height:44px;margin-bottom:4px}
  .updates-signup fieldset input{width:22px;height:22px}
  .story-card p,.world-card p,.book-people p,.history-novel-inner p,.watch-copy>p,.timeline-layout p{font-size:1rem}
  .preview-note,.source-link,.art-note,.book-note,.form-message,.filter-status,.demo-banner,.demo-chip{font-size:.875rem}
  .book-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:12px 16px;border-radius:18px;width:min(100%,390px);bottom:42px}
  .book-controls label{font-size:.875rem}
  .book-controls input{grid-column:1;grid-row:2;width:100%;height:28px;min-width:0;margin:0}
  .book-controls button{grid-column:2;grid-row:1/3;min-height:48px;padding:10px 14px;font-size:.875rem}
  .book-stage{height:550px}
  .book-canvas{height:420px}
  .book-note{bottom:5px}
  .book-chapters a{min-height:44px;display:flex;align-items:center;font-size:1rem}
  .book-place-tabs button{min-height:56px;font-size:1rem}
  .reading-paper-top{font-size:.75rem;letter-spacing:.04em;flex-wrap:wrap;gap:7px}
  .reading-end{font-size:.75rem;letter-spacing:.08em}
  .dialog-close{height:48px;width:48px}
  dialog{max-height:calc(100dvh - 24px);width:calc(100% - 24px)}
  .dialog-text{padding:38px 24px 32px}
  .watch-filters button{min-height:48px;font-size:1rem}
  .watch-actions{flex-wrap:wrap}
  .watch-actions .text-link,.watch-actions .source-link{font-size:.94rem}
  .community-hero figure{transform:none}
  .community-hero figure img{box-shadow:8px 8px 0 #b5915633}
  .community-hero figcaption{font-size:.875rem}
}
@media(max-width:600px){
  .wrap{width:calc(100% - 36px)}
  .hero-visual{margin-left:-18px;margin-right:-18px}
  .hero-copy h1,.music-page-grid h1,.history-hero-copy h1{font-size:clamp(3.1rem,11.6vw,4.6rem)}
  .page-heading h1,.order-page .page-heading h1{font-size:clamp(3rem,11vw,4rem)}
  .book-copy h1,.book-copy h2{font-size:clamp(3.15rem,11.7vw,4rem)}
  .hero-copy{padding:35px 0}
  .hero-actions{gap:14px 20px}
  .book-copy .hero-actions,.book-end .hero-actions{align-items:stretch}
  .book-copy .hero-actions>.btn{flex:1 1 200px}
  .hero-book-announcement{gap:12px;padding:14px 12px}
  .hero-book-announcement strong{font-size:1.65rem}
  .hero-book-announcement small{font-size:.75rem;letter-spacing:.05em}
  .hero-book-announcement em{font-size:.875rem}
  .hero-book-announcement .announcement-arrow{display:none}
  .book-stage{height:510px}
  .book-canvas{height:380px}
  .world-grid,.story-grid,.book-people{grid-template-columns:1fr}
  .world-card:first-child,.story-card:first-child{grid-column:auto}
  .world-card figure,.world-card:first-child figure{aspect-ratio:1.4}
  .world-card h3{font-size:2rem}
  .world-grid{gap:36px}
  .story-card .story-image,.story-card:first-child .story-image{height:280px}
  .book-place-panel{padding:25px 22px}
  .book-place-panel h3{font-size:2.3rem}
  .book-people{gap:25px}
  .book-people article{padding-bottom:20px;border-bottom:1px solid #d1c3ad77}
  .reading-paper{padding:28px 22px}
  .reading-text p{font-size:1.0625rem;line-height:1.8}
  .book-chapters>.wrap{gap:4px 14px}
  .history-novel-inner{grid-template-columns:1fr;text-align:left;gap:22px}
  .history-novel-inner img{height:290px}
  .history-novel-inner h3{font-size:2.8rem}
  .panorama-copy{left:22px;right:22px}
  .panorama-copy h2{font-size:clamp(2.8rem,10vw,3.4rem)}
  .panorama-copy .eyebrow{font-size:.75rem}
  .panorama-credit{left:22px;right:22px;font-size:.75rem}
  .signup-row{flex-direction:column;gap:10px}
  .signup-form input[type=email]{border-right:1px solid #b7a999}
  .signup-row .btn{width:100%}
  .field-pair{grid-template-columns:1fr;gap:0}
  .example-note h2{font-size:clamp(2rem,9.6vw,3rem)}
  .all-pages-footer{grid-template-columns:1fr 1fr;gap:24px 20px}
  .contact-demo,.studio-editor,.updates-signup{padding:23px 20px}
  .studio-editor-top{align-items:flex-start;flex-direction:column}
  .studio-editor-actions .btn{width:100%}
  .studio-choices strong{font-size:1rem}
  .studio-choices small{font-size:.875rem}
  .studio-page h1{font-size:clamp(2.8rem,10vw,3.4rem)}
  .record-grid h3{font-size:3rem}
  .timeline-layout h2,.music-video-intro h2{font-size:3rem}
  .simple-invitation .btn{width:100%}
  .retailer-concept{padding:22px 18px}
  .retailer-disabled{width:100%;font-size:.94rem}
}
@media(max-width:360px){
  .wrap{width:calc(100% - 32px)}
  .brand span{font-size:.6rem;letter-spacing:.03em}
  .nav-row .brand{font-size:1.5rem}
  .nav-row{gap:10px}
  .hero-visual{margin-left:-16px;margin-right:-16px}
  .book-controls{padding:10px;gap:6px 10px}
  .book-controls button{padding:10px;font-size:.8125rem}
  .all-pages-footer{gap:24px 15px}
  .dialog-text{padding:35px 20px 28px}
  .dialog-text h2{font-size:2.2rem}
  .ribbon-inner{gap:12px}
  .ribbon-inner .text-link{font-size:.875rem;white-space:normal}
}