/* Massa Alabbar — portfolio. A design-tool canvas: every section is an artboard on a dark grid, labelled with its
   name and its live size. Heavy display type, a handwritten aside, a few tool stickers; the locked character sits on
   her own light board in the first frame like a photo pinned to the canvas. */

/* the fonts, served from here rather than from Google: they arrive with the page (the four the first screen
   uses are preloaded in each page's head) and the text waits for them instead of swapping fonts in front of
   the visitor. Google's own subsets and ranges, latin and latin-ext. All four families are SIL OFL. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: block;
  src: url(assets/fonts/bricolage-grotesque-500-800-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: block;
  src: url(assets/fonts/bricolage-grotesque-500-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: block;
  src: url(assets/fonts/dm-mono-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: block;
  src: url(assets/fonts/dm-mono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: block;
  src: url(assets/fonts/dm-mono-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: block;
  src: url(assets/fonts/dm-mono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: block;
  src: url(assets/fonts/dm-sans-400-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: block;
  src: url(assets/fonts/dm-sans-400-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: block;
  src: url(assets/fonts/dm-serif-display-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: block;
  src: url(assets/fonts/dm-serif-display-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Shadows Into Light"; font-style: normal; font-weight: 400; font-display: block;
  src: url(assets/fonts/shadows-into-light-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Shadows Into Light"; font-style: normal; font-weight: 400; font-display: block;
  src: url(assets/fonts/shadows-into-light-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* canvas and frames */
  --canvas: #0b0b0b;
  --grid: rgba(243, 243, 243, .043);
  --select: #8b6cff;                /* the purple: selection boxes, the timeline, the nav ruler */
  --select-ink: #1c1240;            /* text on a purple fill */
  --select-text: var(--select);     /* the purple as small text; darker on light paper for 4.5:1 */
  --frame: #131313;
  --frame-2: #1b1b1b;               /* surfaces inside a frame (cards, rows on hover) */
  --edge: #262626;
  --edge-2: #333;
  /* text */
  --text: #f3f3f3;
  --text-2: #c4c4c4;
  --text-3: #8f8f8f;                /* labels; 6.1:1 on the frame */
  --dim: #6d6d6d;                   /* the grey half of the statement lines, display size only */
  /* accents: sticker colours, used on illustrations and stickers only */
  --accent: #b7a4ff;                /* soft purple: current process stage, its track */
  --peach: #f5a493;
  --sky: #ddd2ff;                   /* pale lavender (was sky blue) */
  --lilac: #c8b8f2;
  --butter: #f6e08b;
  /* the artboard behind the character (locked) */
  --board: #fbf8f3;
  --board-edge: rgba(72, 56, 44, .07);
  --dot: rgba(104, 86, 72, .2);
  --nav-bg: rgba(28, 28, 28, .88);
  --ruler-bg: rgba(11, 11, 11, .85);
  --hover: rgba(255, 255, 255, .07);
  --tick: rgba(243, 243, 243, .18);
  --tick-strong: rgba(243, 243, 243, .4);
  color-scheme: dark;

  --max: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --pad: clamp(24px, 4.4vw, 64px);          /* inside a frame */
  --gap: clamp(88px, 10vw, 140px);          /* between frames */
  --radius: 10px;
  --frame-radius: 6px;

  --display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hand: "Shadows Into Light", "Segoe Print", cursive;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .18s;
  --t-mid: .4s;
  --t-slow: .9s;

  --vhu: 1svh;                  /* one viewport-height unit (review captures pin it, see tools/shoot.sh) */
  --hero-h: min(calc(66 * var(--vhu)), 660px);
  --nav-h: 60px;               /* the row, ruler included: the controls centre in the 51px above the 9px ruler */
  --nav-top: 12px;
  --nav-space: calc(var(--nav-h) + 2 * var(--nav-top));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-space); }
html, body { margin: 0; }
/* nothing on these pages is meant to be wider than the window. iOS Safari lets a phone pan sideways (and zoom out to
   an empty strip) if anything at all pokes past the edge, a rotated card or a hidden tooltip included, where other
   browsers clip it, so the page itself is clipped. `clip`, not `hidden`: it makes no scroll box, so the pinned
   process frame keeps sticking. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
body { background-color: var(--canvas); color: var(--text); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px; background-position: calc(50% + .5px) -1px; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--select); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 20; padding: 10px 14px; background: var(--text); color: var(--canvas);
  border-radius: var(--radius); text-decoration: none; font-size: 15px; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- selection: on the project pages, hovering an image draws a design-tool selection box (blue, square handles) ---- */
.selectable { position: relative; }
.selectable::after { content: ""; position: absolute; inset: -5px; z-index: 5; pointer-events: none; border: 1.5px solid var(--select);
  border-radius: inherit; opacity: 0; transform: scale(.98);
  background: linear-gradient(var(--select), var(--select)) top left / 7px 7px no-repeat,
    linear-gradient(var(--select), var(--select)) top right / 7px 7px no-repeat,
    linear-gradient(var(--select), var(--select)) bottom left / 7px 7px no-repeat,
    linear-gradient(var(--select), var(--select)) bottom right / 7px 7px no-repeat;
  transition: opacity .16s cubic-bezier(.16, 1, .3, 1), transform .26s cubic-bezier(.16, 1, .3, 1); }
.selectable:hover::after, .selectable:focus-visible::after, .selectable[data-selected="true"]::after { opacity: 1; transform: none; }
.selectable:focus-visible { outline: none; }

/* ---- the vertical ruler on the left edge, numbered every 120px, moving with the page (site.js) ---- */
.ruler { position: fixed; z-index: 8; top: 0; bottom: 0; left: 0; width: 24px; overflow: hidden; pointer-events: none;
  border-right: 1px solid var(--edge); background: var(--ruler-bg); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ruler-in { position: relative; width: 100%; will-change: transform;
  background: linear-gradient(#6d6d6d 1px, transparent 1px) right top / 8px 120px repeat-y,
    linear-gradient(rgba(243, 243, 243, .2) 1px, transparent 1px) right top / 4px 24px repeat-y; }
.ruler-in span { position: absolute; left: 3px; font: 500 9px/1 var(--mono); color: var(--text-3); transform-origin: top left; transform: rotate(-90deg); }
@media (max-width: 1180px) { .ruler { display: none; } }

/* ---- type roles ---- */
.display { font-family: var(--display); font-weight: 760; letter-spacing: -.045em; line-height: .92; }
.hand { font-family: var(--hand); font-weight: 400; color: var(--text-2); letter-spacing: .01em; line-height: 1.2; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--text-3); }
.label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--text-2); max-width: 34em; }

/* ---- actions ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--radius); border: 1px solid var(--text); background: var(--text); color: var(--canvas);
  font: 600 15px/1 var(--body); text-decoration: none; cursor: var(--pointer, pointer);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--edge-2); }
.btn.ghost:hover { border-color: var(--text-3); }
.btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }
.btn .arr { display: inline-block; transition: transform var(--t-fast) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn > svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* LinkedIn, Behance and the resume as small square tool buttons, the size of the theme switch */
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.soc { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--edge-2); border-radius: 10px; color: var(--text-2); text-decoration: none;
  font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); }
.soc svg { width: 17px; height: 17px; flex: 0 0 auto; }
.soc.resume { padding: 0 13px 0 11px; }
.soc[href*="behance"] svg { width: 21px; height: 21px; }   /* a wide mark: as heavy as LinkedIn's at this size */
.soc:hover { color: var(--text); border-color: var(--text-3); translate: 0 -1px; }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font: 600 15px/1 var(--body); text-decoration: none; }
.link .arr { transition: transform var(--t-fast) var(--ease); }
.link:hover .arr { transform: translateX(3px); }
.tag { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 12px; border-radius: 8px; border: 1px dashed var(--edge-2);
  font: 500 11px/1.35 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.tbc { display: inline-block; padding: 2px 8px; border: 1px dashed var(--butter); border-radius: 6px; font: 500 12px/1.4 var(--mono);
  color: var(--butter); background: rgba(246, 224, 139, .06); }

/* ---- navigation: centred, with a ruler along its bottom edge. The link you are on (or hovering) is a purple
   range on the ruler; the playhead is how far down the page you are. ---- */
/* centred by margins, not translateX(-50%): with a width that changes every frame that put the blurred bar on half
   pixels, and Safari shimmered. The glass (fill, blur, edge, shadow) is an element of its own, first in the bar and
   painted under the row and the ruler in plain order. (As a ::before pushed back with z-index: -1, Safari drew it
   square and without its fill.) */
.nav { --nav-r: 14px; position: fixed; z-index: 10; top: var(--nav-top); left: 0; right: 0; margin-inline: auto;
  /* the sections' width until site.js takes over: it sets the width inline in px, full or compact, and animates
     the change itself */
  width: min(calc(var(--max) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  border-radius: var(--nav-r); border: 1px solid transparent; }
.nav-glass { position: absolute; inset: -1px; pointer-events: none; border-radius: var(--nav-r);
  border: 1px solid var(--edge); background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px -24px rgba(0, 0, 0, .55); }
/* while the bar changes width the blur is off: Safari re-samples a resizing backdrop from stale frames and shows a
   ghost of the bar's own contents. The fill is near-opaque, so the pause does not show. */
.nav.resizing .nav-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--nav-bg), var(--frame) 40%); }
.nav-in, .nav-ruler { z-index: 1; }
.nav-in { position: relative; }
/* scrolled: the bar shrinks to hug its content (the width is measured by site.js, so it can be animated) */
.nav.measuring { transition: none !important; width: max-content !important; }
.nav.no-anim, .nav.no-anim * { transition: none !important; }
.nav-in { overflow: clip; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: var(--nav-h); padding: 0 8px 9px 18px; }
.brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; justify-self: start; }
.brand .mark { display: block; height: 22px; width: auto; }          /* Massa's MA mark; the bar keeps its own purple */
.nav-mid { position: static; }
.nav-links { display: flex; justify-content: center; gap: 2px; }
.nav-links a { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--text-2); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.nav-links a .n { font: 500 10px/1 var(--mono); color: var(--text-3); transition: color var(--t-fast) var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--text); }
.nav-links a:hover .n, .nav-links a[aria-current="true"] .n { color: var(--select-text); }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.nav .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.theme-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--edge-2); border-radius: 10px; background: none;
  color: var(--text-2); cursor: var(--pointer, pointer); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.theme-btn:hover { color: var(--text); border-color: var(--text-3); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .sun { display: none; }
[data-theme="light"] .theme-btn .sun { display: block; }
[data-theme="light"] .theme-btn .moon { display: none; }
/* the ruler is clipped to the bar's lower corners itself: Safari does not clip a blurred (backdrop-filter) bar's
   children to its rounded corners, so its overflow: hidden alone let the ruler's ends and the playhead poke out */
.nav-ruler { clip-path: inset(-40px 0 0 round calc(var(--nav-r) - 1px)); }   /* reaching above it, so the radius is not shrunk to its 9px */
.nav-ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; pointer-events: none; border-top: 1px solid var(--edge);
  background: linear-gradient(90deg, var(--tick-strong) 1px, transparent 1px) 0 0 / 40px 7px repeat-x,
    linear-gradient(90deg, var(--tick) 1px, transparent 1px) 0 0 / 8px 4px repeat-x; }
.nav-range { position: absolute; top: 0; bottom: 0; left: 0; width: 0; opacity: 0;
  background: color-mix(in srgb, var(--select) 28%, transparent); border-inline: 1.5px solid var(--select);
  transition: left .35s cubic-bezier(.16, 1, .3, 1), width .35s cubic-bezier(.16, 1, .3, 1), opacity .2s ease; }
.nav-range.on { opacity: 1; }
.playhead { position: absolute; top: -1px; bottom: 0; left: 0; width: 1.5px; background: var(--select); }
.playhead::before { content: ""; position: absolute; left: 50%; top: 0; width: 7px; height: 4px; translate: -50% 0; background: var(--select);
  clip-path: polygon(0 0, 100% 0, 50% 100%); }
.menu-btn { display: none; }

/* ---- the menu on a phone: a glass sheet from the right, built by site.js from the nav's links. A ruler runs down
   its left edge and the page you are on is a purple range on it, as the nav's ruler marks it on a wide screen. ---- */
.sheet { position: fixed; inset: 0; z-index: 30; visibility: hidden; transition: visibility 0s linear .45s; }
.sheet.open { visibility: visible; transition-delay: 0s; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); opacity: 0; transition: opacity .35s ease; }
.sheet.open .sheet-scrim { opacity: 1; }
.sheet-panel { --rule: 24px; position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(calc(100% - 44px), 390px);
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
  background: color-mix(in srgb, var(--frame) 58%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 30px 80px -30px rgba(0, 0, 0, .8);
  translate: calc(100% + 16px) 0; transition: translate .4s cubic-bezier(.7, 0, .84, 0); }
.sheet.open .sheet-panel { translate: 0 0; transition: translate .6s cubic-bezier(.16, 1, .3, 1); }
.sheet-panel::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: var(--rule); pointer-events: none;
  border-right: 1px solid var(--edge);
  background: linear-gradient(var(--tick-strong) 1px, transparent 1px) right 0 top 8px / 12px 40px repeat-y,
    linear-gradient(var(--tick) 1px, transparent 1px) right 0 top 8px / 6px 8px repeat-y; }
