/* 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}
/* The whole page takes the colour of the section in view (FOBOH and Guideli in their greens, Other Works in purple; deeper in dark mode). Everything switches together, so nothing lags behind. */
html.home-swipe[data-swipe-tone="foboh"]{--swipe-bg:#0f3d2e;--swipe-text:#eaf5ef;--swipe-muted:#9fc4b2}
html.home-swipe[data-swipe-tone="guideli"]{--swipe-bg:#0f3f27;--swipe-text:#e8f5ed;--swipe-muted:#9fcbb1}
html.home-swipe[data-swipe-tone="others"]{--swipe-bg:#4a2a86;--swipe-text:#f4effd;--swipe-muted:#c6b6e8}
html[data-theme="dark"].home-swipe[data-swipe-tone="foboh"]{--swipe-bg:#0a2a1f;--swipe-text:#e3efe8;--swipe-muted:#8fb4a2}
html[data-theme="dark"].home-swipe[data-swipe-tone="guideli"]{--swipe-bg:#0f3f27;--swipe-text:#e8f5ed;--swipe-muted:#9fcbb1}
html[data-theme="dark"].home-swipe[data-swipe-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}
/* Page colour switches instantly everywhere at once; any fade lets some layers lag and show as blocks. */
html.home-swipe,html.home-swipe body,html.home-swipe *,html.home-swipe main.swipe-main::before,html.home-swipe main.swipe-main::after{transition-property:none}
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:var(--swipe-pad) 0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;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}
/* Phone reading size, nav included. */
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:14px}
/* 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:24px;--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:6;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:14px;line-height:1.5;text-align:left;color:var(--swipe-muted);cursor:pointer;}
/* Solid page-colour strips pinned to the scroller's top and bottom edges, so nothing ever shows past the header stacks. */
/* Sticky offsets count from inside the scroller's padding, so the strips reach back over it to the true edges. */
html.home-swipe main.swipe-main::before,html.home-swipe main.swipe-main::after{content:"";position:sticky;z-index:7;display:block;height:calc(2*var(--swipe-pad));background:var(--swipe-bg);pointer-events:none}
html.home-swipe main.swipe-main::before{top:calc(-1*var(--swipe-pad));margin-bottom:calc(-2*var(--swipe-pad))}
html.home-swipe main.swipe-main::after{bottom:calc(-1*var(--swipe-pad));margin-top:calc(-2*var(--swipe-pad))}
html.home-swipe .viewport-blur{display:none}
html.home-swipe .swipe-head.is-current{color:var(--swipe-text)}
/* Headers for sections you're not on fade back so the current one leads (text only; their backgrounds stay solid). */
html.home-swipe .swipe-head:not(.is-current){color:color-mix(in srgb,var(--swipe-muted) 60%,var(--swipe-bg))}
/* Projects sit under Selected Work, indented. */
html.home-swipe .swipe-head-sub{padding-left:40px;font-weight:500}
html.home-swipe .swipe-head.is-collapsed{display:none}
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){color:transparent;pointer-events:none}
/* Slides fill the space between the header stacks and snap just below the headers above them; content sits centred between the stacks. */
html.home-swipe .swipe-slide{min-height:calc(100% - var(--swipe-rows,0)*var(--swipe-L));width:100%;margin:0;padding:40px 24px 40px;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}
html.home-swipe .swipe-made.swipe-slide{display:flex}
/* 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}
/* On phones only the title and View Showcase open a project, so swipes and stray taps on the card don't. */
html.home-swipe #work .project-row-link{pointer-events: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 .swipe-showcase{display:block;align-self:flex-start;margin-top:16px;font-size:14px;font-weight:500;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 .intro>.emblem{position:static;margin:0 0 24px}
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}
}
@media(max-width:620px){
/* Safari's top and bottom edge strips take the section colour too, instead of showing white. */
html.home-swipe .safari-edge{background:var(--swipe-bg)}
}