/* Phones (local preview): Home and About become full-screen slides you page through vertically. Sections you've passed
   stack at the top, sections still to come wait at the bottom, both flowing like a sentence; the current one sits with its content. */
.swipe-head,.swipe-made{display:none}
@media(max-width:620px){
html.home-swipe{--swipe-bg:#fff;--swipe-text:#000;--swipe-muted:#707070}
html[data-theme="dark"].home-swipe{--swipe-bg:#111213;--swipe-text:#ececed;--swipe-muted:#999ba0}
/* Each slide carries its own colour (FOBOH and Guideli in their greens, Other Works in purple; deeper in dark mode); headers take the colour of whatever is behind them. */
html.home-swipe :is(.swipe-slide,.swipe-head)[data-tone="foboh"]{--swipe-bg:#0f3d2e;--swipe-text:#eaf5ef;--swipe-muted:#9fc4b2}
html.home-swipe :is(.swipe-slide,.swipe-head)[data-tone="guideli"]{--swipe-bg:#1d7a4c;--swipe-text:#f2fbf6;--swipe-muted:#c9ead6}
html.home-swipe :is(.swipe-slide,.swipe-head)[data-tone="others"]{--swipe-bg:#4a2a86;--swipe-text:#f4effd;--swipe-muted:#c6b6e8}
html[data-theme="dark"].home-swipe :is(.swipe-slide,.swipe-head)[data-tone="foboh"]{--swipe-bg:#0a2a1f;--swipe-text:#e3efe8;--swipe-muted:#8fb4a2}
html[data-theme="dark"].home-swipe :is(.swipe-slide,.swipe-head)[data-tone="guideli"]{--swipe-bg:#0f3f27;--swipe-text:#e8f5ed;--swipe-muted:#9fcbb1}
html[data-theme="dark"].home-swipe :is(.swipe-slide,.swipe-head)[data-tone="others"]{--swipe-bg:#26163f;--swipe-text:#ece4fa;--swipe-muted:#b3a3d4}
html.home-swipe,html.home-swipe body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--swipe-bg)!important;color:var(--swipe-text)!important}
html.home-swipe body{display:flex;flex-direction:column;height:100dvh}
html.home-swipe .site-header{position:relative;top:0;flex:none;width:100%}
html.home-swipe main.swipe-main{position:relative;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}
html.home-swipe main.swipe-main::-webkit-scrollbar{display:none}
/* Text follows the page colour, whatever the theme. */
html.home-swipe :is(main,main p,main h1,main h3,main li,.project-title a,.site-header nav a[aria-current],.theme-toggle,footer a,footer p,.about-shoutouts){color:var(--swipe-text)!important}
html.home-swipe :is(.muted,.project-year,.site-header nav a:not([aria-current]),footer h2,.about-note-label,.shoutout-muted,.experience-meta){color:var(--swipe-muted)!important}
html.home-swipe main a:not(.project-row-link):not(.copy-email){color:var(--swipe-text)!important;text-decoration-color:currentColor}
html.home-swipe :is(main p,main h1,main h3,.project-title a,.project-year,.muted,.site-header nav a,.theme-toggle,.swipe-head){transition:color .6s ease}
/* Bigger reading size. */
html.home-swipe :is(main p,main h1,main h2,main h3,main li,main figcaption,footer,footer a,footer p,footer h2,.project-title>span,.swipe-head){font-size:16px}
/* Sticky headers: each one sticks to the bottom until its section arrives, rides up with it, then stays stacked at the top. */
html.home-swipe{--swipe-L:28px;--swipe-pad:14px}
html.home-swipe .swipe-head{position:sticky;top:calc(var(--swipe-pad) + var(--k)*var(--swipe-L));bottom:calc(var(--swipe-pad) + var(--after)*var(--swipe-L));z-index:3;display:flex;align-items:center;width:100%;height:var(--swipe-L);margin:0;padding:0 24px;box-sizing:border-box;border:0;background-color:var(--swipe-bg);font:inherit;font-size:16px;line-height:1.5;text-align:left;color:var(--swipe-muted);cursor:pointer;transition:color .3s ease,opacity .3s ease}
/* Only the outermost headers carry a band of page colour, so content can't peek past the stacks without covering neighbours. */
html.home-swipe .swipe-head-first{box-shadow:0 calc(-1*var(--swipe-pad)) 0 var(--swipe-bg)}
html.home-swipe .swipe-head-last{box-shadow:0 var(--swipe-pad) 0 var(--swipe-bg)}
html.home-swipe .swipe-head.is-current{color:var(--swipe-text)}
/* Projects sit under Selected Work, indented. */
html.home-swipe .swipe-head-sub{padding-left:40px}
html.home-swipe .swipe-head-year{white-space:pre;color:var(--swipe-muted)}
/* "Top" only shows once you've scrolled past the first slide. */
html.home-swipe .swipe-head-top:not(.is-past){opacity:0;pointer-events:none}
/* Slides fill the space between the header stacks and snap just below the headers above them. */
html.home-swipe .swipe-slide{background-color:var(--swipe-bg);color:var(--swipe-text);min-height:calc(100% - var(--swipe-rows,0)*var(--swipe-L) - 2*var(--swipe-pad));width:100%;margin:0;padding:12px 24px 24px;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:calc(var(--swipe-pad) + var(--rows-above,0)*var(--swipe-L));display:flex;flex-direction:column;justify-content:safe center}
html.home-swipe .swipe-made{display:block}
/* Home: Other Works is iKhokha + ChipperCash, text only, with a divider; each project has a View Showcase button. */
html.home-swipe #work{display:contents}
html.home-swipe #work>h2{display:none}
html.home-swipe #work .project::before,html.home-swipe #work .project:last-child::after{display:none}
html.home-swipe #work .project{border:0}
html.home-swipe #work .compact-thumb{display:none}
html.home-swipe #work .swipe-others .project{margin:0;padding:0}
html.home-swipe #work .swipe-others .project+.project{margin-top:28px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--swipe-text) 25%,transparent)}
html.home-swipe #work .project:not(.project-compact)>.project-title{display:none}
html.home-swipe .swipe-showcase{display:block;align-self:flex-start;margin-top:16px;font-size:16px;line-height:1.5;color:var(--swipe-text)!important;text-decoration:none!important;position:relative;z-index:2}
html.home-swipe .swipe-showcase:active{opacity:.7}
html.home-swipe #home>.emblem{position:absolute;top:24px;left:24px;margin:0;z-index:1}
html.home-swipe #home .intro{padding-top:80px}
html.home-swipe #home .drawing footer{margin-top:40px;padding:0}
html.home-swipe .drawing .paint :is(p,span,label,div,button,output){color:#000!important}
html.home-swipe .drawing .paint .paint-title-text{color:#fff!important}
/* About: in-page headings give way to the slide titles; notes stack label over text. */
html[data-swipe-page="about"] :is(.about-reading-heading,[data-about-section="Shoutouts!"])>h2,html[data-swipe-page="about"] .about-experience>h2,html[data-swipe-page="about"] footer[data-about-section]>div>h2{display:none}
html[data-swipe-page="about"] .about-note{display:block}
html[data-swipe-page="about"] .about-note-label{margin-bottom:8px}
html[data-swipe-page="about"] .swipe-group>*{margin-top:0}
html[data-swipe-page="about"] .swipe-group>*+*{margin-top:32px}
html[data-swipe-page="about"] .swipe-about-reads{justify-content:flex-start}
}