.sheet-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 64px; padding: 0 10px 0 calc(var(--rule) + 18px); }
.sheet-head::after { content: ""; position: absolute; left: var(--rule); right: 0; bottom: 0; height: 9px; border-bottom: 1px solid var(--edge);
  background: linear-gradient(90deg, var(--tick-strong) 1px, transparent 1px) 0 100% / 40px 7px repeat-x,
    linear-gradient(90deg, var(--tick) 1px, transparent 1px) 0 100% / 8px 4px repeat-x; }
.sheet-head .dims { color: var(--select); }
.sheet-close { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--edge-2);
  border-radius: 12px; background: color-mix(in srgb, var(--frame) 40%, transparent); color: var(--text); cursor: var(--pointer, pointer); }
.sheet-close svg { width: 16px; height: 16px; }
.sheet-links { align-self: center; display: grid; padding: 24px 0; }
.sheet-links li { opacity: 0; translate: 18px 0; transition: opacity .2s ease, translate .2s ease; }
.sheet.open .sheet-links li { opacity: 1; translate: 0 0; transition: opacity .45s ease, translate .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(.12s + var(--i) * .05s); }
.sheet-links a { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 12px 18px 12px calc(var(--rule) + 18px);
  color: var(--text-2); text-decoration: none; font: 760 clamp(38px, 11vw, 48px)/1 var(--display); letter-spacing: -.045em;
  transition: color var(--t-fast) var(--ease); }
.sheet-links a .n { font: 500 11px/1 var(--mono); letter-spacing: .02em; color: var(--text-3); translate: 0 -.4em; }
.sheet-links a::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--rule); opacity: 0;
  background: color-mix(in srgb, var(--select) 28%, transparent); border-block: 1.5px solid var(--select); transition: opacity .2s ease; }
.sheet-links a:hover, .sheet-links a:focus-visible, .sheet-links a[aria-current="true"] { color: var(--text); }
.sheet-links a[aria-current="true"] .n { color: var(--select-text); }
.sheet-links a[aria-current="true"]::before { opacity: 1; }
.sheet-links a:focus-visible { outline-offset: -4px; }
.sheet-foot { display: grid; gap: 16px; padding: 18px 18px 20px calc(var(--rule) + 18px); border-top: 1px solid var(--edge); }
.sheet-foot { gap: 10px; }
.sheet-foot .btn { width: 100%; min-height: 50px; font-size: 16px; }
.sheet-foot .socials { margin-top: 6px; }
.sheet-foot .soc { height: 44px; min-width: 44px; }
html.menu-open { overflow: hidden; }
[data-theme="light"] .sheet-scrim { background: rgba(25, 27, 30, .28); }
[data-theme="light"] .sheet-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 30px 80px -34px rgba(25, 27, 30, .45); }
@media (prefers-reduced-motion: reduce) {
  .sheet-panel, .sheet.open .sheet-panel { translate: none; opacity: 0; transition: opacity .2s ease; }
  .sheet.open .sheet-panel { opacity: 1; }
  .sheet-links li, .sheet.open .sheet-links li { translate: none; transition: none; opacity: 1; }
}

/* ---- frames: a label and the live size above, the artboard below ---- */
.board-sec { margin-top: var(--gap); }
.board-sec:first-of-type { margin-top: calc(var(--nav-space) + 28px); }
.frame-meta { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 8px; }
.frame { position: relative; background: var(--frame); border: 1px solid var(--edge); border-radius: var(--frame-radius); padding: var(--pad); }

/* ---- hero ---- */
.hero .frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 4vw, 64px); }
.hero-copy { container-type: inline-size; min-width: 0; }
.hero .hi { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(26px, 2.5vw, 38px); }
.sparkle { width: .9em; height: .9em; color: var(--butter); }
/* the name is sized from its column, so "Alabbar", the longer word, always fits on its line */
.hero h1 { font-size: min(188px, 25.5cqi); margin-top: 6px; }
.hero h1 .l { display: block; white-space: nowrap; }
.hero .path { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(22px, 2.1vw, 32px); }
.hero .lead { margin-top: 14px; max-width: 30em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

/* the character: locked art on its locked board, with a few tool stickers pinned around it */
.stage { position: relative; height: var(--hero-h); width: calc(var(--hero-h) * 896 / 1200); pointer-events: none; }
/* the picture and the live layer (the eyes) sit exactly on the stage, which is their own size: no left: 50% and
   translateX(-50%). Safari can resolve that -50% against a WebGL canvas's buffer rather than its box (when the canvas
   is set up while the page-change wipe is still moving), which drew a second, offset character over the first. Width
   and height are both explicit for the same reason: Safari sizes a <canvas> from its own buffer otherwise. */
.art, .board { position: absolute; left: 0; bottom: 0; display: block;
  width: calc(var(--hero-h) * 896 / 1200); height: var(--hero-h); }
.board { display: none; }      /* removed by request; the markup stays out of the page */
.board::before, .board::after { content: ""; position: absolute; inset: 0; clip-path: inset(4.5% 3% 3% round 28px); }
.board::before { clip-path: none; inset: 4.5% 3% 3%; border-radius: 28px; background: var(--board);
  box-shadow: inset 0 0 0 1px var(--board-edge), 0 34px 70px -40px rgba(0, 0, 0, .7); }
.board::after {
  background: radial-gradient(circle, var(--dot) 1px, transparent 1.5px) center / 16px 16px;
  -webkit-mask: url(assets/dotmask.png?v=9) 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse 62% 54% at 50% 46%, transparent 35%, #000 100%);
  -webkit-mask-composite: source-in;
  mask: url(assets/dotmask.png?v=9) 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse 62% 54% at 50% 46%, transparent 35%, #000 100%);
  mask-composite: intersect; }
.poster { z-index: 1; }
#c { z-index: 2; opacity: 0; transition: opacity .35s ease; }
.stage.ready #c { opacity: 1; }
/* once the live layer is drawing it is the character: the picture under it goes, so the two can never both show */
.stage.ready .poster { visibility: hidden; transition: visibility 0s linear .4s; }
.stage.fallback #c { display: none; }
.stage.fallback .poster { visibility: visible; transition: none; }

.sticker { position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 16px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6), 0 0 0 3px #fff; transform: rotate(var(--r, 0deg)); }
.sticker svg { display: block; }
.st-figma { width: 64px; height: 64px; left: -34px; top: 18%; --r: -9deg; background: #1e1e1e; }
.st-framer { width: 60px; height: 60px; right: -26px; top: 9%; --r: 8deg; background: #0a0a0a; }
.st-cursor { left: -18px; bottom: 26%; --r: -6deg; background: none; box-shadow: none; border-radius: 0; }
.st-swatch { width: 74px; height: 40px; right: -32px; bottom: 16%; --r: -7deg; border-radius: 10px; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr); place-items: stretch; background: #fff; }
.st-swatch i { display: block; height: 100%; }
.st-spark { width: 30px; height: 30px; right: 18%; top: -14px; background: none; box-shadow: none; color: var(--butter); }
/* the stickers drift, slowly and a few px, each on its own period so they never move together; the star also
   breathes. `translate` and `scale` leave each sticker's own tilt (transform) alone. */
@keyframes st-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes st-twinkle { 0%, 100% { translate: 0 0; scale: 1; opacity: 1; } 50% { translate: 0 -4px; scale: 1.12; opacity: .82; } }
.sticker { animation: st-float 5.2s ease-in-out infinite; }
.st-figma { animation-duration: 5.6s; animation-delay: -1.1s; }
.st-framer { animation-duration: 4.8s; animation-delay: -3.2s; }
.st-cursor { animation-duration: 6.2s; animation-delay: -2.4s; }
.st-swatch { animation-duration: 5.1s; animation-delay: -.4s; }
.st-spark { animation: st-twinkle 3.6s ease-in-out -1.8s infinite; }
@media (prefers-reduced-motion: reduce) { .sticker, .st-spark { animation: none; } }

/* ---- what i do ---- */
.statement { font-size: clamp(40px, 6.6vw, 98px); color: var(--dim); }
.statement b { font-weight: inherit; color: var(--text); }
.statement .chip { display: inline-flex; vertical-align: middle; margin: 0 .12em; transform: translateY(-.06em); }
.chip-notes { gap: 4px; }
.chip-notes i { width: .42em; height: .42em; border-radius: 3px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6); }
.chip-notes i:nth-child(1) { background: var(--butter); transform: rotate(-8deg); }
.chip-notes i:nth-child(2) { background: var(--lilac); transform: rotate(5deg) translateY(.08em); }
.chip-notes i:nth-child(3) { background: var(--sky); transform: rotate(-3deg); }
.chip-pen { width: 1.3em; height: .7em; }
.chip-btn { align-items: center; font: 600 .2em/1 var(--body); letter-spacing: 0; height: 2.4em; padding: 0 .9em;
  border-radius: 1.2em; background: var(--sky); color: var(--select-ink); transform: translateY(-.25em) rotate(-4deg); }
.statement-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--edge); }

.skills { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 52px); }
.skill { grid-column: span 3; position: relative; min-height: 230px; padding: 18px; border: 1px solid var(--edge); border-radius: 8px;
  background: var(--frame); transition: border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease); }
.skill:hover { border-color: var(--edge-2); background: var(--frame-2); }
.skill.wide { grid-column: span 6; }
.skill .label, .skill p { position: relative; z-index: 1; }
.skill p { margin-top: 6px; max-width: 26em; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.skill .art-sm { position: absolute; inset: 96px 18px 18px; display: grid; place-items: center; }
.skill .art-sm svg { width: 100%; max-width: 280px; height: 100%; max-height: 110px; overflow: visible; }
.skill .art-sm svg .lift, .skill .art-sm svg .spin { transition: transform var(--t-slow) var(--ease); transform-box: fill-box; transform-origin: center; }
.skill:hover .lift { transform: translateY(-5px); }
.skill:hover .spin { transform: rotate(-10deg); }

/* ---- work ---- */
.work-head { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.work-head .display { font-size: clamp(64px, 9vw, 132px); }
.work-head .hand { font-size: clamp(20px, 2vw, 28px); padding-bottom: .9em; }
.rows { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--edge); }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--edge); }
.row .thumb { width: clamp(64px, 7vw, 96px); aspect-ratio: 1; border-radius: 20px; overflow: hidden; border: 3px solid #f6f6f6;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .8);
  transition: rotate .5s cubic-bezier(.16, 1, .3, 1), scale .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s cubic-bezier(.16, 1, .3, 1); }
.row .thumb picture { display: block; height: 100%; }
.row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.row:hover .thumb { rotate: -6deg; scale: 1.1; box-shadow: 0 22px 36px -14px rgba(0, 0, 0, .9); }
.row h3 { transition: translate .5s cubic-bezier(.16, 1, .3, 1); }
.row:hover h3 { translate: 4px 0; }
.row h3 a { color: inherit; text-decoration: none; }
.row h3 { font-size: clamp(30px, 3.6vw, 54px); }
.row p { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.row .row-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.row .row-act { display: grid; gap: 12px; justify-items: stretch; }

/* ---- process: pinned; the frame stays in view while the page scrolls through four stages. One playhead: the
   scroll's progress through the pin (--p, 0..1) places it on the timeline, and the stage is the quarter it is in.
   The artboard beside the copy shows the stage: the same nine shapes, moved and restyled by site.js, go from
   scattered research notes to clusters, a wireframe and finished UI. ---- */
.pin { position: relative; height: calc(100 * var(--vhu) + 3 * 70 * var(--vhu)); }
/* the pinned stage fills the window from the very top: a link to it lands it pinned, not a nav's height short */
.board-sec:has(> .pin:not(.flow)) { scroll-margin-top: calc(-1 * var(--nav-space)); }
.pin-in { position: sticky; top: 0; min-height: calc(100 * var(--vhu)); display: flex; align-items: center;
  padding: calc(var(--nav-space) + 8px) 0 24px; }
.pin-in > .wrap { width: 100%; }
.process-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26em); gap: 24px; align-items: end; }
.process-head .display { font-size: clamp(44px, 5.8vw, 88px); }

.pv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  margin-top: clamp(24px, 3.4vw, 44px); }
.pv-copy { display: grid; }
.pv-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .45s var(--ease), translate .6s var(--ease), visibility 0s linear .45s; }
.pv-panel.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: .08s, .08s, 0s; }
.pv-idx { color: var(--text-3); }
.pv-idx b { font-weight: 500; color: var(--select-text); }
.pv-panel h3 { margin-top: 10px; font-size: clamp(40px, 4.4vw, 68px); }
.pv-say { margin-top: 14px; max-width: 27em; color: var(--text-2); }
.pv-panel .label { margin-top: 22px; }
.pv-out { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pv-out li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border: 1px solid var(--edge-2); border-radius: 999px;
  font-size: 14px; line-height: 1.3; color: var(--text-2); }
