/* Layout refinements, loaded after the theme sheets: a one-row phone menu, the hero's picture above
   its words on phones, the audio feature's whole speech bubble, the Gazette's section bar, and art
   for the home page's Gazette invitation. */

/* Phones and small tablets: the menu is one row that scrolls sideways instead of two tall rows. */
@media(max-width:800px){
 .site-header{min-height:0;padding:12px 0 0;gap:4px}
 .site-header nav{display:flex;position:relative;width:100%;height:auto;flex-wrap:nowrap;justify-content:flex-start;gap:6px;padding:6px 16px 12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;font-size:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent)}
 .site-header nav::-webkit-scrollbar{display:none}
 .site-header nav a{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:7px 13px}
 /* Centered when everything fits; starts at the left edge when it scrolls. */
 .site-header nav a:first-child{margin-left:auto}
 .site-header nav a:last-child{margin-right:auto}
}

/* Phones: Sir Bacon's picture sits above the welcome instead of behind it. */
@media(max-width:520px){
 .hero{display:flex;flex-direction:column;min-height:0;height:auto}
 .hero-art{position:relative;inset:auto;height:auto;aspect-ratio:1.1;object-position:84% 45%}
 .hero-shade,.hero-caption{display:none}
 .hero-copy{width:100%;padding:28px 22px 34px;background:#123d50}
 .hero-speech{top:18px;bottom:auto;right:16px}
 /* All three promises fit on a phone. */
 .story-ribbon span:last-child{display:flex}
}

/* Computers: the audio feature shows the whole of Sir Bacon's speech bubble. */
@media(min-width:801px){
 .radio-art>img{object-position:63% center}
 .radio-art:after{background:linear-gradient(90deg,transparent 93%,#087aa0)}
}

/* The Gazette's "In this issue" list marks the section being read. */
.issue-sidebar a.is-current{background:#dff2fb;color:#026484;box-shadow:inset 3px 0 0 #087aa0}
/* Phones and small tablets: the list becomes a sticky, sideways-scrolling bar. */
@media(max-width:800px){
 /* A plain block (not a one-column grid) so the bar can stick for the whole issue and never widens the page. */
 .newsletter-layout{display:block}
 .newsletter-content{margin-top:22px}
 .issue-sidebar{position:sticky;top:0;z-index:30;min-width:0;background:#fffdf7;padding:8px 0 6px;box-shadow:0 8px 10px -10px #13395166}
 .issue-sidebar nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;border-bottom:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
 .issue-sidebar nav::-webkit-scrollbar{display:none}
 .issue-sidebar .eyebrow{display:none}
 .issue-sidebar a{flex:0 0 auto;white-space:nowrap}
 .issue-sidebar a.is-current{background:#ffe17b;border-color:var(--ink);color:var(--ink);box-shadow:none}
 .newsletter-block{scroll-margin-top:72px}
}

/* Home: the two newest Gazette covers beside the invitation. */
.home-gazette-covers{position:relative;flex:none;width:190px;height:178px;display:block}
.home-gazette-covers img{position:absolute;top:8px;width:116px;height:auto;border:3px solid var(--ink);border-radius:6px;box-shadow:4px 5px 0 #14395133;background:#fff;transition:transform .3s}
.home-gazette-covers img:first-child{left:4px;transform:rotate(-9deg)}
.home-gazette-covers img:nth-child(2){right:4px;transform:rotate(7deg)}
.home-gazette-covers:hover img:first-child{transform:rotate(-13deg) translate(-4px,2px)}
.home-gazette-covers:hover img:nth-child(2){transform:rotate(10deg) translate(4px,-4px)}
.home-gazette-covers span{position:absolute;right:-6px;bottom:2px;font-family:var(--display);font-size:15px;background:#ffd34c;border:2px solid var(--ink);border-radius:999px;padding:5px 12px;transform:rotate(-6deg);box-shadow:2px 3px 0 var(--ink)}
@media(max-width:1050px){.home-gazette-covers{width:160px;height:160px}.home-gazette-covers img{width:98px}}
@media(prefers-reduced-motion:reduce){.home-gazette-covers img{transition:none}}