/* A phone-sized composition, with the same paper, wine and original artwork. */
@media (max-width: 800px) {
  #viewer[open] { display:flex; flex-direction:column; overflow:hidden; }
  #viewer .viewer-header, #viewer .viewer-controls { flex:none; }
  #viewer .viewer-header > div { min-width:0; }
  #viewer .viewer-header h2 { overflow-wrap:anywhere; font-size:18px; line-height:1.35; }
  #viewer .viewer-header .micro { font-size:11px; }
  #viewer #close-viewer { min-width:44px; min-height:44px; flex:none; }
  #viewer #viewer-images { flex:1; min-height:0; height:auto; touch-action:pan-x pan-y pinch-zoom; }
  #viewer .viewer-controls button { min-height:44px; padding:10px 16px; font-size:14px; }
  #viewer .viewer-controls { font-size:12px; }
  #project-view .stage-tabs button { min-height:44px; font-size:13px; }
  .chapter-navigation a, .site-header nav a { min-height:44px; display:inline-flex; align-items:center; }
  .browser-full-view { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; padding:12px 0; margin-top:10px; width:100%; text-align:left; font-size:14px; color:#681b10; border-bottom:1px solid #6b190c35; }
  .browser-full-view > span { font-size:23px; }
}
@media (min-width: 801px) { .browser-full-view { display:none; } }
@media (max-width: 600px) {
  .opening-composition { grid-template-rows:540px 460px auto auto; }
  .story-note, .work-note { min-height:320px; }
  .hello-note { min-height:170px; }
  .opening-foot button, .opening-foot a { min-height:44px; display:inline-flex; align-items:center; }
  .opening-foot { row-gap:2px; }
  #category-view .category-heading h1 { font-size:clamp(44px,13.8vw,64px); overflow-wrap:anywhere; }
  #project-view .project-title h1 { font-size:clamp(44px,13.4vw,65px); overflow-wrap:anywhere; }
  #project-view.case-solar-system .project-title h1 { font-size:clamp(40px,12.5vw,51px); }
  #project-view .next-project h2, .project-card-label h3, .personal-page h2, .personal-page h3 { overflow-wrap:anywhere; }
  .project-card-label > div { min-width:0; }
  #category-view .category-tabs a { min-height:44px; font-size:12px; }
  #project-view .chapter-links { flex-wrap:wrap; gap:4px 20px; }
  #project-view .chapter-links a { min-height:44px; display:inline-flex; align-items:center; font-size:12px; }
  #project-view .chapter p, #project-view .demo-copy p, #project-view .feature-heading > p { font-size:16px; }
  #project-view .project-nav, #category-view .category-breadcrumb { font-size:12px; }
  #project-view .project-nav > a, .category-breadcrumb > a { min-height:44px; display:inline-flex; align-items:center; }
  #project-view .project-nav > span { text-align:right; flex:none; }
  #project-view .chapter figure { padding:14px; }
  .saathi-task-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .saathi-task-grid button { flex-direction:column; align-items:flex-start; gap:9px; padding:13px 10px; min-height:90px; font-size:12px; }
  .saathi-task-grid button > span { flex-basis:auto; text-align:left; }
  .saathi-step-nav button { min-height:44px; }
  .saathi-size-controls button { min-height:44px; }
  .saathi-connect button { min-height:44px; }
  .saathi-contrast { min-height:48px; }
  .saathi-demo > footer > button { min-height:44px; }
  .resume-toolbar p { font-size:12px; }
  .resume-zoom button { min-width:44px; min-height:44px; }
  .resume-tools { padding:8px 12px; gap:4px 12px; font-size:12px; }
  .resume-actions { flex:1; justify-content:flex-end; gap:16px; }
  .resume-actions a { min-height:44px; }
}
@media (max-width: 370px) {
  .home-surface .wordmark, .work-surface .wordmark { font-size:20px; white-space:nowrap; }
  .home-surface .site-header, .work-surface .site-header { padding-inline:16px; }
  .home-surface .site-header nav, .work-surface .site-header nav { gap:10px; font-size:11.5px; }
  .opening-composition { grid-template-rows:490px 420px auto auto auto; }
  .story-note { grid-column:1 / -1; grid-row:3; min-height:240px; padding:26px; }
  .story-note h2 { font-size:36px; }
  .story-note p { font-size:16px; }
  .story-note .widget-label { font-size:14px; }
  .work-note { grid-column:1 / -1; grid-row:4; min-height:270px; }
  .work-note .widget-label { font-size:14px; }
  .hello-note { grid-row:5; }
  .discipline-copy h3, .fashion-panel h3 { font-size:43px; }
  .discipline-heading h2 { font-size:51px; }
  #project-view .project-title, #project-view .chapter .chapter-copy { padding-inline:22px; }
  #project-view .chapter h2 { font-size:39px; }
  #project-view .next-project h2 { font-size:40px; }
  .saathi-demo > header, #saathi-screen, .saathi-demo > footer { padding-inline:14px; }
  .saathi-task-grid { gap:6px; }
  .saathi-task-grid button { padding-inline:8px; font-size:11px; }
  #project-view #saathi-screen h4 { font-size:31px; }
  .saathi-reading { padding:17px 13px; }
  .saathi-reading p { font-size:calc(19px * var(--reading-scale)); }
  .saathi-signature { font-size:68px; }
  #category-view .saathi-signature { font-size:70px; }
  .saathi-cover-note { padding:20px 16px; }
  .saathi-cover-note p { font-size:25px; }
  .contact-detail a, .contact-detail p { font-size:19px; }
  .story-chapter h2, .story-lenses > h2 { font-size:46px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .opening-composition { grid-template-columns:1fr 1fr; grid-template-rows:clamp(480px,65vw,580px) auto 150px; height:auto; min-height:0; max-height:none; gap:18px; }
  .flower-panel { grid-column:1; grid-row:1; }
  .portrait-space { grid-column:2; grid-row:1; margin:0; }
  .story-note { grid-column:1; grid-row:2; min-height:280px; padding:28px; }
  .story-note h2 { font-size:38px; margin-bottom:18px; }
  .story-note p { font-size:17px; line-height:1.5; }
  .story-note .widget-label { margin-top:25px; font-size:15px; }
  .work-note { grid-column:2; grid-row:2; min-height:280px; padding:28px; }
  .work-number { font-size:112px; }
  .work-note-content { margin:auto 0 25px; }
  .work-note-content p { font-size:20px; }
  .work-note .widget-label { font-size:15px; }
  .hello-note { grid-column:1 / -1; grid-row:3; padding:25px 28px; }
  .hello-note p { font-size:25px; }
  .portrait-top { gap:8px; }
  .portrait-top h1 { font-size:18px; }
  .portrait-top > span { font-size:20px; }
  .portrait-caption { left:22px; right:22px; bottom:25px; }
  .portrait-caption p { font-size:23px; }
  .portrait-caption > span { font-size:12px; }
}