.pv-out li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }

/* the artboard: a frame on its own dotted canvas, with a file name and zoom like a design tool's */
.pv-board { min-width: 0; justify-self: center; width: min(100%, calc(36 * var(--vhu) * 4 / 3)); }   /* as wide as its artboard, so the file name sits on its edge */
.pv-meta { display: flex; justify-content: space-between; padding: 0 2px 8px; }
.pv-file { color: var(--select-text); }
.pv-art { position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden;
  border: 1px solid var(--edge); border-radius: 12px; background-color: var(--canvas);
  background-image: radial-gradient(circle, var(--tick) 1px, transparent 1.4px); background-size: 18px 18px; }
.pv-el { position: absolute; display: block; left: 0; top: 0; width: 0; height: 0;
  transition: left .8s cubic-bezier(.16, 1, .3, 1), top .8s cubic-bezier(.16, 1, .3, 1), width .8s cubic-bezier(.16, 1, .3, 1),
    height .8s cubic-bezier(.16, 1, .3, 1), rotate .8s cubic-bezier(.16, 1, .3, 1), border-radius .6s ease,
    background-color .6s ease, box-shadow .6s ease; }
.pv-still .pv-el, .pv-still .pv-el::after { transition: none !important; }
/* two lines of "writing" on the notes and cards */
.pv-el::after { content: ""; position: absolute; left: 14%; right: 26%; top: 18%; height: 34%; opacity: var(--ln, 0);
  background: linear-gradient(var(--lc, transparent) 0 0) 0 0 / 100% 18% no-repeat, linear-gradient(var(--lc, transparent) 0 0) 0 62% / 70% 18% no-repeat;
  border-radius: 2px; transition: opacity .5s ease; }
.pv-note { position: absolute; z-index: 2; opacity: 0; translate: 0 6px; white-space: nowrap; pointer-events: none;
  transition: opacity .35s ease, translate .5s cubic-bezier(.16, 1, .3, 1); }
.pv-note.mono { font-size: 11px; color: var(--text-3); }
.pv-note.hand { font-size: clamp(15px, 1.5vw, 20px); color: var(--text-2); rotate: -3deg; }
.pv-tag { padding: 3px 7px; border-radius: 6px; background: var(--frame-2); box-shadow: inset 0 0 0 1px var(--edge-2); }
.pv-tag.ok { color: #0f3d24; background: #9fe3bd; box-shadow: none; }
[data-stage="0"] .pv-note.s0, [data-stage="1"] .pv-note.s1, [data-stage="2"] .pv-note.s2, [data-stage="3"] .pv-note.s3 {
  opacity: 1; translate: 0 0; transition-delay: .35s; }
/* redlines: a measured gap, as a developer hand-off shows it */
.pv-red { height: 0; border-top: 1px solid var(--select); }
.pv-red::before, .pv-red::after { content: ""; position: absolute; top: -4px; width: 1px; height: 7px; background: var(--select); }
.pv-red::before { left: 0; } .pv-red::after { right: 0; }
.pv-red b { position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 1px 5px; border-radius: 4px; background: var(--select); color: #fff;
  font: 500 10px/1.3 var(--mono); }
.pv-red.v { width: 0; border-top: 0; border-left: 1px solid var(--select); }
.pv-red.v::before, .pv-red.v::after { left: -4px; width: 7px; height: 1px; top: 0; }
.pv-red.v::after { top: auto; bottom: 0; right: auto; }
.pv-red.v b { left: 0; top: 50%; }
.pv-cursor { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }

/* the timeline: a ruler with the playhead on it, the four stages as its segments */
.scrub { --p: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(24px, 3.4vw, 40px); padding-top: 10px; }
.scrub-ruler { position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none; border-top: 1px solid var(--edge-2);
  background: linear-gradient(90deg, var(--tick-strong) 1px, transparent 1px) 0 0 / 40px 8px repeat-x,
    linear-gradient(90deg, var(--tick) 1px, transparent 1px) 0 0 / 8px 4px repeat-x; }
.scrub-fill { position: absolute; left: 0; top: -1px; bottom: 0; width: calc(var(--p) * 100%);
  background: color-mix(in srgb, var(--select) 24%, transparent); border-top: 1.5px solid var(--select); }
.scrub-head { position: absolute; top: -7px; bottom: -6px; left: calc(var(--p) * 100%); width: 1.5px; translate: -50% 0; background: var(--select); }
.scrub-head::before { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 6px; translate: -50% 0; background: var(--select);
  clip-path: polygon(0 0, 100% 0, 50% 100%); }
.scrub-step { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 16px 12px 4px 12px; border: 0;
  border-left: 1px solid var(--edge); background: none; color: var(--text-3); text-align: left; cursor: var(--pointer, pointer);
  font: 760 clamp(17px, 1.6vw, 24px)/1 var(--display); letter-spacing: -.03em; transition: color var(--t-mid) var(--ease); }
.scrub-step:first-of-type { border-left-color: transparent; padding-left: 0; }
.scrub-step .n { font: 500 11px/1 var(--mono); letter-spacing: .02em; color: var(--text-3); transition: color var(--t-mid) var(--ease); }
.scrub-step.is-past { color: var(--text-2); }
.scrub-step:hover, .scrub-step[aria-selected="true"] { color: var(--text); }
.scrub-step[aria-selected="true"] .n { color: var(--select-text); }
.scrub-step:focus-visible { outline-offset: -2px; }

/* the pinned frame has to fit the window it is pinned in: every vertical size is capped by the height as well as
   the width, so a short laptop screen tightens evenly; site.js lets it flow if it still cannot fit */
.pin .frame { padding-block: min(var(--pad), calc(6 * var(--vhu))); }
.pin .process-head .display { font-size: clamp(34px, min(5.4vw, calc(6.4 * var(--vhu))), 84px); }
.pin .pv { margin-top: clamp(14px, min(3vw, calc(3.6 * var(--vhu))), 40px); }
.pin .pv-panel h3 { font-size: clamp(30px, min(4.4vw, calc(5.6 * var(--vhu))), 68px); }
.pin .scrub { margin-top: clamp(14px, min(3vw, calc(3.4 * var(--vhu))), 40px); }

/* ---- about ---- */
.about .frame { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.polaroid { position: relative; justify-self: center; width: min(100%, 380px); padding: 12px 12px 16px; background: #fff; border-radius: 6px;
  transform: rotate(-3deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); transition: transform var(--t-mid) var(--ease); }
.polaroid:hover { transform: rotate(-1deg); }
.polaroid .pic { position: relative; overflow: hidden; border-radius: 3px; background: var(--board); }
/* the picture is its own 4:5 box, standing on the bottom edge at 94% of its height (the top padding is the other 6%).
   It used to hang from a percentage height inside the box, which iOS Safari can fail to resolve: the image then
   came out at its full 530px and was cropped to a slice of her. A browser without aspect-ratio shows it whole. */
.polaroid .pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; padding-top: 7.5%; object-fit: contain; object-position: 50% 100%; }
/* a photograph fills the polaroid instead of standing in it */
.polaroid.photo .pic img { padding-top: 0; object-fit: cover; object-position: 50% 30%; }
.polaroid figcaption { margin-top: 10px; text-align: center; font-family: var(--hand); font-size: 22px; color: #2a2a2a; }
.polaroid .tape { position: absolute; left: 50%; top: -12px; width: 92px; height: 26px; transform: translateX(-50%) rotate(2deg);
  background: rgba(246, 224, 139, .75); }
.about-copy .display { font-size: clamp(40px, 4.6vw, 72px); margin-top: 10px; }
.about-copy .lead { margin-top: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips li { padding: 8px 14px; border: 1px solid var(--edge-2); border-radius: 999px; font-size: 14px; color: var(--text-2); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--edge); }
.tools .tool { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.tools .ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; }

/* ---- contact ---- */
.contact .frame { overflow: hidden; padding-bottom: 0; border-color: transparent; color: #fff;
  background: radial-gradient(90% 120% at 10% 0%, #6a4fe0 0%, #2b1878 42%, #120a35 100%); }   /* until the water draws */
.contact .frame .lead { color: #e7e0ff; }
.contact .frame .hand { color: #efe9ff; }
.contact .waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the invitation to touch the water, in the open right half; the arrow ends where waves.js lets a drip fall */
.water-hint { position: absolute; z-index: 1; right: clamp(56px, 11%, 170px); top: 30%; margin: 0; pointer-events: none;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.15; color: #efe9ff; rotate: -4deg; transition: opacity .6s var(--ease); }
.water-hint svg { display: block; width: clamp(84px, 7vw, 110px); height: auto; margin: 10px 0 0 34%; opacity: .85; }
.water-hint .to { position: absolute; left: calc(34% + clamp(84px, 7vw, 110px) * .98); top: calc(100% + 26px); width: 2px; height: 2px; }
.water-hint.used { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .water-hint { display: none; } }
/* the copy and the brief side by side; the water stays live around and under the brief (only its fields take the
   pointer), and the hint sits in the open water under the copy */
.contact-in { position: relative; z-index: 1; pointer-events: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  align-items: start; gap: clamp(32px, 5vw, 80px); padding-bottom: var(--pad); }
.contact-in a, .contact-in button, .contact-in .brief { pointer-events: auto; }
.contact .display { font-size: clamp(48px, 5.6vw, 92px); max-width: 7.5em; }
.contact .lead { margin-top: 18px; max-width: 30em; }
.contact .hand { margin-top: clamp(28px, 3vw, 40px); font-size: 24px; }
.water-hint { left: var(--pad); right: auto; top: auto; bottom: calc(var(--pad) + 40px); }
.water-hint svg { margin-left: 24%; }
.water-hint .to { left: calc(24% + clamp(84px, 7vw, 110px) * .98); }
@media (max-width: 1080px) {                                /* stacked: the copy, the brief, then the hint on its own row */
  .contact-in { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--pad) + 76px); }
  .contact .display { font-size: clamp(52px, 8vw, 100px); }
  .contact .hand-arr { display: inline-block; rotate: 90deg; }
  .brief { max-width: 560px; }
  .water-hint { right: var(--pad); bottom: calc(var(--pad) - 2px); font-size: 19px; rotate: -2deg; }
  .water-hint svg { display: none; }
  .water-hint .to { left: 82%; top: -120px; }               /* the drip falls in the water beside the brief */
}

/* the brief: frosted glass on the water, light enough to show the ripples through it and solid enough to read */
.brief { --g-line: rgba(255, 255, 255, .2); position: relative; display: grid; gap: 18px; padding: clamp(20px, 2.4vw, 28px); color: #fff;
  color-scheme: dark; border-radius: 22px; border: 1px solid var(--g-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 60%), rgba(20, 10, 60, .28);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 40px 80px -40px rgba(6, 2, 28, .9); }
.brief-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px dashed var(--g-line); }
.brief-head .label, .brief-head .mono { color: rgba(239, 233, 255, .78); }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { display: flex; align-items: baseline; gap: 8px; font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(239, 233, 255, .86); }
.field label .n { color: var(--sky); }
.field-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.brief input, .brief select, .brief textarea { width: 100%; min-height: 50px; margin: 0; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; background: rgba(12, 5, 40, .42); color: #fff; font: 400 16px/1.4 var(--body);   /* 16px: iOS zooms in on smaller */
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.brief textarea { min-height: 112px; resize: vertical; }
.brief ::placeholder { color: rgba(231, 224, 255, .5); opacity: 1; }
.brief input:hover, .brief select:hover, .brief textarea:hover { border-color: rgba(255, 255, 255, .3); }
.brief input:focus, .brief select:focus, .brief textarea:focus { outline: none; border-color: var(--sky); background: rgba(12, 5, 40, .55);
  box-shadow: 0 0 0 3px rgba(221, 210, 255, .22); }
.brief [aria-invalid="true"] { border-color: var(--peach); box-shadow: 0 0 0 3px rgba(245, 164, 147, .2); }
.brief .select { position: relative; }
.brief .select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; translate: 0 -70%; rotate: 45deg;
  border: solid rgba(239, 233, 255, .8); border-width: 0 1.5px 1.5px 0; pointer-events: none; }
.brief select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: var(--pointer, pointer); text-overflow: ellipsis; }
.brief option { background: #1d1446; color: #fff; }
.brief-err { margin: -6px 0 0; font: 500 13px/1.4 var(--body); color: #ffd3c9; }
.brief-err:empty { display: none; }
.brief-act { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.brief-act .btn { min-height: 52px; padding: 0 16px; font-size: 15px; }
.brief-act .btn:not(.ghost) { background: #fff; border-color: #fff; color: #140c33; }
.brief-act .btn .wa { width: 19px; height: 19px; flex: 0 0 auto; color: #1faa53; }
.brief-act .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.brief-act .btn.ghost:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); }
.brief-note { font-size: 13px; line-height: 1.5; color: rgba(239, 233, 255, .72); }
/* the other ways in, as the card's last row: her resume and her profiles */
.brief-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--g-line); }
.brief-alt > span { flex: 1 1 auto; font-size: 14px; color: rgba(239, 233, 255, .86); }
.brief-alt .btn.ghost, .brief-alt .soc { min-height: 40px; height: 40px; color: #fff; border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06); }
.brief-alt .btn.ghost { padding: 0 14px 0 12px; font-size: 14px; }
.brief-alt .btn.ghost:hover, .brief-alt .soc:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); }
.brief-alt .socials { gap: 10px; }
@media (max-width: 520px) {
  .field-row, .brief-act { grid-template-columns: minmax(0, 1fr); }
}

/* ---- footer: a ruler along the bottom of the canvas ---- */
.footer { margin-top: var(--gap); border-top: 1px solid var(--edge);
  background: repeating-linear-gradient(90deg, var(--edge-2) 0 1px, transparent 1px 12px) top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--edge-2) 0 1px, transparent 1px 120px) top / 100% 14px no-repeat; }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 34px; padding-bottom: 34px; }
