/* ============================================================ xyz — mobile layer (≤640px) Designed translation of the desktop essence to the phone. Chosen direction (explorations 2026-06): top bar nav · stacked editorial index rows · 4-col lattice · ribbon feed with caption below the band · peek sheet on tap. Loads AFTER style.css and overrides its legacy ≤640 fallback. Tweak hooks (set on by tweaks.jsx, mobile-only): data-m-nav = "top" (default) | "bottom" data-m-rows = "stacked" (default) | "dense" data-m-type = "regular" (default) | "compact" | "large" ============================================================ */ @media (max-width: 640px) { /* ---- type density ---- */ body { font-size: 12px; } body[data-m-type="compact"] { font-size: 11px; } body[data-m-type="large"] { font-size: 13px; } /* ============================================================ Layout: column flow, natural document scroll ============================================================ */ .layout { flex-direction: column; height: auto; min-height: 100svh; } .main-content { order: 1; overflow: visible; padding: var(--space-3); } /* ============================================================ Nav A — sticky top bar Brand left, the three doors right. Contextual sub-rows (work slugs / archive module filters) drop to a second line. ============================================================ */ .sidebar { display: flex; order: 0; position: sticky; top: 0; z-index: 40; width: 100%; min-width: 0; background: var(--color-muted); border-right: none; border-bottom: var(--border-hairline); padding: 0 var(--space-3); overflow: visible; text-align: left; } .sidebar > ul { display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 0 var(--space-4); padding: 0; border-bottom: none; } .sidebar > ul > li, .sidebar .submenu li { display: contents; } .sidebar ul li a, .sidebar ul li button.menu-toggle { width: auto; text-align: left; margin: 0; display: flex; align-items: center; min-height: 48px; } /* brand pushes the doors to the right edge */ .menu-toggle[data-target="home-desc"] { margin: 0 auto 0 0; font-size: var(--size-md); } /* contextual sub-rows: full-width second line, after the doors */ .sb-section .submenu, .sb-section .archive-subnav { order: 10; flex-basis: 100%; margin: 0; } /* work slugs: visible whenever in the work section (or toggled) */ body[data-section="work"] #work-sub, #work-sub.open { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: 0; border-top: var(--border-hairline); } #work-sub a { min-height: 40px; font-size: var(--size-sm); color: var(--color-text-mute); } #work-sub a.is-active, #work-sub a[aria-current="page"] { color: var(--color-primary); } /* archive module filters: one scrollable row, group toggles read as labels */ body[data-section="archive"] .sb-section[data-section="archive"] .archive-subnav { display: flex; align-items: center; gap: var(--space-3); overflow-x: auto; scrollbar-width: none; white-space: nowrap; border-top: var(--border-hairline); } .archive-subnav::-webkit-scrollbar { display: none; } .archive-subnav .menu-toggle { min-height: 40px; font-size: var(--size-xs); letter-spacing: 0.08em; color: var(--color-text-faint); flex: 0 0 auto; } .archive-subnav .menu-desc { max-height: none; opacity: 1; overflow: visible; margin: 0; flex: 0 0 auto; } .archive-subnav .menu-desc .submenu { display: flex; align-items: center; gap: var(--space-3); margin: 0; flex-basis: auto; order: 0; } .archive-subnav .menu-desc .submenu a { min-height: 40px; font-size: var(--size-sm); color: var(--color-text-mute); flex: 0 0 auto; } .archive-subnav .menu-desc .submenu a.is-active { color: var(--color-primary); font-weight: 600; } /* sidebar info blocks: dropped on the phone (live caption moves on-screen) */ .sidebar > .note-block, .sidebar > .project-details, .sidebar .work-caption, .sidebar .locator { display: none !important; } /* the desktop topbar never shows on phones — the sidebar IS the top bar */ .topbar { display: none !important; } /* ============================================================ Index — A · stacked editorial rows № rail · id + date line · display title · module / tags line ============================================================ */ .project-list { grid-template-columns: 1fr; gap: 0; } .preview-pane { display: none; } .project-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "num id date" "num title title" "num module tags"; column-gap: var(--space-2); row-gap: 4px; padding: var(--space-3) var(--space-1); } .project-row .row-num { grid-area: num; font-size: var(--size-sm); padding-top: 2px; } .project-row .row-id { grid-area: id; font-size: var(--size-sm); } .project-row .row-date { grid-area: date; text-align: right; font-size: var(--size-sm); } .project-row .row-title { grid-area: title; font-family: var(--font-display); font-size: 1.55em; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; white-space: normal; text-wrap: balance; } .project-row .row-module { grid-area: module; text-align: left; font-size: var(--size-sm); } .project-row .row-tags { grid-area: tags; text-align: right; font-size: var(--size-xs); align-self: center; } .project-row .row-price { grid-area: tags; justify-self: end; align-self: center; font-size: var(--size-xs); background: var(--color-primary); color: var(--color-muted); padding: 2px 6px; } /* ---- tweak: dense tabular rows ---- */ body[data-m-rows="dense"] .project-row { grid-template-columns: 30px 76px minmax(0, 1fr) auto 44px; grid-template-areas: "num id title price date"; align-items: baseline; row-gap: 0; padding: var(--space-3) var(--space-1); } body[data-m-rows="dense"] .project-row .row-title { font-family: var(--font-mono); font-size: 1em; font-weight: 400; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-m-rows="dense"] .project-row .row-module, body[data-m-rows="dense"] .project-row .row-tags { display: none; } body[data-m-rows="dense"] .project-row .row-price { grid-area: price; } /* ============================================================ Grid — lattice (4-up via render.js homeColsForWidth) ============================================================ */ /* ---- Home: the lattice owns the screen, centered, full width ---- Desktop floats a min(72vh, 680px) block beside nothing; on the phone the shrink-to-fit flex chain collapsed it (~90px). Make every link of the chain full-width and let the 1fr columns size the cells. The in-grid door cells (WK/SH/AR) remain the nav, exactly as on desktop; the caption stays the signature. Unlike desktop, the topbar is hidden on mobile, so we show the sidebar top-bar on home too — it carries the brand and the three doors just like the desktop topbar status row does. Override the desktop `display:none` that normally hides the sidebar on home. */ body[data-section="home"] .sidebar, body[data-section="own"] .sidebar { display: flex; } /* On home the lattice door cells are the nav — hide WORK/SHOP/ARCHIVE from the top bar so only the brand mark shows. */ body[data-section="home"] .sidebar .sb-section { display: none; } /* The .brand-egg (.XYZ) has an easter-egg click handler that calls e.preventDefault(), which swallows taps on the brand link and stops it navigating to home. On mobile disable pointer events on the span so any tap on the brand name falls through to the parent . */ .brand-egg { pointer-events: none; } body[data-section="home"] #home { align-items: center; justify-content: center; /* Subtract the sidebar height (~48px) so the lattice stays centred in the visible area below the sticky top bar. */ min-height: calc(100svh - 48px); padding: var(--space-4) var(--space-3); } .home-centered { flex-direction: column; align-items: stretch; width: 100%; gap: 0; } .home-grid-col { width: 100%; } body[data-section="home"] .home-grid-wrap.lattice-wrap { width: 100%; max-width: 480px; margin: 0 auto; } /* door cells are the only nav on the phone — give the word presence */ body[data-section="home"] .lattice-wrap .cell.link .link-word { font-size: 16px; } .home-caption { max-width: 480px; margin-left: auto; margin-right: auto; width: 100%; } /* the desktop home-nav column (when present) folds above the grid */ .home-nav { padding: 0 0 var(--space-4); flex-direction: row; flex-wrap: wrap; gap: var(--space-3) var(--space-4); } /* ============================================================ Feed — A · ribbon kept, caption below the band (the desktop sidebar live-caption translated under the band) ============================================================ */ .work-caption { display: none !important; } .feed { margin: 0 calc(-1 * var(--space-3)) var(--space-5); gap: var(--space-5); } .feed-figure { height: clamp(280px, 48vh, 420px); } .feed--work { gap: var(--space-5); margin: 0; padding-top: var(--space-3); } .feed--work .feed-entry { display: block; min-height: 0; } .feed--work .feed-figure { height: clamp(300px, 52vh, 460px); } /* un-hide the meta block: it is the caption now */ .feed--work .feed-meta { display: flex; padding: var(--space-3) var(--space-3) 0; } .feed-meta { padding: var(--space-3) var(--space-3) 0; } .feed-id { color: var(--color-accent); } .feed-title { font-size: 1.45em; } body[data-section="archive"] .feed--work { margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); } /* ribbon panels sized for a phone */ /* The lead frame: desktop forces 4/3, which at phone widths is wider than the viewport — you'd only ever see its left edge at rest. Make it exactly viewport-wide instead: the cover crops centered (object-fit: cover) and the first frame reads as a full-bleed, centered opening shot. Swiping reveals the rest of the ribbon. */ .feed-slide.is-lead { aspect-ratio: auto; flex: 0 0 100%; } .feed-slide.is-desc { flex: 0 0 86vw; padding: var(--space-4); padding-left: 60px; } .feed-slide.is-glyph { flex: 0 0 72vw; } .feed-slide.is-pdf { flex: 0 0 88vw; } .feed-arrow { width: 38px; height: 38px; font-size: 13px; } .feed-prev { left: 8px; } .feed-next { right: 8px; } .archive-top { right: var(--space-3); top: auto; bottom: var(--space-4); } /* ============================================================ Peek sheet — the project card docks to the bottom as a sheet. Drag the slot at the top down to roll it back and return to the list (handled in render.js attachSheetDrag). The figure slot is a swipeable photo ribbon — no cover SVG, no "open full entry". ============================================================ */ .ovl { align-items: flex-end; padding: 0; } .ovl-card { flex-direction: column; width: 100%; max-height: 90svh; border: none; border-top: 0.5px solid var(--color-primary); position: relative; will-change: transform; animation: m-sheet-up 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); } /* the "slot" — a full-width grab strip with a centered pill. touch-action none so the drag-to-dismiss gesture isn't eaten by page scroll. */ .ovl-handle { flex: 0 0 auto; height: 26px; position: relative; touch-action: none; cursor: grab; } .ovl-handle:active { cursor: grabbing; } .ovl-handle::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: var(--color-secondary); } /* the photo ribbon replaces the old SVG figure slot */ .ovl-ribbon { flex: 0 0 auto; border-bottom: 1px solid var(--line, rgba(22, 20, 16, 0.10)); } .ovl-ribbon .feed-figure { height: clamp(200px, 34svh, 320px); margin: 0; border-block: none; background: var(--color-paper-tint); } /* the sheet is the full entry now — the copy reads in full, the meta scrolls inside the sheet if it runs long (no "open full entry" link). */ .ovl-meta { padding: 14px 16px 22px; gap: 9px; overflow-y: auto; } .ovl-foot button { padding: 10px 14px; } @keyframes m-sheet-up { from { transform: translateY(40px); opacity: 0.5; } } /* ============================================================ Tweak: bottom mono bar (data-m-nav="bottom") ============================================================ */ body[data-m-nav="bottom"] .sidebar > ul > li.sb-section > .menu-top { display: none; } body[data-m-nav="bottom"] .main-content { padding-bottom: 84px; } body[data-m-nav="bottom"] .m-bbar { display: flex; } /* ============================================================ Footer strip (injected by mobile.js) ============================================================ */ .m-footer { display: flex; justify-content: space-between; border-top: var(--border-hairline); margin-top: var(--space-5); padding: var(--space-3) var(--space-3) var(--space-5); font-size: var(--size-sm); color: var(--color-text-mute); } body[data-section="home"] .m-footer { display: none; } /* Work drops the contact email from the footer (kept on shop / archive). */ body[data-section="work"] .m-footer-mail { display: none; } /* ============================================================ Shop (The Room) — mobile adaptation Desktop uses an inner-scroll container (position:absolute, overflow-y:auto on .s3-floor). On mobile we switch to document scroll: the room is full-bleed with no main-content padding, .s3-inner comes out of absolute flow, and .s3-floor tiles 2-up. ============================================================ */ /* Full-bleed dark room: strip the main-content padding so the dark background runs edge-to-edge on the phone screen. */ body[data-section="own"] .main-content { padding: 0; } /* Let the room scroll with the document instead of clipping. The door is still position:absolute within this containing block so it covers the initial viewport; after opening it slides away. */ .shop-room { overflow: visible; min-height: 100svh; } /* Inner content: switch from absolute (desktop fill-entire-room) to normal flow so items scroll with the document. */ .s3-inner { position: relative; inset: auto; padding: 20px 16px 40px; } /* 2-column plinth grid, document-scrollable. */ .s3-floor { overflow-y: visible; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; padding-top: 20px; } /* Tighten plinth caption typography for phone. */ .s3-h-title { font-size: 18px; } .s3-name { font-size: 13px; } /* ============================================================ Work page — mobile dark product cards Each entry is a dark card (shop-room aesthetic): rounded corners, radial-gradient background, project title top-left in muted white, and the main photo large and centred in the lower portion — uncropped so the full image floats on the dark field. Tapping opens the peek sheet. ============================================================ */ body[data-section="work"] .project-list { display: block; } .work-m-grid { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-3) var(--space-4) 0; } .work-m-card { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; border-radius: 16px; background: var(--color-secondary); -webkit-tap-highlight-color: transparent; } .work-m-card:active { opacity: 0.82; } .work-m-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .work-m-card-glyph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20%; color: var(--color-text-mute); } .work-m-label { position: absolute; top: 0; left: 0; right: 0; padding: 14px 16px; background: linear-gradient(rgba(0,0,0,0.38), transparent); pointer-events: none; } .work-m-label-title { font-family: var(--font-display); font-size: 1em; font-weight: 400; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.01em; line-height: 1.2; } } /* bottom bar exists at all widths but only shows on mobile + tweak */ .m-bbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--color-muted); border-top: var(--border-strong); padding-bottom: max(env(safe-area-inset-bottom), 6px); font-family: var(--font-mono); } .m-bbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; font-size: var(--size-xs); letter-spacing: 0.1em; color: var(--color-text-mute); text-decoration: none; } .m-bbar .tick { width: 14px; height: 2px; background: transparent; } body[data-section="work"] .m-bbar a[data-sec="work"], body[data-section="own"] .m-bbar a[data-sec="own"], body[data-section="archive"] .m-bbar a[data-sec="archive"] { color: var(--color-primary); font-weight: 600; } body[data-section="work"] .m-bbar a[data-sec="work"] .tick, body[data-section="own"] .m-bbar a[data-sec="own"] .tick, body[data-section="archive"] .m-bbar a[data-sec="archive"] .tick { background: var(--color-accent); } /* desktop: footer strip injected for mobile stays hidden */ @media (min-width: 641px) { .m-footer { display: none; } }