/* Mobile browsing keeps the desktop topics and imagery in a compact, selectable form. */
:root { --mobile-header-height:calc(64px + env(safe-area-inset-top,0px)); }
.mobile-menu,.mobile-portrait { display:none; }
.flow-layout .nav { position:sticky; top:0; z-index:12; display:flex; flex-wrap:nowrap; align-items:center; gap:12px; padding:calc(10px + env(safe-area-inset-top,0px)) var(--page-gutter) 10px; background:#fff; border-bottom:1px solid #ece8e0; }
.flow-layout .nav .nav-links { display:none; }
.flow-layout .nav .wordmark { min-width:0; min-height:44px; flex-shrink:1; font-size:16px; font-weight:400; line-height:1.25; }
.flow-layout .mobile-menu { display:block; position:relative; flex-shrink:0; pointer-events:auto; }
.mobile-menu summary { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 12px; border:1px solid #d8d1c5; border-radius:4px; color:#191919; font-size:14px; font-weight:500; list-style:none; cursor:pointer; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu summary::after { content:'+'; font-size:18px; }
.mobile-menu[open] summary::after { content:'-'; }
.mobile-menu-links { position:absolute; right:0; top:calc(100% + 10px); width:min(300px,calc(100vw - 32px)); padding:8px; border:1px solid #e0d9cd; border-radius:6px; background:#fff; box-shadow:0 16px 40px #00000018; }
.mobile-menu-links a { display:flex; align-items:center; min-height:48px; padding:10px 12px; color:#191919; text-decoration:none; font-size:16px; line-height:1.4; }
.mobile-menu-links a:hover,.mobile-menu-links a:focus-visible { background:#f4f1ea; }
.flow-layout.in-stripe .nav a { color:#191919; }
.flow-layout .page > section { scroll-margin-top:calc(var(--mobile-header-height) + 12px); }
.flow-layout #hero { padding:26px 0 40px; }
.flow-layout .hero-text::after { content:''; display:block; clear:both; }
.flow-layout .mobile-portrait { display:block; float:right; width:84px; height:112px; margin:14px 0 12px 16px; object-fit:contain; object-position:center bottom; background:#f5f3ee; border-radius:6px; }
.flow-layout .hero-name { margin:0; font-size:clamp(32px,8.7vw,48px); font-weight:400; line-height:1.08; letter-spacing:-.025em; text-wrap:balance; }
.flow-layout .hero-bio { clear:both; margin-top:22px; }
.flow-layout .hero-role { font-size:16px; line-height:1.5; }
.flow-layout .hero-loc { font-size:14px; line-height:1.5; }
.flow-layout .story-sheet.sheet-flow { border:1px solid #e2dbcf; border-radius:8px; box-shadow:0 8px 28px #29251c08; padding:20px; }
.flow-layout .story-sheet::before,.flow-layout .story-sheet::after { content:none; }
.flow-layout .story-sheet h3 { font-size:clamp(25px,5vw,32px); line-height:1.12; }
.flow-layout .sheet-body { padding-right:0; gap:16px; }
.flow-layout .sheet-body > .sheet-media { order:-1; }
.flow-layout .sheet-body > .sheet-study-media { order:-1; }
.flow-layout .sheet-media { height:auto; }
.flow-layout .sheet-media > img { width:100%; height:170px; object-fit:contain; object-position:center; border-radius:4px; background:#f8f7f3; }
.flow-layout .sheet-brands { display:none; }
.flow-layout .sheet-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:12px 0; }
.flow-layout .sheet-facts strong { font-size:24px; }
.flow-layout .sheet-facts span { font-size:13px; line-height:1.4; }
.flow-layout .sheet-action { display:flex; align-items:center; min-height:48px; width:100%; padding:10px 0; border-top:1px solid #eee8dc; margin-top:2px; text-align:left; }
.flow-layout .raymond-project-details { border-top:1px solid #eee8dc; }
.flow-layout .raymond-project-details summary::after { content:'+'; margin-left:auto; font-size:20px; }
.flow-layout .raymond-project-details[open] summary::after { content:'-'; }
.flow-layout .am-fallback { padding:36px 0; }
.flow-layout .am-fallback > .col > h2 { font-size:clamp(30px,6vw,40px); max-width:20ch; }
.flow-layout .am-fallback-intro { font-size:16px; line-height:1.55; margin-top:14px; }
body.flow-layout .am-study-tabs { position:sticky; top:var(--mobile-header-height); z-index:6; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:8px 0; margin:18px 0 12px; background:#fff; }
body.flow-layout .am-study-tab { min-height:46px; border-radius:0; padding:8px 4px; font-size:14px; font-weight:400; }
body.flow-layout .am-study-tab:first-child { border-radius:5px 0 0 5px; }
body.flow-layout .am-study-tab:last-child { border-radius:0 5px 5px 0; }
body.flow-layout .am-study-tab[aria-selected=true] { background:#27241e; color:#fff; border-color:#27241e; font-weight:600; }
body.flow-layout .am-study-panel { margin-top:0; }
.flow-layout .am-fallback-story.am-study-panel { border:1px solid #e2dbcf; border-radius:8px; padding:20px; }
.flow-layout .am-fallback-story h3 { font-size:27px; }
.flow-layout .printing-flow-media { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.flow-layout .printing-flow-media figure:first-child { grid-column:1 / -1; }
.flow-layout .printing-flow-media video { height:190px; }
.flow-layout .printing-flow-media img { height:125px; }
.flow-layout .printing-flow-media figcaption { font-size:13px; }
.flow-layout .sheet-study-media { grid-template-columns:repeat(2,minmax(0,1fr)); }
.flow-layout .sheet-study-media figure:first-child { grid-column:1 / -1; }
.flow-layout .sheet-study-media video { height:180px; }
.flow-layout .sheet-study-media img { height:120px; }
.flow-layout .sheet-study-media figcaption { font-size:13px; }
.flow-layout .project-mgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.flow-layout .project-tile { display:block; overflow:hidden; min-height:0; padding:0; border:1px solid #ded7cb; border-radius:8px; background:#fff; }
.flow-layout .project-tile-cover { display:block; width:100%; height:115px; object-fit:contain; background:#f2f0eb; }
.flow-layout .project-tile-copy { display:block; padding:14px; }
.flow-layout .project-tile-copy strong { font-size:18px; font-weight:500; line-height:1.25; margin-bottom:8px; }
.flow-layout .project-tile-copy > span { display:block; font-size:14px; line-height:1.45; }
.flow-layout .project-tile:last-child { display:grid; grid-column:1 / -1; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; }
.flow-layout .project-tile:last-child .project-tile-cover { height:100%; min-height:130px; }
.flow-layout .web-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
.flow-layout .web-tile img,.flow-layout .wt-numera { width:100%; height:110px; aspect-ratio:auto; border-radius:4px; }
.flow-layout .wt-name { font-size:13px; line-height:1.4; }
.flow-layout .wt-desc { font-size:14px; line-height:1.45; }
.flow-layout .darkstripe.websites-stripe { padding-block:40px; }
.flow-layout .websites-inner h2 { font-size:36px; }
@media (min-width:700px) {
  .flow-layout .project-mgrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .flow-layout .project-tile:last-child { display:block; grid-column:auto; }
  .flow-layout .project-tile:last-child .project-tile-cover { height:150px; }
  .flow-layout .project-tile-cover { height:150px; }
  .flow-layout .web-tiles { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .flow-layout .am-fallback > .col,.flow-layout #experience .exp2-pin > .col { max-width:820px; }
}
@media (max-width:299px) {
  .flow-layout .project-mgrid,.flow-layout .web-tiles { grid-template-columns:1fr; }
  .flow-layout .project-tile:last-child { display:block; grid-column:auto; }
  body.flow-layout .am-study-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
