html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Questrial', sans-serif; color: #000; }
a { color: inherit; text-decoration: none; }

.page { position: relative; width: 1440px; margin: 0 auto; overflow: hidden; }
.fixed-layer { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 1000; pointer-events: none; }
.fixed-inner { position: relative; width: 1440px; margin: 0 auto; }
.fixed-layer .w { pointer-events: auto; }

/* phone layout (320px wide, scaled to the screen by site.js) for pages that have one */
.page-m, [data-variant="mobile"] .fixed-inner { width: 320px; }
/* same query as PHONE_QUERY in site.js: narrow screens, except a touch phone turned sideways */
[data-variant="mobile"] { display: none; }
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (pointer: fine) {
  body.has-mobile [data-variant="desktop"] { display: none; }
  [data-variant="mobile"] { display: block; }
}

.w { position: absolute; display: block; box-sizing: border-box; }
a.w { cursor: pointer; }

/* text */
.t { white-space: pre-wrap; overflow-wrap: break-word; font-size: 17px; }
.t p { margin: 0; }
/* phrase underlines in the project texts' colour (green on Consolidation); drawn under the glyphs */
.t .mark { text-decoration: underline 4px #30a368; text-decoration-skip-ink: none; text-underline-offset: 1px; }
.t ul, .t ol { margin: 0; padding-left: 24px; }
.t li { padding-left: 2px; }

/* click-to-enlarge pictures */
.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center;
            background: rgba(0, 0, 0, .8); cursor: zoom-out; opacity: 0; transition: opacity .25s ease; }
.lightbox.open { opacity: 1; }
.lightbox img { display: block; max-width: 92vw; max-height: 92vh; width: auto; height: auto; }

/* pictures */
.p > img { display: block; width: 100%; height: 100%; }
.crop { position: relative; width: 100%; height: 100%; overflow: hidden; }
.crop img { display: block; max-width: none; }

/* lists on the WebGrower phone page: bullet at 8px, text at 21px, as in the Figma frame */
.phone-text ul, .phone-text ol { padding-left: 21px; }
.phone-text li { padding-left: 0; }

/* tag pills built for the WebGrower phone page */
.tags { display: flex; flex-wrap: wrap; gap: 2px; }
.tag { box-sizing: border-box; display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
       border: 1px solid #222221; border-radius: 14px; font: 13px/1 'Questrial', sans-serif; color: #222221;
       white-space: nowrap; }
.tag-more { background: #222221; color: #fff; }
/* the Readymag phone card style: 26px pills overlapping by 14px, label centred by eye (text box
   5px below the top of the pill, the same as on My Work) */
.tags-rm { gap: 4px 0; }
.tags-rm .tag { display: block; height: 26px; padding: 4px 12px 0; border-color: #222221;
                font: 14px/17px 'Questrial', sans-serif; margin-right: -14px; }

/* phrase underlines on the phone pages: 2px, 2px below the baseline, as on the Stock phone page */
.phone-text .mark { text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* phone burger icon (32×32, bars as in the Readymag icon) that morphs into a cross */
.burger { cursor: pointer; }
.burger span { position: absolute; left: 4px; width: 24px; height: 2.67px; border-radius: 2px; background: #000;
               transition: transform .35s ease, opacity .2s ease; }
.burger span:nth-child(1) { top: 8px; }
.burger span:nth-child(2) { top: 14.67px; }
.burger span:nth-child(3) { top: 21.33px; }
.burger.open span:nth-child(1) { transform: translateY(6.67px) rotate(45deg) scaleX(.94); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger.open span:nth-child(3) { transform: translateY(-6.67px) rotate(-45deg) scaleX(.94); }
@media (prefers-reduced-motion: reduce) { .burger span { transition: none; } }

/* swipeable gallery (phone) */
.ss-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
            scrollbar-width: none; -webkit-overflow-scrolling: touch; height: 100%; }
.ss-track::-webkit-scrollbar { display: none; }
.ss-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.ss-img { overflow: hidden; background: #000; }
.ss-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-slide figcaption { white-space: normal; }
.ss-count { position: absolute; left: 50%; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
            background: rgba(34, 34, 33, .6); color: #fff; font: 11px/40px 'Questrial', sans-serif;
            text-align: center; pointer-events: none; }

/* video */
.v { background: #000; }
.v iframe { display: block; width: 100%; height: 100%; border: 0; }

/* animations */
.a-fade { animation: rm-fade var(--fd, 1s) ease-in-out var(--fdl, 0s) both; }
@keyframes rm-fade { from { opacity: 0; } to { opacity: 1; } }
.a-scroll { will-change: scale; }
.line-slide .kw { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .a-fade { animation: none; }
}