.footer-in .brand .mark { height: 20px; }
.footer-in nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.footer-in nav a { font-size: 14px; color: var(--text-3); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer-in nav a:hover { color: var(--text); }
.footer-in .socials { margin-left: 4px; }
.footer-in .soc { height: 36px; min-width: 36px; }

/* ---- entrance: content is visible without JS; site.js opts in. The name arrives out of a blur, once. ---- */
.motion [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal="2"] { transition-delay: .1s; }
.motion [data-reveal="3"] { transition-delay: .2s; }
.motion .hero h1[data-reveal] { opacity: 1; transform: none; }
.motion .hero h1 .l { filter: blur(14px); opacity: 0; transition: filter 1s var(--ease), opacity 1s var(--ease); }
.motion .hero h1.is-in .l { filter: none; opacity: 1; }
.motion .hero h1.is-in .l + .l { transition-delay: .18s; }

/* ---- tablet ---- */
@media (max-width: 1080px) {
  :root { --hero-h: min(calc(56 * var(--vhu)), 560px); }
  .skill, .skill.wide { grid-column: span 6; }
  .process-head { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --hero-h: min(calc(52 * var(--vhu)), 520px); }
  .hero .frame { grid-template-columns: 1fr; row-gap: 48px; }
  .pv { grid-template-columns: minmax(0, 1fr); gap: 18px; }        /* the artboard over the copy */
  .pv-board { order: -1; }
  .pv-board { width: min(100%, calc(30 * var(--vhu) * 16 / 10)); }
  .pv-art { aspect-ratio: 16 / 10; }
  .hero h1 { font-size: min(150px, 25.5cqi); }
  .stage { justify-self: center; }
  .about .frame { grid-template-columns: 1fr; }
}

/* ---- phone ---- */
@media (max-width: 720px) {
  :root { --hero-h: min(calc(46 * var(--vhu)), 420px); --nav-top: 10px; }
  .nav, .nav.compact { width: calc(100% - 24px) !important; overflow: visible; }   /* over site.js's inline width */
  .nav-ruler { border-radius: 0 0 14px 14px; overflow: hidden; }
  .nav-range { display: none; }
  .nav-in { grid-template-columns: 1fr auto; gap: 8px; padding: 0 6px 9px 16px; }
  .nav-end { gap: 8px; }
  .nav-mid { display: none; }                               /* the links live in the menu sheet (site.js) */
  .menu-btn { display: inline-grid; place-items: center; width: 40px; height: 38px; border: 0; border-radius: 8px; background: none;
    color: var(--text); cursor: var(--pointer, pointer); }
  .menu-btn span, .menu-btn span::before { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform var(--t-fast) var(--ease); }
  .menu-btn span::before { content: ""; transform: translateY(6px); }
  .menu-btn[aria-expanded="true"] span { transform: translateY(3px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span::before { transform: rotate(-90deg); }
  .frame-meta .dims { display: none; }
  .st-figma { width: 52px; height: 52px; left: -14px; }
  .st-framer { width: 48px; height: 48px; right: -12px; }
  .st-framer svg { width: 16px; height: 24px; }
  .st-swatch { right: -12px; }
  .st-cursor { left: -6px; }
  .skills { grid-template-columns: 1fr 1fr; gap: 10px; }
  .skill, .skill.wide { grid-column: span 2; min-height: 210px; }
  /* a project is a card: its cover full width (the <picture> swaps in the wide cover), then the text, then the actions */
  .row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 0 30px; }
  .row .thumb { width: 100%; aspect-ratio: 808 / 632; border: 1px solid var(--edge); border-radius: 14px; box-shadow: none; }
  .row:hover .thumb { rotate: none; scale: none; box-shadow: none; }
  .row:hover h3 { translate: none; }
  .row h3 { font-size: 34px; }
  .row .row-meta { margin-top: 14px; }
  .row .row-act { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .pin { height: calc(100 * var(--vhu) + 3 * 60 * var(--vhu)); }
  .process-head .lead { font-size: 15px; }
  /* tight enough to pin on a phone: the intro line goes (the title says it), the deliverables are one line of text */
  .process-head .lead { display: none; }
  .pv-board { width: min(100%, calc(22 * var(--vhu) * 16 / 10)); }
  .pv-say { font-size: 15px; margin-top: 8px; }
  .pv-panel .label { display: none; }
  .pv-out { display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
  .pv-out li { display: inline; padding: 0; border: 0; font-size: inherit; color: inherit; }
  .pv-out li::before { display: none; }
  .pv-out li + li::before { content: " · "; display: inline; width: auto; height: auto; background: none; }
  .scrub-step { padding: 14px 6px 2px 8px; }
  .scrub-step .nm { display: none; }                         /* the stage's name is in the copy above */
  .footer-in nav { margin-left: 0; width: 100%; }
  .footer-in .socials { margin-left: 0; }
}

/* a short screen cannot hold the pinned stage: let it flow */
@media (max-height: 620px) {
  .pin { height: auto; }
  .board-sec:has(> .pin) { scroll-margin-top: 0; }
  .pin-in { position: static; min-height: 0; padding: 0; }
}
.pin.flow { height: auto; }                                  /* too tall for this window even when tightened (site.js) */
.pin.flow .pin-in { position: static; min-height: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion [data-reveal], .motion .hero h1 .l { opacity: 1; transform: none; filter: none; transition: none; }
  .pv-panel, .pv-el, .pv-el::after, .pv-note, .row .thumb, .skill .art-sm svg .lift, .skill .art-sm svg .spin, .btn, .btn .arr, .link .arr, .polaroid, #c { transition: none; }
  .row:hover .thumb, .row:hover h3, .skill:hover .lift, .skill:hover .spin, .btn:hover { transform: none; }
  .polaroid, .polaroid:hover { transform: rotate(-3deg); }
}

/* ======================================================================= project pages ======================= */
.crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.crumb:hover { color: var(--text); }
.p-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.p-tags span { padding: 4px 10px; border: 1px solid var(--edge-2); border-radius: 999px; font: 500 11px/1.3 var(--mono); color: var(--text-2); }
.p-title { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin-top: 18px; }
.p-title .icon { flex: 0 0 auto; width: clamp(64px, 7vw, 104px); aspect-ratio: 1; border-radius: 22px; overflow: hidden; border: 3px solid #fff;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9); }
.p-title .icon img { width: 100%; height: 100%; object-fit: cover; }
.p-title h1 { font-size: clamp(56px, 8.4vw, 128px); }
.p-lead { margin-top: 20px; max-width: 34em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--text-2); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 36px 0 0; border: 1px solid var(--edge); border-radius: 8px; }
.facts > div { padding: 16px 18px; border-left: 1px solid var(--edge); }
.facts > div:first-child { border-left: 0; }
.facts dt { font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.facts dd { margin: 10px 0 0; font-weight: 600; }
.p-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* the project at a glance: the challenge, what she did, the result */
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.glance > div { position: relative; padding: 20px 20px 22px; border: 1px solid var(--edge); border-radius: 8px; background: var(--frame-2); overflow: hidden; }
.glance > div::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--select); transform-origin: left; }
.glance .label { color: var(--select-text); }
.glance p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--text); }

.figure .fig-meta { display: flex; justify-content: space-between; margin-bottom: 14px; }
.figure .shot { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge); }
.figure .shot img { width: 100%; height: auto; }
.figure .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .45)); }
.note-hand { position: absolute; z-index: 2; display: flex; align-items: flex-end; gap: 6px; font-family: var(--hand); font-size: clamp(18px, 2vw, 30px);
  color: #f3f3f3; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); white-space: nowrap; pointer-events: none; }
.note-hand svg { flex: 0 0 auto; width: clamp(40px, 5vw, 70px); height: auto; overflow: visible; }

/* the story: numbered chapters. A picture chapter keeps its words beside the picture on a wide screen (they stay in view
   while the picture scrolls); key points are three cards; a text chapter speaks up; a quote closes it. */
.story { position: relative; counter-reset: ch; }
.story .hint { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 6px; font-size: 22px; transform: rotate(-4deg); }
.chapter { counter-increment: ch; max-width: 900px; margin: 0 auto; }
.chapter.quote { counter-increment: none; }
.chapter + .chapter { margin-top: clamp(72px, 9vw, 136px); }
.chapter h2 { font-size: clamp(36px, 4vw, 56px); }
.ch-text h2::before { content: counter(ch, decimal-leading-zero); display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--select-text); }
.ch-text h2::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 18px; border-radius: 2px; background: var(--select); transform-origin: left; }
.ch-text p { margin-top: 16px; max-width: 34em; color: var(--text-2); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; }
.window { position: relative; margin-top: 26px; border-radius: 12px; background: var(--frame-2); border: 1px solid var(--edge-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.window .bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--edge-2); }
.window .bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.window .bar span { margin-left: 10px; font: 500 11px/1 var(--mono); color: var(--text-3); }
.window img { width: 100%; height: auto; border-radius: 0 0 11px 11px; }

.pts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: pt; }
.pts li { counter-increment: pt; position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 22px 26px; border: 1px solid var(--edge-2);
  border-radius: 12px; background: var(--frame-2); transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .3s ease; }
.pts li::before { content: counter(pt, decimal-leading-zero); margin-bottom: 14px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--text-3); transition: color .3s ease; }
.pts li:hover { transform: translateY(-4px); border-color: var(--select); }
.pts li:hover::before { color: var(--select-text); }
.pts b { font: 700 clamp(19px, 1.6vw, 23px)/1.15 var(--display); letter-spacing: -.02em; color: var(--text); }
.pts span { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.chapter.text p { font-size: clamp(20px, 2vw, 28px); line-height: 1.45; color: var(--text); max-width: 30em; text-wrap: pretty; }
.chapter.quote blockquote { position: relative; margin: 0 auto; max-width: 980px; padding-top: 72px; text-align: center; }
.chapter.quote blockquote::before { content: "\201C"; position: absolute; left: 50%; top: -16px; translate: -50% 0; font: 760 150px/1 var(--display); color: var(--select); }
.chapter.quote p { margin: 0; font: 760 clamp(30px, 4vw, 58px)/1.08 var(--display); letter-spacing: -.035em; color: var(--text); text-wrap: balance; }
.chapter.quote footer { margin-top: 24px; font-size: clamp(20px, 2vw, 26px); color: var(--text-2); }
.chapter.quote footer::before { content: "\2014  "; }

@media (min-width: 1000px) {
  .chapter { max-width: none; }
  .chapter:has(> .window), .chapter.text { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
  .chapter:has(> .window) > .ch-text { position: sticky; top: calc(var(--nav-space, 96px) + 32px); }
  .chapter:has(> .window) > .window { margin-top: 0; }
  .story .hint { position: static; justify-content: flex-end; margin: 0 0 18px; }
  .chapter.text > .ch-text { display: contents; }
  .chapter.text > .ch-text p { margin-top: 30px; }
}

/* motion: the pieces of a chapter arrive one after another as it comes into view */
.motion .glance > div, .motion .pts li { opacity: 0; translate: 0 18px; transition: opacity .7s var(--ease), translate .7s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1), border-color .3s ease; }
.motion .glance.is-in > div, .motion .is-in .pts li { opacity: 1; translate: 0 0; }
.motion .glance > div:nth-child(2), .motion .pts li:nth-child(2) { transition-delay: .09s, .09s, 0s, 0s; }
.motion .glance > div:nth-child(3), .motion .pts li:nth-child(3) { transition-delay: .18s, .18s, 0s, 0s; }
.motion .glance > div::before, .motion .ch-text h2::after { transform: scaleX(0); transition: transform 1s cubic-bezier(.16, 1, .3, 1) .25s; }
.motion .glance.is-in > div::before, .motion .is-in .ch-text h2::after { transform: none; }
.motion .chapter.quote blockquote::before { opacity: 0; transform: scale(.5) rotate(-14deg); transition: opacity .6s ease .1s, transform .9s cubic-bezier(.34, 1.56, .64, 1) .1s; }
.motion .chapter.quote.is-in blockquote::before { opacity: 1; transform: none; }

/* ---- the design file: the project's Figma, embedded when asked (figma.js). Every state is a layer in one fixed-height
   stage, switched by data-state, so nothing shifts as it loads. ---- */
.fig-sec[hidden] { display: none; }
.fig-head h2 { font-size: clamp(36px, 4vw, 56px); }
.fig-head p { margin-top: 12px; max-width: 36em; color: var(--text-2); }
.fx, .fx-spacer { height: clamp(420px, 64vh, 780px); margin-top: 26px; }
.fx { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--edge-2); background-color: var(--frame-2);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px; }
.fx > * { position: absolute; inset: 0; }
.fx iframe { width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity var(--t-mid) var(--ease); }
.fx[data-state="ready"] iframe { opacity: 1; }
.fx-invite, .fx-error, .fx-placeholder, .fx-skel { opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility 0s linear var(--t-mid); }
.fx[data-state="invite"] .fx-invite, .fx[data-state="error"] .fx-error, .fx[data-state="placeholder"] .fx-placeholder,
.fx[data-state="loading"] .fx-skel { opacity: 1; visibility: visible; transition-delay: 0s; }
.fx-invite, .fx-error, .fx-placeholder { z-index: 1; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: var(--pad); text-align: center; }
.fx-title { font-size: clamp(28px, 3vw, 42px); }
.fx-line { max-width: 30em; color: var(--text-2); }
.fx-invite .btn, .fx-error .btn { margin-top: 10px; }
.fx-placeholder { border: 1.5px dashed var(--select); border-radius: inherit; }
.fx-placeholder code { font: 500 .92em var(--mono); color: var(--text); }
/* loading: a few quiet frames that breathe, not a spinner (in a box this size a spinner reads as an error) */
.fx-skel { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 100%; align-items: start; gap: clamp(16px, 2.4vw, 32px); padding: clamp(24px, 5vw, 64px); }
.fx-skel i { display: block; height: 62%; border-radius: 8px; background: var(--hover); border: 1px solid var(--edge);
  animation: fx-breath 1.6s var(--ease) infinite alternate; }
.fx-skel i:nth-child(2) { height: 48%; animation-delay: .2s; }
.fx-skel i:nth-child(3) { height: 74%; animation-delay: .4s; }
.fx-skel i:nth-child(4) { position: absolute; left: clamp(24px, 5vw, 64px); top: clamp(10px, 2vw, 26px); width: 22%; height: 8px; border-radius: 4px; }
@keyframes fx-breath { from { opacity: .35; } to { opacity: 1; } }
/* expand sits top-right: Figma's own zoom controls are bottom-right */
.fx > .fx-expand { inset: 12px 12px auto auto; z-index: 2; display: none; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; border: 1px solid var(--edge-2); background: var(--nav-bg); color: var(--text-2); cursor: var(--pointer, pointer);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: color var(--t-fast), border-color var(--t-fast); }
.fx[data-state="ready"] > .fx-expand { display: grid; }
.fx-expand svg { width: 18px; height: 18px; }
.fx-expand .c, .fx.is-open .fx-expand .o { display: none; }
.fx.is-open .fx-expand .c { display: inline; }
.fx-shield { z-index: 1; display: grid; place-items: end center; padding: 0 0 22px; border: 0; background: transparent; color: inherit; }
.fx-shield span { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--edge-2); background: var(--nav-bg);
  font: 500 12px/1 var(--mono); color: var(--text-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (hover: hover) and (pointer: fine) {
  .fx-expand:hover { color: var(--text); border-color: var(--text-3); }
}
.fx.is-open { position: fixed; z-index: 41; margin: 0; transform-origin: center; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
.fx-veil { position: fixed; inset: 0; z-index: 40; background: rgba(8, 8, 8, .74); opacity: 0; transition: opacity var(--t-mid) var(--ease); }
.fx-veil.on { opacity: 1; }
html.fx-locked { overflow: hidden; }
/* and a sideways two-finger swipe the design doesn't take all of never becomes the browser's "back" (macOS): only while
   the pointer is on the design or it's expanded, so swiping back works everywhere else on the site */
html.fx-locked, html.fx-locked body,
html:has(.fx[data-state="ready"]:hover), html:has(.fx[data-state="ready"]:hover) body { overscroll-behavior: none; }
html.fx-locked body { padding-right: var(--fx-bar, 0); }
@media (max-width: 720px) {
  .fx, .fx-spacer { height: clamp(320px, 52svh, 520px); }
  .fx-skel { grid-template-columns: 1fr 1fr; }
  .fx-skel i:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-skel i { animation: none; opacity: .7; }
  .fx iframe, .fx-invite, .fx-error, .fx-placeholder, .fx-skel, .fx-veil { transition: none; }
}
.pin-note { position: absolute; z-index: 4; }
.pin-note > button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; border: 2px solid #f6f6f6;
  background: var(--peach); color: #2b1a15; font: 700 12px/1 var(--body); cursor: var(--pointer, pointer); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.pin-note > button:hover { transform: scale(1.06); }
.pin-note .bubble { position: absolute; left: 46px; top: -4px; width: max-content; max-width: 260px; padding: 10px 12px; border-radius: 12px;
  background: #fff; color: #1a1a1a; font-size: 14px; line-height: 1.45; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.pin-note .bubble b { display: block; font: 600 11px/1.2 var(--mono); color: #666; margin-bottom: 4px; }
.pin-note:hover .bubble, .pin-note:focus-within .bubble, .pin-note.open .bubble { opacity: 1; transform: none; pointer-events: auto; }
.more .rows { margin-top: 24px; }

@media (max-width: 720px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(3) { border-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--edge); }
  .story .hint { position: static; margin-bottom: 24px; }
  .glance, .pts { grid-template-columns: 1fr; }
  .chapter.quote blockquote { padding-top: 56px; }
  .chapter.quote blockquote::before { font-size: 110px; }
  .pin-note .bubble { left: auto; right: 0; top: 44px; max-width: 220px; }
  .note-hand { font-size: 15px; white-space: normal; max-width: 44%; }
  .p-title { gap: 14px; }
  .p-title .icon { width: 56px; border-radius: 16px; }
  .p-title h1 { font-size: clamp(40px, 12.5vw, 72px); }
  .note-hand svg { width: 30px; }
}

/* ======================================================================= playground =========================== */
.play-page { overflow: hidden; height: 100svh; }
.play-page .ruler { display: none; }
.viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: grab; outline: none; }
.viewport.panning { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; width: 2600px; height: 2300px; transform-origin: 0 0; will-change: transform; }
.world.tidying .item { transition: left .7s cubic-bezier(.16, 1, .3, 1), top .7s cubic-bezier(.16, 1, .3, 1); }
.item { position: absolute; rotate: var(--r, 0deg); cursor: grab; user-select: none; -webkit-user-select: none; }
.item.dragging { cursor: grabbing; z-index: 50; }
.item img { pointer-events: none; -webkit-user-drag: none; }
.item.block { cursor: default; rotate: none; }
.item.block h1 { font-size: 96px; }
.item.block h2 { font-size: 64px; }
.item.block p { margin-top: 12px; max-width: 26em; color: var(--text-2); }
.item.block .hand { margin-top: 16px; display: flex; align-items: center; gap: 6px; font-size: 22px; }
.polaroid.item { width: 300px; padding: 12px 12px 14px; transform: none; }
.polaroid.item.wide { width: 380px; }
.polaroid.item:hover { transform: translateY(-3px); }
.polaroid.item .pic { aspect-ratio: auto; background: #ddd; }
.polaroid.item .pic img { position: static; transform: none; width: 100%; height: auto; max-width: 100%; aspect-ratio: auto; padding: 0; }
.polaroid.item figcaption { font-size: 21px; }
.polaroid .tape.t2 { background: rgba(200, 184, 242, .75); }
.polaroid .tape.t3 { background: rgba(169, 216, 245, .75); }
.polaroid .tape.t4 { background: rgba(245, 164, 147, .7); }
.sticky { width: 220px; min-height: 200px; padding: 22px 20px; background: var(--butter); color: #2a2412; font-family: var(--hand); font-size: 25px;
  line-height: 1.25; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
.sticky.lilac { background: var(--lilac); color: #231a3d; }
.sticky.sky { background: var(--sky); color: var(--select-ink); }
.gear { display: grid; place-items: center; transition: scale .3s cubic-bezier(.16, 1, .3, 1); }
.gear img { filter: drop-shadow(3px 0 0 #f6f6f6) drop-shadow(-3px 0 0 #f6f6f6) drop-shadow(0 3px 0 #f6f6f6)
  drop-shadow(0 -3px 0 #f6f6f6) drop-shadow(0 14px 16px rgba(0, 0, 0, .5)); }
.gear:hover { scale: 1.05; }
.gear.tile img { border-radius: 18px; }
.gear .review, .everyday .review { position: absolute; left: 50%; bottom: calc(100% + 12px); width: max-content; max-width: 230px; padding: 10px 12px; border-radius: 12px;
  background: #fff; color: #1a1a1a; font: 400 14px/1.45 var(--body); translate: -50% 4px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, translate .2s ease; }
.gear .review b, .everyday .review b { display: block; font-weight: 700; }
.gear:hover .review, .gear:focus-visible .review, .everyday:hover .review, .everyday:focus-visible .review { opacity: 1; translate: -50% 0; }
.phone-tile { width: 210px; padding: 8px; border-radius: 30px; background: var(--frame-2); border: 1px solid var(--edge-2); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .5); }
.phone-tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px; }
.phone-tile span { display: block; padding: 10px 6px 4px; font: 500 12px/1 var(--mono); color: var(--text-3); }
.phone-tile.motion { width: 280px; display: block; color: inherit; text-decoration: none; }
.phone-tile.motion img { aspect-ratio: 808 / 632; border-radius: 20px; }
.phone-tile.motion:hover span { color: var(--text); }
.ph-tag { position: absolute; right: -10px; top: -12px; z-index: 2; padding: 4px 8px; border-radius: 6px; background: var(--butter); color: #111;
  font: 600 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; rotate: 6deg; }
.zoombar { position: fixed; z-index: 11; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 6px;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.zoombar button { min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: 600 16px/1 var(--body); cursor: var(--pointer, pointer); }
.zoombar button:hover { background: var(--hover); }
.zoombar output { min-width: 48px; text-align: center; font: 500 12px/1 var(--mono); color: var(--text-2); }
.zoombar .tidy { background: var(--text); color: var(--canvas); font-size: 14px; white-space: nowrap; }
.zoombar .tidy:hover { background: #fff; }
@media (prefers-reduced-motion: reduce) { .world.tidying .item { transition: none; } .gear, .polaroid.item { transition: none; } }

/* ======================================================================= about page ========================== */
.about-hi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 80px); align-items: center; min-height: 460px; }
/* "Hi, I'm" over "Massa": sized from its column, like the home page's name, so the longer line always fits */
.about-hi > div:first-child { container-type: inline-size; min-width: 0; }
.about-hi h1 { font-size: min(160px, 29cqi); }
.about-hi h1 .l { display: block; white-space: nowrap; }
.about-hi .lead { margin-top: 20px; max-width: 30em; }
.about-hi .hi-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.about-hi .hi-acts .soc { height: 44px; min-width: 44px; }
.about-hi .hand { margin-top: 24px; font-size: 24px; }
.hi-pic { width: min(320px, 70vw); transform: rotate(4deg); }
.hi-pic:hover { transform: rotate(2deg); }
.sec-title { font-size: clamp(48px, 7vw, 88px); }

/* how i got here: each period a spread. On the left what it was, when, and its title (it stays in view on a wide
   screen); on the right a pin board, the hero's dotted paper, with its notes and snapshots pinned in an even grid. */
.versions { list-style: none; margin: clamp(32px, 3.5vw, 52px) 0 0; padding: 0; display: grid; gap: clamp(40px, 5vw, 72px); }
.version { --tone: var(--sky); }
.version:nth-child(2) { --tone: var(--butter); }
.version:nth-child(3) { --tone: var(--peach); }
.version.now { --tone: var(--select); }
.v-card { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.v-meta { position: sticky; top: calc(var(--nav-space, 84px) + 28px); padding-top: 6px; }
.v-era { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px; border: 1px solid var(--edge-2); border-radius: 999px;
  font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.v-era::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.version.now .v-era { border-color: color-mix(in srgb, var(--select) 55%, transparent); color: var(--text); }
.version.now .v-era::before { box-shadow: 0 0 0 0 color-mix(in srgb, var(--select) 60%, transparent); animation: now-pulse 2.4s ease-out infinite; }
@keyframes now-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.v-meta .mono { margin: 18px 0 0; font-size: 12px; color: var(--text-3); }
.v-title { margin: 6px 0 0; font: 760 clamp(28px, 2.6vw, 38px)/1.02 var(--display); letter-spacing: -.04em; color: var(--text); text-wrap: balance; }

.v-board { --pin: #e5484d; position: relative; list-style: none; margin: 0; padding: clamp(30px, 3vw, 44px) clamp(22px, 2.6vw, 40px) clamp(34px, 3.4vw, 48px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 34px 26px; align-items: start; border-radius: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1.5px) center / 18px 18px, #1f1d1a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 20px 50px -30px rgba(0, 0, 0, .8); }
.version.now .v-board { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--select) 55%, transparent), inset 0 20px 50px -30px rgba(0, 0, 0, .8); }
.v-board > li { position: relative; rotate: -1.6deg; transition: rotate .5s cubic-bezier(.16, 1, .3, 1), translate .5s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease; }
.v-board > li:nth-child(4n + 2) { rotate: 1.3deg; }
.v-board > li:nth-child(4n + 3) { rotate: -.5deg; }
.v-board > li:nth-child(4n + 4) { rotate: 2deg; }
/* the push pin */
.v-board > li::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -7px; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75) 0 2px, transparent 3px), var(--pin);
  box-shadow: 0 3px 4px -1px rgba(0, 0, 0, .55), 2px 6px 6px -3px rgba(0, 0, 0, .4); }
.v-board > li:nth-child(3n + 2)::before { --pin: #8b6cff; }
.v-board > li:nth-child(3n + 3)::before { --pin: #f2b33d; }
.v-board > li:hover { rotate: 0deg; translate: 0 -5px; z-index: 1; }
.v-board .sticky { width: auto; min-height: 150px; padding: 26px 18px 20px; font-size: 20px; line-height: 1.28;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 18px 28px -18px rgba(0, 0, 0, .85); }
.v-board .sticky:hover { box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 28px 40px -20px rgba(0, 0, 0, .9); }
.sticky.butter { background: var(--butter); color: #2a2412; }
.sticky.sky { background: var(--sky); color: var(--select-ink); }
.sticky.peach { background: var(--peach); color: #3a160e; }
.v-board .snap { padding: 8px 8px 26px; border-radius: 4px; background: #fff; box-shadow: 0 18px 28px -18px rgba(0, 0, 0, .85); }
.v-board .snap img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.v-board .snap.phone img { aspect-ratio: 3 / 4; }
/* the notes drop onto the board one after another as it comes into view */
.motion .version[data-reveal] .v-board > li { opacity: 0; translate: 0 -16px; }
.motion .version.is-in .v-board > li { opacity: 1; translate: 0 0; transition: opacity .5s ease var(--d, 0s), translate .7s cubic-bezier(.34, 1.4, .64, 1) var(--d, 0s), rotate .5s cubic-bezier(.16, 1, .3, 1); }
.motion .version.is-in .v-board > li:hover { translate: 0 -5px; transition-delay: 0s; }
.v-board > li:nth-child(2) { --d: .07s; } .v-board > li:nth-child(3) { --d: .14s; } .v-board > li:nth-child(4) { --d: .21s; }
.v-board > li:nth-child(5) { --d: .28s; } .v-board > li:nth-child(n + 6) { --d: .35s; }

/* experience: a year axis with background lines, one row per place, a block per period */
.xp-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 28px; }
.xp-head .hand { margin-bottom: 14px; font-size: 22px; rotate: -4deg; }
.xp { margin-top: clamp(28px, 3vw, 44px); }
.xp-chart { --label: 210px; position: relative; }
.xp-axis { position: relative; height: 24px; margin-left: var(--label); font: 500 11px/1 var(--mono); color: var(--text-3); }
.xp-axis span { position: absolute; top: 0; translate: -50% 0; }
.xp-lines { position: absolute; top: 30px; bottom: 0; left: var(--label); right: 0; pointer-events: none; }
.xp-lines span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--edge-2); opacity: .7; }
.xp-rows { position: relative; display: grid; gap: 14px; margin-top: 10px; }
.xp-row { display: flex; align-items: center; }
.xp-row .who { flex: 0 0 var(--label); display: flex; align-items: center; gap: 12px; padding-right: 18px; font-weight: 600; }
.xp-row .who i { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #f3f3f3; color: #111;
  font: 700 13px/1 var(--display); font-style: normal; }
.xp-row .lane { position: relative; flex: 1; height: 54px; }
.xp-block { position: absolute; top: 0; height: 100%; padding: 0; border: 0; background: none; cursor: var(--pointer, pointer); }
.xp-block .bar { display: block; height: 100%; border-radius: 12px; overflow: hidden; position: relative;
  transition: translate .3s cubic-bezier(.16, 1, .3, 1); }
.xp-block .bar i { position: absolute; top: 0; bottom: 0; width: 1.5px; background: rgba(0, 0, 0, .25); }
.xp-block:hover .bar, .xp-block:focus-visible .bar, .xp-block[data-open="true"] .bar { translate: 0 -4px; }
.xp-block .tip { position: absolute; z-index: 20; bottom: calc(100% + 10px); left: 0; width: max-content; max-width: 16rem; padding: 10px 12px;
  border: 1px solid var(--edge-2); border-radius: 12px; background: var(--frame-2); text-align: left; font: 400 13px/1.45 var(--body); color: var(--text-2);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity .2s ease, translate .2s ease; }
.xp-block .tip b { display: block; color: var(--text); font-weight: 600; }
.xp-block.end .tip { left: auto; right: 0; }
.xp-block:hover .tip, .xp-block:focus-visible .tip, .xp-block[data-open="true"] .tip { opacity: 1; translate: 0 0; }
.c-lilac { background: var(--lilac); } .c-peach { background: var(--peach); } .c-butter { background: var(--butter); }
.c-sky { background: var(--sky); } .c-blue { background: #9d86ff; }
.xp-list { display: grid; gap: 0; border-top: 1px solid var(--edge); }
.xp-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 16px; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--edge);
  position: relative; font-size: 15px; color: var(--text-2); }
.xp-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; border-radius: 3px; background: var(--c, #888); }
.xp-list b { color: var(--text); }
.xp-list span:last-child { grid-column: 1 / -1; font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.xp.charted .xp-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.xp-foot { margin-top: 28px; }

@media (max-width: 900px) {
  .about-hi { grid-template-columns: 1fr; min-height: 0; }
  .hi-pic { justify-self: center; }
}
.xp-row .who .nm small { display: none; }
@media (max-width: 760px) {
  /* the chart stays on a phone: each place gets its own line (logo, name, role and dates) with its bar full width
     under it, and the years shorten to ’18, ’19 so they fit */
  .xp-head .hand { display: none; }
  .xp-chart { --label: 0px; }
  .xp-axis { height: 18px; }
  .xp-axis span { font-size: 0; }
  .xp-axis span::after { content: attr(data-short); font-size: 10px; }
  .xp-lines { display: none; }                              /* drawn in each lane instead, so they stay off the names */
  .xp-rows { gap: 20px; margin-top: 14px; }
  .xp-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .xp-row .who { flex: 0 0 auto; padding-right: 0; gap: 10px; }
  .xp-row .who i { width: 30px; height: 30px; border-radius: 8px; }
  .xp-row .who .nm { display: grid; gap: 2px; line-height: 1.2; }
  .xp-row .who .nm small { display: block; font: 500 11px/1.35 var(--mono); color: var(--text-3); }
  .xp-row .lane { flex: 0 0 26px; box-shadow: inset -1px 0 0 var(--edge-2);
    background: linear-gradient(90deg, var(--edge-2) 1px, transparent 1px) 0 0 / calc(100% / var(--years, 9)) 100%; }
  .xp-block .bar { border-radius: 8px; }
  .xp-block .tip { display: none; }
  .v-card { grid-template-columns: 1fr; row-gap: 22px; }
  .v-meta { position: static; padding-top: 0; }
  .v-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; padding: 26px 16px 28px; border-radius: 16px; }
  .v-board .sticky { min-height: 120px; padding: 22px 12px 14px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-block .bar, .xp-block .tip, .hi-pic, .v-board > li { transition: none; }
  .version.now .v-era::before { animation: none; }
}


/* ======================================================================= squircles and the cursor ============== */
/* Every rounded corner is a squircle where the browser can draw one (corner-shape), with the radii raised a little to
   keep the same visual softness; true circles stay circles. Browsers without corner-shape keep the round corners,
   drawn natively. (A script once redrew every rounded element as an SVG squircle in Safari and Firefox; it replaced
   real backgrounds, borders and shadows, misdrew framed images and the nav, and re-rendered on every resize frame, so
   it was removed. Round corners there are the intended fallback.) */
@supports (corner-shape: squircle) {
  *, *::before, *::after { corner-shape: squircle; }
  .window .bar i, .xp-list li::before, .menu-btn, .sparkle, .pin-note > button, .fx-expand { corner-shape: round; }
  .btn { border-radius: 14px; }
  .nav { --nav-r: 20px; }
  .nav-links a { border-radius: 11px; }
  .frame { border-radius: 14px; }
  .skill { border-radius: 16px; }
  .row .thumb, .p-title .icon { border-radius: 28px; }
  .sticker { border-radius: 22px; }
  .st-swatch { border-radius: 14px; }
  .polaroid, .v-board .snap { border-radius: 10px; }
  .polaroid .pic { border-radius: 6px; }
  .window { border-radius: 18px; }
  .fx { border-radius: 18px; }
  .fx-skel i { border-radius: 12px; }
  .window img { border-radius: 0 0 17px 17px; }
  .figure .shot { border-radius: 16px; }
  .phone-tile { border-radius: 40px; }
  .phone-tile img { border-radius: 32px; }
  .xp-block .bar { border-radius: 16px; }
  .brief { border-radius: 28px; }
  .brief input, .brief select, .brief textarea { border-radius: 16px; }
  .zoombar { border-radius: 20px; }
  .zoombar button { border-radius: 12px; }
  .facts { border-radius: 14px; }
  .tag, .tbc { border-radius: 9px; }
  .soc { border-radius: 14px; }
  .chips li, .p-tags span { border-radius: 999px; }
}

/* the default pointer is a design-tool canvas arrow; links and controls keep the hand */
html, body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.2v15.6l4.3-4.1 2.8 6.4 2.5-1.1-2.8-6.3H18z' fill='%23111' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, default; }


/* ======================================================================= light mode ========================== */
[data-theme="light"] {
  color-scheme: light;
  --canvas: #f2f1ed;
  --grid: rgba(25, 27, 30, .06);
  --frame: #ffffff;
  --frame-2: #f7f6f3;
  --edge: #e4e2dc;
  --edge-2: #d5d2cb;
  --text: #191b1e;
  --text-2: #4b4f55;
  --text-3: #6a6f75;
  --dim: #b9bcc0;
  --select-text: #6a4ce6;           /* 5.5:1 on white */
  --nav-bg: rgba(255, 255, 255, .86);
  --ruler-bg: rgba(242, 241, 237, .88);
  --hover: rgba(25, 27, 30, .06);
  --tick: rgba(25, 27, 30, .16);
  --tick-strong: rgba(25, 27, 30, .38);
}
[data-theme="light"] .nav-glass, [data-theme="light"] .zoombar { box-shadow: 0 14px 40px -26px rgba(25, 27, 30, .35); }
[data-theme="light"] .skill .art-sm svg [fill="#1b1b1b"], [data-theme="light"] .chip-pen rect { fill: #f1f0ec; }
[data-theme="light"] .skill .art-sm svg [stroke="#444"], [data-theme="light"] .skill .art-sm svg [stroke="#555"] { stroke: #c9c6bf; }
[data-theme="light"] .skill .art-sm svg [fill="#555"], [data-theme="light"] .skill .art-sm svg [fill="#666"],
[data-theme="light"] .skill .art-sm svg [fill="#444"] { fill: #c9c6bf; }
[data-theme="light"] .skill .art-sm svg [stroke="#666"] { stroke: #b3b0a9; }
[data-theme="light"] .skill .art-sm svg text[fill="#f3f3f3"], [data-theme="light"] .skill .art-sm svg rect[fill="#f3f3f3"] { fill: #191b1e; }
[data-theme="light"] .skill .art-sm svg rect[fill="#f3f3f3"] + text { fill: #fff; }
[data-theme="light"] .skill .art-sm svg [fill="#e8e8e8"] { fill: #e2e0da; }
[data-theme="light"] .skill .art-sm svg [stroke="#e8e8e8"] { stroke: #8a8780; }
[data-theme="light"] .skill .art-sm svg circle[fill="#131313"] { fill: #fff; }
[data-theme="light"] .v-board { background: radial-gradient(circle, var(--dot) 1px, transparent 1.5px) center / 18px 18px, var(--board);
  box-shadow: inset 0 0 0 1px var(--board-edge), inset 0 20px 50px -34px rgba(72, 56, 44, .25); }
[data-theme="light"] .version.now .v-board { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--select) 50%, transparent); }
[data-theme="light"] .v-board .sticky, [data-theme="light"] .v-board .snap { box-shadow: 0 1px 1px rgba(72, 56, 44, .1), 0 16px 24px -16px rgba(72, 56, 44, .45); }
[data-theme="light"] .xp-row .who i { background: #191b1e; color: #fff; }
[data-theme="light"] .row .thumb, [data-theme="light"] .p-title .icon { border-color: #fff; box-shadow: 0 10px 24px -12px rgba(25, 27, 30, .35); }
[data-theme="light"] .statement { color: #878b91; }   /* 3.4:1, display size */
[data-theme="light"] .polaroid { box-shadow: 0 30px 60px -34px rgba(25, 27, 30, .45); }
[data-theme="light"] .ruler-in { background: linear-gradient(#9a9a9a 1px, transparent 1px) right top / 8px 120px repeat-y,
    linear-gradient(rgba(25, 27, 30, .2) 1px, transparent 1px) right top / 4px 24px repeat-y; }
[data-theme="light"] .footer { background: repeating-linear-gradient(90deg, var(--edge-2) 0 1px, transparent 1px 12px) top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--edge-2) 0 1px, transparent 1px 120px) top / 100% 14px no-repeat; }
/* the theme change: a guide pulled out of the ruler reveals the new theme behind it (site.js). The two renders do not
   crossfade; the new one is clipped open from the left. Without view transitions the colours crossfade once instead. */
html.theme-sweep::view-transition-old(root), html.theme-sweep::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-guide { position: fixed; z-index: 90; top: 0; bottom: 0; left: 0; width: 0; pointer-events: none; }
.theme-guide i, .theme-guide b { position: absolute; display: block; }
.tg-line { top: 0; bottom: 0; left: -1px; width: 1px; background: var(--select); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--select) 35%, transparent); }
.tg-ticks { top: 0; bottom: 0; left: -10px; width: 9px;
  background: linear-gradient(var(--select) 1px, transparent 1px) right top / 9px 120px repeat-y,
    linear-gradient(color-mix(in srgb, var(--select) 70%, transparent) 1px, transparent 1px) right top / 5px 24px repeat-y; }
.tg-measure { top: calc(var(--nav-space) + 26px); right: 1px; width: 1px; height: 1px; transform-origin: right center;
  background: var(--select); }                     /* scaled to the guide's x: the distance back to the ruler */
.tg-badge { top: calc(var(--nav-space) + 34px); right: 8px; padding: 4px 6px; border-radius: 4px; background: var(--select); color: #fff;
  font: 500 10px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.theming, html.theming * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important; }


/* ======================================================================= page transition ===================== */
/* Leaving a page, a fresh artboard slides in from the left with a ruler on each edge and the next page's name in a
   selection box; the next page starts under it and the artboard carries on off to the right. The nav stays on top,
   so its ruler range glides to the new page's link. Skipped under reduced motion. */
.pt { position: fixed; inset: 0; z-index: 9; pointer-events: none; display: grid; place-items: center; color: var(--text);
  background-color: var(--canvas);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px; background-position: calc(50% + .5px) -1px;
  transform: translateX(-100%); will-change: transform; }
.pt.cover, .pt.in { transform: none; }
.pt.in { transition: transform .5s cubic-bezier(.76, 0, .24, 1); }
.pt.out { transform: translateX(100%); transition: transform .62s cubic-bezier(.76, 0, .24, 1); }
.pt-edge { position: absolute; top: 0; bottom: 0; width: 28px; background-color: var(--ruler-bg); }
.pt-r { right: -28px; border-left: 1.5px solid var(--select);
  background-image: linear-gradient(var(--tick-strong) 1px, transparent 1px), linear-gradient(var(--tick) 1px, transparent 1px);
  background-size: 14px 40px, 7px 8px; background-position: left top, left top; background-repeat: repeat-y; }
.pt-l { left: -28px; border-right: 1.5px solid var(--select);
  background-image: linear-gradient(var(--tick-strong) 1px, transparent 1px), linear-gradient(var(--tick) 1px, transparent 1px);
  background-size: 14px 40px, 7px 8px; background-position: right top, right top; background-repeat: repeat-y; }
.pt-label { display: grid; justify-items: center; gap: 14px; opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease .12s, transform .4s cubic-bezier(.16, 1, .3, 1) .12s; }
.pt.cover .pt-label, .pt.in .pt-label { opacity: 1; transform: none; }
.pt.out .pt-label { opacity: 0; transition: opacity .2s ease; }
.pt-to, .pt-dims { font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.pt-dims { color: var(--select); }
.pt-name { position: relative; padding: .02em .14em .08em; font: 760 clamp(56px, 9vw, 132px)/.9 var(--display); letter-spacing: -.045em; }
.pt-name::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid var(--select);
  background: linear-gradient(var(--select), var(--select)) top left / 8px 8px no-repeat,
    linear-gradient(var(--select), var(--select)) top right / 8px 8px no-repeat,
    linear-gradient(var(--select), var(--select)) bottom left / 8px 8px no-repeat,
    linear-gradient(var(--select), var(--select)) bottom right / 8px 8px no-repeat; }
@media (prefers-reduced-motion: reduce) { .pt { display: none; } }

/* experience chart: a company's own logo in place of its initial, on white in both themes */
.xp-row .who i.logo, [data-theme="light"] .xp-row .who i.logo { background: none; overflow: visible; }
.xp-row .who i.logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* an organisation with no published logo keeps its initial, on a quiet outlined tile rather than a white one */
.xp-row .who i:not(.logo), [data-theme="light"] .xp-row .who i:not(.logo) { background: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--edge-2); }

/* the phone's project card, after the squircle and light-mode rules that would otherwise round and outline it as the
   small desktop icon */
@media (max-width: 720px) {
  .row .thumb, [data-theme="light"] .row .thumb { border: 1px solid var(--edge); border-radius: 14px; box-shadow: none; }
  @supports (corner-shape: squircle) { .row .thumb, [data-theme="light"] .row .thumb { border-radius: 20px; } }
}
/* a handwritten note's arrow points at what it is about: beside the title on a wide screen, above it once it wraps */
@media (max-width: 720px) { .work-head .hand-arr { display: inline-block; rotate: 90deg; } }

/* the cursor's meteor tail (cursor.js): above everything, never in the way of a click */
.meteor { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483000; pointer-events: none; }

/* ---- the work page: a library of the projects, as artboards in a design file ---- */
.wk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(24px, 4vw, 64px); }
.wk-intro h1 { font-size: clamp(72px, 12vw, 176px); display: flex; align-items: flex-start; gap: 10px; }
.wk-total { margin-top: .5em; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--select-text); }
.wk-note { margin: 6px 0 0; font-size: clamp(22px, 2.2vw, 28px); }
.wk-intro .lead { max-width: 34em; margin-top: 16px; color: var(--text-2); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }
@keyframes wk-in { from { opacity: 0; translate: 0 10px; } }

/* beside the title: the three latest projects, piled like notes; the front one flies off and comes back behind */
.wk-stack { position: relative; align-self: center; width: clamp(300px, 34vw, 500px); margin-right: clamp(0px, 2vw, 32px); }
.wk-stack-cards { position: relative; aspect-ratio: 1.12; }
.wk-card-s { position: absolute; left: 6%; right: 6%; top: 8%; padding: 10px 10px 0; border-radius: 6px; background: #fff; color: #2a2412;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 30px 50px -28px rgba(0, 0, 0, .8);
  transition: transform .8s cubic-bezier(.34, 1.2, .64, 1), opacity .5s ease, box-shadow .6s ease; }
.wk-card-s img { display: block; width: 100%; height: auto; aspect-ratio: 808 / 632; object-fit: cover; border-radius: 3px; }
.wk-card-cap { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 4px 11px; }
.wk-card-cap .hand { font-size: 22px; line-height: 1; }
.wk-card-cap .mono { font-size: 11px; color: #8a8478; }
.wk-card-s[data-pos="0"] { z-index: 3; transform: rotate(-2deg); }
.wk-card-s[data-pos="1"] { z-index: 2; transform: translate(5%, -7%) rotate(4deg) scale(.95); box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 18px 30px -24px rgba(0, 0, 0, .7); }
.wk-card-s[data-pos="2"] { z-index: 1; transform: translate(-5%, -12%) rotate(-6deg) scale(.9); box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 12px 24px -22px rgba(0, 0, 0, .6); }
.wk-card-s[data-pos="out"] { z-index: 4; transform: translate(70%, 6%) rotate(16deg) scale(.96); opacity: 0;
  transition: transform .45s cubic-bezier(.5, 0, .75, 0), opacity .45s ease; }
.wk-card-s .wk-tape { position: absolute; left: 50%; top: -10px; z-index: 1; width: 78px; height: 22px; translate: -50% 0; rotate: -3deg; background: rgba(246, 224, 139, .85); }
.wk-card-s:nth-child(2) .wk-tape { background: rgba(200, 184, 242, .85); rotate: 4deg; }
.wk-card-s:nth-child(3) .wk-tape { background: rgba(245, 164, 147, .8); }
.wk-stack-note { position: absolute; left: -12%; top: -2%; z-index: 4; margin: 0; font-size: clamp(20px, 2vw, 26px); rotate: -8deg; color: var(--text-2); }
.wk-stack-dots { position: absolute; right: 8%; bottom: 3%; display: flex; gap: 6px; }
.wk-stack-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--edge-2); transition: width .4s cubic-bezier(.16, 1, .3, 1), background .3s ease; }
.wk-stack-dots i.on { width: 20px; background: var(--select); }

/* the tools: one bar like the nav (search, sort, view); under it the types as tabs on a ruler, as in the process */
.wk-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.wk-bar { display: flex; align-items: center; min-width: 0; height: 60px; padding: 0 8px 0 0; border: 1px solid var(--edge-2); border-radius: 16px;
  background: var(--canvas); transition: border-color .2s ease, box-shadow .3s ease; }
.wk-bar:focus-within { border-color: color-mix(in srgb, var(--select) 70%, var(--edge-2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--select) 14%, transparent); }
.wk-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 12px 0 20px; cursor: text; }
.wk-search > svg { flex: none; width: 20px; height: 20px; color: var(--text-3); transition: color .2s ease, scale .3s cubic-bezier(.34, 1.56, .64, 1); }
.wk-search:focus-within > svg { color: var(--select-text); scale: 1.08; }
.wk-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: 400 17px/1 var(--body); }
.wk-search input::placeholder { color: var(--text-3); }
.wk-search input::-webkit-search-cancel-button { display: none; }
.wk-search kbd { padding: 3px 8px; border: 1px solid var(--edge-2); border-radius: 6px; font-size: 12px; color: var(--text-3); }
.wk-search:focus-within kbd { display: none; }
.wk-clear { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--hover); color: var(--text-2); cursor: var(--pointer, pointer); }
.wk-clear svg { width: 12px; height: 12px; }
.wk-clear[hidden] { display: none; }
.wk-div { flex: none; width: 1px; height: 26px; background: var(--edge-2); }
.wk-view { position: relative; display: flex; gap: 2px; margin-left: 8px; padding: 3px; border-radius: 10px; background: var(--frame-2); }
.wk-view button { display: grid; place-items: center; width: 36px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); cursor: var(--pointer, pointer);
  transition: background .25s ease, color .25s ease; }
.wk-view svg { width: 16px; height: 16px; }
.wk-view button[aria-pressed="true"] { background: var(--text); color: var(--canvas); }
.wk-filter { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; min-width: 0; padding-bottom: 14px; }
.wk-tabs { display: flex; gap: clamp(18px, 2.6vw, 36px); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wk-tab { flex: none; display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border: 0; background: none; cursor: var(--pointer, pointer);
  font: 760 clamp(20px, 1.9vw, 26px)/1 var(--display); letter-spacing: -.03em; color: var(--text-3); transition: color .25s ease; }
.wk-tab:hover { color: var(--text-2); }
.wk-tab[aria-pressed="true"] { color: var(--text); }
.wk-tab:focus-visible { outline: 2px solid var(--select); outline-offset: 4px; border-radius: 4px; }
/* the ruler under the tabs, its ticks like the nav's, and the purple range on the tab that's on */
.wk-ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; border-top: 1px solid var(--edge-2); pointer-events: none;
  background: linear-gradient(90deg, var(--edge-2) 1px, transparent 1px) left top / 12px 5px repeat-x, linear-gradient(90deg, var(--edge-2) 1px, transparent 1px) left top / 60px 9px repeat-x; }
.wk-range { position: absolute; left: 0; top: -1px; height: 9px; width: 0; border-top: 2px solid var(--select); background: color-mix(in srgb, var(--select) 22%, transparent);
  transition: translate .5s cubic-bezier(.34, 1.25, .64, 1), width .5s cubic-bezier(.34, 1.25, .64, 1); }
.wk-status { margin: 22px 0 14px; font-size: 12px; color: var(--text-3); }

/* the cards: artboards with their label and size above, a selection box and a collaborator's cursor on hover */
.wk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 34px 22px; }
.wk-card { min-width: 0; }
.wk-link { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.wk-shot { position: relative; display: block; aspect-ratio: 808 / 632; border-radius: 12px; overflow: visible; background: var(--frame-2); }
.wk-shot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid var(--edge); transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .4s ease; }
.wk-sel { position: absolute; inset: -6px; border: 1.5px solid var(--select); border-radius: 15px; opacity: 0; scale: 1.02; pointer-events: none;
  transition: opacity .25s ease, scale .45s cubic-bezier(.16, 1, .3, 1); }
.wk-sel i { position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--select); border-radius: 2px; background: var(--canvas); }
.wk-sel i:nth-child(1) { left: -5px; top: -5px; } .wk-sel i:nth-child(2) { right: -5px; top: -5px; }
.wk-sel i:nth-child(3) { left: -5px; bottom: -5px; } .wk-sel i:nth-child(4) { right: -5px; bottom: -5px; }
.wk-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; margin-top: 6px; }
.wk-words { display: grid; gap: 6px; }
.wk-title { font-size: clamp(26px, 2.4vw, 32px); line-height: 1; letter-spacing: -.035em; }
.wk-sum { font-size: 15px; line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--edge-2); font-size: 17px;
  transition: background .3s ease, color .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1), border-color .3s ease; }
.wk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-tags span { padding: 4px 9px; border: 1px solid var(--edge-2); border-radius: 999px; font: 500 11px/1.2 var(--mono); color: var(--text-3); }
.wk-card mark { padding: 0; border-radius: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--select) 30%, transparent); background: color-mix(in srgb, var(--select) 30%, transparent); color: inherit; }
.wk-link:hover .wk-sel, .wk-link:focus-visible .wk-sel { opacity: 1; scale: 1; }
.wk-link:hover .wk-shot img { transform: scale(1.015); }
.wk-link:hover .wk-go, .wk-link:focus-visible .wk-go { background: var(--text); border-color: var(--text); color: var(--canvas); transform: translateX(4px); }
.wk-link:focus-visible { outline: none; }
/* the list view: one line each, the picture small */
.wk-grid[data-view="list"] { grid-template-columns: 1fr; gap: 10px; }
.wk-grid[data-view="list"] .wk-link { grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: "shot body" "shot tags"; column-gap: 24px; row-gap: 8px;
  align-items: center; padding: 12px; border: 1px solid var(--edge); border-radius: 16px; transition: border-color .2s ease, background .2s ease; }
.wk-grid[data-view="list"] .wk-link:hover { border-color: var(--select); background: var(--frame-2); }
.wk-grid[data-view="list"] .wk-sel { display: none; }
.wk-grid[data-view="list"] .wk-shot { grid-area: shot; }
.wk-grid[data-view="list"] .wk-body { grid-area: body; margin: 0; }
.wk-grid[data-view="list"] .wk-tags { grid-area: tags; }
/* nothing found */
.wk-empty { display: grid; justify-items: center; gap: 22px; padding: 40px 0 20px; }
.wk-empty[hidden] { display: none; }
.wk-empty .sticky { rotate: -3deg; font-size: 22px; animation: wk-drop .6s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes wk-drop { from { opacity: 0; translate: 0 -24px; rotate: -10deg; } }
/* cards gliding between layouts */
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
@media (max-width: 720px) {
  .wk-head { grid-template-columns: 1fr; }
  .wk-stack { width: min(100%, 360px); justify-self: center; margin: 10px 0 10px; }
  .wk-stack-note { left: 0; top: -9%; }
  .wk-bar { height: 54px; }
  .wk-search { padding-left: 16px; }
  .wk-search input { font-size: 16px; }
  .wk-search kbd { display: none; }
  .wk-filter { flex-direction: column; align-items: stretch; gap: 12px; }
  .wk-tabs { margin: 0 calc(-1 * var(--pad, 20px)); padding: 0 var(--pad, 20px); }
  .wk-grid[data-view="list"] .wk-link { grid-template-columns: 96px minmax(0, 1fr); }
  .wk-go { display: none; }
  .wk-body { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .wk-empty .sticky { animation: none; } .wk-range, .wk-card-s { transition: none; animation: none; } }
[data-theme="light"] .wk-bar { background: #fff; }
.work-all { margin-top: 28px; }

/* a project that isn't featured: on the work page, not on the home page */
#work .rows > li[data-more] { display: none; }

/* an item added in the studio pops in (a Playground item from nothing; anything else from a little smaller); one taken
   away shrinks and fades */
[data-item].pop-in { animation: item-pop-soft .6s cubic-bezier(.34, 1.4, .64, 1) both; }
[data-item].pop-out { animation: item-gone .32s cubic-bezier(.5, 0, .75, 0) both; pointer-events: none; }
@keyframes item-pop-soft { 0% { opacity: 0; scale: .86; filter: blur(5px); } 60% { opacity: 1; scale: 1.02; filter: blur(0); } 100% { scale: 1; } }
.world .item.pop-in { animation: item-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.world .item.pop-out { animation: item-gone .32s cubic-bezier(.5, 0, .75, 0) both; pointer-events: none; }
@keyframes item-pop { 0% { opacity: 0; scale: .3; filter: blur(4px); } 55% { opacity: 1; scale: 1.08; filter: blur(0); } 78% { scale: .97; } 100% { scale: 1; } }
@keyframes item-gone { to { opacity: 0; scale: .5; filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) { .world .item.pop-in, .world .item.pop-out, [data-item].pop-in, [data-item].pop-out { animation: none; } }

/* the things she uses every day: small polaroids, the whole picture, a review on hover */
.polaroid.item.everyday { width: 210px; }
.polaroid.item.everyday .pic { display: grid; place-items: center; padding: 14px; background: var(--board); }
.polaroid.item.everyday .pic img { width: auto; max-width: 100%; max-height: 260px; object-fit: contain; }

/* the cursor (cursor.js): Figma's arrow in the site's purple, drawn as an element; the system cursor steps aside,
   except in text fields. Over a portrait or a tip, a Figma cursor-chat bubble grows out of it and types its message. */
:root { --pointer: pointer; }
html.fc-on, html.fc-on * { cursor: none !important; }
html.fc-on input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.fc-on textarea, html.fc-on [contenteditable="true"] { cursor: text !important; }
.fc { position: fixed; left: 0; top: 0; z-index: 2147483001; pointer-events: none; will-change: transform; transition: opacity .15s ease; }
.fc.is-hidden { opacity: 0; }
.fc svg { display: block; width: 22px; height: 22px; margin: -1px 0 0 -1px; overflow: visible; fill: #8b6cff; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, .35)); transform-origin: 1px 1px; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); }
.fc.is-link svg { transform: scale(1.12); }
.fc.is-down svg { transform: scale(.86); transition-duration: .08s; }
/* the chat bubble: attached at its corner to the arrow's tip, the corner nearest the arrow square, as in Figma */
.fc-say { position: absolute; left: 19px; top: 25px; width: max-content; max-width: 300px; padding: 10px 20px 11px; border-radius: 5px 22px 22px 22px;
  background: #8b6cff; color: #fff; font: 500 15px/1.35 var(--body); letter-spacing: -.005em;
  box-shadow: 0 0 0 1px rgba(60, 30, 150, .22) inset, 0 8px 20px -10px rgba(40, 20, 110, .5);
  box-sizing: border-box; overflow: hidden; transform-origin: 0 0; scale: .5; opacity: 0;
  transition: scale .16s ease-in, opacity .16s ease-in, width .14s cubic-bezier(.2, .8, .3, 1); }
.fc-say span::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin: 0 0 -.18em 1px; background: currentColor; opacity: 0; }
.fc-say.is-typing span::after { animation: fc-caret 1s steps(1) infinite; }
@keyframes fc-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.fc-in { width: max-content; max-width: 260px; }   /* the words keep their own width; the pill grows around them */
.fc-say b { font-weight: 700; margin-right: .35em; }
.fc-say b::after { content: ":"; }
.fc-say b[hidden] { display: none; }
.fc.is-saying .fc-say { scale: 1; opacity: 1; transition: scale .26s cubic-bezier(.3, 1.5, .6, 1), opacity .12s ease-out, width .14s cubic-bezier(.2, .8, .3, 1); }
.fc.is-left .fc-say { left: auto; right: -4px; border-radius: 22px 5px 22px 22px; transform-origin: 100% 0; }
.fc.is-up .fc-say { top: auto; bottom: 4px; border-radius: 22px 22px 22px 5px; transform-origin: 0 100%; }
.fc.is-left.is-up .fc-say { border-radius: 22px 22px 5px 22px; transform-origin: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .fc-say, .fc svg { transition: none; } }
/* with the bubble saying them, the tips themselves stay for the keyboard (and for touch, where there is no hover) */
html.fc-on .gear:hover:not(:focus-visible) .review, html.fc-on .everyday:hover:not(:focus-visible) .review,
html.fc-on .xp-block:hover:not(:focus-visible):not([data-open="true"]) .tip,
html.fc-on .pin-note:hover:not(.open):not(:focus-within) .bubble { opacity: 0; pointer-events: none; }

/* ---- the first-visit intro (intro.js): designers building the page. Before its first paint, html.intro holds back what
   they will bring in; the layer they work on never takes a click. ---- */
html.intro .nav .brand, html.intro .nav-glass, html.intro .nav-ruler, html.intro .nav-mid, html.intro .nav-end,
html.intro #top .frame, html.intro #top .frame-meta { opacity: 0; }
html.intro .nav-in { overflow: visible; }
.dz { position: fixed; inset: 0; z-index: 2147482000; overflow: hidden; pointer-events: none; }
.dz-world { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.dz-world > * { position: absolute; left: 0; top: 0; }
/* a designer: Figma's cursor in their colour, their name on a tag */
.dz-cur { --c: #8b6cff; display: flex; align-items: flex-start; will-change: translate; transition: opacity .2s ease; }
.dz-cur svg { width: 22px; height: 22px; margin: -1px 0 0 -1px; fill: var(--c); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); transform-origin: 1px 1px; transition: transform .15s ease; }
.dz-cur span { margin: 16px 0 0 -4px; padding: 4px 8px; border-radius: 4px 10px 10px 10px; background: var(--c); color: var(--ink, #fff);
  font: 600 12px/1 var(--body); white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); transition: transform .2s ease; }
.dz-cur.is-hold svg { transform: scale(.9); }
.dz-cur.is-hold span { transform: translateY(2px); }
.dz-cur.is-click svg { animation: dz-click .3s ease; }
.dz-cur.is-click::before { content: ""; position: absolute; left: 3px; top: 2px; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 2px solid var(--c); animation: dz-ring .45s ease-out forwards; }
.dz-cur.is-gone { opacity: 0; }
@keyframes dz-click { 40% { transform: scale(.82); } }
@keyframes dz-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
/* what they leave while they work: the selection, its handles, its name and size; guides; spacing */
.dz-sel { --c: #8b6cff; border: 1.5px solid var(--c); border-radius: 3px; animation: dz-in .16s ease-out; transition: opacity .25s ease; }
.dz-sel i { position: absolute; width: 8px; height: 8px; border: 1.5px solid var(--c); border-radius: 1.5px; background: #fff; }
.dz-sel i:nth-child(1) { left: -5px; top: -5px; } .dz-sel i:nth-child(2) { right: -5px; top: -5px; }
.dz-sel i:nth-child(3) { left: -5px; bottom: -5px; } .dz-sel i:nth-child(4) { right: -5px; bottom: -5px; }
.dz-tag { position: absolute; left: -1.5px; bottom: calc(100% + 5px); padding: 2px 6px; border-radius: 3px; background: var(--c); color: #fff;
  font: 600 10.5px/1.3 var(--body); white-space: nowrap; }
.dz-size { position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 0; padding: 2px 6px; border-radius: 3px; background: var(--c); color: #fff;
  font: 500 10.5px/1.3 var(--mono); white-space: nowrap; }
.dz-sel.is-done { opacity: 0; }
.dz-guide { background: #f24e9a; box-shadow: 0 0 0 .5px rgba(242, 78, 154, .4); animation: dz-guide .56s ease-out forwards; }
.dz-measure { padding: 2px 6px; border-radius: 3px; background: #f24e9a; color: #fff; font: 500 10.5px/1.3 var(--mono); white-space: nowrap; animation: dz-guide .7s ease-out forwards; }
.dz-measure.is-frame { background: #8b6cff; animation: none; }
@keyframes dz-in { from { opacity: 0; } }
@keyframes dz-guide { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* the way out */
.dz-skip { position: fixed; z-index: 2147482001; left: 50%; bottom: 22px; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 16px; border: 1px solid var(--edge-2); border-radius: 999px; background: var(--nav-bg); color: var(--text-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 13px/1 var(--body); cursor: var(--pointer, pointer);
  animation: dz-skip .5s ease .8s both; transition: color .2s ease, opacity .3s ease; }
.dz-skip:hover { color: var(--text); }
.dz-skip kbd { padding: 3px 6px; border: 1px solid var(--edge-2); border-radius: 5px; font: 500 11px/1 var(--mono); color: var(--text-3); }
.dz-skip.is-gone { opacity: 0; pointer-events: none; }
@keyframes dz-skip { from { opacity: 0; translate: -50% 10px; } }
@media (max-width: 720px) {
  .dz-cur svg { width: 18px; height: 18px; }
  .dz-cur span { margin-top: 13px; padding: 3px 6px; font-size: 10.5px; }
  .dz-size { display: none; }
  .dz-skip kbd { display: none; }
}

/* an element hidden in the studio (data-off): left off the page; the studio's own canvas still shows it, faded */
html:not(.ms-editing) [data-off] { display: none !important; }